/* skins.css — GENERATED for Nation Tracker by sp500-dashboard/skins/build_sibling_skins.py.
   Sources: skins/build_skins.py (palette), skins/skins.base.css (shared decor + picker),
   skins/siblings.base.css (this site's chrome), and this site's own styles.css (Classic).
   Do not edit here: change a source and run `python3 skins/build_sibling_skins.py build`.
   Rules keyed on :root[data-theme="dark"] each carry a prefers-color-scheme twin (Auto mode). */

/* ───────────── 1. tokens (generated) ───────────── */
/* the Cockpit-named tokens the picker reads, aliased to this site's own (Classic only needs these),
   and the site's own --sans, which Matrix keeps on the header's top row */
:root {
  --border: var(--line);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--panel));
  --sans-site: -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
}
.sk-tile[data-skin="classic"] {
  --bg: #f3f5f8;
  --panel: #ffffff;
  --border: #dde2ea;
  --text: #0f141b;
  --muted: #57626f;
  --accent: #d81f2c;
  --bull: #12916a;
  --bear: #cf2f38;
  --amber: #b3730a;
  --tile-art: none;
  --accent-grad: none;
}
.sk-tile[data-skin="classic"][data-theme="dark"] {
  --bg: #0a0c10;
  --panel: #12161c;
  --border: #232b36;
  --text: #e7eef7;
  --muted: #8b98a9;
  --accent: #ef3340;
  --bull: #38c793;
  --bear: #e5484d;
  --amber: #f0a832;
  --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;
  --panel2: #f8eeff;
  --line: #e0c9f4;
  --text: #2b1b4d;
  --muted: #655689;
  --accent: #ad17cc;
  --green: #0d774d;
  --red: #cb1653;
  --amber: #9a5806;
  --blue: #3d5ad1;
  --hover: #fbf2fd;
  --rowline: #f0e2fa;
  --line2: #cdb7e4;
  --dim: #6f6487;
  --track: #e8d7f7;
  --grid: #ead9f7;
  --zero: #bfaad8;
  --hl: #a693c3;
  --tip-bg: #fffcff;
  --mapbg: #ebd9fa;
  --violet: #6b4dde;
  --cyan: #048da5;
  --shadow: 0 10px 26px rgba(43,27,77,0.13);
  --border: #e0c9f4;
  --accent-soft: #f7e5fa;
  --thead: #f8eeff;
  --row-border: #f0e2fa;
  --bull: #0d774d;
  --bear: #cb1653;
  --accent-2: #0aa7c4;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,252,255,0.74);
  --ground: #f3e6ff;
  --tile-art: linear-gradient(125deg, #faa6de 0%, #f3e6ff 50%, #a8d7ff 100%);
  --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);
}
:root[data-skin="synthwave"][data-theme="dark"], .sk-tile[data-skin="synthwave"][data-theme="dark"] {
  --bg: #0c0420;
  --panel: #150b2e;
  --panel2: #201242;
  --line: #3a2372;
  --text: #efe9ff;
  --muted: #aea0de;
  --accent: #e46bff;
  --green: #3df5a0;
  --red: #fe6a82;
  --amber: #ffc857;
  --blue: #7cc7ff;
  --hover: #281441;
  --rowline: #281750;
  --line2: #47317e;
  --dim: #a094cc;
  --track: #291853;
  --grid: #301d60;
  --zero: #523d88;
  --hl: #634f97;
  --tip-bg: #110828;
  --mapbg: #13092c;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #3a2372;
  --accent-soft: #3e1e58;
  --thead: #201242;
  --row-border: #281750;
  --bull: #3df5a0;
  --bear: #fe6a82;
  --accent-2: #35e3ff;
  --on-accent: #080315;
  --on-flat: #080315;
  --glass: rgba(21,11,46,0.72);
  --ground: #0c0420;
  --tile-art: linear-gradient(125deg, #a32768 0%, #0c0420 50%, #1a506c 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="synthwave"]:not([data-theme="light"]) {
  --bg: #0c0420;
  --panel: #150b2e;
  --panel2: #201242;
  --line: #3a2372;
  --text: #efe9ff;
  --muted: #aea0de;
  --accent: #e46bff;
  --green: #3df5a0;
  --red: #fe6a82;
  --amber: #ffc857;
  --blue: #7cc7ff;
  --hover: #281441;
  --rowline: #281750;
  --line2: #47317e;
  --dim: #a094cc;
  --track: #291853;
  --grid: #301d60;
  --zero: #523d88;
  --hl: #634f97;
  --tip-bg: #110828;
  --mapbg: #13092c;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #3a2372;
  --accent-soft: #3e1e58;
  --thead: #201242;
  --row-border: #281750;
  --bull: #3df5a0;
  --bear: #fe6a82;
  --accent-2: #35e3ff;
  --on-accent: #080315;
  --on-flat: #080315;
  --glass: rgba(21,11,46,0.72);
  --ground: #0c0420;
  --tile-art: linear-gradient(125deg, #a32768 0%, #0c0420 50%, #1a506c 100%);
  --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);
}
}
:root[data-skin="matrix"], .sk-tile[data-skin="matrix"], .sk-tile[data-skin="matrix"][data-theme="light"] {
  --bg: #e6eedf;
  --panel: #fbfdf8;
  --panel2: #eef4e8;
  --line: #c3d8ba;
  --text: #11251a;
  --muted: #4a6353;
  --accent: #083a20;
  --green: #007949;
  --red: #c62d2d;
  --amber: #905e08;
  --blue: #1f66b3;
  --hover: #f0f4ee;
  --rowline: #dfebd9;
  --line2: #b0c6aa;
  --dim: #5c6d61;
  --track: #d2e2cb;
  --grid: #d4e3cd;
  --zero: #a3b99f;
  --hl: #89a18a;
  --tip-bg: #fbfdf8;
  --mapbg: #d7e4cf;
  --violet: #6b4cdd;
  --cyan: #048da5;
  --shadow: 0 10px 26px rgba(17,37,26,0.13);
  --border: #c3d8ba;
  --accent-soft: #e6ece6;
  --thead: #eef4e8;
  --row-border: #dfebd9;
  --bull: #007949;
  --bear: #c62d2d;
  --accent-2: #1f8a3f;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(251,253,248,0.78);
  --ground: #e6eedf;
  --tile-art: linear-gradient(125deg, #d0decd 0%, #e6eedf 50%, #afd6b4 100%);
  --accent-grad: none;
  --fx-1: rgba(15,79,42,0.1);
  --fx-2: rgba(46,158,79,0.3);
  --fx-scan: transparent;
}
:root[data-skin="matrix"][data-theme="dark"], .sk-tile[data-skin="matrix"][data-theme="dark"] {
  --bg: #020a04;
  --panel: #07130b;
  --panel2: #0d2515;
  --line: #1a4f2b;
  --text: #d9f7de;
  --muted: #79ad88;
  --accent: #c9ff3d;
  --green: #2ee6a0;
  --red: #ff5a5a;
  --amber: #ffb62e;
  --blue: #5ad1ff;
  --hover: #182810;
  --rowline: #10311b;
  --line2: #265a36;
  --dim: #749d7f;
  --track: #11331c;
  --grid: #153f23;
  --zero: #306440;
  --hl: #3e724e;
  --tip-bg: #050f08;
  --mapbg: #06140a;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #1a4f2b;
  --accent-soft: #253813;
  --thead: #0d2515;
  --row-border: #10311b;
  --bull: #2ee6a0;
  --bear: #ff5a5a;
  --accent-2: #00ff66;
  --on-accent: #010603;
  --on-flat: #010603;
  --glass: rgba(7,19,11,0.7);
  --ground: #020a04;
  --tile-art: linear-gradient(125deg, #52785c 0%, #020a04 50%, #015321 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="matrix"]:not([data-theme="light"]) {
  --bg: #020a04;
  --panel: #07130b;
  --panel2: #0d2515;
  --line: #1a4f2b;
  --text: #d9f7de;
  --muted: #79ad88;
  --accent: #c9ff3d;
  --green: #2ee6a0;
  --red: #ff5a5a;
  --amber: #ffb62e;
  --blue: #5ad1ff;
  --hover: #182810;
  --rowline: #10311b;
  --line2: #265a36;
  --dim: #749d7f;
  --track: #11331c;
  --grid: #153f23;
  --zero: #306440;
  --hl: #3e724e;
  --tip-bg: #050f08;
  --mapbg: #06140a;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #1a4f2b;
  --accent-soft: #253813;
  --thead: #0d2515;
  --row-border: #10311b;
  --bull: #2ee6a0;
  --bear: #ff5a5a;
  --accent-2: #00ff66;
  --on-accent: #010603;
  --on-flat: #010603;
  --glass: rgba(7,19,11,0.7);
  --ground: #020a04;
  --tile-art: linear-gradient(125deg, #52785c 0%, #020a04 50%, #015321 100%);
  --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);
}
}
:root[data-skin="aurora"], .sk-tile[data-skin="aurora"], .sk-tile[data-skin="aurora"][data-theme="light"] {
  --bg: #edf2fa;
  --panel: #ffffff;
  --panel2: #f4f7fc;
  --line: #d7e0f0;
  --text: #14213a;
  --muted: #526178;
  --accent: #4a4fe0;
  --green: #027b47;
  --red: #c92946;
  --amber: #966000;
  --blue: #2563c9;
  --hover: #f7f7fe;
  --rowline: #ebf0f8;
  --line2: #c2ccde;
  --dim: #636c7a;
  --track: #e2e8f4;
  --grid: #e3eaf5;
  --zero: #b3bed1;
  --hl: #97a3b9;
  --tip-bg: #ffffff;
  --mapbg: #e3eaf6;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(20,33,58,0.13);
  --border: #d7e0f0;
  --accent-soft: #f0f0fc;
  --thead: #f4f7fc;
  --row-border: #ebf0f8;
  --bull: #027b47;
  --bear: #c92946;
  --accent-2: #14b8a6;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.7);
  --ground: #edf2fa;
  --tile-art: linear-gradient(125deg, #98ead1 0%, #edf2fa 50%, #c6c0fc 100%);
  --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);
}
:root[data-skin="aurora"][data-theme="dark"], .sk-tile[data-skin="aurora"][data-theme="dark"] {
  --bg: #050a16;
  --panel: #0c1424;
  --panel2: #131c30;
  --line: #22304c;
  --text: #e8f1ff;
  --muted: #93a5c2;
  --accent: #6cc4ff;
  --green: #46e08b;
  --red: #ff6470;
  --amber: #f2c14e;
  --blue: #a9b6ff;
  --hover: #152438;
  --rowline: #172238;
  --line2: #2f3e5a;
  --dim: #8897b1;
  --track: #18233a;
  --grid: #1c2942;
  --zero: #3a4a66;
  --hl: #4b5b77;
  --tip-bg: #09101e;
  --mapbg: #09101e;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #22304c;
  --accent-soft: #1c3249;
  --thead: #131c30;
  --row-border: #172238;
  --bull: #46e08b;
  --bear: #ff6470;
  --accent-2: #4dffb5;
  --on-accent: #03060e;
  --on-flat: #03060e;
  --glass: rgba(12,20,36,0.66);
  --ground: #050a16;
  --tile-art: linear-gradient(125deg, #167150 0%, #050a16 50%, #4b358a 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="aurora"]:not([data-theme="light"]) {
  --bg: #050a16;
  --panel: #0c1424;
  --panel2: #131c30;
  --line: #22304c;
  --text: #e8f1ff;
  --muted: #93a5c2;
  --accent: #6cc4ff;
  --green: #46e08b;
  --red: #ff6470;
  --amber: #f2c14e;
  --blue: #a9b6ff;
  --hover: #152438;
  --rowline: #172238;
  --line2: #2f3e5a;
  --dim: #8897b1;
  --track: #18233a;
  --grid: #1c2942;
  --zero: #3a4a66;
  --hl: #4b5b77;
  --tip-bg: #09101e;
  --mapbg: #09101e;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #22304c;
  --accent-soft: #1c3249;
  --thead: #131c30;
  --row-border: #172238;
  --bull: #46e08b;
  --bear: #ff6470;
  --accent-2: #4dffb5;
  --on-accent: #03060e;
  --on-flat: #03060e;
  --glass: rgba(12,20,36,0.66);
  --ground: #050a16;
  --tile-art: linear-gradient(125deg, #167150 0%, #050a16 50%, #4b358a 100%);
  --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);
}
}
:root[data-skin="acid"], .sk-tile[data-skin="acid"], .sk-tile[data-skin="acid"][data-theme="light"] {
  --bg: #ffefd2;
  --panel: #fffdf8;
  --panel2: #fff4e0;
  --line: #ecd3a8;
  --text: #2d1a0e;
  --muted: #6f5846;
  --accent: #7a2bd6;
  --green: #117b33;
  --red: #c62d29;
  --amber: #965800;
  --blue: #2a62c9;
  --hover: #f9f4f6;
  --rowline: #f6e8d0;
  --line2: #d9c099;
  --dim: #77675a;
  --track: #f1debe;
  --grid: #f2e0c1;
  --zero: #cbb38f;
  --hl: #b2997b;
  --tip-bg: #fffdf8;
  --mapbg: #f7e3c0;
  --violet: #6b4dde;
  --cyan: #048da5;
  --shadow: 0 10px 26px rgba(45,26,14,0.13);
  --border: #ecd3a8;
  --accent-soft: #f0e6f4;
  --thead: #fff4e0;
  --row-border: #f6e8d0;
  --bull: #117b33;
  --bear: #c62d29;
  --accent-2: #ff6a00;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,253,248,0.74);
  --ground: #ffefd2;
  --tile-art: linear-gradient(125deg, #ff9fba 0%, #ffefd2 50%, #ffb272 100%);
  --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);
}
:root[data-skin="acid"][data-theme="dark"], .sk-tile[data-skin="acid"][data-theme="dark"] {
  --bg: #12050f;
  --panel: #1b0b18;
  --panel2: #2a1226;
  --line: #4d2247;
  --text: #fdeeff;
  --muted: #b897ba;
  --accent: #c98aff;
  --green: #4fe38a;
  --red: #ff6161;
  --amber: #ffd23f;
  --blue: #6fb8ff;
  --hover: #2b162d;
  --rowline: #341630;
  --line2: #5b3156;
  --dim: #a084a0;
  --track: #361731;
  --grid: #401c3b;
  --zero: #673e63;
  --hl: #785075;
  --tip-bg: #170914;
  --mapbg: #1b0917;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #4d2247;
  --accent-soft: #3e2446;
  --thead: #2a1226;
  --row-border: #341630;
  --bull: #4fe38a;
  --bear: #ff6161;
  --accent-2: #ff8a00;
  --on-accent: #0c030a;
  --on-flat: #0c030a;
  --glass: rgba(27,11,24,0.7);
  --ground: #12050f;
  --tile-art: linear-gradient(125deg, #971c59 0%, #12050f 50%, #884708 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="acid"]:not([data-theme="light"]) {
  --bg: #12050f;
  --panel: #1b0b18;
  --panel2: #2a1226;
  --line: #4d2247;
  --text: #fdeeff;
  --muted: #b897ba;
  --accent: #c98aff;
  --green: #4fe38a;
  --red: #ff6161;
  --amber: #ffd23f;
  --blue: #6fb8ff;
  --hover: #2b162d;
  --rowline: #341630;
  --line2: #5b3156;
  --dim: #a084a0;
  --track: #361731;
  --grid: #401c3b;
  --zero: #673e63;
  --hl: #785075;
  --tip-bg: #170914;
  --mapbg: #1b0917;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #4d2247;
  --accent-soft: #3e2446;
  --thead: #2a1226;
  --row-border: #341630;
  --bull: #4fe38a;
  --bear: #ff6161;
  --accent-2: #ff8a00;
  --on-accent: #0c030a;
  --on-flat: #0c030a;
  --glass: rgba(27,11,24,0.7);
  --ground: #12050f;
  --tile-art: linear-gradient(125deg, #971c59 0%, #12050f 50%, #884708 100%);
  --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);
}
}
:root[data-skin="prism"], .sk-tile[data-skin="prism"], .sk-tile[data-skin="prism"][data-theme="light"] {
  --bg: #f0f1f8;
  --panel: #ffffff;
  --panel2: #f6f6fb;
  --line: #dadef0;
  --text: #181a2e;
  --muted: #595d76;
  --accent: #5a3df0;
  --green: #007b4c;
  --red: #cb234b;
  --amber: #936000;
  --blue: #2b62d9;
  --hover: #f8f6fe;
  --rowline: #eceef8;
  --line2: #c6cadd;
  --dim: #686a7c;
  --track: #e4e7f4;
  --grid: #e5e8f5;
  --zero: #b7bcd0;
  --hl: #9ca0b6;
  --tip-bg: #ffffff;
  --mapbg: #e6e9f4;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(24,26,46,0.13);
  --border: #dadef0;
  --accent-soft: #eeecfe;
  --thead: #f6f6fb;
  --row-border: #eceef8;
  --bull: #007b4c;
  --bear: #cb234b;
  --accent-2: #00a3c7;
  --on-accent: #1b1440;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.68);
  --ground: #f0f1f8;
  --tile-art: linear-gradient(125deg, #f9b6e1 0%, #f0f1f8 50%, #b8c5fc 100%);
  --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);
}
:root[data-skin="prism"][data-theme="dark"], .sk-tile[data-skin="prism"][data-theme="dark"] {
  --bg: #09090f;
  --panel: #111119;
  --panel2: #191925;
  --line: #2c2c42;
  --text: #ecebff;
  --muted: #9492b0;
  --accent: #a594ff;
  --green: #4ade80;
  --red: #fb6a7d;
  --amber: #f5c451;
  --blue: #7db4ff;
  --hover: #1e1d2e;
  --rowline: #1e1e2e;
  --line2: #393950;
  --dim: #87869d;
  --track: #20202f;
  --grid: #252537;
  --zero: #44445c;
  --hl: #55546e;
  --tip-bg: #0e0e15;
  --mapbg: #0e0e17;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #2c2c42;
  --accent-soft: #2c2944;
  --thead: #191925;
  --row-border: #1e1e2e;
  --bull: #4ade80;
  --bear: #fb6a7d;
  --accent-2: #5eead4;
  --on-accent: #12102a;
  --on-flat: #06060a;
  --glass: rgba(17,17,25,0.68);
  --ground: #09090f;
  --tile-art: linear-gradient(125deg, #622752 0%, #09090f 50%, #392c74 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="prism"]:not([data-theme="light"]) {
  --bg: #09090f;
  --panel: #111119;
  --panel2: #191925;
  --line: #2c2c42;
  --text: #ecebff;
  --muted: #9492b0;
  --accent: #a594ff;
  --green: #4ade80;
  --red: #fb6a7d;
  --amber: #f5c451;
  --blue: #7db4ff;
  --hover: #1e1d2e;
  --rowline: #1e1e2e;
  --line2: #393950;
  --dim: #87869d;
  --track: #20202f;
  --grid: #252537;
  --zero: #44445c;
  --hl: #55546e;
  --tip-bg: #0e0e15;
  --mapbg: #0e0e17;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #2c2c42;
  --accent-soft: #2c2944;
  --thead: #191925;
  --row-border: #1e1e2e;
  --bull: #4ade80;
  --bear: #fb6a7d;
  --accent-2: #5eead4;
  --on-accent: #12102a;
  --on-flat: #06060a;
  --glass: rgba(17,17,25,0.68);
  --ground: #09090f;
  --tile-art: linear-gradient(125deg, #622752 0%, #09090f 50%, #392c74 100%);
  --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);
}
}
:root[data-skin="cyberpunk"], .sk-tile[data-skin="cyberpunk"], .sk-tile[data-skin="cyberpunk"][data-theme="light"] {
  --bg: #faf5bd;
  --panel: #ffffff;
  --panel2: #f9f6ce;
  --line: #d9d3a0;
  --text: #0a0a0c;
  --muted: #5f5a2e;
  --accent: #005f87;
  --green: #0a7a3c;
  --red: #c81e4a;
  --amber: #875500;
  --blue: #4338ca;
  --hover: #f4f8fa;
  --rowline: #ece9d0;
  --line2: #c4bf8d;
  --dim: #737053;
  --track: #e3dfba;
  --grid: #e5e0bd;
  --zero: #b5b07f;
  --hl: #9a9565;
  --tip-bg: #ffffff;
  --mapbg: #ece6b0;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(10,10,12,0.13);
  --border: #d9d3a0;
  --accent-soft: #e3edf2;
  --thead: #f9f6ce;
  --row-border: #ece9d0;
  --bull: #0a7a3c;
  --bear: #c81e4a;
  --accent-2: #0a0a0c;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.86);
  --ground: #fcee0a;
  --tile-art: linear-gradient(125deg, #d5ca0a 0%, #fcee0a 50%, #fef89d 100%);
  --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);
}
:root[data-skin="cyberpunk"][data-theme="dark"], .sk-tile[data-skin="cyberpunk"][data-theme="dark"] {
  --bg: #07070c;
  --panel: #0f0f17;
  --panel2: #181824;
  --line: #2d2d44;
  --text: #f3f3f7;
  --muted: #9a9ab0;
  --accent: #2fc4ff;
  --green: #19f5a1;
  --red: #ff3d67;
  --amber: #ffb224;
  --blue: #b49cff;
  --hover: #121f2c;
  --rowline: #1e1e2d;
  --line2: #3b3b52;
  --dim: #858597;
  --track: #1f1f2f;
  --grid: #252538;
  --zero: #47475e;
  --hl: #58586f;
  --tip-bg: #0c0c12;
  --mapbg: #0d0d14;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #2d2d44;
  --accent-soft: #153345;
  --thead: #181824;
  --row-border: #1e1e2d;
  --bull: #19f5a1;
  --bear: #ff3d67;
  --accent-2: #fcee0a;
  --on-accent: #050508;
  --on-flat: #050508;
  --glass: rgba(15,15,23,0.74);
  --ground: #07070c;
  --tile-art: linear-gradient(125deg, #504c0b 0%, #07070c 50%, #6a1533 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="cyberpunk"]:not([data-theme="light"]) {
  --bg: #07070c;
  --panel: #0f0f17;
  --panel2: #181824;
  --line: #2d2d44;
  --text: #f3f3f7;
  --muted: #9a9ab0;
  --accent: #2fc4ff;
  --green: #19f5a1;
  --red: #ff3d67;
  --amber: #ffb224;
  --blue: #b49cff;
  --hover: #121f2c;
  --rowline: #1e1e2d;
  --line2: #3b3b52;
  --dim: #858597;
  --track: #1f1f2f;
  --grid: #252538;
  --zero: #47475e;
  --hl: #58586f;
  --tip-bg: #0c0c12;
  --mapbg: #0d0d14;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #2d2d44;
  --accent-soft: #153345;
  --thead: #181824;
  --row-border: #1e1e2d;
  --bull: #19f5a1;
  --bear: #ff3d67;
  --accent-2: #fcee0a;
  --on-accent: #050508;
  --on-flat: #050508;
  --glass: rgba(15,15,23,0.74);
  --ground: #07070c;
  --tile-art: linear-gradient(125deg, #504c0b 0%, #07070c 50%, #6a1533 100%);
  --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);
}
}
:root[data-skin="kaleidoscope"], .sk-tile[data-skin="kaleidoscope"], .sk-tile[data-skin="kaleidoscope"][data-theme="light"] {
  --bg: #fbeef6;
  --panel: #ffffff;
  --panel2: #fdf4f9;
  --line: #efcfe2;
  --text: #2a1230;
  --muted: #755873;
  --accent: #b71dc8;
  --green: #0d7a4d;
  --red: #cc1e55;
  --amber: #9a5b00;
  --blue: #3b5fd9;
  --hover: #fcf5fd;
  --rowline: #f7e7f0;
  --line2: #dbbcd0;
  --dim: #7a6778;
  --track: #f3dcea;
  --grid: #f4deeb;
  --zero: #cdaec3;
  --hl: #b394ab;
  --tip-bg: #ffffff;
  --mapbg: #f6e0ed;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(42,18,48,0.13);
  --border: #efcfe2;
  --accent-soft: #f8eafa;
  --thead: #fdf4f9;
  --row-border: #f7e7f0;
  --bull: #0d7a4d;
  --bear: #cc1e55;
  --accent-2: #0ea5e9;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.76);
  --ground: #fbeef6;
  --tile-art: linear-gradient(125deg, #fda6d3 0%, #fbeef6 50%, #fddea7 100%);
  --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);
}
:root[data-skin="kaleidoscope"][data-theme="dark"], .sk-tile[data-skin="kaleidoscope"][data-theme="dark"] {
  --bg: #110818;
  --panel: #1a0f24;
  --panel2: #261734;
  --line: #43295a;
  --text: #f6ecff;
  --muted: #b39ccb;
  --accent: #f0abfc;
  --green: #4ade80;
  --red: #ff6b8a;
  --amber: #ffc94a;
  --blue: #93c5fd;
  --hover: #2d1d37;
  --rowline: #2f1c3f;
  --line2: #513869;
  --dim: #9784aa;
  --track: #301d41;
  --grid: #38224c;
  --zero: #5d4575;
  --hl: #6f5787;
  --tip-bg: #160c1f;
  --mapbg: #190d22;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #43295a;
  --accent-soft: #452e4f;
  --thead: #261734;
  --row-border: #2f1c3f;
  --bull: #4ade80;
  --bear: #ff6b8a;
  --accent-2: #67e8f9;
  --on-accent: #0b0510;
  --on-flat: #0b0510;
  --glass: rgba(26,15,36,0.72);
  --ground: #110818;
  --tile-art: linear-gradient(125deg, #7e2158 0%, #110818 50%, #704b0e 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="kaleidoscope"]:not([data-theme="light"]) {
  --bg: #110818;
  --panel: #1a0f24;
  --panel2: #261734;
  --line: #43295a;
  --text: #f6ecff;
  --muted: #b39ccb;
  --accent: #f0abfc;
  --green: #4ade80;
  --red: #ff6b8a;
  --amber: #ffc94a;
  --blue: #93c5fd;
  --hover: #2d1d37;
  --rowline: #2f1c3f;
  --line2: #513869;
  --dim: #9784aa;
  --track: #301d41;
  --grid: #38224c;
  --zero: #5d4575;
  --hl: #6f5787;
  --tip-bg: #160c1f;
  --mapbg: #190d22;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #43295a;
  --accent-soft: #452e4f;
  --thead: #261734;
  --row-border: #2f1c3f;
  --bull: #4ade80;
  --bear: #ff6b8a;
  --accent-2: #67e8f9;
  --on-accent: #0b0510;
  --on-flat: #0b0510;
  --glass: rgba(26,15,36,0.72);
  --ground: #110818;
  --tile-art: linear-gradient(125deg, #7e2158 0%, #110818 50%, #704b0e 100%);
  --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);
}
}
:root[data-skin="abyss"], .sk-tile[data-skin="abyss"], .sk-tile[data-skin="abyss"][data-theme="light"] {
  --bg: #e4f4f3;
  --panel: #ffffff;
  --panel2: #eef8f8;
  --line: #bfe0dc;
  --text: #0f2a2e;
  --muted: #46656a;
  --accent: #0a6aa0;
  --green: #017c42;
  --red: #c92941;
  --amber: #946000;
  --blue: #2563c9;
  --hover: #f4f8fb;
  --rowline: #dff0ee;
  --line2: #accdca;
  --dim: #5b7073;
  --track: #d0e8e6;
  --grid: #d3eae7;
  --zero: #9fbfbd;
  --hl: #85a5a6;
  --tip-bg: #ffffff;
  --mapbg: #d4ebe9;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(15,42,46,0.13);
  --border: #bfe0dc;
  --accent-soft: #e9f2f6;
  --thead: #eef8f8;
  --row-border: #dff0ee;
  --bull: #017c42;
  --bear: #c92941;
  --accent-2: #2dd4bf;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.74);
  --ground: #e4f4f3;
  --tile-art: linear-gradient(125deg, #acf0e6 0%, #e4f4f3 50%, #a3dff5 100%);
  --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);
}
:root[data-skin="abyss"][data-theme="dark"], .sk-tile[data-skin="abyss"][data-theme="dark"] {
  --bg: #02101a;
  --panel: #07192a;
  --panel2: #0c2538;
  --line: #184258;
  --text: #e3f6ff;
  --muted: #94b9cd;
  --accent: #3cc8f8;
  --green: #3ee89a;
  --red: #fd7f8b;
  --amber: #f5c04b;
  --blue: #93b4ff;
  --hover: #0c293d;
  --rowline: #102e41;
  --line2: #264f65;
  --dim: #8baabd;
  --track: #102f43;
  --grid: #14374c;
  --zero: #325a70;
  --hl: #446b80;
  --tip-bg: #051523;
  --mapbg: #051823;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #184258;
  --accent-soft: #123c53;
  --thead: #0c2538;
  --row-border: #102e41;
  --bull: #3ee89a;
  --bear: #fd7f8b;
  --accent-2: #34d399;
  --on-accent: #010a11;
  --on-flat: #010a11;
  --glass: rgba(7,25,42,0.7);
  --ground: #02101a;
  --tile-art: linear-gradient(125deg, #0f5e6f 0%, #02101a 50%, #115755 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="abyss"]:not([data-theme="light"]) {
  --bg: #02101a;
  --panel: #07192a;
  --panel2: #0c2538;
  --line: #184258;
  --text: #e3f6ff;
  --muted: #94b9cd;
  --accent: #3cc8f8;
  --green: #3ee89a;
  --red: #fd7f8b;
  --amber: #f5c04b;
  --blue: #93b4ff;
  --hover: #0c293d;
  --rowline: #102e41;
  --line2: #264f65;
  --dim: #8baabd;
  --track: #102f43;
  --grid: #14374c;
  --zero: #325a70;
  --hl: #446b80;
  --tip-bg: #051523;
  --mapbg: #051823;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #184258;
  --accent-soft: #123c53;
  --thead: #0c2538;
  --row-border: #102e41;
  --bull: #3ee89a;
  --bear: #fd7f8b;
  --accent-2: #34d399;
  --on-accent: #010a11;
  --on-flat: #010a11;
  --glass: rgba(7,25,42,0.7);
  --ground: #02101a;
  --tile-art: linear-gradient(125deg, #0f5e6f 0%, #02101a 50%, #115755 100%);
  --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);
}
}
:root[data-skin="noir"], .sk-tile[data-skin="noir"], .sk-tile[data-skin="noir"][data-theme="light"] {
  --bg: #efece6;
  --panel: #fbfaf7;
  --panel2: #f4f1ec;
  --line: #d6d1c7;
  --text: #141413;
  --muted: #5f5d58;
  --accent: #1a1a1a;
  --green: #09783a;
  --red: #c22a2a;
  --amber: #8f5a00;
  --blue: #2c4f8a;
  --hover: #f1f0ed;
  --rowline: #e8e5df;
  --line2: #c2bdb4;
  --dim: #6c6b67;
  --track: #e0dcd4;
  --grid: #e1ded6;
  --zero: #b4afa7;
  --hl: #99958e;
  --tip-bg: #fbfaf7;
  --mapbg: #e4e0d8;
  --violet: #6a4bdc;
  --cyan: #008ba4;
  --shadow: 0 10px 26px rgba(20,20,19,0.13);
  --border: #d6d1c7;
  --accent-soft: #e2e1df;
  --thead: #f4f1ec;
  --row-border: #e8e5df;
  --bull: #09783a;
  --bear: #c22a2a;
  --accent-2: #8a877f;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(251,250,247,0.82);
  --ground: #efece6;
  --tile-art: linear-gradient(125deg, #d5d2cd 0%, #efece6 50%, #f8f6f4 100%);
  --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);
}
:root[data-skin="noir"][data-theme="dark"], .sk-tile[data-skin="noir"][data-theme="dark"] {
  --bg: #0a0a0a;
  --panel: #141414;
  --panel2: #1d1d1d;
  --line: #333331;
  --text: #f2f0eb;
  --muted: #a3a09a;
  --accent: #f2f0eb;
  --green: #4cdc8a;
  --red: #ff6b6b;
  --amber: #f3c45c;
  --blue: #9db8ff;
  --hover: #282827;
  --rowline: #242423;
  --line2: #41413e;
  --dim: #908e8a;
  --track: #252524;
  --grid: #2b2b29;
  --zero: #4d4d4a;
  --hl: #5f5e5a;
  --tip-bg: #101010;
  --mapbg: #101010;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #333331;
  --accent-soft: #363635;
  --thead: #1d1d1d;
  --row-border: #242423;
  --bull: #4cdc8a;
  --bear: #ff6b6b;
  --accent-2: #7a7872;
  --on-accent: #060606;
  --on-flat: #060606;
  --glass: rgba(20,20,20,0.76);
  --ground: #0a0a0a;
  --tile-art: linear-gradient(125deg, #232323 0%, #0a0a0a 50%, #3b3b3b 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="noir"]:not([data-theme="light"]) {
  --bg: #0a0a0a;
  --panel: #141414;
  --panel2: #1d1d1d;
  --line: #333331;
  --text: #f2f0eb;
  --muted: #a3a09a;
  --accent: #f2f0eb;
  --green: #4cdc8a;
  --red: #ff6b6b;
  --amber: #f3c45c;
  --blue: #9db8ff;
  --hover: #282827;
  --rowline: #242423;
  --line2: #41413e;
  --dim: #908e8a;
  --track: #252524;
  --grid: #2b2b29;
  --zero: #4d4d4a;
  --hl: #5f5e5a;
  --tip-bg: #101010;
  --mapbg: #101010;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #333331;
  --accent-soft: #363635;
  --thead: #1d1d1d;
  --row-border: #242423;
  --bull: #4cdc8a;
  --bear: #ff6b6b;
  --accent-2: #7a7872;
  --on-accent: #060606;
  --on-flat: #060606;
  --glass: rgba(20,20,20,0.76);
  --ground: #0a0a0a;
  --tile-art: linear-gradient(125deg, #232323 0%, #0a0a0a 50%, #3b3b3b 100%);
  --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);
}
}
:root[data-skin="nebula"], .sk-tile[data-skin="nebula"], .sk-tile[data-skin="nebula"][data-theme="light"] {
  --bg: #eceefb;
  --panel: #ffffff;
  --panel2: #f3f4fd;
  --line: #d4d8f2;
  --text: #15162e;
  --muted: #5c5f80;
  --accent: #5b21b6;
  --green: #057b48;
  --red: #ca2451;
  --amber: #946000;
  --blue: #2563c9;
  --hover: #f8f5fc;
  --rowline: #eaecf8;
  --line2: #c1c5e0;
  --dim: #6a6b80;
  --track: #e0e3f6;
  --grid: #e1e4f6;
  --zero: #b3b7d3;
  --hl: #9a9dbb;
  --tip-bg: #ffffff;
  --mapbg: #e1e4f7;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(21,22,46,0.13);
  --border: #d4d8f2;
  --accent-soft: #efe9f8;
  --thead: #f3f4fd;
  --row-border: #eaecf8;
  --bull: #057b48;
  --bear: #ca2451;
  --accent-2: #db2777;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.72);
  --ground: #eceefb;
  --tile-art: linear-gradient(125deg, #d7bbfb 0%, #eceefb 50%, #f2cce8 100%);
  --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);
}
:root[data-skin="nebula"][data-theme="dark"], .sk-tile[data-skin="nebula"][data-theme="dark"] {
  --bg: #05020f;
  --panel: #0d0920;
  --panel2: #16102e;
  --line: #2a2150;
  --text: #ebe6ff;
  --muted: #9d94c4;
  --accent: #c4b5fd;
  --green: #4ade80;
  --red: #fb7185;
  --amber: #fcd34d;
  --blue: #7dd3fc;
  --hover: #1d1834;
  --rowline: #1c1538;
  --line2: #39305f;
  --dim: #867fa7;
  --track: #1d163a;
  --grid: #221b43;
  --zero: #463d6c;
  --hl: #584f7e;
  --tip-bg: #0a0619;
  --mapbg: #0b0719;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #2a2150;
  --accent-soft: #322b4c;
  --thead: #16102e;
  --row-border: #1c1538;
  --bull: #4ade80;
  --bear: #fb7185;
  --accent-2: #f472b6;
  --on-accent: #03010a;
  --on-flat: #03010a;
  --glass: rgba(13,9,32,0.66);
  --ground: #05020f;
  --tile-art: linear-gradient(125deg, #431f82 0%, #05020f 50%, #561037 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="nebula"]:not([data-theme="light"]) {
  --bg: #05020f;
  --panel: #0d0920;
  --panel2: #16102e;
  --line: #2a2150;
  --text: #ebe6ff;
  --muted: #9d94c4;
  --accent: #c4b5fd;
  --green: #4ade80;
  --red: #fb7185;
  --amber: #fcd34d;
  --blue: #7dd3fc;
  --hover: #1d1834;
  --rowline: #1c1538;
  --line2: #39305f;
  --dim: #867fa7;
  --track: #1d163a;
  --grid: #221b43;
  --zero: #463d6c;
  --hl: #584f7e;
  --tip-bg: #0a0619;
  --mapbg: #0b0719;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #2a2150;
  --accent-soft: #322b4c;
  --thead: #16102e;
  --row-border: #1c1538;
  --bull: #4ade80;
  --bear: #fb7185;
  --accent-2: #f472b6;
  --on-accent: #03010a;
  --on-flat: #03010a;
  --glass: rgba(13,9,32,0.66);
  --ground: #05020f;
  --tile-art: linear-gradient(125deg, #431f82 0%, #05020f 50%, #561037 100%);
  --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);
}
}
:root[data-skin="hypno"], .sk-tile[data-skin="hypno"], .sk-tile[data-skin="hypno"][data-theme="light"] {
  --bg: #f4f4f1;
  --panel: #ffffff;
  --panel2: #f8f8f6;
  --line: #d8d8d2;
  --text: #111111;
  --muted: #5b5b57;
  --accent: #1d4ed8;
  --green: #0d7a3e;
  --red: #c42b2b;
  --amber: #8f5a00;
  --blue: #6d28d9;
  --hover: #f5f7fd;
  --rowline: #ecece8;
  --line2: #c3c3bd;
  --dim: #70706d;
  --track: #e3e3de;
  --grid: #e4e4e0;
  --zero: #b4b4ae;
  --hl: #989893;
  --tip-bg: #ffffff;
  --mapbg: #e8e8e3;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(17,17,17,0.13);
  --border: #d8d8d2;
  --accent-soft: #e6ecfb;
  --thead: #f8f8f6;
  --row-border: #ecece8;
  --bull: #0d7a3e;
  --bear: #c42b2b;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.82);
  --ground: #f4f4f1;
  --tile-art: linear-gradient(125deg, #d6d6d4 0%, #f4f4f1 50%, #d2d9ed 100%);
  --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);
}
:root[data-skin="hypno"][data-theme="dark"], .sk-tile[data-skin="hypno"][data-theme="dark"] {
  --bg: #060606;
  --panel: #111113;
  --panel2: #1b1b1e;
  --line: #313136;
  --text: #f4f4f6;
  --muted: #a3a3ab;
  --accent: #8ec5ff;
  --green: #4ade80;
  --red: #ff6b6b;
  --amber: #f5c451;
  --blue: #c4b5fd;
  --hover: #1c2128;
  --rowline: #212124;
  --line2: #404045;
  --dim: #87878d;
  --track: #222226;
  --grid: #29292d;
  --zero: #4c4c52;
  --hl: #5e5e64;
  --tip-bg: #0c0c0e;
  --mapbg: #0c0c0d;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #313136;
  --accent-soft: #2a3542;
  --thead: #1b1b1e;
  --row-border: #212124;
  --bull: #4ade80;
  --bear: #ff6b6b;
  --accent-2: #ffffff;
  --on-accent: #040404;
  --on-flat: #040404;
  --glass: rgba(17,17,19,0.76);
  --ground: #060606;
  --tile-art: linear-gradient(125deg, #262626 0%, #060606 50%, #2c3b4c 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="hypno"]:not([data-theme="light"]) {
  --bg: #060606;
  --panel: #111113;
  --panel2: #1b1b1e;
  --line: #313136;
  --text: #f4f4f6;
  --muted: #a3a3ab;
  --accent: #8ec5ff;
  --green: #4ade80;
  --red: #ff6b6b;
  --amber: #f5c451;
  --blue: #c4b5fd;
  --hover: #1c2128;
  --rowline: #212124;
  --line2: #404045;
  --dim: #87878d;
  --track: #222226;
  --grid: #29292d;
  --zero: #4c4c52;
  --hl: #5e5e64;
  --tip-bg: #0c0c0e;
  --mapbg: #0c0c0d;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #313136;
  --accent-soft: #2a3542;
  --thead: #1b1b1e;
  --row-border: #212124;
  --bull: #4ade80;
  --bear: #ff6b6b;
  --accent-2: #ffffff;
  --on-accent: #040404;
  --on-flat: #040404;
  --glass: rgba(17,17,19,0.76);
  --ground: #060606;
  --tile-art: linear-gradient(125deg, #262626 0%, #060606 50%, #2c3b4c 100%);
  --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);
}
}
:root[data-skin="lava"], .sk-tile[data-skin="lava"], .sk-tile[data-skin="lava"][data-theme="light"] {
  --bg: #fbe9dc;
  --panel: #fffaf6;
  --panel2: #fdefe6;
  --line: #ecc9b5;
  --text: #2c1510;
  --muted: #7a5749;
  --accent: #0a6ea8;
  --green: #0b793d;
  --red: #c42f2a;
  --amber: #935600;
  --blue: #2b5fd0;
  --hover: #f4f4f2;
  --rowline: #f6e2d6;
  --line2: #d9b6a3;
  --dim: #7e665d;
  --track: #f1d6c7;
  --grid: #f2d8c9;
  --zero: #cca996;
  --hl: #b3907f;
  --tip-bg: #fffaf6;
  --mapbg: #f4dbcb;
  --violet: #6b4cdd;
  --cyan: #008ba4;
  --shadow: 0 10px 26px rgba(44,21,16,0.13);
  --border: #ecc9b5;
  --accent-soft: #e4ebed;
  --thead: #fdefe6;
  --row-border: #f6e2d6;
  --bull: #0b793d;
  --bear: #c42f2a;
  --accent-2: #ff6a1a;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,250,246,0.78);
  --ground: #fbe9dc;
  --tile-art: linear-gradient(125deg, #fdad8d 0%, #fbe9dc 50%, #fdd37d 100%);
  --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);
}
:root[data-skin="lava"][data-theme="dark"], .sk-tile[data-skin="lava"][data-theme="dark"] {
  --bg: #0c0504;
  --panel: #170b09;
  --panel2: #26120e;
  --line: #4a2419;
  --text: #fff1ea;
  --muted: #c09a8c;
  --accent: #67e8f9;
  --green: #4ade80;
  --red: #ff6b5e;
  --amber: #ffbe3d;
  --blue: #93c5fd;
  --hover: #1e1f1f;
  --rowline: #301811;
  --line2: #593328;
  --dim: #9d8075;
  --track: #321812;
  --grid: #3d1d15;
  --zero: #664035;
  --hl: #795347;
  --tip-bg: #120907;
  --mapbg: #150a07;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #4a2419;
  --accent-soft: #273739;
  --thead: #26120e;
  --row-border: #301811;
  --bull: #4ade80;
  --bear: #ff6b5e;
  --accent-2: #ff6a1a;
  --on-accent: #080303;
  --on-flat: #080303;
  --glass: rgba(23,11,9,0.74);
  --ground: #0c0504;
  --tile-art: linear-gradient(125deg, #852102 0%, #0c0504 50%, #724302 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="lava"]:not([data-theme="light"]) {
  --bg: #0c0504;
  --panel: #170b09;
  --panel2: #26120e;
  --line: #4a2419;
  --text: #fff1ea;
  --muted: #c09a8c;
  --accent: #67e8f9;
  --green: #4ade80;
  --red: #ff6b5e;
  --amber: #ffbe3d;
  --blue: #93c5fd;
  --hover: #1e1f1f;
  --rowline: #301811;
  --line2: #593328;
  --dim: #9d8075;
  --track: #321812;
  --grid: #3d1d15;
  --zero: #664035;
  --hl: #795347;
  --tip-bg: #120907;
  --mapbg: #150a07;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #4a2419;
  --accent-soft: #273739;
  --thead: #26120e;
  --row-border: #301811;
  --bull: #4ade80;
  --bear: #ff6b5e;
  --accent-2: #ff6a1a;
  --on-accent: #080303;
  --on-flat: #080303;
  --glass: rgba(23,11,9,0.74);
  --ground: #0c0504;
  --tile-art: linear-gradient(125deg, #852102 0%, #0c0504 50%, #724302 100%);
  --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);
}
}
:root[data-skin="spiderman"], .sk-tile[data-skin="spiderman"], .sk-tile[data-skin="spiderman"][data-theme="light"] {
  --bg: #eef2fb;
  --panel: #ffffff;
  --panel2: #f4f7fd;
  --line: #cfd8ef;
  --text: #111a3a;
  --muted: #586183;
  --accent: #1e3a8a;
  --green: #027b47;
  --red: #cd2527;
  --amber: #946000;
  --blue: #2563c9;
  --hover: #f5f6fa;
  --rowline: #e7ecf7;
  --line2: #bcc5de;
  --dim: #686d83;
  --track: #dce3f3;
  --grid: #dee4f4;
  --zero: #aeb7d2;
  --hl: #959ebb;
  --tip-bg: #ffffff;
  --mapbg: #e0e7f6;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(17,26,58,0.13);
  --border: #cfd8ef;
  --accent-soft: #e6e9f2;
  --thead: #f4f7fd;
  --row-border: #e7ecf7;
  --bull: #027b47;
  --bear: #cd2527;
  --accent-2: #dc2626;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.78);
  --ground: #eef2fb;
  --tile-art: linear-gradient(125deg, #e8b1b7 0%, #eef2fb 50%, #c0cae2 100%);
  --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);
}
:root[data-skin="spiderman"][data-theme="dark"], .sk-tile[data-skin="spiderman"][data-theme="dark"] {
  --bg: #060a1a;
  --panel: #0d1328;
  --panel2: #141c37;
  --line: #26315a;
  --text: #eaf0ff;
  --muted: #97a3cc;
  --accent: #93c5fd;
  --green: #4ade80;
  --red: #ff6b6b;
  --amber: #f5c451;
  --blue: #c4b5fd;
  --hover: #19233b;
  --rowline: #1a2241;
  --line2: #354069;
  --dim: #7e89ab;
  --track: #1a2343;
  --grid: #1f294d;
  --zero: #414c75;
  --hl: #535e87;
  --tip-bg: #0a0f22;
  --mapbg: #0b1024;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #26315a;
  --accent-soft: #283753;
  --thead: #141c37;
  --row-border: #1a2241;
  --bull: #4ade80;
  --bear: #ff6b6b;
  --accent-2: #ff3b3b;
  --on-accent: #040611;
  --on-flat: #040611;
  --glass: rgba(13,19,40,0.72);
  --ground: #060a1a;
  --tile-art: linear-gradient(125deg, #6f1f28 0%, #060a1a 50%, #20336c 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="spiderman"]:not([data-theme="light"]) {
  --bg: #060a1a;
  --panel: #0d1328;
  --panel2: #141c37;
  --line: #26315a;
  --text: #eaf0ff;
  --muted: #97a3cc;
  --accent: #93c5fd;
  --green: #4ade80;
  --red: #ff6b6b;
  --amber: #f5c451;
  --blue: #c4b5fd;
  --hover: #19233b;
  --rowline: #1a2241;
  --line2: #354069;
  --dim: #7e89ab;
  --track: #1a2343;
  --grid: #1f294d;
  --zero: #414c75;
  --hl: #535e87;
  --tip-bg: #0a0f22;
  --mapbg: #0b1024;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #26315a;
  --accent-soft: #283753;
  --thead: #141c37;
  --row-border: #1a2241;
  --bull: #4ade80;
  --bear: #ff6b6b;
  --accent-2: #ff3b3b;
  --on-accent: #040611;
  --on-flat: #040611;
  --glass: rgba(13,19,40,0.72);
  --ground: #060a1a;
  --tile-art: linear-gradient(125deg, #6f1f28 0%, #060a1a 50%, #20336c 100%);
  --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);
}
}
:root[data-skin="batman"], .sk-tile[data-skin="batman"], .sk-tile[data-skin="batman"][data-theme="light"] {
  --bg: #e9ecf0;
  --panel: #fbfcfd;
  --panel2: #f0f2f5;
  --line: #c9d0da;
  --text: #0f172a;
  --muted: #555d6b;
  --accent: #1e293b;
  --green: #0c793d;
  --red: #c42b2b;
  --amber: #8f5a00;
  --blue: #2b4fd0;
  --hover: #f1f3f4;
  --rowline: #e2e6ec;
  --line2: #b6bec8;
  --dim: #636a73;
  --track: #d7dce4;
  --grid: #d8dde5;
  --zero: #a9b1bc;
  --hl: #9099a4;
  --tip-bg: #fbfcfd;
  --mapbg: #dbe0e6;
  --violet: #6b4cdd;
  --cyan: #008ca4;
  --shadow: 0 10px 26px rgba(15,23,42,0.13);
  --border: #c9d0da;
  --accent-soft: #e3e5e8;
  --thead: #f0f2f5;
  --row-border: #e2e6ec;
  --bull: #0c793d;
  --bear: #c42b2b;
  --accent-2: #f5c518;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(251,252,253,0.82);
  --ground: #e9ecf0;
  --tile-art: linear-gradient(125deg, #9297a1 0%, #e9ecf0 50%, #ede0af 100%);
  --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);
}
:root[data-skin="batman"][data-theme="dark"], .sk-tile[data-skin="batman"][data-theme="dark"] {
  --bg: #070a10;
  --panel: #0f141c;
  --panel2: #161c26;
  --line: #26303f;
  --text: #e9eef5;
  --muted: #98a3b3;
  --accent: #94a3b8;
  --green: #4ade80;
  --red: #ff6b6b;
  --amber: #f5c451;
  --blue: #93c5fd;
  --hover: #1b212a;
  --rowline: #1a222e;
  --line2: #353f4e;
  --dim: #7f8896;
  --track: #1b232f;
  --grid: #202936;
  --zero: #414c5b;
  --hl: #535e6d;
  --tip-bg: #0c1017;
  --mapbg: #0c1017;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #26303f;
  --accent-soft: #2a313b;
  --thead: #161c26;
  --row-border: #1a222e;
  --bull: #4ade80;
  --bear: #ff6b6b;
  --accent-2: #f5c518;
  --on-accent: #05060a;
  --on-flat: #05060a;
  --glass: rgba(15,20,28,0.78);
  --ground: #070a10;
  --tile-art: linear-gradient(125deg, #020204 0%, #070a10 50%, #4e4212 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="batman"]:not([data-theme="light"]) {
  --bg: #070a10;
  --panel: #0f141c;
  --panel2: #161c26;
  --line: #26303f;
  --text: #e9eef5;
  --muted: #98a3b3;
  --accent: #94a3b8;
  --green: #4ade80;
  --red: #ff6b6b;
  --amber: #f5c451;
  --blue: #93c5fd;
  --hover: #1b212a;
  --rowline: #1a222e;
  --line2: #353f4e;
  --dim: #7f8896;
  --track: #1b232f;
  --grid: #202936;
  --zero: #414c5b;
  --hl: #535e6d;
  --tip-bg: #0c1017;
  --mapbg: #0c1017;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #26303f;
  --accent-soft: #2a313b;
  --thead: #161c26;
  --row-border: #1a222e;
  --bull: #4ade80;
  --bear: #ff6b6b;
  --accent-2: #f5c518;
  --on-accent: #05060a;
  --on-flat: #05060a;
  --glass: rgba(15,20,28,0.78);
  --ground: #070a10;
  --tile-art: linear-gradient(125deg, #020204 0%, #070a10 50%, #4e4212 100%);
  --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);
}
}
:root[data-skin="sololeveling"], .sk-tile[data-skin="sololeveling"], .sk-tile[data-skin="sololeveling"][data-theme="light"] {
  --bg: #eeeafa;
  --panel: #ffffff;
  --panel2: #f4f2fc;
  --line: #d6cdf0;
  --text: #1a1433;
  --muted: #625987;
  --accent: #3730a3;
  --green: #007945;
  --red: #c9224f;
  --amber: #905e08;
  --blue: #2563c9;
  --hover: #f6f6fb;
  --rowline: #ebe6f8;
  --line2: #c4bbe0;
  --dim: #6c6685;
  --track: #e1dbf4;
  --grid: #e3dcf5;
  --zero: #b7aed4;
  --hl: #9f96bf;
  --tip-bg: #ffffff;
  --mapbg: #e3ddf6;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(26,20,51,0.13);
  --border: #d6cdf0;
  --accent-soft: #e9e8f5;
  --thead: #f4f2fc;
  --row-border: #ebe6f8;
  --bull: #007945;
  --bear: #c9224f;
  --accent-2: #7c3aed;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.74);
  --ground: #eeeafa;
  --tile-art: linear-gradient(125deg, #c5abf5 0%, #eeeafa 50%, #c1bcf4 100%);
  --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);
}
:root[data-skin="sololeveling"][data-theme="dark"], .sk-tile[data-skin="sololeveling"][data-theme="dark"] {
  --bg: #07040f;
  --panel: #100a1d;
  --panel2: #19122c;
  --line: #2f2350;
  --text: #ece6ff;
  --muted: #a497c9;
  --accent: #818cf8;
  --green: #4ade80;
  --red: #fb7185;
  --amber: #fcd34d;
  --blue: #7dd3fc;
  --hover: #1a1631;
  --rowline: #201637;
  --line2: #3e3260;
  --dim: #877ca4;
  --track: #211738;
  --grid: #271c43;
  --zero: #4b3f6d;
  --hl: #5d5180;
  --tip-bg: #0c0817;
  --mapbg: #0d0919;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #2f2350;
  --accent-soft: #272449;
  --thead: #19122c;
  --row-border: #201637;
  --bull: #4ade80;
  --bear: #fb7185;
  --accent-2: #a855f7;
  --on-accent: #05030a;
  --on-flat: #05030a;
  --glass: rgba(16,10,29,0.7);
  --ground: #07040f;
  --tile-art: linear-gradient(125deg, #3c1778 0%, #07040f 50%, #1b3467 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="sololeveling"]:not([data-theme="light"]) {
  --bg: #07040f;
  --panel: #100a1d;
  --panel2: #19122c;
  --line: #2f2350;
  --text: #ece6ff;
  --muted: #a497c9;
  --accent: #818cf8;
  --green: #4ade80;
  --red: #fb7185;
  --amber: #fcd34d;
  --blue: #7dd3fc;
  --hover: #1a1631;
  --rowline: #201637;
  --line2: #3e3260;
  --dim: #877ca4;
  --track: #211738;
  --grid: #271c43;
  --zero: #4b3f6d;
  --hl: #5d5180;
  --tip-bg: #0c0817;
  --mapbg: #0d0919;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #2f2350;
  --accent-soft: #272449;
  --thead: #19122c;
  --row-border: #201637;
  --bull: #4ade80;
  --bear: #fb7185;
  --accent-2: #a855f7;
  --on-accent: #05030a;
  --on-flat: #05030a;
  --glass: rgba(16,10,29,0.7);
  --ground: #07040f;
  --tile-art: linear-gradient(125deg, #3c1778 0%, #07040f 50%, #1b3467 100%);
  --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);
}
}
:root[data-skin="aot"], .sk-tile[data-skin="aot"], .sk-tile[data-skin="aot"][data-theme="light"] {
  --bg: #ece6d8;
  --panel: #fbf8f1;
  --panel2: #f2ede2;
  --line: #cfc4ae;
  --text: #1f1a14;
  --muted: #62584a;
  --accent: #44403c;
  --green: #05763b;
  --red: #c6222a;
  --amber: #875a00;
  --blue: #2b5fd0;
  --hover: #f3f0e9;
  --rowline: #e5ded0;
  --line2: #beb39e;
  --dim: #6d655a;
  --track: #dbd2c0;
  --grid: #dcd4c3;
  --zero: #b2a793;
  --hl: #9b907e;
  --tip-bg: #fbf8f1;
  --mapbg: #dfd7c6;
  --violet: #694ada;
  --cyan: #128aa1;
  --shadow: 0 10px 26px rgba(31,26,20,0.13);
  --border: #cfc4ae;
  --accent-soft: #e7e4dd;
  --thead: #f2ede2;
  --row-border: #e5ded0;
  --bull: #05763b;
  --bear: #c6222a;
  --accent-2: #8b5a2b;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(251,248,241,0.8);
  --ground: #ece6d8;
  --tile-art: linear-gradient(125deg, #d3cec0 0%, #ece6d8 50%, #f7f5ef 100%);
  --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);
}
:root[data-skin="aot"][data-theme="dark"], .sk-tile[data-skin="aot"][data-theme="dark"] {
  --bg: #0e0b09;
  --panel: #19140f;
  --panel2: #241d16;
  --line: #3d3128;
  --text: #f3ece2;
  --muted: #b0a391;
  --accent: #d6d3d1;
  --green: #4ade80;
  --red: #ff6b5e;
  --amber: #ffbe3d;
  --blue: #93c5fd;
  --hover: #2a2520;
  --rowline: #2b231c;
  --line2: #4c4035;
  --dim: #968b7d;
  --track: #2c241c;
  --grid: #342921;
  --zero: #594c41;
  --hl: #6b5e51;
  --tip-bg: #14100d;
  --mapbg: #15110e;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #3d3128;
  --accent-soft: #3e3935;
  --thead: #241d16;
  --row-border: #2b231c;
  --bull: #4ade80;
  --bear: #ff6b5e;
  --accent-2: #ef4444;
  --on-accent: #090706;
  --on-flat: #090706;
  --glass: rgba(25,20,15,0.76);
  --ground: #0e0b09;
  --tile-art: linear-gradient(125deg, #1f1c1a 0%, #0e0b09 50%, #302e2d 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="aot"]:not([data-theme="light"]) {
  --bg: #0e0b09;
  --panel: #19140f;
  --panel2: #241d16;
  --line: #3d3128;
  --text: #f3ece2;
  --muted: #b0a391;
  --accent: #d6d3d1;
  --green: #4ade80;
  --red: #ff6b5e;
  --amber: #ffbe3d;
  --blue: #93c5fd;
  --hover: #2a2520;
  --rowline: #2b231c;
  --line2: #4c4035;
  --dim: #968b7d;
  --track: #2c241c;
  --grid: #342921;
  --zero: #594c41;
  --hl: #6b5e51;
  --tip-bg: #14100d;
  --mapbg: #15110e;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #3d3128;
  --accent-soft: #3e3935;
  --thead: #241d16;
  --row-border: #2b231c;
  --bull: #4ade80;
  --bear: #ff6b5e;
  --accent-2: #ef4444;
  --on-accent: #090706;
  --on-flat: #090706;
  --glass: rgba(25,20,15,0.76);
  --ground: #0e0b09;
  --tile-art: linear-gradient(125deg, #1f1c1a 0%, #0e0b09 50%, #302e2d 100%);
  --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);
}
}
:root[data-skin="jjk"], .sk-tile[data-skin="jjk"], .sk-tile[data-skin="jjk"][data-theme="light"] {
  --bg: #e8ecf7;
  --panel: #ffffff;
  --panel2: #f1f3fa;
  --line: #cbd5ea;
  --text: #0f1733;
  --muted: #555e7f;
  --accent: #0c4a6e;
  --green: #007945;
  --red: #c9224f;
  --amber: #905e08;
  --blue: #4338ca;
  --hover: #f4f7f8;
  --rowline: #e5eaf4;
  --line2: #b8c2d9;
  --dim: #646a7f;
  --track: #d9e0f0;
  --grid: #dbe2f0;
  --zero: #abb5cd;
  --hl: #929cb7;
  --tip-bg: #ffffff;
  --mapbg: #dbe2f1;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(15,23,51,0.13);
  --border: #cbd5ea;
  --accent-soft: #e4ebef;
  --thead: #f1f3fa;
  --row-border: #e5eaf4;
  --bull: #007945;
  --bear: #c9224f;
  --accent-2: #7c3aed;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.76);
  --ground: #e8ecf7;
  --tile-art: linear-gradient(125deg, #9ed8f7 0%, #e8ecf7 50%, #c5b3f4 100%);
  --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);
}
:root[data-skin="jjk"][data-theme="dark"], .sk-tile[data-skin="jjk"][data-theme="dark"] {
  --bg: #03050e;
  --panel: #0a0f22;
  --panel2: #10172f;
  --line: #1f2a4d;
  --text: #e6ecff;
  --muted: #8f9ac0;
  --accent: #bae6fd;
  --green: #4ade80;
  --red: #fb7185;
  --amber: #fcd34d;
  --blue: #c4b5fd;
  --hover: #1a2236;
  --rowline: #141c38;
  --line2: #2d385c;
  --dim: #848dae;
  --track: #151e39;
  --grid: #1a2342;
  --zero: #394469;
  --hl: #4b567b;
  --tip-bg: #070b1a;
  --mapbg: #070b18;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #1f2a4d;
  --accent-soft: #273246;
  --thead: #10172f;
  --row-border: #141c38;
  --bull: #4ade80;
  --bear: #fb7185;
  --accent-2: #a855f7;
  --on-accent: #020309;
  --on-flat: #020309;
  --glass: rgba(10,15,34,0.7);
  --ground: #03050e;
  --tile-art: linear-gradient(125deg, #1f6588 0%, #03050e 50%, #3d1e79 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="jjk"]:not([data-theme="light"]) {
  --bg: #03050e;
  --panel: #0a0f22;
  --panel2: #10172f;
  --line: #1f2a4d;
  --text: #e6ecff;
  --muted: #8f9ac0;
  --accent: #bae6fd;
  --green: #4ade80;
  --red: #fb7185;
  --amber: #fcd34d;
  --blue: #c4b5fd;
  --hover: #1a2236;
  --rowline: #141c38;
  --line2: #2d385c;
  --dim: #848dae;
  --track: #151e39;
  --grid: #1a2342;
  --zero: #394469;
  --hl: #4b567b;
  --tip-bg: #070b1a;
  --mapbg: #070b18;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #1f2a4d;
  --accent-soft: #273246;
  --thead: #10172f;
  --row-border: #141c38;
  --bull: #4ade80;
  --bear: #fb7185;
  --accent-2: #a855f7;
  --on-accent: #020309;
  --on-flat: #020309;
  --glass: rgba(10,15,34,0.7);
  --ground: #03050e;
  --tile-art: linear-gradient(125deg, #1f6588 0%, #03050e 50%, #3d1e79 100%);
  --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);
}
}
:root[data-skin="demonslayer"], .sk-tile[data-skin="demonslayer"], .sk-tile[data-skin="demonslayer"][data-theme="light"] {
  --bg: #e9f1ec;
  --panel: #ffffff;
  --panel2: #f1f6f3;
  --line: #c6dccd;
  --text: #10231b;
  --muted: #4b645b;
  --accent: #86198f;
  --green: #017b42;
  --red: #ca2841;
  --amber: #946000;
  --blue: #2563c9;
  --hover: #faf5fa;
  --rowline: #e2eee6;
  --line2: #b3c9bb;
  --dim: #5e6f68;
  --track: #d6e6db;
  --grid: #d7e7dc;
  --zero: #a5bcae;
  --hl: #8ba397;
  --tip-bg: #ffffff;
  --mapbg: #dae8de;
  --violet: #6d4fe0;
  --cyan: #0d8fa8;
  --shadow: 0 10px 26px rgba(16,35,27,0.13);
  --border: #c6dccd;
  --accent-soft: #f3e8f4;
  --thead: #f1f6f3;
  --row-border: #e2eee6;
  --bull: #017b42;
  --bear: #ca2841;
  --accent-2: #0ea5e9;
  --on-accent: #ffffff;
  --on-flat: #ffffff;
  --glass: rgba(255,255,255,0.78);
  --ground: #e9f1ec;
  --tile-art: linear-gradient(125deg, #bec8c2 0%, #e9f1ec 50%, #9ad6eb 100%);
  --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);
}
:root[data-skin="demonslayer"][data-theme="dark"], .sk-tile[data-skin="demonslayer"][data-theme="dark"] {
  --bg: #06100b;
  --panel: #0d1a12;
  --panel2: #13251b;
  --line: #22402f;
  --text: #eaf6ee;
  --muted: #93b3a1;
  --accent: #e879f9;
  --green: #3ee89a;
  --red: #ff6b7d;
  --amber: #f5c04b;
  --blue: #93b4ff;
  --hover: #212327;
  --rowline: #182d20;
  --line2: #314f3e;
  --dim: #7a9485;
  --track: #182e22;
  --grid: #1d3627;
  --zero: #3d5c4a;
  --hl: #4f6e5c;
  --tip-bg: #0a160f;
  --mapbg: #0a1710;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #22402f;
  --accent-soft: #392d40;
  --thead: #13251b;
  --row-border: #182d20;
  --bull: #3ee89a;
  --bear: #ff6b7d;
  --accent-2: #38bdf8;
  --on-accent: #040a07;
  --on-flat: #040a07;
  --glass: rgba(13,26,18,0.72);
  --ground: #06100b;
  --tile-art: linear-gradient(125deg, #0b3c1e 0%, #06100b 50%, #1b596f 100%);
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="demonslayer"]:not([data-theme="light"]) {
  --bg: #06100b;
  --panel: #0d1a12;
  --panel2: #13251b;
  --line: #22402f;
  --text: #eaf6ee;
  --muted: #93b3a1;
  --accent: #e879f9;
  --green: #3ee89a;
  --red: #ff6b7d;
  --amber: #f5c04b;
  --blue: #93b4ff;
  --hover: #212327;
  --rowline: #182d20;
  --line2: #314f3e;
  --dim: #7a9485;
  --track: #182e22;
  --grid: #1d3627;
  --zero: #3d5c4a;
  --hl: #4f6e5c;
  --tip-bg: #0a160f;
  --mapbg: #0a1710;
  --violet: #a78bfa;
  --cyan: #22d3ee;
  --shadow: 0 8px 22px rgba(0,0,0,.6);
  --border: #22402f;
  --accent-soft: #392d40;
  --thead: #13251b;
  --row-border: #182d20;
  --bull: #3ee89a;
  --bear: #ff6b7d;
  --accent-2: #38bdf8;
  --on-accent: #040a07;
  --on-flat: #040a07;
  --glass: rgba(13,26,18,0.72);
  --ground: #06100b;
  --tile-art: linear-gradient(125deg, #0b3c1e 0%, #06100b 50%, #1b596f 100%);
  --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);
}
}

/* ───────────── 2. shared decor (skins/skins.base.css) ───────────── */
/* ───────────── 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 */
/* ink on accent fills — generated from this site's own stylesheets */
/* (none beyond the shared rules) */
/* 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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="synthwave"]:not([data-theme="light"]) {
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="matrix"]:not([data-theme="light"]) {
  --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"]) .rb-n { font-family: var(--sans-site); 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); }
@media (prefers-color-scheme: dark) {
  :where(:root[data-skin="matrix"]:not([data-theme="light"])) .page-header h1 { color: var(--accent-2); }
}
:root[data-skin="matrix"][data-theme="dark"] #skin-fx > canvas { display: block; opacity: .9; }
@media (prefers-color-scheme: dark) {
  :root[data-skin="matrix"]:not([data-theme="light"]) #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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="matrix"]:not([data-theme="light"]) 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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="aurora"]:not([data-theme="light"]) {
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="acid"]:not([data-theme="light"]) {
  --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));
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="prism"]:not([data-theme="light"]) {
  --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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="cyberpunk"]:not([data-theme="light"]) {
  --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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="kaleidoscope"]:not([data-theme="light"]) {
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="abyss"]:not([data-theme="light"]) {
  --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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="noir"]:not([data-theme="light"]) {
  --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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="noir"]:not([data-theme="light"]) #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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="nebula"]:not([data-theme="light"]) {
  --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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="nebula"]:not([data-theme="light"]) #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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="hypno"]:not([data-theme="light"]) {
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="lava"]:not([data-theme="light"]) {
  --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;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="spiderman"]:not([data-theme="light"]) {
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="batman"]:not([data-theme="light"]) {
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="sololeveling"]:not([data-theme="light"]) {
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="aot"]:not([data-theme="light"]) {
  --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%);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="jjk"]:not([data-theme="light"]) {
  --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);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="demonslayer"]:not([data-theme="light"]) {
  --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; }
  @media (prefers-color-scheme: dark) {
    :where(:root[data-skin="cyberpunk"]:not([data-theme="light"])) .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); }
@media (prefers-color-scheme: dark) {
  :root[data-skin]:not([data-theme="light"]) #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; }

/* ───────────── 3. this site's chrome (skins/siblings.base.css) ───────────── */
/* ═══════════════════════════════════════════════════════════════════════════════════════
   SIBLING CHROME — the Cockpit's skins on Bonds & Credit and the Nation Tracker (2026-09-30).

   Hand-written. skins/build_sibling_skins.py appends this to each sibling's generated
   web/skins.css, after the tokens and the shared decor taken from skins/skins.base.css.
   A section between a site marker and the end marker (see the bottom of this file) goes to
   that site only; everything else goes to both.

   Every rule here is keyed on :root[data-skin] and so is inert on Classic, except the skin
   button, which is the picker's own styling. Rules keyed on [data-theme="dark"] are written
   once: the generator adds the prefers-color-scheme twin the siblings need, because their
   Auto mode leaves data-theme off and lets the OS decide. :where() keeps a rule at the
   specificity of the site's own selector, so this file wins a tie by loading later while a
   more specific rule of the site still beats it.

   THE LINE: the chrome (sticky header, the main frame, footer) is glass over the backdrop;
   cards, tables, charts and the map stay flat, opaque panels.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
/* the page keeps the site's own type: the shared decor would swap in the Cockpit's stack */
:where(:root[data-skin]) body { font-family: var(--sans); }
/* Matrix sets the page in the mono stack, except the header's top row: its items fill that row
   almost exactly on Classic, and a wider face would push them onto a second line.
   --sans-site is this site's own --sans, kept by the generator in the alias block. */
:root[data-skin="matrix"] { --sans: var(--mono); }
:where(:root[data-skin="matrix"]) .hrow { font-family: var(--sans-site); --sans: var(--sans-site); }
/* chrome = glass. The header is sticky, so it also frosts whatever scrolls under it. */
:where(:root[data-skin]) header {
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: var(--skin-shadow, none);
}
:where(:root[data-skin]) main, :where(:root[data-skin]) footer { background: var(--glass); }
/* the data surfaces carry the Cockpit's table glow, never the backdrop */
:where(:root[data-skin]) :is(.card, .kpi, .verdict) { box-shadow: var(--skin-table-shadow, none); }
/* the brand line is the page title, so it takes the skin's title treatment; its subtitle stays muted.
   Every treatment keeps the brand's width (no case, tracking or weight change; padding is paid back
   with negative margins), because the header row has almost no spare width on Classic. */
:where(:root[data-skin]) .brand {
  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);
}
:where(:root[data-skin]) .brand small {
  -webkit-text-fill-color: var(--muted);
  font-style: normal;
}
:where(:root[data-skin="synthwave"]) .brand { font-style: italic; }
:where(:root[data-skin="matrix"]) .brand { color: var(--accent); font-family: var(--mono); }
:where(:root[data-skin="matrix"][data-theme="dark"]) .brand { color: var(--accent-2); }
@media (prefers-color-scheme: dark) {
  :where(:root[data-skin="matrix"]:not([data-theme="light"])) .brand { color: var(--accent-2); }
}
:where(:root[data-skin="matrix"]) .brand small { font-family: var(--sans-site); }
/* the brand dot becomes a blinking block cursor */
:where(:root[data-skin="matrix"]) .brand :is(.dot, .flag) {
  width: 8px; height: 13px; margin-right: 1px; border-radius: 1px; background: currentColor;
  animation: sk-blink 1.15s steps(1) infinite;
}
:where(:root[data-skin="acid"]) .brand { background-size: 300% 100%; animation: sk-hue 16s linear infinite; }
/* noir / hypno: no brand type change here — the Nation Tracker's header fits exactly at 434–446, 884 and 1406px,
   and a serif or a 900 weight with tracking cost a row there (header_sweep, 2026-10-02) */
