:root {
  color-scheme: light;
  --xp-blue: #0a55d1;
  --xp-blue-dark: #073b9c;
  --xp-blue-light: #62b0ff;
  --xp-green: #2faa32;
  --xp-green-dark: #117819;
  --xp-silver: #ece9d8;
  --xp-paper: #fffef7;
  --xp-border: #164ba9;
  --xp-line: #7f9db9;
  --xp-text: #111111;
  --xp-muted: #5d5d5d;
  --xp-red: #c7192d;
  --font-ui: Tahoma, "Microsoft YaHei", "SimSun", Arial, sans-serif;
  --font-mono: "Lucida Console", "Courier New", "SimSun", monospace;
  --xp-cursor-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M5 3v23l6-6 4 9 4-2-4-8h9z' fill='%23000000' opacity='.28' transform='translate(1 1)'/%3E%3Cpath d='M4 2v23l6-6 4 9 4-2-4-8h9z' fill='%23fff' stroke='%23000' stroke-width='1.35' stroke-linejoin='round'/%3E%3Cpath d='M6 6v14l3-3 1.5 3.4' fill='none' stroke='%23d9d9d9' stroke-width='1'/%3E%3C/svg%3E") 4 2, default;
  --xp-cursor-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg stroke='%23000' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M13 29c-3-4-7-8-8-11-.7-2 1.5-3.5 3.4-1.5L11 19V7.5c0-2 3-2 3 0V15h1V5.5c0-2 3-2 3 0V15h1V7c0-2 3-2 3 0v9h1v-5c0-2 3-2 3 0v8c0 6-3 10-8 10z' fill='%23fff' stroke-width='1.35'/%3E%3Cpath d='M14 8v10M18 8v10M22 12v7' fill='none' stroke='%23cfcfcf' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") 9 2, pointer;
  --xp-cursor-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M12 5h9M12 27h9M16.5 5v22' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='square'/%3E%3Cpath d='M12 5h9M12 27h9M16.5 5v22' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") 16 16, text;
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  color: var(--xp-text);
  font-family: var(--font-ui);
  background: #3c9beb url("./assets/wallpaper-clean.png") center center / cover no-repeat;
  cursor: var(--xp-cursor-arrow);
}

button,
input {
  font: inherit;
}

button {
  cursor: var(--xp-cursor-arrow);
}

input,
textarea,
[contenteditable="true"] {
  cursor: var(--xp-cursor-text);
}

a,
.baidu-recent-searches button,
.result-title-button {
  cursor: var(--xp-cursor-hand);
}

#staticCanvas {
  position: fixed;
  inset: 0;
  z-index: 132;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.03;
}

.is-hidden,
[hidden] {
  display: none !important;
}

.boot-screen,
.login-screen,
.desktop,
.ending {
  position: fixed;
  inset: 0;
  z-index: 4;
}

.boot-screen {
  display: grid;
  place-items: center;
  padding: 0;
  background: #000000;
}

.boot-stage {
  position: relative;
  width: min(100vw, calc(100vh * 584 / 369));
  aspect-ratio: 584 / 369;
  background: url("./assets/xp-startup-clean.png") center center / contain no-repeat;
}

.boot-loader {
  position: absolute;
  left: 38.85%;
  top: 83.45%;
  width: 20.55%;
  height: 4.35%;
  overflow: hidden;
  border: 1px solid #838891;
  border-radius: 4px;
  background: #020202;
  box-shadow:
    inset 0 1px #b8bcc4,
    inset 0 -1px #626976,
    0 0 0 1px rgba(0, 0, 0, 0.78);
}

.boot-loader::before {
  content: "";
  position: absolute;
  inset: 2px 4px;
  border-radius: 2px;
  background: #070707;
}

.boot-loader::after {
  content: "";
  position: absolute;
  top: 31%;
  left: -24%;
  width: 18%;
  height: 38%;
  border-radius: 1px;
  background:
    linear-gradient(90deg,
      #0f1b60 0 12%,
      #5c70ff 13% 31%,
      #182c9c 32% 44%,
      transparent 45% 55%,
      #5c70ff 56% 74%,
      #182c9c 75% 87%,
      transparent 88%);
  filter: saturate(1.18);
  animation: bootLoaderSweep 1.8s linear infinite;
}

@keyframes bootLoaderSweep {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(720%);
  }
}

.boot-skip {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.login-screen {
  display: grid;
  place-items: center;
  background: #5d82d7;
}

.login-stage {
  position: relative;
  width: min(100vw, calc(100vh * 680 / 510));
  aspect-ratio: 680 / 510;
  background: url("./assets/xp-login-clean.png") center center / 100% 100% no-repeat;
}

.login-form {
  position: absolute;
  left: 62.206%;
  top: 50.196%;
  width: 26.324%;
  height: 4.314%;
  color: #ffffff;
  font-size: 12px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.login-account-card {
  position: absolute;
  left: 53.2%;
  top: 41.7%;
  width: 43.4%;
  height: 13.4%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  color: #ffffff;
  background: linear-gradient(90deg, #2d66bf 0%, #2f69c5 64%, rgba(47, 105, 197, 0) 100%);
  text-shadow: 0 1px 1px #063580;
  pointer-events: none;
}

.login-account-card img {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 2px solid #d9eaff;
  border-radius: 6px;
  object-fit: cover;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.login-account-card div {
  display: grid;
  gap: 3px;
}

.login-account-card strong {
  font: 700 15px "Microsoft YaHei", SimSun, sans-serif;
}

.login-account-card span {
  font-size: 12px;
}

.login-form label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.login-row {
  display: flex;
  align-items: center;
  height: 100%;
}

.login-row input {
  width: 62%;
  height: 72%;
  box-sizing: border-box;
  padding: 1px 4px;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  color: #111111;
  caret-color: #111111;
  background: #ffffff;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.22);
  outline: none;
}

.login-row input:focus {
  border-color: #4f7fc6;
}

.login-row button {
  width: 10.06%;
  height: 81.82%;
  margin-left: 14.52%;
  display: grid;
  place-items: center;
  border: 0;
  color: transparent;
  background: transparent;
  font-size: 0;
  line-height: 1;
  box-shadow: none;
}

.login-message {
  width: 112%;
  margin: 10px 0 0 -7%;
  color: #f8fbff;
  line-height: 1.55;
}

.login-message.is-error {
  color: #fff3b0;
}

.login-message.is-hint-lit {
  color: #fff6a8;
  text-shadow: 0 1px 1px #16376d;
  animation: hintFlash 0.85s ease-in-out 2;
}

.boot-panel {
  width: min(620px, 100%);
  border: 1px solid #ffffff;
  border-radius: 6px;
  padding: clamp(24px, 5vw, 46px);
  color: #143f82;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(236, 233, 216, 0.98));
  box-shadow: 0 24px 80px rgba(14, 49, 114, 0.42), inset 0 0 0 1px #b8c8e6;
  text-align: center;
}

.boot-logo {
  width: 80px;
  height: 80px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border: 1px solid #6d8ec8;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff, #d7e8ff);
  box-shadow: 0 6px 18px rgba(21, 87, 184, 0.28);
}

.boot-logo span,
.status-dot {
  display: block;
  width: 25px;
  height: 25px;
  background: #ef4e31;
  box-shadow: 29px 0 #39a935, 0 29px #2d83e6, 29px 29px #f6c028;
  transform: skew(-8deg);
}

.status-dot {
  width: 8px;
  height: 8px;
  box-shadow: 9px 0 #39a935, 0 9px #2d83e6, 9px 9px #f6c028;
  transform: skew(-8deg) scale(0.9);
}

.boot-kicker,
.panel-label {
  margin: 0 0 10px;
  color: #7a4b00;
  font-size: 0.78rem;
  font-weight: 700;
}

h1,
h2 {
  margin: 0;
  line-height: 1.05;
  color: #174f9d;
  text-shadow: 0 1px #ffffff;
}

h1 {
  font-size: clamp(2.15rem, 7vw, 5.2rem);
}

.boot-copy {
  max-width: 32rem;
  margin: 18px auto 28px;
  color: #304a72;
  line-height: 1.8;
}

.power-button,
.decrypt-button,
.secondary-button,
.ie-page button,
.result button {
  min-height: 30px;
  border: 1px solid #235fbd;
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #6fb6ff, #1b65d8 48%, #0c49b4);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55), 0 1px 3px rgba(0, 0, 0, 0.18);
}

.power-button,
.decrypt-button {
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
}

.power-icon,
.speaker-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
}

.power-icon::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

.power-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 2px;
  height: 9px;
  background: currentColor;
}

.desktop {
  padding: 10px 0 40px;
  background: #3c9beb url("./assets/wallpaper-clean.png") center center / cover no-repeat;
}

.desktop.is-powered-off .desktop-icons,
.desktop.is-powered-off .statusbar,
.desktop.is-powered-off .start-menu,
.desktop.is-powered-off .xp-balloon,
.desktop.is-powered-off .desktop-context-menu,
.desktop.is-powered-off .horror-notice,
.desktop.is-powered-off [data-window] {
  display: none !important;
}

.desktop::before {
  display: none;
}

.desktop::after {
  display: none;
}

.desktop.is-haunted::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 36;
  display: block;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 52% 44%, rgba(255, 255, 255, 0.18), transparent 18rem);
  animation: hauntedFlicker 0.85s steps(2, end) both;
  mix-blend-mode: multiply;
}

.horror-notice {
  position: absolute;
  left: 50%;
  bottom: 44px;
  z-index: 82;
  max-width: min(440px, calc(100vw - 32px));
  padding: 8px 12px;
  border: 1px solid #6b6b6b;
  border-radius: 2px;
  color: #101010;
  background: #fff8c6;
  box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.28), inset 1px 1px #ffffff;
  font-size: 12px;
  line-height: 1.55;
  transform: translateX(-50%);
}

.horror-notice.is-visible {
  animation: noticeFlicker 1.35s steps(2, end) both;
}

.jump-scare {
  position: absolute;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 18%),
    linear-gradient(180deg, rgba(5, 0, 0, 0.98), rgba(92, 0, 0, 0.94));
  opacity: 0;
}

.jump-scare::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(170, 0, 0, 0.62) 17% 21%, transparent 22% 42%, rgba(125, 0, 0, 0.54) 43% 46%, transparent 47%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.jump-scare.is-visible {
  animation: jumpFlash 1.08s steps(2, end) both;
}

.jump-face {
  position: relative;
  width: min(100vw, 1120px);
  height: min(100vh, 780px);
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(92, 0, 0, 0.18)),
    url("./assets/jumpscare-face.png") center center / cover no-repeat;
  box-shadow: 0 0 64px rgba(255, 255, 255, 0.25), 0 0 140px rgba(140, 0, 0, 0.94);
  filter: contrast(1.18) saturate(1.1);
  transform: scale(1.18);
}

.jump-face span {
  display: none;
}

.jump-scare p {
  position: absolute;
  left: 50%;
  bottom: 12%;
  margin: 0;
  color: #ffffff;
  font: 700 24px SimSun, "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
  text-shadow: 0 2px 10px #000000;
  transform: translateX(-50%);
}

@keyframes jumpFlash {
  0% { opacity: 0; filter: contrast(1); }
  12% { opacity: 1; filter: contrast(2.2) saturate(1.4); }
  26% { opacity: 0.2; transform: translateX(-10px); }
  44% { opacity: 1; transform: translateX(8px); }
  70% { opacity: 0.92; }
  100% { opacity: 0; }
}

@keyframes hauntedFlicker {
  0% { opacity: 0; filter: contrast(1); }
  18% { opacity: 0.72; filter: contrast(1.35); }
  32% { opacity: 0.18; }
  55% { opacity: 0.82; filter: contrast(1.6); }
  100% { opacity: 0; }
}

@keyframes noticeFlicker {
  0% { opacity: 0; transform: translateX(-50%) translateY(6px); }
  16% { opacity: 1; transform: translateX(-50%) translateY(0); }
  72% { opacity: 1; }
  100% { opacity: 0; }
}

.desktop-icons {
  position: absolute;
  inset: 0 0 30px 0;
  z-index: 8;
  pointer-events: none;
}

.desktop-icon {
  position: absolute;
  width: 76px;
  min-height: 72px;
  display: grid;
  place-items: center;
  align-content: start;
  gap: 2px;
  padding-top: 2px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #ffffff;
  background: transparent;
  text-align: center;
  text-shadow: 1px 1px 2px #00306c, -1px -1px 2px rgba(0, 0, 0, 0.28);
  font-size: 12px;
  line-height: 1.18;
  cursor: var(--xp-cursor-arrow);
  pointer-events: auto;
  touch-action: none;
  user-select: none;
}

.desktop-icon:hover,
.desktop-icon:focus-visible,
.desktop-icon.selected,
.desktop-icon.is-dragging {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.desktop-icon.selected {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

.desktop-icon.is-dragging {
  opacity: 0.88;
  z-index: 58;
}

.desktop-icon span {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(1px 2px 2px rgba(0, 28, 62, 0.42));
}

.icon-folder {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), transparent 42%),
    linear-gradient(145deg, rgba(255, 237, 132, 0.92), rgba(226, 163, 40, 0.86));
}

.icon-folder::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 13px;
  width: 34px;
  height: 24px;
  border: 2px solid #b98216;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff6a8, #f0bd42 64%, #d8921e);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.9),
    2px 2px 2px rgba(105, 68, 0, 0.18);
}

