:root {
  --c-rgba-106-25-76-0p45: rgba(106, 25, 76, 0.45);
  --c-rgba-255-220-241-0p35: rgba(255, 220, 241, 0.35);
  --c-rgba-70-25-52-0p65: rgba(70, 25, 52, 0.65);
  --c-rgba-255-255-255-0p16: rgba(255, 255, 255, 0.16);
  --c-rgba-255-255-255-0p28: rgba(255, 255, 255, 0.28);
  --c-rgba-115-185-255-0p34: rgba(115, 185, 255, 0.34);
  --c-rgba-255-255-255-0p95: rgba(255, 255, 255, 0.95);
  --c-rgba-94-20-64-0p45: rgba(94, 20, 64, 0.45);
  --c-rgba-255-233-247-0p85: rgba(255, 233, 247, 0.85);
  --c-rgba-163-69-122-0p8: rgba(163, 69, 122, 0.8);
  --c-rgba-255-207-232-0p48: rgba(255, 207, 232, 0.48);
  --c-rgba-90-27-59-0p42: rgba(90, 27, 59, 0.42);
  --c-rgba-94-20-64-0p55: rgba(94, 20, 64, 0.55);
  --c-rgba-112-34-82-0p32: rgba(112, 34, 82, 0.32);
  --c-rgba-130-200-255-0p22: rgba(130, 200, 255, 0.22);
  --c-rgba-110-41-78-0p35: rgba(110, 41, 78, 0.35);
  --c-rgba-255-120-182-0p4: rgba(255, 120, 182, 0.4);

  --c-ffdff1: #ffdff1;
  --c-ffc5e6: #ffc5e6;
  --c-f6a8d4: #f6a8d4;
  --c-fff7fc: #fff7fc;
  --c-e7a8ca: #e7a8ca;
  --c-ff9acb: #ff9acb;
  --c-f07cb6: #f07cb6;
  --c-c65b93: #c65b93;
  --c-ffb3d9: #ffb3d9;
  --c-ef8dc1: #ef8dc1;
  --c-4b1c39: #4b1c39;
  --c-fff: #fff;
  --c-ffeef8: #ffeef8;
  --c-e8a8cc: #e8a8cc;
  --c-4c1431: #4c1431;
  --c-fff5fb: #fff5fb;
  --c-8f3e6b: #8f3e6b;
  --c-fff4fb: #fff4fb;
  --c-efb7d6: #efb7d6;
  --c-dc95be: #dc95be;
  --c-f2bbd9: #f2bbd9;
  --c-f8d3e9: #f8d3e9;
  --c-ffd4ea: #ffd4ea;
  --c-9f3972: #9f3972;
  --c-ffeaf7: #ffeaf7;
  --c-efb5d5: #efb5d5;
  --c-5a1b3b: #5a1b3b;
  --c-fff6fd: #fff6fd;
  --c-9f4a78: #9f4a78;
  --c-e7a2c8: #e7a2c8;
  --c-f8d4e9: #f8d4e9;
  --c-ffeef9: #ffeef9;
  --c-f6bfdc: #f6bfdc;
  --c-7f2f5a: #7f2f5a;
  --c-fff6fc: #fff6fc;
  --c-efbfd9: #efbfd9;
  --c-ffe7f4: #ffe7f4;
  --c-7d2756: #7d2756;
  --c-7a3a61: #7a3a61;
  --c-d868a8: #d868a8;
  --c-fff3fb: #fff3fb;
  --c-f2c0de: #f2c0de;
  --c-6f2750: #6f2750;
  --c-ffd9ed: #ffd9ed;
  --c-a55282: #a55282;
  --c-ffe8f6: #ffe8f6;
  --c-ffe8f5: #ffe8f5;
  --c-ffd9ee: #ffd9ee;
  --c-e499c2: #e499c2;
  --c-a14f7d: #a14f7d;
  --c-ffe1f1: #ffe1f1;
  --c-b56a95: #b56a95;
  --c-8c3b67: #8c3b67;
  --c-e5b4cf: #e5b4cf;
  --c-fff0f9: #fff0f9;
  --c-5f2244: #5f2244;
  --c-f0c3dc: #f0c3dc;
  --c-d88db8: #d88db8;
  --c-d58cb8: #d58cb8;
  --c-3d1530: #3d1530;
  --c-d24b95: #d24b95;
  --c-8d1f54: #8d1f54;
  --c-b32972: #b32972;
  --c-7f1f54: #7f1f54;
  --c-8d5780: #8d5780;
  --c-f7d9ec: #f7d9ec;
  --c-e9acd0: #e9acd0;
  --c-a25a85: #a25a85;
  --c-bf3f8a: #bf3f8a;
  --c-7e1f54: #7e1f54;
  --c-5f123d: #5f123d;
  --c-8f4a72: #8f4a72;
  --c-220b17: #220b17;
  --c-8dff9e: #8dff9e;
  --c-7b355d: #7b355d;
  --c-fff2fb: #fff2fb;
  --c-efbfdc: #efbfdc;
  --c-fff5fc: #fff5fc;
  --c-8e3f6c: #8e3f6c;
  --c-b78aa4: #b78aa4;
  --c-e2a9cb: #e2a9cb;
  --c-7c2e5b: #7c2e5b;
  --c-ffe9f8: #ffe9f8;
  --c-ffd8ef: #ffd8ef;
  --c-d888b6: #d888b6;
  --c-fff7fd: #fff7fd;
  --c-c26a99: #c26a99;
  --c-ffe9f7: #ffe9f7;
  --c-cc80ab: #cc80ab;
  --c-fff8fd: #fff8fd;
  --c-cf85ad: #cf85ad;
  --c-fff9ff: #fff9ff;
  --c-9e4f79: #9e4f79;
  --c-f0bddc: #f0bddc;
  --c-6a224b: #6a224b;
  --c-eaaed1: #eaaed1;
  --c-f9d8ea: #f9d8ea;
  --c-ca79a8: #ca79a8;
  --c-be6696: #be6696;
  --c-ebb3d2: #ebb3d2;
  --c-7a2754: #7a2754;
  --c-e6a5c8: #e6a5c8;
  --c-f7d0e6: #f7d0e6;
  --c-ff377d: #ff377d;
  --c-2a0014: #2a0014;
  --c-8f4d71: #8f4d71;
  --c-ffe5f4: #ffe5f4;
  --c-cd7ea9: #cd7ea9;
  --c-c26d99: #c26d99;
  --c-ffd9ef: #ffd9ef;
  --c-a54f7d: #a54f7d;
  --c-f2b5d7: #f2b5d7;
  --c-7a2452: #7a2452;
  --c-d58cb4: #d58cb4;
  --c-bd155d: #bd155d;
  --c-ff8fbb: #ff8fbb;
  --c-93345f: #93345f;
  --c-ffe8f2: #ffe8f2;
  --c-cb2b63: #cb2b63;
  --c-c3709e: #c3709e;
  --c-2f5fb9: #2f5fb9;
  --c-2f9150: #2f9150;
  --c-ba3b4f: #ba3b4f;
  --c-5f4ab9: #5f4ab9;
  --c-914e31: #914e31;
  --c-2e8f94: #2e8f94;
  --c-6d6d6d: #6d6d6d;
  --c-2f2f2f: #2f2f2f;
  --c-f3a5cf: #f3a5cf;
  --c-050505: #050505;
  --c-262626: #262626;
  --c-111: #111;
  --c-000: #000;
  --c-e7e7e7: #e7e7e7;
  --c-1e1e1e: #1e1e1e;
  --c-f2f2f2: #f2f2f2;
  --c-333: #333;
  --c-666: #666;

  --pink-sky-1: var(--c-ffdff1);
  --pink-sky-2: var(--c-ffc5e6);
  --pink-sky-3: var(--desktop-fallback);
  --panel: var(--c-fff7fc);
  --line: var(--divider);
  --titlebar-1: var(--c-ff9acb);
  --titlebar-2: var(--c-f07cb6);
  --titlebar-border: var(--c-c65b93);
  --taskbar-1: var(--c-ffb3d9);
  --taskbar-2: var(--c-ef8dc1);

  /* semantic aliases (phase 1) */
  --color-white: var(--c-fff);
  --text-primary: var(--c-6f2750);
  --text-secondary: var(--c-8f3e6b);
  --text-muted: var(--c-7a3a61);
  --text-accent: var(--c-7d2756);

  --surface-soft: var(--c-fff0f9);
  --surface-soft-hover: var(--c-ffe8f5);
  --surface-window: var(--c-fff7fd);
  --surface-window-alt: var(--c-fff6fd);
  --surface-window-soft: var(--c-fff6fc);
  --surface-panel-top: var(--c-fff3fb);
  --surface-panel-bottom: var(--c-f2c0de);

  --border-strong: var(--c-9f4a78);
  --border-accent: var(--c-a54f7d);
  --accent-mid: var(--c-d58cb8);
  --accent-soft: var(--c-e5b4cf);
  --accent-deep: var(--c-8c3b67);

  --overlay-strong: var(--c-rgba-106-25-76-0p45);
  --overlay-soft: var(--c-rgba-255-220-241-0p35);
  --overlay-deep: var(--c-rgba-70-25-52-0p65);
  --glass-line-subtle: var(--c-rgba-255-255-255-0p16);
  --glass-line-strong: var(--c-rgba-255-255-255-0p28);
  --selection-blue: var(--c-rgba-115-185-255-0p34);

  --surface-contrast: var(--c-fff9ff);
  --surface-raised: var(--c-fff5fb);
  --surface-highlight: var(--c-ffd4ea);
  --surface-tooltip: var(--c-fff5fc);
  --border-muted: var(--c-9e4f79);
  --border-hot: var(--c-9f3972);
  --accent-fill: var(--c-f6bfdc);
  --accent-stroke: var(--c-b56a95);
  --divider: var(--c-e7a8ca);

  --overlay-glass: var(--c-rgba-255-255-255-0p95);
  --overlay-shadow: var(--c-rgba-94-20-64-0p45);
  --overlay-card: var(--c-rgba-255-233-247-0p85);
  --overlay-card-border: var(--c-rgba-163-69-122-0p8);

  --desktop-fallback: var(--c-f6a8d4);
  --text-body: var(--c-4b1c39);
  --ink-black: var(--c-000);
  --ui-btn-top: var(--c-ffeef8);
  --ui-btn-bottom: var(--c-e8a8cc);
  --ui-btn-text: var(--c-4c1431);
  --ui-btn-hover-top: var(--c-fff4fb);
  --ui-btn-hover-bottom: var(--c-efb7d6);
  --ui-btn-active-top: var(--c-dc95be);
  --ui-btn-active-bottom: var(--c-f2bbd9);
  --taskbar-top-line: var(--c-f8d3e9);
  --task-btn-top: var(--c-ffeaf7);
  --task-btn-bottom: var(--c-efb5d5);
  --task-btn-active-top: var(--c-e7a2c8);
  --task-btn-active-bottom: var(--c-f8d4e9);
  --taskbar-brand-text: var(--c-ffeef9);
  --clock-bg: var(--c-rgba-255-207-232-0p48);
  --startmenu-border-dark: var(--c-7f2f5a);
  --startmenu-shadow: var(--c-rgba-90-27-59-0p42);
  --title-shadow-strong: var(--c-rgba-94-20-64-0p55);
  --startmenu-divider: var(--c-efbfd9);
  --startmenu-col-right: var(--c-ffe7f4);
  --startmenu-footer-bottom: var(--c-d868a8);
  --window-frame-light: var(--c-ffd9ed);
  --window-frame-dark: var(--c-a55282);
  --window-shadow: var(--c-rgba-112-34-82-0p32);
  --window-title-glyph: var(--c-ffe8f6);
  --winctrl-top: var(--c-ffd9ee);
  --winctrl-bottom: var(--c-e499c2);
  --content-inset-dark: var(--c-a14f7d);
  --content-inset-light: var(--c-ffe1f1);
  --selection-fill: var(--c-rgba-130-200-255-0p22);
  --explorer-hover-soft: var(--c-ffdff1);
  --explorer-item-text: var(--c-5f2244);
  --explorer-item-title: var(--explorer-item-title);
  --explorer-hover-border: var(--c-f0c3dc);
  --explorer-selected-border: var(--explorer-selected-border);
  --editor-text: var(--c-3d1530);
  --control-accent: var(--c-d24b95);
  --ie-error-title: var(--c-8d1f54);
  --link-primary: var(--c-b32972);
  --link-hover: var(--c-7f1f54);
  --link-meta: var(--c-8d5780);
  --audio-shell-top: var(--c-f7d9ec);
  --audio-shell-bottom: var(--c-e9acd0);
  --audio-shell-border: var(--c-a25a85);
  --audio-logo-top: var(--c-bf3f8a);
  --audio-logo-bottom: var(--c-7e1f54);
  --audio-logo-border: var(--c-5f123d);
  --audio-display-border: var(--c-8f4a72);
  --audio-display-bg: var(--c-220b17);
  --audio-display-text: var(--c-8dff9e);
  --audio-btn-border-dark: var(--c-7b355d);
  --audio-btn-top: var(--c-fff2fb);
  --audio-btn-bottom: var(--c-efbfdc);
  --context-border-dark: var(--c-8e3f6c);
  --context-shadow: var(--c-rgba-110-41-78-0p35);
  --context-disabled: var(--c-b78aa4);
  --context-separator: var(--c-e2a9cb);
  --props-title: var(--c-7c2e5b);
  --ms-shell-top: var(--c-ffe9f8);
  --ms-shell-bottom: var(--c-ffd8ef);
  --ms-shell-border: var(--c-d888b6);
  --ms-shell-inset-dark: var(--c-c26a99);
  --ms-panel-bg: var(--c-ffe9f7);
  --ms-panel-border: var(--c-cc80ab);
  --ms-panel-inset-light: var(--c-fff8fd);
  --ms-panel-inset-dark: var(--c-cf85ad);
  --ms-btn-bottom: var(--c-f0bddc);
  --ms-btn-text: var(--c-6a224b);
  --ms-btn-active-top: var(--c-eaaed1);
  --ms-btn-active-bottom: var(--c-f9d8ea);
  --ms-toolbar-border: var(--c-ca79a8);
  --ms-toolbar-inset-dark: var(--c-be6696);
  --ms-restart-bottom: var(--c-ebb3d2);
  --ms-restart-text: var(--c-7a2754);
  --ms-restart-active-top: var(--c-e6a5c8);
  --ms-restart-active-bottom: var(--c-f7d0e6);
  --ms-counter-text: var(--c-ff377d);
  --ms-counter-bg: var(--c-2a0014);
  --ms-counter-border-dark: var(--c-8f4d71);
  --ms-counter-border-light: var(--c-ffe5f4);
  --ms-board-border: var(--c-cd7ea9);
  --ms-board-inset-dark: var(--c-c26d99);
  --ms-cell-top: var(--c-ffd9ef);
  --ms-cell-bottom: var(--c-f2b5d7);
  --ms-cell-text: var(--c-7a2452);
  --ms-cell-revealed-border: var(--c-d58cb4);
  --ms-cell-flag: var(--c-bd155d);
  --ms-cell-mine-bg: var(--c-ff8fbb);
  --ms-cell-mine-border: var(--c-93345f);
  --ms-cell-wrong-bg: var(--c-ffe8f2);
  --ms-cell-wrong-text: var(--c-cb2b63);
  --ms-cell-wrong-border: var(--c-c3709e);
  --ms-n1: var(--c-2f5fb9);
  --ms-n2: var(--c-2f9150);
  --ms-n3: var(--c-ba3b4f);
  --ms-n4: var(--c-5f4ab9);
  --ms-n5: var(--c-914e31);
  --ms-n6: var(--c-2e8f94);
  --ms-n7: var(--c-6d6d6d);
  --ms-n8: var(--c-2f2f2f);
  --ms-win-glow: var(--c-f3a5cf);
  --ms-win-glow-outer: var(--c-rgba-255-120-182-0p4);
  --terminal-shell-bg: var(--c-050505);
  --terminal-shell-border: var(--c-262626);
  --terminal-shell-inset: var(--c-111);
  --terminal-screen-text: var(--c-e7e7e7);
  --terminal-screen-border: var(--c-1e1e1e);
  --terminal-prompt: var(--c-f2f2f2);
  --terminal-input-border: var(--c-333);
  --terminal-input-focus: var(--c-666);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Tahoma", "MS Sans Serif", "Segoe UI", Verdana, sans-serif;
  font-size: 12px;
  background-color: var(--desktop-fallback);
  background-image: url('/assets/graphics/pink/backgrounds/default.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-body);
  min-height: 100vh;
  overflow: hidden;
  cursor: url('./assets/cursor/PnkGelSelect.gif') 2 0, url('./assets/cursor/PnkGelSelect.cur') 2 0, url('./assets/cursor/PnkGelSelect.ani'), default;
}

body.ve-invert-colors {
  filter: invert(1) hue-rotate(180deg);
}

body.ve-arg-glitch {
  animation: ve-arg-glitch 120ms steps(2, end) infinite;
}

@keyframes ve-arg-glitch {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

button:hover,
a:hover,
[role="button"]:hover,
.desktop-icon:hover,
.xp-file-item:hover,
.xp-side-link:hover,
.xp-nav-btn:hover,
.start-item:hover,
.start-footer-btn:hover,
.taskbar-btn:hover,
#start-btn:hover,
#show-desktop-btn:hover,
#reset-layout-btn:hover,
#context-menu .context-menu-item:hover {
  cursor: url('./assets/cursor/PnkGelLinkSel.gif') 8 3, url('./assets/cursor/PnkGelLinkSel.cur') 8 3, url('./assets/cursor/PnkGelLinkSel.ani'), pointer;
}

body.custom-cursor,
body.custom-cursor * {
  cursor: none !important;
}

#ve-animated-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 100001;
  display: none;
}

