/* skins.css — GENERATED by skins/build_skins.py from skins/skins.base.css.
   Do not edit here: change the source and run `python3 skins/build_skins.py build`. */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   SKINS — a second axis beside light/dark (2026-09-30).

   <html data-skin="…"> picks the skin; <html data-theme="light|dark"> is still the polarity,
   set by the Auto / Light / Dark button exactly as before. Every skin carries both a light and a
   dark palette, so the two axes multiply instead of competing. Classic is the absence of
   data-skin: with no attribute on the root, nothing in this file matches and the app paints
   precisely as it did before this file existed.

   Three layers, in this order:
     1. TOKENS      the app's own colour tokens, re-tinted per skin and mode (generated and
                    contrast-checked by skins/build_skins.py — that script is the source of truth)
     2. PLUMBING    what any skin needs: glass chrome, the backdrop layer, ink on accent fills
     3. CHARACTER   per-skin backdrop art, title, glow, shape and type

   THE LINE SKINS DO NOT CROSS. The table surface (.table-wrap, sticky cells, the header band)
   stays flat and opaque in every skin: app.js shades cells with fixed translucent green and red,
   and a backdrop bleeding through a table would read as heat that is not there. Character lives
   in the chrome around the data, never under it.

   Overrides of the app's own selectors are wrapped in :where(), which adds no specificity: this
   file loads last, so it wins ties, but a more specific rule in the app's CSS still beats it —
   the app's internal cascade is left exactly as it was.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ───────────── 1. tokens (generated) ───────────── */
