:root {
  color-scheme: light;
  --desktop-bg: #008080;
  --surface: #c0c0c0;
  --surface-light: #dfdfdf;
  --surface-dark: #808080;
  --surface-deep: #404040;
  --title-bg: #000080;
  --title-text: #ffffff;
  --text: #000000;
  --muted: #444444;
  --paper: #ffffff;
  --accent: #008000;
  --danger: #800000;
  --button-radius: 0;
  --window-radius: 0;
  --taskbar-height: 46px;
  --font-main: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  --desktop-icon-scale: 1;
  --desktop-icon-width: 96px;
  --desktop-classic-icon-width: 88px;
  --desktop-icon-min-height: 78px;
  --desktop-classic-min-height: 68px;
  --desktop-icon-gap: 6px;
  --desktop-classic-gap: 4px;
  --desktop-icon-font-size: 15px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-main);
  font-size: 15px;
  line-height: 1.35;
  background: var(--desktop-bg);
}

body.is-dragging-window {
  cursor: grabbing;
  user-select: none;
}

body.is-resizing-window {
  cursor: nwse-resize;
  user-select: none;
}

body.is-resizing-window iframe {
  pointer-events: none;
}

body[data-mode="normal"] {
  overflow: auto;
  background: #eeeeee;
}

body[data-mode="normal"] .desktop-shell {
  display: none;
}

body[data-mode="desktop"] .normal-site {
  display: none;
}

body[data-theme="win95"] {
  --desktop-bg: #008080;
  --surface: #c0c0c0;
  --surface-light: #dfdfdf;
  --surface-dark: #808080;
  --surface-deep: #404040;
  --title-bg: #000080;
  --title-text: #ffffff;
  --paper: #ffffff;
  --accent: #008000;
  --button-radius: 0;
  --window-radius: 0;
}