#ve-animated-cursor img {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

#ve-animated-cursor .cursor-link,
#ve-animated-cursor .cursor-move {
  display: none;
}

body.cursor-link #ve-animated-cursor .cursor-default,
body.cursor-move #ve-animated-cursor .cursor-default {
  display: none;
}

body.cursor-link #ve-animated-cursor .cursor-link {
  display: block;
}

body.cursor-move #ve-animated-cursor .cursor-link {
  display: none;
}

body.cursor-move #ve-animated-cursor .cursor-move {
  display: block;
}

#desktop {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

#topbar {
  background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
  color: var(--color-white);
  padding: 5px 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--titlebar-border);
  display: flex;
  align-items: center;
  text-shadow: 0 1px 0 var(--overlay-strong);
}

#topbar-title {
  white-space: nowrap;
  letter-spacing: 0.2px;
}

#reset-layout-btn,
#show-desktop-btn {
  margin-left: 0;
  width: 22px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: linear-gradient(var(--ui-btn-top), var(--ui-btn-bottom));
  color: var(--ui-btn-text);
  border-top: 1px solid var(--surface-raised);
  border-left: 1px solid var(--surface-raised);
  border-right: 1px solid var(--text-secondary);
  border-bottom: 1px solid var(--text-secondary);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--overlay-soft);
  cursor: pointer;
}