.sk-tile[data-skin="classic"] {
  --bg: #f6f8fa;
  --panel: #ffffff;
  --border: #e3e8ef;
  --accent: #2962ff;
  --accent-soft: #e8f0fe;
  --text: #1f2933;
  --muted: #6b7684;
  --bull: #1a7f37;
  --bull-bg: #e6f4ea;
  --bear: #c62828;
  --bear-bg: #fdecea;
  --amber: #9a6700;
  --amber-bg: #fff3d6;
  --blue-chip-bg: #e8f0fe;
  --blue-chip: #1a56c4;
  --grey-chip-bg: #eceff3;
  --grey-chip: #57606a;
  --thead: #f9fafc;
  --row-border: #eef1f5;
  --hover: #f4f7fb;
  --sel-wash: rgba(15,23,42,.075);
  --sel-block: rgba(71,85,105,.19);
  --sel-bar: #475569;
  --tile-art: none;
  --accent-grad: none;
}
.sk-tile[data-skin="classic"][data-theme="dark"] {
  --bg: #0d1117;
  --panel: #161b22;
  --border: #30363d;
  --accent: #3b82f6;
  --accent-soft: #1c2a44;
  --text: #e6edf3;
  --muted: #8b949e;
  --bull: #3fb950;
  --bull-bg: #12261e;
  --bear: #f85149;
  --bear-bg: #2d1618;
  --amber: #d29922;
  --amber-bg: #2b2205;
  --blue-chip-bg: #1c2a44;
  --blue-chip: #79b8ff;
  --grey-chip-bg: #21262d;
  --grey-chip: #8b949e;
  --thead: #1a2029;
  --row-border: #21262d;
  --hover: #1c2330;
  --sel-wash: rgba(255,255,255,.09);
  --sel-block: rgba(148,163,184,.22);
  --sel-bar: #cbd5e1;
  --tile-art: none;
  --accent-grad: none;
}
:root[data-skin="synthwave"],
.sk-tile[data-skin="synthwave"],
.sk-tile[data-skin="synthwave"][data-theme="light"] {
  --bg: #f3e6ff;
  --panel: #fffcff;
  --border: #e0c9f4;
  --accent: #ad17cc;
  --accent-soft: #f7e5fa;
  --text: #2b1b4d;
  --muted: #6f6094;
  --bull: #0d774d;
  --bull-bg: #e3eeeb;
  --bear: #cb1653;
  --bear-bg: #fae3ec;
  --amber: #9a5806;
  --amber-bg: #f4e9e2;
  --blue-chip-bg: #e8e9f9;
  --blue-chip: #3d5ad1;
  --grey-chip-bg: #eae6ed;
  --grey-chip: #5e4f82;
  --thead: #f8eeff;
  --row-border: #f0e2fa;
  --hover: #fbf2fd;
  --sel-wash: rgba(43,27,77,0.075);
  --sel-block: rgba(111,96,148,0.2);
  --sel-bar: #544478;
  --accent-2: #0aa7c4;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,252,255,0.74);
  --ground: #f3e6ff;
  --accent-grad: linear-gradient(90deg, #c21fb8, #7c3aed);
  --fx-1: rgba(255,124,200,0.6);
  --fx-2: rgba(92,200,255,0.5);
  --fx-3: rgba(255,180,92,0.8);
  --fx-4: rgba(177,140,255,0.5);
  --fx-grid: rgba(177, 31, 208, .22);
  --tile-art: linear-gradient(125deg, #faa6de 0%, #f3e6ff 50%, #a8d7ff 100%);
  --ink-2: #625385;
  --amber-ink: #874d01;
  --accent-ink: #9709b3;
  --bull-ink: #046842;
  --bear-ink: #a90b43;
  --dim-op: 0.71;
  --seg-mkt: #626a75;
  --seg-ret: #1a766b;
  --seg-val: #765caa;
  --seg-grw: #5c7131;
  --seg-qua: #8e601b;
  --seg-brd: #036c91;
  --seg-rate: #a94e50;
  --seg-eco: #8e5f4e;
  --seg-crv: #3b69b2;
}
:root[data-skin="synthwave"][data-theme="dark"],
.sk-tile[data-skin="synthwave"][data-theme="dark"] {
  --bg: #0c0420;
  --panel: #150b2e;
  --border: #3a2372;
  --accent: #e46bff;
  --accent-soft: #3e1e58;
  --text: #efe9ff;
  --muted: #a193cf;
  --bull: #3df5a0;
  --bull-bg: #132632;
  --bear: #ff5d7a;
  --bear-bg: #2e102d;
  --amber: #ffc857;
  --amber-bg: #2e1f28;
  --blue-chip-bg: #1e2344;
  --blue-chip: #7cc7ff;
  --grey-chip-bg: #22183b;
  --grey-chip: #a193cf;
  --thead: #201242;
  --row-border: #281750;
  --hover: #281441;
  --sel-wash: rgba(239,233,255,0.09);
  --sel-block: rgba(161,147,207,0.24);
  --sel-bar: #d0c7ec;
  --accent-2: #35e3ff;
  --on-accent: #080315;
  --on-flat: #080315;
  --glass: rgba(21,11,46,0.72);
  --ground: #0c0420;
  --accent-grad: linear-gradient(90deg, #ff6bd6, #b77bff);
  --fx-1: rgba(255,61,148,0.62);
  --fx-2: rgba(53,227,255,0.34);
  --fx-3: rgba(255,194,60,0.72);
  --fx-4: rgba(168,85,247,0.46);
  --fx-grid: rgba(255, 92, 214, .55);
  --tile-art: linear-gradient(125deg, #a32768 0%, #0c0420 50%, #1a506c 100%);
  --ink-2: #a193cf;
  --amber-ink: #ffc857;
  --accent-ink: #e46bff;
  --bull-ink: #3df5a0;
  --bear-ink: #ff5d7a;
  --dim-op: 0.56;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="matrix"],
.sk-tile[data-skin="matrix"],
.sk-tile[data-skin="matrix"][data-theme="light"] {
  --bg: #e6eedf;
  --panel: #fbfdf8;
  --border: #c3d8ba;
  --accent: #083a20;
  --accent-soft: #e6ece6;
  --text: #11251a;
  --muted: #536d5c;
  --bull: #007949;
  --bull-bg: #dfeee4;
  --bear: #c62d2d;
  --bear-bg: #f5e5e1;
  --amber: #905e08;
  --amber-bg: #efebdb;
  --blue-chip-bg: #e1ebf0;
  --blue-chip: #1f66b3;
  --grey-chip-bg: #e4e7e2;
  --grey-chip: #425b4c;
  --thead: #eef4e8;
  --row-border: #dfebd9;
  --hover: #f0f4ee;
  --sel-wash: rgba(17,37,26,0.075);
  --sel-block: rgba(83,109,92,0.2);
  --sel-bar: #395042;
  --accent-2: #1f8a3f;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(251,253,248,0.78);
  --ground: #e6eedf;
  --accent-grad: none;
  --fx-1: rgba(15,79,42,0.1);
  --fx-2: rgba(46,158,79,0.3);
  --fx-scan: transparent;
  --tile-art: linear-gradient(125deg, #d0decd 0%, #e6eedf 50%, #afd6b4 100%);
  --ink-2: #476150;
  --amber-ink: #7f5104;
  --accent-ink: #083a20;
  --bull-ink: #076940;
  --bear-ink: #af0c18;
  --dim-op: 0.70;
  --seg-mkt: #626a75;
  --seg-ret: #1c776d;
  --seg-val: #755caa;
  --seg-grw: #5d7232;
  --seg-qua: #8e601b;
  --seg-brd: #036c91;
  --seg-rate: #a94e50;
  --seg-eco: #8e5f4e;
  --seg-crv: #3d6ab3;
}
:root[data-skin="matrix"][data-theme="dark"],
.sk-tile[data-skin="matrix"][data-theme="dark"] {
  --bg: #020a04;
  --panel: #07130b;
  --border: #1a4f2b;
  --accent: #c9ff3d;
  --accent-soft: #253813;
  --text: #d9f7de;
  --muted: #74a883;
  --bull: #2ee6a0;
  --bull-bg: #08291a;
  --bear: #ff5a5a;
  --bear-bg: #251510;
  --amber: #ffb62e;
  --amber-bg: #25220a;
  --blue-chip-bg: #102a2c;
  --blue-chip: #5ad1ff;
  --grey-chip-bg: #142118;
  --grey-chip: #74a883;
  --thead: #0d2515;
  --row-border: #10311b;
  --hover: #182810;
  --sel-wash: rgba(217,247,222,0.09);
  --sel-block: rgba(116,168,131,0.24);
  --sel-bar: #b1d7ba;
  --accent-2: #00ff66;
  --on-accent: #010603;
  --on-flat: #010603;
  --glass: rgba(7,19,11,0.7);
  --ground: #020a04;
  --accent-grad: none;
  --fx-1: rgba(180,255,200,0.45);
  --fx-2: rgba(0,255,102,0.3);
  --fx-scan: rgba(0, 0, 0, .17);
  --tile-art: linear-gradient(125deg, #52785c 0%, #020a04 50%, #015321 100%);
  --ink-2: #74a883;
  --amber-ink: #ffb62e;
  --accent-ink: #c9ff3d;
  --bull-ink: #2ee6a0;
  --bear-ink: #ff6764;
  --dim-op: 0.56;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c86d6d;
  --seg-eco: #ae7c6a;
  --seg-crv: #5688d4;
}
:root[data-skin="aurora"],
.sk-tile[data-skin="aurora"],
.sk-tile[data-skin="aurora"][data-theme="light"] {
  --bg: #edf2fa;
  --panel: #ffffff;
  --border: #d7e0f0;
  --accent: #4a4fe0;
  --accent-soft: #f0f0fc;
  --text: #14213a;
  --muted: #5b6a84;
  --bull: #027b47;
  --bull-bg: #e3f0ea;
  --bear: #c92946;
  --bear-bg: #f9e7ea;
  --amber: #966000;
  --amber-bg: #f3ede2;
  --blue-chip-bg: #e5ecf9;
  --blue-chip: #2563c9;
  --grey-chip-bg: #e8e9eb;
  --grey-chip: #495872;
  --thead: #f4f7fc;
  --row-border: #ebf0f8;
  --hover: #f7f7fe;
  --sel-wash: rgba(20,33,58,0.075);
  --sel-block: rgba(91,106,132,0.2);
  --sel-bar: #3f4d66;
  --accent-2: #14b8a6;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.7);
  --ground: #edf2fa;
  --accent-grad: none;
  --fx-1: rgba(52,224,161,0.46);
  --fx-2: rgba(143,123,255,0.42);
  --fx-3: rgba(76,195,255,0.44);
  --fx-4: rgba(255,138,201,0.34);
  --tile-art: linear-gradient(125deg, #98ead1 0%, #edf2fa 50%, #c6c0fc 100%);
  --ink-2: #4e5c75;
  --amber-ink: #815306;
  --accent-ink: #474bdc;
  --bull-ink: #026e3f;
  --bear-ink: #b50837;
  --dim-op: 0.70;
  --seg-mkt: #676f79;
  --seg-ret: #1f7a70;
  --seg-val: #7a60ad;
  --seg-grw: #5f7535;
  --seg-qua: #926420;
  --seg-brd: #036c91;
  --seg-rate: #ad5253;
  --seg-eco: #926351;
  --seg-crv: #3f6db6;
}
:root[data-skin="aurora"][data-theme="dark"],
.sk-tile[data-skin="aurora"][data-theme="dark"] {
  --bg: #050a16;
  --panel: #0c1424;
  --border: #22304c;
  --accent: #6cc4ff;
  --accent-soft: #1c3249;
  --text: #e8f1ff;
  --muted: #8a9bb8;
  --bull: #46e08b;
  --bull-bg: #0e2826;
  --bear: #ff6470;
  --bear-bg: #281723;
  --amber: #f2c14e;
  --amber-bg: #26241e;
  --blue-chip-bg: #1f263b;
  --blue-chip: #a9b6ff;
  --grey-chip-bg: #192131;
  --grey-chip: #8a9bb8;
  --thead: #131c30;
  --row-border: #172238;
  --hover: #152438;
  --sel-wash: rgba(232,241,255,0.09);
  --sel-block: rgba(138,155,184,0.24);
  --sel-bar: #c2cfe3;
  --accent-2: #4dffb5;
  --on-accent: #03060e;
  --on-flat: #03060e;
  --glass: rgba(12,20,36,0.66);
  --ground: #050a16;
  --accent-grad: none;
  --fx-1: rgba(45,255,160,0.42);
  --fx-2: rgba(139,92,246,0.52);
  --fx-3: rgba(34,211,238,0.38);
  --fx-4: rgba(255,92,168,0.26);
  --tile-art: linear-gradient(125deg, #167150 0%, #050a16 50%, #4b358a 100%);
  --ink-2: #8a9bb8;
  --amber-ink: #f2c14e;
  --accent-ink: #6cc4ff;
  --bull-ink: #46e08b;
  --bear-ink: #ff6470;
  --dim-op: 0.55;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="acid"],
.sk-tile[data-skin="acid"],
.sk-tile[data-skin="acid"][data-theme="light"] {
  --bg: #ffefd2;
  --panel: #fffdf8;
  --border: #ecd3a8;
  --accent: #7a2bd6;
  --accent-soft: #f0e6f4;
  --text: #2d1a0e;
  --muted: #7b6350;
  --bull: #117b33;
  --bull-bg: #e5efe2;
  --bear: #c62d29;
  --bear-bg: #f9e5e1;
  --amber: #965800;
  --amber-bg: #f3eadb;
  --blue-chip-bg: #e5eaf2;
  --blue-chip: #2a62c9;
  --grey-chip-bg: #eae6e1;
  --grey-chip: #685140;
  --thead: #fff4e0;
  --row-border: #f6e8d0;
  --hover: #f9f4f6;
  --sel-wash: rgba(45,26,14,0.075);
  --sel-block: rgba(123,99,80,0.2);
  --sel-bar: #5c4636;
  --accent-2: #ff6a00;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,253,248,0.74);
  --ground: #ffefd2;
  --accent-grad: linear-gradient(90deg, #8a2be2, #c2257f);
  --fx-1: rgba(255,79,163,0.5);
  --fx-2: rgba(255,122,26,0.52);
  --fx-3: rgba(255,212,0,0.62);
  --fx-4: rgba(25,184,166,0.42);
  --tile-art: linear-gradient(125deg, #ff9fba 0%, #ffefd2 50%, #ffb272 100%);
  --ink-2: #6e5744;
  --amber-ink: #844e08;
  --accent-ink: #7a2bd6;
  --bull-ink: #026e2a;
  --bear-ink: #b21116;
  --dim-op: 0.69;
  --seg-mkt: #666e77;
  --seg-ret: #1f7a70;
  --seg-val: #7a60ad;
  --seg-grw: #5e7434;
  --seg-qua: #91631e;
  --seg-brd: #036c91;
  --seg-rate: #ac5353;
  --seg-eco: #916250;
  --seg-crv: #3f6eb5;
}
:root[data-skin="acid"][data-theme="dark"],
.sk-tile[data-skin="acid"][data-theme="dark"] {
  --bg: #12050f;
  --panel: #1b0b18;
  --border: #4d2247;
  --accent: #c98aff;
  --accent-soft: #3e2446;
  --text: #fdeeff;
  --muted: #b897ba;
  --bull: #4fe38a;
  --bull-bg: #1b2420;
  --bear: #ff6161;
  --bear-bg: #33121a;
  --amber: #ffd23f;
  --amber-bg: #332216;
  --blue-chip-bg: #212235;
  --blue-chip: #6fb8ff;
  --grey-chip-bg: #291926;
  --grey-chip: #b897ba;
  --thead: #2a1226;
  --row-border: #341630;
  --hover: #2b162d;
  --sel-wash: rgba(253,238,255,0.09);
  --sel-block: rgba(184,151,186,0.24);
  --sel-bar: #e1cbe3;
  --accent-2: #ff8a00;
  --on-accent: #0c030a;
  --on-flat: #0c030a;
  --glass: rgba(27,11,24,0.7);
  --ground: #12050f;
  --accent-grad: linear-gradient(90deg, #ff8ad8, #c98aff, #ffb35c);
  --fx-1: rgba(255,46,147,0.56);
  --fx-2: rgba(255,138,0,0.5);
  --fx-3: rgba(0,229,208,0.32);
  --fx-4: rgba(122,43,255,0.62);
  --tile-art: linear-gradient(125deg, #971c59 0%, #12050f 50%, #884708 100%);
  --ink-2: #b897ba;
  --amber-ink: #ffd23f;
  --accent-ink: #c98aff;
  --bull-ink: #4fe38a;
  --bear-ink: #fd6665;
  --dim-op: 0.54;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="prism"],
.sk-tile[data-skin="prism"],
.sk-tile[data-skin="prism"][data-theme="light"] {
  --bg: #f0f1f8;
  --panel: #ffffff;
  --border: #dadef0;
  --accent: #5a3df0;
  --accent-soft: #eeecfe;
  --text: #181a2e;
  --muted: #616680;
  --bull: #007b4c;
  --bull-bg: #e3f0eb;
  --bear: #cb234b;
  --bear-bg: #fae7eb;
  --amber: #936000;
  --amber-bg: #f3ede2;
  --blue-chip-bg: #e6ecfa;
  --blue-chip: #2b62d9;
  --grey-chip-bg: #e8e8ea;
  --grey-chip: #4f536c;
  --thead: #f6f6fb;
  --row-border: #eceef8;
  --hover: #f8f6fe;
  --sel-wash: rgba(24,26,46,0.075);
  --sel-block: rgba(97,102,128,0.2);
  --sel-bar: #44485f;
  --accent-2: #00a3c7;
  --on-accent: #1b1440;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.68);
  --ground: #f0f1f8;
  --accent-grad: linear-gradient(90deg, #ffb8e0, #c5ccff, #aeeeff);
  --fx-1: rgba(255,143,210,0.6);
  --fx-2: rgba(147,168,255,0.6);
  --fx-3: rgba(127,227,255,0.6);
  --fx-4: rgba(255,226,122,0.6);
  --fx-edge-a: #ff9ed8;
  --fx-edge-b: #6fd3ff;
  --fx-sheen: rgba(255, 255, 255, .8);
  --tile-art: linear-gradient(125deg, #f9b6e1 0%, #f0f1f8 50%, #b8c5fc 100%);
  --ink-2: #565b74;
  --amber-ink: #7f5305;
  --accent-ink: #583aed;
  --bull-ink: #0a6c43;
  --bear-ink: #b3083d;
  --dim-op: 0.68;
  --seg-mkt: #676f79;
  --seg-ret: #1f7a70;
  --seg-val: #7a60ad;
  --seg-grw: #5f7535;
  --seg-qua: #926420;
  --seg-brd: #036c91;
  --seg-rate: #ac5353;
  --seg-eco: #926351;
  --seg-crv: #3f6db6;
}
:root[data-skin="prism"][data-theme="dark"],
.sk-tile[data-skin="prism"][data-theme="dark"] {
  --bg: #09090f;
  --panel: #111119;
  --border: #2c2c42;
  --accent: #a594ff;
  --accent-soft: #2c2944;
  --text: #ecebff;
  --muted: #9492b0;
  --bull: #4ade80;
  --bull-bg: #12271f;
  --bear: #fb6a7d;
  --bear-bg: #2b171e;
  --amber: #f5c451;
  --amber-bg: #2a2318;
  --blue-chip-bg: #1c2435;
  --blue-chip: #7db4ff;
  --grey-chip-bg: #1e1e27;
  --grey-chip: #9492b0;
  --thead: #191925;
  --row-border: #1e1e2e;
  --hover: #1e1d2e;
  --sel-wash: rgba(236,235,255,0.09);
  --sel-block: rgba(148,146,176,0.24);
  --sel-bar: #c9c7df;
  --accent-2: #5eead4;
  --on-accent: #12102a;
  --on-flat: #06060a;
  --glass: rgba(17,17,25,0.68);
  --ground: #09090f;
  --accent-grad: linear-gradient(90deg, #ff9bd5, #a594ff, #7ee8ff);
  --fx-1: rgba(255,92,200,0.36);
  --fx-2: rgba(124,92,255,0.42);
  --fx-3: rgba(46,230,214,0.3);
  --fx-4: rgba(255,200,87,0.22);
  --fx-5: rgba(255,255,255,0.12);
  --fx-edge-a: rgba(255, 92, 200, .6);
  --fx-edge-b: rgba(46, 230, 214, .55);
  --fx-sheen: rgba(255, 255, 255, .12);
  --tile-art: linear-gradient(125deg, #622752 0%, #09090f 50%, #392c74 100%);
  --ink-2: #9492b0;
  --amber-ink: #f5c451;
  --accent-ink: #a594ff;
  --bull-ink: #4ade80;
  --bear-ink: #fb6a7d;
  --dim-op: 0.55;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="cyberpunk"],
.sk-tile[data-skin="cyberpunk"],
.sk-tile[data-skin="cyberpunk"][data-theme="light"] {
  --bg: #faf5bd;
  --panel: #ffffff;
  --border: #d9d3a0;
  --accent: #005f87;
  --accent-soft: #e3edf2;
  --text: #0a0a0c;
  --muted: #5f5a2e;
  --bull: #0a7a3c;
  --bull-bg: #e3f0e9;
  --bear: #c81e4a;
  --bear-bg: #f9e5ea;
  --amber: #875500;
  --amber-bg: #f1ebe2;
  --blue-chip-bg: #e8e7f9;
  --blue-chip: #4338ca;
  --grey-chip-bg: #e6e6e7;
  --grey-chip: #4a4626;
  --thead: #f9f6ce;
  --row-border: #ece9d0;
  --hover: #f4f8fa;
  --sel-wash: rgba(10,10,12,0.075);
  --sel-block: rgba(95,90,46,0.2);
  --sel-bar: #3d3a20;
  --accent-2: #0a0a0c;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.86);
  --ground: #fcee0a;
  --accent-grad: none;
  --fx-1: rgba(10,10,12,0.16);
  --fx-2: rgba(255,255,255,0.6);
  --fx-3: rgba(255,138,0,0.4);
  --tile-art: linear-gradient(125deg, #d5ca0a 0%, #fcee0a 50%, #fef89d 100%);
  --ink-2: #5f5a2e;
  --amber-ink: #825204;
  --accent-ink: #005f87;
  --bull-ink: #0b6e36;
  --bear-ink: #b3073d;
  --dim-op: 0.63;
  --seg-mkt: #676f7a;
  --seg-ret: #207b71;
  --seg-val: #7b61af;
  --seg-grw: #607636;
  --seg-qua: #946621;
  --seg-brd: #036c91;
  --seg-rate: #ae5354;
  --seg-eco: #936452;
  --seg-crv: #406fb7;
}
:root[data-skin="cyberpunk"][data-theme="dark"],
.sk-tile[data-skin="cyberpunk"][data-theme="dark"] {
  --bg: #07070c;
  --panel: #0f0f17;
  --border: #2d2d44;
  --accent: #2fc4ff;
  --accent-soft: #153345;
  --text: #f3f3f7;
  --muted: #9a9ab0;
  --bull: #19f5a1;
  --bull-bg: #0a2821;
  --bear: #ff3d67;
  --bear-bg: #2a0f19;
  --amber: #ffb224;
  --amber-bg: #2a1f0f;
  --blue-chip-bg: #231f33;
  --blue-chip: #b49cff;
  --grey-chip-bg: #1d1d24;
  --grey-chip: #9a9ab0;
  --thead: #181824;
  --row-border: #1e1e2d;
  --hover: #121f2c;
  --sel-wash: rgba(243,243,247,0.09);
  --sel-block: rgba(154,154,176,0.24);
  --sel-bar: #cfcfdb;
  --accent-2: #fcee0a;
  --on-accent: #050508;
  --on-flat: #050508;
  --glass: rgba(15,15,23,0.74);
  --ground: #07070c;
  --accent-grad: none;
  --fx-1: rgba(252,238,10,0.3);
  --fx-2: rgba(255,42,109,0.4);
  --fx-3: rgba(47,196,255,0.4);
  --tile-art: linear-gradient(125deg, #504c0b 0%, #07070c 50%, #6a1533 100%);
  --ink-2: #9a9ab0;
  --amber-ink: #ffb224;
  --accent-ink: #2fc4ff;
  --bull-ink: #19f5a1;
  --bear-ink: #fe5873;
  --dim-op: 0.54;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="kaleidoscope"],
.sk-tile[data-skin="kaleidoscope"],
.sk-tile[data-skin="kaleidoscope"][data-theme="light"] {
  --bg: #fbeef6;
  --panel: #ffffff;
  --border: #efcfe2;
  --accent: #b71dc8;
  --accent-soft: #f8eafa;
  --text: #2a1230;
  --muted: #7a5c78;
  --bull: #0d7a4d;
  --bull-bg: #e3f0eb;
  --bear: #cc1e55;
  --bear-bg: #fae6ec;
  --amber: #9a5b00;
  --amber-bg: #f3ece2;
  --blue-chip-bg: #e7ecfa;
  --blue-chip: #3b5fd9;
  --grey-chip-bg: #eae7ea;
  --grey-chip: #664a66;
  --thead: #fdf4f9;
  --row-border: #f7e7f0;
  --hover: #fcf5fd;
  --sel-wash: rgba(42,18,48,0.075);
  --sel-block: rgba(122,92,120,0.2);
  --sel-bar: #5a3e5b;
  --accent-2: #0ea5e9;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.76);
  --ground: #fbeef6;
  --accent-grad: linear-gradient(90deg, #c026d3, #7c3aed);
  --fx-1: rgba(255,95,176,0.5);
  --fx-2: rgba(255,209,102,0.55);
  --fx-3: rgba(110,231,255,0.5);
  --fx-4: rgba(179,136,255,0.5);
  --tile-art: linear-gradient(125deg, #fda6d3 0%, #fbeef6 50%, #fddea7 100%);
  --ink-2: #70536f;
  --amber-ink: #864f07;
  --accent-ink: #9f0fae;
  --bull-ink: #0b6d44;
  --bear-ink: #b40046;
  --dim-op: 0.68;
  --seg-mkt: #676f79;
  --seg-ret: #1f7a70;
  --seg-val: #7a60ad;
  --seg-grw: #5f7535;
  --seg-qua: #926420;
  --seg-brd: #036c91;
  --seg-rate: #ac5353;
  --seg-eco: #926351;
  --seg-crv: #3f6db6;
}
:root[data-skin="kaleidoscope"][data-theme="dark"],
.sk-tile[data-skin="kaleidoscope"][data-theme="dark"] {
  --bg: #110818;
  --panel: #1a0f24;
  --border: #43295a;
  --accent: #f0abfc;
  --accent-soft: #452e4f;
  --text: #f6ecff;
  --muted: #b39ccb;
  --bull: #4ade80;
  --bull-bg: #192627;
  --bear: #ff6b8a;
  --bear-bg: #321628;
  --amber: #ffc94a;
  --amber-bg: #32231f;
  --blue-chip-bg: #26263d;
  --blue-chip: #93c5fd;
  --grey-chip-bg: #271c31;
  --grey-chip: #b39ccb;
  --thead: #261734;
  --row-border: #2f1c3f;
  --hover: #2d1d37;
  --sel-wash: rgba(246,236,255,0.09);
  --sel-block: rgba(179,156,203,0.24);
  --sel-bar: #dbccea;
  --accent-2: #67e8f9;
  --on-accent: #0b0510;
  --on-flat: #0b0510;
  --glass: rgba(26,15,36,0.72);
  --ground: #110818;
  --accent-grad: linear-gradient(90deg, #f472b6, #c084fc);
  --fx-1: rgba(255,63,164,0.46);
  --fx-2: rgba(255,176,0,0.4);
  --fx-3: rgba(34,211,238,0.4);
  --fx-4: rgba(168,85,247,0.52);
  --tile-art: linear-gradient(125deg, #7e2158 0%, #110818 50%, #704b0e 100%);
  --ink-2: #b39ccb;
  --amber-ink: #ffc94a;
  --accent-ink: #f0abfc;
  --bull-ink: #4ade80;
  --bear-ink: #ff6b8a;
  --dim-op: 0.57;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="abyss"],
.sk-tile[data-skin="abyss"],
.sk-tile[data-skin="abyss"][data-theme="light"] {
  --bg: #e4f4f3;
  --panel: #ffffff;
  --border: #bfe0dc;
  --accent: #0a6aa0;
  --accent-soft: #e9f2f6;
  --text: #0f2a2e;
  --muted: #4f6e73;
  --bull: #017c42;
  --bull-bg: #e3f0ea;
  --bear: #c92941;
  --bear-bg: #f9e7ea;
  --amber: #946000;
  --amber-bg: #f3ede2;
  --blue-chip-bg: #e5ecf9;
  --blue-chip: #2563c9;
  --grey-chip-bg: #e7eaea;
  --grey-chip: #3f5d62;
  --thead: #eef8f8;
  --row-border: #dff0ee;
  --hover: #f4f8fb;
  --sel-wash: rgba(15,42,46,0.075);
  --sel-block: rgba(79,110,115,0.2);
  --sel-bar: #355357;
  --accent-2: #2dd4bf;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.74);
  --ground: #e4f4f3;
  --accent-grad: none;
  --fx-1: rgba(94,234,212,0.42);
  --fx-2: rgba(56,189,248,0.38);
  --fx-3: rgba(153,246,228,0.7);
  --fx-4: rgba(129,140,248,0.3);
  --tile-art: linear-gradient(125deg, #acf0e6 0%, #e4f4f3 50%, #a3dff5 100%);
  --ink-2: #436267;
  --amber-ink: #805305;
  --accent-ink: #096497;
  --bull-ink: #0b6d3b;
  --bear-ink: #b40431;
  --dim-op: 0.72;
  --seg-mkt: #666e77;
  --seg-ret: #1f7a70;
  --seg-val: #7a60ad;
  --seg-grw: #5f7535;
  --seg-qua: #926420;
  --seg-brd: #036c91;
  --seg-rate: #ac5353;
  --seg-eco: #916250;
  --seg-crv: #3f6db6;
}
:root[data-skin="abyss"][data-theme="dark"],
.sk-tile[data-skin="abyss"][data-theme="dark"] {
  --bg: #02101a;
  --panel: #07192a;
  --border: #184258;
  --accent: #3cc8f8;
  --accent-soft: #123c53;
  --text: #e3f6ff;
  --muted: #86a9bd;
  --bull: #3ee89a;
  --bull-bg: #0a2e2c;
  --bear: #ff6b7d;
  --bear-bg: #251d28;
  --amber: #f5c04b;
  --amber-bg: #242921;
  --blue-chip-bg: #192a3f;
  --blue-chip: #93b4ff;
  --grey-chip-bg: #142637;
  --grey-chip: #86a9bd;
  --thead: #0c2538;
  --row-border: #102e41;
  --hover: #0c293d;
  --sel-wash: rgba(227,246,255,0.09);
  --sel-block: rgba(134,169,189,0.24);
  --sel-bar: #bed7e5;
  --accent-2: #34d399;
  --on-accent: #010a11;
  --on-flat: #010a11;
  --glass: rgba(7,25,42,0.7);
  --ground: #02101a;
  --accent-grad: none;
  --fx-1: rgba(34,211,238,0.4);
  --fx-2: rgba(45,212,191,0.36);
  --fx-3: rgba(165,243,252,0.6);
  --fx-4: rgba(99,102,241,0.45);
  --tile-art: linear-gradient(125deg, #0f5e6f 0%, #02101a 50%, #115755 100%);
  --ink-2: #86a9bd;
  --amber-ink: #f5c04b;
  --accent-ink: #3cc8f8;
  --bull-ink: #3ee89a;
  --bear-ink: #ff6b7d;
  --dim-op: 0.57;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #957dcc;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #cb706f;
  --seg-eco: #b17f6c;
  --seg-crv: #598bd7;
}
:root[data-skin="noir"],
.sk-tile[data-skin="noir"],
.sk-tile[data-skin="noir"][data-theme="light"] {
  --bg: #efece6;
  --panel: #fbfaf7;
  --border: #d6d1c7;
  --accent: #1a1a1a;
  --accent-soft: #e2e1df;
  --text: #141413;
  --muted: #5f5d58;
  --bull: #09783a;
  --bull-bg: #e0ebe1;
  --bear: #c22a2a;
  --bear-bg: #f4e2df;
  --amber: #8f5a00;
  --amber-bg: #efe8db;
  --blue-chip-bg: #e2e5ea;
  --blue-chip: #2c4f8a;
  --grey-chip-bg: #e4e3e0;
  --grey-chip: #4c4b47;
  --thead: #f4f1ec;
  --row-border: #e8e5df;
  --hover: #f1f0ed;
  --sel-wash: rgba(20,20,19,0.075);
  --sel-block: rgba(95,93,88,0.2);
  --sel-bar: #41403c;
  --accent-2: #8a877f;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(251,250,247,0.82);
  --ground: #efece6;
  --accent-grad: none;
  --fx-1: rgba(20,20,19,0.12);
  --fx-2: rgba(255,255,255,0.55);
  --fx-3: rgba(20,20,19,0.28);
  --tile-art: linear-gradient(125deg, #d5d2cd 0%, #efece6 50%, #f8f6f4 100%);
  --ink-2: #5c5a55;
  --amber-ink: #7f4e00;
  --accent-ink: #1a1a1a;
  --bull-ink: #036a32;
  --bear-ink: #af1019;
  --dim-op: 0.66;
  --seg-mkt: #646c76;
  --seg-ret: #1c776d;
  --seg-val: #765caa;
  --seg-grw: #5d7232;
  --seg-qua: #8f621d;
  --seg-brd: #036c91;
  --seg-rate: #a94e50;
  --seg-eco: #8e5f4e;
  --seg-crv: #3d6ab3;
}
:root[data-skin="noir"][data-theme="dark"],
.sk-tile[data-skin="noir"][data-theme="dark"] {
  --bg: #0a0a0a;
  --panel: #141414;
  --border: #333331;
  --accent: #f2f0eb;
  --accent-soft: #363635;
  --text: #f2f0eb;
  --muted: #a3a09a;
  --bull: #4cdc8a;
  --bull-bg: #13271c;
  --bear: #ff6b6b;
  --bear-bg: #2c1818;
  --amber: #f3c45c;
  --amber-bg: #2b2415;
  --blue-chip-bg: #222631;
  --blue-chip: #9db8ff;
  --grey-chip-bg: #212121;
  --grey-chip: #a3a09a;
  --thead: #1d1d1d;
  --row-border: #242423;
  --hover: #282827;
  --sel-wash: rgba(242,240,235,0.09);
  --sel-block: rgba(163,160,154,0.24);
  --sel-bar: #d2d0cb;
  --accent-2: #7a7872;
  --on-accent: #060606;
  --on-flat: #060606;
  --glass: rgba(20,20,20,0.76);
  --ground: #0a0a0a;
  --accent-grad: none;
  --fx-1: rgba(255,255,255,0.1);
  --fx-2: rgba(255,255,255,0.2);
  --fx-3: rgba(0,0,0,0.62);
  --tile-art: linear-gradient(125deg, #232323 0%, #0a0a0a 50%, #3b3b3b 100%);
  --ink-2: #a3a09a;
  --amber-ink: #f3c45c;
  --accent-ink: #f2f0eb;
  --bull-ink: #4cdc8a;
  --bear-ink: #ff6b6b;
  --dim-op: 0.56;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="nebula"],
.sk-tile[data-skin="nebula"],
.sk-tile[data-skin="nebula"][data-theme="light"] {
  --bg: #eceefb;
  --panel: #ffffff;
  --border: #d4d8f2;
  --accent: #5b21b6;
  --accent-soft: #efe9f8;
  --text: #15162e;
  --muted: #636688;
  --bull: #057b48;
  --bull-bg: #e3f0ea;
  --bear: #ca2451;
  --bear-bg: #fae7eb;
  --amber: #946000;
  --amber-bg: #f3ede2;
  --blue-chip-bg: #e5ecf9;
  --blue-chip: #2563c9;
  --grey-chip-bg: #e8e8ea;
  --grey-chip: #505272;
  --thead: #f3f4fd;
  --row-border: #eaecf8;
  --hover: #f8f5fc;
  --sel-wash: rgba(21,22,46,0.075);
  --sel-block: rgba(99,102,136,0.2);
  --sel-bar: #444664;
  --accent-2: #db2777;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.72);
  --ground: #eceefb;
  --accent-grad: linear-gradient(90deg, #6d28d9, #be185d);
  --fx-1: rgba(192,132,252,0.48);
  --fx-2: rgba(249,168,212,0.48);
  --fx-3: rgba(103,232,249,0.4);
  --fx-4: rgba(253,230,138,0.45);
  --tile-art: linear-gradient(125deg, #d7bbfb 0%, #eceefb 50%, #f2cce8 100%);
  --ink-2: #57597b;
  --amber-ink: #805305;
  --accent-ink: #5b21b6;
  --bull-ink: #0b6b3f;
  --bear-ink: #b00741;
  --dim-op: 0.67;
  --seg-mkt: #646c76;
  --seg-ret: #1d786f;
  --seg-val: #795eac;
  --seg-grw: #5e7434;
  --seg-qua: #91631e;
  --seg-brd: #036c91;
  --seg-rate: #ab5152;
  --seg-eco: #8f614f;
  --seg-crv: #3e6cb4;
}
:root[data-skin="nebula"][data-theme="dark"],
.sk-tile[data-skin="nebula"][data-theme="dark"] {
  --bg: #05020f;
  --panel: #0d0920;
  --border: #2a2150;
  --accent: #c4b5fd;
  --accent-soft: #322b4c;
  --text: #ebe6ff;
  --muted: #9d94c4;
  --bull: #4ade80;
  --bull-bg: #0f211f;
  --bear: #fb7185;
  --bear-bg: #271220;
  --amber: #fcd34d;
  --amber-bg: #281f18;
  --blue-chip-bg: #182335;
  --blue-chip: #7dd3fc;
  --grey-chip-bg: #1a162d;
  --grey-chip: #9d94c4;
  --thead: #16102e;
  --row-border: #1c1538;
  --hover: #1d1834;
  --sel-wash: rgba(235,230,255,0.09);
  --sel-block: rgba(157,148,196,0.24);
  --sel-bar: #ccc5e7;
  --accent-2: #f472b6;
  --on-accent: #03010a;
  --on-flat: #03010a;
  --glass: rgba(13,9,32,0.66);
  --ground: #05020f;
  --accent-grad: linear-gradient(90deg, #a78bfa, #f472b6);
  --fx-1: rgba(124,58,237,0.52);
  --fx-2: rgba(219,39,119,0.38);
  --fx-3: rgba(14,165,233,0.34);
  --fx-4: rgba(245,158,11,0.24);
  --tile-art: linear-gradient(125deg, #431f82 0%, #05020f 50%, #561037 100%);
  --ink-2: #9d94c4;
  --amber-ink: #fcd34d;
  --accent-ink: #c4b5fd;
  --bull-ink: #4ade80;
  --bear-ink: #fb7185;
  --dim-op: 0.57;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="hypno"],
.sk-tile[data-skin="hypno"],
.sk-tile[data-skin="hypno"][data-theme="light"] {
  --bg: #f4f4f1;
  --panel: #ffffff;
  --border: #d8d8d2;
  --accent: #1d4ed8;
  --accent-soft: #e6ecfb;
  --text: #111111;
  --muted: #5b5b57;
  --bull: #0d7a3e;
  --bull-bg: #e3f0e9;
  --bear: #c42b2b;
  --bear-bg: #f8e7e7;
  --amber: #8f5a00;
  --amber-bg: #f2ece2;
  --blue-chip-bg: #ede5fa;
  --blue-chip: #6d28d9;
  --grey-chip-bg: #e7e7e7;
  --grey-chip: #484846;
  --thead: #f8f8f6;
  --row-border: #ecece8;
  --hover: #f5f7fd;
  --sel-wash: rgba(17,17,17,0.075);
  --sel-block: rgba(91,91,87,0.2);
  --sel-bar: #3d3d3b;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.82);
  --ground: #f4f4f1;
  --accent-grad: none;
  --fx-1: rgba(17,17,17,0.13);
  --fx-2: rgba(29,78,216,0.16);
  --fx-3: rgba(255,255,255,0.7);
  --tile-art: linear-gradient(125deg, #d6d6d4 0%, #f4f4f1 50%, #d2d9ed 100%);
  --ink-2: #5b5b57;
  --amber-ink: #825204;
  --accent-ink: #1d4ed8;
  --bull-ink: #006f36;
  --bear-ink: #b6181f;
  --dim-op: 0.65;
  --seg-mkt: #68707a;
  --seg-ret: #207b71;
  --seg-val: #7b62ae;
  --seg-grw: #607636;
  --seg-qua: #936521;
  --seg-brd: #036c91;
  --seg-rate: #ae5454;
  --seg-eco: #936452;
  --seg-crv: #4170b8;
}
:root[data-skin="hypno"][data-theme="dark"],
.sk-tile[data-skin="hypno"][data-theme="dark"] {
  --bg: #060606;
  --panel: #111113;
  --border: #313136;
  --accent: #8ec5ff;
  --accent-soft: #2a3542;
  --text: #f4f4f6;
  --muted: #a3a3ab;
  --bull: #4ade80;
  --bull-bg: #102417;
  --bear: #ff6b6b;
  --bear-bg: #291414;
  --amber: #f5c451;
  --amber-bg: #272110;
  --blue-chip-bg: #24222e;
  --blue-chip: #c4b5fd;
  --grey-chip-bg: #1f1f21;
  --grey-chip: #a3a3ab;
  --thead: #1b1b1e;
  --row-border: #212124;
  --hover: #1c2128;
  --sel-wash: rgba(244,244,246,0.09);
  --sel-block: rgba(163,163,171,0.24);
  --sel-bar: #d4d4d8;
  --accent-2: #ffffff;
  --on-accent: #040404;
  --on-flat: #040404;
  --glass: rgba(17,17,19,0.76);
  --ground: #060606;
  --accent-grad: none;
  --fx-1: rgba(255,255,255,0.13);
  --fx-2: rgba(142,197,255,0.28);
  --fx-3: rgba(0,0,0,0.7);
  --tile-art: linear-gradient(125deg, #262626 0%, #060606 50%, #2c3b4c 100%);
  --ink-2: #a3a3ab;
  --amber-ink: #f5c451;
  --accent-ink: #8ec5ff;
  --bull-ink: #4ade80;
  --bear-ink: #ff6b6b;
  --dim-op: 0.54;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="lava"],
.sk-tile[data-skin="lava"],
.sk-tile[data-skin="lava"][data-theme="light"] {
  --bg: #fbe9dc;
  --panel: #fffaf6;
  --border: #ecc9b5;
  --accent: #0a6ea8;
  --accent-soft: #e4ebed;
  --text: #2c1510;
  --muted: #7d5a4c;
  --bull: #0b793d;
  --bull-bg: #e3ebe1;
  --bear: #c42f2a;
  --bear-bg: #f8e3df;
  --amber: #935600;
  --amber-bg: #f3e7da;
  --blue-chip-bg: #e6e7f1;
  --blue-chip: #2b5fd0;
  --grey-chip-bg: #eae3df;
  --grey-chip: #69493d;
  --thead: #fdefe6;
  --row-border: #f6e2d6;
  --hover: #f4f4f2;
  --sel-wash: rgba(44,21,16,0.075);
  --sel-block: rgba(125,90,76,0.2);
  --sel-bar: #5d3e34;
  --accent-2: #ff6a1a;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,250,246,0.78);
  --ground: #fbe9dc;
  --accent-grad: none;
  --fx-1: rgba(255,90,31,0.42);
  --fx-2: rgba(255,183,3,0.44);
  --fx-3: rgba(255,45,85,0.3);
  --fx-4: rgba(255,255,255,0.55);
  --tile-art: linear-gradient(125deg, #fdad8d 0%, #fbe9dc 50%, #fdd37d 100%);
  --ink-2: #745345;
  --amber-ink: #844e02;
  --accent-ink: #026095;
  --bull-ink: #026a34;
  --bear-ink: #af1316;
  --dim-op: 0.68;
  --seg-mkt: #646c76;
  --seg-ret: #1c776d;
  --seg-val: #765caa;
  --seg-grw: #5d7232;
  --seg-qua: #8f621d;
  --seg-brd: #036c91;
  --seg-rate: #a94e50;
  --seg-eco: #8e5f4e;
  --seg-crv: #3d6ab3;
}
:root[data-skin="lava"][data-theme="dark"],
.sk-tile[data-skin="lava"][data-theme="dark"] {
  --bg: #0c0504;
  --panel: #170b09;
  --border: #4a2419;
  --accent: #67e8f9;
  --accent-soft: #273739;
  --text: #fff1ea;
  --muted: #c09a8c;
  --bull: #4ade80;
  --bull-bg: #152315;
  --bear: #ff6b5e;
  --bear-bg: #2e1311;
  --amber: #ffbe3d;
  --amber-bg: #2e1f0c;
  --blue-chip-bg: #22242c;
  --blue-chip: #93c5fd;
  --grey-chip-bg: #251916;
  --grey-chip: #c09a8c;
  --thead: #26120e;
  --row-border: #301811;
  --hover: #1e1f1f;
  --sel-wash: rgba(255,241,234,0.09);
  --sel-block: rgba(192,154,140,0.24);
  --sel-bar: #e6cec4;
  --accent-2: #ff6a1a;
  --on-accent: #080303;
  --on-flat: #080303;
  --glass: rgba(23,11,9,0.74);
  --ground: #0c0504;
  --accent-grad: none;
  --fx-1: rgba(255,61,0,0.5);
  --fx-2: rgba(255,152,0,0.42);
  --fx-3: rgba(255,23,68,0.34);
  --fx-4: rgba(255,214,0,0.26);
  --tile-art: linear-gradient(125deg, #852102 0%, #0c0504 50%, #724302 100%);
  --ink-2: #c09a8c;
  --amber-ink: #ffbe3d;
  --accent-ink: #67e8f9;
  --bull-ink: #4ade80;
  --bear-ink: #ff6b5e;
  --dim-op: 0.55;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="spiderman"],
.sk-tile[data-skin="spiderman"],
.sk-tile[data-skin="spiderman"][data-theme="light"] {
  --bg: #eef2fb;
  --panel: #ffffff;
  --border: #cfd8ef;
  --accent: #1e3a8a;
  --accent-soft: #e6e9f2;
  --text: #111a3a;
  --muted: #5e678a;
  --bull: #027b47;
  --bull-bg: #e3f0ea;
  --bear: #cd2527;
  --bear-bg: #fae7e7;
  --amber: #946000;
  --amber-bg: #f3ede2;
  --blue-chip-bg: #e5ecf9;
  --blue-chip: #2563c9;
  --grey-chip-bg: #e7e8eb;
  --grey-chip: #4b5476;
  --thead: #f4f7fd;
  --row-border: #e7ecf7;
  --hover: #f5f6fa;
  --sel-wash: rgba(17,26,58,0.075);
  --sel-block: rgba(94,103,138,0.2);
  --sel-bar: #3f486a;
  --accent-2: #dc2626;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.78);
  --ground: #eef2fb;
  --accent-grad: none;
  --fx-1: rgba(220,38,38,0.32);
  --fx-2: rgba(30,58,138,0.22);
  --fx-3: rgba(59,130,246,0.32);
  --fx-4: rgba(255,255,255,0.5);
  --tile-art: linear-gradient(125deg, #e8b1b7 0%, #eef2fb 50%, #c0cae2 100%);
  --ink-2: #525a7d;
  --amber-ink: #805305;
  --accent-ink: #1e3a8a;
  --bull-ink: #026e3f;
  --bear-ink: #b40715;
  --dim-op: 0.68;
  --seg-mkt: #676f79;
  --seg-ret: #1f7a70;
  --seg-val: #7a60ad;
  --seg-grw: #5f7535;
  --seg-qua: #926420;
  --seg-brd: #036c91;
  --seg-rate: #ad5253;
  --seg-eco: #926351;
  --seg-crv: #3f6db6;
}
:root[data-skin="spiderman"][data-theme="dark"],
.sk-tile[data-skin="spiderman"][data-theme="dark"] {
  --bg: #060a1a;
  --panel: #0d1328;
  --border: #26315a;
  --accent: #93c5fd;
  --accent-soft: #283753;
  --text: #eaf0ff;
  --muted: #97a3cc;
  --bull: #4ade80;
  --bull-bg: #102828;
  --bear: #ff6b6b;
  --bear-bg: #291825;
  --amber: #f5c451;
  --amber-bg: #272422;
  --blue-chip-bg: #24253e;
  --blue-chip: #c4b5fd;
  --grey-chip-bg: #1a2035;
  --grey-chip: #97a3cc;
  --thead: #141c37;
  --row-border: #1a2241;
  --hover: #19233b;
  --sel-wash: rgba(234,240,255,0.09);
  --sel-block: rgba(151,163,204,0.24);
  --sel-bar: #c9d1eb;
  --accent-2: #ff3b3b;
  --on-accent: #040611;
  --on-flat: #040611;
  --glass: rgba(13,19,40,0.72);
  --ground: #060a1a;
  --accent-grad: none;
  --fx-1: rgba(255,59,59,0.42);
  --fx-2: rgba(79,124,255,0.36);
  --fx-3: rgba(37,99,235,0.4);
  --fx-4: rgba(255,255,255,0.1);
  --tile-art: linear-gradient(125deg, #6f1f28 0%, #060a1a 50%, #20336c 100%);
  --ink-2: #97a3cc;
  --amber-ink: #f5c451;
  --accent-ink: #93c5fd;
  --bull-ink: #4ade80;
  --bear-ink: #ff6b6b;
  --dim-op: 0.57;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="batman"],
.sk-tile[data-skin="batman"],
.sk-tile[data-skin="batman"][data-theme="light"] {
  --bg: #e9ecf0;
  --panel: #fbfcfd;
  --border: #c9d0da;
  --accent: #1e293b;
  --accent-soft: #e3e5e8;
  --text: #0f172a;
  --muted: #5b6472;
  --bull: #0c793d;
  --bull-bg: #e0ede7;
  --bear: #c42b2b;
  --bear-bg: #f5e4e5;
  --amber: #8f5a00;
  --amber-bg: #efe9e0;
  --blue-chip-bg: #e2e7f8;
  --blue-chip: #2b4fd0;
  --grey-chip-bg: #e3e5e8;
  --grey-chip: #485160;
  --thead: #f0f2f5;
  --row-border: #e2e6ec;
  --hover: #f1f3f4;
  --sel-wash: rgba(15,23,42,0.075);
  --sel-block: rgba(91,100,114,0.2);
  --sel-bar: #3d4555;
  --accent-2: #f5c518;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(251,252,253,0.82);
  --ground: #e9ecf0;
  --accent-grad: none;
  --fx-1: rgba(15,23,42,0.4);
  --fx-2: rgba(245,197,24,0.3);
  --fx-3: rgba(255,255,255,0.55);
  --fx-4: rgba(148,163,184,0.3);
  --tile-art: linear-gradient(125deg, #9297a1 0%, #e9ecf0 50%, #ede0af 100%);
  --ink-2: #535b68;
  --amber-ink: #805000;
  --accent-ink: #1e293b;
  --bull-ink: #036a34;
  --bear-ink: #ae0b17;
  --dim-op: 0.67;
  --seg-mkt: #626a75;
  --seg-ret: #1c776d;
  --seg-val: #755caa;
  --seg-grw: #5d7232;
  --seg-qua: #8f621d;
  --seg-brd: #036c91;
  --seg-rate: #a94e50;
  --seg-eco: #8e5f4e;
  --seg-crv: #3d6ab3;
}
:root[data-skin="batman"][data-theme="dark"],
.sk-tile[data-skin="batman"][data-theme="dark"] {
  --bg: #070a10;
  --panel: #0f141c;
  --border: #26303f;
  --accent: #94a3b8;
  --accent-soft: #2a313b;
  --text: #e9eef5;
  --muted: #98a3b3;
  --bull: #4ade80;
  --bull-bg: #102820;
  --bear: #ff6b6b;
  --bear-bg: #2a181d;
  --amber: #f5c451;
  --amber-bg: #282419;
  --blue-chip-bg: #1d2836;
  --blue-chip: #93c5fd;
  --grey-chip-bg: #1c2129;
  --grey-chip: #98a3b3;
  --thead: #161c26;
  --row-border: #1a222e;
  --hover: #1b212a;
  --sel-wash: rgba(233,238,245,0.09);
  --sel-block: rgba(152,163,179,0.24);
  --sel-bar: #c9d0db;
  --accent-2: #f5c518;
  --on-accent: #05060a;
  --on-flat: #05060a;
  --glass: rgba(15,20,28,0.78);
  --ground: #070a10;
  --accent-grad: none;
  --fx-1: rgba(0,0,0,0.75);
  --fx-2: rgba(245,197,24,0.3);
  --fx-3: rgba(219,228,240,0.16);
  --fx-4: rgba(51,65,85,0.5);
  --tile-art: linear-gradient(125deg, #020204 0%, #070a10 50%, #4e4212 100%);
  --ink-2: #98a3b3;
  --amber-ink: #f5c451;
  --accent-ink: #94a3b8;
  --bull-ink: #4ade80;
  --bear-ink: #ff6b6b;
  --dim-op: 0.56;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="sololeveling"],
.sk-tile[data-skin="sololeveling"],
.sk-tile[data-skin="sololeveling"][data-theme="light"] {
  --bg: #eeeafa;
  --panel: #ffffff;
  --border: #d6cdf0;
  --accent: #3730a3;
  --accent-soft: #e9e8f5;
  --text: #1a1433;
  --muted: #6a6290;
  --bull: #007945;
  --bull-bg: #e3f0ea;
  --bear: #c9224f;
  --bear-bg: #fae7eb;
  --amber: #905e08;
  --amber-bg: #f3ede2;
  --blue-chip-bg: #e5ecf9;
  --blue-chip: #2563c9;
  --grey-chip-bg: #e8e8eb;
  --grey-chip: #564e79;
  --thead: #f4f2fc;
  --row-border: #ebe6f8;
  --hover: #f6f6fb;
  --sel-wash: rgba(26,20,51,0.075);
  --sel-block: rgba(106,98,144,0.2);
  --sel-bar: #4a436b;
  --accent-2: #7c3aed;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.74);
  --ground: #eeeafa;
  --accent-grad: none;
  --fx-1: rgba(124,58,237,0.36);
  --fx-2: rgba(79,70,229,0.28);
  --fx-3: rgba(167,139,250,0.42);
  --fx-4: rgba(37,99,235,0.28);
  --tile-art: linear-gradient(125deg, #c5abf5 0%, #eeeafa 50%, #c1bcf4 100%);
  --ink-2: #5e5683;
  --amber-ink: #805205;
  --accent-ink: #3730a3;
  --bull-ink: #0a693d;
  --bear-ink: #ae003e;
  --dim-op: 0.67;
  --seg-mkt: #646c76;
  --seg-ret: #1b776d;
  --seg-val: #775dab;
  --seg-grw: #5d7232;
  --seg-qua: #8f621d;
  --seg-brd: #036c91;
  --seg-rate: #aa4f51;
  --seg-eco: #8e5f4e;
  --seg-crv: #3d6ab3;
}
:root[data-skin="sololeveling"][data-theme="dark"],
.sk-tile[data-skin="sololeveling"][data-theme="dark"] {
  --bg: #07040f;
  --panel: #100a1d;
  --border: #2f2350;
  --accent: #818cf8;
  --accent-soft: #272449;
  --text: #ece6ff;
  --muted: #a497c9;
  --bull: #4ade80;
  --bull-bg: #10231f;
  --bear: #fb7185;
  --bear-bg: #291320;
  --amber: #fcd34d;
  --amber-bg: #292118;
  --blue-chip-bg: #1a2535;
  --blue-chip: #7dd3fc;
  --grey-chip-bg: #1d172b;
  --grey-chip: #a497c9;
  --thead: #19122c;
  --row-border: #201637;
  --hover: #1a1631;
  --sel-wash: rgba(236,230,255,0.09);
  --sel-block: rgba(164,151,201,0.24);
  --sel-bar: #cfc6e9;
  --accent-2: #a855f7;
  --on-accent: #05030a;
  --on-flat: #05030a;
  --glass: rgba(16,10,29,0.7);
  --ground: #07040f;
  --accent-grad: none;
  --fx-1: rgba(109,40,217,0.52);
  --fx-2: rgba(59,130,246,0.38);
  --fx-3: rgba(168,85,247,0.42);
  --fx-4: rgba(29,78,216,0.34);
  --tile-art: linear-gradient(125deg, #3c1778 0%, #07040f 50%, #1b3467 100%);
  --ink-2: #a497c9;
  --amber-ink: #fcd34d;
  --accent-ink: #818cf8;
  --bull-ink: #4ade80;
  --bear-ink: #fb7185;
  --dim-op: 0.55;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="aot"],
.sk-tile[data-skin="aot"],
.sk-tile[data-skin="aot"][data-theme="light"] {
  --bg: #ece6d8;
  --panel: #fbf8f1;
  --border: #cfc4ae;
  --accent: #44403c;
  --accent-soft: #e7e4dd;
  --text: #1f1a14;
  --muted: #6b6052;
  --bull: #05763b;
  --bull-bg: #e0eadc;
  --bear: #c6222a;
  --bear-bg: #f5e0da;
  --amber: #875a00;
  --amber-bg: #eee6d5;
  --blue-chip-bg: #e2e6ed;
  --blue-chip: #2b5fd0;
  --grey-chip-bg: #e5e2db;
  --grey-chip: #584e42;
  --thead: #f2ede2;
  --row-border: #e5ded0;
  --hover: #f3f0e9;
  --sel-wash: rgba(31,26,20,0.075);
  --sel-block: rgba(107,96,82,0.2);
  --sel-bar: #4d4439;
  --accent-2: #8b5a2b;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(251,248,241,0.8);
  --ground: #ece6d8;
  --accent-grad: none;
  --fx-1: rgba(31,26,20,0.12);
  --fx-2: rgba(255,255,255,0.6);
  --fx-3: rgba(185,28,28,0.22);
  --fx-4: rgba(139,90,43,0.26);
  --tile-art: linear-gradient(125deg, #d3cec0 0%, #ece6d8 50%, #f7f5ef 100%);
  --ink-2: #62574a;
  --amber-ink: #795101;
  --accent-ink: #44403c;
  --bull-ink: #006632;
  --bear-ink: #a70c1b;
  --dim-op: 0.69;
  --seg-mkt: #5f6772;
  --seg-ret: #15746a;
  --seg-val: #7259a6;
  --seg-grw: #596f2f;
  --seg-qua: #8b5d15;
  --seg-brd: #036c91;
  --seg-rate: #a54b4c;
  --seg-eco: #8b5b4a;
  --seg-crv: #3967af;
}
:root[data-skin="aot"][data-theme="dark"],
.sk-tile[data-skin="aot"][data-theme="dark"] {
  --bg: #0e0b09;
  --panel: #19140f;
  --border: #3d3128;
  --accent: #d6d3d1;
  --accent-soft: #3e3935;
  --text: #f3ece2;
  --muted: #b0a391;
  --bull: #4ade80;
  --bull-bg: #16291a;
  --bear: #ff6b5e;
  --bear-bg: #301815;
  --amber: #ffbe3d;
  --amber-bg: #302410;
  --blue-chip-bg: #232930;
  --blue-chip: #93c5fd;
  --grey-chip-bg: #26211c;
  --grey-chip: #b0a391;
  --thead: #241d16;
  --row-border: #2b231c;
  --hover: #2a2520;
  --sel-wash: rgba(243,236,226,0.09);
  --sel-block: rgba(176,163,145,0.24);
  --sel-bar: #d8cfc2;
  --accent-2: #ef4444;
  --on-accent: #090706;
  --on-flat: #090706;
  --glass: rgba(25,20,15,0.76);
  --ground: #0e0b09;
  --accent-grad: none;
  --fx-1: rgba(255,255,255,0.07);
  --fx-2: rgba(229,231,235,0.16);
  --fx-3: rgba(220,38,38,0.42);
  --fx-4: rgba(245,158,11,0.22);
  --tile-art: linear-gradient(125deg, #1f1c1a 0%, #0e0b09 50%, #302e2d 100%);
  --ink-2: #b1a492;
  --amber-ink: #ffbe3d;
  --accent-ink: #d6d3d1;
  --bull-ink: #4ade80;
  --bear-ink: #ff6b5e;
  --dim-op: 0.59;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="jjk"],
.sk-tile[data-skin="jjk"],
.sk-tile[data-skin="jjk"][data-theme="light"] {
  --bg: #e8ecf7;
  --panel: #ffffff;
  --border: #cbd5ea;
  --accent: #0c4a6e;
  --accent-soft: #e4ebef;
  --text: #0f1733;
  --muted: #5d6788;
  --bull: #007945;
  --bull-bg: #e3f0ea;
  --bear: #c9224f;
  --bear-bg: #fae7eb;
  --amber: #905e08;
  --amber-bg: #f3ede2;
  --blue-chip-bg: #e8e7f9;
  --blue-chip: #4338ca;
  --grey-chip-bg: #e7e8eb;
  --grey-chip: #4a5373;
  --thead: #f1f3fa;
  --row-border: #e5eaf4;
  --hover: #f4f7f8;
  --sel-wash: rgba(15,23,51,0.075);
  --sel-block: rgba(93,103,136,0.2);
  --sel-bar: #3e4766;
  --accent-2: #7c3aed;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.76);
  --ground: #e8ecf7;
  --accent-grad: none;
  --fx-1: rgba(56,189,248,0.42);
  --fx-2: rgba(124,58,237,0.32);
  --fx-3: rgba(239,68,68,0.22);
  --fx-4: rgba(14,165,233,0.3);
  --tile-art: linear-gradient(125deg, #9ed8f7 0%, #e8ecf7 50%, #c5b3f4 100%);
  --ink-2: #525c7c;
  --amber-ink: #805205;
  --accent-ink: #0c4a6e;
  --bull-ink: #0a693d;
  --bear-ink: #ae003e;
  --dim-op: 0.67;
  --seg-mkt: #646c76;
  --seg-ret: #1b776d;
  --seg-val: #775dab;
  --seg-grw: #5d7232;
  --seg-qua: #8f621d;
  --seg-brd: #036c91;
  --seg-rate: #aa4f51;
  --seg-eco: #8e5f4e;
  --seg-crv: #3d6ab3;
}
:root[data-skin="jjk"][data-theme="dark"],
.sk-tile[data-skin="jjk"][data-theme="dark"] {
  --bg: #03050e;
  --panel: #0a0f22;
  --border: #1f2a4d;
  --accent: #bae6fd;
  --accent-soft: #273246;
  --text: #e6ecff;
  --muted: #8f9ac0;
  --bull: #4ade80;
  --bull-bg: #0d231e;
  --bear: #fb7185;
  --bear-bg: #26141f;
  --amber: #fcd34d;
  --amber-bg: #262217;
  --blue-chip-bg: #222134;
  --blue-chip: #c4b5fd;
  --grey-chip-bg: #171c2f;
  --grey-chip: #8f9ac0;
  --thead: #10172f;
  --row-border: #141c38;
  --hover: #1a2236;
  --sel-wash: rgba(230,236,255,0.09);
  --sel-block: rgba(143,154,192,0.24);
  --sel-bar: #c3cbe6;
  --accent-2: #a855f7;
  --on-accent: #020309;
  --on-flat: #020309;
  --glass: rgba(10,15,34,0.7);
  --ground: #03050e;
  --accent-grad: none;
  --fx-1: rgba(56,189,248,0.52);
  --fx-2: rgba(124,58,237,0.48);
  --fx-3: rgba(239,68,68,0.38);
  --fx-4: rgba(255,255,255,0.2);
  --tile-art: linear-gradient(125deg, #1f6588 0%, #03050e 50%, #3d1e79 100%);
  --ink-2: #8f9ac0;
  --amber-ink: #fcd34d;
  --accent-ink: #bae6fd;
  --bull-ink: #4ade80;
  --bear-ink: #fb7185;
  --dim-op: 0.56;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #c76c6c;
  --seg-eco: #ad7b69;
  --seg-crv: #5587d3;
}
:root[data-skin="demonslayer"],
.sk-tile[data-skin="demonslayer"],
.sk-tile[data-skin="demonslayer"][data-theme="light"] {
  --bg: #e9f1ec;
  --panel: #ffffff;
  --border: #c6dccd;
  --accent: #86198f;
  --accent-soft: #f3e8f4;
  --text: #10231b;
  --muted: #546e64;
  --bull: #017b42;
  --bull-bg: #e3f0ea;
  --bear: #ca2841;
  --bear-bg: #f9e7ea;
  --amber: #946000;
  --amber-bg: #f3ede2;
  --blue-chip-bg: #e5ecf9;
  --blue-chip: #2563c9;
  --grey-chip-bg: #e7e9e8;
  --grey-chip: #435b52;
  --thead: #f1f6f3;
  --row-border: #e2eee6;
  --hover: #faf5fa;
  --sel-wash: rgba(16,35,27,0.075);
  --sel-block: rgba(84,110,100,0.2);
  --sel-bar: #395047;
  --accent-2: #0ea5e9;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.78);
  --ground: #e9f1ec;
  --accent-grad: none;
  --fx-1: rgba(16,35,27,0.2);
  --fx-2: rgba(14,165,233,0.36);
  --fx-3: rgba(244,114,182,0.38);
  --fx-4: rgba(249,115,22,0.36);
  --tile-art: linear-gradient(125deg, #bec8c2 0%, #e9f1ec 50%, #9ad6eb 100%);
  --ink-2: #486258;
  --amber-ink: #805305;
  --accent-ink: #86198f;
  --bull-ink: #0a6b39;
  --bear-ink: #af0b31;
  --dim-op: 0.69;
  --seg-mkt: #646c76;
  --seg-ret: #1d786f;
  --seg-val: #795eac;
  --seg-grw: #5e7434;
  --seg-qua: #91631e;
  --seg-brd: #036c91;
  --seg-rate: #ab5152;
  --seg-eco: #90604f;
  --seg-crv: #3e6cb4;
}
:root[data-skin="demonslayer"][data-theme="dark"],
.sk-tile[data-skin="demonslayer"][data-theme="dark"] {
  --bg: #06100b;
  --panel: #0d1a12;
  --border: #22402f;
  --accent: #e879f9;
  --accent-soft: #392d40;
  --text: #eaf6ee;
  --muted: #93b3a1;
  --bull: #3ee89a;
  --bull-bg: #0e2e1f;
  --bear: #ff6b7d;
  --bear-bg: #291d1b;
  --amber: #f5c04b;
  --amber-bg: #272914;
  --blue-chip-bg: #1d2a32;
  --blue-chip: #93b4ff;
  --grey-chip-bg: #1a271f;
  --grey-chip: #93b3a1;
  --thead: #13251b;
  --row-border: #182d20;
  --hover: #212327;
  --sel-wash: rgba(234,246,238,0.09);
  --sel-block: rgba(147,179,161,0.24);
  --sel-bar: #c7dbcf;
  --accent-2: #38bdf8;
  --on-accent: #040a07;
  --on-flat: #040a07;
  --glass: rgba(13,26,18,0.72);
  --ground: #06100b;
  --accent-grad: none;
  --fx-1: rgba(22,163,74,0.3);
  --fx-2: rgba(56,189,248,0.42);
  --fx-3: rgba(244,114,182,0.42);
  --fx-4: rgba(249,115,22,0.46);
  --tile-art: linear-gradient(125deg, #0b3c1e 0%, #06100b 50%, #1b596f 100%);
  --ink-2: #93b3a1;
  --amber-ink: #f5c04b;
  --accent-ink: #e879f9;
  --bull-ink: #3ee89a;
  --bear-ink: #ff6b7d;
  --dim-op: 0.54;
  --seg-mkt: #8b95a3;
  --seg-ret: #2f9c8f;
  --seg-val: #937bc9;
  --seg-grw: #7f9c4a;
  --seg-qua: #c2872f;
  --seg-brd: #3bb0ce;
  --seg-rate: #ca6e6e;
  --seg-eco: #ae7c6a;
  --seg-crv: #5789d6;
}

/* ───────────── 2. plumbing ───────────── */
:root[data-skin] { background-color: var(--ground); accent-color: var(--accent); scrollbar-color: var(--border) transparent; background-attachment: fixed; }
:where(:root[data-skin]) body {
  background: transparent;   /* the root paints the ground; the backdrop layer sits between the two */
  font-family: var(--skin-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}
:where(:root[data-skin]) main.panel,
:where(:root[data-skin]) .nav-bar { background: var(--glass); box-shadow: var(--skin-shadow, none); }
:where(:root[data-skin]) .table-wrap:not(.home) { box-shadow: var(--skin-table-shadow, none); }
:where(:root[data-skin]) ::selection { background: var(--accent); color: var(--on-flat); }
:where(:root[data-skin]) .cellbar i { background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
/* not :where() — the switcher's own rule is an inline <style> in the body, so it comes later */
:root[data-skin] .dsw a.here { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .nav-item.cv-nav.cv-on .cv-nav-chip { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-accent) 55%, transparent); }
:where(:root[data-skin]) .page-header h1 {
  background-image: var(--title-grad, none);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: var(--title-fill, currentColor);
  filter: var(--title-glow, none);
}
/* ink on accent fills — generated from the app's own stylesheets */
:where(:root[data-skin]) .cv-subnav button.on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .cv-subnav button.on .n { color: var(--on-accent); }
:where(:root[data-skin]) .cv-chip.on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .cv-chip.on .n { color: var(--on-accent); }
:where(:root[data-skin]) .nav-item.cv-nav.cv-on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .nav-item.cv-nav.cv-on .cv-nav-chip { color: var(--on-accent); }
:where(:root[data-skin]) .cmp-chip.on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .cmp-seg button.on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .cmp-us span { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .cmp-cchip button:hover { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .h6 .h6-pill.on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .h6 .h6-pill.on b { color: var(--on-accent); }
:where(:root[data-skin]) .h6 .h6-btn-p { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .h6 .h6-btn-p:hover { color: var(--on-accent); }
:where(:root[data-skin]) .h6 .h6-segctl button.on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .h6 .h6-segctl button.on b { color: var(--on-accent); }
:where(:root[data-skin]) .nav-item.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) #colmenu .cm-sort2-btn.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) #colmenu .cm-sort-btn.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .qchips .qchip.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .qchips .qchip.active b { color: var(--on-accent); }
:where(:root[data-skin]) .view-toggle .vt.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) button.ctry-mix.agg-chip.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) button.ctry-mix.agg-chip.active:hover { color: var(--on-accent); }
:where(:root[data-skin]) .paper-add button { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .fxb-h.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) button.pb-use:hover { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .psb-mini .psb-mini-add:hover { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .nav-dd.active .nav-dd-btn { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .nav-dd.active .nav-dd-num { color: var(--on-accent); }
:where(:root[data-skin]) .bf-sw.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) button.nudge::after { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .mrm-pill.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .mrm-pill.active b { color: var(--on-accent); }
:where(:root[data-skin]) .mrm-btn { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .mrm-segb.on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .mrm-segb.on b { color: var(--on-accent); }
:where(:root[data-skin]) button.mac-face.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) button.ctry-mix.fam-chip.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) button.ctry-mix.fam-chip.active:hover { color: var(--on-accent); }
:where(:root[data-skin]) .mac-dsort.active { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .tutor-gc button { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .tutor-toast .tt-play { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .tu-steps .tu-step .tu-n { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .tu-end .tu-acts button.pri { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .tutor-chap .tch.on { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .tutor-start button { color: var(--on-accent); background-image: var(--accent-grad, none); }
:where(:root[data-skin]) .tutor-chapcard { color: var(--on-accent); }
:where(:root[data-skin]) .tutor[data-cine="1"] .tutor-bar button:hover { color: var(--on-accent); }
:where(:root[data-skin]) .tutor[data-cine="1"] .tutor-bar button.on { color: var(--on-accent); }
:where(:root[data-skin]) .tutor[data-cine="1"] .tu-end h2 { color: var(--on-accent); }

/* the backdrop layer: fixed, behind everything, never interactive */
#skin-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; contain: strict; display: none; }
:root[data-skin] #skin-fx { display: block; }
#skin-fx > i { position: absolute; display: block; }
#skin-fx > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }

@keyframes sk-bob    { from { transform: translateY(-5px); } to { transform: translateY(7px); } }
@keyframes sk-floor  { to { transform: translateY(44px); } }
@keyframes sk-blink  { 50% { opacity: 0; } }
@keyframes sk-hue    { to { background-position: 300% 0; } }
@keyframes sk-drift1 { from { transform: translate(-6%, -4%) rotate(-10deg) scale(1); }    to { transform: translate(14%, 10%) rotate(6deg) scale(1.18); } }
@keyframes sk-drift2 { from { transform: translate(8%, 2%) rotate(12deg) scale(1.1); }     to { transform: translate(-16%, 12%) rotate(-8deg) scale(.92); } }
@keyframes sk-drift3 { from { transform: translate(-10%, 6%) rotate(4deg) scale(.95); }    to { transform: translate(12%, -6%) rotate(-14deg) scale(1.2); } }
@keyframes sk-drift4 { from { transform: translate(6%, 8%) rotate(-6deg) scale(1.15); }    to { transform: translate(-12%, -10%) rotate(10deg) scale(.9); } }
@keyframes sk-foil   { from { transform: translate3d(-14%, 0, 0); } to { transform: translate3d(14%, 0, 0); } }
@keyframes sk-sheen  { 0%, 62% { transform: translateX(-130%) skewX(-24deg); } 100% { transform: translateX(330%) skewX(-24deg); } }
@keyframes sk-glitch {
  0%, 91%, 100% { transform: none; text-shadow: none; }
  92% { transform: translate(-2px, 0) skewX(-8deg); text-shadow: 2px 0 var(--fx-3), -2px 0 var(--fx-2); }
  94% { transform: translate(2px, 1px); text-shadow: -3px 0 var(--fx-3), 3px 0 var(--fx-2); }
  96% { transform: translate(-1px, -1px) skewX(6deg); text-shadow: 1px 0 var(--fx-2); }
}
/* wave 2 (2026-10-02) */
@keyframes sk-spin    { to { transform: rotate(360deg); } }
@keyframes sk-rise    { to { transform: translateY(-50%); } }
@keyframes sk-pulse   { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes sk-beam    { 0%, 100% { transform: translateX(-10%) skewX(-18deg); } 50% { transform: translateX(420%) skewX(-18deg); } }
@keyframes sk-grain   { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, 2%); } 100% { transform: translate(2%, -1%); } }
@keyframes sk-twinkle { from { opacity: .25; } to { opacity: .95; } }
/* transform only (a blurred layer that also animates its border-radius repaints every frame) */
@keyframes sk-lava1   { from { transform: translateY(0) rotate(-6deg) scale(1); } to { transform: translateY(-62vh) rotate(9deg) scale(.82, 1.14); } }
@keyframes sk-lava2   { from { transform: translateY(-40vh) rotate(7deg) scale(.9, 1.1); } to { transform: translateY(4vh) rotate(-10deg) scale(1.08, .92); } }
@keyframes sk-lava3   { from { transform: translateY(-8vh) rotate(-4deg) scale(1.05); } to { transform: translateY(-70vh) rotate(12deg) scale(.78, 1.2); } }
/* wave 3 */
@keyframes sk-sweep   { from { transform: rotate(-26deg); } to { transform: rotate(26deg); } }
@keyframes sk-smoke   { from { transform: translateY(12vh) scale(1); } to { transform: translateY(-28vh) scale(1.25, 1.1); } }
/* motion is opt-out: the Motion switch in the picker, or the OS "reduce motion" setting */
:root[data-skin-motion="off"] #skin-fx *, :root[data-skin-motion="off"] .page-header h1,
:root[data-skin-motion="off"] .page-header h1::after, :root[data-skin-motion="off"] .page-header h1::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #skin-fx *, :root[data-skin] .page-header h1, :root[data-skin] .page-header h1::after { animation: none !important; }
}

/* ───────────── 3. character ───────────── */

/* ── SYNTHWAVE — vaporwave pastels by day, an outrun sunset by night ── */
:root[data-skin="synthwave"] {
  --title-grad: linear-gradient(90deg, #d325c9, #7c3aed 55%, #0a9fbd); --title-fill: transparent;
  --skin-shadow: 0 10px 34px -18px rgba(177, 31, 208, .55);
  --skin-table-shadow: 0 0 0 1px rgba(177, 31, 208, .06), 0 12px 32px -22px rgba(124, 58, 237, .6);
  background-image: linear-gradient(180deg, #ffd3f0 0, #ecdcff 240px, #f3e6ff 560px);
}
:root[data-skin="synthwave"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #ff6bd6, #b98cff 50%, #35e3ff);
  --title-glow: drop-shadow(0 0 7px rgba(255, 92, 214, .55));
  --skin-shadow: 0 0 0 1px rgba(228, 107, 255, .10), 0 0 34px -12px rgba(228, 107, 255, .55);
  --skin-table-shadow: 0 0 0 1px rgba(53, 227, 255, .10), 0 0 30px -14px rgba(228, 107, 255, .7);
  background-image:
    radial-gradient(1.2px 1.2px at 22px 31px, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1px 1px at 97px 12px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 151px 74px, rgba(255,200,255,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 61px 96px, rgba(190,230,255,.6) 50%, transparent 52%),
    linear-gradient(180deg, #2a1166 0, #160838 200px, #0c0420 520px);
  background-size: 190px 120px, 190px 120px, 190px 120px, 190px 120px, auto;
}
:root[data-skin="synthwave"] #skin-fx .fx1 {            /* the striped sun, half set behind the header */
  width: 236px; height: 236px; left: 55%; top: -121px; border-radius: 50%;
  background: linear-gradient(180deg, var(--fx-3) 35%, var(--fx-1) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 57%, transparent 57% 59%, #000 59% 66%, transparent 66% 69%, #000 69% 76%, transparent 76% 80%, #000 80% 86.5%, transparent 86.5% 91.5%, #000 91.5% 95.5%, transparent 95.5%);
          mask-image: linear-gradient(180deg, #000 0 57%, transparent 57% 59%, #000 59% 66%, transparent 66% 69%, #000 69% 76%, transparent 76% 80%, #000 80% 86.5%, transparent 86.5% 91.5%, #000 91.5% 95.5%, transparent 95.5%);
  animation: sk-bob 9s ease-in-out infinite alternate;
}
:root[data-skin="synthwave"] #skin-fx .fx2 {            /* the grid floor, running to the horizon */
  left: -60%; right: -60%; bottom: -2px; height: 56vh; overflow: hidden;
  transform: perspective(420px) rotateX(63deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 75%); mask-image: linear-gradient(180deg, transparent 0, #000 75%);
}
:root[data-skin="synthwave"] #skin-fx .fx2 b {
  position: absolute; inset: -44px 0 0 0;
  background:
    linear-gradient(to right, var(--fx-grid) 1.5px, transparent 1.5px) 0 0 / 44px 44px,
    linear-gradient(to bottom, var(--fx-grid) 1.5px, transparent 1.5px) 0 0 / 44px 44px;
  animation: sk-floor 2.8s linear infinite;
}
:root[data-skin="synthwave"] #skin-fx .fx3 {            /* haze on the horizon */
  left: 4%; right: 30%; top: -150px; height: 300px;
  background: radial-gradient(closest-side, var(--fx-2), transparent 72%); filter: blur(26px);
}
:root[data-skin="synthwave"] #skin-fx .fx4 {
  left: 38%; right: -6%; top: -170px; height: 330px;
  background: radial-gradient(closest-side, var(--fx-4), transparent 72%); filter: blur(30px);
}

/* ── MATRIX — green-bar printout by day, phosphor rain by night ── */
:root[data-skin="matrix"] {
  --skin-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --r-box: 2px; --r-ctl: 2px; --r-pill: 2px;
  --skin-shadow: none;
  background-image: linear-gradient(180deg, #d3e6c9 0, #e6eedf 150px);
}
:root[data-skin="matrix"][data-theme="dark"] {
  --title-glow: drop-shadow(0 0 6px rgba(0, 255, 102, .65));
  --skin-shadow: 0 0 0 1px rgba(0, 255, 102, .07), 0 0 26px -12px rgba(0, 255, 102, .5);
  --skin-table-shadow: 0 0 24px -14px rgba(0, 255, 102, .75);
  background-image: linear-gradient(180deg, #062312 0, #020a04 260px);
}
:where(:root[data-skin="matrix"]) body { letter-spacing: -.035em; }
/* text the app truncates keeps the proportional face, so Matrix never hides a character Classic shows (generated) */
:where(:root[data-skin="matrix"]) .af-sym { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .af-name { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .af-ev { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .bk-tk { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .bk-ts { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .bk-bl { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cv-crumb { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cv-sug-it .nm { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cv-tile .k { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cv-tile .v { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cv-tile .s { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cmp-tip b span { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cmp-vr .v { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cmp-sugg .o b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cmp-sugg .nm { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cmp-h2t .co { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .cmp-h2t .co .nm { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .fin-kpi .k { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .fin-kpi .spk-cap .n { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .fin-funnel .row .n { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .ipo-oq { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .ipo-rk-nm { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mi-tile .v { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mi-lv .n { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mi-bd-item b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-clip1 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sug-it .nm { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-needs-t { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-tile .v { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-oc-nm b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-oc-what { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-orow > b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-act-t b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-act-t small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-nm b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sub { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-out-1 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sug-t small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-chg-r > span:last-child { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-ctl-n b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-ctl-n small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-step-t small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-ev span { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-ev small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-finds li > span:last-child { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-trg-c span { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-tl li small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-src { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-cmp-ev { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sc-nm b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sc-chip { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sc-un { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-st-c { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sct th { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sct td { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-sct-name b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-mc-v > small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h6 .h6-card-std .h6-card-u { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .rp-head .rp-title { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .sv-hash { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) td.name-cell .clip { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) td.sector-cell .clip { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) button.wl-pick { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) #colmenu .wl-lab { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) #colmenu .wl-glab { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .hc-name { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .hc-mut { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) td.ibd-note-cell .clip { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .bf-name { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .bf-rbl { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .rot-country table.rot-lead td.rot-sec { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mrm-perf { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) td.mrm-name .mrm-nm { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) td.mrm-nm { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mrm-alert-t { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mrm-vstrip { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mrm-find-t { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mrm-sub2 { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mrm-pf-k { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .mrm-gov-st { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h2-bc-h small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h2-br-l { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h2-bo > div > span { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h2-tile-h b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h2-g-h small { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h2-seg-h > b { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h2-seg-v .h2-ro { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .h2-t .hc-name { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .tc-tk { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .tc-ts { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .tu-bars .tu-brow .tu-bl { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
:where(:root[data-skin="matrix"]) .tutor-chap .tch-title { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal; }
/* a monospace nav is a fifth wider; a point smaller keeps it on the rows Classic uses */
:where(:root[data-skin="matrix"]) :is(.nav-item, .nav-dd-btn, .nav-group-label, .nav-dd-num) { font-size: 11.5px; letter-spacing: -.06em; }
:root[data-skin="matrix"] .dsw a { font-size: 11.5px; letter-spacing: -.06em; }
:where(:root[data-skin="matrix"]) .page-header h1 { color: var(--accent); }
:where(:root[data-skin="matrix"][data-theme="dark"]) .page-header h1 { color: var(--accent-2); }
:root[data-skin="matrix"][data-theme="dark"] #skin-fx > canvas { display: block; opacity: .9; }
:root[data-skin="matrix"][data-theme="dark"] body::after {      /* CRT scan lines, over everything, never interactive */
  content: ""; position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 2px, var(--fx-scan) 2px 3px);
}
:root[data-skin="matrix"] #skin-fx .fx1 {
  left: -10%; right: -10%; top: -160px; height: 300px;
  background: radial-gradient(closest-side, var(--fx-2), transparent 70%); filter: blur(30px);
}

/* ── AURORA — an opal sky by day, the northern lights by night ── */
:root[data-skin="aurora"] {
  --title-grad: linear-gradient(90deg, #0d9f6e, #2a7fd6 50%, #7a4fe0); --title-fill: transparent;
  --skin-shadow: 0 12px 40px -22px rgba(74, 79, 224, .5);
  --skin-table-shadow: 0 14px 36px -26px rgba(20, 33, 58, .55);
}
:root[data-skin="aurora"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #4dffb5, #6cc4ff 50%, #b79bff);
  --title-glow: drop-shadow(0 0 8px rgba(77, 255, 181, .35));
  --skin-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 14px 44px -18px rgba(0, 0, 0, .8);
  --skin-table-shadow: 0 0 0 1px rgba(108, 196, 255, .06), 0 0 34px -16px rgba(77, 255, 181, .45);
  background-image:
    radial-gradient(1.2px 1.2px at 31px 22px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 64px, rgba(200,230,255,.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 78px 108px, rgba(255,255,255,.45) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 170px 140px, rgba(180,255,220,.55) 50%, transparent 52%);
  background-size: 210px 160px;
}
:root[data-skin="aurora"] #skin-fx > i { border-radius: 50%; filter: blur(44px); }
:root[data-skin="aurora"] #skin-fx .fx1 { left: -12%; top: -240px; width: 64%; height: 470px; background: radial-gradient(closest-side, var(--fx-1), transparent 72%); animation: sk-drift1 41s ease-in-out infinite alternate; }
:root[data-skin="aurora"] #skin-fx .fx2 { right: -14%; top: -260px; width: 70%; height: 520px; background: radial-gradient(closest-side, var(--fx-2), transparent 72%); animation: sk-drift2 53s ease-in-out infinite alternate; }
:root[data-skin="aurora"] #skin-fx .fx3 { left: 24%; top: -170px; width: 52%; height: 350px; background: radial-gradient(closest-side, var(--fx-3), transparent 72%); animation: sk-drift3 37s ease-in-out infinite alternate; }
:root[data-skin="aurora"] #skin-fx .fx4 { left: 8%; bottom: -260px; width: 84%; height: 480px; background: radial-gradient(closest-side, var(--fx-4), transparent 72%); animation: sk-drift4 47s ease-in-out infinite alternate; }

/* ── ACID — a groovy poster by day, blacklight by night ── */
:root[data-skin="acid"] {
  --r-box: 14px; --r-ctl: 999px; --r-pill: 999px;
  --title-grad: linear-gradient(90deg, #e0329a, #ff6a00, #c99700, #12a594, #7a2bd6, #e0329a); --title-fill: transparent;
  --skin-shadow: 0 12px 36px -20px rgba(122, 43, 214, .5);
  --skin-table-shadow: 0 14px 34px -24px rgba(45, 26, 14, .6);
}
:root[data-skin="acid"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #ff4fb4, #ff9a2e, #ffe600, #4fe38a, #c98aff, #ff4fb4);
  --title-glow: drop-shadow(0 0 8px rgba(255, 79, 180, .45));
  --skin-shadow: 0 0 0 1px rgba(201, 138, 255, .10), 0 0 38px -14px rgba(255, 46, 147, .5);
  --skin-table-shadow: 0 0 0 1px rgba(255, 138, 0, .08), 0 0 34px -14px rgba(122, 43, 255, .7);
}
:where(:root[data-skin="acid"]) .page-header h1 { background-size: 300% 100%; animation: sk-hue 16s linear infinite; }
:root[data-skin="acid"] #skin-fx > i { border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; filter: blur(30px); }
:root[data-skin="acid"] #skin-fx .fx1 { left: -8%; top: -200px; width: 44%; height: 400px; background: var(--fx-1); animation: sk-drift1 29s ease-in-out infinite alternate; }
:root[data-skin="acid"] #skin-fx .fx2 { right: -6%; top: -220px; width: 40%; height: 420px; background: var(--fx-2); animation: sk-drift2 35s ease-in-out infinite alternate; }
:root[data-skin="acid"] #skin-fx .fx3 { left: 32%; top: -190px; width: 34%; height: 330px; background: var(--fx-3); animation: sk-drift3 24s ease-in-out infinite alternate; }
:root[data-skin="acid"] #skin-fx .fx4 { left: 18%; bottom: -260px; width: 60%; height: 460px; background: var(--fx-4); animation: sk-drift4 39s ease-in-out infinite alternate; }

/* ── PRISM — hologram foil by day, an oil slick by night ── */
:root[data-skin="prism"] {
  --title-grad: linear-gradient(90deg, #e0329a, #6a4bf0 35%, #0a9fbd 65%, #c18a00); --title-fill: transparent;
  --skin-shadow: -1px -1px 0 var(--fx-edge-a), 1px 1px 0 var(--fx-edge-b), 0 14px 40px -24px rgba(90, 61, 240, .6);
  --skin-table-shadow: -1px -1px 0 var(--fx-edge-a), 1px 1px 0 var(--fx-edge-b);
}
:root[data-skin="prism"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #ff9bd5, #a594ff 35%, #7ee8ff 65%, #ffe08a);
  --title-glow: drop-shadow(0 0 7px rgba(165, 148, 255, .45));
}
:root[data-skin="prism"] #skin-fx .fx1 {                /* the foil: one wide gradient, sliding */
  inset: -10% -40%;
  background: linear-gradient(112deg, var(--fx-1), var(--fx-2) 14%, var(--fx-3) 28%, var(--fx-4) 42%, var(--fx-1) 56%, var(--fx-2) 70%, var(--fx-3) 84%, var(--fx-4));
  animation: sk-foil 44s ease-in-out infinite alternate;
}
:root[data-skin="prism"] #skin-fx .fx2 {                /* a sheen that crosses now and then */
  top: -20%; bottom: -20%; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, var(--fx-sheen), transparent); filter: blur(12px);
  animation: sk-sheen 13s ease-in-out infinite;
}

/* ── CYBERPUNK — hazard yellow by day, a neon city by night ── */
:root[data-skin="cyberpunk"] {
  --r-box: 0px; --r-ctl: 0px; --r-pill: 0px;
  --skin-shadow: 5px 5px 0 rgba(10, 10, 12, .9);
  --skin-table-shadow: none;
  background-image:
    repeating-linear-gradient(-45deg, #0a0a0c 0 11px, transparent 11px 22px),
    radial-gradient(rgba(10, 10, 12, .16) 1.1px, transparent 1.4px);
  background-size: 100% 6px, 9px 9px; background-repeat: no-repeat, repeat;
}
:root[data-skin="cyberpunk"][data-theme="dark"] {
  --skin-shadow: 0 0 0 1px rgba(47, 196, 255, .14), 0 0 30px -14px rgba(47, 196, 255, .7);
  --skin-table-shadow: 0 0 28px -14px rgba(255, 42, 109, .6);
  background-image:
    repeating-linear-gradient(-45deg, #fcee0a 0 11px, #0a0a0c 11px 22px),
    linear-gradient(rgba(47, 196, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47, 196, 255, .05) 1px, transparent 1px);
  background-size: 100% 5px, 36px 36px, 36px 36px; background-repeat: no-repeat, repeat, repeat;
}
:where(:root[data-skin="cyberpunk"]) .page-header h1 { animation: sk-glitch 7s steps(1) infinite; }
/* the accent edges are inset shadows, not borders: a border would narrow the nav by 3px and, at the
   widths where the nav only just fits, wrap it onto another row */
:where(:root[data-skin="cyberpunk"]) .nav-bar { box-shadow: inset 4px 0 0 var(--accent-2), var(--skin-shadow, 0 0 #0000); }
:where(:root[data-skin="cyberpunk"]) main.panel { box-shadow: inset 0 2px 0 var(--accent-2), var(--skin-shadow, 0 0 #0000); }
:root[data-skin="cyberpunk"] #skin-fx .fx1 { left: -12%; top: -260px; width: 54%; height: 480px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-2), transparent 70%); filter: blur(40px); animation: sk-drift1 33s ease-in-out infinite alternate; }
:root[data-skin="cyberpunk"] #skin-fx .fx2 { right: -12%; top: -250px; width: 54%; height: 470px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-3), transparent 70%); filter: blur(40px); animation: sk-drift2 39s ease-in-out infinite alternate; }

/* ── KALEIDOSCOPE — a candy pinwheel by day, a spinning mandala by night ── */
:root[data-skin="kaleidoscope"] {
  --title-grad: linear-gradient(90deg, #c026d3, #7c3aed 40%, #0891b2 70%, #d97706); --title-fill: transparent;
  --skin-shadow: 0 12px 36px -20px rgba(192, 38, 211, .5);
  --skin-table-shadow: 0 14px 34px -24px rgba(42, 18, 48, .5);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .38) 0 16px, transparent 16px 34px);
}
:root[data-skin="kaleidoscope"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #f0abfc, #c084fc 40%, #67e8f9 70%, #ffc94a);
  --title-glow: drop-shadow(0 0 8px rgba(240, 171, 252, .45));
  --skin-shadow: 0 0 0 1px rgba(240, 171, 252, .10), 0 0 38px -14px rgba(255, 63, 164, .5);
  --skin-table-shadow: 0 0 0 1px rgba(103, 232, 249, .07), 0 0 34px -14px rgba(168, 85, 247, .7);
  background-image: none;
}
/* three mandalas: sectors of the four backdrop colours, blurred a little, turning at different speeds */
:root[data-skin="kaleidoscope"] #skin-fx > i { border-radius: 50%; filter: blur(14px); }
:root[data-skin="kaleidoscope"] #skin-fx .fx1 {
  left: 50%; top: -46vmax; width: 88vmax; height: 88vmax; margin-left: -44vmax;
  background: repeating-conic-gradient(from 0deg, var(--fx-1) 0 12deg, var(--fx-2) 12deg 24deg, var(--fx-3) 24deg 36deg, var(--fx-4) 36deg 48deg, transparent 48deg 60deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 100%); mask-image: radial-gradient(closest-side, #000 18%, transparent 100%);
  animation: sk-spin 110s linear infinite;
}
:root[data-skin="kaleidoscope"] #skin-fx .fx2 {
  left: -34vmax; bottom: -52vmax; width: 72vmax; height: 72vmax;
  background: repeating-conic-gradient(from 30deg, var(--fx-4) 0 20deg, var(--fx-3) 20deg 40deg, transparent 40deg 60deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 100%); mask-image: radial-gradient(closest-side, #000 10%, transparent 100%);
  animation: sk-spin 150s linear infinite reverse;
}
:root[data-skin="kaleidoscope"] #skin-fx .fx3 {
  right: -32vmax; bottom: -48vmax; width: 66vmax; height: 66vmax;
  background: repeating-conic-gradient(from 15deg, var(--fx-2) 0 18deg, var(--fx-1) 18deg 36deg, transparent 36deg 54deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 100%); mask-image: radial-gradient(closest-side, #000 10%, transparent 100%);
  animation: sk-spin 90s linear infinite;
}

/* ── ABYSS — a tide pool by day, the bioluminescent deep by night ── */
:root[data-skin="abyss"] {
  --title-grad: linear-gradient(90deg, #0a6aa0, #0d9488 50%, #4f46e5); --title-fill: transparent;
  --skin-shadow: 0 12px 36px -20px rgba(10, 106, 160, .45);
  --skin-table-shadow: 0 12px 30px -24px rgba(15, 42, 46, .5);
  background-image: radial-gradient(ellipse 80% 40% at 50% -10%, rgba(255, 255, 255, .75), transparent 70%);
}
:root[data-skin="abyss"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #3cc8f8, #2dd4bf 50%, #a5b4fc);
  --title-glow: drop-shadow(0 0 8px rgba(60, 200, 248, .45));
  --skin-shadow: 0 0 0 1px rgba(60, 200, 248, .08), 0 0 36px -14px rgba(60, 200, 248, .5);
  --skin-table-shadow: 0 0 30px -16px rgba(45, 212, 191, .5);
  background-image: linear-gradient(180deg, #06243a 0, #02101a 420px);
}
/* caustics: two drifting ripple fields; bubbles: five dot layers on a double-height sheet that scrolls up */
:root[data-skin="abyss"] #skin-fx .fx1 { inset: -20% -10%; opacity: .55; filter: blur(1.5px); background: repeating-radial-gradient(circle at 30% 20%, transparent 0 38px, var(--fx-1) 40px 42px, transparent 44px 92px); animation: sk-drift1 64s ease-in-out infinite alternate; }
:root[data-skin="abyss"] #skin-fx .fx2 { inset: -20% -10%; opacity: .5; filter: blur(1.5px); background: repeating-radial-gradient(circle at 70% 60%, transparent 0 52px, var(--fx-2) 54px 56px, transparent 58px 122px); animation: sk-drift2 79s ease-in-out infinite alternate; }
:root[data-skin="abyss"] #skin-fx .fx3 {
  left: 0; right: 0; top: 0; height: 200%;
  background:
    radial-gradient(circle at 12% 80%, var(--fx-3) 0 3px, transparent 4px),
    radial-gradient(circle at 48% 30%, var(--fx-3) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 60%, var(--fx-3) 0 4px, transparent 5px),
    radial-gradient(circle at 30% 10%, var(--fx-3) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 90%, var(--fx-3) 0 3px, transparent 4px);
  background-size: 260px 420px, 330px 520px, 410px 640px, 290px 380px, 370px 560px;
  animation: sk-rise 42s linear infinite;
}
:root[data-skin="abyss"] #skin-fx .fx4 { left: 52%; top: -210px; width: 48%; height: 430px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-4), transparent 72%); filter: blur(40px); animation: sk-drift4 49s ease-in-out infinite alternate; }

/* ── NOIR — newsprint by day, film noir by night ── */
:root[data-skin="noir"] {
  --r-box: 3px; --r-ctl: 3px; --r-pill: 3px;
  --skin-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 10px 24px -18px rgba(0, 0, 0, .5);
  --skin-table-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
  background-image: radial-gradient(rgba(20, 20, 19, .12) 1px, transparent 1.3px);     /* halftone */
  background-size: 7px 7px;
}
:root[data-skin="noir"][data-theme="dark"] {
  --skin-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 40px -20px #000;
  --skin-table-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.3px);
  background-size: 6px 6px;
}
/* vignette, a spotlight that sweeps the room, and (at night) film grain */
:root[data-skin="noir"] #skin-fx .fx1 { inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 42%, var(--fx-3) 100%); }
:root[data-skin="noir"] #skin-fx .fx2 { top: -30%; bottom: -30%; left: -4%; width: 24%; background: linear-gradient(90deg, transparent, var(--fx-2), transparent); filter: blur(26px); animation: sk-beam 27s ease-in-out infinite; }
:root[data-skin="noir"][data-theme="dark"] #skin-fx .fx3 {
  inset: -4%; opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: sk-grain .5s steps(5) infinite;
}

/* ── NEBULA — an observatory at dawn by day, deep space by night ── */
:root[data-skin="nebula"] {
  --title-grad: linear-gradient(90deg, #5b21b6, #db2777 50%, #0891b2); --title-fill: transparent;
  --skin-shadow: 0 12px 40px -22px rgba(91, 33, 182, .5);
  --skin-table-shadow: 0 14px 36px -26px rgba(21, 22, 46, .5);
}
:root[data-skin="nebula"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #c4b5fd, #f472b6 50%, #7dd3fc);
  --title-glow: drop-shadow(0 0 8px rgba(196, 181, 253, .45));
  --skin-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 14px 44px -18px rgba(0, 0, 0, .85);
  --skin-table-shadow: 0 0 0 1px rgba(196, 181, 253, .06), 0 0 34px -16px rgba(124, 58, 237, .5);
  background-image:
    radial-gradient(1.2px 1.2px at 31px 22px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 120px 64px, rgba(220,230,255,.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 78px 108px, rgba(255,255,255,.5) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 170px 140px, rgba(255,220,240,.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 200px 30px, rgba(255,255,255,.45) 50%, transparent 52%);
  background-size: 230px 170px;
}
/* a spiral galaxy turning once every four minutes, two nebula clouds, and (at night) stars that breathe */
:root[data-skin="nebula"] #skin-fx .fx1 {
  left: 50%; top: -36vmax; width: 84vmax; height: 84vmax; margin-left: -42vmax; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20deg, var(--fx-1) 60deg, transparent 110deg 200deg, var(--fx-2) 240deg, transparent 290deg 360deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 50%, transparent 100%); mask-image: radial-gradient(closest-side, #000 8%, rgba(0, 0, 0, .55) 50%, transparent 100%);
  filter: blur(32px); animation: sk-spin 240s linear infinite;
}
:root[data-skin="nebula"] #skin-fx .fx2 { left: -10%; bottom: -260px; width: 60%; height: 480px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-3), transparent 72%); filter: blur(44px); animation: sk-drift2 61s ease-in-out infinite alternate; }
:root[data-skin="nebula"] #skin-fx .fx3 { right: -12%; top: -200px; width: 50%; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-4), transparent 72%); filter: blur(44px); animation: sk-drift3 53s ease-in-out infinite alternate; }
:root[data-skin="nebula"][data-theme="dark"] #skin-fx .fx4 {
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 40px 60px, rgba(255,255,255,.9) 50%, transparent 52%),
    radial-gradient(1px 1px at 150px 20px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(2px 2px at 90px 140px, rgba(200,220,255,.9) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 210px 110px, rgba(255,230,250,.85) 50%, transparent 52%);
  background-size: 250px 190px; animation: sk-twinkle 3.6s ease-in-out infinite alternate;
}

/* ── HYPNO — op-art by day, hypnosis by night ── */
:root[data-skin="hypno"] {
  --skin-shadow: 0 10px 30px -18px rgba(0, 0, 0, .35);
  --skin-table-shadow: 0 0 0 1px rgba(17, 17, 17, .08);
}
:root[data-skin="hypno"][data-theme="dark"] {
  --title-glow: drop-shadow(0 0 7px rgba(142, 197, 255, .45));
  --skin-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 16px 40px -18px #000;
  --skin-table-shadow: 0 0 0 1px rgba(255, 255, 255, .06);
}
/* concentric rings that breathe, a spiral that turns, and a checkerboard floor in perspective */
:root[data-skin="hypno"] #skin-fx .fx1 {
  left: 50%; top: 50%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; border-radius: 50%;
  background: repeating-radial-gradient(circle, var(--fx-1) 0 13px, transparent 13px 34px);
  -webkit-mask-image: radial-gradient(closest-side, #000 0, transparent 68%); mask-image: radial-gradient(closest-side, #000 0, transparent 68%);
  animation: sk-pulse 7s ease-in-out infinite;
}
:root[data-skin="hypno"] #skin-fx .fx2 {
  left: 50%; top: -42vmax; width: 92vmax; height: 92vmax; margin-left: -46vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--fx-2) 0 9deg, transparent 9deg 30deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 0, transparent 86%); mask-image: radial-gradient(closest-side, #000 0, transparent 86%);
  animation: sk-spin 70s linear infinite;
}
:root[data-skin="hypno"] #skin-fx .fx3 {
  left: -40%; right: -40%; bottom: -4px; height: 40vh;
  background: repeating-conic-gradient(var(--fx-1) 0 25%, transparent 0 50%) 0 0 / 48px 48px;
  transform: perspective(520px) rotateX(60deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 82%); mask-image: linear-gradient(180deg, transparent, #000 82%);
}

/* ── LAVA — terracotta and turquoise by day, a lava lamp by night ── */
:root[data-skin="lava"] {
  --r-box: 16px; --r-ctl: 999px; --r-pill: 999px;
  --title-grad: linear-gradient(90deg, #c2410c, #e11d48 50%, #0a6ea8); --title-fill: transparent;
  --skin-shadow: 0 12px 34px -20px rgba(194, 65, 12, .45);
  --skin-table-shadow: 0 12px 30px -24px rgba(44, 21, 16, .5);
  background-image: linear-gradient(180deg, #ffd9c2 0, #fbe9dc 300px);
}
:root[data-skin="lava"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #ff6a1a, #ff2d55 50%, #67e8f9);
  --title-glow: drop-shadow(0 0 8px rgba(255, 106, 26, .5));
  --skin-shadow: 0 0 0 1px rgba(255, 106, 26, .10), 0 0 36px -14px rgba(255, 61, 0, .55);
  --skin-table-shadow: 0 0 30px -16px rgba(255, 61, 0, .6);
  background-image: linear-gradient(180deg, #1a0806 0, #0c0504 400px);
}
/* the lamp: three wax blobs that rise, swell and sink on their own clocks, under a warm glow */
:root[data-skin="lava"] #skin-fx > i { filter: blur(26px); border-radius: 48% 52% 55% 45% / 55% 45% 55% 45%; }
:root[data-skin="lava"] #skin-fx .fx1 { left: 6%; bottom: -34vh; width: 34%; height: 62vh; background: var(--fx-1); animation: sk-lava1 29s ease-in-out infinite alternate; }
:root[data-skin="lava"] #skin-fx .fx2 { left: 40%; bottom: -38vh; width: 30%; height: 58vh; background: var(--fx-2); animation: sk-lava2 37s ease-in-out infinite alternate; }
:root[data-skin="lava"] #skin-fx .fx3 { right: 4%; bottom: -36vh; width: 32%; height: 66vh; background: var(--fx-3); animation: sk-lava3 43s ease-in-out infinite alternate; }
:root[data-skin="lava"] #skin-fx .fx4 { left: -10%; right: -10%; top: -230px; height: 410px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-4), transparent 70%); filter: blur(40px); }

/* ── SPIDER-MAN — red and blue, webs and halftone ── */
:root[data-skin="spiderman"] {
  --title-grad: linear-gradient(90deg, #dc2626, #1e3a8a 60%); --title-fill: transparent;
  --skin-shadow: 0 10px 30px -18px rgba(220, 38, 38, .45);
  --skin-table-shadow: 0 0 0 1px rgba(30, 58, 138, .06);
  background-image: radial-gradient(rgba(220, 38, 38, .11) 1px, transparent 1.4px);     /* halftone */
  background-size: 8px 8px;
}
:root[data-skin="spiderman"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #ff5a5a, #93c5fd 60%);
  --title-glow: drop-shadow(0 0 7px rgba(255, 59, 59, .45));
  --skin-shadow: 0 0 0 1px rgba(147, 197, 253, .08), 0 0 34px -14px rgba(255, 59, 59, .5);
  --skin-table-shadow: 0 0 30px -16px rgba(79, 124, 255, .5);
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px), linear-gradient(160deg, #1a0609 0, #060a1a 60%);
  background-size: 7px 7px, auto;
}
/* two webs in opposite corners: spokes and rings, masked to a circle; a blue glow between them */
:root[data-skin="spiderman"] #skin-fx .fx1, :root[data-skin="spiderman"] #skin-fx .fx2 {
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}
:root[data-skin="spiderman"] #skin-fx .fx1 {
  left: -16vmax; top: -16vmax; width: 62vmax; height: 62vmax;
  background: repeating-conic-gradient(from 0deg, var(--fx-1) 0 1.1deg, transparent 1.1deg 22.5deg), repeating-radial-gradient(circle, transparent 0 34px, var(--fx-1) 34px 36px);
  animation: sk-pulse 9s ease-in-out infinite;
}
:root[data-skin="spiderman"] #skin-fx .fx2 {
  right: -18vmax; bottom: -18vmax; width: 56vmax; height: 56vmax;
  background: repeating-conic-gradient(from 10deg, var(--fx-2) 0 1.1deg, transparent 1.1deg 20deg), repeating-radial-gradient(circle, transparent 0 30px, var(--fx-2) 30px 32px);
  animation: sk-pulse 12s ease-in-out infinite reverse;
}
:root[data-skin="spiderman"] #skin-fx .fx3 { left: 30%; top: -200px; width: 50%; height: 400px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-3), transparent 70%); filter: blur(40px); animation: sk-drift3 47s ease-in-out infinite alternate; }

/* ── BATMAN — Gotham: rain-grey by day, the Bat-Signal in the clouds by night ── */
:root[data-skin="batman"] {
  --skin-shadow: 0 10px 28px -18px rgba(15, 23, 42, .5);
  --skin-table-shadow: 0 0 0 1px rgba(15, 23, 42, .06);
  background-image: linear-gradient(180deg, #d9dee6 0, #e9ecf0 320px);
}
:root[data-skin="batman"][data-theme="dark"] {
  --title-glow: drop-shadow(0 0 7px rgba(245, 197, 24, .35));
  --skin-shadow: 0 0 0 1px rgba(148, 163, 184, .08), 0 18px 40px -20px #000;
  --skin-table-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
  background-image: linear-gradient(180deg, #121a2a 0, #070a10 380px);
}
/* skyline: two bands of buildings at different heights; a searchlight that sweeps; clouds it lights up */
:root[data-skin="batman"] #skin-fx .fx1 {
  left: 0; right: 0; bottom: 0; height: 24vh;
  background: repeating-linear-gradient(90deg, var(--fx-1) 0 46px, transparent 46px 58px, var(--fx-1) 58px 84px, transparent 84px 92px, var(--fx-1) 92px 150px, transparent 150px 166px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 45%); mask-image: linear-gradient(180deg, transparent 0, #000 45%);
}
:root[data-skin="batman"] #skin-fx .fx4 {
  left: 0; right: 0; bottom: 0; height: 13vh;
  background: repeating-linear-gradient(90deg, var(--fx-4) 0 22px, transparent 22px 30px, var(--fx-4) 30px 70px, transparent 70px 76px, var(--fx-4) 76px 98px, transparent 98px 112px) 37px 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 50%); mask-image: linear-gradient(180deg, transparent 0, #000 50%);
}
:root[data-skin="batman"] #skin-fx .fx2 {
  left: 50%; bottom: 6vh; width: 22vmax; height: 90vh; margin-left: -11vmax;   /* the wide end, and the signal on it, stay inside the viewport */
  background: linear-gradient(0deg, var(--fx-2), transparent 80%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0); transform-origin: 50% 100%; filter: blur(4px);
  animation: sk-sweep 23s ease-in-out infinite alternate;
}
/* the Bat-Signal: a disc of the beam's own light at its wide end, a bat cut out of it (clip-path) */
:root[data-skin="batman"] #skin-fx .fx2 b { position: absolute; left: 50%; top: 2%; width: 10vmax; height: 10vmax; margin-left: -5vmax; border-radius: 50%; background: var(--fx-2); box-shadow: 0 0 40px 12px var(--fx-2); }
:root[data-skin="batman"] #skin-fx .fx2 b::before { content: ""; position: absolute; left: 12%; top: 26%; width: 76%; height: 48%; background: var(--fx-1);
  clip-path: polygon(50% 12%, 56% 2%, 58% 16%, 66% 14%, 78% 4%, 100% 22%, 86% 30%, 90% 40%, 76% 42%, 80% 54%, 66% 48%, 58% 60%, 53% 54%, 50% 64%, 47% 54%, 42% 60%, 34% 48%, 20% 54%, 24% 42%, 10% 40%, 14% 30%, 0% 22%, 22% 4%, 34% 14%, 42% 16%, 44% 2%); }
:root[data-skin="batman"] #skin-fx .fx3 { left: 10%; top: -220px; width: 80%; height: 420px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-3), transparent 72%); filter: blur(44px); animation: sk-drift2 59s ease-in-out infinite alternate; }

/* ── SOLO LEVELING — the shadow army's violet mist, the System's blue window ── */
:root[data-skin="sololeveling"] {
  --title-grad: linear-gradient(90deg, #3730a3, #7c3aed 55%, #2563eb); --title-fill: transparent;
  --skin-shadow: 0 12px 36px -20px rgba(55, 48, 163, .5);
  --skin-table-shadow: 0 0 0 1px rgba(55, 48, 163, .06);
}
:root[data-skin="sololeveling"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #818cf8, #c084fc 55%, #60a5fa);
  --title-glow: drop-shadow(0 0 8px rgba(129, 140, 248, .5));
  --skin-shadow: 0 0 0 1px rgba(129, 140, 248, .10), 0 0 38px -14px rgba(109, 40, 217, .6);
  --skin-table-shadow: 0 0 0 1px rgba(168, 85, 247, .07), 0 0 34px -16px rgba(59, 130, 246, .45);
  background-image: linear-gradient(180deg, #120a2a 0, #07040f 360px);
}
/* shadow mist rising from the floor; a system line and glow along the top */
:root[data-skin="sololeveling"] #skin-fx .fx1 { left: -10%; bottom: -30vh; width: 60%; height: 60vh; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-1), transparent 70%); filter: blur(36px); animation: sk-smoke 31s ease-in-out infinite alternate; }
:root[data-skin="sololeveling"] #skin-fx .fx3 { right: -12%; bottom: -34vh; width: 64%; height: 64vh; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-3), transparent 70%); filter: blur(40px); animation: sk-smoke 41s ease-in-out infinite alternate-reverse; }
:root[data-skin="sololeveling"] #skin-fx .fx2 { left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--fx-2) 30%, var(--fx-2) 70%, transparent); box-shadow: 0 0 18px 2px var(--fx-2); }
/* the System window: a bordered, glowing panel that hangs from the system line, with a title bar and a few "lines" */
:root[data-skin="sololeveling"] #skin-fx .fx2 b { position: absolute; left: 50%; top: 14px; width: 30vmax; height: 11vmax; margin-left: -15vmax; border: 1.5px solid var(--fx-2); border-radius: 6px;
  background: linear-gradient(180deg, var(--fx-2) 0 22%, transparent 22%), repeating-linear-gradient(180deg, transparent 0 34%, var(--fx-4) 34% 38%, transparent 38% 56%, var(--fx-4) 56% 60%, transparent 60% 78%, var(--fx-4) 78% 82%, transparent 82%) 12% 0 / 60% 100% no-repeat;
  box-shadow: 0 0 28px -4px var(--fx-2), inset 0 0 40px -20px var(--fx-2); opacity: .8; }
:root[data-skin="sololeveling"] #skin-fx .fx4 { left: 20%; top: -240px; width: 60%; height: 400px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-4), transparent 70%); filter: blur(44px); animation: sk-drift1 53s ease-in-out infinite alternate; }

/* ── ATTACK ON TITAN — the Walls: stone and steam by day, a red sky by night ── */
:root[data-skin="aot"] {
  --skin-shadow: 0 10px 28px -18px rgba(31, 26, 20, .45);
  --skin-table-shadow: 0 0 0 1px rgba(31, 26, 20, .07);
  background-image: linear-gradient(180deg, #e2dac8 0, #ece6d8 300px);
}
:root[data-skin="aot"][data-theme="dark"] {
  --title-glow: drop-shadow(0 0 7px rgba(220, 38, 38, .35));
  --skin-shadow: 0 0 0 1px rgba(214, 211, 209, .07), 0 18px 40px -20px #000;
  --skin-table-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
  background-image: linear-gradient(180deg, #1b1310 0, #0e0b09 380px);
}
/* the wall: mortar lines in a running bond, fading upward; steam rising past it; the horizon glow */
:root[data-skin="aot"] #skin-fx .fx1 {
  left: 0; right: 0; bottom: 0; height: 30vh;
  background-image: linear-gradient(var(--fx-1) 2px, transparent 2px), linear-gradient(90deg, var(--fx-1) 2px, transparent 2px), linear-gradient(90deg, var(--fx-1) 2px, transparent 2px);
  background-size: 100% 28px, 64px 56px, 64px 56px; background-position: 0 0, 0 0, 32px 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60%); mask-image: linear-gradient(180deg, transparent 0, #000 60%);
}
:root[data-skin="aot"] #skin-fx .fx2 { left: 8%; bottom: -20vh; width: 44%; height: 50vh; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-2), transparent 70%); filter: blur(34px); animation: sk-smoke 37s ease-in-out infinite alternate; }
:root[data-skin="aot"] #skin-fx .fx3 { left: -10%; right: -10%; bottom: 18vh; height: 26vh; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-3), transparent 72%); filter: blur(40px); }
:root[data-skin="aot"] #skin-fx .fx4 { right: 4%; bottom: -24vh; width: 40%; height: 54vh; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-4), transparent 70%); filter: blur(36px); animation: sk-smoke 47s ease-in-out infinite alternate-reverse; }

/* ── JUJUTSU KAISEN — Domain Expansion: Infinity blue, cursed red, a torii ── */
:root[data-skin="jjk"] {
  --title-grad: linear-gradient(90deg, #0c4a6e, #7c3aed 60%); --title-fill: transparent;
  --skin-shadow: 0 12px 36px -20px rgba(12, 74, 110, .45);
  --skin-table-shadow: 0 0 0 1px rgba(15, 23, 51, .06);
}
:root[data-skin="jjk"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #bae6fd, #c084fc 60%);
  --title-glow: drop-shadow(0 0 8px rgba(56, 189, 248, .45));
  --skin-shadow: 0 0 0 1px rgba(186, 230, 253, .08), 0 0 38px -14px rgba(124, 58, 237, .6);
  --skin-table-shadow: 0 0 0 1px rgba(56, 189, 248, .06), 0 0 34px -16px rgba(239, 68, 68, .35);
  background-image: radial-gradient(ellipse 70% 50% at 50% 30%, #140f3a 0, #03050e 70%);
}
/* a ring of thin arcs turning around a violet core; the red crescent low on the right */
:root[data-skin="jjk"] #skin-fx .fx1 { left: 50%; top: -30vmax; width: 70vmax; height: 70vmax; margin-left: -35vmax; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-2), transparent 70%); filter: blur(40px); animation: sk-pulse 11s ease-in-out infinite; }
:root[data-skin="jjk"] #skin-fx .fx2 {
  left: 50%; top: -44vmax; width: 98vmax; height: 98vmax; margin-left: -49vmax; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--fx-1) 0 .8deg, transparent .8deg 7deg, var(--fx-1) 7deg 9.5deg, transparent 9.5deg 24deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 50%, #000 56%, #000 74%, transparent 82%); mask-image: radial-gradient(closest-side, transparent 50%, #000 56%, #000 74%, transparent 82%);
  filter: blur(1px); animation: sk-spin 80s linear infinite;
}
:root[data-skin="jjk"] #skin-fx .fx3 { right: -14vmax; bottom: -28vmax; width: 56vmax; height: 56vmax; border-radius: 50%; background: radial-gradient(closest-side, transparent 58%, var(--fx-3) 66%, transparent 76%); filter: blur(14px); animation: sk-drift4 57s ease-in-out infinite alternate; }
/* a torii gate low on the left: two pillars, the kasagi with upturned ends, the nuki beam, the tie-beam */
:root[data-skin="jjk"] #skin-fx .fx2 b { position: absolute; left: 4%; bottom: 0; width: 22vmax; height: 24vmax; opacity: .9; filter: blur(.4px);
  background:
    linear-gradient(var(--fx-3), var(--fx-3)) 0 6% / 100% 7% no-repeat,
    linear-gradient(var(--fx-3), var(--fx-3)) 50% 20% / 70% 4% no-repeat,
    linear-gradient(var(--fx-3), var(--fx-3)) 50% 11% / 6% 10% no-repeat,
    linear-gradient(var(--fx-3), var(--fx-3)) 16% 100% / 8% 90% no-repeat,
    linear-gradient(var(--fx-3), var(--fx-3)) 84% 100% / 8% 90% no-repeat;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
:root[data-skin="jjk"] #skin-fx .fx4 { left: 6%; top: -180px; width: 40%; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-4), transparent 70%); filter: blur(44px); animation: sk-drift1 49s ease-in-out infinite alternate; }

/* ── DEMON SLAYER — Tanjiro's checker, the waves of Water Breathing, Rengoku's flame, Nezuko's pink ── */
:root[data-skin="demonslayer"] {
  --title-grad: linear-gradient(90deg, #0ea5e9, #86198f 60%); --title-fill: transparent;
  --skin-shadow: 0 12px 34px -20px rgba(14, 165, 233, .4);
  --skin-table-shadow: 0 0 0 1px rgba(16, 35, 27, .06);
}
:root[data-skin="demonslayer"][data-theme="dark"] {
  --title-grad: linear-gradient(90deg, #38bdf8, #e879f9 60%, #fb923c);
  --title-glow: drop-shadow(0 0 8px rgba(232, 121, 249, .4));
  --skin-shadow: 0 0 0 1px rgba(232, 121, 249, .08), 0 0 36px -14px rgba(56, 189, 248, .5);
  --skin-table-shadow: 0 0 30px -16px rgba(249, 115, 22, .45);
  background-image: linear-gradient(180deg, #0b1f14 0, #06100b 360px);
}
/* an ichimatsu checker band down the left, a seigaiha wave band along the bottom, a flame and a blossom glow */
:root[data-skin="demonslayer"] #skin-fx .fx1 {
  left: 0; top: 0; bottom: 0; width: 11vmax;
  background: repeating-conic-gradient(var(--fx-1) 0 25%, transparent 0 50%) 0 0 / 46px 46px;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 100%); mask-image: linear-gradient(90deg, #000 40%, transparent 100%);
}
:root[data-skin="demonslayer"] #skin-fx .fx2 {
  left: 0; right: 0; bottom: 0; height: 22vh;
  background:
    radial-gradient(circle at 50% 100%, transparent 26px, var(--fx-2) 27px 29px, transparent 30px, transparent 36px, var(--fx-2) 37px 39px, transparent 40px) 0 0 / 64px 40px,
    radial-gradient(circle at 50% 100%, transparent 26px, var(--fx-2) 27px 29px, transparent 30px, transparent 36px, var(--fx-2) 37px 39px, transparent 40px) 32px 20px / 64px 40px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%); mask-image: linear-gradient(180deg, transparent 0, #000 55%);
}
:root[data-skin="demonslayer"] #skin-fx .fx3 { right: 8%; top: -200px; width: 40%; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-3), transparent 70%); filter: blur(40px); animation: sk-drift3 43s ease-in-out infinite alternate; }
:root[data-skin="demonslayer"] #skin-fx .fx4 { right: -8%; bottom: -26vh; width: 44%; height: 56vh; border-radius: 50%; background: radial-gradient(closest-side, var(--fx-4), transparent 70%); filter: blur(38px); animation: sk-smoke 35s ease-in-out infinite alternate; }

/* TITLE GEOMETRY ONLY WHERE THERE IS ROOM (2026-09-30). Uppercase, tracking, the cursor and the
   plate all widen the title. On a phone the title shares its row with the status badge and the
   two buttons, and a wider title pushed one of them onto a row of its own. Under 701px every skin
   keeps the title at Classic's width and only colours it. */
@media (min-width: 701px) {
  :where(:root[data-skin="synthwave"]) .page-header h1 { font-style: italic; letter-spacing: .06em; text-transform: uppercase; }
  :where(:root[data-skin="matrix"]) .page-header h1 { text-transform: uppercase; letter-spacing: .1em; }
  :root[data-skin="matrix"] .page-header h1::after { content: "▮"; margin-left: 5px; animation: sk-blink 1.15s steps(1) infinite; }
  :where(:root[data-skin="acid"]) .page-header h1 { font-weight: 800; letter-spacing: .02em; }
  :where(:root[data-skin="cyberpunk"]) .page-header h1 {
    background: #0a0a0c; -webkit-text-fill-color: #fcee0a; color: #fcee0a;
    padding: 1px 16px 1px 9px; text-transform: uppercase; letter-spacing: .12em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  }
  :where(:root[data-skin="cyberpunk"][data-theme="dark"]) .page-header h1 { background: #fcee0a; -webkit-text-fill-color: #0a0a0c; color: #0a0a0c; }
  :where(:root[data-skin="noir"]) .page-header h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: .03em; }
  :where(:root[data-skin="hypno"]) .page-header h1 { font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
  :where(:root[data-skin="lava"]) .page-header h1 { font-weight: 800; }
  :where(:root[data-skin="spiderman"]) .page-header h1 { font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .04em; }
  :where(:root[data-skin="batman"]) .page-header h1 { text-transform: uppercase; letter-spacing: .1em; }
  :where(:root[data-skin="sololeveling"]) .page-header h1 { text-transform: uppercase; letter-spacing: .08em; }
  :where(:root[data-skin="aot"]) .page-header h1 { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
  :where(:root[data-skin="jjk"]) .page-header h1 { font-weight: 800; letter-spacing: .03em; }
  :where(:root[data-skin="demonslayer"]) .page-header h1 { font-weight: 800; }
}

/* …and on a phone Matrix sets the title row in the system face: monospace is a fifth wider, and
   that was enough to wrap the row at one width */
@media (max-width: 700px) {
  :where(:root[data-skin="matrix"]) .page-header :is(h1, .run-badge, #theme-btn, #skin-btn) {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; letter-spacing: normal;
  }
}

/* shape — only the skins that set --r-* change any radius */
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) :is(main.panel, .nav-bar, .table-wrap, .chart-panel, .home-card, .playbook, .metric-guide, .regime-strip, .seg-bar, #colmenu, .nav-dd-menu, #tipbox, #skin-pop) { border-radius: var(--r-box); }
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) :is(.controls input[type="search"], .controls select, .controls button, button.wl-pick, #theme-btn, #skin-btn, .view-toggle) { border-radius: var(--r-ctl); }
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) :is(.nav-item, .nav-dd-btn, .qchips .qchip, .chip, .dsw a) { border-radius: var(--r-pill); }

/* ───────────── 4. props — characters, symbols and small interactions around the chrome (2026-10-02) ─────────────
   Declared per skin in build_skins.py (props=…); the generated per-skin lines land at :root[data-skin="synthwave"] { --sk-emblem: "🌆"; }
:root[data-skin="synthwave"] { --sk-load-word: "Rewinding the tape…"; --sk-load-mark: "🌆"; }
:root[data-skin="matrix"] { --sk-emblem: "🟩"; }
:root[data-skin="matrix"] { --sk-load-word: "Wake up…"; --sk-load-mark: "▮"; }
:root[data-skin="aurora"] { --sk-emblem: "🌌"; }
:root[data-skin="aurora"] { --sk-load-word: "Waiting for the lights…"; --sk-load-mark: "🌌"; }
:root[data-skin="acid"] { --sk-emblem: "🍄"; }
:root[data-skin="acid"] { --sk-load-word: "Tuning in…"; --sk-load-mark: "🍄"; }
:root[data-skin="prism"] { --sk-emblem: "💿"; }
:root[data-skin="prism"] { --sk-load-word: "Refracting…"; --sk-load-mark: "💿"; }
:root[data-skin="cyberpunk"] { --sk-load-word: "Jacking in…"; --sk-load-mark: "⚡"; }
:root[data-skin="kaleidoscope"] { --sk-emblem: "🔮"; }
:root[data-skin="kaleidoscope"] { --sk-load-word: "Turning the scope…"; --sk-load-mark: "🔮"; }
:root[data-skin="abyss"] { --sk-emblem: "🪼"; }
:root[data-skin="abyss"] { --sk-load-word: "Diving…"; --sk-load-mark: "🪼"; }
:root[data-skin="noir"] { --sk-emblem: "🎬"; }
:root[data-skin="noir"] { --sk-load-word: "Developing the film…"; --sk-load-mark: "🎬"; }
:root[data-skin="nebula"] { --sk-emblem: "🪐"; }
:root[data-skin="nebula"] { --sk-load-word: "Crossing the void…"; --sk-load-mark: "🪐"; }
:root[data-skin="hypno"] { --sk-emblem: "🌀"; }
:root[data-skin="hypno"] { --sk-load-word: "Look into the spiral…"; --sk-load-mark: "🌀"; }
:root[data-skin="lava"] { --sk-emblem: "🌋"; }
:root[data-skin="lava"] { --sk-load-word: "Warming the lamp…"; --sk-load-mark: "🌋"; }
:root[data-skin="spiderman"] { --sk-emblem: "🕷"; }
:root[data-skin="spiderman"] .nav-item[data-tab="home"]::before { content: "🕸"; }
:root[data-skin="spiderman"] .nav-item[data-tab="msectors"]::before { content: "🗞"; }
:root[data-skin="spiderman"] .nav-item[data-tab="rotation"]::before { content: "🏙"; }
:root[data-skin="spiderman"] .nav-item[data-tab="highlow"]::before { content: "🕷"; }
:root[data-skin="spiderman"] .nav-item[data-tab="gap"]::before { content: "💥"; }
:root[data-skin="spiderman"] .nav-dd-btn[data-default="Options"]::before { content: "📸"; }
:root[data-skin="spiderman"] .nav-item[data-tab="mrm"]::before { content: "🧪"; }
:root[data-skin="spiderman"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%95%B7%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="spiderman"] { --sk-load-word: "Thwip…"; --sk-load-mark: "🕷"; }
:root[data-skin="batman"] { --sk-emblem: "🦇"; }
:root[data-skin="batman"] .nav-item[data-tab="home"]::before { content: "🦇"; }
:root[data-skin="batman"] .nav-item[data-tab="msectors"]::before { content: "🌃"; }
:root[data-skin="batman"] .nav-item[data-tab="rotation"]::before { content: "🏙"; }
:root[data-skin="batman"] .nav-item[data-tab="highlow"]::before { content: "🔦"; }
:root[data-skin="batman"] .nav-item[data-tab="gap"]::before { content: "💥"; }
:root[data-skin="batman"] .nav-dd-btn[data-default="Options"]::before { content: "🃏"; }
:root[data-skin="batman"] .nav-item[data-tab="mrm"]::before { content: "🖥"; }
:root[data-skin="batman"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%A6%87%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="batman"] { --sk-load-word: "Lighting the signal…"; --sk-load-mark: "🦇"; }
:root[data-skin="sololeveling"] { --sk-emblem: "👑"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="home"]::before { content: "⚔"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="msectors"]::before { content: "🌀"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="rotation"]::before { content: "💎"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="highlow"]::before { content: "🆙"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="gap"]::before { content: "🚪"; }
:root[data-skin="sololeveling"] .nav-dd-btn[data-default="Options"]::before { content: "🔑"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="mrm"]::before { content: "📜"; }
:root[data-skin="sololeveling"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%E2%9A%94%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="sololeveling"] { --sk-load-word: "[ SYSTEM ] Loading dungeon…"; --sk-load-mark: "⟦ ARISE ⟧"; }
:root[data-skin="aot"] { --sk-emblem: "🧱"; }
:root[data-skin="aot"] .nav-item[data-tab="home"]::before { content: "🏰"; }
:root[data-skin="aot"] .nav-item[data-tab="msectors"]::before { content: "🗺"; }
:root[data-skin="aot"] .nav-item[data-tab="rotation"]::before { content: "⚔"; }
:root[data-skin="aot"] .nav-item[data-tab="highlow"]::before { content: "🧱"; }
:root[data-skin="aot"] .nav-item[data-tab="gap"]::before { content: "💥"; }
:root[data-skin="aot"] .nav-dd-btn[data-default="Options"]::before { content: "🕊"; }
:root[data-skin="aot"] .nav-item[data-tab="mrm"]::before { content: "📖"; }
:root[data-skin="aot"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%97%A1%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="aot"] { --sk-load-word: "Scouting beyond the Walls…"; --sk-load-mark: "🧱"; }
:root[data-skin="jjk"] { --sk-emblem: "⛩"; }
:root[data-skin="jjk"] .nav-item[data-tab="home"]::before { content: "⛩"; }
:root[data-skin="jjk"] .nav-item[data-tab="msectors"]::before { content: "🌀"; }
:root[data-skin="jjk"] .nav-item[data-tab="rotation"]::before { content: "🏙"; }
:root[data-skin="jjk"] .nav-item[data-tab="highlow"]::before { content: "👁"; }
:root[data-skin="jjk"] .nav-item[data-tab="gap"]::before { content: "💥"; }
:root[data-skin="jjk"] .nav-dd-btn[data-default="Options"]::before { content: "🧿"; }
:root[data-skin="jjk"] .nav-item[data-tab="mrm"]::before { content: "📿"; }
:root[data-skin="jjk"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%91%B9%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="jjk"] { --sk-load-word: "DOMAIN EXPANSION"; --sk-load-mark: "⛩"; }
:root[data-skin="demonslayer"] { --sk-emblem: "🌊"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="home"]::before { content: "🌊"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="msectors"]::before { content: "🔥"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="rotation"]::before { content: "🏯"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="highlow"]::before { content: "🗡"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="gap"]::before { content: "🌙"; }
:root[data-skin="demonslayer"] .nav-dd-btn[data-default="Options"]::before { content: "🎋"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="mrm"]::before { content: "🌸"; }
:root[data-skin="demonslayer"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%97%A1%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="demonslayer"] { --sk-load-word: "Total concentration… breathing"; --sk-load-mark: "🌊"; } below. The rule of
   this section: NOT ONE PIXEL OF LAYOUT. Badges and the title emblem are absolutely positioned pseudo-elements, the
   cast is a fixed overlay above the chrome's top band, entrance effects animate what is already there. */

/* nav badges: a glyph hanging off the top-right corner of a nav entry; it pops on hover */
:where(:root[data-skin]) :is(.nav-item, .nav-dd-btn) { position: relative; }
:root[data-skin] :is(.nav-item, .nav-dd-btn)::before {
  content: none; position: absolute; top: -8px; right: -5px; z-index: 1;
  font-size: 11px; line-height: 1; font-style: normal; font-weight: 400; letter-spacing: 0; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
  transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
:root[data-skin] :is(.nav-item, .nav-dd-btn):hover::before { transform: scale(1.5) rotate(-12deg); }
@media (max-width: 700px) { :root[data-skin] :is(.nav-item, .nav-dd-btn)::before { top: -6px; right: -3px; font-size: 9px; } }

/* the title emblem: floats off the title's top-right corner, only where the title row has room (≥701px) */
:where(:root[data-skin]) .page-header h1 { position: relative; }
@media (min-width: 701px) {
  :root[data-skin] .page-header h1::before {
    content: var(--sk-emblem, none); position: absolute; right: -1em; top: -.7em; font-size: .9em; line-height: 1;
    font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; pointer-events: none;
    -webkit-text-fill-color: initial; background: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
    animation: sk-emblem 3.6s ease-in-out infinite alternate;
  }
}
@keyframes sk-emblem { from { transform: translateY(0) rotate(-8deg); } to { transform: translateY(-3px) rotate(10deg); } }

/* the skin button's glyph wiggles on hover */
#skin-btn:hover { animation: sk-wiggle .5s ease-in-out 1; }
@keyframes sk-wiggle { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* the cast: a fixed overlay above the page, never interactive; characters live in the top band (--sk-band tall)
   except petals, which fall the height of the page and fade past its middle */
#skin-cast { position: fixed; inset: 0; z-index: 9991; pointer-events: none; overflow: hidden; contain: strict; --sk-band: 64px; }
#skin-cast .sk-c { position: absolute; left: 0; top: 0; font-size: var(--size, 16px); line-height: 1; will-change: transform; color: var(--text); }
#skin-cast .sk-c > i { display: inline-block; font-style: normal; }
#skin-cast .sk-c-silhouette > i { filter: brightness(0) opacity(.72); }
:root[data-skin][data-theme="dark"] #skin-cast .sk-c-silhouette > i { filter: brightness(0) invert(1) opacity(.5); }
#skin-cast .sk-c-violet > i { filter: brightness(0) opacity(.75) drop-shadow(0 0 5px #8b5cf6) drop-shadow(0 0 12px #6d28d9); }
#skin-cast .sk-c-colour > i { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
#skin-cast .sk-c-fly { animation: sk-cast-fly var(--dur) linear var(--d) infinite; opacity: 0; }
#skin-cast .sk-c-fall { animation: sk-cast-fall var(--dur) linear var(--d) infinite; opacity: 0; }
#skin-cast .sk-c-drop { left: var(--x); top: -22px; animation: sk-cast-drop var(--dur) ease-in-out var(--d) infinite; }
#skin-cast .sk-c-drop::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 200vh; background: currentColor; opacity: .3; }
#skin-cast .sk-c-flicker { left: var(--x); top: var(--y); animation: sk-cast-flicker var(--dur) ease-in-out var(--d) infinite; opacity: 0; }
#skin-cast .sk-c-rise { left: var(--x); top: var(--y); animation: sk-cast-rise var(--dur) ease-out var(--d) infinite; opacity: 0; }
#skin-cast .sk-i-flap { animation: sk-flap .16s ease-in-out infinite alternate; transform-origin: 50% 60%; }
#skin-cast .sk-i-gallop { animation: sk-gallop .3s ease-in-out infinite alternate; }
@keyframes sk-cast-fly {
  0% { transform: translate(-8vw, var(--y)); opacity: 0; } 1% { opacity: 1; }
  3% { transform: translate(18vw, calc(var(--y) - 12px)); } 5% { transform: translate(44vw, calc(var(--y) + 8px)); }
  7% { transform: translate(72vw, calc(var(--y) - 10px)); } 9% { transform: translate(108vw, var(--y)); opacity: 1; }
  9.1%, 100% { transform: translate(108vw, var(--y)); opacity: 0; }
}
@keyframes sk-cast-fall {
  0% { transform: translate(var(--x), -6vh) rotate(0); opacity: 0; } 5% { opacity: .8; } 55% { opacity: .8; }
  100% { transform: translate(calc(var(--x) + 10vw), 104vh) rotate(420deg); opacity: 0; }
}
@keyframes sk-cast-drop {
  0%, 100% { transform: translateY(0); } 25% { transform: translateY(var(--len)); } 40% { transform: translateY(calc(var(--len) - 10px)); }
  55% { transform: translateY(var(--len)); } 80% { transform: translateY(0); }
}
@keyframes sk-cast-flicker { 0%, 86%, 100% { opacity: 0; transform: scale(.7); } 89% { opacity: .9; transform: scale(1.15); } 91% { opacity: .25; } 94% { opacity: .9; transform: scale(1); } 97% { opacity: 0; } }
@keyframes sk-cast-rise { 0%, 66%, 100% { opacity: 0; transform: translateY(14px); } 72%, 92% { opacity: .9; transform: translateY(0); } }
@keyframes sk-flap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }
@keyframes sk-gallop { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-3px) rotate(4deg); } }
:root:not([data-skin]) #skin-cast, :root[data-skin-motion="off"] #skin-cast { display: none; }
@media (prefers-reduced-motion: reduce) { #skin-cast { display: none; } }

/* entrance: one shot when a skin is picked (data-skin-enter is on the root for 1.8s) */
:root[data-skin-enter] #skin-fx { animation: sk-enter-fade .8s ease-out both; }
@keyframes sk-enter-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes sk-enter-pop   { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.25); opacity: 1; } 100% { transform: scale(1); } }
@keyframes sk-enter-web   { 0% { transform: scale(.1) rotate(-60deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes sk-enter-ring  { 0% { transform: scale(.15); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); } }
@keyframes sk-enter-steam { 0% { transform: scale(.2) translateY(20vh); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes sk-enter-word  { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%) scale(1.1); } }
@keyframes sk-enter-slash { 0% { transform: translateX(-120vw) rotate(-16deg); opacity: 0; } 8% { opacity: 1; } 55% { transform: translateX(120vw) rotate(-16deg); opacity: 1; } 56%, 100% { opacity: 0; } }
:root[data-skin-enter="batman"] #skin-fx .fx2 b { animation: sk-enter-pop 1.3s cubic-bezier(.2, 1.3, .4, 1) both; }
:root[data-skin-enter="spiderman"] #skin-fx :is(.fx1, .fx2) { animation: sk-enter-web 1.2s ease-out both; }
:root[data-skin-enter="sololeveling"] #skin-fx .fx2 b { animation: sk-enter-pop 1.1s cubic-bezier(.2, 1.3, .4, 1) both; }
:root[data-skin-enter="jjk"] #skin-fx .fx2 { animation: sk-enter-ring 1.3s ease-out both; }
:root[data-skin-enter="aot"] #skin-fx :is(.fx2, .fx4) { animation: sk-enter-steam 1.4s ease-out both; }
#skin-cast::after { content: none; position: absolute; pointer-events: none; }
:root[data-skin-enter="sololeveling"] #skin-cast::after { content: "⟦ ARISE ⟧"; left: 50%; top: 34%; white-space: nowrap; font: 800 clamp(26px, 5vw, 56px)/1 system-ui, sans-serif; letter-spacing: .3em; color: #c7d2fe; text-shadow: 0 0 24px #6366f1, 0 0 60px #7c3aed; animation: sk-enter-word 1.7s ease-out both; }
:root[data-skin-enter="jjk"] #skin-cast::after { content: "DOMAIN EXPANSION"; left: 50%; top: 34%; white-space: nowrap; font: 800 clamp(20px, 4vw, 48px)/1 system-ui, sans-serif; letter-spacing: .25em; color: #e0f2fe; text-shadow: 0 0 24px #38bdf8, 0 0 60px #7c3aed; animation: sk-enter-word 1.7s ease-out both; }
:root[data-skin-enter="demonslayer"] #skin-cast::after { content: ""; left: -10vw; top: 40%; width: 120vw; height: 3px; background: linear-gradient(90deg, transparent, #e0f2fe, #38bdf8, transparent); box-shadow: 0 0 18px 4px #38bdf8; animation: sk-enter-slash 1.1s ease-in both; }

/* the loading placeholder, dressed (2026-10-04): the app's own "Loading…" element (static markup) in the skin's
   line and mark, only while data-skin-loading is on the root — skins.js sets it in <head> before the first paint and
   clears it the moment the app's first render replaces the element. Pure CSS on what is already there: nothing is
   fetched, nothing waits. */
:root[data-skin][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 220px; font-size: 0; line-height: 1; color: var(--muted);
}
:root[data-skin][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::before {
  content: var(--sk-load-mark, "◌"); font-size: 46px; line-height: 1; font-style: normal;
  animation: sk-load-mark 1.6s ease-in-out infinite;
}
:root[data-skin][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::after {
  content: var(--sk-load-word, "Loading…"); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); animation: sk-load-word 1.3s ease-in-out infinite alternate;
}
@keyframes sk-load-mark { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(8deg); } }
@keyframes sk-load-word { from { opacity: .4; } to { opacity: 1; } }
@keyframes sk-load-ring { from { box-shadow: 0 0 0 0 rgba(56, 189, 248, .7), 0 0 0 0 rgba(124, 58, 237, .5); } to { box-shadow: 0 0 0 70px rgba(56, 189, 248, 0), 0 0 0 130px rgba(124, 58, 237, 0); } }
@keyframes sk-load-swing { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }
@keyframes sk-load-glow { 0%, 100% { filter: drop-shadow(0 0 4px rgba(245, 197, 24, .5)); } 50% { filter: drop-shadow(0 0 18px rgba(245, 197, 24, 1)); } }
@keyframes sk-load-sys { 0%, 100% { box-shadow: 0 0 14px -2px #6366f1, inset 0 0 24px -16px #818cf8; } 50% { box-shadow: 0 0 30px 2px #6366f1, inset 0 0 30px -12px #818cf8; } }
/* Domain Expansion: a ring that keeps expanding from the mark */
:root[data-skin="jjk"][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::before { border-radius: 50%; padding: 10px; animation: sk-load-ring 1.5s ease-out infinite; }
:root[data-skin="jjk"][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::after { color: var(--accent); text-shadow: 0 0 14px rgba(56, 189, 248, .6); }
/* the System window */
:root[data-skin="sololeveling"][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::before { font-size: 20px; letter-spacing: .3em; color: #c7d2fe; text-shadow: 0 0 18px #6366f1; animation: sk-load-word 1.1s ease-in-out infinite alternate; }
:root[data-skin="sololeveling"][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::after { border: 1px solid #818cf8; border-radius: 6px; padding: 9px 16px; color: #c7d2fe; text-transform: none; letter-spacing: .08em; animation: sk-load-sys 1.4s ease-in-out infinite; }
/* a spider swinging on its thread; the Bat-Signal warming up; Matrix's cursor */
:root[data-skin="spiderman"][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::before { transform-origin: 50% -40px; animation: sk-load-swing 1.6s ease-in-out infinite; }
:root[data-skin="batman"][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::before { animation: sk-load-glow 1.4s ease-in-out infinite; }
:root[data-skin="matrix"][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::before { color: var(--accent-2, var(--accent)); animation: sk-blink 1.1s steps(1) infinite; }
:root[data-skin="matrix"][data-skin-loading] :is(#table-wrap > .placeholder, #main > .loading)::after { text-transform: none; letter-spacing: .1em; }
:root[data-skin-motion="off"] :is(#table-wrap > .placeholder, #main > .loading)::before, :root[data-skin-motion="off"] :is(#table-wrap > .placeholder, #main > .loading)::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) { :root[data-skin] :is(#table-wrap > .placeholder, #main > .loading)::before, :root[data-skin] :is(#table-wrap > .placeholder, #main > .loading)::after { animation: none !important; } }

/* section loaders (the company view's .cv-skel "Loading the company profile…" / "Reading the peers…" / "Loading the
   bonds pack…" and its chart waits, the Macro insights and Model Hub waits): the skin's mark pulses above the app's own line, which stays —
   it says what is loading. These are loading states by definition, so they are keyed on the skin alone. */
:root[data-skin] :is(.cv-skel, .cv-wait, .mi-wait, .h6 .h6-wait)::before {
  content: var(--sk-load-mark, "◌"); display: block; font-size: 26px; line-height: 1; margin: 0 auto 8px; width: max-content;
  font-style: normal; animation: sk-load-mark 1.6s ease-in-out infinite;
}
:root[data-skin] :is(.cv-skel, .mi-wait, .h6 .h6-wait)::before { display: inline-block; font-size: 16px; margin: 0 8px 0 0; vertical-align: -2px; }
:root[data-skin="jjk"] :is(.cv-skel, .cv-wait, .mi-wait, .h6 .h6-wait)::before { border-radius: 50%; animation: sk-load-ring 1.5s ease-out infinite; }
:root[data-skin="spiderman"] :is(.cv-skel, .cv-wait, .mi-wait, .h6 .h6-wait)::before { transform-origin: 50% -30px; animation: sk-load-swing 1.6s ease-in-out infinite; }
:root[data-skin="batman"] :is(.cv-skel, .cv-wait, .mi-wait, .h6 .h6-wait)::before { animation: sk-load-glow 1.4s ease-in-out infinite; }
:root[data-skin="matrix"] :is(.cv-skel, .cv-wait, .mi-wait, .h6 .h6-wait)::before { color: var(--accent-2, var(--accent)); animation: sk-blink 1.1s steps(1) infinite; }
:root[data-skin="sololeveling"] :is(.cv-skel, .cv-wait, .mi-wait, .h6 .h6-wait)::before { font-size: 13px; letter-spacing: .3em; color: #818cf8; animation: sk-load-word 1.1s ease-in-out infinite alternate; }
:root[data-skin-motion="off"] :is(.cv-skel, .cv-wait, .mi-wait, .h6 .h6-wait)::before { animation: none !important; }
@media (prefers-reduced-motion: reduce) { :root[data-skin] :is(.cv-skel, .cv-wait, .mi-wait, .h6 .h6-wait)::before { animation: none !important; } }

/* per-skin props (generated: emblem, badges, cursor) */
:root[data-skin="synthwave"] { --sk-emblem: "🌆"; }
:root[data-skin="synthwave"] { --sk-load-word: "Rewinding the tape…"; --sk-load-mark: "🌆"; }
:root[data-skin="matrix"] { --sk-emblem: "🟩"; }
:root[data-skin="matrix"] { --sk-load-word: "Wake up…"; --sk-load-mark: "▮"; }
:root[data-skin="aurora"] { --sk-emblem: "🌌"; }
:root[data-skin="aurora"] { --sk-load-word: "Waiting for the lights…"; --sk-load-mark: "🌌"; }
:root[data-skin="acid"] { --sk-emblem: "🍄"; }
:root[data-skin="acid"] { --sk-load-word: "Tuning in…"; --sk-load-mark: "🍄"; }
:root[data-skin="prism"] { --sk-emblem: "💿"; }
:root[data-skin="prism"] { --sk-load-word: "Refracting…"; --sk-load-mark: "💿"; }
:root[data-skin="cyberpunk"] { --sk-load-word: "Jacking in…"; --sk-load-mark: "⚡"; }
:root[data-skin="kaleidoscope"] { --sk-emblem: "🔮"; }
:root[data-skin="kaleidoscope"] { --sk-load-word: "Turning the scope…"; --sk-load-mark: "🔮"; }
:root[data-skin="abyss"] { --sk-emblem: "🪼"; }
:root[data-skin="abyss"] { --sk-load-word: "Diving…"; --sk-load-mark: "🪼"; }
:root[data-skin="noir"] { --sk-emblem: "🎬"; }
:root[data-skin="noir"] { --sk-load-word: "Developing the film…"; --sk-load-mark: "🎬"; }
:root[data-skin="nebula"] { --sk-emblem: "🪐"; }
:root[data-skin="nebula"] { --sk-load-word: "Crossing the void…"; --sk-load-mark: "🪐"; }
:root[data-skin="hypno"] { --sk-emblem: "🌀"; }
:root[data-skin="hypno"] { --sk-load-word: "Look into the spiral…"; --sk-load-mark: "🌀"; }
:root[data-skin="lava"] { --sk-emblem: "🌋"; }
:root[data-skin="lava"] { --sk-load-word: "Warming the lamp…"; --sk-load-mark: "🌋"; }
:root[data-skin="spiderman"] { --sk-emblem: "🕷"; }
:root[data-skin="spiderman"] .nav-item[data-tab="home"]::before { content: "🕸"; }
:root[data-skin="spiderman"] .nav-item[data-tab="msectors"]::before { content: "🗞"; }
:root[data-skin="spiderman"] .nav-item[data-tab="rotation"]::before { content: "🏙"; }
:root[data-skin="spiderman"] .nav-item[data-tab="highlow"]::before { content: "🕷"; }
:root[data-skin="spiderman"] .nav-item[data-tab="gap"]::before { content: "💥"; }
:root[data-skin="spiderman"] .nav-dd-btn[data-default="Options"]::before { content: "📸"; }
:root[data-skin="spiderman"] .nav-item[data-tab="mrm"]::before { content: "🧪"; }
:root[data-skin="spiderman"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%95%B7%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="spiderman"] { --sk-load-word: "Thwip…"; --sk-load-mark: "🕷"; }
:root[data-skin="batman"] { --sk-emblem: "🦇"; }
:root[data-skin="batman"] .nav-item[data-tab="home"]::before { content: "🦇"; }
:root[data-skin="batman"] .nav-item[data-tab="msectors"]::before { content: "🌃"; }
:root[data-skin="batman"] .nav-item[data-tab="rotation"]::before { content: "🏙"; }
:root[data-skin="batman"] .nav-item[data-tab="highlow"]::before { content: "🔦"; }
:root[data-skin="batman"] .nav-item[data-tab="gap"]::before { content: "💥"; }
:root[data-skin="batman"] .nav-dd-btn[data-default="Options"]::before { content: "🃏"; }
:root[data-skin="batman"] .nav-item[data-tab="mrm"]::before { content: "🖥"; }
:root[data-skin="batman"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%A6%87%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="batman"] { --sk-load-word: "Lighting the signal…"; --sk-load-mark: "🦇"; }
:root[data-skin="sololeveling"] { --sk-emblem: "👑"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="home"]::before { content: "⚔"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="msectors"]::before { content: "🌀"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="rotation"]::before { content: "💎"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="highlow"]::before { content: "🆙"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="gap"]::before { content: "🚪"; }
:root[data-skin="sololeveling"] .nav-dd-btn[data-default="Options"]::before { content: "🔑"; }
:root[data-skin="sololeveling"] .nav-item[data-tab="mrm"]::before { content: "📜"; }
:root[data-skin="sololeveling"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%E2%9A%94%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="sololeveling"] { --sk-load-word: "[ SYSTEM ] Loading dungeon…"; --sk-load-mark: "⟦ ARISE ⟧"; }
:root[data-skin="aot"] { --sk-emblem: "🧱"; }
:root[data-skin="aot"] .nav-item[data-tab="home"]::before { content: "🏰"; }
:root[data-skin="aot"] .nav-item[data-tab="msectors"]::before { content: "🗺"; }
:root[data-skin="aot"] .nav-item[data-tab="rotation"]::before { content: "⚔"; }
:root[data-skin="aot"] .nav-item[data-tab="highlow"]::before { content: "🧱"; }
:root[data-skin="aot"] .nav-item[data-tab="gap"]::before { content: "💥"; }
:root[data-skin="aot"] .nav-dd-btn[data-default="Options"]::before { content: "🕊"; }
:root[data-skin="aot"] .nav-item[data-tab="mrm"]::before { content: "📖"; }
:root[data-skin="aot"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%97%A1%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="aot"] { --sk-load-word: "Scouting beyond the Walls…"; --sk-load-mark: "🧱"; }
:root[data-skin="jjk"] { --sk-emblem: "⛩"; }
:root[data-skin="jjk"] .nav-item[data-tab="home"]::before { content: "⛩"; }
:root[data-skin="jjk"] .nav-item[data-tab="msectors"]::before { content: "🌀"; }
:root[data-skin="jjk"] .nav-item[data-tab="rotation"]::before { content: "🏙"; }
:root[data-skin="jjk"] .nav-item[data-tab="highlow"]::before { content: "👁"; }
:root[data-skin="jjk"] .nav-item[data-tab="gap"]::before { content: "💥"; }
:root[data-skin="jjk"] .nav-dd-btn[data-default="Options"]::before { content: "🧿"; }
:root[data-skin="jjk"] .nav-item[data-tab="mrm"]::before { content: "📿"; }
:root[data-skin="jjk"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%91%B9%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="jjk"] { --sk-load-word: "DOMAIN EXPANSION"; --sk-load-mark: "⛩"; }
:root[data-skin="demonslayer"] { --sk-emblem: "🌊"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="home"]::before { content: "🌊"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="msectors"]::before { content: "🔥"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="rotation"]::before { content: "🏯"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="highlow"]::before { content: "🗡"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="gap"]::before { content: "🌙"; }
:root[data-skin="demonslayer"] .nav-dd-btn[data-default="Options"]::before { content: "🎋"; }
:root[data-skin="demonslayer"] .nav-item[data-tab="mrm"]::before { content: "🌸"; }
:root[data-skin="demonslayer"] body { cursor: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%22-20%25%22%20y%3D%22-20%25%22%20width%3D%22140%25%22%20height%3D%22140%25%22%3E%3CfeMorphology%20in%3D%22SourceAlpha%22%20operator%3D%22dilate%22%20radius%3D%221.4%22%20result%3D%22d%22%2F%3E%3CfeFlood%20flood-color%3D%22%23ffffff%22%20result%3D%22w%22%2F%3E%3CfeComposite%20in%3D%22w%22%20in2%3D%22d%22%20operator%3D%22in%22%20result%3D%22o%22%2F%3E%3CfeColorMatrix%20in%3D%22SourceGraphic%22%20type%3D%22matrix%22%20values%3D%220%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200%201%200%22%20result%3D%22b%22%2F%3E%3CfeMerge%3E%3CfeMergeNode%20in%3D%22o%22%2F%3E%3CfeMergeNode%20in%3D%22b%22%2F%3E%3C%2FfeMerge%3E%3C%2Ffilter%3E%3Ctext%20x%3D%2214%22%20y%3D%2222%22%20font-size%3D%2220%22%20text-anchor%3D%22middle%22%20filter%3D%22url%28%23f%29%22%3E%F0%9F%97%A1%3C%2Ftext%3E%3C%2Fsvg%3E") 4 4, auto; }
:root[data-skin="demonslayer"] { --sk-load-word: "Total concentration… breathing"; --sk-load-mark: "🌊"; }

/* ───────────── the picker (skin-independent: it wears whatever skin is on) ───────────── */
.page-header #skin-btn { order: 3; }
#skin-btn {
  font: inherit; font-size: 12px;
  background: var(--panel); color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 10px; cursor: pointer; white-space: nowrap;
}
#skin-btn:hover, #skin-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
/* ON A PHONE THE SKIN BUTTON MUST NOT COST A HEADER ROW (2026-09-30: a width sweep showed the
   labelled button adding a 35px row at 416–524px, which is every large phone). Under 701px:
   - it is the icon alone, 26px (the name stays in the button for screen readers; the wide word
     gap pushes it past the fixed width, which clips it);
   - it travels WITH the theme button: that button reserves 30px to its right and the skin button
     sits inside the reservation (its negative margin cancels its own width and the row gap), so
     the pair wraps as one item and the skin button can never be left on a row by itself;
   - the status badge may give up to ~35px to an ellipsis rather than let the pair wrap: its basis
     is below its natural width and it grows straight back whenever the row has room, so with room
     to spare nothing moves. */
@media (max-width: 700px) {
  .page-header #theme-btn { margin-right: 30px; }
  .page-header #skin-btn { display: inline-flex; justify-content: flex-start; width: 26px; padding: 4px 0 4px 5px; margin-left: -38px; overflow: hidden; word-spacing: 40px; }
  .page-header .run-badge { flex: 1000 1 150px; max-width: max-content; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
#skin-pop {
  position: fixed; z-index: 9995; width: min(620px, calc(100vw - 16px));
  max-height: calc(100vh - 60px); overflow: auto;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .32);
  padding: 10px 10px 8px; font-size: 12px; line-height: 1.4;
}
#skin-pop[hidden] { display: none; }
#skin-pop .sk-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 2px 8px; }
#skin-pop .sk-head b { font-size: 13px; }
#skin-pop .sk-head span { color: var(--muted); }
#skin-pop .sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
#skin-pop .sk-card {
  display: grid; gap: 5px; padding: 6px; text-align: left;
  font: inherit; color: var(--text); background: var(--panel);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
#skin-pop .sk-card:hover { border-color: var(--accent); }
#skin-pop .sk-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
#skin-pop .sk-pair { display: grid; grid-template-columns: 1fr 1fr; border-radius: 5px; overflow: hidden; }
#skin-pop .sk-name { font-weight: 700; display: flex; align-items: center; gap: 6px; }
#skin-pop .sk-name em { font-style: normal; font-weight: 600; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
#skin-pop .sk-vibe { color: var(--muted); font-size: 11px; }
/* a preview tile carries its own data-skin + data-theme, so the tokens inside it are that skin's */
.sk-tile { display: block; position: relative; height: 54px; background: var(--bg) var(--tile-art, none); overflow: hidden; }
.sk-tile > .sk-t-nav { position: absolute; left: 6px; top: 6px; width: 22px; height: 6px; border-radius: 3px; background: var(--accent) var(--accent-grad, none); }
.sk-tile > .sk-t-panel {
  position: absolute; left: 6px; right: 6px; top: 17px; bottom: -1px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px 4px 0 0;
  padding: 5px 6px 0; display: grid; gap: 4px; align-content: start;
}
.sk-tile .sk-t-row { display: flex; gap: 4px; align-items: center; }
.sk-tile .sk-t-row i { display: block; height: 4px; border-radius: 2px; }
.sk-tile .sk-t-tx { width: 34%; background: var(--text); opacity: .85; }
.sk-tile .sk-t-mu { width: 22%; background: var(--muted); opacity: .8; }
.sk-tile .sk-t-up { width: 16%; background: var(--bull); margin-left: auto; }
.sk-tile .sk-t-dn { width: 16%; background: var(--bear); margin-left: auto; }
.sk-tile .sk-t-am { width: 12%; background: var(--amber); }
#skin-pop .sk-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 9px 2px 0; color: var(--muted); }
#skin-pop .sk-foot label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: var(--text); }
#skin-pop .sk-foot button {
  font: inherit; font-size: 12px; color: var(--muted); background: var(--panel);
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; cursor: pointer;
}
#skin-pop .sk-foot button:hover { color: var(--accent); border-color: var(--accent); }
#skin-pop .sk-foot .sk-note { margin-left: auto; font-size: 11px; }