.icon-folder::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  width: 17px;
  height: 8px;
  border: 2px solid #b98216;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #fff7b8, #efc451);
}

.icon-recycle {
  background:
    radial-gradient(circle at 32% 16%, rgba(255, 255, 255, 0.95), transparent 38%),
    linear-gradient(180deg, #f8ffff 0 45%, #9dd4e8 46% 100%);
}

.icon-recycle::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 12px;
  width: 23px;
  height: 27px;
  border: 2px solid #5a8da4;
  border-radius: 2px 2px 5px 5px;
  background:
    repeating-linear-gradient(90deg, rgba(84, 136, 160, 0.22) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(151, 210, 232, 0.82));
  box-shadow: inset 0 1px #ffffff, 2px 2px 2px rgba(34, 73, 90, 0.2);
}

.icon-recycle::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 6px;
  width: 18px;
  height: 9px;
  border: 2px solid #5a8da4;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #ffffff, #bfe8f5);
  transform: rotate(-3deg);
}

.icon-word {
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #5c9dff, #1b58bd);
  font-weight: 700;
}

.icon-computer {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.98), transparent 40%),
    linear-gradient(145deg, #c6fff3, #41b2e6 52%, #1d5dbb);
}

.icon-computer::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 9px;
  width: 31px;
  height: 22px;
  border: 2px solid #5a7f93;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #f4ffff 0 62%, #8fc5df 63% 100%);
  box-shadow: inset 0 0 0 1px #ffffff, 1px 2px 2px rgba(0, 0, 0, 0.18);
}

.icon-computer::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 34px;
  width: 18px;
  height: 6px;
  border-radius: 1px;
  background: linear-gradient(180deg, #d7edf6, #587489);
  box-shadow: 0 5px 0 -1px #405763;
}

.icon-baidu {
  border-radius: 14px;
  color: #ffffff;
  background:
    radial-gradient(circle at 27% 16%, rgba(255, 255, 255, 0.92), transparent 40%),
    linear-gradient(145deg, #e7fbff, #5fb9ff 48%, #205ec7);
}

.icon-baidu::before {
  content: "搜";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font: 700 24px "Microsoft YaHei", SimSun, sans-serif;
  text-shadow: 0 1px 2px #0a3d93;
}

.icon-baidu::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  box-shadow: 6px 6px 0 -4px rgba(255, 255, 255, 0.86);
}

.icon-xhs {
  border-radius: 14px;
  color: #ffffff;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.85), transparent 42%),
    linear-gradient(145deg, #ffb6c0, #d82035 58%, #82121e);
  overflow: hidden;
}

.icon-xhs::before {
  content: "记";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff4e8;
  font: 700 24px "Microsoft YaHei", SimSun, sans-serif;
  text-shadow: 0 1px 2px #6d0610;
}

.icon-xhs::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  top: 9px;
  bottom: 9px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
}

.icon-wechat {
  border-radius: 14px;
  color: #ffffff;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(145deg, #b9fff0, #1db878 56%, #08734b);
  overflow: hidden;
}

.icon-wechat::before {
  content: "信";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font: 700 24px "Microsoft YaHei", SimSun, sans-serif;
  text-shadow: 0 1px 2px #075333;
}

.icon-wechat::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  width: 28px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 13px;
}

.icon-music {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.94), transparent 38%),
    radial-gradient(circle at 50% 50%, #1a1a1a 0 5px, #fff3b7 6px 8px, transparent 9px),
    radial-gradient(circle, #fff4a6 0 52%, #ffae2d 54% 100%);
}

.icon-music::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 16px;
  border-left: 3px solid #6b2300;
  border-bottom: 3px solid #6b2300;
  border-radius: 0 0 7px 7px;
}