#reset-layout-btn > span {
  font-size: 13px;
  line-height: 1;
  transform: translateY(-1px);
}

#reset-layout-btn:hover,
#show-desktop-btn:hover {
  background: linear-gradient(var(--ui-btn-hover-top), var(--ui-btn-hover-bottom));
}

#reset-layout-btn:active,
#show-desktop-btn:active,
#show-desktop-btn.active {
  border-top-color: var(--text-secondary);
  border-left-color: var(--text-secondary);
  border-right-color: var(--surface-raised);
  border-bottom-color: var(--surface-raised);
  background: linear-gradient(var(--ui-btn-active-top), var(--ui-btn-active-bottom));
}

#reset-layout-btn:focus-visible,
#show-desktop-btn:focus-visible {
  outline: 1px dotted var(--color-white);
  outline-offset: -4px;
}

#icons {
  position: relative;
  padding: 16px;
  flex: 1;
  overflow: hidden;
}

.desktop-icon {
  position: absolute;
  width: 112px;
  border: none;
  background: transparent;
  color: var(--color-white);
  text-shadow: 0 1px 2px var(--overlay-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: default;
  padding: 8px 6px;
  border-radius: 4px;
  touch-action: none;
  user-select: none;
}

.desktop-icon:hover {
  background: var(--glass-line-subtle);
}

.desktop-icon.dragging {
  cursor: grabbing;
  background: var(--glass-line-strong);
}

.desktop-icon .emoji {
  font-size: 36px;
  width: 100%;
  text-align: center;
  display: block;
  line-height: 1;
}

.desktop-icon .emoji img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  image-rendering: pixelated;
  -webkit-user-drag: none;
  user-drag: none;
}