:where(:root[data-skin="cyberpunk"]) .brand {
  background: #0a0a0c; -webkit-text-fill-color: #fcee0a; color: #fcee0a;
  padding: 1px 13px 1px 7px; margin: -1px -13px -1px -7px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  animation: sk-glitch 7s steps(1) infinite;
}
:where(:root[data-skin="cyberpunk"]) .brand small { -webkit-text-fill-color: #d9d4a3; }
:where(:root[data-skin="cyberpunk"][data-theme="dark"]) .brand { background: #fcee0a; -webkit-text-fill-color: #0a0a0c; color: #0a0a0c; }
@media (prefers-color-scheme: dark) {
  :where(:root[data-skin="cyberpunk"]:not([data-theme="light"])) .brand { background: #fcee0a; -webkit-text-fill-color: #0a0a0c; color: #0a0a0c; }
}
:where(:root[data-skin="cyberpunk"][data-theme="dark"]) .brand small { -webkit-text-fill-color: #45420a; }
@media (prefers-color-scheme: dark) {
  :where(:root[data-skin="cyberpunk"]:not([data-theme="light"])) .brand small { -webkit-text-fill-color: #45420a; }
}
/* cyberpunk marks the chrome's edge the way the Cockpit marks its nav bar and panel */
:where(:root[data-skin="cyberpunk"]) header { box-shadow: var(--skin-shadow, none), inset 0 -2px 0 var(--accent-2); }
/* motion is opt-out, as in the shared decor */
:root[data-skin-motion="off"] .brand, :root[data-skin-motion="off"] .brand :is(.dot, .flag) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin] .brand, :root[data-skin] .brand :is(.dot, .flag) { animation: none !important; }
}
/* ───────────── the skin button (picker styling: applies on Classic too) ─────────────
   It wears the site's .themebtn, so the two read as one pair of controls. It shows the icon only:
   these header rows wrap and have little spare width (the Nation Tracker's has ~38px at 1440px,
   and that moves with the text in its badges), so the button is kept to 24px and sits 4px from
   the theme button (per-site margin below). The name stays in the button for screen readers (and
   in Bonds' tooltip); a wide word gap pushes it past the fixed width, which clips it.
   line-height is fixed so the emoji font cannot make the button taller than the theme button
   (21px), which would grow the header row. */
#skin-btn {
  display: flex; align-items: center; justify-content: flex-start; flex: 0 0 auto;
  width: 24px; overflow: hidden; word-spacing: 40px;
  background: var(--panel2); color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: 11px; font-family: var(--mono); line-height: 13px; padding: 3px 0 3px 4px;
}
#skin-btn:hover { color: var(--text); border-color: var(--line2); }
#skin-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
/* shape — only the skins that set --r-* change a radius (the shared decor already shapes .chip and .dsw a) */
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) :is(.card, .kpi, .verdict, .wrap, .tw, .basisbar, .etf, .sr, .ctip, .err) { border-radius: var(--r-box); }
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) :is(#map, #tip) { border-radius: var(--r-box); }
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) :is(.themebtn, .countrysel, button.more, .search input) { border-radius: var(--r-ctl); }
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) :is(select, input[type="text"], input[type="number"], input[type="search"]) { border-radius: var(--r-ctl); }
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) #skin-btn { border-radius: var(--r-ctl); }
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) :is(.badge, .pill) { border-radius: var(--r-pill); }
/* THE SKIN BUTTON NEVER ADDS A HEADER ROW (fixed 2026-09-30, found on the live Nation Tracker:
   at 1440px the button missed fitting by under a pixel, dropped to a row of its own and made the
   header 27px taller — on Classic too). Three parts, per site:
   - the button is 24px and sits 4px from the theme button, 28px in all;
   - it travels WITH the theme button: that button reserves the 28px to its right and the skin
     button sits inside the reservation (its negative margin cancels its own width and the row's
     gap), so the pair wraps as one item and the skin button is never left on a row by itself;
   - one element of the row may give that much rather than let the pair wrap: its flex-basis is
     set below its natural width and it grows straight back to that width whenever the row has
     room (grow 1000 against the spacer's 1, capped by max-width) — with room to spare nothing
     changes, and when the row is tight that element is a little narrower instead of the header
     gaining a row. */
.themebtn { margin-right: 28px; }
#skin-btn { margin-left: -38px; }
/* -(the row's 14px gap + 24px) */
#srcBadge { flex: 1000 1 320px; max-width: max-content; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* on a phone Matrix sets the brand in the site's own face: monospace made it 19px wider, enough to wrap the row */
@media (max-width: 700px) {
  :where(:root[data-skin="matrix"]) .brand { font-family: var(--sans-site); }
}
/* the map frame and its controls follow the skin's shape; the basemap itself is the map's own */
:where(:root:is([data-skin="matrix"], [data-skin="acid"], [data-skin="cyberpunk"], [data-skin="noir"], [data-skin="lava"])) .maplibregl-ctrl-group { border-radius: var(--r-box) !important; }