:root {
  --xp-face: #ece9d8;
  --xp-border: #0831d9;
  --xp-title-a: #2a7bff;
  --xp-title-b: #0058ee;
  --xp-title-c: #0046d5;
  --xp-close-a: #e8825a;
  --xp-close-b: #c63a1c;
  --xp-button-border: #003c74;
  --alert-red: #d40000;
  --win-yellow: #ffd400;
  --color-ground: #fff;
  --color-ink: #1a1a18;
  --color-muted: #8a8a85;
  --color-hairline: #e4e3df;
  --color-line: #c8c7c2;
  --color-approach: #8fa6e6;
  --color-accent: #0055ff;
  color-scheme: light;
  font-family: Tahoma, Verdana, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #000;
}
* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; margin: 0; }
body {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #245edc 0%, #3a93ff 55%, #5fb0ff 100%);
  overflow-x: hidden;
}
button { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.desktop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 136px 16px 88px;
}
/* Windows */
.window {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--xp-border);
  border-radius: 8px 8px 0 0;
  background: var(--xp-face);
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}
.window[hidden] { display: none; }
/* Windows are dragged by their title bars; the menus need to hang below
   them, so the window itself does not clip. */
.window-title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 28px;
  padding: 0 5px 0 8px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(180deg, var(--xp-title-a), var(--xp-title-b) 45%, var(--xp-title-c));
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #0a246a;
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
body.is-dragging { user-select: none; -webkit-user-select: none; cursor: move; }
body.is-dragging iframe { pointer-events: none; }
.window-title span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.window-title-icon { display: flex; align-items: center; gap: 7px; min-width: 0; }
.window-close {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--xp-close-a), var(--xp-close-b));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.xp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 23px;
  padding: 0 12px;
  border: 1px solid var(--xp-button-border);
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, var(--xp-face));
  color: #000;
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.xp-button--default { box-shadow: 0 0 0 2px var(--win-yellow); }
.xp-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 14px;
}
.xp-check-box {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border: 1px solid #1c5180;
  background: #fff;
  color: #21a121;
  font-size: 10px;
  font-weight: 700;
}
/* Menus: a bar of titles, each dropping a list of real buttons */
.menubar {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 22px;
  padding: 0 2px;
  border-bottom: 1px solid #d4d0c8;
  font-size: 11px;
}
.menu-root { position: relative; }
.menu-title {
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border: 0;
  background: transparent;
  font-size: 11px;
  cursor: default;
}
.menu-title:hover, .menu-title[aria-expanded="true"] { background: #316ac5; color: #fff; }
.menu {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-width: 196px;
  padding: 2px;
  border: 1px solid #a0a0a0;
  background: #fff;
  box-shadow: 2px 2px 3px rgb(0 0 0 / 30%);
}
.menu[hidden] { display: none; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  height: 20px;
  padding: 0 18px 0 24px;
  border: 0;
  background: transparent;
  color: #000;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
  cursor: default;
}
.menu-item::before {
  content: "";
  position: absolute;
  left: 8px;
  width: 10px;
  font-size: 11px;
  line-height: 20px;
}
.menu-item { position: relative; }
.menu-item[data-checked="true"]::before { content: "✓"; }
.menu-item[data-radio][data-checked="true"]::before { content: "●"; font-size: 8px; }
.menu-item:hover:not([aria-disabled="true"]), .menu-item:focus-visible { background: #316ac5; color: #fff; outline: none; }
.menu-item[aria-disabled="true"] { color: #a0a0a0; text-shadow: 1px 1px 0 #fff; }
.menu-key { color: inherit; opacity: 0.85; }
.menu-separator { width: calc(100% - 4px); margin: 3px 2px; border: 0; border-top: 1px solid #a0a0a0; }
/* The browser window behind everything */
.ie { position: absolute; inset: 24px 40px 56px 104px; z-index: 0; }
.ie-address, .ie-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  padding: 0 8px;
  font-size: 11px;
}
.ie-address { gap: 8px; height: 28px; border-bottom: 1px solid #a0a0a0; }
.ie-address-field {
  display: flex;
  flex: 1;
  align-items: center;
  height: 20px;
  padding: 0 4px;
  border: 1px solid #7f9db9;
  background: #fff;
  overflow: hidden;
  white-space: nowrap;
}
.ie-go { min-width: 0; height: 20px; padding: 0 8px; }
.ie-status { justify-content: space-between; height: 22px; border-top: 1px solid #fff; }
.ie-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 40px;
  background: #fff;
  overflow: hidden;
}
.ie[data-text-size="largest"] .ie-page { zoom: 1.4; }
.ie[data-text-size="larger"] .ie-page { zoom: 1.15; }
.ie[data-text-size="smaller"] .ie-page { zoom: 0.85; }
.ie[data-text-size="smallest"] .ie-page { zoom: 0.7; }
/* Desktop icons, in the column the browser window leaves free */
.desktop-icons {
  position: absolute;
  left: 14px;
  top: 22px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 78px;
  padding: 4px 2px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  text-shadow: 1px 1px 2px #000;
  cursor: default;
}
.desktop-icon svg { width: 34px; height: 34px; }
.desktop-icon:hover, .desktop-icon:focus-visible { border-color: rgb(255 255 255 / 40%); background: rgb(49 106 197 / 55%); outline: none; }
/* Notepad */
.notepad {
  position: absolute;
  left: 120px;
  top: 96px;
  z-index: 5;
  width: min(460px, calc(100% - 32px));
  height: 340px;
}
.notepad-text {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 3px 4px;
  border: 1px solid #7f9db9;
  border-width: 1px 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 13px/16px "Lucida Console", Monaco, Menlo, monospace;
  resize: none;
  outline: none;
}
.notepad[data-font="courier"] .notepad-text { font-family: "Courier New", Courier, monospace; }
.notepad[data-font="comic"] .notepad-text { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; }
.notepad-text[wrap="off"] { white-space: pre; overflow-x: auto; }
.notepad-status {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
}
.notepad-status span:last-child { flex: 0 0 auto; min-width: 84px; text-align: right; }
/* Dialogs the menus open */
.dialog { position: absolute; z-index: 5; width: min(360px, calc(100% - 32px)); }
.dialog-body { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 12px; }
.dialog-line { display: flex; align-items: flex-start; gap: 12px; font-size: 12px; }
.dialog-line p { margin: 0; white-space: pre-line; }
.dialog-actions { display: flex; justify-content: center; gap: 6px; }
.error-icon[data-icon="i"] {
  background: #1d4ed8;
  box-shadow: 0 0 0 1px #0a246a;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
}
.marquee {
  width: 100%;
  margin: 0;
  padding: 3px 8px;
  border: 2px dashed #f00;
  background: #ff0;
  color: #f00;
  font: 700 11px/16px Verdana, Tahoma, sans-serif;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.site-heading {
  margin: 0;
  color: #000080;
  font: 400 72px/76px Impact, "Arial Narrow", "Helvetica Neue", sans-serif;
  letter-spacing: 0.01em;
  text-align: center;
}
.tagline {
  max-width: 760px;
  margin: 0;
  font: 20px/26px "Times New Roman", Times, serif;
  text-align: center;
}
.counter { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; }
.counter-digits { display: flex; gap: 2px; }
.counter-digits span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 20px;
  background: #000;
  color: #0f0;
  font: 14px/1 Menlo, Consolas, monospace;
}
/* Pop-ups: a layer over the browser window, under the Security Alert */
.popups { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.popup { position: absolute; pointer-events: auto; }
.popup[hidden] { display: none; }
.popup--visitor { left: 6%; top: 84px; width: 430px; }
.popup--antivirus { right: 3%; top: 60px; width: 470px; }
.popup--cascade { left: 8%; top: 46%; width: 340px; height: 210px; }
.popup--spa { right: 3%; top: 50%; width: 400px; }
.popup--insurance { left: 4%; bottom: 60px; width: 470px; }
.popup--xerox { left: 39%; bottom: 40px; width: 330px; }
.popup--extra { max-width: calc(100% - 24px); }
.popup-body { padding: 14px 18px 16px; }
.visitor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 20px;
  border: 6px solid #f00;
  background: #ff6;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive;
  text-align: center;
}
.visitor h2 { margin: 0; color: #f00; font-size: 30px; line-height: 34px; }
.visitor p { margin: 0; }
.visitor-lead { color: #00e; font-size: 16px; font-weight: 700; line-height: 22px; }
.visitor-fine { color: #555; font: 9px/12px Verdana, sans-serif; }
.antivirus { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; background: #f4f7fb; font-size: 11px; }
.antivirus-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #3a5c8f; }
.antivirus-list { display: flex; flex-direction: column; border: 1px solid #a0a0a0; background: #fff; }
.antivirus-row { display: flex; gap: 8px; padding: 3px 6px; border-bottom: 1px solid #eee; }
.antivirus-row b { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 2px; background: var(--alert-red); }
.antivirus-row span:first-of-type { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.antivirus-row span:last-of-type { flex: 0 0 auto; color: var(--alert-red); }
.antivirus-progress { height: 14px; border: 1px solid #a0a0a0; background: #fff; }
.antivirus-progress b { display: block; width: 23%; height: 100%; background: repeating-linear-gradient(90deg, #2a4fd8 0 8px, #fff 8px 10px); }
.antivirus-actions { display: flex; justify-content: flex-end; gap: 6px; }
.cascade-window { position: absolute; width: 260px; height: 128px; }
.cascade-window:nth-child(1) { left: 0; top: 0; }
.cascade-window:nth-child(2) { left: 16px; top: 16px; }
.cascade-window:nth-child(3) { left: 32px; top: 32px; }
.cascade-window:nth-child(4) { left: 48px; top: 48px; }
.cascade-window:nth-child(5) { left: 64px; top: 64px; }
.cascade-window:nth-child(6) { left: 80px; top: 80px; }
.cascade-window:nth-child(n + 7) { left: 96px; top: 96px; }
.error-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; padding: 12px 14px 10px; }
.error-line { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.error-line p { margin: 0; }
.error-icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--alert-red);
  box-shadow: 0 0 0 1px #8a0000;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}
.error-actions { display: flex; justify-content: center; gap: 6px; }
.spa { display: flex; gap: 14px; padding: 14px; background: #fff; }
.spa img { flex: 0 0 auto; width: 170px; height: 207px; border: 1px solid #999; object-fit: cover; }
.spa-copy { display: flex; flex: 1; flex-direction: column; gap: 8px; font: 11px/15px Verdana, sans-serif; }
.spa-copy h2 { margin: 0; color: var(--alert-red); font: 400 34px/34px Impact, "Arial Narrow", sans-serif; }
.spa-copy p { margin: 0; }
.spa-lead { color: #000080; font-size: 12px; font-weight: 700; line-height: 16px; }
.ad-button {
  align-self: flex-start;
  padding: 7px 16px;
  border: 1px solid #8a6a00;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffe066, #ffb800);
  font: 700 12px/1 Verdana, sans-serif;
  cursor: pointer;
}
.insurance { display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: #c8f0c8; }
.insurance-copy { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.insurance-copy h2 { margin: 0; color: #006400; font: 400 28px/30px Impact, "Arial Narrow", sans-serif; }
.insurance-copy p { margin: 0; font: 11px/15px Verdana, sans-serif; }
.insurance-sign {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 110px;
  height: 64px;
  border: 1px solid #006400;
  background: #fff;
  color: #006400;
  font: 400 40px/1 Impact, "Arial Narrow", sans-serif;
}
.xerox { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; background: #f00; }
.xerox h2 { margin: 0; color: #ff0; font: 400 30px/32px Impact, "Arial Narrow", sans-serif; }
.xerox p { margin: 0; color: #fff; font: 700 11px/15px Verdana, sans-serif; }
/* The Security Alert: in flow, above the pop-ups, holding the widget */
.alert {
  position: relative;
  z-index: 2;
  width: min(540px, 100%);
  box-shadow: 0 16px 40px rgb(0 0 0 / 50%);
}
.alert-body { display: flex; flex-direction: column; gap: 18px; padding: 22px 26px 24px; }
.alert-warning { display: flex; gap: 14px; align-items: flex-start; }
.alert-warning svg { flex: 0 0 auto; }
.alert-copy { display: flex; flex-direction: column; gap: 6px; }
.alert-copy h1 { margin: 0; color: var(--alert-red); font: 400 34px/36px Impact, "Arial Narrow", "Helvetica Neue", sans-serif; }
.alert-copy p { margin: 0; }
.alert-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.alert-actions { display: flex; gap: 6px; }
.nnk-notice {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #a0a0a0;
  background: #fff;
  font-size: 12px;
}
/* The Human Link bar, as the widget draws it, until it is clicked */
.embedded-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 66px;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hl-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-hairline);
  border-radius: 12px;
  color: var(--color-ink);
  background: var(--color-ground);
  box-shadow: 0 1px 2px rgb(26 26 24 / 5%);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.hl-placeholder:hover:not(:disabled) {
  border-color: var(--color-approach);
  box-shadow: 0 0 0 4px rgb(0 85 255 / 7%), 0 1px 2px rgb(26 26 24 / 5%);
}
.hl-placeholder:disabled { cursor: progress; }
.hl-placeholder-copy { display: grid; flex: 1; gap: 2px; min-width: 0; }
.hl-placeholder-copy strong { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; line-height: 18px; }
.hl-placeholder-copy small {
  overflow: hidden;
  color: var(--color-muted);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-placeholder-chevron { flex: 0 0 auto; stroke: var(--color-line); transition: stroke 160ms ease-out; }
.hl-placeholder:hover:not(:disabled) .hl-placeholder-chevron { stroke: var(--color-accent); }
.hl-placeholder[aria-busy="true"] .hl-placeholder-chevron { opacity: 0; }
.hl-mark { display: block; flex: 0 0 auto; }
.hl-mark path { fill: none; stroke-width: 2; }
.hl-mark[data-state="rest"] path { stroke: var(--color-muted); }
.hl-mark[data-state="verified"] path { stroke: var(--color-accent); }
.hl-mark[data-state="failed"] path { stroke: var(--color-line); }
/* Clippy */
.clippy { position: fixed; right: 24px; bottom: 46px; z-index: 900; width: 386px; height: 206px; }
.clippy[hidden] { display: none; }
.clippy-bubble {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 236px;
  padding: 14px 16px;
  border: 1px solid #000;
  border-radius: 14px;
  background: #ffffc8;
  box-shadow: 2px 2px 0 rgb(0 0 0 / 25%);
}
.clippy-bubble[hidden] { display: none; }
.clippy-bubble p { margin: 0; }
.clippy-bubble p strong { display: block; }
.clippy-options { display: flex; flex-direction: column; gap: 6px; }
.clippy-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #00e;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.clippy-option::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #00e; }
.clippy-option:hover { text-decoration: underline; }
.clippy-tail { position: absolute; left: 216px; top: 96px; }
.clippy-figure { position: absolute; left: 244px; top: 76px; width: 140px; height: 117px; }
/* Success: the stamp */
.stamp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  border: 3px solid #0a7a3f;
  border-radius: 6px;
  background: #fff;
  transform: rotate(-4deg);
}
.stamp-copy { display: flex; flex-direction: column; gap: 2px; }
.stamp-copy strong { color: #0a7a3f; font: 400 34px/36px Impact, "Arial Narrow", sans-serif; letter-spacing: 0.02em; }
.stamp-copy span { color: #5f5f5a; font: 13px/16px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; }
.stamp-copy span::first-letter { text-transform: uppercase; }
/* Failure: one error dialog, in flow */
.failure { position: relative; z-index: 2; width: min(340px, 100%); }
/* Taskbar */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  border-top: 1px solid #6fa0f5;
  background: linear-gradient(180deg, #3168d5 0%, #2456c8 20%, #245edc 100%);
}
.taskbar-tasks { display: flex; align-items: center; gap: 6px; height: 30px; min-width: 0; }
.start-root { position: relative; }
.start {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 18px 0 10px;
  border: 0;
  border-radius: 0 12px 12px 0;
  cursor: pointer;
  background: linear-gradient(180deg, #3c9e3c, #2e8a2e 40%, #257825);
  box-shadow: inset 0 1px 0 #7bd07b;
  color: #fff;
  font-size: 15px;
  font-style: italic;
  font-weight: 700;
  text-shadow: 1px 1px 0 #1e5a1e;
}
.start:hover, .start[aria-expanded="true"] { background: linear-gradient(180deg, #4fb44f, #3a9e3a 40%, #2e8a2e); color: #fff; }
.start-menu {
  bottom: 100%;
  top: auto;
  width: min(392px, calc(100vw - 8px));
  padding: 0;
  border: 1px solid #0831d9;
  border-radius: 6px 6px 0 0;
  background: var(--xp-face);
  box-shadow: 0 -2px 12px rgb(0 0 0 / 40%);
  overflow: hidden;
}
.start-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 10px;
  background: linear-gradient(180deg, #2a7bff, #0058ee 45%, #0046d5);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #0a246a;
}
.start-avatar {
  display: flex;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 3px;
  border: 1px solid #fff;
  border-radius: 4px;
  background: #3c7cf0;
}
.start-avatar svg { width: 100%; height: 100%; }
.start-columns { display: flex; border-top: 2px solid #f4a020; }
.start-left, .start-right { display: flex; flex-direction: column; padding: 6px 4px; }
.start-left { flex: 1 1 0; min-width: 0; background: #fff; }
.start-right { flex: 0 0 176px; border-left: 1px solid #a6bfe0; background: #d3e5fa; }
.start-foot {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #3c8cf0, #245edc);
}
.start-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 6px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #000;
  font-size: 11px;
  line-height: 13px;
  text-align: left;
  cursor: default;
}
.start-item:hover, .start-item:focus-visible { background: #316ac5; color: #fff; outline: none; }
.start-item:hover small, .start-item:focus-visible small { color: #dbe6f7; }
.start-icon { display: flex; flex: 0 0 auto; width: 24px; height: 24px; }
.start-icon svg { width: 100%; height: 100%; }
.start-left .start-icon { width: 30px; height: 30px; }
.start-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.start-label > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.start-label small { color: #5f5f5a; font-size: 10px; }
.start-right .start-item { font-weight: 700; }
.start-foot .start-item { width: auto; color: #fff; font-weight: 400; }
.start-foot .start-item:hover, .start-foot .start-item:focus-visible { background: rgb(255 255 255 / 20%); }
.start-menu .menu-separator { width: auto; margin: 3px 6px; border-top-color: #cfd8e4; }
.start-left .menu-separator { border-top-color: #d9d9d9; }
/* The Run box: a dialog with a line to type on */
.run-line { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.run-line label { flex: 0 0 auto; }
.xp-input {
  flex: 1;
  min-width: 0;
  height: 22px;
  padding: 0 4px;
  border: 1px solid #7f9db9;
  border-radius: 0;
  background: #fff;
  font: 11px Tahoma, Verdana, sans-serif;
}
.xp-input:focus { outline: 1px solid #316ac5; outline-offset: -1px; }
.start i { width: 18px; height: 18px; border-radius: 3px; background: conic-gradient(#f35325 0 25%, #81bc06 0 50%, #ffba08 0 75%, #05a6f0 0); }
.task {
  display: flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid #163f9b;
  border-radius: 3px;
  background: #3c7cf0;
  color: #fff;
  font-size: 11px;
  white-space: nowrap;
}
.task--active { background: #1e52c4; }
button.task { font: inherit; font-size: 11px; cursor: pointer; }
button.task:hover { background: #4d8cf5; }
.task[hidden] { display: none; }
.tray {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px 0 10px;
  border-left: 1px solid #1b62c9;
  background: linear-gradient(180deg, #0f9bff, #0c8ae6 40%, #0a7cd0);
  color: #fff;
  font-size: 11px;
}
.tray i { display: block; width: 14px; height: 14px; border-radius: 2px; background: #f2c230; }
.tray i + i { border-radius: 50%; background: var(--alert-red); }
@media (max-width: 760px) {
  .popups, .clippy, .taskbar-tasks .task, .menubar, .desktop-icons, .notepad { display: none; }
  .start-menu { width: calc(100vw - 8px); }
  .start-right { flex-basis: 150px; }
  .desktop { padding: 72px 12px 64px; }
  .ie { inset: 12px 8px 44px; }
  .window-title { cursor: default; }
  .ie-page { padding: 20px 12px; }
  .site-heading { font-size: 40px; line-height: 42px; }
  .tagline { font-size: 15px; line-height: 20px; }
  .alert-copy h1 { font-size: 26px; line-height: 28px; }
  .alert-body { padding: 16px; }
}


/* ---------------------------------------------------------- supreme.jpg */
.kj {
  position: absolute;
  right: 3%;
  top: 22%;
  width: 400px;
  /* above .clippy (900) so the Supreme Leader is never obscured */
  z-index: 950;
}
.kj-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  border-bottom: 1px solid #aca899;
  background: linear-gradient(#f6f4ec, #e4e0d4);
}
.kj-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #35506d;
  font: 12px/1 Tahoma, sans-serif;
}
.kj-tool:hover { border-color: #b6c8e0; background: #dfeaf7; }
.kj-tool-sep {
  width: 1px;
  height: 16px;
  margin: 0 3px;
  background: #aca899;
}
.kj-body { padding: 8px 9px 10px; }
.kj-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #6d6d6d;
  background: #000;
  line-height: 0;
}
.kj-photo { display: block; width: 100%; height: auto; }
.kj-eye {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;
}
.kj-eye--left  { left: 35.7977%; top: 26.7320%; width: 10.1167%; height: 2.3793%; }
.kj-eye--right { left: 53.8911%; top: 26.9419%; width: 10.1167%; height: 2.3793%; }
.kj-patch {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 65.38%;
  height: 158.82%;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}
.kj-caption {
  margin: 8px 0 0;
  color: #333;
  font: 11px/1.4 Tahoma, Verdana, sans-serif;
}
.kj-caption em { font-style: normal; text-decoration: underline; }
.kj-credit {
  margin: 4px 0 0;
  color: #7a7a74;
  font: 9px/1.4 Tahoma, Verdana, sans-serif;
}
.kj-credit a { color: #7a7a74; }

.kj-eye--left  { left: 21.7391%; top: 34.6705%; width: 18.8406%; height: 4.8711%; }
.kj-eye--right { left: 55.4348%; top: 35.1003%; width: 18.8406%; height: 4.8711%; }
.kj-patch { width: 65.384%; height: 158.822%; }