.desktop-icon span:last-child {
  font-size: 12px;
  text-align: center;
  width: 100%;
  line-height: 1.25;
}

.desktop-icon.selected {
  background: var(--selection-blue);
  outline: 1px dotted var(--overlay-glass);
}

#taskbar {
  background: linear-gradient(var(--taskbar-1), var(--taskbar-2));
  border-top: 1px solid var(--taskbar-top-line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 6px;
  color: var(--color-white);
  min-height: 34px;
  position: relative;
  z-index: 40;
}

#start-btn {
  background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
  color: var(--color-white);
  border-top: 1px solid var(--surface-highlight);
  border-left: 1px solid var(--surface-highlight);
  border-right: 1px solid var(--border-hot);
  border-bottom: 1px solid var(--border-hot);
  border-radius: 16px;
  font-weight: 700;
  font-style: italic;
  padding: 5px 16px;
  text-transform: lowercase;
  cursor: pointer;
  text-shadow: 0 1px 0 var(--overlay-shadow);
}

#start-btn:active,
#start-btn.active {
  border-top-color: var(--border-hot);
  border-left-color: var(--border-hot);
  border-right-color: var(--surface-highlight);
  border-bottom-color: var(--surface-highlight);
  background: linear-gradient(var(--titlebar-2), var(--titlebar-1));
}

#taskbar-windows {
  display: flex;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  padding: 1px;
}

.taskbar-btn {
  min-width: 36px;
  max-width: 46px;
  width: 38px;
  height: 26px;
  background: linear-gradient(var(--task-btn-top), var(--task-btn-bottom));
  color: var(--explorer-item-title);
  border-top: 1px solid var(--surface-window-alt);
  border-left: 1px solid var(--surface-window-alt);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  padding: 0;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.taskbar-btn-icon {
  font-size: 14px;
  line-height: 1;
}

.taskbar-btn-icon-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
}

.taskbar-btn-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.taskbar-btn.active {
  background: linear-gradient(var(--task-btn-active-top), var(--task-btn-active-bottom));
  border-top-color: var(--border-strong);
  border-left-color: var(--border-strong);
  border-right-color: var(--surface-window-alt);
  border-bottom-color: var(--surface-window-alt);
}

#taskbar-right {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

#taskbar-brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--taskbar-brand-text);
  text-shadow: 0 1px 0 var(--overlay-shadow);
  white-space: nowrap;
}

#taskbar-tray-buttons {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#clock {
  font-size: 11px;
  padding: 2px 8px;
  border-top: 1px solid var(--overlay-card);
  border-left: 1px solid var(--overlay-card);
  border-right: 1px solid var(--overlay-card-border);
  border-bottom: 1px solid var(--overlay-card-border);
  background: var(--clock-bg);
  min-height: 30px;
  min-width: 72px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}

#clock .clock-time {
  font-weight: 700;
}

#clock .clock-date {
  font-size: 10px;
  opacity: 0.95;
}

#start-menu {
  position: absolute;
  left: 8px;
  bottom: 36px;
  width: 420px;
  border-top: 1px solid var(--accent-fill);
  border-left: 1px solid var(--accent-fill);
  border-right: 1px solid var(--startmenu-border-dark);
  border-bottom: 1px solid var(--startmenu-border-dark);
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  background: var(--surface-window-soft);
  box-shadow: 0 10px 30px var(--startmenu-shadow);
  z-index: 1200;
}

.start-menu-top {
  background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
  color: var(--color-white);
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 0 var(--title-shadow-strong);
}

.start-menu-body {
  display: grid;
  grid-template-columns: 1fr 0.95fr;
  min-height: 280px;
}

.start-col {
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.start-col-left {
  background: var(--color-white);
  border-right: 1px solid var(--startmenu-divider);
}

.start-col-right {
  background: var(--startmenu-col-right);
}

.start-item {
  border: none;
  background: transparent;
  text-align: left;
  font-size: 12px;
  padding: 7px 8px;
  color: var(--text-accent);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.start-item img,
.start-footer-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
}

.start-item.secondary {
  color: var(--text-muted);
}

.start-item:hover {
  background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
  color: var(--color-white);
}

.start-menu-footer {
  background: linear-gradient(var(--titlebar-2), var(--startmenu-footer-bottom));
  padding: 7px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.start-footer-btn {
  background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom));
  color: var(--text-primary);
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.start-footer-btn:active {
  border-top-color: var(--border-strong);
  border-left-color: var(--border-strong);
  border-right-color: var(--color-white);
  border-bottom-color: var(--color-white);
}

.app-window {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 92vw);
  min-width: 360px;
  min-height: 240px;
  background: var(--panel);
  border-top: 1px solid var(--window-frame-light);
  border-left: 1px solid var(--window-frame-light);
  border-right: 1px solid var(--window-frame-dark);
  border-bottom: 1px solid var(--window-frame-dark);
  box-shadow: 0 12px 26px var(--window-shadow);
  display: flex;
  flex-direction: column;
}

.app-window:focus {
  outline: none;
}

.app-window button:focus,
.app-window input:focus,
.app-window textarea:focus,
.app-window select:focus {
  outline: none;
  box-shadow: none;
}

.app-window button:focus-visible,
.app-window input:focus-visible,
.app-window textarea:focus-visible,
.app-window select:focus-visible {
  outline: 1px dotted var(--control-accent);
  outline-offset: 1px;
}

.app-window.dragging {
  user-select: none;
}

.app-window.dragging .window-titlebar {
  cursor: grabbing;
}

.hidden { display: none !important; }

.window-titlebar {
  background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
  color: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--titlebar-border);
  text-shadow: 0 1px 0 var(--overlay-strong);
}

.window-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.window-title::before {
  content: "▣";
  font-size: 11px;
  color: var(--window-title-glyph);
}

.window-controls {
  display: inline-flex;
  gap: 4px;
}

.window-minimize,
.window-maximize,
.window-close {
  width: 24px;
  height: 20px;
  border-top: 1px solid var(--surface-soft-hover);
  border-left: 1px solid var(--surface-soft-hover);
  border-right: 1px solid var(--text-secondary);
  border-bottom: 1px solid var(--text-secondary);
  background: linear-gradient(var(--winctrl-top), var(--winctrl-bottom));
  color: var(--ui-btn-text);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.window-minimize:active,
.window-maximize:active,
.window-close:active {
  border-top-color: var(--text-secondary);
  border-left-color: var(--text-secondary);
  border-right-color: var(--surface-soft-hover);
  border-bottom-color: var(--surface-soft-hover);
}

.app-window.maximized {
  border-radius: 0;
}

.app-window.maximized .window-resize-handle {
  display: none;
}

.window-content {
  margin: 4px;
  padding: 12px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--color-white);
  border-top: 1px solid var(--content-inset-dark);
  border-left: 1px solid var(--content-inset-dark);
  border-right: 1px solid var(--content-inset-light);
  border-bottom: 1px solid var(--content-inset-light);
}

