/* Layout: one screen. The wallpaper canvas sits at the back, the icon grid and windows above it, the taskbar pinned
   to the bottom. A skin swaps the window chrome tokens below; the wallpaper is drawn separately, so they can mix.
   Each skin commits to its own look, so the viewer's light/dark setting doesn't apply here. */
:root, [data-skin="xp"] {
  color-scheme: light;
  --ui-font: Tahoma, Verdana, "Segoe UI", sans-serif;
  --ui-size: 13px;
  --small-size: 12px;
  --mono-font: "Lucida Console", Consolas, Menlo, monospace;
  --mono-size: 13px;
  --title-font: "Trebuchet MS", Tahoma, Verdana, sans-serif;
  --title-size: 13px;
  --start-font: italic 700 19px/1 "Trebuchet MS", Tahoma, sans-serif;
  --start-case: none;
  --title-bg: linear-gradient(180deg, #0a61ff 0%, #0453ec 12%, #0058ee 45%, #0b6bff 88%, #0048d0 100%);
  --title-bg-off: linear-gradient(180deg, #a3bcf3 0%, #7c9ee6 50%, #8eabea 100%);
  --title-fg: #ffffff;
  --title-fg-off: #e0e8fb;
  --title-shadow: 1px 1px 0 #0a1a6e;
  --frame: #0846d6;
  --frame-off: #7f9ee9;
  --frame-w: 3px;
  --radius: 8px;
  --win-shadow: 2px 4px 14px rgba(0, 0, 0, 0.4);
  --body-bg: #ece9d8;
  --body-fg: #111111;
  --muted: #5b5a52;
  --panel: #ffffff;
  --panel-fg: #111111;
  --line: #aca899;
  --face: linear-gradient(180deg, #ffffff 0%, #f1efe4 70%, #dcd7c3 100%);
  --face-fg: #111111;
  --face-border: #003c74;
  --sel: #316ac5;
  --sel-fg: #ffffff;
  --link: #0645ad;
  --accent: #e2541c;
  --ok: #2e8b3a;
  --ctl-bg: linear-gradient(180deg, #4c94ff, #1462f0);
  --ctl-fg: #ffffff;
  --ctl-border: #ffffff;
  --close-bg: linear-gradient(180deg, #ec8a6c, #d03c12);
  --close-fg: #ffffff;
  --ctl-radius: 4px;
  --taskbar-bg: linear-gradient(180deg, #3d84f5 0%, #2462dd 8%, #2459d6 55%, #1c48b4 100%);
  --taskbar-fg: #ffffff;
  --task-btn-bg: linear-gradient(180deg, #4592fb, #2268e6);
  --task-btn-on: linear-gradient(180deg, #1c4fb8, #1a45a8);
  --start-bg: linear-gradient(180deg, #5cc25c 0%, #3e9e3e 45%, #2f8a2f 100%);
  --start-fg: #ffffff;
  --tray-bg: linear-gradient(180deg, #16a7f5, #0c86e0);
  --tray-border: #0b5bb7;
  --menu-head: linear-gradient(180deg, #2a72ea 0%, #3d8bf5 30%, #1c5fd4 100%);
  --menu-head-fg: #ffffff;
  --menu-left: #ffffff;
  --menu-fg: #111111;
  --menu-right: #d3e5fa;
  --menu-right-fg: #0a246a;
  --menu-line: #95bdee;
  --menu-foot: linear-gradient(180deg, #4387f0, #1d55c6);
  --menu-hover: #316ac5;
  --menu-hover-fg: #ffffff;
  --icon-fg: #ffffff;
  --icon-size: 12px;
  --icon-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  --icon-sel: rgba(49, 106, 197, 0.85);
  --field-bg: #ffffff;
  --field-fg: #111111;
  --field-border: #7f9db9;
  --pane-bg: linear-gradient(180deg, #7ba2e7, #6375d6);
  --pane-box: #d6dff7;
  --pane-head: linear-gradient(90deg, #ffffff, #c6d3f7);
  --pane-head-fg: #215dc6;
  --tip-bg: #ffffe1;
  --tip-fg: #111111;
  --tip-border: #111111;
  --im-me: #1b3fc7;
  --im-them: #c4161c;
  --wel-band: #00309c;
  --wel-mid: radial-gradient(ellipse at 30% 40%, #8aa8f0 0%, #5a7edc 55%, #4a6fd0 100%);
  --wel-fg: #ffffff;
  --wel-line-top: linear-gradient(90deg, transparent, #ffffff, transparent);
  --wel-line-bot: linear-gradient(90deg, transparent, #f89a3a, transparent);
  --to-mid: linear-gradient(180deg, #e3eafb, #c1d2f3);
  --to-fg: #111111;
}
:root {
  --ink: #050608;
  --tb-h: 38px;
  --web-bg: #ffffff;
  --web-fg: #000000;
  --boot-fg: #ffffff;
  --boot-dim: #9a9a9a;
  --boot-accent: #f26b2a;
  --amp-bg: linear-gradient(180deg, #3a3a4e, #22222e);
  --amp-lcd: #000000;
  --amp-green: #00e64d;
  --amp-dim: #0f8a36;
  --amp-line: #57576e;
  --amp-btn: linear-gradient(180deg, #6e6e86, #3d3d50);
  --amp-btn-fg: #e8e8f0;
  --amp-pick: #0000c6;
  --amp-pick-fg: #ffffff;
  --mine-face: #c0c0c0;
  --mine-light: #ffffff;
  --mine-dark: #808080;
  --mine-boom: #ff2a1a;
  --led-bg: #000000;
  --led-fg: #ff2a1a;
  --smiley: #ffde00;
  --shut-fg: #ff9a1f;
  --graph-bg: #000000;
  --graph-grid: #008040;
  --graph-cpu: #00ff00;
  --graph-mem: #ffff00;
}
[data-skin="space"] {
  color-scheme: dark;
  --ui-font: "Segoe UI", Tahoma, Verdana, sans-serif;
  --ui-size: 13px;
  --small-size: 12px;
  --mono-font: "Lucida Console", Menlo, monospace;
  --mono-size: 13px;
  --title-font: "Orbitron", "Trebuchet MS", sans-serif;
  --title-size: 12px;
  --start-font: 700 13px/1 "Orbitron", "Trebuchet MS", sans-serif;
  --start-case: uppercase;
  --title-bg: linear-gradient(90deg, #2a1b5e 0%, #3d2a90 55%, #1b4a7a 100%);
  --title-bg-off: linear-gradient(90deg, #1a1838, #1c2340);
  --title-fg: #c7ecff;
  --title-fg-off: #6f7aa3;
  --title-shadow: 0 0 8px rgba(110, 200, 255, 0.55);
  --frame: #5b6cf0;
  --frame-off: #2c3263;
  --frame-w: 1px;
  --radius: 12px;
  --win-shadow: 0 0 0 1px rgba(120, 140, 255, 0.18), 0 14px 40px rgba(10, 5, 40, 0.75), 0 0 28px rgba(90, 120, 255, 0.22);
  --body-bg: #0f1230;
  --body-fg: #dbe2ff;
  --muted: #8e97c7;
  --panel: #141938;
  --panel-fg: #e6ebff;
  --line: #2d356e;
  --face: linear-gradient(180deg, #2a3373, #1c2252);
  --face-fg: #e6ebff;
  --face-border: #5361c9;
  --sel: #6a4be0;
  --sel-fg: #ffffff;
  --link: #7fd4ff;
  --accent: #ff8a3d;
  --ok: #3ad6a0;
  --ctl-bg: rgba(255, 255, 255, 0.04);
  --ctl-fg: #c7ecff;
  --ctl-border: rgba(199, 236, 255, 0.45);
  --close-bg: linear-gradient(180deg, #ff6f8f, #c4265a);
  --close-fg: #ffffff;
  --ctl-radius: 50%;
  --taskbar-bg: linear-gradient(180deg, rgba(22, 18, 58, 0.94), rgba(8, 8, 26, 0.97));
  --taskbar-fg: #dbe2ff;
  --task-btn-bg: rgba(110, 125, 255, 0.16);
  --task-btn-on: rgba(130, 95, 255, 0.45);
  --start-bg: radial-gradient(circle at 30% 30%, #ffc07a, #e2541c 55%, #5e1a46);
  --start-fg: #ffffff;
  --tray-bg: rgba(255, 255, 255, 0.05);
  --tray-border: rgba(120, 140, 255, 0.3);
  --menu-head: linear-gradient(90deg, #2a1b5e, #1b4a7a);
  --menu-head-fg: #ffffff;
  --menu-left: #10143a;
  --menu-fg: #e6ebff;
  --menu-right: #181e4c;
  --menu-right-fg: #c7ecff;
  --menu-line: #2d356e;
  --menu-foot: linear-gradient(90deg, #1b4a7a, #2a1b5e);
  --menu-hover: #6a4be0;
  --menu-hover-fg: #ffffff;
  --icon-fg: #eef1ff;
  --icon-size: 12px;
  --icon-shadow: 0 0 6px rgba(0, 0, 0, 0.95);
  --icon-sel: rgba(106, 75, 224, 0.7);
  --field-bg: #0a0d26;
  --field-fg: #e6ebff;
  --field-border: #3d4794;
  --pane-bg: linear-gradient(180deg, #181d4a, #0f1230);
  --pane-box: #141938;
  --pane-head: linear-gradient(90deg, #2a3070, #1b2152);
  --pane-head-fg: #9fdcff;
  --tip-bg: #141938;
  --tip-fg: #e6ebff;
  --tip-border: #5b6cf0;
  --im-me: #7fd4ff;
  --im-them: #ff8ab0;
  --wel-band: #07061a;
  --wel-mid: radial-gradient(ellipse at 30% 40%, #33287a 0%, #17134a 55%, #0b0a26 100%);
  --wel-fg: #e6ebff;
  --wel-line-top: linear-gradient(90deg, transparent, #7fd4ff, transparent);
  --wel-line-bot: linear-gradient(90deg, transparent, #ff8a3d, transparent);
  --to-mid: #141938;
  --to-fg: #e6ebff;
}
[data-skin="matrix"] {
  color-scheme: dark;
  --ui-font: "VT323", "Lucida Console", monospace;
  --ui-size: 18px;
  --small-size: 17px;
  --mono-font: "VT323", "Lucida Console", monospace;
  --mono-size: 19px;
  --title-font: "VT323", "Lucida Console", monospace;
  --title-size: 19px;
  --start-font: 400 21px/1 "VT323", "Lucida Console", monospace;
  --start-case: none;
  --title-bg: linear-gradient(90deg, #003314, #001a0a);
  --title-bg-off: #000d05;
  --title-fg: #46ff78;
  --title-fg-off: #1d7a37;
  --title-shadow: 0 0 6px rgba(70, 255, 120, 0.65);
  --frame: #22d455;
  --frame-off: #145c2a;
  --frame-w: 1px;
  --radius: 0px;
  --win-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 22px rgba(0, 255, 65, 0.16);
  --body-bg: #000a03;
  --body-fg: #46ff78;
  --muted: #23a84c;
  --panel: #000000;
  --panel-fg: #46ff78;
  --line: #145c2a;
  --face: #001a08;
  --face-fg: #46ff78;
  --face-border: #22d455;
  --sel: #46ff78;
  --sel-fg: #000000;
  --link: #b6ffca;
  --accent: #d7ff5a;
  --ok: #46ff78;
  --ctl-bg: transparent;
  --ctl-fg: #46ff78;
  --ctl-border: #22d455;
  --close-bg: transparent;
  --close-fg: #46ff78;
  --ctl-radius: 0px;
  --taskbar-bg: #000000;
  --taskbar-fg: #46ff78;
  --task-btn-bg: #001a08;
  --task-btn-on: #003d14;
  --start-bg: #001a08;
  --start-fg: #46ff78;
  --tray-bg: #000000;
  --tray-border: #145c2a;
  --menu-head: #002b10;
  --menu-head-fg: #46ff78;
  --menu-left: #000000;
  --menu-fg: #46ff78;
  --menu-right: #000d05;
  --menu-right-fg: #b6ffca;
  --menu-line: #145c2a;
  --menu-foot: #002b10;
  --menu-hover: #46ff78;
  --menu-hover-fg: #000000;
  --icon-fg: #46ff78;
  --icon-size: 17px;
  --icon-shadow: 0 0 4px #000000, 0 0 4px #000000;
  --icon-sel: rgba(70, 255, 120, 0.28);
  --field-bg: #000000;
  --field-fg: #46ff78;
  --field-border: #22d455;
  --pane-bg: #000d05;
  --pane-box: #000000;
  --pane-head: #002b10;
  --pane-head-fg: #46ff78;
  --tip-bg: #000000;
  --tip-fg: #46ff78;
  --tip-border: #22d455;
  --im-me: #b6ffca;
  --im-them: #46ff78;
  --wel-band: #000000;
  --wel-mid: radial-gradient(ellipse at 30% 40%, #00330f 0%, #001a08 60%, #000000 100%);
  --wel-fg: #46ff78;
  --wel-line-top: linear-gradient(90deg, transparent, #46ff78, transparent);
  --wel-line-bot: linear-gradient(90deg, transparent, #22d455, transparent);
  --to-mid: #000d05;
  --to-fg: #46ff78;
}
[data-skin="trail"] {
  color-scheme: light;
  --ui-font: Verdana, Tahoma, "Segoe UI", sans-serif;
  --ui-size: 13px;
  --small-size: 12px;
  --mono-font: "Courier New", Courier, monospace;
  --mono-size: 14px;
  --title-font: "Zilla Slab", Georgia, serif;
  --title-size: 15px;
  --start-font: 700 17px/1 "Zilla Slab", Georgia, serif;
  --start-case: none;
  --title-bg: linear-gradient(180deg, #7d5230 0%, #5e3a1d 100%);
  --title-bg-off: linear-gradient(180deg, #ab8f70, #917558);
  --title-fg: #fbf3df;
  --title-fg-off: #f1e6cd;
  --title-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
  --frame: #4e3017;
  --frame-off: #917558;
  --frame-w: 3px;
  --radius: 6px;
  --win-shadow: 0 6px 18px rgba(40, 25, 10, 0.5);
  --body-bg: #ede1c3;
  --body-fg: #2a2116;
  --muted: #6b5a40;
  --panel: #fbf6e8;
  --panel-fg: #2a2116;
  --line: #c6ae84;
  --face: linear-gradient(180deg, #fbf6e8, #e4d3ad);
  --face-fg: #2a2116;
  --face-border: #7a5a36;
  --sel: #2f5d3a;
  --sel-fg: #fbf6e8;
  --link: #2f5d3a;
  --accent: #c4541c;
  --ok: #2f7d3a;
  --ctl-bg: linear-gradient(180deg, #f6ecd2, #dccaa0);
  --ctl-fg: #5e3a1d;
  --ctl-border: #3e2611;
  --close-bg: linear-gradient(180deg, #e0773c, #b0460f);
  --close-fg: #fff8ec;
  --ctl-radius: 50%;
  --taskbar-bg: linear-gradient(180deg, #3b6a42 0%, #2a5232 50%, #1d3d24 100%);
  --taskbar-fg: #f6eedb;
  --task-btn-bg: rgba(255, 255, 255, 0.12);
  --task-btn-on: rgba(0, 0, 0, 0.3);
  --start-bg: linear-gradient(180deg, #e0773c, #b0460f);
  --start-fg: #fff8ec;
  --tray-bg: rgba(0, 0, 0, 0.2);
  --tray-border: rgba(255, 255, 255, 0.15);
  --menu-head: linear-gradient(180deg, #3b6a42, #26472c);
  --menu-head-fg: #fbf3df;
  --menu-left: #fbf6e8;
  --menu-fg: #2a2116;
  --menu-right: #eadcb8;
  --menu-right-fg: #2f5d3a;
  --menu-line: #c6ae84;
  --menu-foot: linear-gradient(180deg, #26472c, #1a3320);
  --menu-hover: #2f5d3a;
  --menu-hover-fg: #fbf6e8;
  --icon-fg: #fffaf0;
  --icon-size: 13px;
  --icon-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  --icon-sel: rgba(47, 93, 58, 0.8);
  --field-bg: #fffdf6;
  --field-fg: #2a2116;
  --field-border: #a8895c;
  --pane-bg: linear-gradient(180deg, #d8c79f, #c4ad80);
  --pane-box: #f6eedb;
  --pane-head: linear-gradient(90deg, #fbf6e8, #e4d3ad);
  --pane-head-fg: #2f5d3a;
  --tip-bg: #fbf6e8;
  --tip-fg: #2a2116;
  --tip-border: #7a5a36;
  --im-me: #2f5d3a;
  --im-them: #a8420f;
  --wel-band: #1d3d24;
  --wel-mid: radial-gradient(ellipse at 30% 40%, #6d9a63 0%, #3b6a42 55%, #26472c 100%);
  --wel-fg: #fbf3df;
  --wel-line-top: linear-gradient(90deg, transparent, #fbf3df, transparent);
  --wel-line-bot: linear-gradient(90deg, transparent, #e0773c, transparent);
  --to-mid: #ede1c3;
  --to-fg: #2a2116;
}