.icon-network {
  border: 2px solid #6c94b8;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), transparent 42%),
    linear-gradient(180deg, #eaffff 0 48%, #61d5ee 49%, #287ec2 100%);
}

.icon-network::before,
.icon-network::after {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 15px;
  height: 10px;
  border: 2px solid #6c94b8;
  border-radius: 2px;
  background: #ccefff;
}

.icon-network::before {
  left: -4px;
}

.icon-network::after {
  right: -4px;
}

.icon-player {
  border: 2px solid #3e6f92;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.95), transparent 36%),
    radial-gradient(circle, #e6ffff 0 5px, #43e0ff 6px 54%, #1a5c9e 56%);
}

.icon-player::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 10px;
  width: 0;
  height: 0;
  border-left: 12px solid #ffffff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.icon-acdsee {
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(135deg, transparent 0 52%, #73b742 53% 100%),
    linear-gradient(180deg, #1b1b1b, #3d3d3d);
}

.icon-acdsee::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 7px;
  width: 16px;
  height: 16px;
  border: 3px solid #f0f0f0;
  border-radius: 50%;
  background: #111111;
}

.icon-excel {
  border-radius: 12px;
  color: #ffffff;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(180deg, #8df2a4, #19a746 56%, #0f7330);
  font-weight: 700;
}

.icon-blog {
  border: 2px solid #6d8ec8;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), transparent 42%),
    linear-gradient(180deg, #ffffff, #b9dcff 58%, #4e91df);
}

.icon-blog::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 8px;
  height: 3px;
  background: #2a62c3;
  box-shadow: 0 7px #8ca8dc, 0 14px #8ca8dc;
}

.icon-ie {
  border-radius: 50%;
  color: #ffe155;
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.92), transparent 36%),
    radial-gradient(circle, #8af5ff, #1670d8);
  font: 700 28px Georgia, serif;
}

.icon-ie::before {
  content: "e";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #0a7edc;
  font: 700 48px Georgia, serif;
  text-shadow: 1px 1px #dff9ff;
}

.icon-ie::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 25px;
  width: 50px;
  height: 12px;
  border-top: 5px solid #f2cf32;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.icon-qchat {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 28%, #ffffff 0 18%, transparent 19%),
    radial-gradient(circle at 40% 30%, #111111 0 5%, transparent 6%),
    radial-gradient(circle at 60% 30%, #111111 0 5%, transparent 6%),
    linear-gradient(180deg, #1f1f1f 0 66%, #f5f5f5 67% 100%);
}

.icon-qchat::before {
  content: "Q";
  position: absolute;
  left: 50%;
  bottom: -5px;
  color: #e80000;
  font: 900 34px Arial, sans-serif;
  text-shadow: 0 1px 2px #ffffff, 0 2px 4px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
}

.icon-mail {
  border-radius: 4px;
  background:
    linear-gradient(135deg, transparent 0 48%, rgba(28, 97, 194, 0.22) 49% 52%, transparent 53%),
    linear-gradient(180deg, #ffffff, #d9ebff);
  border: 2px solid #3869b7 !important;
}

.icon-mail::before {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  top: 14px;
  height: 24px;
  border: 2px solid #2b5bb2;
  background:
    linear-gradient(135deg, transparent 0 48%, #ef5f23 49% 52%, transparent 53%),
    linear-gradient(45deg, transparent 0 48%, #2f6bd1 49% 52%, transparent 53%),
    #ffffff;
}

.icon-mail::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: 6px;
  width: 20px;
  height: 14px;
  background: linear-gradient(180deg, #00b050, #007a31);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.icon-notepad {
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, #b6e9ff 0 3px, #f7fdff 3px 10px),
    linear-gradient(180deg, #ffffff, #cceeff);
  border: 2px solid #82b8d8 !important;
}

.icon-notepad::before {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  top: 5px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #5aa2ca 0 3px, transparent 3px 7px);
}

.icon-lock {
  width: 30px !important;
  height: 25px !important;
  border: 2px solid #8a1422;
  border-radius: 4px;
  margin-top: 9px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(180deg, #ff9aa6, #d0162c);
}

.icon-lock::before {
  content: "";
  position: absolute;
  left: 6px;
  top: -16px;
  width: 14px;
  height: 16px;
  border: 3px solid #8a1422;
  border-bottom: 0;
  border-radius: 13px 13px 0 0;
}

.icon-terminal {
  border: 2px solid #444444;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.2), transparent 42%),
    linear-gradient(145deg, #3c4852, #070707 62%);
  box-shadow: inset 0 0 0 2px #2a2a2a;
}

.icon-terminal::before {
  content: "C:\\>";
  position: absolute;
  left: 5px;
  top: 8px;
  color: #f2f2f2;
  font: 700 10px var(--font-mono);
}

.icon-terminal::after {
  content: "";
  position: absolute;
  left: 6px;
  bottom: 8px;
  width: 18px;
  height: 2px;
  background: #f2f2f2;
}

.statusbar {
  position: absolute;
  inset: auto 0 0;
  z-index: 40;
  height: 30px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  border-top: 1px solid #69a8ff;
  background: linear-gradient(180deg, #2f8fff, #0a55d1 48%, #073fa3);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58), 0 -2px 8px rgba(0, 0, 0, 0.18);
}

.brand {
  height: 30px;
  min-width: 98px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px 0 10px;
  border: 0;
  border-radius: 0 15px 15px 0;
  color: #ffffff;
  font-weight: 700;
  background: linear-gradient(180deg, #7bd964, #28a936 42%, #0d7e1e);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.65), 2px 0 8px rgba(0, 0, 0, 0.22);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.44);
}

.taskbar-apps {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-left: 8px;
  color: #f7f89b;
}

.quick-launch-icon {
  min-width: 22px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 3px;
  padding: 0;
  color: #f7f89b;
  background: transparent;
  cursor: var(--xp-cursor-hand);
  font: 700 18px Georgia, serif;
}

.quick-launch-icon:hover,
.quick-launch-icon:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.taskbar-window-button {
  max-width: 178px;
  min-width: 132px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid rgba(7, 55, 141, 0.8);
  border-radius: 3px;
  padding: 0 9px;
  color: #ffffff;
  background: linear-gradient(180deg, #5aa4ff, #1d6ee8 48%, #0b4dbd);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.55), inset -1px -1px rgba(0, 0, 0, 0.18);
  text-align: left;
  text-shadow: 0 1px 1px #063580;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.taskbar-window-button::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  border-radius: 3px;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.95), transparent 40%),
    linear-gradient(135deg, #8eeaff, #2879e0 62%, #17429d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 1px 1px rgba(0, 0, 0, 0.26);
}

.taskbar-window-button.active {
  background: linear-gradient(180deg, #78b8ff, #2c80ef 48%, #0f58c7);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.75), inset -1px -1px rgba(0, 0, 0, 0.22);
}

.status-readouts {
  height: 28px;
  min-width: 164px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 8px;
  color: #ffffff;
  font-size: 12px;
  background: linear-gradient(180deg, #40c8fb, #1185d4);
  box-shadow: inset 1px 0 rgba(0, 0, 0, 0.15);
}

.icon-button {
  width: 25px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #5ad1ff, #168bd7);
}

.icon-button.active {
  background: linear-gradient(180deg, #79e36d, #21a936);
}

.xp-balloon {
  position: absolute;
  right: 22px;
  bottom: 45px;
  z-index: 75;
  width: 284px;
  min-height: 72px;
  padding: 9px 30px 9px 72px;
  border: 2px solid #7ec7f4;
  border-radius: 3px;
  color: #1a5279;
  background: linear-gradient(180deg, #effcff, #ccefff);
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.26), inset 1px 1px #ffffff;
  font-size: 14px;
}

.xp-balloon::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  width: 42px;
  height: 42px;
  border: 1px solid #5792c8;
  border-radius: 3px;
  background:
    radial-gradient(circle at 42% 38%, #ffe3c0 0 22%, transparent 23%),
    radial-gradient(circle at 36% 36%, #111111 0 4%, transparent 5%),
    radial-gradient(circle at 52% 36%, #111111 0 4%, transparent 5%),
    linear-gradient(180deg, #111111 0 58%, #efefef 59% 100%);
}

.xp-balloon strong {
  display: block;
  margin-bottom: 6px;
  font: 700 14px var(--font-ui);
}

.xp-balloon strong span {
  display: none;
}

.xp-balloon p {
  margin: 0;
  line-height: 1.45;
  color: #275f83;
}

.xp-balloon button {
  position: absolute;
  right: 6px;
  top: 5px;
  width: 18px;
  height: 18px;
  border: 1px solid #6fa7d4;
  border-radius: 2px;
  color: #24628c;
  background: linear-gradient(180deg, #ffffff, #c7ecff);
  font-weight: 700;
  line-height: 1;
}

.speaker-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 5px;
  width: 6px;
  height: 7px;
  background: currentColor;
  clip-path: polygon(0 25%, 40% 25%, 100% 0, 100% 100%, 40% 75%, 0 75%);
}

.speaker-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  top: 3px;
  width: 7px;
  height: 10px;
  border: 2px solid currentColor;
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

.start-menu {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 60;
  width: 382px;
  border: 1px solid #174ea8;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.34);
}

.start-user {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: #ffffff;
  background: linear-gradient(180deg, #6eaafa, #1765d8 60%, #0b49b4);
  font-size: 16px;
  text-shadow: 0 1px 1px #073a9a;
}

.user-picture {
  width: 46px;
  height: 46px;
  border: 2px solid #ffffff;
  border-radius: 5px;
  background: #ffffff url("./assets/account-shen-qingli.png") center center / cover no-repeat;
}

.start-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 236px;
}

.start-left,
.start-right {
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 8px;
}

.start-right {
  background: #dbe8fb;
  border-left: 1px solid #aac1df;
}

.start-menu button {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  color: #10234a;
  background: transparent;
  text-align: left;
}

.start-menu button:hover {
  color: #ffffff;
  background: #316ac5;
}

.desktop-context-menu {
  position: absolute;
  z-index: 96;
  min-width: 178px;
  padding: 2px;
  border: 1px solid #6f6f6f;
  color: #111111;
  background: #ffffff;
  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.38);
  font-size: 12px;
}

.desktop-context-menu button {
  width: 100%;
  min-height: 24px;
  display: flex;
  align-items: center;
  padding: 2px 22px;
  border: 0;
  color: #111111;
  background: transparent;
  text-align: left;
}

.desktop-context-menu button:hover,
.desktop-context-menu button:focus-visible {
  color: #ffffff;
  background: #316ac5;
  outline: none;
}

.desktop-context-menu hr {
  height: 1px;
  margin: 3px 2px;
  border: 0;
  background: #aca899;
}

.mini-icon {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.96), transparent 42%),
    linear-gradient(145deg, #92ecff, #2e70c9 62%, #17469d);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.82),
    inset 0 -4px 8px rgba(0, 65, 122, 0.22),
    0 1px 2px rgba(0, 24, 70, 0.22);
}

.baidu-mini::before,
.xhs-mini::before,
.wechat-mini::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font: 700 12px "Microsoft YaHei", SimSun, sans-serif;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.36);
}

.baidu-mini {
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.94), transparent 42%),
    linear-gradient(145deg, #dcf8ff, #3f9dff 62%, #2259c8);
}

.baidu-mini::before {
  content: "搜";
}

.xhs-mini {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.82), transparent 42%),
    linear-gradient(145deg, #ff8c98, #e71226 60%, #98101c);
}

.xhs-mini::before {
  content: "记";
}

.wechat-mini {
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(145deg, #a0ffd0, #16c35e 62%, #087b35);
}

.wechat-mini::before {
  content: "信";
}

.chat-mini {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.88), transparent 42%),
    radial-gradient(circle at 30% 32%, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 57% 32%, #ffffff 0 3px, transparent 4px),
    linear-gradient(180deg, #5aa7ff, #1455b8);
}

.backup-mini {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.42), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 45%),
    linear-gradient(135deg, #1b0202 0 48%, #b30000 49% 100%);
}

.music-mini {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.94), transparent 42%),
    radial-gradient(circle, #fff3a8 0 34%, #f3b23a 36% 72%, #a85d12 74%);
}

.player-mini {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(145deg, #8cf5ff, #168bd7 64%, #124e9e);
}

.acdsee-mini {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.36), transparent 42%),
    linear-gradient(135deg, #111111 0 55%, #9cf05d 56%);
}

.excel-mini {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(145deg, #8ef2a5, #15803d 64%);
}

.blog-mini {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(145deg, #fff4a7, #ffc833 64%, #d18b0f);
}

.ie-mini {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.92), transparent 42%),
    linear-gradient(145deg, #93f6ff, #39a7ec 64%, #1255af);
}

.all-programs {
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 8px;
  border: 0;
  border-top: 1px solid #ddd;
  color: #10234a;
  background: transparent;
  cursor: var(--xp-cursor-hand);
  font-weight: 700;
  text-align: left;
}

.all-programs span {
  color: #168a24;
}

.start-footer {
  height: 42px;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px;
  background: linear-gradient(180deg, #2b77e5, #0b52c4);
}

.start-footer button {
  color: #ffffff;
  background: transparent;
}

.window {
  position: absolute;
  z-index: 10;
  width: min(760px, calc(100vw - 32px));
  min-height: 340px;
  border: 1px solid var(--xp-border);
  border-radius: 7px 7px 3px 3px;
  background: var(--xp-silver);
  box-shadow: 7px 9px 22px rgba(13, 32, 64, 0.38), inset 0 0 0 1px #ffffff;
  overflow: hidden;
}

.window.is-maximized {
  left: 0 !important;
  top: 0 !important;
  right: 0;
  bottom: 30px;
  width: auto !important;
  height: auto;
  min-height: 0;
  border-radius: 0;
}

.window.is-maximized .window-body {
  max-height: calc(100vh - 92px);
  overflow: auto;
}

.window.is-maximized .ie-toolbar + .window-body,
.window.is-maximized .computer-toolbar + .window-body {
  max-height: calc(100vh - 126px);
}

.window-documents {
  left: 23%;
  top: 11%;
}

.window-work-info {
  left: 20%;
  top: 13%;
  width: min(610px, calc(100vw - 32px));
}

.window-readme-info {
  left: 25%;
  top: 15%;
  width: min(540px, calc(100vw - 32px));
}

.window-intro-help {
  left: 18%;
  top: 9%;
  width: min(650px, calc(100vw - 32px));
  min-height: 0;
}

.window-computer {
  left: 27%;
  top: 14%;
  width: min(560px, calc(100vw - 32px));
}

.window-system-properties {
  left: 8px;
  top: 8px;
  width: 346px;
  min-height: 0;
  border-radius: 4px 4px 2px 2px;
  background: #ece9d8;
  box-shadow: 4px 5px 16px rgba(0, 0, 0, 0.32), inset 0 0 0 1px #ffffff;
}

.window-network {
  left: 29%;
  top: 17%;
  width: min(560px, calc(100vw - 32px));
}

.window-drive,
.window-folder,
.window-network-detail {
  left: 24%;
  top: 10%;
  width: min(760px, calc(100vw - 32px));
}

.window-drive-file {
  left: 30%;
  top: 12%;
  width: min(680px, calc(100vw - 32px));
}

.window-backup-computer {
  left: 8%;
  top: 7%;
  width: min(1060px, calc(100vw - 32px));
}

.window-hidden-folder {
  left: 27%;
  top: 12%;
}

.window-word {
  left: 32%;
  top: 12%;
  width: min(660px, calc(100vw - 32px));
}

.window-music {
  left: 30%;
  top: 20%;
  width: min(460px, calc(100vw - 32px));
  min-height: 0;
}

.window-player {
  left: 33%;
  top: 18%;
  width: min(560px, calc(100vw - 32px));
  min-height: 0;
}

.window-acdsee {
  left: 31%;
  top: 13%;
  width: min(650px, calc(100vw - 32px));
}

.window-recycle-bin {
  left: 22%;
  top: 13%;
  width: min(780px, calc(100vw - 32px));
}

.window-noise-site {
  left: 28%;
  top: 11%;
  width: min(650px, calc(100vw - 32px));
}

.window-photo-detail {
  left: 36%;
  top: 10%;
  width: min(620px, calc(100vw - 32px));
}

.window-excel {
  left: 33%;
  top: 15%;
  width: min(670px, calc(100vw - 32px));
}

.window-ie,
.window-baidu,
.window-baidu-cache,
.window-xhs,
.window-chat-site,
.window-wechat,
.window-blog {
  left: 28%;
  top: 9%;
  width: min(790px, calc(100vw - 32px));
}

.window-xhs {
  left: 18%;
  width: min(700px, calc(100vw - 32px));
}

.window-baidu {
  left: 18%;
  width: min(700px, calc(100vw - 32px));
}

.window-baidu-cache {
  left: 24%;
  top: 12%;
  width: min(720px, calc(100vw - 32px));
}

.window-wechat {
  left: 20%;
  top: 10%;
  width: min(760px, calc(100vw - 32px));
}

.window-chat-site {
  left: 16%;
  top: 8%;
  width: min(820px, calc(100vw - 32px));
}

.window-terminal {
  left: 34%;
  top: 23%;
}

.window-decrypt {
  left: 43%;
  top: 8%;
  width: min(650px, calc(100vw - 32px));
}

.titlebar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 0 5px 0 7px;
  border: 1px solid #5e9cff;
  border-bottom-color: #0a3182;
  border-radius: 6px 6px 0 0;
  color: #ffffff;
  background: linear-gradient(180deg, #70b7ff 0, #2078ee 42%, #0b4bc2 52%, #07358d 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.66);
  user-select: none;
  touch-action: none;
}

.window:not(.active-window) .titlebar {
  border-color: #8aa4d6;
  border-bottom-color: #5c7199;
  background: linear-gradient(180deg, #bed4f6 0, #7d9ed9 48%, #647fb6 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58);
}

.titlebar-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), transparent 42%),
    linear-gradient(145deg, #92ecff, #2e70c9 62%, #17469d);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.85),
    0 1px 1px rgba(0, 22, 68, 0.38);
}

.titlebar-icon[data-clickable-icon="true"],
.site-logo[data-clickable-icon="true"],
.user-picture[data-clickable-icon="true"],
.system-logo-card[data-clickable-icon="true"],
.backup-logo[data-clickable-icon="true"],
.backup-window-mark[data-clickable-icon="true"],
.backup-start-dot[data-clickable-icon="true"] {
  cursor: var(--xp-cursor-hand);
}

.titlebar-icon[data-clickable-icon="true"]:hover,
.site-logo[data-clickable-icon="true"]:hover,
.user-picture[data-clickable-icon="true"]:hover,
.system-logo-card[data-clickable-icon="true"]:hover,
.backup-logo[data-clickable-icon="true"]:hover,
.backup-window-mark[data-clickable-icon="true"]:hover,
.backup-start-dot[data-clickable-icon="true"]:hover {
  filter: brightness(1.08);
}

.titlebar-icon[data-clickable-icon="true"]:focus-visible,
.site-logo[data-clickable-icon="true"]:focus-visible,
.user-picture[data-clickable-icon="true"]:focus-visible,
.system-logo-card[data-clickable-icon="true"]:focus-visible,
.backup-logo[data-clickable-icon="true"]:focus-visible,
.backup-window-mark[data-clickable-icon="true"]:focus-visible,
.backup-start-dot[data-clickable-icon="true"]:focus-visible {
  outline: 1px dotted #ffffff;
  outline-offset: 2px;
}

.titlebar-icon-baidu {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(145deg, #dcf8ff, #3f9dff 62%, #2259c8);
}

.titlebar-icon-xhs {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(145deg, #ff8c98, #e71226 60%, #98101c);
}

.titlebar-icon-wechat {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(145deg, #a0ffd0, #16c35e 62%, #087b35);
}

.titlebar-icon-baidu::before,
.titlebar-icon-xhs::before,
.titlebar-icon-wechat::before {
  color: #ffffff;
  font: 700 10px "Microsoft YaHei", SimSun, sans-serif;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38);
}

.titlebar-icon-baidu::before {
  content: "搜";
}

.titlebar-icon-xhs::before {
  content: "记";
}

.titlebar-icon-wechat::before {
  content: "信";
}

.titlebar-icon-chat {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%),
    radial-gradient(circle at 32% 34%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 56% 34%, #ffffff 0 2px, transparent 3px),
    linear-gradient(180deg, #62aaff, #1455b8);
}

.titlebar-icon-blog {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(145deg, #fff4a7, #ffc833 64%, #d18b0f);
}

.titlebar-icon-ie {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(145deg, #8af3ff, #2c9fec 62%, #114a9f);
}

.titlebar strong {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  text-shadow: 0 1px 1px #062963;
}

.window-controls,
.system-title-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.minimize-button,
.maximize-button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff;
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #68a6ff, #0a4dc1);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.62);
  font: 700 14px Tahoma, sans-serif;
  line-height: 1;
  padding: 0 0 6px;
  text-shadow: 0 1px #063580;
}

.maximize-button {
  padding: 0;
  font-size: 13px;
}

.minimize-button:hover,
.maximize-button:hover,
.help-button:hover,
.close-button:hover {
  filter: brightness(1.08);
}

.close-button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #ffffff;
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #ff9c81, #e74424 48%, #a7130a);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.6);
  font-weight: 700;
}

.window-body {
  padding: 14px;
  color: var(--xp-text);
  background: var(--xp-silver);
}

.explorer-layout {
  display: grid;
  grid-template-columns: 112px minmax(150px, 190px) 1fr;
  gap: 10px;
  min-height: 430px;
}

.file-sidebar,
.file-list {
  display: grid;
  align-content: start;
  gap: 7px;
}

.file-list {
  max-height: 430px;
  overflow: auto;
  padding-right: 3px;
}

.side-item,
.file-row,
.secondary-button {
  min-height: 32px;
  border: 1px solid #9f9f9f;
  border-radius: 2px;
  color: var(--xp-text);
  background: linear-gradient(180deg, #ffffff, #e7e3d1);
  text-align: left;
  box-shadow: inset 1px 1px #ffffff;
}

.side-item,
.file-row {
  padding: 0 9px;
}

.side-item.active,
.file-row.active {
  border-color: #235fbd;
  color: #ffffff;
  background: linear-gradient(180deg, #4b92f5, #1b62c9);
}

.file-preview,
.word-page,
.blog-page,
.split-doc-page {
  min-width: 0;
  border: 1px solid #b8b6aa;
  border-radius: 2px;
  padding: 13px;
  color: #1b1b1b;
  background: var(--xp-paper);
  box-shadow: inset 1px 1px #ffffff;
}

.intro-help-page {
  min-height: 360px;
  max-height: min(68vh, 590px);
  overflow: auto;
  padding: 18px 22px;
  color: #111111;
  background: #ffffff;
  font-family: "SimSun", "Songti SC", serif;
  line-height: 1.9;
}

.intro-help-page h2 {
  margin: 0 0 14px;
  color: #174f9d;
  font: 700 20px "SimSun", "Songti SC", serif;
}

.intro-help-page p {
  margin: 0 0 12px;
}

.intro-help-warning {
  padding: 8px 10px;
  border: 1px solid #d6af17;
  background: #fff8c7;
  color: #5a4300;
}

.file-preview h2,
.word-page h2,
.blog-page h2,
.split-doc-page h2 {
  margin-bottom: 12px;
  color: #164ba9;
  font-size: 1rem;
}

.split-doc-page {
  min-height: 320px;
  max-height: min(68vh, 560px);
  overflow: auto;
  line-height: 1.75;
}

.split-doc-page section {
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid #d1cdb8;
  background: #ffffff;
}

.split-doc-page strong {
  display: block;
  margin-bottom: 6px;
  color: #174f9d;
}

.split-doc-page p {
  margin: 0 0 8px;
}

.split-doc-page p:last-child {
  margin-bottom: 0;
}

.file-preview pre {
  margin: 0;
  max-height: 370px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.58;
}

.drives {
  display: grid;
  gap: 10px;
}

.computer-shell {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 10px;
  min-height: 390px;
  max-height: min(68vh, 620px);
  overflow: auto;
  background: #ffffff;
}

.computer-shell.is-task-pane-hidden {
  grid-template-columns: 1fr;
}

.computer-shell.is-task-pane-hidden .computer-task-pane {
  display: none;
}

.computer-task-pane {
  display: grid;
  align-content: start;
  gap: 10px;
}

.computer-task-pane section {
  border: 1px solid #9bb4df;
  background: linear-gradient(180deg, #ffffff, #edf4ff);
  box-shadow: inset 1px 1px #ffffff;
}

.computer-task-pane strong {
  display: block;
  padding: 6px 8px;
  color: #ffffff;
  background: linear-gradient(180deg, #6d93d8, #2d5fae);
  font-size: 12px;
}

.computer-task-pane button {
  width: 100%;
  min-height: 26px;
  display: block;
  border: 0;
  padding: 3px 8px;
  color: #174f9d;
  background: transparent;
  text-align: left;
  font-size: 12px;
}

.computer-task-pane button:hover,
.computer-task-pane button:focus-visible {
  color: #ffffff;
  background: #316ac5;
  outline: none;
}

.computer-detail-card p {
  margin: 0;
  padding: 8px;
  color: #2f3f5b;
  line-height: 1.55;
  font-size: 12px;
}

.computer-main-area {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.computer-group-title {
  padding: 3px 0 2px;
  border-bottom: 1px solid #d8e2f1;
  color: #174f9d;
  font-weight: 700;
  font-size: 12px;
}

.drive-item {
  min-height: 58px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid #c4c0ad;
  color: var(--xp-text);
  background: #fffef7;
  font: inherit;
  text-align: left;
  cursor: var(--xp-cursor-arrow);
}

.drive-item:hover,
.drive-item:focus-visible,
.drive-item.selected {
  border-color: #2b68cc;
  background: #eef5ff;
  outline: none;
}

.drive-item small {
  grid-column: 2;
  color: var(--xp-muted);
}

.computer-space-bar {
  grid-column: 2;
  width: min(190px, 100%);
  height: 9px;
  border: 1px solid #7d8da8;
  background: #ffffff;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.18);
}

.computer-space-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, #83b9ff, #1f63d4);
}

.computer-space-bar.cd i {
  background: linear-gradient(180deg, #ffe889, #d69b1f);
}

.computer-small-icon {
  position: relative;
  width: 38px;
  height: 38px;
  display: block;
  align-self: center;
}

.control-panel-icon,
.shared-folder-icon,
.task-icon {
  position: relative;
  width: 38px;
  height: 32px;
  display: block;
  align-self: center;
}

.control-panel-icon {
  border: 2px solid #7c8da8;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffffff, #c7d6ea);
  box-shadow: inset 0 0 0 3px #eef5ff;
}

.control-panel-icon::before,
.control-panel-icon::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: #1d5fbd;
}

.control-panel-icon::before {
  left: 7px;
  top: 8px;
  width: 9px;
  height: 9px;
  box-shadow: 15px 0 #2faa32, 7px 11px #f6c028;
}

.control-panel-icon::after {
  right: 4px;
  bottom: 4px;
  width: 9px;
  height: 9px;
  background: #c7192d;
}

.shared-folder-icon {
  border-radius: 2px;
  background:
    linear-gradient(180deg, #fff7b8, #efc451);
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.18));
}

.shared-folder-icon::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 5px;
  width: 16px;
  height: 8px;
  border-radius: 3px 3px 0 0;
  background: #ffe680;
}

.shared-folder-icon::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 0;
  width: 18px;
  height: 15px;
  border: 1px solid #5b79aa;
  border-radius: 2px;
  background: linear-gradient(180deg, #eaffff, #61a9d2);
}

.task-icon {
  border: 1px solid #8b8b8b;
  background: linear-gradient(180deg, #ffffff, #e8e8e8);
}

.task-icon::before {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 7px;
  height: 2px;
  background: #2f63bd;
  box-shadow: 0 7px #2f63bd, 0 14px #a11d2d;
}

.computer-menubar {
  min-height: 24px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid #c8c6b8;
  color: #111111;
  background: #ece9d8;
  font-size: 12px;
}

.computer-toolbar {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #c8c6b8;
  background: linear-gradient(180deg, #f6f4e9, #e7e3d2);
}

.computer-toolbar button {
  min-height: 26px;
  border: 1px solid transparent;
  border-radius: 3px;
  padding: 0 8px;
  background: transparent;
  color: #1f3156;
  cursor: var(--xp-cursor-hand);
}

.computer-toolbar button:hover,
.computer-toolbar button:focus-visible,
.computer-toolbar button.is-clicked {
  border-color: #9db7df;
  background: linear-gradient(180deg, #ffffff, #dfeeff);
}

.computer-toolbar button.is-clicked,
.ie-toolbar button.is-clicked {
  transform: translateY(1px);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.22);
}

.toolbar-status {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: #335071;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.drives.is-compact-view,
.computer-items.is-compact-view {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drives.is-compact-view .drive-item,
.computer-items.is-compact-view .drive-item {
  min-height: 44px;
  grid-template-columns: 34px 1fr;
  padding: 6px;
}

.computer-addressbar {
  min-height: 32px;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto minmax(130px, 0.8fr) auto;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  border-bottom: 1px solid #b7b4a8;
  background: #ece9d8;
}

.computer-addressbar label {
  color: #555555;
  font-size: 12px;
}

.computer-addressbar input {
  min-width: 0;
  height: 23px;
  border: 1px solid #7f9db9;
  padding: 0 6px;
  background: #ffffff;
}

.computer-addressbar button {
  min-height: 23px;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffffff, #dce8f7);
}

.computer-search-status {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid #c4c0ad;
  color: #4f4a28;
  background: #fff8c6;
  font-size: 12px;
}

.drive-icon {
  width: 36px;
  height: 24px;
  border: 2px solid #6b6b6b;
  border-radius: 3px;
  background: linear-gradient(180deg, #f4f4f4, #7f7f7f);
}

.drive-icon.cd {
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 4px, #a6cfff 5px 100%);
}

.system-drive-item {
  background: #ffffff;
}

.system-icon-small {
  width: 38px;
  height: 30px;
  position: relative;
  border: 2px solid #8d9fb8;
  border-radius: 2px;
  background: linear-gradient(180deg, #ecf6ff, #b7c7d8);
  box-shadow: inset 0 0 0 2px #ffffff;
}

.system-icon-small::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 16px;
  height: 14px;
  background:
    linear-gradient(90deg, #f14a23 0 48%, transparent 48% 52%, #7ac943 52%),
    linear-gradient(#f14a23 0 48%, transparent 48% 52%, #f7db31 52%);
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.22));
}

.system-titlebar {
  height: 25px;
  padding-left: 6px;
  border-radius: 3px 3px 0 0;
}

.system-title-actions {
  display: flex;
  gap: 2px;
}

.help-button {
  width: 21px;
  height: 21px;
  border: 1px solid #ffffff;
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #66a4ff, #0a4dc1);
  font-weight: 700;
  line-height: 1;
}

.system-property-body {
  padding: 4px 6px 6px;
  background: #ece9d8;
  font-size: 11px;
}

.system-tabs {
  display: flex;
  align-items: end;
  gap: 1px;
  padding-left: 2px;
}

.system-tabs button {
  height: 22px;
  padding: 0 6px;
  border: 1px solid #919b9c;
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #fffef6, #ece9d8);
  font-size: 11px;
  white-space: nowrap;
}

.system-tabs button.active {
  position: relative;
  z-index: 1;
  height: 24px;
  margin-bottom: -1px;
  background: #fcfbf4;
}

.system-tab-panel {
  min-height: 315px;
  display: grid;
  grid-template-columns: 142px 1fr;
  column-gap: 14px;
  padding: 30px 15px 12px 40px;
  border: 1px solid #919b9c;
  background: #fcfbf4;
}

.system-tab-status {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding: 6px 8px;
  border: 1px solid #d6d0bb;
  color: #445;
  background: #fffef7;
  font-size: 11px;
}

.system-logo-card {
  padding-top: 24px;
}

.xp-monitor {
  width: 84px;
  height: 66px;
  position: relative;
  display: grid;
  place-items: center;
  border: 2px solid #b9bdc6;
  border-radius: 3px;
  background: linear-gradient(180deg, #f4f4f4, #d7d9dd);
  box-shadow: inset 0 0 0 4px #ffffff, 4px 4px 8px rgba(0, 0, 0, 0.12);
}

.xp-monitor::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -11px;
  width: 34px;
  height: 8px;
  border-radius: 0 0 3px 3px;
  background: #c3c8cf;
}

.xp-flag {
  width: 49px;
  height: 39px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  transform: skewY(-8deg) rotate(-7deg);
}

.xp-flag i {
  display: block;
  box-shadow: inset 0 2px rgba(255, 255, 255, 0.38);
}

.xp-flag i:nth-child(1) { background: linear-gradient(135deg, #fb6a1e, #d43017); }
.xp-flag i:nth-child(2) { background: linear-gradient(135deg, #9bdd39, #49a51d); }
.xp-flag i:nth-child(3) { background: linear-gradient(135deg, #2c73ff, #1649b8); }
.xp-flag i:nth-child(4) { background: linear-gradient(135deg, #ffe448, #d4a917); }

.system-specs {
  margin: 0;
  color: #000000;
  font: 11px "Lucida Console", "Courier New", monospace;
  line-height: 1.45;
}

.system-specs dt {
  margin: 0 0 4px;
  font: 12px var(--font-ui);
}

.system-specs dd {
  margin: 0 0 1px;
}

.system-specs dt:not(:first-child) {
  margin-top: 14px;
}

.system-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 7px 2px 0;
}

.system-dialog-actions button {
  min-width: 72px;
  min-height: 23px;
  border: 1px solid #7f9db9;
  border-radius: 3px;
  background: linear-gradient(180deg, #ffffff, #dce8f7);
}

.system-dialog-actions button:disabled {
  color: #8a8a8a;
  background: #ece9d8;
}

.network-card {
  width: 36px;
  height: 28px;
  border: 2px solid #6c94b8;
  border-radius: 3px;
  background: linear-gradient(180deg, #eaffff 0 55%, #61a9d2 56%);
}

.network-card.shared {
  background: linear-gradient(180deg, #fff7d2 0 55%, #e2b750 56%);
}

.drive-note {
  padding: 10px;
  background: #fff8c6;
  border: 1px solid #dfcb73;
}

.drive-page,
.network-detail {
  min-height: 360px;
  max-height: min(68vh, 610px);
  overflow: auto;
  background: #fffef7;
}

.drive-page header,
.network-detail header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #c9c4a8;
}

.drive-page h2,
.network-detail h2 {
  margin: 0 0 6px;
  color: #174f9d;
  font-size: 1.08rem;
}

.drive-page header p,
.network-detail header p {
  margin: 0;
  color: #4d4d4d;
  line-height: 1.7;
}

.recycle-bin-page,
.noise-site-page {
  min-height: 340px;
  max-height: min(68vh, 600px);
  overflow: auto;
  background: #fffef7;
}

.recycle-bin-page header,
.noise-site-page header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #c9c4a8;
}

.recycle-bin-page h2,
.noise-site-page h2 {
  margin: 0 0 6px;
  color: #174f9d;
  font-size: 1.08rem;
}

.recycle-bin-page header p,
.noise-site-page header p {
  margin: 0;
  color: #4d4d4d;
  line-height: 1.7;
}

.recycle-content {
  display: grid;
  grid-template-columns: minmax(300px, 0.95fr) minmax(240px, 1.05fr);
  gap: 10px;
  align-items: start;
}

.recycle-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.recycle-item {
  min-height: 74px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  padding: 8px 10px;
  border: 1px solid #c4c0ad;
  color: var(--xp-text);
  background: #ffffff;
  text-align: left;
  box-shadow: inset 1px 1px #ffffff;
  cursor: var(--xp-cursor-arrow);
}

.recycle-item::before {
  content: "";
  grid-row: 1 / 4;
  width: 30px;
  height: 36px;
  align-self: center;
  border: 1px solid #9a9a9a;
  background:
    linear-gradient(135deg, transparent 0 72%, #d9e7ff 73% 100%),
    linear-gradient(180deg, #ffffff, #edf4ff);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.18);
}

.recycle-item:hover,
.recycle-item:focus-visible,
.recycle-item.active {
  border-color: #235fbd;
  background: #eef5ff;
  outline: none;
}

.recycle-item.active {
  color: #ffffff;
  background: #316ac5;
}

.recycle-item.active strong,
.recycle-item.active small,
.recycle-item.active p {
  color: #ffffff;
}

.recycle-item strong {
  color: #15408d;
}

.recycle-item small {
  margin-top: 2px;
  color: #777777;
}

.recycle-item p {
  margin: 5px 0 0;
  line-height: 1.55;
}

.recycle-detail {
  min-height: 320px;
  padding: 10px 12px;
  border: 1px solid #c4c0ad;
  background: #ffffff;
  box-shadow: inset 1px 1px #ffffff;
}

.recycle-detail h3 {
  margin: 0 0 4px;
  color: #174f9d;
  font-size: 1rem;
}

.recycle-detail p {
  margin: 0 0 10px;
  color: #666666;
}

.recycle-detail pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #111111;
  font: 12px/1.65 var(--font-mono);
}

.noise-site-page {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  color: #111111;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 5px),
    #ffffff;
}

.noise-site-page section {
  padding: 10px 12px;
  border: 1px solid #c4c0ad;
  background: #ffffff;
}

.noise-site-page section strong {
  display: block;
  margin-bottom: 6px;
  color: #571818;
}

.noise-site-page p {
  margin: 0;
  line-height: 1.75;
}

.noise-log {
  font-family: var(--font-mono);
  font-size: 12px;
}

.window-noise-site.is-polluting .noise-site-page {
  animation: noisePageShift 0.48s steps(2, end) infinite;
}

.noise-stop-button,
.chat-trigger-link {
  justify-self: start;
  min-height: 28px;
  border: 1px solid #235fbd;
  border-radius: 3px;
  padding: 0 10px;
  color: #ffffff;
  background: linear-gradient(180deg, #67a8ff, #1e64d4 55%, #0c43a6);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.45);
  cursor: var(--xp-cursor-arrow);
}

.chat-trigger-link {
  grid-column: 2;
  margin: 0 10px 9px;
  font-size: 12px;
}

@keyframes noisePageShift {
  0% { transform: translateX(0); filter: contrast(1); }
  50% { transform: translateX(1px); filter: contrast(1.2); }
  100% { transform: translateX(-1px); filter: contrast(1.05); }
}

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

.path-card {
  min-height: 128px;
  padding: 11px;
  border: 1px solid #c4c0ad;
  color: var(--xp-text);
  background: #ffffff;
  font: inherit;
  text-align: left;
  box-shadow: inset 1px 1px #ffffff;
  cursor: var(--xp-cursor-arrow);
}

.path-card:hover,
.path-card:focus-visible {
  border-color: #235fbd;
  background: #eef5ff;
}

.hidden-page .path-card {
  border-color: #a8a2b8;
  background: #f8f6ff;
}

.path-card strong {
  display: block;
  margin-bottom: 4px;
  color: #15408d;
  word-break: break-word;
}

.path-card small {
  display: block;
  margin-bottom: 8px;
  color: #777777;
}

.path-card p {
  margin: 0;
  line-height: 1.7;
}

.drive-file-page {
  display: grid;
  grid-template-columns: minmax(190px, 260px) 1fr;
  gap: 12px;
  min-height: 330px;
  max-height: min(68vh, 610px);
  overflow: auto;
  background: #fffef7;
}

.drive-file-page.is-image-file {
  grid-template-columns: 1fr;
  background: #141414;
}

.drive-file-figure {
  margin: 0;
  padding: 8px;
  border: 1px solid #b8b6aa;
  background: #ffffff;
}

.drive-file-figure img {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #787878;
  background: #111111;
}

.drive-file-page.is-image-file .drive-file-figure {
  padding: 10px;
  background: #050505;
}

.drive-file-page.is-image-file .drive-file-figure img {
  height: min(55vh, 520px);
  aspect-ratio: auto;
  object-fit: contain;
  border-color: #2f2f2f;
}

.drive-file-page.is-image-file .drive-file-content {
  padding: 8px 10px;
  border: 1px solid #b8b6aa;
  background: #ffffff;
}

.drive-file-content h2 {
  margin: 0 0 8px;
  color: #174f9d;
  font-size: 1.02rem;
}

.drive-file-meta {
  margin: 0 0 10px;
  color: #666666;
  line-height: 1.65;
}

.drive-file-text {
  display: grid;
  gap: 7px;
}

.drive-file-text p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #c4c0ad;
  background: #ffffff;
  font-family: var(--font-mono);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.drive-file-text .drive-file-warning {
  border-color: #9f3947;
  color: #741424;
  background: #fff0f2;
  font-family: var(--font-ui);
}

.backup-page {
  position: relative;
  min-height: min(68vh, 620px);
  max-height: min(74vh, 680px);
  overflow: hidden;
  padding: 0;
  color: #ffffff;
  background:
    radial-gradient(circle at 64% 43%, rgba(255, 45, 30, 0.6), transparent 18rem),
    radial-gradient(circle at 21% 28%, rgba(255, 25, 12, 0.58), transparent 24rem),
    linear-gradient(135deg, #e11106 0 34%, #9e0904 56%, #210000 100%);
  font-family: var(--font-ui);
}

.backup-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(154deg, transparent 0 43%, rgba(255, 103, 79, 0.34) 44% 44.4%, transparent 45%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
}

.backup-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 45% 45%, transparent 0 38%, rgba(0, 0, 0, 0.38) 100%);
}

.backup-logo {
  position: absolute;
  left: 19%;
  top: 3.5%;
  z-index: 6;
  color: rgba(255, 255, 255, 0.88);
  font: 700 34px Arial, sans-serif;
  letter-spacing: 0;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.28);
}

.backup-logo span {
  margin-left: 2px;
}

.backup-icon-grid {
  position: relative;
  z-index: 3;
  width: 310px;
  min-height: 540px;
  display: grid;
  grid-template-columns: repeat(4, 68px);
  grid-auto-rows: 72px;
  align-content: start;
  gap: 4px 8px;
  padding: 8px 0 44px 8px;
}

.backup-desktop-icon,
.backup-floating-x {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  border: 1px solid transparent;
  padding: 2px 2px 3px;
  color: #ffffff;
  background: transparent;
  text-align: center;
  text-shadow: 1px 1px 2px #000000;
  font-size: 10px;
  line-height: 1.15;
}

.backup-desktop-icon:hover,
.backup-desktop-icon:focus-visible,
.backup-floating-x:hover,
.backup-floating-x:focus-visible,
.backup-desktop-icon.selected {
  border-color: rgba(255, 205, 205, 0.74);
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.backup-desktop-icon span,
.backup-floating-x span {
  position: relative;
  display: block;
  width: 42px;
  height: 42px;
}

.backup-desktop-icon em,
.backup-floating-x em {
  width: 66px;
  min-height: 22px;
  overflow: hidden;
  font-style: normal;
  overflow-wrap: anywhere;
}

.backup-desktop-icon.corrupt span::before,
.backup-desktop-icon.corrupt span::after,
.backup-floating-x span::before,
.backup-floating-x span::after {
  content: "";
  position: absolute;
  left: 17px;
  top: 1px;
  width: 8px;
  height: 42px;
  border-radius: 2px;
  background: #050000;
  box-shadow: 0 0 1px rgba(255, 0, 0, 0.5);
}

.backup-desktop-icon.corrupt span::before,
.backup-floating-x span::before {
  transform: rotate(43deg);
}

.backup-desktop-icon.corrupt span::after,
.backup-floating-x span::after {
  transform: rotate(-43deg);
}

.backup-desktop-icon.normal span {
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.45));
}

.backup-desktop-icon.recycle span {
  background:
    linear-gradient(180deg, #f0faff, #a6cce5);
  clip-path: polygon(18% 20%, 82% 20%, 75% 92%, 25% 92%);
  border: 1px solid #cce9ff;
}

.backup-desktop-icon.folder-copy span {
  border: 2px solid #b98216;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff6a8, #f0bd42 64%, #d8921e);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
}

.backup-desktop-icon.folder-copy span::before {
  content: "";
  position: absolute;
  left: 4px;
  top: -7px;
  width: 18px;
  height: 8px;
  border: 2px solid #b98216;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: #fff1a0;
}

.backup-desktop-icon.computer-copy span::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 32px;
  height: 23px;
  border: 2px solid #96c4e0;
  border-radius: 2px;
  background: linear-gradient(180deg, #e9ffff 0 62%, #71a8c9 63% 100%);
}

.backup-desktop-icon.computer-copy span::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 33px;
  width: 18px;
  height: 6px;
  background: #79a5bc;
}

.backup-floating-x {
  position: absolute;
  z-index: 4;
  width: 70px;
}

.backup-floating-x.center {
  left: 52%;
  top: 33%;
}

.backup-floating-x.low {
  left: 34%;
  top: 66%;
}

.backup-floating-x.far {
  right: 2%;
  top: 82%;
}

.backup-window-mark {
  position: absolute;
  right: 18%;
  bottom: 17%;
  z-index: 2;
  width: 240px;
  aspect-ratio: 1.25;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  perspective: 520px;
  transform: skewY(-8deg);
}

.backup-window-mark i {
  display: block;
  border: 2px solid rgba(255, 142, 126, 0.74);
  background: linear-gradient(140deg, rgba(255, 44, 22, 0.26), rgba(255, 70, 46, 0.08));
  box-shadow: 0 0 12px rgba(255, 59, 41, 0.55);
}

.backup-window-mark i:nth-child(4)::after {
  content: "X";
  display: grid;
  place-items: center;
  height: 100%;
  color: #050000;
  font: 900 44px Arial, sans-serif;
  text-shadow: none;
}

.backup-clue-panel {
  position: absolute;
  right: 3.5%;
  top: 8%;
  z-index: 7;
  width: min(260px, 28vw);
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255, 194, 194, 0.52);
  color: #ffe2e2;
  background: rgba(38, 0, 0, 0.72);
  box-shadow: 0 0 18px rgba(255, 0, 0, 0.24), inset 1px 1px rgba(255, 255, 255, 0.12);
  font-size: 11px;
}

.backup-clue-panel strong {
  color: #ffffff;
  letter-spacing: 0;
}

.backup-clue-panel button {
  min-height: 25px;
  border: 1px solid rgba(255, 188, 188, 0.42);
  color: #ffe8e8;
  background: rgba(255, 255, 255, 0.08);
  text-align: left;
}

.backup-clue-panel button:hover,
.backup-clue-panel button:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.18);
}

.backup-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-top: 1px solid rgba(255, 120, 108, 0.46);
  color: #ffe3e3;
  background: linear-gradient(180deg, rgba(90, 0, 0, 0.86), rgba(34, 0, 0, 0.96));
  font-size: 12px;
}

.backup-start-dot {
  width: 12px;
  height: 12px;
  background: #ffffff;
  box-shadow: 14px 0 #ff2222, 0 14px #d40707, 14px 14px #5c0000;
  transform: scale(0.58);
  transform-origin: left top;
}

.backup-task-title {
  flex: 1;
}

.network-facts {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid #c4c0ad;
  background: #ffffff;
}

.network-facts dt,
.network-facts dd {
  margin: 0;
  padding: 9px 10px;
  border-bottom: 1px solid #e5e0c9;
}

.network-facts dt {
  color: #174f9d;
  background: #f3f0df;
  font-weight: 700;
}

.network-facts dd {
  color: #1b1b1b;
}

.network-facts dt:last-of-type,
.network-facts dd:last-of-type {
  border-bottom: 0;
}

.word-toolbar,
.ie-toolbar,
.excel-toolbar {
  min-height: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-bottom: 1px solid #aca899;
  background: linear-gradient(180deg, #fffef6, #d8d2bd);
  font-size: 12px;
}

.ie-toolbar button {
  min-height: 22px;
  border: 1px solid #aca899;
  background: linear-gradient(180deg, #ffffff, #e7e3d1);
  cursor: var(--xp-cursor-hand);
}

.ie-toolbar button:hover,
.ie-toolbar button:focus-visible,
.ie-toolbar button.is-clicked {
  border-color: #7f9db9;
  background: linear-gradient(180deg, #ffffff, #dfeeff);
}

.ie-toolbar input {
  min-width: 0;
  flex: 1;
  height: 22px;
  border: 1px solid #7f9db9;
  background: #ffffff;
}

.ie-page {
  min-height: 250px;
  background: #ffffff;
}

.window.is-refreshing .window-body {
  animation: toolbarRefresh 0.38s ease;
}

@keyframes toolbarRefresh {
  0% { filter: brightness(1); }
  45% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}

.web-site-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  margin: 0 0 9px;
  color: #24508d;
  font-size: 13px;
  line-height: 1;
}

.web-site-mark strong {
  display: inline;
  color: inherit;
  font-size: 13px;
  letter-spacing: 0;
}

.site-logo {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 1px solid rgba(120, 160, 210, 0.7);
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.94), transparent 42%),
    linear-gradient(145deg, #92ecff, #2e70c9 62%, #17469d);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.86),
    inset 0 -4px 8px rgba(0, 65, 122, 0.18),
    0 1px 2px rgba(0, 24, 70, 0.18);
}

.site-logo-baidu {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(145deg, #dcf8ff, #3f9dff 62%, #2259c8);
}

.site-logo-xhs {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(145deg, #ff8c98, #e71226 60%, #98101c);
}

.site-logo-wechat {
  position: relative;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(145deg, #a0ffd0, #16c35e 62%, #087b35);
}

.site-logo-baidu::before,
.site-logo-xhs::before,
.site-logo-wechat::before {
  color: #ffffff;
  font: 700 13px "Microsoft YaHei", SimSun, sans-serif;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38);
}

.site-logo-baidu::before {
  content: "搜";
}

.site-logo-xhs::before {
  content: "记";
}

.site-logo-wechat::before {
  content: "信";
}

.site-logo-chat {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%),
    radial-gradient(circle at 32% 34%, #ffffff 0 3px, transparent 4px),
    radial-gradient(circle at 56% 34%, #ffffff 0 3px, transparent 4px),
    linear-gradient(180deg, #62aaff, #1455b8);
}

.site-logo-blog {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(145deg, #fff4a7, #ffc833 64%, #d18b0f);
}

.site-logo-ie {
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 42%),
    linear-gradient(145deg, #8af3ff, #2c9fec 62%, #114a9f);
}

.baidu-page {
  min-height: 405px;
  max-height: min(68vh, 620px);
  overflow: auto;
  background: #ffffff;
}

.baidu-logo {
  margin: 6px 0 10px;
  color: #234bc4;
  font: 700 38px Arial, sans-serif;
}

.baidu-logo span {
  color: #e32121;
}

.search-line {
  display: flex;
  gap: 7px;
  margin-bottom: 8px;
}

.search-line input {
  width: min(420px, 70%);
  height: 30px;
  border: 1px solid #7f9db9;
  padding: 0 6px;
}

.search-line button {
  width: 92px;
  border: 1px solid #777777;
  background: linear-gradient(180deg, #ffffff, #dcdcdc);
}

.baidu-recent-searches {
  max-width: 650px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: -2px 0 10px;
  color: #666666;
  font-size: 12px;
  line-height: 1.6;
}

.baidu-recent-searches span {
  color: #555555;
}

.baidu-recent-searches button {
  border: 0;
  padding: 0;
  color: #0000cc;
  background: transparent;
  font: inherit;
  text-decoration: underline;
  cursor: var(--xp-cursor-hand);
}

.baidu-recent-searches button:hover,
.baidu-recent-searches button:focus-visible {
  color: #551a8b;
}

.baidu-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.baidu-tools button {
  min-height: 24px;
  border: 1px solid #9bb4df;
  color: #1d3b88;
  background: #eef5ff;
}

.baidu-status {
  margin: 0 0 12px;
  color: #666666;
  font-size: 12px;
}

.baidu-results {
  display: grid;
  gap: 14px;
}

.result {
  max-width: 620px;
}

.result h2 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.result-title-button {
  border: 0;
  padding: 0;
  color: #0000cc;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: var(--xp-cursor-hand);
}

.result-title-button:hover,
.result-title-button:focus-visible {
  color: #551a8b;
}

.result p {
  margin: 0 0 6px;
  color: #333333;
  line-height: 1.55;
}

.result-url {
  margin: 0 0 4px;
  color: #008000;
  font-size: 12px;
}

.cache-page {
  min-height: 360px;
  max-height: min(68vh, 590px);
  overflow: auto;
  background: #ffffff;
}

.cache-page header {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #b9c8df;
}

.cache-page header p {
  margin: 0 0 7px;
  color: #667085;
  font-size: 12px;
}

.cache-page h2 {
  margin: 0;
  color: #0000cc;
  font-size: 1.18rem;
  text-decoration: underline;
}

.cache-lead {
  margin: 0 0 14px;
  color: #333333;
  line-height: 1.75;
}

.cache-body {
  display: grid;
  gap: 10px;
}

.cache-body p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #d2d8e5;
  background: #f7f9ff;
  color: #2b2b2b;
  line-height: 1.75;
}

.cache-body .cache-warning {
  border-color: #9f3947;
  color: #6f1120;
  background: #fff0f2;
}

.window-spring-site {
  left: 24%;
  top: 10%;
  width: min(760px, calc(100vw - 32px));
}

.window-chapel-site {
  left: 22%;
  top: 11%;
  width: min(760px, calc(100vw - 32px));
}

.window-sacrifice-site {
  left: 20%;
  top: 8%;
  width: min(820px, calc(100vw - 32px));
}

.spring-site {
  min-height: 430px;
  max-height: min(68vh, 620px);
  overflow: auto;
  color: #1b1b1b;
  background: #ffffff;
  font-family: var(--font-mono);
}

.chapel-site {
  min-height: 430px;
  max-height: min(68vh, 620px);
  overflow: auto;
  color: #141414;
  background: #ffffff;
}

.chapel-site header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #d6d6d6;
}

.chapel-site header p {
  margin: 0 0 8px;
  color: #667085;
  font-size: 12px;
}

.chapel-site h2 {
  margin: 0;
  color: #1b376d;
  font-size: 1.45rem;
}

.chapel-warning,
.chapel-entry {
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid #cdd6e3;
  background: #ffffff;
  line-height: 1.75;
}

.chapel-warning {
  color: #5a4300;
  background: #fff8c7;
}

.chapel-entry strong {
  display: block;
  margin-bottom: 4px;
  color: #174f9d;
}

.chapel-entry p {
  margin: 0;
}

.chapel-entry.is-glitched {
  border-color: #9f3947;
  color: #5d0f1c;
  background: #fff4f6;
}

.chapel-site footer {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed #b9c8df;
  color: #667085;
  line-height: 1.65;
}

.sacrifice-site {
  min-height: 480px;
  max-height: min(72vh, 660px);
  overflow: auto;
  color: #171717;
  background:
    linear-gradient(90deg, rgba(120, 0, 0, 0.08) 0 1px, transparent 1px 99%),
    repeating-linear-gradient(0deg, rgba(142, 0, 0, 0.05) 0 1px, transparent 1px 28px),
    #ffffff;
  font-family: SimSun, "Microsoft YaHei", serif;
}

.sacrifice-site header {
  margin-bottom: 14px;
  padding: 10px 12px 12px;
  border: 1px solid #d8d8d8;
  background: #ffffff;
}

.sacrifice-site header p {
  margin: 0 0 8px;
  color: #6b6b6b;
  font-size: 12px;
}

.sacrifice-site h2 {
  margin: 0;
  color: #7b0014;
  font-size: 1.45rem;
  font-weight: 700;
}

.sacrifice-warning,
.sacrifice-entry {
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  line-height: 1.8;
}

.sacrifice-warning {
  color: #7b0014;
  border-color: #a9303d;
  background: #fff2f3;
  font-weight: 700;
}

.sacrifice-entry strong {
  display: block;
  margin-bottom: 5px;
  color: #213a62;
}

.sacrifice-entry p {
  margin: 0;
}

.sacrifice-entry.is-redacted {
  color: #5b0712;
  border-color: #7c0715;
  background:
    linear-gradient(90deg, rgba(123, 0, 20, 0.92) 0 18%, transparent 18% 24%, rgba(123, 0, 20, 0.92) 24% 42%, transparent 42% 52%, rgba(123, 0, 20, 0.92) 52% 76%, transparent 76%),
    #fff8f8;
}

.sacrifice-entry.is-redacted strong,
.sacrifice-entry.is-redacted p {
  padding: 3px 5px;
  background: rgba(255, 255, 255, 0.88);
}

.sacrifice-site footer {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed #8d0d1b;
  color: #6b121d;
  background: #ffffff;
  line-height: 1.65;
}

.spring-site header {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #c8d8ef;
}

.spring-site .web-site-mark {
  color: #174f9d;
}

.spring-site header p {
  margin: 0 0 8px;
  color: #667085;
  font-size: 12px;
}

.spring-site h2 {
  margin: 0;
  color: #174f9d;
  font-size: 1.6rem;
  text-shadow: none;
}

.spring-warning {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #caa0a8;
  color: #6f1120;
  background: #fff4f6;
  line-height: 1.7;
}

.spring-entry {
  margin: 12px 0;
  padding: 10px;
  border: 1px solid #d2d8e5;
  background: #ffffff;
}

.spring-entry span {
  color: #6f7d93;
  font-size: 11px;
  text-transform: uppercase;
}

.spring-entry strong {
  display: block;
  margin: 4px 0;
  color: #174f9d;
}

.spring-entry p {
  margin: 0;
  color: #333333;
  line-height: 1.75;
}

.spring-site footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #b9c8df;
  color: #667085;
  line-height: 1.65;
}

.xhs-page {
  min-height: 430px;
  max-height: min(68vh, 620px);
  overflow: auto;
  background: #ffffff;
}

.xhs-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr);
  gap: 14px;
  align-items: center;
  margin: -14px -14px 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #d8d8d8;
  background: linear-gradient(180deg, #ffffff, #f2f6ff);
}

.xhs-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #174f9d;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0;
}

.xhs-brand .site-logo {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.xhs-search {
  display: grid;
  grid-template-columns: auto minmax(130px, 1fr) 70px;
  gap: 7px;
  align-items: center;
}

.xhs-search label {
  color: #4f5c6f;
  font-size: 12px;
}

.xhs-search input {
  height: 30px;
  min-width: 0;
  border: 1px solid #9bb4df;
  border-radius: 4px;
  padding: 0 9px;
  background: #ffffff;
  box-shadow: inset 1px 1px 2px rgba(0, 36, 90, 0.1);
}

.xhs-search button,
.xhs-tabs button {
  min-height: 28px;
  border: 1px solid #235fbd;
  border-radius: 4px;
  color: #ffffff;
  background: linear-gradient(180deg, #67a8ff, #1e64d4 55%, #0c43a6);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.45);
}

.xhs-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 9px;
}

.xhs-tabs button {
  min-height: 25px;
  padding: 0 10px;
  border-color: #9bb4df;
  color: #174f9d;
  background: linear-gradient(180deg, #ffffff, #e7f0ff);
}

.xhs-status {
  margin: 0 0 10px;
  color: #667085;
  font-size: 12px;
}

.xhs-results {
  display: grid;
  gap: 12px;
}

.image-avatar {
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  color: transparent !important;
  overflow: hidden;
}

.xhs-card {
  width: 100%;
  border: 1px solid #d2d8e5;
  border-radius: 6px;
  padding: 14px;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(20, 62, 120, 0.08);
}

.xhs-profile {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
}

.xhs-avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #ffffff;
  background: linear-gradient(180deg, #78b3ff, #174f9d);
  font-weight: 700;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.42);
}

.xhs-card h2 {
  margin: 0 0 4px;
  color: #222222;
  font-size: 1.12rem;
}

.xhs-handle,
.xhs-bio {
  margin: 0;
  color: #777777;
  font-size: 12px;
}

.xhs-bio {
  margin-bottom: 10px;
}

.xhs-card p {
  line-height: 1.75;
}

.xhs-tags {
  margin-bottom: 0;
  color: #174f9d;
}

.xhs-empty {
  border: 1px dashed #9bb4df;
  border-radius: 6px;
  padding: 22px;
  color: #667085;
  background: #ffffff;
  text-align: center;
}

.chat-site-page {
  min-height: 460px;
  max-height: min(70vh, 650px);
  overflow: auto;
  background: #ffffff;
}

.chat-site-head {
  display: grid;
  gap: 6px;
  margin: -14px -14px 12px;
  padding: 11px 14px;
  border-bottom: 1px solid #9eb6da;
  background: linear-gradient(180deg, #ffffff, #d8e8ff);
}

.chat-site-head strong {
  display: block;
  color: #174f9d;
  font-size: 20px;
}

.chat-site-head .web-site-mark {
  margin-bottom: 4px;
  color: #174f9d;
}

.chat-site-head .web-site-mark strong {
  display: inline;
  font-size: 13px;
}

.chat-site-head span,
.chat-site-head p {
  margin: 0;
  color: #546a8d;
  font-size: 12px;
  line-height: 1.6;
}

.chat-site-layout {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
}

.chat-blogger-list {
  display: grid;
  align-content: start;
  gap: 4px;
  max-height: min(56vh, 440px);
  overflow: auto;
  padding-right: 3px;
}

.chat-blogger-list button {
  min-height: 32px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  border: 1px solid #9eb6da;
  border-radius: 2px;
  color: #113a78;
  background: linear-gradient(180deg, #ffffff, #e7f0ff);
  text-align: left;
  padding: 3px 7px;
}

.chat-blogger-avatar {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(31, 77, 140, 0.45);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
}

.chat-blogger-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-blogger-list button:hover,
.chat-blogger-list button.active {
  color: #ffffff;
  border-color: #235fbd;
  background: linear-gradient(180deg, #67a8ff, #1e64d4 55%, #0c43a6);
}

.chat-board {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.chat-board-profile {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid #b7c8e5;
  padding: 10px;
  background: #ffffff;
}

.chat-board-profile > span {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid #7fa0d0;
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #78b3ff, #174f9d);
  font-weight: 700;
  font-size: 22px;
}

.chat-board-profile h2 {
  margin: 0 0 4px;
  color: #174f9d;
  font-size: 1.12rem;
}

.chat-board-profile p {
  margin: 0;
  color: #555555;
  line-height: 1.65;
  font-size: 12px;
}

.chat-site-posts,
.chat-site-replies {
  display: grid;
  gap: 8px;
}

.chat-site-post,
.chat-site-reply {
  border: 1px solid #c8c1a6;
  background: #ffffff;
  box-shadow: inset 1px 1px #ffffff;
  cursor: var(--xp-cursor-arrow);
}

.chat-site-post:hover,
.chat-site-post:focus-visible,
.chat-site-reply:hover,
.chat-site-reply:focus-visible,
.chat-site-fragments:hover,
.chat-site-fragments:focus-visible {
  outline: 1px dotted #1d57ac;
  outline-offset: -3px;
  background: #f7fbff;
}

.chat-site-post h3 {
  margin: 0;
  padding: 6px 9px;
  color: #ffffff;
  background: linear-gradient(180deg, #6d93d8, #2d5fae);
  font-size: 12px;
}

.chat-site-post p,
.chat-site-reply p {
  margin: 0;
  padding: 9px 10px;
  line-height: 1.75;
}

.chat-reply-title {
  margin-top: 2px;
  padding: 6px 9px;
  border: 1px solid #c8c1a6;
  color: #6b4f00;
  background: #fff7c8;
  font-weight: 700;
  font-size: 12px;
}

.chat-site-reply {
  display: grid;
  grid-template-columns: 34px 92px minmax(0, 1fr);
  align-items: stretch;
}

.chat-site-reply-avatar {
  width: 26px;
  height: 26px;
  align-self: center;
  justify-self: center;
  border: 1px solid #9eb6da;
  border-radius: 3px;
  background: #ffffff;
}

.chat-site-reply strong {
  padding: 9px;
  border-right: 1px solid #c8c1a6;
  color: #174f9d;
  background: #eef5ff;
  font-size: 12px;
}

.chat-site-reply.is-user-reply strong,
.chat-site-reply.is-system-reply strong {
  color: #5f4f18;
  background: #fff8c7;
}

.chat-site-reply-form,
.wechat-reply-form {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 68px;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding: 8px;
  border: 1px solid #b8c7de;
  background: linear-gradient(180deg, #ffffff, #f2f6ff);
  box-shadow: inset 1px 1px #ffffff;
}

.chat-site-reply-form label,
.wechat-reply-form label {
  color: #174f9d;
  font-weight: 700;
  font-size: 12px;
}

.chat-site-reply-form input,
.wechat-reply-form input {
  min-width: 0;
  height: 28px;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  padding: 0 8px;
  background: #ffffff;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.18);
}

.chat-site-reply-form button,
.wechat-reply-form button {
  min-height: 28px;
  border: 1px solid #235fbd;
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #67a8ff, #1e64d4 55%, #0c43a6);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.45);
}

.chat-site-fragments {
  display: grid;
  gap: 6px;
  border: 1px dashed #9f8a44;
  background: #fff9d8;
  padding: 9px 10px;
  color: #4a3c11;
  font-size: 12px;
  cursor: var(--xp-cursor-arrow);
}

.chat-site-fragments > strong {
  color: #6b4f00;
}

.chat-site-fragments p {
  position: relative;
  margin: 0;
  padding-left: 14px;
  line-height: 1.7;
}

.chat-site-fragments p::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  background: #d29800;
}

.chat-site-fragments.is-haunted {
  border-color: #7a1e1e;
  color: #4a1010;
  background: #fff0e8;
}

.chat-site-fragments.is-haunted p::before {
  background: #a90000;
}

.wechat-page {
  min-height: 430px;
  max-height: min(68vh, 620px);
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  background: #ffffff;
}

.wechat-list {
  display: grid;
  align-content: start;
  gap: 1px;
  max-height: min(68vh, 620px);
  overflow: auto;
  padding: 10px 7px;
  border-right: 1px solid #d0d9e8;
  background: linear-gradient(180deg, #ffffff, #f2f6ff);
}

.wechat-app-mark {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 6px 4px 8px;
  border-bottom: 1px solid #d0d9e8;
  color: #174f9d;
}

.wechat-app-mark strong {
  font-size: 14px;
}

.wechat-contact {
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4px 8px;
  color: #1b1b1b;
  background: transparent;
  text-align: left;
}

.wechat-contact-avatar {
  width: 28px;
  height: 28px;
  border: 1px solid #9eb6da;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
}

.wechat-contact-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wechat-contact.active,
.wechat-contact:hover {
  border-color: #9bb4df;
  background: linear-gradient(180deg, #ffffff, #e7f0ff);
}

.wechat-chat {
  min-width: 0;
  overflow: auto;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 250, 255, 0.95)),
    #ffffff;
}

.wechat-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: -14px -14px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid #d0d9e8;
  background: linear-gradient(180deg, #ffffff, #f2f6ff);
}

.wechat-header strong {
  color: #174f9d;
}

.wechat-header span {
  color: #667085;
  font-size: 12px;
}

.wechat-locked,
.wechat-unlocked {
  display: grid;
  gap: 10px;
}

.wechat-locked h2 {
  color: #174f9d;
  font-size: 1.08rem;
}

.wechat-locked p,
.wechat-status {
  margin: 0;
  color: #4f5c6f;
  line-height: 1.65;
}

.wechat-status.is-hint-lit {
  padding: 6px 8px;
  border: 1px solid #d6af17;
  background: #fff8c7;
  color: #5a4300;
  box-shadow: inset 1px 1px #ffffff;
  animation: hintFlash 0.85s ease-in-out 2;
}

.cipher-box {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #d0d9e8;
  border-radius: 4px;
  background: #ffffff;
}

.cipher-box.is-lit {
  border-color: #d6af17;
  background: #fff8c7;
  box-shadow: 0 0 0 2px rgba(255, 221, 87, 0.4), inset 1px 1px #ffffff;
  animation: hintFlash 0.85s ease-in-out 2;
}

.cipher-box span {
  color: #174f9d;
  font-weight: 700;
  font-size: 12px;
}

.cipher-box code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #111111;
  font-family: var(--font-mono);
}

.wechat-unlock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 72px;
  gap: 8px;
  align-items: center;
}

.wechat-unlock label {
  color: #174f9d;
  font-weight: 700;
}

.wechat-unlock input {
  min-width: 0;
  height: 30px;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  padding: 0 8px;
  background: #ffffff;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.18);
}

.wechat-unlock button {
  min-height: 30px;
  border: 1px solid #235fbd;
  border-radius: 3px;
  color: #ffffff;
  background: linear-gradient(180deg, #67a8ff, #1e64d4 55%, #0c43a6);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.45);
}

.wechat-status {
  color: #5f4f18;
}

.chat-line {
  max-width: 78%;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 7px;
  align-items: end;
  cursor: var(--xp-cursor-arrow);
}

.chat-line-avatar {
  width: 30px;
  height: 30px;
  border: 1px solid #9eb6da;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
}

.chat-line-body {
  min-width: 0;
}

.chat-line:hover p,
.chat-line:focus-visible p {
  outline: 1px dotted #1d57ac;
  outline-offset: -3px;
}

.chat-line strong {
  color: #174f9d;
  font-size: 12px;
}

.chat-line p {
  margin: 4px 0 0;
  padding: 9px 11px;
  border: 1px solid #d0d9e8;
  border-radius: 6px;
  background: #ffffff;
  line-height: 1.7;
}

.chat-line.right {
  margin-left: auto;
  text-align: right;
  grid-template-columns: minmax(0, 1fr) 30px;
}

.chat-line.right .chat-line-avatar {
  grid-column: 2;
}

.chat-line.right .chat-line-body {
  grid-column: 1;
  grid-row: 1;
}

.chat-line.right p {
  background: #eef5ff;
}

.chat-line.is-user-reply p {
  background: #fff8c7;
  border-color: #d6af17;
}

.chat-line.is-system-reply p {
  background: #f8fbff;
}

.blog-page {
  min-height: 430px;
  max-height: min(68vh, 620px);
  overflow: auto;
  background: #ffffff;
  padding-left: 18px;
}

.blog-page header {
  margin-bottom: 18px;
  border-bottom: 1px dashed #9bb3de;
}

.blog-page header p {
  color: #666666;
}

.blog-page h3 {
  margin: 18px 0 8px;
  color: #174f9d;
  font-size: 0.98rem;
}

.blog-page > p {
  line-height: 1.9;
}

.old-poem,
.antique-entry {
  border: 1px solid #c9b889;
  color: #3d2a13;
  background:
    linear-gradient(90deg, rgba(143, 93, 35, 0.08) 0 1px, transparent 1px 100%),
    linear-gradient(180deg, #fff7d8, #f4e2ac);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.7);
}

.old-poem {
  margin: 13px 0;
  padding: 10px 13px;
  font-family: "SimSun", "Songti SC", serif;
  line-height: 2;
}

.blog-comment {
  margin: 10px 0;
  padding: 9px 11px;
  border-left: 3px solid #6fa7ef;
  background: #eef5ff;
  line-height: 1.75;
}

.music-player {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 12px;
  min-height: 150px;
  background: #ffffff;
}

.music-disc {
  width: 64px;
  height: 64px;
  align-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #1b1b1b 0 8px, #fff5bd 9px 13px, transparent 14px),
    conic-gradient(#d78925, #ffe5a2, #a75b19, #fff0bc, #d78925);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.28);
}

.music-meta {
  display: grid;
  align-content: center;
  gap: 8px;
}

.music-meta span {
  color: #4f5c6f;
}

.music-secret {
  margin: 0;
  border: 1px dashed #8daed4;
  border-radius: 3px;
  padding: 6px 8px;
  color: #35506e;
  background: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.55;
}

.music-player.is-playing .music-secret {
  color: #174f9d;
  background: #ffffff;
}

.music-bars {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 24px;
}

.music-bars i {
  width: 8px;
  background: #168bd7;
}

.music-bars i:nth-child(1) { height: 10px; }
.music-bars i:nth-child(2) { height: 18px; }
.music-bars i:nth-child(3) { height: 14px; }
.music-bars i:nth-child(4) { height: 22px; }
.music-bars i:nth-child(5) { height: 12px; }

.music-progress {
  width: min(360px, 100%);
  height: 11px;
  overflow: hidden;
  border: 1px solid #7f9db9;
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(221, 235, 251, 0.72)),
    repeating-linear-gradient(90deg, rgba(22, 139, 215, 0.14) 0 1px, transparent 1px 7px);
  box-shadow: inset 1px 1px #ffffff;
}

.music-progress span {
  display: block;
  width: 0%;
  height: 100%;
  background: linear-gradient(180deg, #65b9ff, #1366ce);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.66);
}

.music-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  grid-column: 1 / -1;
  padding: 8px;
  border: 1px solid #9f9f9f;
  background: linear-gradient(180deg, #ffffff, #e7e3d1);
}

.music-controls button {
  min-height: 26px;
  border: 1px solid #777777;
  border-radius: 2px;
  color: #10234a;
  background: linear-gradient(180deg, #ffffff, #dcd6c3);
  box-shadow: inset 1px 1px #ffffff;
}

.music-controls span {
  color: #4f5c6f;
  font-size: 12px;
}

.music-player.is-playing .music-disc {
  animation: discSpin 2.6s linear infinite;
}

.music-player.is-playing .music-bars i {
  animation: musicBars 0.9s ease-in-out infinite alternate;
}

.music-player.is-playing .music-bars i:nth-child(2) { animation-delay: 0.12s; }
.music-player.is-playing .music-bars i:nth-child(3) { animation-delay: 0.24s; }
.music-player.is-playing .music-bars i:nth-child(4) { animation-delay: 0.36s; }
.music-player.is-playing .music-bars i:nth-child(5) { animation-delay: 0.48s; }

@keyframes discSpin {
  to { transform: rotate(360deg); }
}

@keyframes musicBars {
  from { transform: scaleY(0.55); }
  to { transform: scaleY(1.15); }
}

.video-player {
  display: grid;
  gap: 8px;
  background: #ffffff;
}

.video-screen {
  min-height: 310px;
  padding: 10px;
  border: 1px solid #5f5f5f;
  background: #050505;
}

.video-screen video {
  width: 100%;
  height: min(54vh, 460px);
  min-height: 290px;
  display: block;
  object-fit: contain;
  background: #000000;
}

.video-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid #888888;
  background: linear-gradient(180deg, #ffffff, #dfdfdf);
}

.video-controls button {
  min-height: 26px;
  border: 1px solid #777777;
  background: linear-gradient(180deg, #ffffff, #dcdcdc);
}

.video-controls span {
  margin-left: auto;
  color: #333333;
  font-size: 12px;
}

.acdsee-view {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  min-height: 350px;
}

.acdsee-view aside {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid #b8b6aa;
  background: #fffef7;
}

.acdsee-view aside button {
  min-height: 28px;
  border: 1px solid #b8b6aa;
  color: var(--xp-text);
  background: linear-gradient(180deg, #ffffff, #e7e3d1);
  font: inherit;
  text-align: left;
}

.acdsee-view aside button:hover,
.acdsee-view aside button:focus-visible {
  border-color: #235fbd;
  background: #eef5ff;
}

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 10px;
}

.thumb {
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px solid #9f9f9f;
  color: #ffffff;
  font-weight: 700;
  font: inherit;
  cursor: var(--xp-cursor-arrow);
  background:
    radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.72), transparent 2.2rem),
    linear-gradient(160deg, #5eb0e3, #5bb84b 56%, #287d2e);
  text-shadow: 0 1px 2px #000000;
}

.thumb span {
  font-size: 1.2rem;
  font-weight: 700;
}

.thumb small {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  text-shadow: 0 1px 2px #000000;
}

.thumb:hover,
.thumb:focus-visible {
  outline: 2px solid #2b68cc;
  outline-offset: -2px;
}

.thumb.locked {
  background:
    linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)),
    linear-gradient(160deg, #5eb0e3, #5bb84b 56%, #287d2e);
}

.thumb.west {
  background:
    radial-gradient(circle at 78% 20%, rgba(255, 255, 255, 0.92), transparent 2.4rem),
    linear-gradient(165deg, #69b7ff 0 48%, #77b94b 49% 100%);
}

.thumb.person {
  background:
    linear-gradient(rgba(36, 42, 82, 0.18), rgba(36, 42, 82, 0.18)),
    linear-gradient(160deg, #7bb8e8, #6aa85a 58%, #f4d88a 59% 100%);
}

.photo-detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-height: 340px;
  max-height: min(68vh, 650px);
  overflow: auto;
  background: #141414;
}

.photo-visual {
  min-height: 250px;
  display: grid;
  place-items: center;
  border: 1px solid #787878;
  color: #ffffff;
  font-weight: 700;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.92), transparent 2.5rem),
    linear-gradient(164deg, #70b9ff 0 48%, #76b64a 49% 100%);
  text-shadow: 0 1px 3px #000000;
}

.photo-visual.locked {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 2px, transparent 2px 5px),
    linear-gradient(164deg, #26384f, #47753d 55%, #202020);
}

.photo-visual.date {
  background:
    linear-gradient(rgba(20, 54, 125, 0.25), rgba(20, 54, 125, 0.25)),
    linear-gradient(164deg, #8fd0ff 0 50%, #5caf48 51% 100%);
}

.photo-visual.west {
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.98), transparent 2.9rem),
    linear-gradient(164deg, #6fbdff 0 52%, #82bc50 53% 100%);
}

.photo-visual.person {
  background:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04)),
    linear-gradient(164deg, #73b8ec 0 48%, #6fb95c 49% 72%, #efd184 73% 100%);
}

.photo-visual.real {
  background: #050505;
}

.photo-info h2 {
  margin: 0 0 8px;
  color: #174f9d;
  font-size: 1rem;
}

.photo-info > p {
  margin: 0 0 10px;
  color: #666666;
  line-height: 1.65;
}

.photo-notes {
  display: grid;
  gap: 8px;
}

.photo-notes p {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid #c4c0ad;
  background: #ffffff;
  line-height: 1.7;
}

.photo-file-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.photo-file {
  min-height: 190px;
  display: grid;
  grid-template-rows: minmax(120px, 1fr) auto auto;
  gap: 6px;
  padding: 9px;
  border: 1px solid #c4c0ad;
  color: var(--xp-text);
  background: #ffffff;
  font: inherit;
  text-align: left;
  cursor: var(--xp-cursor-arrow);
}

.photo-file:hover,
.photo-file:focus-visible {
  border-color: #235fbd;
  background: #eef5ff;
}

.photo-file img {
  width: 100%;
  height: 142px;
  display: block;
  object-fit: cover;
  border: 1px solid #8e8e8e;
  background: #111111;
}

.photo-file strong {
  color: #15408d;
  word-break: break-word;
}

.photo-file small {
  color: #777777;
}

.thumb {
  grid-template-rows: 1fr auto;
  gap: 5px;
  padding: 7px;
  color: var(--xp-text);
  background: #ffffff;
  text-shadow: none;
}

.thumb img {
  width: 100%;
  height: 98px;
  display: block;
  object-fit: cover;
  border: 1px solid #777777;
  background: #111111;
}

.thumb small {
  width: 100%;
  color: #1b1b1b;
  font-size: 12px;
  text-align: center;
  text-shadow: none;
}

.photo-visual {
  margin: 0;
  padding: 10px;
  background: #050505;
  overflow: hidden;
}

.photo-visual img {
  width: 100%;
  height: min(55vh, 520px);
  min-height: 0;
  display: block;
  object-fit: contain;
  background: #050505;
  transition: transform 0.22s ease;
}

.photo-visual.is-zoomed {
  cursor: var(--xp-cursor-hand);
}

.photo-info {
  padding: 8px 10px;
  border: 1px solid #b8b6aa;
  background: #ffffff;
}

.excel-sheet {
  overflow: auto;
  background: #ffffff;
}

.excel-sheet table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.excel-sheet th,
.excel-sheet td {
  min-width: 92px;
  padding: 7px 8px;
  border: 1px solid #b8c9b8;
  text-align: left;
}

.excel-sheet th {
  color: #23412b;
  background: #d8ead9;
}

.terminal-body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 390px;
  padding: 0;
  background: #000000;
}

.terminal-output {
  height: 336px;
  overflow: auto;
  padding: 12px 14px;
  color: #f2f2f2;
  background: #000000;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  white-space: pre-wrap;
}

.terminal-form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  border-top: 1px solid #303030;
  color: #f2f2f2;
  background: #000000;
  font-family: var(--font-mono);
}

.terminal-form input {
  width: 100%;
  min-height: 28px;
  padding: 0 4px;
  border: 1px solid #555555;
  color: #f2f2f2;
  background: #000000;
  outline: none;
}

.decrypt-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-height: min(74vh, 600px);
  overflow: auto;
}

.http-header-form {
  font-family: var(--font-mono);
  background:
    linear-gradient(180deg, #ffffff, #f4f8ff);
}

.http-request-line {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  padding: 8px 10px;
  border: 1px solid #aac4e5;
  background: #eef6ff;
  color: #123d75;
  font-weight: 700;
}

.decrypt-form label {
  display: grid;
  gap: 5px;
  color: #174f9d;
  font-weight: 700;
}

.decrypt-form input {
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--xp-line);
  border-radius: 2px;
  color: #111111;
  background: #ffffff;
  outline: none;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.18);
}

.decrypt-button {
  width: 100%;
  margin-top: 4px;
  grid-column: 1 / -1;
}

.decrypt-message {
  grid-column: 1 / -1;
  min-height: 24px;
  margin: 0;
  color: var(--xp-muted);
  line-height: 1.55;
}

.truth-progress {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 8px;
  border: 1px solid #b7cce7;
  background: #ffffff;
  list-style: none;
  color: #4a5668;
  font: 12px var(--font-ui);
}

.truth-progress li {
  padding: 5px 7px;
  border: 1px solid #d4dfef;
  background: #f8fbff;
}

.truth-progress li.is-clear {
  border-color: #91c886;
  color: #235f24;
  background: #f0fff0;
}

.decrypt-message.is-hint-lit {
  padding: 6px 8px;
  border: 1px solid #d6af17;
  background: #fff8c7;
  color: #5a4300;
  box-shadow: inset 1px 1px #ffffff;
  animation: hintFlash 0.85s ease-in-out 2;
}

@keyframes hintFlash {
  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.22);
  }
}

.ending {
  display: grid;
  place-items: center;
  z-index: 120;
  padding: 24px;
  text-align: center;
  background: rgba(52, 142, 230, 0.52);
}

.ending > div {
  width: min(560px, 100%);
  border: 1px solid #164ba9;
  border-radius: 6px;
  padding: clamp(22px, 5vw, 40px);
  color: #17345f;
  background: linear-gradient(180deg, #ffffff, var(--xp-silver));
  box-shadow: 0 24px 80px rgba(14, 49, 114, 0.42), inset 0 0 0 1px #ffffff;
}

.ending.true-ending {
  background: rgba(34, 112, 197, 0.62);
}

.ending.true-ending > div {
  width: min(760px, 100%);
}

.ending.full-page-ending {
  padding: 0;
  background: #02060d;
}

.ending.full-page-ending > div {
  width: 100%;
  min-height: 100%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  border: 0;
  border-radius: 0;
  padding: clamp(28px, 7vw, 86px);
  color: #dce9ff;
  background:
    radial-gradient(circle at 50% 28%, rgba(35, 97, 168, 0.55), transparent 19rem),
    linear-gradient(180deg, #061a3a, #02060d 72%);
  box-shadow: none;
}

.ending h2 {
  font-size: clamp(2rem, 7vw, 4.6rem);
}

.ending p:not(.boot-kicker) {
  color: #354b68;
  line-height: 1.8;
}

.ending-photo {
  margin: 14px auto 16px;
  width: min(620px, 100%);
  padding: 8px;
  border: 1px solid #9ca8bd;
  background: #ffffff;
  box-shadow: 0 5px 18px rgba(20, 48, 95, 0.2), inset 0 0 0 1px #f8f8f8;
}

.ending-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid #787878;
}

.ending-postscript {
  margin-top: 4px;
  border-top: 1px dashed #9bb3de;
  padding-top: 14px;
  font-style: italic;
}

.ending.full-page-ending .boot-kicker {
  color: #9bbcff;
}

.ending.full-page-ending h2 {
  max-width: 980px;
  color: #ffffff;
  font-size: clamp(2.6rem, 9vw, 7rem);
  text-shadow: 0 0 18px rgba(125, 180, 255, 0.48);
}

.ending.full-page-ending p:not(.boot-kicker) {
  max-width: 760px;
  margin: 0;
  color: #dce9ff;
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.power-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  color: #dce9ff;
  background: #000000;
  text-align: center;
}

.power-card {
  width: min(520px, calc(100vw - 48px));
  padding: 22px;
}

.power-card p {
  margin: 0;
  font-family: var(--font-mono);
  line-height: 1.8;
  text-shadow: 0 0 8px rgba(130, 190, 255, 0.72);
}

.power-card p:first-child {
  color: #ffffff;
  font-size: 1.08rem;
}

.power-card p:last-child {
  color: #9eb8d9;
  font-size: 0.88rem;
}

.power-overlay.is-draining {
  animation: powerFlicker 1.15s steps(2, end) both;
}

.power-overlay.is-off {
  background: #000000;
}

.power-overlay.is-off .power-card {
  display: none;
}

.power-overlay.is-off::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88vw;
  height: 2px;
  background: rgba(220, 240, 255, 0.9);
  box-shadow: 0 0 18px rgba(180, 220, 255, 0.85);
  transform: translate(-50%, -50%) scaleX(0);
  animation: crtLine 0.85s ease-out both;
}

@keyframes powerFlicker {
  0% { filter: brightness(1); }
  25% { filter: brightness(1.9); }
  50% { filter: brightness(0.35); }
  75% { filter: brightness(1.35); }
  100% { filter: brightness(0.12); }
}

@keyframes crtLine {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1);
  }
  70% {
    opacity: 0.92;
    transform: translate(-50%, -50%) scaleX(0.18);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }
}

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

  .desktop {
    min-height: 100%;
    overflow: auto;
  }

  .desktop-icons {
    width: auto;
  }

  .window,
  .window-documents,
  .window-work-info,
  .window-readme-info,
  .window-computer,
  .window-system-properties,
  .window-drive,
  .window-drive-file,
  .window-backup-computer,
  .window-folder,
  .window-network-detail,
  .window-word,
  .window-music,
  .window-player,
  .window-acdsee,
  .window-photo-detail,
  .window-excel,
  .window-network,
  .window-recycle-bin,
  .window-noise-site,
  .window-ie,
  .window-baidu,
  .window-baidu-cache,
  .window-spring-site,
  .window-sacrifice-site,
  .window-xhs,
  .window-chat-site,
  .window-wechat,
  .window-blog,
  .window-terminal,
  .window-decrypt {
    position: fixed;
    left: 10px !important;
    right: 10px;
    top: 10px !important;
    width: auto;
    max-height: calc(100vh - 50px);
    overflow: auto;
  }

  .explorer-layout {
    grid-template-columns: 1fr;
  }

  .recycle-content,
  .recycle-list {
    grid-template-columns: 1fr;
  }

  .computer-shell {
    grid-template-columns: 1fr;
  }

  .computer-task-pane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-tab-panel {
    grid-template-columns: 110px 1fr;
    padding-left: 18px;
  }

  .system-tabs {
    overflow-x: auto;
    padding-bottom: 1px;
  }

  .xp-balloon {
    right: 12px;
    bottom: 36px;
    width: min(300px, calc(100vw - 24px));
  }

  .file-sidebar {
    grid-template-columns: repeat(3, 1fr);
  }

  .file-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .path-grid,
  .photo-file-grid,
  .drive-file-page,
  .photo-detail {
    grid-template-columns: 1fr;
  }

  .backup-icon-grid {
    grid-template-columns: repeat(3, 68px);
    min-height: 620px;
  }

  .backup-logo {
    left: 54%;
    top: 4%;
    font-size: 26px;
  }

  .backup-window-mark {
    right: 5%;
    bottom: 18%;
    width: 170px;
  }

  .network-facts {
    grid-template-columns: 1fr;
  }

  .network-facts dt {
    border-bottom: 0;
  }

  .blog-page {
    padding-left: 14px;
    background: #ffffff;
  }

  .xhs-header {
    grid-template-columns: 1fr;
  }

  .xhs-search {
    grid-template-columns: 1fr 70px;
  }

  .xhs-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .chat-site-layout,
  .chat-site-reply {
    grid-template-columns: 1fr;
  }

  .chat-blogger-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-site-reply strong {
    border-right: 0;
    border-bottom: 1px solid #c8c1a6;
  }

  .wechat-page {
    grid-template-columns: 1fr;
  }

  .wechat-list {
    grid-template-columns: repeat(3, minmax(110px, 1fr));
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid #b5cdbb;
  }

  .wechat-unlock {
    grid-template-columns: 1fr;
  }

  .chat-line {
    max-width: 92%;
  }

  .decrypt-form {
    grid-template-columns: 1fr;
  }

  .start-menu {
    width: min(382px, 100vw);
  }

  .terminal-output {
    height: min(52vh, 340px);
  }
}

@media (max-width: 440px) {
  .desktop-icons {
    width: auto;
  }

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

  .start-right {
    border-left: 0;
  }

  .status-readouts {
    min-width: 138px;
    gap: 5px;
    font-size: 11px;
  }

  .brand {
    min-width: 82px;
    padding-right: 12px;
  }

  .file-list {
    grid-template-columns: 1fr;
  }
}