.window-resize-handle {
  position: absolute;
  width: 14px;
  height: 14px;
  right: 1px;
  bottom: 1px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 40%, var(--accent-stroke) 40% 46%, transparent 46% 56%, var(--accent-stroke) 56% 62%, transparent 62% 72%, var(--accent-stroke) 72% 78%, transparent 78% 100%);
}

.app-window.resizing {
  user-select: none;
}

#selection-box {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid rgba(60, 140, 255, 0.95);
  outline: 1px solid rgba(255, 255, 255, 0.65);
  outline-offset: -2px;
  background: rgba(130, 200, 255, 0.28);
  background: var(--selection-fill, rgba(130, 200, 255, 0.28));
  pointer-events: none;
  z-index: 120;
}

.xp-loading {
  color: var(--accent-deep);
  padding: 10px;
}

.xp-explorer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
}

.xp-saveas {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.xp-saveas-topbar {
  border: 1px solid var(--divider);
  background: var(--surface-soft);
  padding: 6px;
}

.xp-saveas-row {
  display: grid;
  grid-template-columns: auto auto auto auto minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.xp-saveas-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.xp-saveas-path {
  background: var(--color-white);
  border: 1px solid var(--accent-soft);
  padding: 5px 7px;
  font-size: 11px;
  color: var(--text-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-saveas-body {
  display: grid;
  grid-template-columns: 188px minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

.xp-saveas-sidebar {
  border: 1px solid var(--divider);
  background: var(--surface-soft);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: auto;
}

.xp-saveas-main {
  min-height: 0;
  border: 1px solid var(--divider);
  background: var(--color-white);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.xp-saveas-list-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 144px;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--divider);
  padding: 5px 8px;
}

.xp-saveas-list {
  min-height: 0;
  overflow: auto;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xp-saveas-item {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--explorer-item-text);
  text-align: left;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 144px;
  gap: 8px;
  align-items: center;
  padding: 5px 6px;
  font-size: 11px;
  cursor: default;
}

.xp-saveas-item:hover {
  border-color: var(--explorer-hover-border);
  background: var(--surface-soft-hover);
}

.xp-saveas-item.selected {
  border-color: var(--explorer-selected-border);
  background: var(--surface-soft-hover);
}

.xp-saveas-item-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xp-saveas-item-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
}

.xp-saveas-item-name,
.xp-saveas-item-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-saveas-item-type {
  color: var(--text-muted);
}

.xp-saveas-footer {
  border: 1px solid var(--divider);
  background: var(--surface-soft);
  padding: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px auto;
  gap: 8px;
  align-items: end;
}

.xp-saveas-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.xp-saveas-field span {
  font-size: 11px;
  color: var(--text-secondary);
}

.xp-saveas-field input,
.xp-saveas-field select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--accent-mid);
  background: var(--color-white);
  color: var(--text-primary);
  font-size: 12px;
  padding: 5px 7px;
}

.xp-saveas-buttons {
  display: inline-flex;
  gap: 6px;
}

.xp-toolbar {
  display: grid;
  grid-template-columns: 28px 28px 28px 34px 1fr;
  gap: 6px;
  align-items: center;
}

.xp-nav-btn {
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom));
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.xp-nav-btn img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  image-rendering: pixelated;
}

.xp-nav-icon {
  width: 28px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.xp-nav-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.xp-breadcrumb {
  background: var(--color-white);
  border: 1px solid var(--accent-soft);
  padding: 5px 8px;
  font-size: 11px;
  color: var(--text-accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-explorer-body {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.xp-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  min-height: 0;
}

.xp-sidebar {
  background: var(--surface-soft);
  border: 1px solid var(--divider);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow: auto;
}

.xp-side-title {
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 4px;
}

.xp-side-link {
  border: none;
  background: transparent;
  text-align: left;
  color: var(--text-accent);
  font-size: 11px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.xp-side-link img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
}

.xp-side-link:hover {
  background: var(--explorer-hover-soft);
}

.xp-files {
  min-height: 0;
  border: 1px solid var(--divider);
  background: var(--color-white);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  grid-auto-rows: 96px;
  align-content: start;
  gap: 6px;
  overflow: auto;
}

.xp-file-item {
  border: 1px solid transparent;
  background: transparent;
  text-align: center;
  color: var(--explorer-item-text);
  padding: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  cursor: default;
  width: 92px;
  height: 92px;
  border-radius: 0;
}

.xp-file-item:hover {
  border-color: var(--explorer-hover-border);
  background: var(--ui-btn-hover-top);
}

.xp-file-item.selected {
  border-color: var(--explorer-selected-border);
  background: var(--surface-soft-hover);
}

.xp-file-icon {
  font-size: 26px;
  line-height: 1;
}

.xp-file-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}

.xp-file-label {
  font-size: 11px;
  word-break: break-word;
  width: 100%;
  text-align: center;
}

.xp-empty {
  color: var(--accent-deep);
  padding: 8px;
  font-size: 11px;
}

.xp-details {
  display: none;
}

.xp-details-title {
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 4px;
}

.xp-notepad {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.xp-notepad-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 5px;
}

.xp-note-btn {
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom));
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.xp-note-file {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}

.xp-note-editor {
  width: 100%;
  min-height: 360px;
  height: 100%;
  resize: none;
  border: 1px solid var(--accent-mid);
  background: var(--color-white);
  color: var(--editor-text);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.35;
  padding: 10px;
}

.xp-paint {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.xp-paint-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 5px;
  font-size: 11px;
  color: var(--text-muted);
}

.xp-paint-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.xp-paint-tool,
.xp-paint-size,
.xp-paint-color {
  font-size: 11px;
}

input[type="range"] {
  accent-color: var(--control-accent);
}

.xp-paint-btn {
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom));
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.xp-paint-stage {
  border: 1px solid var(--accent-mid);
  background: var(--color-white);
  overflow: auto;
  flex: 1;
  min-height: 160px;
}

.xp-paint-canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-white);
  cursor: crosshair;
}

.xp-ie {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.xp-ie-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 5px;
}

.xp-ie-btn {
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom));
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.xp-ie-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.xp-ie-address-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 5px;
  margin: 0;
}

.xp-ie-address-row span {
  color: var(--text-muted);
  font-size: 11px;
}

.xp-ie-address {
  border: 1px solid var(--accent-mid);
  padding: 5px 7px;
  font-size: 12px;
  color: var(--explorer-item-title);
  background: var(--color-white);
}

.xp-ie-content {
  border: 1px solid var(--accent-mid);
  background: var(--color-white);
  min-height: 220px;
  padding: 12px;
  overflow: auto;
  flex: 1;
}

.ie-loading {
  color: var(--accent-deep);
}

.ie-error h3 {
  margin-top: 0;
  color: var(--ie-error-title);
}

.ie-page h2 {
  margin-top: 0;
  color: var(--accent-deep);
}

.ie-page a {
  color: var(--link-primary);
}

.ie-page a:hover {
  color: var(--link-hover);
}