body[data-theme="xp"] {
  --desktop-bg:
    radial-gradient(ellipse at 18% 19%, rgba(255, 255, 255, 0.95) 0 5%, rgba(255, 255, 255, 0.7) 5.5% 8%, transparent 8.5%),
    radial-gradient(ellipse at 31% 16%, rgba(255, 255, 255, 0.85) 0 4.5%, transparent 5%),
    radial-gradient(ellipse at 70% 19%, rgba(255, 255, 255, 0.76) 0 6%, transparent 6.5%),
    radial-gradient(ellipse at 82% 15%, rgba(255, 255, 255, 0.82) 0 4%, transparent 4.5%),
    radial-gradient(ellipse at 50% 100%, #1d7b29 0 33%, transparent 33.5%),
    radial-gradient(ellipse at 18% 101%, #3ea038 0 38%, transparent 38.5%),
    radial-gradient(ellipse at 82% 105%, #2c8d36 0 43%, transparent 43.5%),
    linear-gradient(#0f72d8 0%, #5bbcff 44%, #8ed4ff 56%, #63b146 56%, #2f8729 100%);
  --surface: #ece9d8;
  --surface-light: #fffef4;
  --surface-dark: #7f8db9;
  --surface-deep: #3053a4;
  --title-bg: linear-gradient(90deg, #245edb, #3b8cff);
  --title-text: #ffffff;
  --paper: #fffef4;
  --accent: #3f9b34;
  --button-radius: 4px;
  --window-radius: 7px;
  --font-main: Tahoma, Arial, sans-serif;
}

body[data-theme="win10"] {
  --desktop-bg:
    url("wallpapers/windows-10-img0.jpg") center center / cover no-repeat;
  --surface: #202020;
  --surface-light: #2d2d2d;
  --surface-dark: #141414;
  --surface-deep: #000000;
  --title-bg: #202020;
  --title-text: #ffffff;
  --text: #f2f2f2;
  --muted: #c7c7c7;
  --paper: #1f1f1f;
  --accent: #0078d7;
  --button-radius: 0;
  --window-radius: 0;
  --font-main: "Segoe UI", Tahoma, Arial, sans-serif;
}

body[data-theme="win95"] .desktop-stage {
  background: var(--desktop-bg);
}

body[data-theme="xp"] .desktop-stage,
body[data-theme="win10"] .desktop-stage {
  background: var(--desktop-bg);
}

body[data-wallpaper="aye-grid"] .desktop-stage {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 42px 42px,
    radial-gradient(circle at 15% 22%, rgba(255, 212, 71, 0.2), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(0, 164, 239, 0.24), transparent 34%),
    linear-gradient(135deg, #065f73 0%, #1f2937 48%, #101010 100%);
}

body[data-wallpaper="soft-blue"] .desktop-stage {
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.52), transparent 28%),
    radial-gradient(circle at 72% 68%, rgba(0, 120, 215, 0.28), transparent 35%),
    linear-gradient(135deg, #d9f0ff 0%, #6bb7ff 42%, #144e88 100%);
}

body[data-style="construction"] {
  --construction-yellow: #ffd400;
  --construction-orange: #ff8a00;
  --construction-green: #00b46a;
  --accent: var(--construction-yellow);
}

body[data-style="construction"] .desktop-stage {
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 212, 0, 0.2) 0 2px, transparent 3px),
    radial-gradient(circle at 83% 43%, rgba(255, 255, 255, 0.14) 0 1px, transparent 2px),
    #008080;
}

body[data-style="construction"] .desktop-stage::before,
body[data-style="construction"] .desktop-stage::after {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

body[data-style="construction"] .desktop-stage::before {
  content: "videos being installed...";
  top: 20px;
  left: clamp(158px, 18vw, 330px);
  width: 188px;
  min-height: 22px;
  display: grid;
  place-items: center;
  padding: 2px 8px;
  border: 2px solid #000000;
  background:
    repeating-linear-gradient(135deg, #ffd400 0 6px, #000000 6px 12px) 0 0 / 100% 5px no-repeat,
    #ffffcc;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.58);
  color: #000000;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
}

body[data-style="construction"] .desktop-stage::after {
  content: "!";
  right: 140px;
  top: 108px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 2px solid #000000;
  background:
    linear-gradient(45deg, transparent 0 46%, #000000 46% 54%, transparent 54%),
    var(--construction-yellow);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  font-size: 13px;
  font-weight: 900;
  transform: rotate(9deg);
}

.construction-crew {
  display: none;
  position: absolute;
  z-index: 1;
  top: 58px;
  left: clamp(120px, 18vw, 320px);
  width: min(760px, calc(100vw - 300px));
  height: 430px;
  pointer-events: none;
}

body[data-style="construction"] .construction-crew {
  display: block;
}

.construction-crane {
  position: absolute;
  top: 8px;
  left: 180px;
  width: 310px;
  height: 238px;
  background:
    linear-gradient(90deg, transparent 0 68px, #000000 68px 70px, var(--construction-yellow) 70px 78px, #000000 78px 80px, transparent 80px),
    repeating-linear-gradient(0deg, transparent 0 13px, #000000 13px 15px, transparent 15px 28px) 70px 56px / 8px 162px no-repeat;
}

.construction-crane::before {
  content: "";
  position: absolute;
  left: 0;
  top: 48px;
  width: 300px;
  height: 16px;
  background:
    linear-gradient(90deg, #000000 0 3px, var(--construction-yellow) 3px 58px, #000000 58px 61px, var(--construction-yellow) 61px 276px, #000000 276px 279px, transparent 279px),
    repeating-linear-gradient(135deg, transparent 0 20px, #000000 20px 22px, transparent 22px 42px),
    repeating-linear-gradient(45deg, transparent 0 20px, #000000 20px 22px, transparent 22px 42px);
  box-shadow:
    0 -3px 0 var(--construction-yellow),
    0 3px 0 var(--construction-yellow),
    16px 17px 0 -5px #808080,
    32px 17px 0 -5px #808080;
}

.construction-crane::after {
  content: "";
  position: absolute;
  left: 76px;
  top: 20px;
  width: 72px;
  height: 72px;
  background:
    linear-gradient(135deg, transparent 0 48%, #000000 48% 53%, transparent 53%),
    linear-gradient(45deg, transparent 0 48%, #000000 48% 53%, transparent 53%);
  box-shadow:
    0 -16px 0 -5px #000000,
    0 -15px 0 0 var(--construction-yellow);
}

.construction-load {
  position: absolute;
  top: 392px;
  left: 390px;
  width: 34px;
  height: 34px;
  border: 2px solid #000000;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px) 0 0 / 17px 17px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px) 0 0 / 17px 17px,
    #0080c0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  animation: tile-load-swing 5s steps(3, end) infinite;
}

.construction-load::before {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 32px;
  width: 2px;
  height: 342px;
  background: #111111;
}

.construction-load::after {
  content: "";
  position: absolute;
  left: 10px;
  top: -7px;
  width: 11px;
  height: 7px;
  border: 2px solid #000000;
  border-bottom: 0;
}

.construction-wall {
  position: absolute;
  left: 90px;
  top: 430px;
  width: 220px;
  height: 132px;
  border: 2px dashed rgba(255, 255, 204, 0.9);
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.14) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, transparent 0 176px, rgba(0, 0, 0, 0.42) 176px 220px),
    rgba(0, 128, 128, 0.72);
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.12),
    5px 5px 0 rgba(0, 0, 0, 0.28);
}

.construction-wall::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 42px;
  height: 42px;
  border-left: 3px dotted #ffffcc;
  border-bottom: 3px dotted #ffffcc;
  background:
    repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.48) 0 6px, rgba(255, 255, 255, 0.1) 6px 12px);
}

.construction-wall::after {
  content: "desktop missing bit";
  position: absolute;
  right: -2px;
  top: -18px;
  color: #ffffcc;
  font-size: 9px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #000000;
}

.construction-ladder {
  position: absolute;
  left: 302px;
  top: 452px;
  width: 44px;
  height: 168px;
  border-left: 4px solid #d8d8d8;
  border-right: 4px solid #d8d8d8;
  transform: rotate(5deg);
}

.construction-ladder::before {
  content: "";
  position: absolute;
  inset: 8px -4px auto -4px;
  height: 146px;
  background: repeating-linear-gradient(0deg, transparent 0 10px, #d8d8d8 10px 14px);
}

.construction-installer {
  position: absolute;
  left: 326px;
  top: 432px;
  width: 19px;
  height: 32px;
  background:
    linear-gradient(#ffd400 0 8px, #f1b284 8px 15px, #2454c6 15px 25px, #111111 25px);
  box-shadow:
    0 0 0 2px #001f1f,
    -16px 9px 0 -6px #f1b284,
    13px 9px 0 -6px #f1b284;
  transform: rotate(-8deg);
  animation: installer-wobble 3.8s steps(2, end) infinite;
}

.construction-installer::after {
  content: "";
  position: absolute;
  left: -42px;
  top: -8px;
  width: 42px;
  height: 42px;
  border: 2px solid #003838;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px) 0 0 / 21px 21px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.22) 1px, transparent 1px) 0 0 / 21px 21px,
    #0080c0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.32);
}

.construction-monitors {
  display: none;
}

.construction-monitors::after {
  content: none;
}

.construction-sign {
  position: absolute;
  left: 412px;
  bottom: 92px;
  width: 112px;
  padding: 3px 4px;
  border: 2px solid #000000;
  background: #ffffcc;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  color: #000000;
  font-size: 9px;
  font-weight: 900;
  text-align: center;
  transform: rotate(-5deg);
}

.construction-worker {
  position: absolute;
  width: 18px;
  height: 30px;
  background:
    linear-gradient(#ffd400 0 7px, #f1b284 7px 13px, #2454c6 13px 24px, #151515 24px 30px);
  box-shadow:
    0 0 0 2px #001f1f,
    10px 8px 0 -6px var(--construction-orange),
    -8px 12px 0 -6px var(--construction-orange);
  image-rendering: pixelated;
  transform-origin: bottom center;
}

.construction-worker::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 6px;
  width: 26px;
  height: 4px;
  background: #ffd400;
  box-shadow: 7px 16px 0 #151515;
}

.construction-worker::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 8px;
  width: 10px;
  height: 3px;
  background: #f1b284;
  box-shadow: 6px 1px 0 #151515;
  transform: rotate(-18deg);
  transform-origin: left center;
}

.worker-one {
  left: 74px;
  bottom: 48px;
  animation: worker-bob 4.8s steps(2, end) infinite;
}

@keyframes worker-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes tile-load-swing {
  0%,
  100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(7deg);
  }
}

@keyframes installer-wobble {
  0%,
  100% {
    transform: rotate(-8deg) translate(0, 0);
  }

  50% {
    transform: rotate(-4deg) translate(1px, -1px);
  }
}

.taskbar-painter,
.bin-smoker {
  display: none;
  position: absolute;
  z-index: 49;
  pointer-events: none;
}

body[data-style="construction"] .taskbar-painter,
body[data-style="construction"] .bin-smoker {
  display: block;
}

.taskbar-painter {
  left: 96px;
  bottom: 0;
  width: 124px;
  height: 36px;
  animation: painter-walk 7s steps(12, end) infinite alternate;
}

.taskbar-painter::before {
  content: "";
  position: absolute;
  left: 28px;
  bottom: 5px;
  width: 72px;
  height: 7px;
  background:
    radial-gradient(circle at 12px 5px, #f0f0f0 0 2px, transparent 3px),
    radial-gradient(circle at 48px 2px, #f0f0f0 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), #eeeeee 22%, #d8d8d8 78%, rgba(255, 255, 255, 0.08));
  box-shadow:
    18px 4px 0 -2px #f6f6f6,
    38px -2px 0 -3px #ffffff;
}

.painter-person {
  position: absolute;
  left: 6px;
  bottom: 8px;
  width: 17px;
  height: 28px;
  background:
    linear-gradient(#ffd400 0 7px, #f1b284 7px 13px, #2454c6 13px 23px, #111111 23px);
  box-shadow:
    0 0 0 2px #001f1f,
    10px 8px 0 -6px #f1b284;
  image-rendering: pixelated;
}

.painter-roller {
  position: absolute;
  left: 26px;
  bottom: 9px;
  width: 32px;
  height: 3px;
  background: #111111;
  transform: rotate(-6deg);
}

.painter-roller::before {
  content: "";
  position: absolute;
  right: -15px;
  top: -3px;
  width: 17px;
  height: 8px;
  border: 1px solid #000000;
  background: #d0d0d0;
  box-shadow:
    inset 0 -2px 0 #a0a0a0,
    0 6px 0 -2px #f2f2f2,
    3px 8px 0 -3px #ffffff;
}

.painter-roller::after {
  content: "";
  position: absolute;
  right: -18px;
  top: 6px;
  width: 56px;
  height: 9px;
  background:
    radial-gradient(circle at 10px 5px, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 26px 7px, #e4e4e4 0 2px, transparent 3px),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72) 18%, rgba(210, 210, 210, 0.74) 70%, transparent);
}

.bin-smoker {
  right: 36px;
  bottom: 62px;
  width: 58px;
  height: 64px;
}

.bin-smoker::before {
  content: none;
}

.smoker-person {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 17px;
  height: 28px;
  background:
    linear-gradient(#151515 0 7px, #f1b284 7px 13px, #3b3b3b 13px 23px, #111111 23px);
  box-shadow:
    0 0 0 2px #001f1f,
    -9px 10px 0 -6px #f1b284,
    11px 10px 0 -6px #f1b284;
  image-rendering: pixelated;
}

.smoker-person::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 11px;
  width: 12px;
  height: 2px;
  background: #f8f0c4;
  box-shadow: 9px 0 0 -1px #7a7a7a;
}

.smoke-puff {
  position: absolute;
  right: -4px;
  bottom: 39px;
  width: 22px;
  height: 14px;
  background:
    radial-gradient(ellipse at 20% 55%, rgba(230, 230, 230, 0.92) 0 2px, transparent 3px),
    radial-gradient(ellipse at 50% 35%, rgba(215, 215, 215, 0.68) 0 3px, transparent 5px),
    radial-gradient(ellipse at 80% 55%, rgba(240, 240, 240, 0.78) 0 2px, transparent 4px);
  filter: blur(0.2px);
  opacity: 0;
  animation: smoke-wisp 8s ease-in-out infinite;
}

.puff-two {
  animation-delay: 1.4s;
}

.puff-three {
  animation-delay: 2.8s;
}

@keyframes painter-walk {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(220px);
  }
}

@keyframes smoke-wisp {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.65);
  }

  28% {
    opacity: 0;
  }

  36% {
    opacity: 0.82;
    transform: translate(-8px, -10px) scale(0.9);
  }

  52% {
    opacity: 0.44;
    transform: translate(-20px, -24px) scale(1.2);
  }

  100% {
    opacity: 0;
    transform: translate(-28px, -40px) scale(1.45);
  }
}

body[data-icon-size="small"] {
  --desktop-icon-scale: 0.82;
  --desktop-icon-width: 80px;
  --desktop-classic-icon-width: 76px;
  --desktop-icon-min-height: 62px;
  --desktop-classic-min-height: 56px;
  --desktop-icon-gap: 3px;
  --desktop-classic-gap: 2px;
  --desktop-icon-font-size: 12px;
}

body[data-icon-size="large"] {
  --desktop-icon-scale: 1.22;
  --desktop-icon-width: 116px;
  --desktop-classic-icon-width: 106px;
  --desktop-icon-min-height: 96px;
  --desktop-classic-min-height: 84px;
  --desktop-icon-gap: 9px;
  --desktop-classic-gap: 7px;
  --desktop-icon-font-size: 15px;
}

body[data-icon-size="large"] .desktop-classics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 196px;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

h1,
h2,
p {
  margin-top: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 12px;
  font-size: 29px;
  line-height: 1.08;
  letter-spacing: 0;
}

h2 {
  font-size: 20px;
  letter-spacing: 0;
}

pre {
  overflow: auto;
  margin: 0;
  max-height: 170px;
  padding: 10px;
  background: var(--paper);
  color: var(--text);
  white-space: pre-wrap;
}

code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
}

.desktop-shell {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) var(--taskbar-height);
  width: 100vw;
  height: 100vh;
}

.desktop-stage {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 18px;
}

.style-chooser {
  position: absolute;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.28);
}

.style-chooser.is-hidden {
  display: none;
}

.chooser-window {
  width: min(760px, calc(100vw - 36px));
  background: var(--surface);
  border-radius: var(--window-radius);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.38);
}

body[data-theme="win95"] .chooser-window,
body[data-theme="win95"] .style-card {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

body[data-theme="xp"] .chooser-window,
body[data-theme="win10"] .chooser-window {
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.style-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 154px;
  padding: 12px;
  border-radius: var(--button-radius);
  background: var(--surface-light);
  color: var(--text);
  text-align: left;
}

body[data-theme="xp"] .style-card,
body[data-theme="win10"] .style-card {
  border: 1px solid rgba(0, 0, 0, 0.28);
}

.style-card:hover,
.style-card:focus-visible {
  outline: 2px solid var(--title-bg);
}

.style-preview {
  display: block;
  height: 82px;
  border: 2px solid #000000;
}

.preview-construction {
  background:
    repeating-linear-gradient(135deg, #000000 0 8px, #ffd400 8px 16px) 0 0 / 100% 18px no-repeat,
    linear-gradient(#000080 18px, transparent 18px 23px),
    linear-gradient(90deg, rgba(255, 212, 0, 0.34) 1px, transparent 1px) 0 18px / 22px 22px,
    linear-gradient(0deg, rgba(0, 128, 128, 0.95) 1px, transparent 1px) 0 18px / 22px 22px,
    linear-gradient(90deg, #c0c0c0 0 36%, #008080 36% 100%);
}

.preview-95 {
  background:
    linear-gradient(#000080 0 18px, transparent 18px),
    linear-gradient(90deg, #c0c0c0 0 34%, #ffffff 34% 100%);
}

.preview-xp {
  border-radius: 4px;
  background:
    linear-gradient(#245edb 0 18px, transparent 18px),
    linear-gradient(135deg, #1c7ed6, #69db7c);
}

.preview-10 {
  background:
    linear-gradient(#101010 0 14px, transparent 14px),
    radial-gradient(ellipse at 72% 40%, rgba(0, 120, 215, 0.7), transparent 30%),
    linear-gradient(135deg, #05090d, #09233d 62%, #020305);
}

.generation-note {
  margin: 14px 0 8px;
  color: var(--muted);
  font-weight: 800;
}

.boring-link {
  display: inline-flex;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--title-bg);
  font-weight: 800;
  text-decoration: underline;
}

.boring-link.inline {
  margin-top: 14px;
}

body[data-theme="win10"] .boring-link {
  color: #8bd6ff;
}

body[data-theme="win10"] .boring-link:hover,
body[data-theme="win10"] .boring-link:focus-visible {
  color: #c7ecff;
}

.boring-confirm {
  position: absolute;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.24);
}

.boring-confirm.is-hidden {
  display: none;
}

.confirm-window {
  width: min(420px, calc(100vw - 36px));
  background: var(--surface);
  border-radius: var(--window-radius);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.38);
}

body[data-theme="win95"] .confirm-window {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

body[data-theme="xp"] .confirm-window,
body[data-theme="win10"] .confirm-window {
  border: 1px solid rgba(0, 0, 0, 0.34);
}

.confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.desktop-icons {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: var(--desktop-icon-width);
}

.desktop-classics {
  right: 18px;
  left: auto;
  width: var(--desktop-classic-icon-width);
  gap: 10px;
}

.desktop-bin {
  top: auto;
  right: 18px;
  bottom: 18px;
  left: auto;
  width: var(--desktop-classic-icon-width);
}

.desktop-classics .desktop-icon,
.desktop-bin .desktop-icon {
  min-height: var(--desktop-classic-min-height);
  gap: var(--desktop-classic-gap);
  font-size: 13px;
  line-height: 1.12;
}

.desktop-icon {
  display: grid;
  justify-items: center;
  gap: var(--desktop-icon-gap);
  min-height: var(--desktop-icon-min-height);
  padding: 5px;
  border: 1px solid transparent;
  background: transparent;
  color: #ffffff;
  font-size: var(--desktop-icon-font-size);
  text-align: center;
  text-shadow: 1px 1px 0 #000000;
  text-decoration: none;
}

.desktop-icon > .icon {
  transform: scale(var(--desktop-icon-scale));
  transform-origin: center center;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(0, 0, 0, 0.16);
  outline: none;
}

body[data-theme="win95"] .desktop-classics .classic-shortcut:not(.classic-era-95),
body[data-theme="xp"] .desktop-classics .classic-shortcut:not(.classic-era-xp),
body[data-theme="win10"] .desktop-classics .classic-shortcut:not(.classic-era-10) {
  display: none;
}

.icon {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 34px;
}

.folder-icon {
  width: 44px;
  height: 32px;
  margin-top: 8px;
  background: #f2d46b;
  border: 2px solid #000000;
}

.folder-icon::before {
  content: "";
  position: absolute;
  top: -11px;
  left: -2px;
  width: 21px;
  height: 11px;
  background: #f2d46b;
  border: 2px solid #000000;
  border-bottom: 0;
}

.document-icon,
.movie-icon {
  width: 32px;
  height: 40px;
  background: #ffffff;
  border: 2px solid #000000;
}

.document-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 6px;
  width: 17px;
  height: 2px;
  background: #000000;
  box-shadow: 0 7px 0 #000000, 0 14px 0 #000000;
}

.movie-icon {
  background: #eaeaea;
}

.movie-icon::after {
  content: "";
  position: absolute;
  inset: 7px;
  background:
    linear-gradient(90deg, #000000 3px, transparent 3px) 0 0 / 8px 8px,
    #ffffff;
  border: 1px solid #000000;
}

.settings-icon,
.search-icon,
.web-access-icon,
.info-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--surface-light);
  border: 2px solid #000000;
}

.settings-icon::before,
.settings-icon::after,
.search-icon::before,
.search-icon::after,
.web-access-icon::before,
.web-access-icon::after {
  content: "";
  position: absolute;
  display: block;
  box-sizing: border-box;
}

body[data-theme="win95"] .settings-icon {
  background: #c0c0c0;
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 #808080;
}

body[data-theme="win95"] .settings-icon::before {
  top: 7px;
  left: 6px;
  width: 26px;
  height: 22px;
  background:
    linear-gradient(#ff0000, #ff0000) 5px 5px / 5px 5px no-repeat,
    linear-gradient(#008000, #008000) 16px 5px / 5px 5px no-repeat,
    linear-gradient(#0000d8, #0000d8) 5px 13px / 5px 5px no-repeat,
    linear-gradient(#ffd400, #ffd400) 16px 13px / 5px 5px no-repeat,
    #dfdfdf;
  border: 2px solid #000000;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #808080;
}

body[data-theme="win95"] .settings-icon::after {
  top: 11px;
  left: 10px;
  width: 18px;
  height: 14px;
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
}

body[data-theme="win95"] .search-icon {
  background: #c0c0c0;
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 #808080;
}

body[data-theme="win95"] .search-icon::before {
  top: 5px;
  left: 5px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border: 3px solid #000000;
  border-radius: 50%;
  box-shadow: inset 2px 2px 0 #d7f0ff;
}

body[data-theme="win95"] .search-icon::after {
  top: 23px;
  left: 21px;
  width: 15px;
  height: 5px;
  background: #000000;
  transform: rotate(45deg);
  transform-origin: left center;
}

body[data-theme="xp"] .settings-icon,
body[data-theme="xp"] .search-icon {
  border: 1px solid #2e5fa7;
  border-radius: 6px;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9), transparent 28%),
    linear-gradient(135deg, #f7fbff 0%, #a7d4ff 48%, #3c8ee8 100%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.92),
    1px 1px 0 rgba(0, 0, 0, 0.22);
}

body[data-theme="xp"] .settings-icon::before {
  top: 7px;
  left: 7px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fffef0 0 5px, #1b62c9 6px 8px, transparent 9px),
    repeating-conic-gradient(#1b62c9 0 13deg, transparent 13deg 28deg);
}

body[data-theme="xp"] .settings-icon::after {
  top: 16px;
  left: 16px;
  width: 6px;
  height: 6px;
  background: #fffef0;
  border: 1px solid #0b3b85;
  border-radius: 50%;
}

body[data-theme="xp"] .search-icon::before {
  top: 6px;
  left: 6px;
  width: 20px;
  height: 20px;
  background:
    radial-gradient(circle at 35% 32%, rgba(255, 255, 255, 0.95), transparent 30%),
    #e6f7ff;
  border: 3px solid #1559b7;
  border-radius: 50%;
}

body[data-theme="xp"] .search-icon::after {
  top: 23px;
  left: 22px;
  width: 15px;
  height: 6px;
  background: linear-gradient(#ffd86b, #d48a11);
  border: 1px solid #875600;
  border-radius: 999px;
  transform: rotate(45deg);
  transform-origin: left center;
}

body[data-theme="win10"] .settings-icon,
body[data-theme="win10"] .search-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-theme="win10"] .settings-icon::before {
  top: 7px;
  left: 7px;
  width: 24px;
  height: 24px;
  border: 3px solid #f2f2f2;
  border-radius: 50%;
  box-shadow:
    0 -7px 0 -4px #f2f2f2,
    5px -5px 0 -4px #f2f2f2,
    7px 0 0 -4px #f2f2f2,
    5px 5px 0 -4px #f2f2f2,
    0 7px 0 -4px #f2f2f2,
    -5px 5px 0 -4px #f2f2f2,
    -7px 0 0 -4px #f2f2f2,
    -5px -5px 0 -4px #f2f2f2;
}

body[data-theme="win10"] .settings-icon::after {
  top: 16px;
  left: 16px;
  width: 6px;
  height: 6px;
  background: #f2f2f2;
  border-radius: 50%;
}

body[data-theme="win10"] .search-icon::before {
  top: 8px;
  left: 8px;
  width: 17px;
  height: 17px;
  border: 3px solid #f2f2f2;
  border-radius: 50%;
}

body[data-theme="win10"] .search-icon::after {
  top: 24px;
  left: 24px;
  width: 13px;
  height: 3px;
  background: #f2f2f2;
  border-radius: 999px;
  transform: rotate(45deg);
  transform-origin: left center;
}

.youtube-logo-icon {
  width: 48px;
  height: 34px;
  background: url("logos/youtube.svg") center / contain no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.32));
}

body[data-theme="win95"] .youtube-logo-icon,
body[data-theme="win95"] .youtube-label-modern {
  display: none;
}

body[data-theme="xp"] .youtube-movie-icon,
body[data-theme="xp"] .youtube-label-95,
body[data-theme="win10"] .youtube-movie-icon,
body[data-theme="win10"] .youtube-label-95 {
  display: none;
}

.web-access-icon,
.browser-title-icon,
.web-access-brand-logo {
  border: 0;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
}

.web-access-icon::before,
.web-access-icon::after {
  display: none;
  content: none;
}

body[data-theme="win95"] .web-access-icon,
body[data-theme="win95"] .browser-title-icon,
body[data-theme="win95"] .web-access-brand-logo {
  background-image: url("icons/browser-aol-1996.png");
  background-size: contain;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.32));
}

body[data-theme="xp"] .web-access-icon,
body[data-theme="xp"] .browser-title-icon,
body[data-theme="xp"] .web-access-brand-logo {
  background-image: url("icons/browser-ie-legacy.svg");
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.28));
}

body[data-theme="win10"] .web-access-icon,
body[data-theme="win10"] .browser-title-icon,
body[data-theme="win10"] .web-access-brand-logo {
  background-image: url("icons/browser-edge-legacy.svg");
}

.browser-title-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.web-access-window-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.web-access-brand-logo {
  width: 30px;
  height: 30px;
}

body[data-theme="win95"] .browser-title-icon,
body[data-theme="win95"] .web-access-brand-logo {
  background-color: #ffffff;
  border-color: #ffffff;
  filter: none;
}

.info-icon::after {
  content: "i";
  font-size: 28px;
  font-weight: 900;
}

.users-windows-icon {
  width: 38px;
  height: 38px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 31px auto;
  border: 0;
  box-shadow: none;
}

body[data-theme="win95"] .users-windows-icon {
  background-image: url("icons/windows-95-start.svg");
  background-size: 34px auto;
}

body[data-theme="xp"] .users-windows-icon {
  background-image: url("icons/windows-xp-start.svg");
  background-size: 33px auto;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.28));
}

body[data-theme="win10"] .users-windows-icon {
  background-image: url("icons/windows-10-start.svg");
  background-size: 25px auto;
  filter: none;
}

.classic-icon {
  width: 36px;
  height: 36px;
  border: 2px solid #000000;
  background: var(--surface-light);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.classic-logo-img {
  display: block;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}

.logo-img-icon {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
}

.msn-logo-icon {
  border: 0;
  background: transparent;
}

.classic-icon::before,
.classic-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.minesweeper-icon {
  background:
    linear-gradient(#c0c0c0 0 0) 4px 4px / 7px 7px,
    linear-gradient(#808080 0 0) 13px 4px / 7px 7px,
    linear-gradient(#c0c0c0 0 0) 22px 4px / 7px 7px,
    linear-gradient(#808080 0 0) 4px 13px / 7px 7px,
    linear-gradient(#c0c0c0 0 0) 13px 13px / 7px 7px,
    linear-gradient(#808080 0 0) 22px 13px / 7px 7px,
    linear-gradient(#c0c0c0 0 0) 4px 22px / 7px 7px,
    linear-gradient(#808080 0 0) 13px 22px / 7px 7px,
    linear-gradient(#c0c0c0 0 0) 22px 22px / 7px 7px,
    #a0a0a0;
  background-repeat: no-repeat;
}

.minesweeper-icon::before {
  left: 14px;
  top: 14px;
  width: 6px;
  height: 6px;
  background: #000000;
  border-radius: 50%;
}

.minesweeper-icon::after {
  right: 6px;
  top: 6px;
  width: 9px;
  height: 8px;
  background: #ff0000;
  border-left: 2px solid #000000;
}

.doom-icon {
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, #2a0000 0 18%, transparent 18% 82%, #2a0000 82%),
    linear-gradient(#111111 0 42%, #6a1912 42% 64%, #c77a22 64%);
  color: #ffe27a;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 10px;
  letter-spacing: 0;
  text-shadow: 1px 1px 0 #000000;
}

.doom-icon::before {
  content: "DOOM";
  position: static;
}

.quake-icon {
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #4b1a12 0 33%, #111111 34% 100%);
  color: #d56c35;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #000000;
}

.quake-icon::before {
  content: "Q";
  position: static;
}

.aoe-icon {
  display: grid;
  place-items: center;
  background:
    linear-gradient(#2e4a66 0 8px, transparent 8px),
    linear-gradient(90deg, #7b5a2d 0 9px, #d1b17b 9px 18px, #7b5a2d 18px 27px, #d1b17b 27px),
    #b99155;
  color: #fff3c0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #000000;
}

.aoe-icon::before {
  content: "AoE";
  position: static;
}

.coaster-icon {
  background:
    linear-gradient(160deg, transparent 0 52%, #2c2c2c 53% 56%, transparent 57%),
    radial-gradient(circle at 15% 78%, #000000 0 5px, transparent 6px),
    radial-gradient(circle at 68% 78%, #000000 0 5px, transparent 6px),
    linear-gradient(#5bb8ff 0 45%, #2f9e44 45%);
}

.coaster-icon::before {
  left: 6px;
  top: 12px;
  width: 24px;
  height: 16px;
  border: 3px solid #8b1e1e;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.limewire-icon {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, #dcff9f 0 22%, transparent 23%),
    radial-gradient(circle at 50% 50%, #4ead1f 0 45%, #195b12 46%);
  color: #ffffff;
  font-family: "Arial Black", Arial, sans-serif;
  font-size: 14px;
  text-shadow: 1px 1px 0 #000000;
}

.limewire-icon::before {
  content: "LW";
  position: static;
}

.wow-icon {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, #102d5a 0 46%, #cf9d42 47% 54%, #102d5a 55%);
  color: #ffd971;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 900;
  text-shadow: 1px 1px 0 #000000;
}

.wow-icon::before {
  content: "WoW";
  position: static;
}

.recycle-icon {
  background:
    linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.45) 9px 11px, transparent 11px),
    linear-gradient(90deg, transparent 0 17px, rgba(255, 255, 255, 0.45) 17px 19px, transparent 19px),
    linear-gradient(#d8f4ff, #8ab6c9);
  border-color: #295063;
}

.recycle-icon::before {
  left: 7px;
  top: 3px;
  width: 22px;
  height: 4px;
  background: #ccefff;
  border: 1px solid #295063;
}

.recycle-icon::after {
  left: 10px;
  top: 12px;
  width: 16px;
  height: 18px;
  border: 2px solid #295063;
  border-top: 0;
}

body[data-theme="win95"] .recycle-icon {
  background:
    linear-gradient(90deg, transparent 0 8px, #808080 8px 10px, transparent 10px 17px, #808080 17px 19px, transparent 19px),
    linear-gradient(#f2f2f2, #bdbdbd);
  border-color: #000000;
}

body[data-theme="win95"] .recycle-icon::before {
  background: #d0d0d0;
  border-color: #000000;
}

body[data-theme="win95"] .recycle-icon::after {
  border-color: #000000;
}

body[data-theme="xp"] .recycle-icon {
  background:
    linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.65) 9px 11px, transparent 11px 17px, rgba(255, 255, 255, 0.65) 17px 19px, transparent 19px),
    linear-gradient(#e9fbff, #74c9ef 58%, #3b8dcc);
  border-color: #155079;
}

body[data-theme="xp"] .recycle-icon::before,
body[data-theme="xp"] .recycle-icon::after {
  border-color: #155079;
}

body[data-theme="win10"] .recycle-icon {
  background:
    linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, 0.5) 9px 11px, transparent 11px 17px, rgba(255, 255, 255, 0.5) 17px 19px, transparent 19px),
    linear-gradient(rgba(230, 247, 255, 0.95), rgba(118, 178, 205, 0.95));
  border-color: #88b7c8;
}

body[data-theme="win10"] .recycle-icon::before,
body[data-theme="win10"] .recycle-icon::after {
  border-color: #5f91a5;
}

.desktop-window {
  position: absolute;
  z-index: 3;
  width: min(700px, calc(100vw - 168px));
  min-width: 260px;
  min-height: 180px;
  background: var(--surface);
  border-radius: var(--window-radius);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.65);
}

body[data-theme="win95"] .desktop-window,
body[data-theme="win95"] .system-button,
body[data-theme="win95"] .start-button,
body[data-theme="win95"] .taskbar-apps button,
body[data-theme="win95"] .window-controls button,
body[data-theme="win95"] .search-input,
body[data-theme="win95"] .file-row,
body[data-theme="win95"] .help-files article,
body[data-theme="win95"] .help-files button,
body[data-theme="win95"] .start-menu {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

body[data-theme="xp"] .desktop-window,
body[data-theme="win10"] .desktop-window {
  border: 1px solid rgba(0, 0, 0, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

body[data-theme="win10"] .desktop-window {
  overflow: hidden;
  border-color: #4a4a4a;
  background: var(--surface);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.46);
  backdrop-filter: none;
}

body[data-theme="win10"] .window-titlebar {
  min-height: 32px;
  padding: 0 0 0 10px;
  background: #202020;
  border-bottom: 1px solid #111111;
  font-weight: 600;
}

body[data-theme="win10"] .window-controls {
  gap: 0;
}

body[data-theme="win10"] .window-controls button {
  width: 46px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #f2f2f2;
  box-shadow: none;
  font-weight: 500;
}

body[data-theme="win10"] .window-controls button:hover,
body[data-theme="win10"] .window-controls button:focus-visible {
  background: #3a3a3a;
}

body[data-theme="win10"] .window-controls button[data-close]:hover,
body[data-theme="win10"] .window-controls button[data-close]:focus-visible {
  background: #e81123;
  color: #ffffff;
}

body[data-theme="win10"] .window-body {
  background: #1f1f1f;
  color: #f2f2f2;
}

.window-about {
  top: 32px;
  left: 132px;
}

.window-downloads {
  top: 82px;
  left: 132px;
}

.window-shopping-folder {
  top: 102px;
  left: 166px;
  width: min(620px, calc(100vw - 188px));
}

.window-shopping-info {
  top: 128px;
  left: 198px;
  width: min(640px, calc(100vw - 220px));
}

.window-help {
  top: 104px;
  left: 132px;
}

.window-help-text {
  top: 128px;
  left: 190px;
  width: min(590px, calc(100vw - 212px));
}

.window-first-prompt {
  top: 154px;
  left: 212px;
  width: min(620px, calc(100vw - 234px));
}

.window-search {
  top: 126px;
  left: 152px;
  width: min(520px, calc(100vw - 174px));
}

.window-system-info {
  top: 94px;
  left: 168px;
  width: min(620px, calc(100vw - 190px));
}

.window-settings {
  top: 148px;
  left: 132px;
  width: min(760px, calc(100vw - 80px));
}

.window-web-access {
  top: 116px;
  left: 176px;
  width: min(780px, calc(100vw - 198px));
}

.window-recycle {
  top: 92px;
  right: 132px;
  width: min(500px, calc(100vw - 260px));
}

.window-minesweeper {
  top: 82px;
  right: 142px;
  width: min(286px, calc(100vw - 160px));
}

.window-doom-lite {
  top: 132px;
  right: 160px;
  width: min(390px, calc(100vw - 180px));
}

.desktop-window.is-hidden {
  display: none;
}

.desktop-window.is-maximized,
.desktop-window.is-resized {
  display: flex;
  flex-direction: column;
  max-width: none;
}

.desktop-window.is-hidden,
.desktop-window.is-hidden.is-maximized,
.desktop-window.is-hidden.is-resized {
  display: none;
}

.desktop-window.is-maximized .window-body,
.desktop-window.is-resized .window-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

.window-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: 18px;
  height: 18px;
  border: 0;
  background:
    linear-gradient(135deg, transparent 0 49%, rgba(0, 0, 0, 0.65) 50% 55%, transparent 56%) 8px 8px / 7px 7px no-repeat,
    linear-gradient(135deg, transparent 0 49%, rgba(0, 0, 0, 0.65) 50% 55%, transparent 56%) 3px 8px / 12px 12px no-repeat;
  cursor: nwse-resize;
}

body[data-theme="win10"] .window-resize-handle {
  background:
    linear-gradient(135deg, transparent 0 49%, rgba(255, 255, 255, 0.72) 50% 54%, transparent 55%) 8px 8px / 7px 7px no-repeat,
    linear-gradient(135deg, transparent 0 49%, rgba(255, 255, 255, 0.72) 50% 54%, transparent 55%) 3px 8px / 12px 12px no-repeat;
}

.window-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 31px;
  padding: 4px 5px 4px 8px;
  border-radius: calc(var(--window-radius) - 1px) calc(var(--window-radius) - 1px) 0 0;
  background: var(--title-bg);
  color: var(--title-text);
  cursor: move;
  font-weight: 800;
}

.desktop-window.is-dragging .window-titlebar {
  cursor: grabbing;
}

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

.window-controls button {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  padding: 0;
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.window-body {
  overflow: auto;
  max-height: min(520px, calc(100vh - 160px));
  padding: 16px;
}

.folder-view {
  padding: 12px;
}

.window-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.34);
}

.folder-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 6px 8px;
  background: var(--surface-light);
}

body[data-theme="win95"] .folder-toolbar {
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid var(--surface-deep);
  border-bottom: 1px solid var(--surface-deep);
}

body[data-theme="xp"] .folder-toolbar,
body[data-theme="win10"] .folder-toolbar {
  border: 1px solid rgba(0, 0, 0, 0.22);
  border-radius: var(--button-radius);
}

body[data-theme="win10"] .folder-toolbar,
body[data-theme="win10"] .window-toolbar {
  border-color: #3c3c3c;
  background: #252525;
}

.tag {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 7px;
  background: var(--surface-light);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.lead {
  max-width: 650px;
  margin-bottom: 0;
  font-size: 18px;
}

.quick-actions,
.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.system-button,
.start-button,
.taskbar-apps button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 11px;
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
}

body[data-theme="xp"] .system-button,
body[data-theme="xp"] .start-button,
body[data-theme="xp"] .taskbar-apps button,
body[data-theme="xp"] .window-controls button {
  border: 1px solid #4169b2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="win10"] .system-button,
body[data-theme="win10"] .start-button,
body[data-theme="win10"] .taskbar-apps button,
body[data-theme="win10"] .window-controls button {
  border: 1px solid #4a4a4a;
  background: #2b2b2b;
  color: #f2f2f2;
  box-shadow: none;
}

body[data-theme="win10"] .system-button:hover,
body[data-theme="win10"] .system-button:focus-visible,
body[data-theme="win10"] .taskbar-apps button:hover,
body[data-theme="win10"] .taskbar-apps button:focus-visible {
  border-color: #5f5f5f;
  background: #3a3a3a;
  outline: none;
}

body[data-theme="win10"] .tag,
body[data-theme="win10"] .file-status {
  background: #303030;
  color: #f2f2f2;
}

body[data-theme="win10"] pre,
body[data-theme="win10"] .search-input,
body[data-theme="win10"] .file-row,
body[data-theme="win10"] .help-files article,
body[data-theme="win10"] .help-files button {
  border: 1px solid #3a3a3a;
  background: #252525;
  color: #f2f2f2;
}

body[data-theme="win10"] .search-input {
  outline-color: var(--accent);
}

body[data-theme="win10"] .window-controls button {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.system-button:active,
.start-button:active,
.taskbar-apps button:active {
  transform: translate(1px, 1px);
}

.system-button.is-active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

body[data-theme="win95"] .system-button.is-active {
  border-top-color: var(--surface-deep);
  border-left-color: var(--surface-deep);
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  background: var(--surface-light);
}

body[data-theme="win10"] .system-button.is-active {
  border-color: var(--accent);
  background: #003f73;
}

.settings-panel {
  padding: 0;
}

.settings-tabs {
  display: flex;
  align-items: end;
  gap: 2px;
  padding: 8px 8px 0;
  background: var(--surface);
}

.settings-tabs button {
  position: relative;
  top: 1px;
  min-height: 32px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
}

body[data-theme="win95"] .settings-tabs button {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

body[data-theme="win95"] .settings-tabs button.is-active {
  border-bottom-color: var(--surface);
}

body[data-theme="xp"] .settings-tabs {
  padding-top: 10px;
  background: #ece9d8;
}

body[data-theme="xp"] .settings-tabs button {
  border: 1px solid #7f8db9;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="xp"] .settings-tabs button.is-active {
  background: #fffef4;
}

body[data-theme="win10"] .settings-panel {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  padding: 0;
}

body[data-theme="win10"] .settings-tabs {
  display: grid;
  align-content: start;
  gap: 0;
  padding: 8px 0;
  border-right: 1px solid #3a3a3a;
  background: #1a1a1a;
}

body[data-theme="win10"] .settings-tabs button {
  top: 0;
  justify-content: start;
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f2f2f2;
  text-align: left;
}

body[data-theme="win10"] .settings-tabs button:hover,
body[data-theme="win10"] .settings-tabs button:focus-visible,
body[data-theme="win10"] .settings-tabs button.is-active {
  background: #303030;
  outline: none;
}

body[data-theme="win10"] .settings-tabs button.is-active {
  border-left: 3px solid var(--accent);
  padding-left: 11px;
}

.settings-content {
  min-height: 390px;
  padding: 16px;
  border-top: 2px solid var(--surface-deep);
  background: var(--surface);
}

body[data-theme="xp"] .settings-content {
  border-top: 1px solid #7f8db9;
  background: #fffef4;
}

body[data-theme="win10"] .settings-content {
  min-height: 430px;
  padding: 24px 28px;
  border-top: 0;
  background: #1f1f1f;
}

.settings-page.is-hidden {
  display: none;
}

.settings-page h2 {
  margin-bottom: 14px;
  font-size: 20px;
}

body[data-theme="win10"] .settings-page h2 {
  font-size: 28px;
  font-weight: 500;
}

.settings-system-info .system-info-version {
  min-height: 0;
}

body[data-theme="win95"] .settings-system-info .system-info-95 {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 18px;
}

.settings-system-info .system-computer-screen {
  width: 142px;
  height: 92px;
}

.settings-system-info .system-computer-screen .windows-logo {
  width: 52px;
  height: 52px;
}

.settings-system-info .system-computer-art::before {
  top: 112px;
}

.settings-system-info .system-computer-art::after {
  top: 150px;
}

body[data-theme="win10"] .settings-system-info .win10-system-list {
  grid-template-columns: 124px minmax(0, 1fr);
}

.view-settings-panel {
  display: grid;
  gap: 18px;
}

.view-settings-section {
  display: grid;
  gap: 10px;
}

.view-settings-section h2,
.view-settings-section h3 {
  margin: 0;
  font-size: 17px;
}

.view-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wallpaper-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wallpaper-picker button {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 112px;
  padding: 8px;
  border: 0;
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  text-align: left;
}

body[data-theme="win95"] .wallpaper-picker button {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

body[data-theme="xp"] .wallpaper-picker button,
body[data-theme="win10"] .wallpaper-picker button {
  border: 1px solid rgba(0, 0, 0, 0.32);
}

body[data-theme="win10"] .wallpaper-picker button {
  border-color: #4a4a4a;
  background: #252525;
  color: #f2f2f2;
}

.wallpaper-picker button:hover,
.wallpaper-picker button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.wallpaper-picker button.is-active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

body[data-theme="win95"] .wallpaper-picker button.is-active {
  border-top-color: var(--surface-deep);
  border-left-color: var(--surface-deep);
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.wallpaper-preview {
  display: block;
  aspect-ratio: 16 / 9;
  min-height: 54px;
  border: 2px solid #000000;
  background: var(--desktop-bg);
}

.wallpaper-grid {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 13px 13px,
    linear-gradient(0deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px) 0 0 / 13px 13px,
    radial-gradient(circle at 16% 22%, rgba(255, 212, 71, 0.32), transparent 29%),
    radial-gradient(circle at 82% 18%, rgba(0, 164, 239, 0.32), transparent 34%),
    linear-gradient(135deg, #065f73 0%, #1f2937 48%, #101010 100%);
}

.wallpaper-soft {
  background:
    radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.52), transparent 28%),
    radial-gradient(circle at 72% 68%, rgba(0, 120, 215, 0.28), transparent 35%),
    linear-gradient(135deg, #d9f0ff 0%, #6bb7ff 42%, #144e88 100%);
}

body[data-theme="win10"] .wallpaper-preview {
  border-color: #4a4a4a;
}

.file-list,
.help-files,
.search-results {
  display: grid;
  gap: 8px;
}

.file-row,
.help-files article,
.help-files button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 9px;
  border: 0;
  background: var(--paper);
  text-align: left;
}

button.file-row {
  width: 100%;
  color: var(--text);
  font: inherit;
}

button.file-row:hover,
button.file-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

body[data-theme="xp"] .file-row,
body[data-theme="xp"] .help-files article,
body[data-theme="xp"] .help-files button {
  border: 1px solid rgba(61, 82, 126, 0.35);
}

.recycle-file {
  grid-template-columns: 52px minmax(0, 1fr);
}

.help-files article,
.help-files button {
  grid-template-columns: 44px minmax(0, 1fr);
}

.help-files button {
  width: 100%;
  border: 0;
  font: inherit;
}

body[data-theme="win95"] .help-files button {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

body[data-theme="win10"] .help-files button {
  border: 1px solid #3a3a3a;
}

.help-files button:hover,
.help-files button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.help-files p,
.note,
.file-row span,
.search-label {
  color: var(--muted);
}

.file-row strong,
.help-files strong {
  display: block;
  margin-bottom: 2px;
}

.file-row .icon,
.help-files .icon {
  justify-self: center;
  margin-top: 0;
}

.file-row .folder-icon {
  width: 36px;
  height: 26px;
  margin-top: 4px;
}

.file-row .folder-icon::before {
  top: -8px;
  width: 17px;
  height: 8px;
}

.file-mini {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid #000000;
  background: var(--accent);
}

.zip-mini {
  background:
    linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, 0.8) 10px 13px, transparent 13px),
    var(--accent);
}

.file-status {
  padding: 3px 7px;
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.folder-icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 136px));
  align-content: start;
  gap: 20px 16px;
  min-height: 245px;
  padding: 14px;
  background: var(--paper);
}

body[data-theme="win95"] .folder-icons {
  border-top: 2px solid var(--surface-deep);
  border-left: 2px solid var(--surface-deep);
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

body[data-theme="xp"] .folder-icons,
body[data-theme="win10"] .folder-icons {
  border: 1px solid rgba(0, 0, 0, 0.22);
}

body[data-theme="win10"] .folder-icons {
  border: 0;
  background: transparent;
}

body[data-theme="win10"] .folder-view {
  padding: 18px;
}

.desktop-window.is-maximized .folder-view,
.desktop-window.is-resized .folder-view {
  display: flex;
  flex-direction: column;
}

.desktop-window.is-maximized .folder-icons,
.desktop-window.is-resized .folder-icons {
  flex: 1 1 auto;
  min-height: 0;
}

.folder-item,
.help-files .folder-item,
button.folder-item,
a.folder-item,
article.folder-item {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: start;
  gap: 6px;
  width: 128px;
  min-height: 82px;
  padding: 8px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
}

.folder-item > span:last-child {
  display: block;
  max-width: 100%;
  padding: 2px 5px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.folder-item:hover,
.folder-item:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
}

body[data-theme="win95"] .folder-item:hover,
body[data-theme="win95"] .folder-item:focus-visible {
  background: #000080;
  color: #ffffff;
}

body[data-theme="win10"] .folder-item:hover,
body[data-theme="win10"] .folder-item:focus-visible {
  background: rgba(0, 120, 215, 0.22);
  border-color: #0078d7;
}

.folder-item .icon {
  justify-self: center;
  margin: 0;
}

.folder-item .folder-icon,
body[data-theme="win95"] .folder-item .folder-icon,
body[data-theme="xp"] .folder-item .folder-icon,
body[data-theme="win10"] .folder-item .folder-icon {
  width: 48px;
  height: 48px;
  margin: 0;
}

.folder-item .document-icon,
.folder-item .movie-icon,
body[data-theme="win95"] .folder-item .document-icon,
body[data-theme="xp"] .folder-item .document-icon,
body[data-theme="win10"] .folder-item .document-icon,
body[data-theme="win95"] .folder-item .movie-icon,
body[data-theme="xp"] .folder-item .movie-icon,
body[data-theme="win10"] .folder-item .movie-icon {
  width: 42px;
  height: 46px;
}

.stash-icon {
  width: 98px;
  height: 72px;
  background: url("icons/stash-folder-win95.png") center / contain no-repeat;
  border: 0;
  box-shadow: none;
}

.folder-item .stash-icon {
  width: 98px;
  height: 72px;
}

.recycle-file.folder-item {
  width: 112px;
}

.window-recycle .folder-icons {
  align-items: start;
}

.window-recycle .folder-item {
  align-content: end;
  min-height: 104px;
}

.window-recycle .folder-item .icon {
  align-self: end;
}

.window-shopping-screenshots {
  width: min(760px, calc(100vw - 168px));
}

.window-paint-viewer {
  width: min(860px, calc(100vw - 168px));
}

.screenshot-icons {
  grid-template-columns: repeat(auto-fill, minmax(132px, 148px));
  gap: 20px 18px;
}

.screenshot-file {
  min-height: 126px;
}

.screenshot-thumb {
  display: grid;
  place-items: center;
  width: 108px;
  height: 72px;
  padding: 3px;
  border: 2px solid #808080;
  background: #ffffff;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #404040;
}

.screenshot-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

body[data-theme="win10"] .screenshot-thumb {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #111111;
  box-shadow: none;
}

.paint-viewer {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: min(680px, calc(100vh - 136px));
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

.paint-menu {
  display: flex;
  gap: 18px;
  padding: 4px 8px;
  border-bottom: 1px solid var(--surface-dark);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.paint-toolbar {
  display: grid;
  grid-template-columns: repeat(12, 22px);
  gap: 3px;
  padding: 6px 8px;
  border-bottom: 2px solid var(--surface-dark);
  background: var(--surface);
}

.paint-toolbar span {
  width: 20px;
  height: 20px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid var(--surface-deep);
  border-bottom: 1px solid var(--surface-deep);
  border-left: 1px solid #ffffff;
  background:
    linear-gradient(135deg, transparent 0 46%, #101010 47% 53%, transparent 54%),
    #c0c0c0;
}

.paint-toolbar span:nth-child(3n) {
  background:
    radial-gradient(circle at 50% 50%, #101010 0 3px, transparent 4px),
    #c0c0c0;
}

.paint-toolbar span:nth-child(4n) {
  background:
    linear-gradient(90deg, transparent 0 30%, #101010 31% 39%, transparent 40% 60%, #101010 61% 69%, transparent 70%),
    #c0c0c0;
}

.paint-canvas {
  min-height: 0;
  margin: 0;
  padding: 14px;
  overflow: auto;
  background:
    linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.16) 75%),
    linear-gradient(45deg, rgba(255, 255, 255, 0.16) 25%, transparent 25% 75%, rgba(255, 255, 255, 0.16) 75%),
    #808080;
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
}

.paint-canvas img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 58vh;
  height: auto;
  margin: 0 auto;
  border: 3px solid #ffffff;
  background: #ffffff;
  box-shadow:
    0 0 0 1px #000000,
    6px 6px 0 rgba(0, 0, 0, 0.4);
  image-rendering: auto;
}

.paint-canvas figcaption {
  width: max-content;
  max-width: 100%;
  margin: 8px auto 0;
  padding: 2px 7px;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
  font-size: 12px;
}

body[data-theme="win10"] .paint-menu,
body[data-theme="win10"] .paint-toolbar {
  border-color: rgba(255, 255, 255, 0.18);
}

.folder-item .file-mini {
  width: 40px;
  height: 40px;
}

body[data-theme="win95"] .help-files .folder-item,
body[data-theme="xp"] .help-files .folder-item,
body[data-theme="win10"] .help-files .folder-item {
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}

body[data-theme="win95"] .help-files .folder-item:hover,
body[data-theme="win95"] .help-files .folder-item:focus-visible {
  border-color: var(--accent);
  background: #000080;
  color: #ffffff;
}

body[data-theme="xp"] .help-files .folder-item:hover,
body[data-theme="xp"] .help-files .folder-item:focus-visible,
body[data-theme="win10"] .help-files .folder-item:hover,
body[data-theme="win10"] .help-files .folder-item:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.cigarette-pack-icon {
  position: relative;
  width: 34px;
  height: 42px;
  border: 2px solid #111111;
  background:
    linear-gradient(#ffffff 0 16px, #c91515 16px 29px, #ffffff 29px 100%);
  box-shadow:
    inset 8px 0 0 rgba(0, 0, 0, 0.08),
    2px 2px 0 rgba(0, 0, 0, 0.28);
}

.cigarette-pack-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -8px;
  width: 20px;
  height: 9px;
  border: 2px solid #111111;
  border-bottom: 0;
  background: #ffffff;
  transform: rotate(-8deg);
}

.cigarette-pack-icon::after {
  content: "EMPTY";
  position: absolute;
  left: 3px;
  bottom: 3px;
  color: #111111;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0;
}

.note {
  margin: 12px 0 0;
  font-size: 13px;
}

.text-file-view {
  padding: 0;
}

.text-file-window.is-maximized .text-file-view,
.text-file-window.is-resized .text-file-view {
  display: flex;
  flex-direction: column;
}

.text-file-menu {
  display: flex;
  gap: 16px;
  min-height: 28px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.34);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.text-file-content {
  min-height: 300px;
  max-height: min(420px, calc(100vh - 210px));
  padding: 14px;
  border: 0;
  background: var(--paper);
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
  font-size: 14px;
  line-height: 1.45;
}

.text-file-window.is-maximized .text-file-content,
.text-file-window.is-resized .text-file-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

body[data-theme="win10"] .text-file-menu {
  border-color: #3c3c3c;
  background: #252525;
}

.web-access-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: min(470px, calc(100vh - 164px));
  padding: 0;
  overflow: hidden;
  background: var(--surface);
}

.web-access-toolbar {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.32);
}

.web-access-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
}

.web-access-topbar,
.web-access-menu,
.web-access-tool-row,
.web-access-form,
.web-access-linkbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-access-topbar {
  justify-content: space-between;
  padding: 6px 8px;
}

.web-access-connection {
  font-size: 12px;
  font-weight: 800;
}

.web-access-menu {
  min-height: 25px;
  padding: 3px 8px;
  font-size: 13px;
}

.web-access-menu span {
  padding: 2px 8px 2px 0;
}

.web-access-tool-row {
  min-height: 40px;
  padding: 5px 8px;
}

.web-access-tool-row button {
  min-width: 52px;
  min-height: 31px;
  padding: 4px 6px;
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}

.web-access-form {
  padding: 5px 8px 7px;
}

.web-access-address-label {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.web-access-address {
  flex: 1 1 auto;
  min-width: 120px;
  min-height: 31px;
  padding: 5px 8px;
  border-radius: var(--button-radius);
  background: var(--paper);
  color: var(--text);
}

.web-access-linkbar {
  min-height: 28px;
  padding: 3px 8px 6px;
  font-size: 12px;
  font-weight: 800;
}

.web-access-linkbar span {
  padding: 2px 8px;
}

.web-access-status {
  margin: 0;
  padding: 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.web-access-frame {
  flex: 1 1 auto;
  width: 100%;
  min-height: 300px;
  border: 0;
  background: #ffffff;
}

.desktop-window.is-maximized .web-access-view,
.desktop-window.is-resized .web-access-view {
  min-height: 0;
}

.desktop-window.is-maximized .web-access-frame,
.desktop-window.is-resized .web-access-frame {
  min-height: 0;
}

body[data-theme="win95"] .web-access-view {
  padding: 4px;
  background: #c0c0c0;
}

body[data-theme="win95"] .web-access-toolbar {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  background: #c0c0c0;
}

body[data-theme="win95"] .web-access-topbar {
  min-height: 42px;
  background:
    linear-gradient(90deg, #11206f 0 64%, #5c1f86 100%);
  color: #ffffff;
}

body[data-theme="win95"] .web-access-brand-text {
  font-size: 19px;
  letter-spacing: 0;
}

body[data-theme="win95"] .web-access-connection {
  color: #ffe88a;
}

body[data-theme="win95"] .web-access-menu {
  background: #d8d8d8;
}

body[data-theme="win95"] .web-access-tool-row {
  background: #efe6a7;
}

body[data-theme="win95"] .web-access-tool-row button {
  min-width: 58px;
  background: #f3d56f;
  border-top: 2px solid #fff5bb;
  border-left: 2px solid #fff5bb;
  border-right: 2px solid #806000;
  border-bottom: 2px solid #806000;
  color: #111111;
}

body[data-theme="win95"] .web-access-form {
  background: #e7e7e7;
}

body[data-theme="win95"] .web-access-linkbar {
  background: #173991;
  color: #ffffff;
}

body[data-theme="win95"] .web-access-linkbar span {
  border-right: 1px solid rgba(255, 255, 255, 0.55);
}

body[data-theme="win95"] .web-access-status {
  padding-top: 4px;
}

body[data-theme="win95"] .web-access-frame {
  border-top: 2px solid var(--surface-deep);
  border-left: 2px solid var(--surface-deep);
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

body[data-theme="xp"] .web-access-view {
  padding: 0;
  background: #ece9d8;
}

body[data-theme="xp"] .web-access-toolbar {
  border-bottom: 1px solid #b6b4a3;
  background: linear-gradient(#fffef8, #ece9d8);
}

body[data-theme="xp"] .web-access-topbar {
  min-height: 28px;
  padding: 3px 8px;
  background: linear-gradient(#f7f4e9, #e3dfce);
}

body[data-theme="xp"] .web-access-brand-logo {
  width: 22px;
  height: 22px;
}

body[data-theme="xp"] .web-access-brand-text {
  font-size: 13px;
}

body[data-theme="xp"] .web-access-menu {
  padding-top: 1px;
  padding-bottom: 1px;
  background: #f6f4eb;
}

body[data-theme="xp"] .web-access-tool-row {
  gap: 10px;
  min-height: 42px;
  background: #efead8;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #c2bea8;
}

body[data-theme="xp"] .web-access-tool-row button {
  min-width: auto;
  border: 1px solid transparent;
  background: transparent;
  padding-right: 3px;
  padding-left: 3px;
  white-space: nowrap;
}

body[data-theme="xp"] .web-access-tool-row button:hover,
body[data-theme="xp"] .web-access-tool-row button:focus-visible {
  border-color: #316ac5;
  background: linear-gradient(#fffedb, #ffd775);
}

body[data-theme="xp"] .web-access-form {
  background: #f6f4eb;
  border-bottom: 1px solid #c2bea8;
}

body[data-theme="xp"] .web-access-linkbar {
  color: #003399;
  background: #f6f4eb;
}

body[data-theme="xp"] .web-access-linkbar span {
  padding-right: 12px;
  padding-left: 0;
}

body[data-theme="xp"] .web-access-frame {
  margin: 0 6px 6px;
  border: 1px solid rgba(61, 82, 126, 0.45);
}

body[data-theme="win10"] .web-access-view {
  padding: 0;
  background: #f3f3f3;
  color: #1f1f1f;
}

body[data-theme="win10"] .web-access-toolbar {
  border-bottom: 1px solid #d2d2d2;
  background: #f3f3f3;
}

body[data-theme="win10"] .web-access-topbar {
  min-height: 36px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 8px;
  background: #e8e8e8;
}

body[data-theme="win10"] .web-access-brand {
  align-self: end;
  min-width: 176px;
  min-height: 31px;
  padding: 5px 12px 5px 9px;
  border-top: 2px solid #0078d7;
  background: #f9f9f9;
  color: #1f1f1f;
  font-weight: 700;
}

body[data-theme="win10"] .web-access-brand-logo {
  width: 20px;
  height: 20px;
}

body[data-theme="win10"] .web-access-brand-text {
  font-size: 13px;
}

body[data-theme="win10"] .web-access-connection {
  display: none;
}

body[data-theme="win10"] .web-access-menu,
body[data-theme="win10"] .web-access-tool-row,
body[data-theme="win10"] .web-access-linkbar {
  display: none;
}

body[data-theme="win10"] .web-access-form {
  gap: 8px;
  min-height: 44px;
  padding: 7px 8px;
  background: #f9f9f9;
}

body[data-theme="win10"] .web-access-address-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-theme="win10"] .web-access-address {
  min-height: 32px;
  border: 1px solid #c8c8c8;
  background: #ffffff;
  color: #1f1f1f;
}

body[data-theme="win10"] .web-access-go,
body[data-theme="win10"] [data-web-home] {
  min-width: 42px;
  border: 0;
  background: transparent;
  color: #1f1f1f;
}

body[data-theme="win10"] .web-access-status {
  padding-top: 3px;
  color: #555555;
}

body[data-theme="win10"] .web-access-frame {
  margin: 0 8px 8px;
  border: 1px solid #dddddd;
}

.search-label {
  display: block;
  margin-bottom: 7px;
  font-weight: 800;
}

.search-input {
  display: block;
  width: 100%;
  min-height: 34px;
  margin-bottom: 12px;
  padding: 6px 8px;
  border-radius: var(--button-radius);
  background: var(--paper);
  color: var(--text);
}

.search-result-group {
  display: grid;
  gap: 8px;
}

.search-result-group.is-hidden,
.search-results button.is-filtered-out,
.search-empty.is-hidden {
  display: none;
}

.search-result-icons {
  grid-template-columns: repeat(auto-fill, minmax(124px, 136px));
  min-height: 0;
  padding: 10px;
}

.search-result-icons .folder-item {
  width: 128px;
}

.search-empty {
  margin: 0;
  padding: 12px;
  background: var(--paper);
  color: var(--muted);
}

body[data-theme="win95"] .search-empty {
  border-top: 2px solid var(--surface-deep);
  border-left: 2px solid var(--surface-deep);
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

body[data-theme="win10"] .search-empty {
  border: 1px solid #3a3a3a;
  background: #252525;
  color: #b8b8b8;
}

.system-info-panel {
  padding: 0;
}

.system-info-tabs {
  display: flex;
  align-items: end;
  gap: 2px;
  padding: 8px 8px 0;
  background: var(--surface);
}

.system-info-tabs span {
  position: relative;
  top: 1px;
  padding: 6px 12px;
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
}

body[data-theme="win95"] .system-info-tabs span {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

body[data-theme="win95"] .system-info-tabs span.is-active {
  border-bottom-color: var(--surface);
}

body[data-theme="xp"] .system-info-tabs {
  padding-top: 10px;
  background: #ece9d8;
}

body[data-theme="xp"] .system-info-tabs span {
  border: 1px solid #7f8db9;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

body[data-theme="win10"] .system-info-tabs {
  display: none;
}

.system-info-version {
  display: none;
  min-height: 342px;
}

body[data-theme="win95"] .system-info-95 {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 30px 28px 26px;
  border-top: 2px solid var(--surface-deep);
  background: #c0c0c0;
}

.system-computer-art {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 190px;
}

.system-computer-screen {
  position: relative;
  display: grid;
  place-items: center;
  width: 168px;
  height: 108px;
  margin-top: 16px;
  border: 10px solid #d9d9d9;
  border-right-color: #8c8c8c;
  border-bottom-color: #8c8c8c;
  background: #008080;
  box-shadow:
    inset 0 0 0 2px #000000,
    0 0 0 2px #808080;
}

.system-computer-screen .windows-logo {
  width: 64px;
  height: 64px;
  transform: skewY(-8deg);
}

.system-computer-art::before {
  content: "";
  position: absolute;
  top: 128px;
  width: 58px;
  height: 28px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 22px solid #b7b7b7;
}

.system-computer-art::after {
  content: "";
  position: absolute;
  top: 166px;
  width: 112px;
  height: 12px;
  border: 2px solid #707070;
  background: #d9d9d9;
}

.system-info-list {
  margin: 0;
}

.system-info-list dt {
  margin-top: 16px;
  font-weight: 900;
}

.system-info-list dt:first-child {
  margin-top: 0;
}

.system-info-list dd {
  margin: 4px 0 0 28px;
}

body[data-theme="xp"] .system-info-xp {
  display: grid;
  gap: 18px;
  padding: 18px 22px 24px;
  border-top: 1px solid #7f8db9;
  background:
    linear-gradient(90deg, rgba(36, 94, 219, 0.13), transparent 44%),
    #fffef4;
  color: #000000;
}

.xp-system-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 13px 16px;
  border: 1px solid #9fb1d9;
  border-radius: 5px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.9), transparent 28%),
    linear-gradient(90deg, #245edb, #6aa5ff);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.xp-system-banner .windows-logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.38));
  transform: skewY(-8deg);
}

.xp-system-banner strong,
.xp-system-banner span {
  display: block;
}

.xp-system-banner strong {
  font-size: 20px;
}

body[data-theme="xp"] .system-info-xp .system-info-list {
  padding: 10px 4px 0;
}

body[data-theme="xp"] .system-info-xp dt {
  margin-top: 14px;
}

body[data-theme="xp"] .system-info-xp dd {
  margin-left: 24px;
}

body[data-theme="win10"] .system-info-10 {
  display: block;
  min-height: 390px;
  padding: 28px 32px 32px;
  background: #1f1f1f;
  color: #f2f2f2;
}

.win10-about-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.win10-about-heading .info-icon {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-color: #4a4a4a;
  background: #2d2d2d;
  color: #ffffff;
}

.win10-about-heading h2,
.win10-about-heading h3 {
  margin: 0 0 3px;
  font-size: 28px;
  font-weight: 500;
}

.win10-about-heading p {
  margin: 0;
  color: #c7c7c7;
}

.win10-system-list {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px 22px;
}

.win10-system-list dt {
  margin: 0;
  color: #c7c7c7;
  font-weight: 500;
}

.win10-system-list dd {
  margin: 0;
}

.minesweeper-view {
  overflow: hidden;
  max-height: none;
  padding: 0;
  background: var(--surface);
}

.game-menu {
  display: flex;
  gap: 4px;
  min-height: 24px;
  padding: 3px 6px;
  border-bottom: 1px solid var(--surface-deep);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
}

.game-menu button {
  min-height: 20px;
  padding: 1px 7px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
}

.game-menu button:hover,
.game-menu button:focus-visible {
  border-color: var(--surface-dark);
  background: var(--surface-light);
  outline: none;
}

body[data-theme="win95"] .game-menu button:hover,
body[data-theme="win95"] .game-menu button:focus-visible {
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-right-color: var(--surface-deep);
  border-bottom-color: var(--surface-deep);
}

body[data-theme="win10"] .game-menu button:hover,
body[data-theme="win10"] .game-menu button:focus-visible {
  border-color: #4a4a4a;
  background: #3a3a3a;
}

.mine-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 8px;
  padding: 6px;
  background: var(--surface);
}

body[data-theme="win95"] .mine-panel,
body[data-theme="win95"] .mine-board {
  border-top: 2px solid var(--surface-deep);
  border-left: 2px solid var(--surface-deep);
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

.mine-display {
  min-width: 54px;
  padding: 2px 5px;
  background: #000000;
  color: #ff1f1f;
  font-family: "Courier New", monospace;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-align: right;
  text-shadow: 0 0 5px rgba(255, 0, 0, 0.75);
}

.mine-reset {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  padding: 0;
  background: var(--surface);
  color: #000000;
  font-family: "Courier New", monospace;
  font-size: 15px;
  font-weight: 900;
}

body[data-theme="win95"] .mine-reset,
body[data-theme="win95"] .mine-cell {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

.mine-board {
  --mine-cols: 9;
  --mine-cell-size: 24px;
  display: grid;
  grid-template-columns: repeat(var(--mine-cols), var(--mine-cell-size));
  width: max-content;
  margin: 8px auto;
  background: var(--surface);
}

.mine-cell {
  display: grid;
  place-items: center;
  width: var(--mine-cell-size);
  height: var(--mine-cell-size);
  padding: 0;
  background: var(--surface);
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(var(--mine-cell-size) * 0.62);
  font-weight: 900;
  line-height: 1;
}

.mine-cell.is-open {
  border: 1px solid #808080;
  background: #c0c0c0;
}

.mine-cell.is-flagged {
  color: #d00000;
}

.mine-cell.is-mine {
  background: #ff5b5b;
  color: #000000;
}

.mine-cell[data-count="1"] {
  color: #0000d8;
}

.mine-cell[data-count="2"] {
  color: #008000;
}

.mine-cell[data-count="3"] {
  color: #d00000;
}

.mine-cell[data-count="4"] {
  color: #000080;
}

.mine-cell[data-count="5"] {
  color: #800000;
}

.mine-cell[data-count="6"] {
  color: #008080;
}

.mine-cell[data-count="7"] {
  color: #000000;
}

.mine-cell[data-count="8"] {
  color: #808080;
}

.mine-status {
  min-height: 20px;
  margin: 0;
  padding: 0 10px 9px;
  color: var(--muted);
  font-size: 12px;
}

body[data-theme="xp"] .mine-panel,
body[data-theme="xp"] .mine-board,
body[data-theme="win10"] .mine-panel,
body[data-theme="win10"] .mine-board {
  border: 1px solid rgba(0, 0, 0, 0.28);
}

body[data-theme="xp"] .mine-reset,
body[data-theme="xp"] .mine-cell,
body[data-theme="win10"] .mine-reset,
body[data-theme="win10"] .mine-cell {
  border: 1px solid rgba(0, 0, 0, 0.34);
}

body[data-theme="win10"] .minesweeper-view,
body[data-theme="win10"] .game-menu,
body[data-theme="win10"] .mine-panel,
body[data-theme="win10"] .mine-board,
body[data-theme="win10"] .mine-reset,
body[data-theme="win10"] .mine-cell {
  background: #c0c0c0;
  color: #000000;
}

body[data-theme="win10"] .game-menu {
  border-bottom-color: #868686;
}

.window-minesweeper.is-maximized .minesweeper-view,
.window-minesweeper.is-resized .minesweeper-view {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.window-minesweeper.is-maximized .mine-panel,
.window-minesweeper.is-resized .mine-panel {
  margin: 12px;
  padding: 8px;
}

.window-minesweeper.is-maximized .mine-board,
.window-minesweeper.is-resized .mine-board {
  --mine-cell-size: clamp(30px, min(5.2vw, 7vh), 42px);
  align-self: center;
  justify-self: center;
  margin: 12px auto;
}

.doom-view {
  overflow: hidden;
  max-height: none;
  padding: 10px;
  background: #111111;
  color: #f1f1f1;
  font-family: "Courier New", monospace;
}

.doom-splash {
  position: relative;
  display: grid;
  min-height: 265px;
  overflow: hidden;
  padding: 0;
  border: 2px solid #050505;
  background: #000000;
  text-align: center;
  image-rendering: pixelated;
}

.doom-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 68%, rgba(0, 0, 0, 0.72) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.doom-splash-image,
.doom-play-button {
  position: relative;
  z-index: 1;
}

.doom-splash-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.doom-play-button {
  align-self: end;
  justify-self: center;
  min-width: 116px;
  margin: 0 0 18px;
  border-color: #fff3a8 #4a1408 #4a1408 #fff3a8;
  background: #ffd447;
  color: #170300;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.7),
    0 0 14px rgba(255, 212, 71, 0.75);
  font-family: "Arial Black", Impact, sans-serif;
  letter-spacing: 0;
  text-transform: uppercase;
  animation: doom-play-flash 880ms steps(2, end) infinite;
}

.doom-play-button:hover,
.doom-play-button:focus-visible {
  background: #ffef73;
}

@keyframes doom-play-flash {
  0%,
  49% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1.25);
  }

  50%,
  100% {
    opacity: 0.72;
    transform: translateY(1px) scale(1.04);
    filter: saturate(1.6) brightness(1.18);
  }
}

.doom-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border: 2px solid #050505;
  background: #000000;
  image-rendering: pixelated;
}

.doom-canvas:focus-visible {
  outline: 2px solid #ff2b2b;
  outline-offset: 2px;
}

.doom-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 7px;
  padding: 6px;
  background: #2a2a2a;
  color: #ffcf55;
  font-size: 13px;
  text-align: center;
}

.doom-hud strong {
  display: block;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.1;
}

.doom-actions {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: #d8d8d8;
  font-size: 12px;
}

.doom-actions .system-button {
  min-height: 27px;
  padding: 4px 9px;
}

body[data-theme="win95"] .doom-view {
  border-top: 2px solid var(--surface-deep);
  border-left: 2px solid var(--surface-deep);
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

.window-doom-lite.is-maximized .doom-view,
.window-doom-lite.is-resized .doom-view {
  display: grid;
}

.window-doom-lite.is-maximized .doom-splash,
.window-doom-lite.is-resized .doom-splash {
  min-height: 0;
  height: 100%;
}

.taskbar {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-height: var(--taskbar-height);
  padding: 5px;
  background: var(--surface);
}

body[data-theme="win95"] .taskbar {
  border-top: 2px solid #ffffff;
}

body[data-style="construction"] .taskbar::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 118px;
  bottom: 8px;
  width: 310px;
  height: 8px;
  pointer-events: none;
  background:
    radial-gradient(circle at 38px 6px, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 150px 2px, #eeeeee 0 2px, transparent 3px),
    radial-gradient(circle at 232px 7px, #f8f8f8 0 2px, transparent 3px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.0), #f7f7f7 8%, #dcdcdc 72%, rgba(255, 255, 255, 0.0));
  box-shadow:
    70px -4px 0 -3px #ffffff,
    205px 4px 0 -3px #eeeeee;
}

body[data-theme="xp"] .taskbar {
  background:
    linear-gradient(rgba(255, 255, 255, 0.25), transparent 35%),
    linear-gradient(#2f75df 0%, #245ed0 42%, #1749a8 100%);
}

body[data-theme="win10"] .taskbar {
  min-height: 48px;
  background: rgba(16, 16, 16, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: none;
}

.start-mark {
  flex: 0 0 auto;
}

.windows-logo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px;
  width: 22px;
  height: 22px;
}

.windows-logo span {
  display: block;
}

.windows-logo span:nth-child(1) {
  background: #f25022;
}

.windows-logo span:nth-child(2) {
  background: #7fba00;
}

.windows-logo span:nth-child(3) {
  background: #00a4ef;
}

.windows-logo span:nth-child(4) {
  background: #ffb900;
}

body[data-theme="win95"] .start-button {
  min-height: 34px;
  padding: 4px 12px 4px 7px;
  gap: 5px;
}

body[data-theme="win95"] .start-mark {
  width: 22px;
  height: 18px;
  transform: skewY(-7deg);
}

body[data-theme="win95"] .start-label {
  font-weight: 900;
}

.taskbar-apps {
  display: flex;
  gap: 5px;
  min-width: 0;
  overflow-x: auto;
}

.taskbar-apps button {
  min-width: 120px;
}

.taskbar-apps button.is-hidden {
  display: none;
}

.taskbar-apps button.is-active {
  background: var(--surface-light);
}

body[data-theme="win10"] .taskbar-apps button {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  font-weight: 500;
}

body[data-theme="win10"] .taskbar-apps button.is-active {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.taskbar-clock {
  min-width: 74px;
  padding: 6px 8px;
  background: var(--surface);
  color: var(--text);
  text-align: center;
}

body[data-theme="win95"] .taskbar-clock {
  border-top: 1px solid var(--surface-deep);
  border-left: 1px solid var(--surface-deep);
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}

body[data-theme="xp"] .taskbar-clock,
body[data-theme="win10"] .taskbar-clock {
  border-radius: var(--button-radius);
}

body[data-theme="win10"] .taskbar-clock {
  min-height: 38px;
  background: transparent;
  color: #ffffff;
}

.start-menu {
  position: absolute;
  left: 6px;
  bottom: calc(var(--taskbar-height) - 1px);
  z-index: 80;
  display: grid;
  grid-template-columns: 38px minmax(220px, 280px);
  min-height: 290px;
  background: var(--surface);
  border-radius: var(--window-radius);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.55);
}

body[data-theme="win10"] .start-menu {
  left: 0;
  bottom: var(--taskbar-height);
  grid-template-columns: minmax(260px, 330px);
  min-height: 360px;
  background: rgba(32, 32, 32, 0.98);
  border: 1px solid #3d3d3d;
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.38);
}

body[data-theme="win10"] .start-strip {
  display: none;
}

body[data-theme="win10"] .start-items {
  gap: 0;
  padding: 8px 0;
}

body[data-theme="win10"] .start-items button,
body[data-theme="win10"] .start-items a {
  min-height: 46px;
  padding: 6px 14px;
  color: #f2f2f2;
  font-weight: 500;
}

body[data-theme="win10"] .start-items button:hover,
body[data-theme="win10"] .start-items button:focus-visible,
body[data-theme="win10"] .start-items a:hover,
body[data-theme="win10"] .start-items a:focus-visible {
  background: #3a3a3a;
  color: #ffffff;
}

.start-menu.is-hidden {
  display: none;
}

.start-strip {
  display: grid;
  place-items: end center;
  padding: 10px 4px;
  background: var(--title-bg);
  color: var(--title-text);
  font-weight: 900;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.start-items {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 8px;
}

.start-items button,
.start-items a {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  text-decoration: none;
  font-weight: 800;
}

.start-items button:hover,
.start-items button:focus-visible,
.start-items a:hover,
.start-items a:focus-visible {
  background: var(--title-bg);
  color: var(--title-text);
  outline: none;
}

.start-separator {
  height: 1px;
  margin: 4px 4px 6px;
  background: var(--surface-deep);
  box-shadow: 0 1px 0 #ffffff;
}

body[data-theme="win10"] .start-separator {
  margin: 4px 12px 6px;
  background: #4a4a4a;
  box-shadow: none;
}

body[data-theme="xp"] .start-button {
  min-height: 36px;
  border-color: #1c6a1d;
  border-radius: 999px;
  background:
    radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.78), transparent 26%),
    linear-gradient(#85d664 0%, #42a940 52%, #1f781d 100%);
  color: #ffffff;
  padding: 5px 18px 6px 11px;
  gap: 7px;
  font-style: italic;
  font-weight: 900;
  text-transform: lowercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

body[data-theme="xp"] .start-mark {
  width: 23px;
  height: 21px;
  transform: skewY(-9deg);
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35));
}

body[data-theme="win10"] .start-button {
  border-radius: 0;
  min-width: 48px;
  min-height: 38px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: #ffffff;
}

body[data-theme="win10"] .start-button:hover,
body[data-theme="win10"] .start-button:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

body[data-theme="win10"] .start-mark {
  width: 20px;
  height: 20px;
  gap: 1px;
}

body[data-theme="win10"] .start-mark span {
  background: #ffffff;
}

body[data-theme="win10"] .windows-logo span:nth-child(1),
body[data-theme="win10"] .windows-logo span:nth-child(2),
body[data-theme="win10"] .windows-logo span:nth-child(3),
body[data-theme="win10"] .windows-logo span:nth-child(4) {
  background: currentColor;
}

body[data-theme="win10"] .start-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-theme="xp"] .desktop-icon,
body[data-theme="win10"] .desktop-icon {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}

body[data-theme="win10"] .folder-icon {
  width: 42px;
  height: 30px;
  border: 1px solid #9d6d1d;
  background: linear-gradient(#ffd96b, #e7a72e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body[data-theme="win10"] .folder-icon::before {
  top: -9px;
  left: -1px;
  width: 21px;
  height: 9px;
  border: 1px solid #9d6d1d;
  border-bottom: 0;
  background: linear-gradient(#ffe48a, #f1bd43);
}

body[data-theme="win10"] .file-row .folder-icon {
  width: 34px;
  height: 24px;
}

body[data-theme="win10"] .file-row .folder-icon::before {
  top: -7px;
  width: 16px;
  height: 7px;
}

body[data-theme="xp"] .folder-icon {
  border-color: #7f5f16;
  background: linear-gradient(#ffe27a, #f0b83b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

body[data-theme="xp"] .folder-icon::before {
  border-color: #7f5f16;
  background: linear-gradient(#fff09b, #f1c44f);
}

body[data-theme="win10"] .document-icon,
body[data-theme="win10"] .movie-icon,
body[data-theme="win10"] .info-icon,
body[data-theme="win10"] .file-mini {
  border: 1px solid #4a4a4a;
}

.system-tray {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tray-button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: var(--button-radius);
  background: transparent;
}

.tray-button:hover,
.tray-button:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: none;
}

.tray-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 20px;
}

.network-icon::before,
.network-icon::after,
.sound-icon::before,
.sound-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.network-icon::before {
  left: 1px;
  top: 4px;
  width: 9px;
  height: 7px;
  background: #d7eaff;
  border: 1px solid #000000;
}

.network-icon::after {
  right: 1px;
  bottom: 4px;
  width: 9px;
  height: 7px;
  background: #d7eaff;
  border: 1px solid #000000;
}

body[data-theme="win95"] .network-icon {
  color: #000000;
}

body[data-theme="win95"] .network-icon {
  background:
    linear-gradient(#000000, #000000) 10px 11px / 4px 1px no-repeat,
    linear-gradient(#000000, #000000) 12px 8px / 1px 4px no-repeat;
}

.sound-icon::before {
  left: 2px;
  top: 7px;
  width: 9px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 25%, 38% 25%, 78% 0, 78% 100%, 38% 75%, 0 75%);
}

.sound-icon::after {
  right: 2px;
  top: 5px;
  width: 9px;
  height: 12px;
  border: 1px solid currentColor;
  border-left: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

body[data-theme="win95"] .tray-button {
  color: #000000;
}

body[data-theme="xp"] .system-tray {
  padding: 2px 6px;
  border-radius: 13px;
  background: rgba(84, 160, 255, 0.32);
}

body[data-theme="xp"] .network-icon::before {
  background: #9ed1ff;
  border-color: #103f80;
}

body[data-theme="xp"] .network-icon::after {
  background: #75d764;
  border-color: #19571c;
}

body[data-theme="xp"] .sound-icon {
  color: #ffffff;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.35));
}

body[data-theme="xp"] .sound-icon::after {
  border-width: 2px;
}

body[data-theme="xp"] .tray-button,
body[data-theme="win10"] .tray-button {
  color: #ffffff;
}

body[data-theme="win10"] .system-tray {
  gap: 2px;
  color: #ffffff;
}

body[data-theme="win10"] .network-icon {
  width: 22px;
  height: 20px;
  background: none;
}

body[data-theme="win10"] .network-icon::before {
  display: block;
  left: 3px;
  top: 4px;
  width: 14px;
  height: 9px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 1px;
}

body[data-theme="win10"] .network-icon::after {
  display: block;
  left: 7px;
  top: 14px;
  width: 10px;
  height: 4px;
  background:
    linear-gradient(currentColor, currentColor) 0 3px / 10px 1px no-repeat,
    linear-gradient(currentColor, currentColor) 4px 0 / 1px 4px no-repeat;
  border: 0;
}

body[data-theme="win10"] .sound-icon::before {
  left: 2px;
  top: 7px;
  width: 10px;
  height: 8px;
  background: currentColor;
  clip-path: polygon(0 26%, 36% 26%, 76% 0, 76% 100%, 36% 74%, 0 74%);
}

body[data-theme="win10"] .sound-icon::after {
  right: 0;
  top: 3px;
  width: 9px;
  height: 14px;
  background:
    radial-gradient(ellipse at left center, transparent 0 5px, currentColor 5.2px 6.2px, transparent 6.4px),
    radial-gradient(ellipse at left center, transparent 0 8px, currentColor 8.2px 9.2px, transparent 9.4px);
  border: 0;
  border-radius: 0;
}

body[data-theme="win10"] .tray-popup {
  background: #2b2b2b;
  color: #f2f2f2;
  border-color: #4a4a4a;
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}

.tray-popup {
  position: absolute;
  right: 10px;
  bottom: calc(var(--taskbar-height) + 10px);
  z-index: 100;
  width: min(300px, calc(100vw - 20px));
  padding: 9px 10px;
  background: #fff8c9;
  color: #000000;
  border: 1px solid #8a7a22;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
}

.tray-popup.is-hidden {
  display: none;
}

.classic-popup {
  position: absolute;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.18);
}

.classic-popup.is-hidden {
  display: none;
}

.classic-popup-window {
  width: min(398px, calc(100vw - 36px));
  background: var(--surface);
  border-radius: var(--window-radius);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.38);
}

.classic-popup-message-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 42px;
}

.classic-popup-message-row p {
  margin: 0;
  white-space: pre-line;
}

.classic-popup-error-icon {
  position: relative;
  display: none;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.5), transparent 0 16%, transparent 17%),
    linear-gradient(#ff4a4a, #c00000);
  box-shadow:
    0 0 0 1px #000000,
    inset -2px -2px 0 rgba(0, 0, 0, 0.28);
}

.classic-popup-error-icon::before,
.classic-popup-error-icon::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 15px;
  width: 18px;
  height: 4px;
  background: #ffffff;
}

.classic-popup-error-icon::before {
  transform: rotate(45deg);
}

.classic-popup-error-icon::after {
  transform: rotate(-45deg);
}

.classic-popup.is-error .classic-popup-error-icon {
  display: block;
}

.classic-popup.is-error .window-body {
  padding: 0;
  color: #000000;
  background: #f0f0f0;
}

.classic-popup.is-error .classic-popup-message-row {
  align-items: flex-start;
  min-height: 122px;
  padding: 24px 26px 18px;
  background: #ffffff;
  color: #000000;
}

.classic-popup.is-error .classic-popup-message-row p {
  padding-top: 2px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
}

.classic-popup.is-error .confirm-actions {
  justify-content: flex-end;
  margin-top: 0;
  padding: 12px 12px 10px;
}

.classic-popup.is-error .system-button {
  min-width: 88px;
  font-weight: 400;
}

body[data-theme="win95"] .classic-popup-window {
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid var(--surface-deep);
  border-bottom: 2px solid var(--surface-deep);
}

body[data-theme="xp"] .classic-popup-window,
body[data-theme="win10"] .classic-popup-window {
  border: 1px solid rgba(0, 0, 0, 0.34);
}

body[data-theme="win10"] .classic-icon {
  border: 1px solid #4a4a4a;
  box-shadow: none;
}

body[data-theme="win10"] .desktop-classics .logo-img-icon,
body[data-theme="win10"] .start-items .logo-img-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-theme="win10"] .classic-popup {
  background: rgba(0, 0, 0, 0.28);
}

body[data-theme="win10"] .classic-popup-window {
  border-color: #4a4a4a;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.46);
}

body[data-theme="win10"] .window-controls button[data-classic-popup-close]:hover,
body[data-theme="win10"] .window-controls button[data-classic-popup-close]:focus-visible {
  background: #e81123;
  color: #ffffff;
}

.one-up-burst {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 180;
  color: #39ff14;
  font-family: "Courier New", Consolas, monospace;
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    2px 0 0 #003000,
    -2px 0 0 #003000,
    0 2px 0 #003000,
    0 -2px 0 #003000,
    3px 3px 0 #000000;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.one-up-burst.is-hidden {
  display: none;
}

.one-up-burst.is-animating {
  animation: one-up-float 850ms steps(8, end) forwards;
}

.one-up-burst.is-negative {
  color: #ff3030;
  text-shadow:
    2px 0 0 #4a0000,
    -2px 0 0 #4a0000,
    0 2px 0 #4a0000,
    0 -2px 0 #4a0000,
    3px 3px 0 #000000;
}

@keyframes one-up-float {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0.85);
  }

  12% {
    opacity: 1;
    transform: translate(-50%, -10px) scale(1);
  }

  78% {
    opacity: 1;
    transform: translate(-50%, -58px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -76px) scale(0.96);
  }
}

.users-celebration {
  position: absolute;
  inset: 0;
  z-index: 155;
  overflow: hidden;
  pointer-events: none;
}

.users-celebration.is-hidden {
  display: none;
}

.firework {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  opacity: 0;
  background: #ffffff;
  box-shadow:
    0 -38px 0 #ffe66d,
    27px -27px 0 #ff5c7a,
    38px 0 0 #5be7ff,
    27px 27px 0 #a3ff6f,
    0 38px 0 #ff9f1c,
    -27px 27px 0 #d783ff,
    -38px 0 0 #ffffff,
    -27px -27px 0 #ffd166;
}

.firework::before,
.firework::after {
  content: "";
  position: absolute;
  inset: -18px;
  border: 2px dotted currentColor;
  border-radius: 50%;
  opacity: 0.75;
}

.firework::after {
  inset: -30px;
  opacity: 0.45;
  transform: rotate(22deg);
}

.firework-one {
  left: 19%;
  top: 22%;
  color: #ffd166;
}

.firework-two {
  right: 20%;
  top: 17%;
  color: #5be7ff;
}

.firework-three {
  left: 52%;
  top: 28%;
  color: #ff5c7a;
}

.users-celebration.is-animating .firework {
  animation: users-firework-pop 980ms ease-out both;
}

.users-celebration.is-animating .firework-two {
  animation-delay: 180ms;
}

.users-celebration.is-animating .firework-three {
  animation-delay: 330ms;
}

.balloon {
  position: absolute;
  bottom: -95px;
  width: 42px;
  height: 54px;
  border: 2px solid rgba(0, 0, 0, 0.38);
  border-radius: 50% 50% 45% 45%;
  opacity: 0;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.74) 0 7px, transparent 8px),
    linear-gradient(145deg, #ff4d6d, #b60037);
  box-shadow: inset -8px -10px 0 rgba(0, 0, 0, 0.14);
}

.balloon::before {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -7px;
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 8px solid currentColor;
}

.balloon::after {
  content: "";
  position: absolute;
  left: 20px;
  top: 55px;
  width: 1px;
  height: 86px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2);
}

.balloon-one {
  left: 8%;
  color: #b60037;
}

.balloon-two {
  left: 31%;
  color: #0967d2;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.74) 0 7px, transparent 8px),
    linear-gradient(145deg, #41c9ff, #0967d2);
}

.balloon-three {
  right: 30%;
  color: #116611;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.74) 0 7px, transparent 8px),
    linear-gradient(145deg, #a3ff6f, #116611);
}

.balloon-four {
  right: 9%;
  color: #c06a00;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.74) 0 7px, transparent 8px),
    linear-gradient(145deg, #ffd166, #c06a00);
}

.users-celebration.is-animating .balloon {
  animation: users-balloon-rise 2.25s cubic-bezier(0.18, 0.78, 0.3, 1) both;
}

.users-celebration.is-animating .balloon-two {
  animation-delay: 150ms;
}

.users-celebration.is-animating .balloon-three {
  animation-delay: 290ms;
}

.users-celebration.is-animating .balloon-four {
  animation-delay: 430ms;
}

@keyframes users-firework-pop {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(0deg);
  }

  18% {
    opacity: 1;
  }

  72% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
    transform: scale(1.75) rotate(28deg);
  }
}

@keyframes users-balloon-rise {
  0% {
    opacity: 0;
    transform: translateY(34px) rotate(-4deg) scale(0.78);
  }

  12% {
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-92vh) rotate(8deg) scale(1.02);
  }
}

.folder-icon,
.document-icon,
.movie-icon,
.recycle-icon,
.minesweeper-icon,
.doom-icon,
.quake-icon,
.aoe-icon,
.coaster-icon {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  box-shadow: none;
}

body[data-theme="win95"] .folder-icon,
body[data-theme="xp"] .folder-icon,
body[data-theme="win10"] .folder-icon,
body[data-theme="win95"] .document-icon,
body[data-theme="xp"] .document-icon,
body[data-theme="win10"] .document-icon,
body[data-theme="win95"] .movie-icon,
body[data-theme="xp"] .movie-icon,
body[data-theme="win10"] .movie-icon,
body[data-theme="win95"] .recycle-icon,
body[data-theme="xp"] .recycle-icon,
body[data-theme="win10"] .recycle-icon {
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: 0;
  box-shadow: none;
}

.folder-icon::before,
.folder-icon::after,
.document-icon::after,
.movie-icon::after,
.recycle-icon::before,
.recycle-icon::after,
.minesweeper-icon::before,
.minesweeper-icon::after,
.doom-icon::before,
.doom-icon::after,
.quake-icon::before,
.quake-icon::after,
.aoe-icon::before,
.aoe-icon::after,
.coaster-icon::before,
.coaster-icon::after,
body[data-theme="xp"] .folder-icon::before,
body[data-theme="win10"] .folder-icon::before,
body[data-theme="win95"] .recycle-icon::before,
body[data-theme="win95"] .recycle-icon::after,
body[data-theme="xp"] .recycle-icon::before,
body[data-theme="xp"] .recycle-icon::after,
body[data-theme="win10"] .recycle-icon::before,
body[data-theme="win10"] .recycle-icon::after {
  display: none;
  content: none;
}

.folder-icon {
  width: 48px;
  height: 48px;
  margin-top: 0;
}

body[data-theme="win95"] .folder-icon,
body[data-theme="xp"] .folder-icon,
body[data-theme="win10"] .folder-icon {
  width: 48px;
  height: 48px;
  margin-top: 0;
}

.document-icon,
.movie-icon {
  width: 38px;
  height: 42px;
}

body[data-theme="win95"] .document-icon,
body[data-theme="xp"] .document-icon,
body[data-theme="win10"] .document-icon,
body[data-theme="win95"] .movie-icon,
body[data-theme="xp"] .movie-icon,
body[data-theme="win10"] .movie-icon {
  width: 38px;
  height: 42px;
}

.desktop-bin .recycle-icon {
  width: 44px;
  height: 44px;
}

.desktop-bin .classic-shortcut .recycle-icon {
  width: 44px;
  height: 44px;
}

.file-row .folder-icon,
body[data-theme="win95"] .file-row .folder-icon,
body[data-theme="xp"] .file-row .folder-icon,
body[data-theme="win10"] .file-row .folder-icon {
  width: 34px;
  height: 34px;
  margin-top: 0;
}

.file-row .document-icon,
.file-row .movie-icon,
.help-files .document-icon,
.help-files .movie-icon {
  width: 34px;
  height: 34px;
}

body[data-theme="win95"] .folder-icon {
  background-image: url("icons/folder-win95.png");
}

body[data-theme="xp"] .folder-icon {
  background-image: url("icons/folder-xp.png");
}

body[data-theme="win10"] .folder-icon {
  background-image: url("icons/folder-win10.png");
}

body[data-theme="win95"] .document-icon {
  background-image: url("icons/document-win95.png");
}

body[data-theme="xp"] .document-icon {
  background-image: url("icons/document-xp.png");
}

body[data-theme="win10"] .document-icon {
  background-image: url("icons/document-win10.png");
}

body[data-theme="win95"] .movie-icon {
  background-image: url("icons/movie-win95.png");
}

body[data-theme="xp"] .movie-icon {
  background-image: url("icons/movie-xp.png");
}

body[data-theme="win10"] .movie-icon {
  background-image: url("icons/movie-win10.png");
}

body[data-theme="win95"] .recycle-icon {
  background-image: url("icons/recycle-win95.png");
}

body[data-theme="xp"] .recycle-icon {
  background-image: url("icons/recycle-xp.png");
}

body[data-theme="win10"] .recycle-icon {
  background-image: url("icons/recycle-win10.png");
}

body[data-theme="xp"] .desktop-bin,
body[data-theme="win10"] .desktop-bin {
  --recycle-desktop-icon-size: 48px;
  width: max(88px, var(--desktop-classic-icon-width));
}

body[data-icon-size="large"][data-theme="xp"] .desktop-bin,
body[data-icon-size="large"][data-theme="win10"] .desktop-bin {
  --recycle-desktop-icon-size: 56px;
}

body[data-theme="xp"] .desktop-bin .desktop-icon,
body[data-theme="win10"] .desktop-bin .desktop-icon {
  min-height: max(78px, var(--desktop-classic-min-height));
  gap: 5px;
  font-size: 13px;
}

body[data-theme="xp"] .desktop-bin .classic-shortcut .recycle-icon,
body[data-theme="win10"] .desktop-bin .classic-shortcut .recycle-icon {
  width: var(--recycle-desktop-icon-size);
  height: var(--recycle-desktop-icon-size);
  transform: none;
}

.minesweeper-icon {
  background-image: url("logos/minesweeper-win95.png");
}

.doom-icon {
  background-image: url("logos/doom-ultimate.png");
}

.quake-icon {
  background-image: url("logos/quake-1.png");
}

.aoe-icon {
  background-image: url("logos/age-of-empires-2-logo.svg");
}

.coaster-icon {
  background-image: url("logos/rollercoaster-tycoon-1.png");
}

.classic-shortcut .classic-icon:not(.logo-img-icon) {
  width: 36px;
  height: 36px;
}

body[data-theme="win95"] .classic-shortcut .classic-icon:not(.logo-img-icon),
body[data-theme="xp"] .classic-shortcut .classic-icon:not(.logo-img-icon),
body[data-theme="win10"] .classic-shortcut .classic-icon:not(.logo-img-icon) {
  border: 0;
  background-color: transparent;
  box-shadow: none;
}

body[data-theme="win95"] .desktop-classics .web-access-shortcut .classic-icon.web-access-icon {
  width: 60px;
  height: 34px;
  background-color: #ffffff;
  background-size: contain;
  filter: none;
}

body[data-theme="win95"] .start-items .classic-icon.web-access-icon {
  width: 44px;
  height: 25px;
  background-color: #ffffff;
  background-size: contain;
  filter: none;
}

body[data-theme="win95"] .browser-title-icon {
  width: 26px;
  height: 16px;
  background-size: contain;
}

body[data-theme="win95"] .web-access-brand-logo {
  width: 54px;
  height: 31px;
  background-size: 92% auto;
}

.desktop-bin .classic-shortcut .recycle-icon {
  width: 44px;
  height: 44px;
}

.logo-img-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.classic-logo-img {
  max-width: 32px;
  max-height: 32px;
}

body[data-theme="win95"] .start-mark,
body[data-theme="xp"] .start-mark,
body[data-theme="win10"] .start-mark {
  display: block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: none;
}

body[data-theme="win95"] .start-mark span,
body[data-theme="xp"] .start-mark span,
body[data-theme="win10"] .start-mark span {
  display: none;
}

body[data-theme="win95"] .start-mark {
  width: 28px;
  height: 22px;
  background-image: url("icons/windows-95-start.svg");
}

body[data-theme="xp"] .start-mark {
  width: 27px;
  height: 23px;
  background-image: url("icons/windows-xp-start.svg");
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.32));
}

body[data-theme="win10"] .start-mark {
  width: 20px;
  height: 20px;
  background-image: url("icons/windows-10-start.svg");
  filter: none;
}

.normal-site {
  min-height: 100vh;
  background: #eeeeee;
  color: #151515;
  font-family: Arial, Helvetica, sans-serif;
}

.normal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  background: #1f4e79;
  color: #ffffff;
}

.normal-header a,
.normal-header button {
  color: #ffffff;
  font-weight: 800;
}

.normal-header > a {
  font-size: 20px;
  text-decoration: none;
}

.normal-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.normal-header nav a,
.normal-header nav button {
  border: 0;
  background: transparent;
  text-decoration: underline;
}

.normal-main {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 36px 0 48px;
}

.normal-hero,
.normal-panel {
  margin-bottom: 18px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid #bbbbbb;
}

.normal-hero h1 {
  max-width: 720px;
  margin-bottom: 10px;
}

.normal-download {
  display: grid;
  gap: 5px;
  padding: 14px;
  background: #f7f7f7;
  border: 1px solid #cccccc;
}

.normal-download em {
  width: max-content;
  padding: 3px 7px;
  background: #dddddd;
  font-style: normal;
  font-weight: 800;
}

@media (max-width: 520px) {
  body {
    overflow: auto;
  }

  h1 {
    font-size: 23px;
  }

  .desktop-shell {
    min-height: 100vh;
    height: auto;
  }

  .desktop-stage {
    overflow: visible;
    min-height: 860px;
    padding: 12px;
  }

  .style-grid {
    grid-template-columns: 1fr;
  }

  .style-card {
    min-height: auto;
  }

  .style-preview {
    height: 54px;
  }

  body[data-style="construction"] .desktop-stage::before {
    content: "UNDER CONSTRUCTION";
    top: 8px;
    left: 108px;
    right: 12px;
    min-height: 22px;
    font-size: 11px;
  }

  body[data-style="construction"] .desktop-stage::after {
    display: none;
  }

  .construction-crew {
    display: none !important;
  }

  .taskbar-painter,
  .bin-smoker {
    display: none !important;
  }

  .desktop-icons {
    position: static;
    grid-template-columns: repeat(4, minmax(64px, 1fr));
    width: auto;
    margin-bottom: 12px;
  }

  .desktop-classics {
    right: auto;
  }

  .desktop-bin {
    right: auto;
    bottom: auto;
  }

  .desktop-icon {
    min-height: 70px;
    font-size: 13px;
  }

  .desktop-window,
  .window-help,
  .window-help-text,
  .window-first-prompt,
  .window-shopping-folder,
  .window-shopping-info,
  .window-search,
  .window-settings,
  .window-system-info,
  .window-about,
  .window-downloads,
  .window-recycle {
    position: static;
    width: 100%;
    margin-bottom: 12px;
  }

  .desktop-window.is-hidden {
    display: none;
  }

  .desktop-window.is-maximized {
    width: 100% !important;
    height: auto !important;
  }

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

  .wallpaper-picker {
    grid-template-columns: 1fr;
  }

  .window-body {
    max-height: none;
    padding: 12px;
  }

  .lead {
    font-size: 15px;
  }

  .file-row,
  .help-files article,
  .help-files button {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .file-status {
    grid-column: 2;
    justify-self: start;
  }

  .taskbar {
    position: sticky;
    bottom: 0;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .taskbar-apps button {
    min-width: 104px;
  }

  .start-menu {
    position: fixed;
    right: 8px;
    bottom: var(--taskbar-height);
    left: 8px;
    grid-template-columns: 34px minmax(0, 1fr);
  }
}