.ie-results li {
  margin-bottom: 10px;
}

.ie-results li div {
  color: var(--link-meta);
  font-size: 11px;
}

.xp-image-viewer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
}

.xp-image-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 5px;
}

.xp-image-btn {
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  background: linear-gradient(var(--surface-panel-top), var(--surface-panel-bottom));
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.xp-image-title {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 11px;
}

.xp-image-stage {
  border: 1px solid var(--accent-mid);
  background: var(--color-white);
  flex: 1;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.xp-image-content {
  display: block;
  max-width: 100%;
  max-height: 100%;
  image-rendering: auto;
}

.xp-audio-player {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  background: linear-gradient(var(--audio-shell-top), var(--audio-shell-bottom));
  border: 1px solid var(--audio-shell-border);
  padding: 8px;
}

.xp-audio-top {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: center;
}

.xp-audio-logo {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-white);
  background: linear-gradient(var(--audio-logo-top), var(--audio-logo-bottom));
  border: 1px solid var(--audio-logo-border);
}

.xp-audio-track-wrap {
  border: 1px solid var(--audio-display-border);
  background: var(--audio-display-bg);
  color: var(--audio-display-text);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
}

.xp-audio-track-marquee {
  display: inline-block;
  padding: 6px 8px;
  min-width: 100%;
  animation: xp-audio-scroll 12s linear infinite;
}

@keyframes xp-audio-scroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.xp-audio-controls {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 6px;
  align-items: center;
}

.xp-audio-btn {
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--audio-btn-border-dark);
  border-bottom: 1px solid var(--audio-btn-border-dark);
  background: linear-gradient(var(--audio-btn-top), var(--audio-btn-bottom));
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 8px;
  cursor: pointer;
}

.xp-audio-seek {
  width: 100%;
}

.xp-audio-time {
  margin-top: auto;
  border: 1px solid var(--audio-display-border);
  background: var(--surface-window-soft);
  color: var(--text-primary);
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 11px;
  padding: 4px 6px;
  text-align: right;
}

#context-menu {
  position: fixed;
  z-index: 3000;
  min-width: 170px;
  background: var(--surface-tooltip);
  border-top: 1px solid var(--color-white);
  border-left: 1px solid var(--color-white);
  border-right: 1px solid var(--context-border-dark);
  border-bottom: 1px solid var(--context-border-dark);
  box-shadow: 2px 2px 0 var(--context-shadow);
  padding: 3px;
}

.context-menu-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 11px;
  padding: 6px 8px;
  cursor: pointer;
}

.context-menu-item:hover:not(:disabled),
.context-menu-item:focus-visible {
  background: linear-gradient(var(--titlebar-1), var(--titlebar-2));
  color: var(--color-white);
  outline: none;
}

.context-menu-item:disabled {
  color: var(--context-disabled);
  cursor: default;
}

.context-menu-sep {
  height: 1px;
  background: var(--context-separator);
  margin: 3px 2px;
}

.xp-props {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100%;
}

.xp-props-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--props-title);
}

.xp-props-body {
  border: 1px solid var(--divider);
  background: var(--color-white);
  padding: 8px;
  font-size: 11px;
  color: var(--explorer-item-text);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.xp-help-center {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  min-height: 0;
  color: var(--text-primary);
}

.xp-help-header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--accent-soft);
  background: linear-gradient(180deg, var(--surface-window), var(--surface-soft));
}

.xp-help-header-icon {
  width: 28px;
  height: 28px;
  border-radius: 3px;
  border-top: 1px solid var(--surface-contrast);
  border-left: 1px solid var(--surface-contrast);
  border-right: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
  background: linear-gradient(180deg, var(--titlebar-1), var(--titlebar-2));
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  text-shadow: 0 1px 0 var(--overlay-strong);
}

.xp-help-header-copy h2 {
  margin: 0;
  font-size: 15px;
  color: var(--accent-deep);
}

.xp-help-header-copy p {
  margin: 3px 0 0;
  font-size: 11px;
  color: var(--text-muted);
}

.xp-help-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  flex: 1;
}

.xp-help-toc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  border: 1px solid var(--divider);
  background: var(--surface-soft);
  padding: 6px;
}

.xp-help-toc-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-deep);
  margin-bottom: 2px;
}

.xp-help-topic-btn {
  text-align: left;
  font-size: 11px;
  color: var(--text-primary);
  border-top: 1px solid var(--surface-contrast);
  border-left: 1px solid var(--surface-contrast);
  border-right: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
  background: linear-gradient(180deg, var(--surface-window), var(--accent-fill));
  padding: 5px 7px;
  cursor: pointer;
}

.xp-help-topic-btn:hover,
.xp-help-topic-btn:focus-visible {
  outline: none;
  background: linear-gradient(180deg, var(--surface-soft-hover), var(--surface-highlight));
}

.xp-help-topic-btn.active {
  border-top-color: var(--border-muted);
  border-left-color: var(--border-muted);
  border-right-color: var(--surface-contrast);
  border-bottom-color: var(--surface-contrast);
  background: linear-gradient(180deg, var(--titlebar-1), var(--titlebar-2));
  color: var(--color-white);
  text-shadow: 0 1px 0 var(--overlay-strong);
}

.xp-help-content {
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--divider);
  background: var(--color-white);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.xp-help-content:focus {
  outline: 1px dotted var(--accent-stroke);
  outline-offset: -3px;
}

.xp-help-section {
  border: 1px solid var(--accent-soft);
  background: linear-gradient(180deg, var(--surface-window-alt), var(--surface-window));
  padding: 9px;
}

.xp-help-section h3 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--accent-deep);
}

.xp-help-section h4 {
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--text-accent);
}

.xp-help-section p,
.xp-help-section li,
.xp-help-section td,
.xp-help-section th,
.xp-help-section summary {
  font-size: 11px;
  color: var(--explorer-item-text);
  line-height: 1.35;
}

.xp-help-section p {
  margin: 5px 0;
}

.xp-help-section ul,
.xp-help-section ol {
  margin: 6px 0 6px 18px;
  padding: 0;
}

.xp-help-section code,
.xp-help-section kbd {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 10px;
}

.xp-help-section kbd {
  display: inline-block;
  padding: 1px 4px;
  border: 1px solid var(--accent-mid);
  background: var(--surface-soft);
}

.xp-help-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}

.xp-help-table th,
.xp-help-table td {
  border: 1px solid var(--accent-soft);
  padding: 4px 6px;
  text-align: left;
  vertical-align: top;
}

.xp-help-table th {
  background: var(--surface-soft);
  color: var(--accent-deep);
}

.xp-help-note {
  border-left: 3px solid var(--accent-stroke);
  padding-left: 6px;
}

.xp-help-section details {
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 5px 6px;
  margin-top: 6px;
}

.xp-help-section details p {
  margin: 5px 0 0;
}

@media (max-width: 768px) {
  .app-window {
    width: calc(100vw - 12px);
    max-width: calc(100vw - 12px);
    min-width: 0;
    min-height: 180px;
    top: 6px;
    left: 6px;
    transform: none;
    max-height: calc(100vh - 50px);
  }

  .app-window.maximized {
    left: 0;
    top: 0;
    width: 100vw;
    max-width: none;
    max-height: none;
  }

  .window-titlebar {
    padding: 7px 8px;
  }

  .window-minimize,
  .window-maximize,
  .window-close {
    width: 30px;
    height: 24px;
    font-size: 13px;
  }

  .window-content {
    margin: 3px;
    padding: 8px;
  }

  .window-resize-handle {
    display: none;
  }

  .xp-explorer-body {
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: stretch;
  }

  .xp-sidebar {
    max-height: none;
    min-height: 0;
  }

  .xp-main {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }

  .xp-files {
    min-width: 0;
  }

  .xp-details {
    display: none;
  }

  .xp-files {
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    grid-auto-rows: 88px;
  }

  .xp-file-item {
    width: 84px;
    height: 84px;
    padding: 4px;
  }

  .xp-notepad .xp-note-editor {
    min-height: 180px;
  }

  .xp-help-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .xp-help-toc {
    max-height: 170px;
    overflow: auto;
  }

  .xp-help-content {
    max-height: min(56vh, 420px);
  }

  .xp-saveas-row {
    grid-template-columns: auto auto auto auto;
  }

  .xp-saveas-path {
    grid-column: 1 / -1;
  }

  .xp-saveas-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .xp-saveas-sidebar {
    max-height: 130px;
  }

  .xp-saveas-footer {
    grid-template-columns: minmax(0, 1fr);
  }

  .xp-saveas-buttons {
    justify-content: flex-end;
  }

  .xp-audio-controls {
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
  }

  .xp-audio-seek {
    grid-column: 1 / -1;
  }
}

.xp-minesweeper {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  height: 100%;
  background: linear-gradient(180deg, var(--ms-shell-top) 0%, var(--ms-shell-bottom) 100%);
  border: 1px solid var(--ms-shell-border);
  box-shadow: inset 1px 1px 0 var(--surface-window), inset -1px -1px 0 var(--ms-shell-inset-dark);
  padding: 8px;
}

.xp-ms-menubar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  background: var(--ms-panel-bg);
  border: 1px solid var(--ms-panel-border);
  box-shadow: inset 1px 1px 0 var(--ms-panel-inset-light), inset -1px -1px 0 var(--ms-panel-inset-dark);
  padding: 4px;
}

.xp-ms-menu-btn {
  height: 24px;
  white-space: nowrap;
  border-top: 1px solid var(--surface-contrast);
  border-left: 1px solid var(--surface-contrast);
  border-right: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
  background: linear-gradient(180deg, var(--surface-tooltip), var(--ms-btn-bottom));
  color: var(--ms-btn-text);
  padding: 0 8px;
  font-size: 11px;
}

.xp-ms-menu-btn:active,
.xp-ms-menu-btn.active {
  border-top-color: var(--border-muted);
  border-left-color: var(--border-muted);
  border-right-color: var(--surface-contrast);
  border-bottom-color: var(--surface-contrast);
  background: linear-gradient(180deg, var(--ms-btn-active-top), var(--ms-btn-active-bottom));
}

.xp-ms-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  background: linear-gradient(180deg, var(--ms-panel-bg), var(--accent-fill));
  border: 1px solid var(--ms-toolbar-border);
  box-shadow: inset 1px 1px 0 var(--surface-window-soft), inset -1px -1px 0 var(--ms-toolbar-inset-dark);
  padding: 6px;
}

.xp-ms-restart {
  min-width: 42px;
  justify-self: center;
  height: 28px;
  border-top: 1px solid var(--surface-contrast);
  border-left: 1px solid var(--surface-contrast);
  border-right: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
  background: linear-gradient(180deg, var(--surface-window-soft), var(--ms-restart-bottom));
  color: var(--ms-restart-text);
  font-size: 14px;
  padding: 0 8px;
}

.xp-ms-restart:active {
  border-top-color: var(--border-muted);
  border-left-color: var(--border-muted);
  border-right-color: var(--surface-contrast);
  border-bottom-color: var(--surface-contrast);
  background: linear-gradient(180deg, var(--ms-restart-active-top), var(--ms-restart-active-bottom));
}

.xp-ms-counter {
  justify-self: start;
}

.xp-ms-timer {
  justify-self: end;
}

.app-window.no-resize .window-resize-handle {
  display: none;
}

.app-window.no-maximize .window-maximize {
  display: none;
}

.xp-ms-counter,
.xp-ms-timer {
  min-width: 42px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", monospace;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ms-counter-text);
  background: var(--ms-counter-bg);
  border-top: 1px solid var(--ms-counter-border-dark);
  border-left: 1px solid var(--ms-counter-border-dark);
  border-right: 1px solid var(--ms-counter-border-light);
  border-bottom: 1px solid var(--ms-counter-border-light);
}

.xp-ms-board-wrap {
  border: 1px solid var(--ms-board-border);
  box-shadow: inset 1px 1px 0 var(--surface-tooltip), inset -1px -1px 0 var(--ms-board-inset-dark);
  background: var(--ms-cell-top);
  padding: 8px;
  overflow: hidden;
  width: max-content;
  justify-self: center;
}

.xp-ms-board {
  --ms-cols: 9;
  display: grid;
  grid-template-columns: repeat(var(--ms-cols), 28px);
  gap: 2px;
  width: max-content;
  margin: 0;
}

.xp-ms-cell {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--surface-window);
  border-left: 1px solid var(--surface-window);
  border-right: 1px solid var(--border-accent);
  border-bottom: 1px solid var(--border-accent);
  background: linear-gradient(180deg, var(--ms-cell-top), var(--ms-cell-bottom));
  color: var(--ms-cell-text);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  padding: 0;
  user-select: none;
}

.xp-ms-cell:active {
  border-top-color: var(--border-accent);
  border-left-color: var(--border-accent);
  border-right-color: var(--surface-window);
  border-bottom-color: var(--surface-window);
}

.xp-ms-cell.is-revealed {
  border: 1px solid var(--ms-cell-revealed-border);
  background: var(--ui-btn-top);
}

.xp-ms-cell.is-flagged {
  color: var(--ms-cell-flag);
}

.xp-ms-cell.is-mine,
.xp-ms-cell.is-trigger-mine {
  background: var(--ms-cell-mine-bg);
  border-color: var(--ms-cell-mine-border);
}

.xp-ms-cell.is-wrong-flag {
  background: var(--ms-cell-wrong-bg);
  color: var(--ms-cell-wrong-text);
  border: 1px solid var(--ms-cell-wrong-border);
}

.xp-ms-cell.n1 { color: var(--ms-n1); }
.xp-ms-cell.n2 { color: var(--ms-n2); }
.xp-ms-cell.n3 { color: var(--ms-n3); }
.xp-ms-cell.n4 { color: var(--ms-n4); }
.xp-ms-cell.n5 { color: var(--ms-n5); }
.xp-ms-cell.n6 { color: var(--ms-n6); }
.xp-ms-cell.n7 { color: var(--ms-n7); }
.xp-ms-cell.n8 { color: var(--ms-n8); }

.xp-ms-board.is-game-over .xp-ms-cell:not(.is-revealed) {
  opacity: 0.96;
}

.xp-ms-board.is-game-won {
  box-shadow: 0 0 0 2px var(--ms-win-glow), 0 0 18px var(--ms-win-glow-outer);
}

@media (max-width: 768px) {
  .xp-minesweeper {
    min-height: 300px;
  }

  .xp-ms-menubar {
    flex-wrap: wrap;
  }

  .xp-ms-menu-btn {
    flex: 1 1 auto;
    min-width: 0;
  }

  .xp-ms-board {
    grid-template-columns: repeat(var(--ms-cols), 24px);
  }

  .xp-ms-cell {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

.xp-terminal {
  height: 100%;
  min-height: 220px;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  background: var(--terminal-shell-bg);
  border: 1px solid var(--terminal-shell-border);
  box-shadow: inset 0 0 0 1px var(--terminal-shell-inset);
  padding: 8px;
}

.xp-terminal-screen {
  overflow: auto;
  background: var(--ink-black);
  color: var(--terminal-screen-text);
  border: 1px solid var(--terminal-screen-border);
  padding: 8px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}

.xp-terminal-line {
  margin: 0;
}

.xp-terminal-input-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.xp-terminal-prompt {
  font-family: Consolas, "Courier New", monospace;
  color: var(--terminal-prompt);
  font-size: 13px;
}

.xp-terminal-input {
  height: 28px;
  border: 1px solid var(--terminal-input-border);
  background: var(--ink-black);
  color: var(--color-white);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  padding: 0 8px;
}

.xp-terminal-input:focus {
  outline: 1px solid var(--terminal-input-focus);
  outline-offset: 0;
}

.xp-mail {
  height: 100%;
  min-height: 360px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, var(--surface-panel-top), var(--surface-panel-bottom));
  border: 1px solid var(--border-strong);
  box-shadow: inset 0 0 0 1px var(--surface-contrast);
}

.xp-mail-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border-accent);
  background: linear-gradient(180deg, var(--surface-soft), var(--surface-highlight));
}

.xp-mail-body {
  display: grid;
  grid-template-columns: 210px minmax(260px, 1fr) minmax(280px, 1.3fr);
  min-height: 0;
}

.xp-mail-sidebar,
.xp-mail-list,
.xp-mail-preview {
  min-height: 0;
  overflow: auto;
}

.xp-mail-sidebar {
  border-right: 1px solid var(--divider);
  background: var(--surface-window-soft);
  padding: 8px;
}

.xp-mail-folder-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  padding: 7px 8px;
  margin: 0 0 4px;
  border: 1px solid var(--accent-soft);
  background: linear-gradient(180deg, var(--surface-soft), var(--surface-window));
  color: var(--text-accent);
  text-align: left;
  cursor: pointer;
}

.xp-mail-folder-btn.active {
  border-color: var(--border-hot);
  background: linear-gradient(180deg, var(--surface-highlight), var(--accent-fill));
  font-weight: 700;
}

.xp-mail-folder-count {
  color: var(--text-muted);
  font-size: 12px;
}

.xp-mail-list {
  border-right: 1px solid var(--divider);
  background: var(--surface-window);
}

.xp-mail-list-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid var(--accent-soft);
  background: linear-gradient(180deg, var(--surface-soft), var(--surface-window));
  color: var(--text-accent);
  font-weight: 700;
}

.xp-mail-rows {
  padding: 6px;
}

.xp-mail-row {
  width: 100%;
  display: grid;
  grid-template-columns: 1.2fr 1.4fr auto;
  gap: 8px;
  align-items: center;
  text-align: left;
  padding: 7px 8px;
  margin: 0 0 4px;
  border: 1px solid transparent;
  background: var(--surface-window);
  color: var(--text-primary);
  cursor: pointer;
}

.xp-mail-row:hover {
  background: var(--surface-soft-hover);
  border-color: var(--accent-soft);
}

.xp-mail-row.selected {
  border-color: var(--border-hot);
  background: linear-gradient(180deg, var(--surface-highlight), var(--surface-soft));
}

.xp-mail-row-from,
.xp-mail-row-subject,
.xp-mail-row-date {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}

.xp-mail-row-date {
  color: var(--text-muted);
}

.xp-mail-preview {
  background: var(--surface-window-alt);
  padding: 10px;
}

.xp-mail-message h3 {
  margin: 0 0 8px;
  color: var(--text-accent);
}

.xp-mail-message-head {
  padding: 8px;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  margin-bottom: 8px;
  font-size: 12px;
}

.xp-mail-message-body {
  border: 1px solid var(--accent-soft);
  background: var(--color-white);
  padding: 10px;
  min-height: 150px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
}

.xp-mail-attachments {
  margin-top: 10px;
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 8px;
}

.xp-mail-attachments h4 {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--text-accent);
}

.xp-mail-att-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border-top: 1px dashed var(--accent-soft);
  font-size: 12px;
}

.xp-mail-att-row:first-of-type {
  border-top: 0;
}

.xp-mail-attachment-link {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--link-primary);
  text-decoration: underline;
  cursor: pointer;
}

.xp-mail-attachment-link:hover,
.xp-mail-attachment-link:focus {
  color: var(--link-hover);
}

.xp-mail-attachment-clip {
  font-size: 13px;
  line-height: 1;
  opacity: 0.9;
}

.xp-mail-attachment-size {
  color: var(--text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.xp-mail-compose {
  display: grid;
  gap: 8px;
}

.xp-mail-compose-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 8px;
  align-items: center;
}

.xp-mail-compose-row label {
  font-size: 12px;
  color: var(--text-accent);
}

.xp-mail-compose-row input,
.xp-mail-compose-row textarea {
  border: 1px solid var(--accent-soft);
  background: var(--color-white);
  color: var(--text-primary);
  padding: 6px;
  font: inherit;
}

.xp-mail-compose-row-body {
  align-items: start;
}

.xp-mail-compose-row textarea {
  min-height: 170px;
  resize: vertical;
}

.xp-mail-compose-attachments {
  border: 1px solid var(--accent-soft);
  background: var(--surface-soft);
  padding: 8px;
}

.xp-mail-compose-att-head {
  color: var(--text-accent);
  font-size: 12px;
  margin-bottom: 6px;
}

.xp-mail-compose-att-list {
  max-height: 110px;
  overflow: auto;
  font-size: 12px;
  margin-bottom: 8px;
}

.xp-mail-empty {
  color: var(--text-muted);
  font-size: 12px;
  padding: 10px;
}

.xp-mail-preview-empty {
  border: 1px dashed var(--accent-soft);
  background: var(--surface-soft);
}

@media (max-width: 1100px) {
  .xp-mail-body {
    grid-template-columns: 180px 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .xp-mail-preview {
    grid-column: 1 / span 2;
    border-top: 1px solid var(--divider);
  }
}