MediaWiki:Common.css：修订间差异

来自Age Of History 2 Chinese Wiki
跳转至：导航、​搜索
←上一编辑
无编辑摘要
无编辑摘要
 
（未显示同一用户的82个中间版本）
第1行： 第1行：
/* 这里放置的CSS将应用于所有皮肤 */
/* Windows XP风格MediaWiki主题 - 完整迁移自Wikidot */


/* 导入所需字体 */
@import url("https://fonts.googleapis.com/css2?family=Microsoft+Sans+Serif&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css");
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


:root {
:root {
  /* 保留原始配色变量 */
    /* 主题基础设置 */
  --link-color: #0645ad;
    --fade-in-delay: 0.1s;
  --link-color-active: #faa700;
    --theme-base: "xp-style";
  --custom-background-blue: #ccf;
    --theme-id: "windows-xp";
  --custom-background-cyan: #cef;
    --theme-name: "Windows XP Theme";
  --custom-background-green: #cfc;
   
  --custom-background-gray: #d2d2d2;
    /* 字体设置 - 保持原有字体 */
  --custom-background-grey: var(--custom-background-gray);
    --body-font: "VonwaonBitmap 16px", VT323, monospace;
  --custom-background-magenta: #fdf;
    --header-font: "VonwaonBitmap 16px", VT323, monospace;
  --custom-background-orange: #fdb;
    --title-font: "VonwaonBitmap 16px", VT323, monospace;
  --custom-background-purple: #ecf;
    --mono-font: "VonwaonBitmap 16px", VT323, monospace;
  --custom-background-red: #fcc;
    --pixel-font-16: 'VonwaonBitmap 16px', VT323, monospace;
  --custom-background-yellow: #ffc;
    --pixel-font-12: 'VonwaonBitmap 12px', VT323, monospace;
  --custom-border-blue: #36e;
    --base-font-size: 14px;
  --custom-border-cyan: #9df;
   
  --custom-border-green: #5d5;
    /* Windows XP 颜色方案 */
  --custom-border-gray: #bbb;
    --xp-blue: 49, 106, 197;
  --custom-border-grey: var(--custom-border-gray);
    --xp-blue-light: 82, 153, 235;
  --custom-border-magenta: #f9f;
    --xp-blue-dark: 16, 35, 85;
  --custom-border-orange: #f90;
    --xp-green: 57, 154, 48;
  --custom-border-purple: #96c;
    --xp-button: 192, 192, 192;
  --custom-border-red: #e44;
    --xp-window-border: 0, 0, 0;
  --custom-border-yellow: #fc3;
    --xp-window-bg: 236, 233, 216;
  --custom-closed-topic-neutral: #eef;
    --xp-text: 0, 0, 0;
  --custom-closed-topic-no: #fee;
   
  --custom-closed-topic-yes: #efe;
    /* 颜色方案 - 迁移并适配XP风格 */
  --custom-code-background: #f8f9fa;
    --white-monochrome: 255, 255, 255;
  --custom-load-page-button-color: #fff8;
    --pale-gray-monochrome: 236, 233, 216;
  --custom-main-page-background: #fcfcfc;
    --light-gray-monochrome: 192, 192, 192;
  --custom-main-page-border: var(--custom-border-gray);
    --gray-monochrome: 128, 128, 128;
  --custom-main-page-edition-subheader: #333;
    --black-monochrome: 0, 0, 0;
  --custom-mcwiki-header-color: #bcd4f5;
    --bright-accent: var(--xp-blue);
  --custom-navbox-background: #fff;
    --medium-accent: var(--xp-blue);
  --custom-navbox-top: #ccc;
    --dark-accent: var(--xp-blue-dark);
  --custom-navbox-middle: #ddd;
    --pale-accent: var(--xp-blue-light);
  --custom-navbox-thru: #eee;
   
  --custom-nbt-inherit-color: #e6e6fa;
    /* 链接颜色 */
  --custom-table-background: #f8f9fa;
    --link-color: 0, 0, 255;
  --custom-table-alternate-background: #f0f1f2;
    --visited-link-color: 128, 0, 128;
  --custom-table-choice-always: #003600;
    --hover-link-color: 0, 0, 255;
  --custom-table-choice-always-background: #80d080;
   
  --custom-table-choice-default: #fff;
    /* 文本阴影 */
  --custom-table-choice-in-off-background: #060;
    --text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  --custom-table-choice-in-on-background: #0c0;
   
  --custom-table-choice-na: #000;
    /* 边框和阴影 */
  --custom-table-choice-na-background: #fff;
    --window-border: 1px solid rgb(var(--xp-window-border));
  --custom-table-choice-neutral: #634800;
    --window-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  --custom-table-choice-neutral-background: #ffeb9c;
  --custom-table-choice-never: #3c0404;
  --custom-table-choice-never-background: #ff8080;
  --custom-table-choice-no: #840606;
  --custom-table-choice-no-background: #ffc7ce;
  --custom-table-choice-out-off-background: #900;
  --custom-table-choice-out-on-background: #f00;
  --custom-table-choice-partial: #665400;
  --custom-table-choice-partial-background: #ffd;
  --custom-table-choice-planned: #0131b7;
  --custom-table-choice-planned-background: #dfdfff;
  --custom-table-choice-rarely: #533400;
  --custom-table-choice-rarely-background: #fdce5e;
  --custom-table-choice-unknown: #222;
  --custom-table-choice-unknown-background: #ccc;
  --custom-table-choice-yes: #005600;
  --custom-table-choice-yes-background: #c6efce;
  --custom-table-header-background: #eaecf0;
  --custom-topic-30-days: #bbb;
  --custom-topic-7-days: #ddd;
 
  /* 增强CRT效果相关变量 */
  --crt-primary-scanline-alpha: 0.14;     /* 主扫描线透明度 */
  --crt-secondary-scanline-alpha: 0.08;   /* 副扫描线透明度 */
  --crt-fast-scanline-alpha: 0.3;         /* 快速扫描线透明度 */
  --crt-flicker-alpha: 0.04;               /* 屏幕闪烁强度 */
  --crt-noise-alpha: 0.04;                 /* 噪点强度 */
  --crt-glow-radius: 0.08em;
  --crt-glow-color: rgba(0, 255, 100, 0.2); /* 辉光颜色和强度 */
  --crt-text-shadow: 0 0 var(--crt-glow-radius) var(--crt-glow-color);
  --crt-vignette-opacity: 0.15;            /* 暗角效果强度 */
  --crt-rgb-shift-amount: 1px;            /* RGB颜色偏移量 */
  --crt-curvature: 8;                      /* CRT曲率（数值越大曲率越大）*/
 
  /* 网格背景相关变量 */
  --grid-color: rgba(0, 0, 0, 0.08);
  --grid-size: 40px;
  --grid-line-width: 1px;
 
  /* 字体设置 - 保持不变 */
  --pixel-font-16: 'VonwaonBitmap 16px', monospace;
  --pixel-font-12: 'VonwaonBitmap 12px', monospace;
  --title-font: var(--pixel-font-16);
  --body-font: var(--pixel-font-16);
  --small-font: var(--pixel-font-12);
  --UI-font: var(--pixel-font-12);
 
  /* 字体大小设置 */
  --base-font-size: 15px;
  --small-font-size: 13px;
  --title-scale: 1.3;
  --code-scale: 0.9;
 
  /* 边框和内间距设置 */
  --side-border-thickness: 0.1rem;
  --main-border-thickness: 0.05rem;
 
  /* 启用/禁用CRT效果 - 默认启用 */
  --crt-effects-display: block;
 
  /* 质感相关变量 */
  --glass-opacity: 0.92;
  --glass-blur: 0px;              /* 模糊效果 - 如果浏览器支持 */
  --inset-shadow-depth: 25px;
  --border-shine: rgba(255, 255, 255, 0.1);
  --box-depth: 1px 1px 3px rgba(0, 0, 0, 0.15);
 
  /* 侧边栏相关变量 - 新增 */
  --sidebar-max-height: 85vh;      /* 侧边栏最大高度 */
  --sidebar-width: 14rem;          /* 侧边栏宽度 */
  --sidebar-top-offset: 3rem;      /* 侧边栏顶部偏移 */
 
  /* 控制台相关变量 - 新增 */
  --console-indicator-color: rgba(0, 255, 100, 0.8);
  --console-text-color: rgba(0, 255, 0, 0.9);
  --terminal-bg: rgba(16, 24, 32, 0.8);
}
}


/* CRT效果动画 - 增强版 */
/* 应用全局字体 */
@keyframes flicker {
body {
  0%, 100% { opacity: 0.98; }
    font-family: var(--body-font) !important;
  25% { opacity: 0.94; }
    font-size: var(--base-font-size) !important;
  50% { opacity: 0.99; }
    line-height: 1.5 !important;
  75% { opacity: 0.95; }
    background-color: #3a6ea5; /* 经典XP桌面蓝色背景 */
  83% { opacity: 0.98; }
    background-image: url("/aoh2wiki/images/b/be/Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg");
  90% { opacity: 0.91; }
    background-size: cover;
  93% { opacity: 0.99; }
    background-position: center;
  97% { opacity: 0.93; }
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: rgb(var(--xp-text));
}
}


/* 极微弱闪烁效果 - 用于文本和UI元素 */
/* 标题字体 */
@keyframes micro-flicker {
h1, h2, h3, h4, h5, h6, #firstHeading {
  0%, 100% { opacity: 1; }
    font-family: var(--title-font);
  25% { opacity: 0.99; }
    color: rgb(var(--white-monochrome));
  50% { opacity: 0.98; }
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
  75% { opacity: 0.99; }
    padding: 5px 10px;
    margin-top: 10px;
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-shadow: var(--text-shadow);
}
}


/* 主扫描线动画 - 更逼真 */
/* 窗口操作按钮 - 关闭、最大化、最小化 */
@keyframes primary-scanline {
h1::after,
  0% { transform: translateY(-5vh); }
h2::after,
  100% { transform: translateY(110vh); }
h3::after,
h4::after,
h5::after,
h6::after,
#firstHeading::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
}
}


/* 副扫描线动画 - 较慢移动 */
h1::before,
@keyframes secondary-scanline {
h2::before,
  0% { transform: translateY(-100vh); }
h3::before,
  100% { transform: translateY(100vh); }
h4::before,
h5::before,
h6::before,
#firstHeading::before {
    content: "□";
    position: absolute;
    top: 2px;
    right: 25px;
    width: 16px;
    height: 16px;
    background-color: rgb(var(--light-gray-monochrome));
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: black;
    cursor: pointer;
}
}


/* 快速扫描线动画 - 闪烁通过 */
h1 span::before,
@keyframes fast-scanline {
h2 span::before,
  0%, 5% { opacity: 0; transform: translateY(-100vh); }
h3 span::before,
  8% { opacity: var(--crt-fast-scanline-alpha); }
h4 span::before,
  25% { opacity: var(--crt-fast-scanline-alpha); }
h5 span::before,
  30% { opacity: 0; }
h6 span::before,
  100% { opacity: 0; transform: translateY(100vh); }
#firstHeading span::before {
    content: "_";
    position: absolute;
    top: 2px;
    right: 45px;
    width: 16px;
    height: 16px;
    background-color: rgb(var(--light-gray-monochrome));
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 14px;
    font-size: 12px;
    color: black;
    font-weight: bold;
    cursor: pointer;
}
}


/* 噪点效果动画 */
/* 链接样式 */
@keyframes noise {
a {
  0%, 100% { background-position: 0 0; }
    color: rgb(var(--link-color));
  25% { background-position: 100% 0; }
    text-decoration: none;
  50% { background-position: 100% 100%; }
  75% { background-position: 0 100%; }
}
}


/* RGB颜色偏移动画 */
a:visited {
@keyframes rgb-shift {
     color: rgb(var(--visited-link-color));
  0%, 100% {
    text-shadow:
      var(--crt-rgb-shift-amount) 0 0 rgba(255, 0, 0, 0.3),
      calc(-1 * var(--crt-rgb-shift-amount)) 0 0 rgba(0, 255, 255, 0.3);
  }
  25% {
    text-shadow:
      calc(0.8 * var(--crt-rgb-shift-amount)) 0 0 rgba(255, 0, 0, 0.3),
      calc(-0.8 * var(--crt-rgb-shift-amount)) 0 0 rgba(0, 255, 255, 0.3);
  }
  50% {
    text-shadow:
      var(--crt-rgb-shift-amount) 0 0 rgba(255, 0, 0, 0.3),
      calc(-1 * var(--crt-rgb-shift-amount)) 0 0 rgba(0, 255, 255, 0.3);
  }
  75% {
     text-shadow:
      calc(1.2 * var(--crt-rgb-shift-amount)) 0 0 rgba(255, 0, 0, 0.3),
      calc(-1.2 * var(--crt-rgb-shift-amount)) 0 0 rgba(0, 255, 255, 0.3);
  }
}
}


@keyframes crt-on {
a:hover {
  0% { opacity: 0; filter: brightness(5) saturate(0); }
    color: rgb(var(--hover-link-color));
  10% { opacity: 0.3; filter: brightness(3) saturate(0.2); }
    text-decoration: underline;
  30% { opacity: 0.7; filter: brightness(2) saturate(0.5); }
  50% { opacity: 0.8; filter: brightness(1.5) saturate(0.8); }
  100% { opacity: 1; filter: brightness(1) saturate(1); }
}
}


/* 控制台指示灯闪烁效果 */
/* ">" 箭头指示符 - 保留原样 */
@keyframes console-blink {
a:hover::before {
  0%, 100% { opacity: 1; }
    content: "> ";
  50% { opacity: 0.3; }
}
}


/* 打字机效果 */
 
@keyframes typing {
/* 背景样式 */
  from { width: 0; }
html, body {
  to { width: 100%; }
    background-color: #3a6ea5 !important; /* 保留XP桌面风格 */
}
}


/* 滚动指示动画 */
/* 搜索框和搜索按钮样式 */
@keyframes scroll-indicator {
#searchButton,
  0%, 100% { transform: translateY(0); }
.searchButton,
  50% { transform: translateY(10px); }
input[type="submit"],
input[type="button"],
.mw-ui-button,
button[name="go"],
button[name="fulltext"],
.mw-ui-button.mw-ui-progressive {
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
    border: 1px solid #ababab !important;
    color: black !important;
    font-family: var(--body-font) !important;
    padding: 3px 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}
}


/* 光感效果 - 模拟CRT显示器对周围光线的反应 */
#searchButton:hover,
@keyframes light-response {
.searchButton:hover,
  0%, 100% { filter: brightness(1); }
input[type="submit"]:hover,
  50% { filter: brightness(1.03); }
input[type="button"]:hover,
.mw-ui-button:hover,
button[name="go"]:hover,
button[name="fulltext"]:hover,
.mw-ui-button.mw-ui-progressive:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}
}


/* 全局和背景样式 - 增强CRT显示器质感 */
/* 分类条样式 */
html {
#catlinks,
  min-height: 100%;
.catlinks {
  background-color: #111; /* 更暗的背景，衬托CRT效果 */
    background-color: rgb(var(--xp-window-bg)) !important;
  background-image:
     border: 1px solid rgb(var(--xp-window-border)) !important;
    /* 网格线 */
     padding: 0.5em !important;
    linear-gradient(var(--grid-color) var(--grid-line-width), transparent var(--grid-line-width)),
    margin-top: 1em !important;
     linear-gradient(90deg, var(--grid-color) var(--grid-line-width), transparent var(--grid-line-width)),
    font-family: var(--body-font) !important;
     /* 精细噪点纹理 */
    box-shadow: var(--window-shadow) !important;
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%239C92AC' fill-opacity='0.08' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), auto;
  background-position: center center;
  animation: crt-on 2s ease-out;
  position: relative;
  overflow-x: hidden; /* 防止水平滚动条出现 */
  padding: 0;
  margin: 0;
}
}


/* CRT显示器边框模拟 */
#catlinks a,
.crt-monitor-frame {
.catlinks a {
  position: fixed;
    color: rgb(var(--link-color)) !important;
  top: 0;
    text-decoration: none !important;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
  background: transparent;
  box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0.7); /* 内阴影创造边框效果 */
  border-radius: 15% / 8%; /* 创造CRT显示器的弧度 */
}
}


/* CRT面板反光效果 */
#catlinks a:hover,
.crt-reflection {
.catlinks a:hover {
  position: fixed;
    color: rgb(var(--hover-link-color)) !important;
  top: 0;
    text-decoration: underline !important;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 40%
  );
  pointer-events: none;
  z-index: 10001;
  opacity: 0.3;
  border-radius: 15% / 8%;
}
}


body {
/* 工具栏样式 */
  font-family: var(--body-font);
#footer-info,
  font-size: var(--base-font-size);
#footer-places,
  line-height: 1.65;
.footer-places,
  color: #222;
.footer-info {
  position: relative;
    background-color: rgb(var(--xp-window-bg)) !important;
  width: 90%;
    border-top: 1px solid rgb(var(--xp-window-border)) !important;
  max-width: 1200px; /* 限制最大宽度 */
    color: rgb(var(--xp-text)) !important;
  min-height: calc(100vh - 4rem);
     padding: 0.5em 1em !important;
  margin: 2rem auto; /* 居中并增加上下边距 */
    font-family: var(--body-font) !important;
  padding: 2rem;
  background-color: rgba(255, 255, 255, var(--glass-opacity));
  border-radius: 6px;
  border: 1px solid var(--border-shine);
  box-shadow:  
    var(--box-depth),
    0 3px 12px rgba(0, 0, 0, 0.05),
     inset 0 0 var(--inset-shadow-depth) rgba(0, 255, 100, 0.04);
  animation: flicker 120s infinite alternate ease-in-out;
  overflow: hidden; /* 隐藏超出部分，配合扫描线 */
  backdrop-filter: blur(var(--glass-blur)); /* 支持的浏览器会有磨砂玻璃效果 */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  transform-style: preserve-3d;
  perspective: 1000px;
}
}


/* CRT曲面效果 - 使页面内容看起来像在CRT上显示 */
#footer-info a,
.crt-curve-effect {
#footer-places a {
  position: fixed;
    color: rgb(var(--link-color)) !important;
  top: 0;
}
  left: 0;
 
  width: 100%;
#footer-info a:hover,
  height: 100%;
#footer-places a:hover {
  pointer-events: none;
    color: rgb(var(--hover-link-color)) !important;
  z-index: 9997;
  background: transparent;
  box-shadow: inset 0 0 calc(var(--crt-curvature) * 8px) rgba(0, 0, 0, 0.3);
  border-radius: 50% / 10%;
  opacity: 0.5;
}
}


/* 添加暗角效果 - 增强CRT显示器质感 */
/* 主内容区背景 */
body::before {
#content {
  content: "";
    background-color: rgb(var(--xp-window-bg));
  display: var(--crt-effects-display);
    position: relative;
  position: fixed;
    border: 2px solid rgb(var(--xp-window-border));
  top: 0;
    box-shadow: var(--window-shadow);
  left: 0;
    margin: 10px auto;
  width: 100%;
    padding: 0;
  height: 100%;
    border-radius: 0;
  pointer-events: none;
  z-index: 9990;
  background: radial-gradient(
    circle at center,
    transparent 40%,
    rgba(0, 0, 0, var(--crt-vignette-opacity)) 140%
  );
  mix-blend-mode: multiply;
}
}


/* 添加纹理噪点 - 模拟CRT颗粒感 */
/* 导航栏 */
body::after {
.navbar,
  content: "";
.navbar.navbar-default,
  display: var(--crt-effects-display);
.navbar-light {
  position: fixed;
    background-color: rgb(var(--xp-window-bg)) !important;
  top: 0;
    border: 1px solid rgb(var(--xp-window-border)) !important;
  left: 0;
    box-shadow: var(--window-shadow) !important;
  width: 100%;
    border-radius: 0 !important;
  height: 100%;
  pointer-events: none;
  z-index: 9991;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcGEgUHbZ0MhgAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAHeUlEQVRo3u1aTY8cRxU9r6q7enpmdvbDu951MF6vE2MsRwpCChKRkCNEhAQSF4TgADdO/BguXJD4A+HAH+DMj+AMCBGJ2MJJiCwhx3a8ttfeZe2Z7enu6o+q9zjUzKzX3l1r1l4SzqGlUku9XdX1+r36eO+9V0QphdddBF6D4o1x5OTkZGFxcfGQt956a77VasHzPICZi4cQAFAA4Pv+S3sGAIwxYIxBmqbY39/H2toa7969+/djx449PDw8XE2S5PNXrlz55uzs7KWrV6/+ZWlpaePChQuLcRxnNU3zzszMzPvHjh37V6fTWQeANE3fFBGICFzXRZ7nYGbEcYwoipDnOZRSGA6HIhJ8JiIjhCilhm6apkxEBYCaiDiZ/aSUYiL6Vr/f/56ISJI4MxwO35+ZOfazdrs9WF9fdwFgenoaMzOz3N3d/UYYhs/v3bt3OgiCJWvtB9vb29/q9S6d7vV6l7vd7pt7e3vvBkEwaDabf15fX//x+vr6D/M8/66IuK1Wi8MwJADgnMt5nj/yfU9ns9l2o9H4qeu6RhRVfd8fk1JKiBRqInJ+q7fJ/f19NRgMnDRND4goEBHV7XbDWvtBHMf/qdfrr9y+ffsjAG4Q+AiCCM1mhCDw0Ww2oLXC6urqLxYXF39grT1vjMFoNEKe52g2mwjDgJIk6wFQzWazIyI/iaLoL/1+/wEROUop5xLn8XgKAKSUIofImYsZZVkGrbUwM9bW1p6GYfiHu3fv3vA89c75+flvTk8vXp6ZeePCzMziW0opLC4u0tmzZ+n8+fM4d+4cTp06xa7rgjGOra0tXlx8k3u9c3Tu3FmcPHmCFhYWqNPp4MSJE1hZWcHc3Bw2NjbgOA4nSRKDKE3TdCfP8/tElGRZVpFlBEdARMQEiBZVURQCEJgZeZ7D932MRiMzMzODJEk+6na7D8Pw4k+ttR84jnNWKQWj9dhwAiklaLVaWFlZwfLyMh1VHpXCcRycPXsW58+fx/T0NG1ubtrxfQb7+/uPnz17tsXMDwDsOiJimLlEZJgZzBxYa1UURQUAGGMgItRsNmCMIQA4c+YMms0mrS9Offf+/fu/jeP4X1NTU+9Yazul52utSURQSoGI4DgOlpeXCcBRnSClFBYWFnDjxg0qigLGGGitKQgCFZH/xcrKyneMMbDWKgACwDjGmKIoClAFrTWPbSqDOI6R5zlqtRqICGma/kBEYIxBFEXfr9VqV5NkmDrOpOpTPNHjr2k/YL2Znz3eL2JnZmYAAHmeo9VqcRAEtLW1BWvtRwB+DYAcInILY9LiMDNUURTG9/3xVVkGpZVzLMuytN/vP261WnAch9vtNnwfRZbln25smFjrIdqt8z9sND68ND2t32q1GuXVnSrvmKZDpGn6NE3TFACCIECWZUjTdLyBZVma5zlcX1//bGdn51etVmu71WqVDy6MsYwcZiRaa8Vaj6IoKp7jtdYoimK70+mc9TzPdfgpXlBa27VabVcpNSeisASDcy6NMXnZ+bnWWq21RZZlKIoCSZJsM/O/wzAshsOhBkCu6yJN0w+LotgWEfJcl7K8gDFZXl5wkiRFURSaMSYA5HkOx3EYAKIo+l2SJMjzHEQEIgqttdvW2sdJkmwPBgOICNVqNSRJ8ttOp7ObZdnfnXl77Zdf+T4ajYbeGI7SZI9rtVWxdkCuuyppdkBK7Vf7JHsvEq3SOHcGcE8/yYYbjuNsW2v/aIwZAaDxPRFJlmX3rbXGcRx0Oh3s7e3BWjvd7XbDa0sv+Ln+heu6ZIzB0Z2VpwV2d3dBRBgOh/B9H9ZapGmKyliMK2dnZ4cGg8EzAM5RsZxSKrPWNgCciOP4N1EU/dzzPOq0W7h27RpazeY/pqen/9jtdk8updnSB+G95+Pv3Og0m+b8lUnN/wcivXv37ng00FoXzCxElFtrNYBAKZVaa8dV5fs+tdvtLQE+McaYoigYAPf7fWRZxvV6HWmatj2Pv5Xn5onpTm1rNEr/leXDJ1lB947Vk9txnP8yvn+n3+vvHKF1z1rbY+awvCsiUlhrS5QmETEAeJ7H9Xr9ThzHz6y1ZYoWIgJrbaGUwsHBwUoU+VNJMmp2G42Pun3cD4P04Bfp6Md/3dqLPo6j+PZe/CxWfn6wuN///fzc/N0fX3SzL0tQ/98iooyIQCklkwg2AAgzoyiKsI/8i51OZxCAZFlmXdftl3cdhyUnCE8+rMDz6A9pml6jTwsGKX4yEUgKrA0A8KtY4xVLxC9pPOcVIzLegwQAMmttI4qi/Z2dHeR5PiEiWutS2RtJkhyMgxJNzz3+ZIY/D8Kf0w2aRBXPOeKc95tZfnyudqX33WwG9BXv9JcDFoCIiBhjAsdxTJIkYK2FiFRKKUdE4DgOrLUeAPfLTvevIiLwPOQDwPNAlvlXPvqfTLGBKEJVtR/AlwMWALTWIqUjzHx4XqjKmYiKPM/XADz6qokQEfjLAosoAlEHzGd5yP1P5Yg5YIwkJ+Ry1bI/pM0vmBpTVZlDTPtq1Fqf7JJYazmKIuR5DmNM2W6PZxulFJg5q8qfRQRKKdJak+u6ElSzeYlmlFJijGHXdVFxVJSmKZIkIWMMHMdBvV5HGIYQkbLakiRJNMbUpPx+LdwpqrD8a+tI9SXrPwHt6TNRvZCHAAAAAElFTkSuQmCC");
  background-repeat: repeat;
  background-size: 200px;
  opacity: var(--crt-noise-alpha);
  animation: noise 0.5s steps(2) infinite;
  mix-blend-mode: overlay;
}
}
.console-input {
 
  background-color: var(--terminal-bg);
.navbar .navbar-brand,
  padding: 10px 15px;
.navbar .nav-link,
  display: flex;
.navbar-light .navbar-nav .nav-link {
  align-items: center;
    color: rgb(var(--link-color)) !important;
  border: 1px solid rgba(0, 255, 100, 0.5);
    font-family: var(--header-font) !important;
}
}


.console-prompt {
.navbar .nav-link:hover,
  color: rgba(0, 255, 100, 0.9);
.navbar-light .navbar-nav .nav-link:hover {
  margin-right: 10px;
    color: rgb(var(--hover-link-color)) !important;
  font-family: var(--pixel-font-12);
    background-color: rgba(var(--xp-blue), 0.1) !important;
  font-weight: bold;
  animation: console-blink 1s infinite;
}
}


.console-command {
/* 下拉菜单 */
  background: transparent;
.dropdown-menu {
  border: none;
    background-color: rgb(var(--xp-window-bg)) !important;
  color: rgba(0, 255, 100, 0.9);
    border: 1px solid rgb(var(--xp-window-border)) !important;
  font-family: var(--pixel-font-12);
    box-shadow: var(--window-shadow) !important;
  font-size: 16px;
    border-radius: 0 !important;
  width: 100%;
  outline: none;
}
}


.console-command::placeholder {
.dropdown-item {
  color: rgba(0, 255, 100, 0.4);
    color: rgb(var(--link-color)) !important;
    font-family: var(--body-font) !important;
}
}
/* CRT扫描线效果 - 更逼真 */
 
/* 1. 主扫描线 - 明显且速度和密度适中的扫描线 */
.dropdown-item:hover {
.crt-primary-scanline {
    background-color: rgba(var(--xp-blue), 0.1) !important;
  content: "";
     color: rgb(var(--hover-link-color)) !important;
  display: var(--crt-effects-display);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 9px; /* 主扫描线较宽 */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, var(--crt-primary-scanline-alpha)) 40%,
    rgba(0, 0, 0, calc(var(--crt-primary-scanline-alpha) * 1.5)) 50%,
     rgba(0, 0, 0, var(--crt-primary-scanline-alpha)) 60%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 9995;
  opacity: 0.85;
  animation: primary-scanline 8s linear infinite;
}
}


/* 2. 副扫描线 - 持续存在的细小扫描线纹理 */
/* 侧边栏 */
.crt-secondary-scanline {
#mw-navigation, #mw-panel, .sidebar {
  content: "";
    background-color: rgb(var(--xp-window-bg)) !important;
  display: var(--crt-effects-display);
    border: 2px solid rgb(var(--xp-window-border)) !important;
  position: fixed;
     box-shadow: var(--window-shadow) !important;
  top: 0;
    border-radius: 0 !important;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, var(--crt-secondary-scanline-alpha)) 4px,
     rgba(0, 0, 0, var(--crt-secondary-scanline-alpha)) 4px
  );
  background-size: 100% 8px;
  pointer-events: none;
  z-index: 9994;
  opacity: 0.7;
}
}


/* 3. 快速扫描线 - 闪烁通过的亮条 */
#mw-navigation h2, #mw-panel h3, .sidebar h3 {
.crt-fast-scanline {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important;
  content: "";
    color: rgb(var(--white-monochrome)) !important;
  display: var(--crt-effects-display);
    font-family: var(--header-font) !important;
  position: fixed;
    border-bottom: 1px solid rgb(var(--xp-window-border)) !important;
  top: 0;
    padding: 5px 10px !important;
  left: 0;
    text-shadow: var(--text-shadow) !important;
  width: 100%;
    position: relative !important;
  height: 2px; /* 快速扫描线很窄 */
}
  background: linear-gradient(
 
    to bottom,
/* 工具栏 */
     transparent 0%,
#p-tb, .tools-menu {
     rgba(255, 255, 255, 0.5) 50%,
     background-color: rgb(var(--xp-window-bg)) !important;
    transparent 100%
     border: 2px solid rgb(var(--xp-window-border)) !important;
  );
    box-shadow: var(--window-shadow) !important;
  pointer-events: none;
    border-radius: 0 !important;
  z-index: 9996;
  opacity: 0;
  animation: fast-scanline 4s cubic-bezier(0.15, 0.85, 0.5, 1) infinite;
}
}


/* 额外扫描线阴影 - 增强3D效果 */
/* 内容区域 */
.crt-scanline-shadow {
#content, .mw-body {
  content: "";
    background-color: rgb(var(--xp-window-bg)) !important;
  display: var(--crt-effects-display);
    border: 2px solid rgb(var(--xp-window-border)) !important;
  position: fixed;
     box-shadow: var(--window-shadow) !important;
  top: 0;
    border-radius: 0 !important;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9992;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.01) 0%,
    rgba(0, 0, 0, 0.05) 50%,
     rgba(0, 0, 0, 0.01) 100%
  );
  opacity: 0.4;
}
}


/* 标题样式 - 更精致的复古科幻风格 */
/* 页脚 */
h1, h2, h3, h4, h5, h6 {
#footer, .footer {
  font-family: var(--title-font);
    background-color: rgb(var(--xp-window-bg)) !important;
  font-size: calc(var(--base-font-size) * var(--title-scale));
    border: 2px solid rgb(var(--xp-window-border)) !important;
  font-weight: normal;
    border-top: 1px solid rgb(var(--xp-window-border)) !important;
  text-shadow: var(--crt-text-shadow),
    color: rgb(var(--xp-text)) !important;
              0 1px 1px rgba(0, 0, 0, 0.1);
    box-shadow: var(--window-shadow) !important;
  letter-spacing: 0.03em;
    border-radius: 0 !important;
  position: relative;
    margin: 10px auto !important;
  margin-top: 1.8em;
    padding: 10px !important;
  margin-bottom: 1em;
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #111;
  line-height: 1.5;
  animation: micro-flicker 2s infinite alternate ease-in-out;
}
}


/* 标题光效底层 */
/* 搜索框 */
h1::after, h2::after, h3::after {  
#searchInput, .form-control {
  content: "";
    background-color: white !important;
  position: absolute;
    border: 1px solid #7f9db9 !important;
  bottom: -1px;
    color: rgb(var(--xp-text)) !important;
  left: 0;
     font-family: var(--body-font) !important;
  width: 100%;
     padding: 3px 5px !important;
  height: 1px;
  background: linear-gradient(
    to right,
     var(--crt-glow-color),
     transparent 90%
  );
}
}


/* 标题装饰线 */
/* 按钮 */
h1::before, h2::before {
.btn, .mw-ui-button {
  content: "";
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
  position: absolute;
    border: 1px solid #ababab !important;
  bottom: -2px;
    color: black !important;
  left: 0;
    font-family: var(--body-font) !important;
  width: 30px;
    padding: 3px 8px !important;
  height: 3px;
     border-radius: 0 !important;
  background: linear-gradient(
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
    to right,
    rgba(0, 255, 100, 0.8),
     transparent
  );
  border-radius: 2px;
  box-shadow: 0 0 8px var(--crt-glow-color);
}
}


body h1 {
.btn:hover, .mw-ui-button:hover {
  font-size: calc(var(--base-font-size) * 1.7);
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important;
  text-transform: uppercase;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
  padding-left: 14px;
  border-left: 3px solid var(--crt-glow-color);
  box-shadow: -3px 0 8px rgba(0, 255, 100, 0.2);
  letter-spacing: 0.05em;
}
}


h2 {  
/* 表格 */
  font-size: calc(var(--base-font-size) * 1.5);  
.wikitable, table.wikitable {
  padding-left: 6px;
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 2px solid rgb(var(--xp-window-border)) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: var(--window-shadow) !important;
}
}


h3 {  
.wikitable th {
  font-size: calc(var(--base-font-size) * 1.3);  
    background: linear-gradient(to bottom, #e3e3e3, #d0d0d0) !important;
  border-bottom-style: dashed;
    border: 1px solid #ababab !important;
  border-bottom-width: 1px;
    color: black !important;
    padding: 5px !important;
}
}


h4 {  
.wikitable td {
  font-size: calc(var(--base-font-size) * 1.2);  
    border: 1px solid #ababab !important;
  border-bottom: none;
    background-color: white !important;
  border-left: 2px solid rgba(0, 255, 100, 0.4);
    color: black !important;
  padding-left: 6px;
    padding: 5px !important;
}
}


h5, h6 {  
/* 代码块和预格式文本 */
  font-size: calc(var(--base-font-size) * 1.1);  
pre, code, .mw-code {
  border-bottom: none;
    background-color: white !important;
    border: 1px solid #ababab !important;
    color: black !important;
    font-family: var(--mono-font) !important;
    padding: 5px !important;
}
}


/* 链接样式 - 更精致的复古科幻风格 */
/* 链接颜色 */
a {
a {
  color: var(--link-color);
    color: rgb(var(--link-color)) !important;
  text-decoration: none;
  position: relative;
  transition: all 0.25s ease;
  padding: 1px 3px;
  border-radius: 2px;
  text-shadow: 0 0 3px rgba(0, 100, 255, 0.15);
  font-family: var(--pixel-font-16);
}
}


/* 链接悬停效果 */
a:visited {
a:hover {
    color: rgb(var(--visited-link-color)) !important;
  color: var(--link-color-active);
  background-color: rgba(250, 167, 0, 0.1);
  text-shadow: 0 0 var(--crt-glow-radius) rgba(250, 167, 0, 0.4);
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
}


/* 链接点击效果 */
a:hover {
a:active {
    color: rgb(var(--hover-link-color)) !important;
  transform: translateY(0);
    text-decoration: underline !important;
  box-shadow: none;
}
}


/* 标记链接是可交互的 - 添加小图标 */
/* 扫描线动画 - 修改为半透明灰色 */
a[href]:not(.mw-selflink)::before {
.scan-animation {
  content: '>';
    position: fixed;
  display: inline-block;
    width: 100%;
  margin-right: 3px;
    height: 100%;
  font-size: 0.8em;
    top: 0;
  opacity: 0.6;
    left: 0;
  transition: all 0.2s ease;
    pointer-events: none;
    z-index: 9999;
}
}


a[href]:not(.mw-selflink):hover::before {
/* 主扫描线 - 较宽较慢 */
  opacity: 1;
.scan-animation::before {
  transform: translateX(1px);
    content: "";
  animation: console-blink 1s infinite;
    position: absolute;
    width: 100%;
    height: 6px;
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(128, 128, 128, 0) 0%,
        rgba(128, 128, 128, 0.1) 20%,
        rgba(128, 128, 128, 0.2) 50%,
        rgba(128, 128, 128, 0.1) 80%,
        rgba(128, 128, 128, 0) 100%
    );
    box-shadow:  
        0 0 8px rgba(128, 128, 128, 0.15),
        0 0 15px rgba(128, 128, 128, 0.1);
    animation: scanMain 12s linear infinite;
    opacity: 0.4;
}
}


/* 红色链接样式 */
/* 副扫描线 - 中等速度 */
a.new {
.scan-animation::after {
  color: #ba0000;
    content: "";
  text-shadow: 0 0 3px rgba(186, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    height: 3px;
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(128, 128, 128, 0) 0%,
        rgba(128, 128, 128, 0.3) 50%,
        rgba(128, 128, 128, 0) 100%
    );
    box-shadow: 0 0 6px rgba(128, 128, 128, 0.2);
    animation: scanSecondary 7s linear infinite;
    animation-delay: -3s;
    opacity: 0.25;
}
}


a.new:hover {
/* 快速扫描线 - 细小快速 */
  background-color: rgba(186, 0, 0, 0.1);
.scan-animation .fast-scan {
  text-shadow: 0 0 var(--crt-glow-radius) rgba(186, 0, 0, 0.4);
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    background: rgba(128, 128, 128, 0.6);
    box-shadow: 0 0 3px rgba(128, 128, 128, 0.3);
    animation: scanFast 3s linear infinite;
    animation-delay: -1.5s;
    opacity: 0.15;
}
}


/* 外部链接样式 */
/* 各个扫描线的动画 */
a.external {
@keyframes scanMain {
  border-bottom: 1px dotted rgba(6, 69, 173, 0.3);
    0% {  
        top: -2rem;
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        top: 100vh;
        opacity: 0.6;
    }
}
}


a.external::after {
@keyframes scanSecondary {
  content: "⎋";
    0% {
  font-size: 0.8em;
        top: -1rem;
  margin-left: 3px;
        opacity: 0.4;
  opacity: 0.7;
    }
    35% {
        opacity: 0.2;
    }
    70% {
        opacity: 0.5;
    }
    100% {
        top: 100vh;
        opacity: 0.4;
    }
}
}


a.external:hover::after {
@keyframes scanFast {
  opacity: 1;
    0% {
  transform: translateY(-1px);
        top: -0.3rem;
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
    100% {  
        top: 100vh;
        opacity: 0.3;
    }
}
}


/* Infobox样式 - 更精致的复古科幻风格 */
/* 保留原始的淡入效果 */
.notaninfobox {
@keyframes fadeIn {
  position: relative;
    from {
  clear: right;
        opacity: 0;
  margin: 0 0 1em 1em;
        transform: translateY(20px);
  width: 350px;
    }
  font-size: calc(var(--base-font-size) * 0.9);
    to {
  font-family: var(--small-font);
        opacity: 1;
  background-color: rgba(248, 249, 250, 0.95);
        transform: translateY(0);
  float: right;
     }
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0;
  overflow: auto;
  z-index: 1;
  overflow-wrap: anywhere;
  box-shadow:
    2px 2px 5px rgba(0, 0, 0, 0.1),
     inset 0 0 10px rgba(0, 255, 100, 0.04);
  animation: flicker 80s infinite alternate;
  border-radius: 3px;
}
}


/* Infobox标题 */
/* 应用动画到内容 */
.notaninfobox > .infobox-title {
.mw-parser-output > * {
  font-family: var(--title-font);
    animation: fadeIn 0.5s ease-out forwards;
  font-weight: normal;
    opacity: 0;
  text-align: center;
  font-size: 110%;
  background: linear-gradient(to bottom, #d5e5fb, var(--custom-mcwiki-header-color));
  color: #333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
  padding: 10px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}
}


/* 给标题添加光泽效果 */
/* 延迟动画 */
.notaninfobox > .infobox-title::after {
.mw-parser-output > *:nth-child(1) { animation-delay: 0.1s; }
  content: "";
.mw-parser-output > *:nth-child(2) { animation-delay: 0.2s; }
  position: absolute;
.mw-parser-output > *:nth-child(3) { animation-delay: 0.3s; }
  top: 0;
.mw-parser-output > *:nth-child(4) { animation-delay: 0.4s; }
  left: -150%;
.mw-parser-output > *:nth-child(5) { animation-delay: 0.5s; }
  width: 150%;
.mw-parser-output > *:nth-child(n+6) { animation-delay: 0.6s; }
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(35deg);
  animation: shine 6s infinite;
}


/* Infobox标签样式 */
/* 修复代码区域样式 */
.notaninfobox .infobox-row .infobox-row-label {
.mw-highlight pre {
  font-family: var(--UI-font);
    background-color: white !important;
  font-weight: 600;
    border: 1px solid #ababab !important;
  color: #444;
    padding: 1em !important;
  text-shadow: none;
    overflow: auto !important;
  letter-spacing: 0.03em;
  padding: 5px 8px;
  background-color: rgba(0, 0, 0, 0.03);
  border-right: 2px solid rgba(0, 0, 0, 0.1);
}
}


/* Infobox内容样式 */
/* 语法高亮颜色 - 保持原有值 */
.notaninfobox .infobox-row .infobox-row-value {
.mw-highlight .k { color: #0000AA !important; } /* 关键字 */
  padding: 5px 8px;
.mw-highlight .s { color: #006600 !important; } /* 字符串 */
  line-height: 1.4;
.mw-highlight .c { color: #666666 !important; } /* 注释 */
}
.mw-highlight .n { color: #000000 !important; } /* 名称 */
.mw-highlight .o { color: #000000 !important; } /* 运算符 */


/* Infobox行交替背景 */
/* 引用样式 - Windows XP风格 */
.notaninfobox .infobox-row:nth-child(even) {
.lightstyled-quote, .darkstyled-quote {
  background-color: rgba(0, 0, 0, 0.02);
    background-color: rgb(var(--xp-window-bg));
    color: rgb(var(--xp-text));
    border: 1px solid #ababab;
    padding: 10px;
    margin: 10px 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    border-left: 4px solid rgb(var(--xp-blue));
    position: relative;
}
}


/* Infobox行悬停效果 */
.lightstyled-quote::before, .darkstyled-quote::before {
.notaninfobox .infobox-row:hover {
    content: "Information";
  background-color: rgba(0, 255, 100, 0.03);
    position: absolute;
    top: -22px;
    left: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 2px 10px;
    font-weight: bold;
    font-size: 0.9em;
    text-shadow: var(--text-shadow);
}
}


/* 表格样式 - 更精致的复古科幻风格 */
/* 块样式 - Windows XP风格 */
table {
.lightblock, .darkblock {
  border: 1px solid #ccc;
    background-color: rgb(var(--xp-window-bg));
  background-color: rgba(248, 249, 250, 0.95);
    color: rgb(var(--xp-text));
  box-shadow:  
    border: 2px solid rgb(var(--xp-window-border));
    var(--box-depth),
    box-shadow: var(--window-shadow);
    inset 0 0 15px rgba(240, 240, 240, 0.8);
    padding: 10px;
  border-radius: 3px;
    margin: 10px 0;
  margin: 1.2em 0;
    position: relative;
  font-family: var(--pixel-font-12);
    border-radius: 0;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden; /* 使圆角边框生效 */
}
}


/* 表格标题 */
.lightblock::before, .darkblock::before {
table caption {
    content: "Message";
  font-family: var(--title-font);
    position: absolute;
  font-size: calc(var(--base-font-size) * 1.05);
    top: 0;
  padding: 10px;
    left: 0;
  font-weight: normal;
    right: 0;
  text-shadow: var(--crt-text-shadow);
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
  margin-bottom: 5px;
    color: white;
  color: #333;
    padding: 5px 10px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
    font-weight: bold;
    text-align: left;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
}
}


/* 表头样式 */
.lightblock::after, .darkblock::after {
table th {
    content: "×";
  background: linear-gradient(to bottom, #f8f9fa, var(--custom-table-header-background));
    position: absolute;
  color: #333;
    top: 2px;
  font-family: var(--title-font);
    right: 5px;
  font-weight: normal;
    width: 16px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
    height: 16px;
  padding: 12px 14px;
    background-color: #ff6347;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    border: 1px solid rgb(var(--xp-window-border));
  position: relative;
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}


/* 表头装饰效果 */
/* 保留黑幕效果 - 行826-947 */
table th::after {
.heimu,
  content: "";
.heimu rt{
  position: absolute;
    --heimu-color:#252525;
  bottom: 0;
    --heimu-text-color:#fff;
  left: 0;
    --heimu-link-color:#add8e6;
  width: 100%;
    --heimu-visited-link-color:#c5cae9;
  height: 1px;
    --heimu-new-link-color:#fcc;
  background: linear-gradient(
    --heimu-new-visited-link-color:#ef9a9a;
    to right,
    --heimu-extiw-visited-link-color:#d1c4e9;
    rgba(255, 255, 255, 0.5),
    transparent
  );
}


/* 表格单元格 */
    background-color:var(--heimu-color);
table td, table th {
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  transition: all 0.2s ease;
  font-size: calc(var(--base-font-size) * 0.95);
}
}


/* 表格交替行 */
.heimu,
table tr:nth-child(even) td {
.heimu a,
  background-color: rgba(240, 241, 242, 0.7);
a .heimu,
a.new .heimu,
span.heimu a:visited,
span.heimu a.new,
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited,
span.heimu a.mw-disambig,
span.heimu a.mw-redirect{
    transition:color 0.13s linear;
    color:var(--heimu-color);
    text-shadow:none;
}
}


/* 表格行悬停效果 */
span.heimu:hover,
table tr:hover td {
span.heimu:active{
  background-color: rgba(0, 255, 100, 0.08);
    color:var(--heimu-text-color);
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
}
}


/* 代码样式 - 更精致的复古科幻风格 */
span.heimu:hover a,
pre, code {
a:hover span.heimu{
  font-family: var(--pixel-font-12);
    color:var(--heimu-link-color);
  font-size: calc(var(--base-font-size) * var(--code-scale));
  background-color: rgba(232, 232, 232, 0.8);
  border: 1px solid #d0d0d0;
  padding: 0.3em 0.5em;
  text-shadow: none;
  border-radius: 3px;
  color: #1a1a1a;
  position: relative;
}
}


/* 代码块样式 */
span.heimu:hover a:visited,
pre {
a:visited:hover span.heimu{
  padding: 1em 1em 1em 3.5em; /* 左侧留出行号空间 */
     color:var(--heimu-visited-link-color);
  overflow-x: auto;
  background-color: rgba(228, 230, 232, 0.9);
  box-shadow:  
    inset 0 1px 4px rgba(0,0,0,0.15),
     0 1px 0 rgba(255,255,255,0.7);
  counter-reset: line;
  margin: 1.5em 0;
  position: relative;
  border-left: 3px solid rgba(0, 200, 100, 0.3);
}
}


/* 代码块背景 - 终端风格 */
span.heimu:hover a.new,
pre::before {
a.new:hover span.heimu{
  content: "";
    color:var(--heimu-new-link-color);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 19px,
      rgba(0, 0, 0, 0.05) 19px,
      rgba(0, 0, 0, 0.05) 20px
    );
  pointer-events: none;
}
}


/* 代码行号 */
span.heimu a.new:hover:visited,
pre code {
a.new:hover:visited span.heimu{
  display: block;
    color:var(--heimu-new-visited-link-color);
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  counter-increment: line;
}
}


pre code::before {
span.heimu:hover a.extiw:visited,
  content: counter(line);
a.extiw:visited:hover span.heimu{
  display: inline-block;
    color:var(--heimu-extiw-visited-link-color);
  width: 2em;
  margin-right: 1em;
  margin-left: -3em;
  color: #888;
  text-align: right;
  user-select: none;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  padding-right: 0.5em;
}
}
 
[color-mode="dark"] .heimu,
/* 内联代码 */
[color-mode="dark"] .heimu rt{
p code, li code, td code {
    --heimu-color:#5e6272;
  padding: 0.15em 0.4em;
  margin: 0 0.2em;
  background-color: rgba(220, 220, 220, 0.5);
  border: 1px solid #d8d8d8;
  white-space: nowrap;
}
}


/* 控制台输出样式 */
/* 保留彩幕效果 - 行1778-1838 */
.console-output {
.colormu-drk {
  background-color: var(--terminal-bg);
color: #FFF;
  color: var(--console-text-color);
  font-family: var(--pixel-font-12);
  padding: 12px;
  margin: 1em 0;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}
}
 
.colormu-bri {
/* 控制台头部 */
color: #000;
.console-output::before {
  content: "> terminal";
  display: block;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 5px;
  margin-bottom: 8px;
  font-size: 0.9em;
}
}
 
.colormu-drk:not(.colormu_toggle_on) a {
/* 控制台指示器闪烁 */
color: #add8e6;
.console-indicator {
  display: inline-block;
  width: 0.8em;
  height: 1em;
  background-color: var(--console-indicator-color);
  margin-left: 0.2em;
  vertical-align: middle;
  animation: console-blink 1s infinite;
}
}
 
.colormu-drk:not(.colormu_toggle_on) a.new {
/* 确保文本内容清晰可读 */
color: #FCC;
p, li, td, th, figcaption, blockquote, cite {
  font-family: var(--body-font);
  line-height: 1.65;
  letter-spacing: 0.01em;
  position: relative;
  text-shadow: var(--crt-text-shadow);
}
}
 
.colormu>span, .colormu a, .colormu a>span {
/* 小字体元素 */
transition: color 0.2s;
.small, small, .text-small, figcaption, .caption, .info, .note {
  font-family: var(--small-font);
  font-size: var(--small-font-size);
}
}
 
/* 注释、提示和警告样式 */
.colormu:not(:hover):not(:active):not(.colormu_toggle_on)>span,
.note, .info, .warning, .tip {
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a {
  position: relative;
color: transparent;
  margin: 1.5em 0;
  padding: 1em 1em 1em 3em;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: var(--small-font);
}
}
 
.note::before, .info::before, .warning::before, .tip::before {
/* for T:Coloredlink in T:彩幕 */
  position: absolute;
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a>span {
  left: 0.8em;
color: transparent !important;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5em;
  opacity: 0.8;
}
}
 
/* 注释样式 */
/* for T:彩幕 in link */
.note {
a .colormu-bri {
  background-color: rgba(230, 230, 250, 0.4);
color: inherit;
  border-left: 3px solid #99c;
}
}
 
a:hover .colormu>span, a:active .colormu>span,
.note::before {
/* and for MediaWiki:Gadget-heimu-toggle.js */
  content: "※";
.colormu-drk.colormu_toggle_on, .colormu_toggle_on>span, .colormu-drk.colormu_toggle_on a>span {
  color: #99c;
color: inherit !important;
}
}


/* 信息样式 */
/* 橙幕效果 - 修改为Windows XP样式 */
.info {
.blackmu,
  background-color: rgba(220, 237, 255, 0.4);
.blackmu rt {
  border-left: 3px solid #69c;
    --blackmu-color: var(--xp-blue);
    --blackmu-text-color: 255, 255, 255;
    --blackmu-link-color: 173, 216, 230;
    --blackmu-visited-link-color: 197, 202, 233;
    --blackmu-new-link-color: 255, 204, 204;
    --blackmu-new-visited-link-color: 239, 154, 154;
    --blackmu-extiw-visited-link-color: 209, 196, 233;
   
    background-color: rgb(var(--blackmu-color));
}
}


.info::before {
.blackmu,
  content: "ℹ";
.blackmu a,
  color: #69c;
a .blackmu,
a.new .blackmu,
span.blackmu a:visited,
span.blackmu a.new,
span.blackmu a.external,
span.blackmu a.external:visited,
span.blackmu a.extiw,
span.blackmu a.extiw:visited,
span.blackmu a.mw-disambig,
span.blackmu a.mw-redirect {
    transition: color 0.13s linear;
    color: rgb(var(--blackmu-color));
    text-shadow: none;
}
}


/* 警告样式 */
span.blackmu:hover,
.warning {
span.blackmu:active {
  background-color: rgba(255, 240, 230, 0.4);
    color: rgb(var(--blackmu-text-color));
  border-left: 3px solid #f93;
}
}


.warning::before {
span.blackmu:hover a,
  content: "⚠";
a:hover span.blackmu {
  color: #f93;
    color: rgb(var(--blackmu-link-color));
}
}


/* 提示样式 */
/* 保留特效库代码 - 行949-1777 */
.tip {
/*
  background-color: rgba(230, 250, 230, 0.4);
该文档为一个hover特效库，由一些常用的效果以及GitHub上的开源项目“Hover.css”的一些部分构成。
  border-left: 3px solid #6c6;
请使用hovers在页面中进行载入。
}
*/


.tip::before {
/* hover状态切换 */
  content: "✓";
.hover-change,
  color: #6c6;
.hover-remote {
}
 
/* 图片效果 - 更精致的复古科幻风格 */
img {
  max-width: 100%;
  height: auto;
  transition: all 0.3s ease;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  filter: contrast(1.02) brightness(1.01); /* 轻微增强对比度 */
   position: relative;
   position: relative;
  display: inline-block;
  transition: opacity 0.5s linear;
}
}


/* 图片悬停效果 */
.hover-change-before,
img:hover {
.hover-change-after,
  box-shadow:
.hover-remote-target {
    0 3px 8px rgba(0, 0, 0, 0.15),
   transition: inherit;
    0 0 10px var(--crt-glow-color);
  transform: scale(1.02) translateY(-2px);
  border-color: rgba(0, 255, 100, 0.3);
   filter: contrast(1.05) brightness(1.02);
}
}


/* 图片装饰层 - 模拟CRT显示图片的效果 */
.hover-change-after,
img::after {
.hover-remote-target {
   content: "";
   opacity: 0;
   position: absolute;
   position: absolute;
   top: 0;
   top: 0;
   left: 0;
   left: 0;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(0, 0, 0, 0.03) 4px,
      rgba(0, 0, 0, 0.03) 4px
    );
  pointer-events: none;
  z-index: 1;
}
}
 
.hover-remote-target {
/* 图片标题 */
   left: 100%;
figcaption {
  margin-top: 0.5em;
  color: #555;
  font-style: italic;
  text-align: center;
   max-width: 100%;
}
}


/* 滚动条样式 - 更精致的复古科幻风格 */
.hover-change-after[style^='right:'],
::-webkit-scrollbar {
.hover-change-after[style*=' right:'],
   width: 14px;
.hover-remote-after[style^='right:'],
  height: 14px;
.hover-remote-after[style*=' right:'] {
   left: initial;
}
}


::-webkit-scrollbar-track {
.hover-change-after[style^='bottom:'],
  background: rgba(0, 0, 0, 0.04);
.hover-change-after[style*=' bottom:'],
  border-radius: 0;
.hover-remote-after[style^='bottom:'],
   box-shadow: inset 0 0 4px rgba(0,0,0,0.1);
.hover-remote-after[style*=' bottom:'] {
   top: initial;
}
}


::-webkit-scrollbar-thumb {
.hover-change-after:hover,
  background: repeating-linear-gradient(
.hover-remote-target {
    to bottom,
   opacity: 0;
    #aaa 0px,
   margin-left: -9999px;
    #aaa 2px,
    #999 3px,
    #999 5px
  );
  border-radius: 0;
   border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
}


::-webkit-scrollbar-thumb:hover {
/* 主要用于制作hover形式的标签页(tab)切换 */
   background: repeating-linear-gradient(
.hover-tab-mode {
    to bottom,
   position: relative;
    #bbb 0px,
   transition: none;
    #bbb 2px,
    #aaa 3px,
    #aaa 5px
   );
}
}
 
.hover-tab-mode .hover-remote {
::-webkit-scrollbar-button {
   transition: inherit;
   background-color: #ddd;
   position: static;
   border: 1px solid #aaa;
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  width: 14px;
  height: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 6px;
}
}


::-webkit-scrollbar-button:vertical:decrement {
/* 闪烁效果 */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='5,3 8,7 2,7' fill='%23666'/%3E%3C/svg%3E");
.hover-change.flash:hover .hover-change-before {
   margin-left: -9999px;
}
}


::-webkit-scrollbar-button:vertical:increment {
.hover-change:hover > .hover-change-before,
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='5,7 8,3 2,3' fill='%23666'/%3E%3C/svg%3E");
.hover-remote > .hover-remote-target,
.hover-change:hover > a > .hover-change-before,
.hover-remote > a > .hover-remote-target {
  opacity: 0;
}
}


::-webkit-scrollbar-button:horizontal:decrement {
.hover-change:hover > .hover-change-after,
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='3,5 7,2 7,8' fill='%23666'/%3E%3C/svg%3E");
.hover-remote:hover > .hover-remote-target,
}
.hover-change:hover > a > .hover-change-after,
 
.hover-remote:hover > a > .hover-remote-target {
::-webkit-scrollbar-button:horizontal:increment {
  opacity: 1;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpolygon points='7,5 3,2 3,8' fill='%23666'/%3E%3C/svg%3E");
   margin-left: initial;
}
}


/* 滚动条拐角 */
/* 基类 */
::-webkit-scrollbar-corner {
[class*='hovers-'] {
   background-color: #eee;
  display: inline-block;
   border: 1px solid #ccc;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transform: perspective(1px) translateZ(0);
  vertical-align: middle;
   transition-duration: 0.25s;
   transition-property: all;
}
}


/* 引用块样式 - 更精致的复古科幻风格 */
/* 旋转放大 */
blockquote {
.hovers-rotate-shrink {
   border-left: 3px solid var(--crt-glow-color);
   transition-duration: 0.5s;
  margin: 1.2em 0;
   transform: rotate(0) scale(0.75);
  padding: 0.8em 1.2em;
  background: rgba(240, 240, 240, 0.5);
  position: relative;
   font-family: var(--body-font);
  box-shadow:
    inset 0 0 15px rgba(0, 255, 100, 0.03),
    1px 1px 3px rgba(0, 0, 0, 0.05);
  border-radius: 0 3px 3px 0;
}
}
 
.hovers-rotate-shrink:hover {
blockquote::before {
   transform: rotate(360deg) scale(1);
   content: """;
  position: absolute;
  top: 0;
  left: 10px;
  font-size: 2em;
  color: rgba(0, 0, 0, 0.1);
  font-family: serif;
}
}


blockquote p:first-child {
.hovers-rotate-shrink-reverse {
   margin-top: 0;
   transition-duration: 0.5s;
  transform: rotate(360deg) scale(0.75);
}
}


blockquote p:last-child {
.hovers-rotate-shrink-reverse:hover {
   margin-bottom: 0;
   transform: rotate(0) scale(1);
}
}


/* 引用源 */
/* 旋转 */
cite {
.hovers-rotate,
  display: block;
.hovers-rotate-reverse:hover {
   margin-top: 0.5em;
   transition-duration: 0.5s;
   color: #666;
   transform: rotate(0);
  font-size: 0.9em;
  font-style: italic;
}
 
cite::before {
  content: "— ";
}
}


/* 按钮样式 - 更精致的复古科幻风格 */
.hovers-rotate-reverse,
.collapseButton, button, .mw-ui-button, input[type="button"], input[type="submit"] {
.hovers-rotate:hover {
  font-family: var(--UI-font);
   transition-duration: 0.5s;
  font-size: calc(var(--base-font-size) * 0.85);
   transform: rotate(360deg);
  padding: 6px 12px;
  border: 2px solid #666;
  border-bottom: 4px solid #444;
  border-right: 4px solid #444;
  border-radius: 0;
  background: linear-gradient(to bottom, #eee, #ddd);
  color: #333;
  text-transform: uppercase;
  cursor: pointer;
   transition: all 0.15s ease;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   margin: 2px 4px;
  position: relative;
  text-align: center;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
}


/* 按钮悬停效果 */
/* 正常 => 浅 */
.collapseButton:hover, button:hover, .mw-ui-button:hover, input[type="button"]:hover, input[type="submit"]:hover {
.hovers-fade-deep,
  background: linear-gradient(to bottom, #f5f5f5, #eee);
.hovers-fade,
  border-color: #777;
.hovers-fade-shallow {
  border-bottom-color: #555;
   opacity: 1;
   border-right-color: #555;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}
}
 
.hovers-fade-deep:hover,
/* 按钮点击效果 */
.hovers-fade-deep.active {
.collapseButton:active, button:active, .mw-ui-button:active, input[type="button"]:active, input[type="submit"]:active {
   opacity: 0.35;
   background: linear-gradient(to bottom, #ccc, #ddd);
  border: 2px solid #444;
  border-top: 4px solid #666;
  border-left: 4px solid #666;
  transform: translateY(1px);
  text-shadow: none;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}
}
 
.hovers-fade:hover,
/* 按钮装饰效果 */
.hovers-fade.active {
.collapseButton::after, button::after, .mw-ui-button::after, input[type="button"]::after, input[type="submit"]::after {
   opacity: 0.5;
   content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: 8px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
  pointer-events: none;
  border-radius: 0;
}
}
 
.hovers-fade-shallow:hover,
.navbox .collapseButton {
.hovers-fade-shallow.active {
   width: 6em;
   opacity: 0.75;
}
}


/* 主按钮样式 - 重要操作 */
/* 浅 => 正常 */
.mw-ui-button.mw-ui-primary, button.primary, input[type="submit"].primary {
.hovers-bloom-deep {
   background: linear-gradient(to bottom, #6af, #39f);
   opacity: 0.35;
  border-color: #27e;
  border-bottom-color: #05c;
  border-right-color: #05c;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
}
 
.hovers-bloom {
.mw-ui-button.mw-ui-primary:hover, button.primary:hover, input[type="submit"].primary:hover {
   opacity: 0.5;
   background: linear-gradient(to bottom, #7bf, #49f);
  border-color: #38f;
  border-bottom-color: #16d;
  border-right-color: #16d;
}
}
 
.hovers-bloom-shallow {
/* 继续22222.txt中断部分的CSS */
   opacity: 0.75;
 
.mw-ui-button.mw-ui-primary:active, button.primary:active, input[type="submit"].primary:active {
   background: linear-gradient(to bottom, #28e, #39f);
  border: 2px solid #05c;
  border-top: 4px solid #16d;
  border-left: 4px solid #16d;
  transform: translateY(1px);
  text-shadow: none;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
}
}


/* 导航容器 - 更精致的复古科幻风格 */
.hovers-bloom-deep:hover,
.navbox {
.hovers-bloom-deep.active,
  background-color: rgba(255, 255, 255, 0.95);
.hovers-bloom:hover,
  border: 1px solid var(--custom-navbox-top);
.hovers-bloom.active,
  border-radius: 3px;
.hovers-bloom-shallow:hover,
  color: #222;
.hovers-bloom-shallow.active {
  margin: 1.5em 0;
   opacity: 1;
  padding: 4px;
  font-family: var(--small-font);
  font-size: var(--small-font-size);
  box-shadow:  
    var(--box-depth),
    inset 0 0 20px rgba(0, 255, 100, 0.02);
   position: relative;
  overflow: hidden;
}
}


/* 导航标题 */
/* 正常 => 大 */
.navbox-title {
.hovers-grow-deep,
  background: linear-gradient(to bottom, #f8f9fa, var(--custom-navbox-top));
.hovers-grow,
  border: 1px solid var(--custom-navbox-top);
.hovers-grow-shallow {
  border-radius: 2px;
   transform: scale(1);
  color: #222;
  padding: 8px 12px;
  font-family: var(--title-font);
  font-weight: normal;
   text-align: center;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
  position: relative;
}
}
 
.hovers-grow-deep:hover,
/* 导航组 */
.hovers-grow-deep.active {
.navbox-group {
   transform: scale(1.5);
  background-color: var(--custom-navbox-middle);
  border: 1px solid var(--custom-navbox-top);
  color: #444;
  font-weight: normal;
  padding: 6px 10px;
  text-align: right;
  white-space: nowrap;
  letter-spacing: 0.03em;
   border-right: 2px solid rgba(0, 0, 0, 0.1);
}
}
 
.hovers-grow:hover,
/* 导航列表 */
.hovers-grow.active {
.navbox-list {
   transform: scale(1.25);
   background-color: var(--custom-navbox-thru);
  border: 1px solid var(--custom-navbox-middle);
  padding: 6px 10px;
  text-align: left;
  line-height: 1.5;
}
}
 
.hovers-grow-shallow:hover,
/* 导航行悬停效果 */
.hovers-grow-shallow.active {
.navbox tr:hover td.navbox-list {
   transform: scale(1.1);
   background-color: rgba(0, 255, 100, 0.05);
}
}


/* 导航装饰 */
/* 正常 => 小 */
.navbox::before {
.hovers-shrink-deep:hover,
  content: "";
.hovers-shrink-deep.active,
  position: absolute;
.hovers-shrink:hover,
  top: 0;
.hovers-shrink.active,
  left: 0;
.hovers-shrink-shallow:hover,
  width: 100%;
.hovers-shrink-shallow.active {
  height: 1px;
   transform: scale(1);
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
   );
}
}
 
.hovers-shrink-deep {
/* 提示框和消息样式 - 像素化科幻风格 */
   transform: scale(0.5);
.notice {
  position: relative;
  margin: 1.5em 0;
  padding: 1em 1em 1em 4em;
  border-radius: 3px;
  border-left: 4px solid transparent;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-family: var(--small-font);
  animation: micro-flicker 2s infinite alternate ease-in-out;
}
}
 
.hovers-shrink {
.notice::before {
   transform: scale(0.75);
  font-family: var(--UI-font);
  position: absolute;
  left: 1em;
  top: 50%;
   transform: translateY(-50%);
  font-size: 1.8em;
  opacity: 0.8;
}
}
 
.hovers-shrink-shallow {
/* 成功消息 */
   transform: scale(0.9);
.notice-success {
   background-color: rgba(230, 250, 230, 0.4);
  border-color: #6c6;
}
}


.notice-success::before {
/* 左右抖动 */
   content: "✓";
@keyframes shake-flexible {
   color: #6c6;
   25% {
}
    transform: translateX(-0.0625em);
   }


/* 错误消息 */
  50% {
.notice-error {
    transform: translateX(0.0625em);
  background-color: rgba(255, 230, 230, 0.4);
   }
   border-color: #c66;
}


.notice-error::before {
  75% {
  content: "✗";
    transform: translateX(-0.0625em);
   color: #c66;
   }
}
}


/* 警告消息 */
.hovers-shake-flexible:hover,
.notice-warning {
.hovers-shake-flexible.active {
   background-color: rgba(255, 240, 230, 0.4);
   animation: shake-flexible 0.5s ease-out;
  border-color: #f93;
}
}


.notice-warning::before {
@keyframes shake {
   content: "⚠";
   25% {
   color: #f93;
    transform: translateX(-8px);
}
   }


/* 信息消息 */
  50% {
.notice-info {
    transform: translateX(8px);
  background-color: rgba(220, 237, 255, 0.4);
   }
   border-color: #69c;
}


.notice-info::before {
  75% {
  content: "ℹ";
    transform: translateX(-8px);
   color: #69c;
   }
}
}


/* 表单元素 - 复古科幻风格 */
.hovers-shake:hover,
input[type="text"],
.hovers-shake.active {
input[type="password"],
   animation: shake 0.5s ease-out;
input[type="email"],
input[type="number"],
input[type="search"],
textarea,
select {
  font-family: var(--pixel-font-12);
  font-size: calc(var(--base-font-size) * 0.9);
  color: #333;
  background-color: rgba(240, 245, 250, 0.95);
  border: 2px solid #aaa;
  border-radius: 0;
  padding: 6px 10px;
  margin: 4px 0;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.7);
   transition: all 0.2s ease;
}
}


/* 输入元素悬停状态 */
/* 上下抖动 */
input[type="text"]:hover,
@keyframes bounce-flexible {
input[type="password"]:hover,
   25% {
input[type="email"]:hover,
    transform: translateY(-0.0625em);
input[type="number"]:hover,
  }
input[type="search"]:hover,
textarea:hover,
select:hover {
   border-color: #999;
  background-color: rgba(245, 248, 250, 0.98);
}


/* 输入元素焦点状态 */
  50% {
input[type="text"]:focus,
    transform: translateY(0.0625em);
input[type="password"]:focus,
   }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: rgba(0, 150, 255, 0.6);
  box-shadow:  
    inset 0 1px 3px rgba(0, 0, 0, 0.05),
    0 0 8px rgba(0, 150, 255, 0.3);
   background-color: #fff;
}


/* 文本区域 */
  75% {
textarea {
    transform: translateY(-0.0625em);
  resize: vertical;
   }
  min-height: 80px;
   line-height: 1.5;
}
}


/* 复选框和单选按钮 - 复古科幻风格 */
.hovers-bounce-flexible:hover,
input[type="checkbox"],
.hovers-bounce-flexible.active {
input[type="radio"] {
   animation: bounce-flexible 0.5s ease-out;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 3px 5px 3px 0;
  vertical-align: middle;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
   border: 1px solid #999;
  background-color: rgba(240, 245, 250, 0.9);
  transition: all 0.2s ease;
}
}


input[type="checkbox"] {
@keyframes bounce {
   border-radius: 2px;
   25% {
}
    transform: translateY(-8px);
  }


input[type="radio"] {
  50% {
  border-radius: 50%;
    transform: translateY(8px);
}
  }


/* 复选框和单选按钮悬停状态 */
  75% {
input[type="checkbox"]:hover,
    transform: translateY(-8px);
input[type="radio"]:hover {
   }
  border-color: #666;
   background-color: rgba(245, 248, 250, 0.95);
}
}


/* 复选框和单选按钮选中状态 */
.hovers-bounce:hover,
input[type="checkbox"]:checked,
.hovers-bounce.active {
input[type="radio"]:checked {
   position: relative;
   border-color: #0078d7;
   left: 0;
   background-color: rgba(0, 120, 215, 0.1);
  animation: bounce 0.5s ease-out;
}
}


/* 复选框选中状态图标 */
/* 绕顶端中点抖动 */
input[type="checkbox"]:checked::after {
@keyframes swing {
   content: "";
   20% {
  position: absolute;
    transform: rotate3d(0, 0, 1, 10deg);
  left: 4px;
   }
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #0078d7;
  border-width: 0 2px 2px 0;
   transform: rotate(45deg);
}


/* 单选按钮选中状态图标 */
  40% {
input[type="radio"]:checked::after {
    transform: rotate3d(0, 0, 1, -10deg);
  content: "";
   }
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
   background-color: #0078d7;
}


/* 标签样式 */
  60% {
label {
    transform: rotate3d(0, 0, 1, 5deg);
  font-family: var(--pixel-font-12);
   }
  font-size: calc(var(--base-font-size) * 0.9);
   margin: 0 10px 0 2px;
  vertical-align: middle;
  cursor: pointer;
}


/* 分页导航 - 复古科幻风格 */
  80% {
.pagination {
    transform: rotate3d(0, 0, 1, -5deg);
  display: flex;
   }
  justify-content: center;
  align-items: center;
  margin: 2em 0;
  font-family: var(--UI-font);
   font-size: calc(var(--base-font-size) * 0.85);
}


.pagination a,
  to {
.pagination span {
    transform: rotate3d(0, 0, 1, 0deg);
  display: inline-flex;
   }
  justify-content: center;
  align-items: center;
  min-width: 32px;
  height: 32px;
  margin: 0 3px;
  padding: 0 10px;
  text-align: center;
  line-height: 1;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: rgba(240, 245, 250, 0.8);
   color: #444;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
}


/* 分页导航悬停效果 */
.hovers-swing {
.pagination a:hover {
   transform-origin: top center;
  border-color: #999;
  background-color: rgba(0, 150, 255, 0.1);
  color: var(--link-color-active);
   transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
}
 
.hovers-swing:hover,
/* 当前页面 */
.hovers-swing.active {
.pagination .current {
   animation: swing 0.75s ease-out;
  border-color: #666;
  background-color: rgba(30, 30, 30, 0.8);
  color: #fff;
  font-weight: normal;
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
}


/* 下拉菜单 - 复古科幻风格 */
/* 正常 => 大 */
.dropdown {
@keyframes pulse-grow {
   position: relative;
   to {
  display: inline-block;
    transform: scale(1.1);
  font-family: var(--UI-font);
   }
   font-size: calc(var(--base-font-size) * 0.9);
}
}


.dropdown-toggle {
.hovers-pulse-grow:hover,
  display: inline-flex;
.hovers-pulse-grow.active {
  align-items: center;
   animation: pulse-grow 0.5s linear infinite alternate;
  padding: 6px 12px;
  background-color: rgba(240, 245, 250, 0.9);
   border: 1px solid #ccc;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}
}


.dropdown-toggle::after {
/* 正常 => 小 */
   content: "▼";
@keyframes pulse-shrink {
  font-size: 0.7em;
   to {
  margin-left: 8px;
    transform: scale(0.9);
   transition: transform 0.2s ease;
   }
}
}


.dropdown-toggle:hover {
.hovers-pulse-shrink:hover,
   background-color: rgba(245, 248, 250, 0.95);
.hovers-pulse-shrink.active {
  border-color: #999;
   animation: pulse-shrink 0.5s linear infinite alternate;
}
}


.dropdown-toggle:hover::after {
/* 正常 => 小 */
   transform: translateY(2px);
@keyframes push {
   50% {
    transform: scale(0.8);
  }
}
}


.dropdown-menu {
.hovers-push:hover,
  position: absolute;
.hovers-push.active {
  top: 100%;
   animation: push 0.3s linear;
  left: 0;
  z-index: 1000;
  display: none;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  background-color: rgba(250, 252, 255, 0.95);
   border: 1px solid #ccc;
  border-radius: 0;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
}


.dropdown-menu.show {
/* 正常 => 大 */
  display: block;
@keyframes pop {
  animation: dropdown-fade 0.2s ease-in-out;
   50% {
}
     transform: scale(1.2);
 
@keyframes dropdown-fade {
   from {
    opacity: 0;
     transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
   }
   }
}
}


.dropdown-item {
.hovers-pop:hover,
  display: block;
.hovers-pop.active {
  padding: 6px 15px;
   animation: pop 0.3s linear;
  clear: both;
  text-decoration: none;
  color: #333;
  white-space: nowrap;
   transition: all 0.15s ease;
  position: relative;
}
}


.dropdown-item:hover {
/* 正常 => 大 => 正常 => 大 */
   background-color: rgba(0, 150, 255, 0.1);
.hovers-bounce-in:hover,
   color: var(--link-color-active);
.hovers-bounce-in.active {
  padding-left: 18px;
   transform: scale(1.2);
   transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
}


.dropdown-divider {
/* 正常 => 小 => 正常 => 小 */
   height: 1px;
.hovers-bounce-out:hover,
   margin: 6px 0;
.hovers-bounce-out.active {
   background-color: #eee;
   transform: scale(0.8);
   transition-duration: 0.5s;
   transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
}


/* 终端窗口 - 复古科幻风格 */
/* 倾斜 */
.terminal {
.hovers-tilt:hover,
  background-color: var(--terminal-bg);
.hovers-tilt.active {
  color: var(--console-text-color);
   transition-duration: 0.3s;
  font-family: var(--pixel-font-12);
   transform: rotate(4deg);
  padding: 15px;
  margin: 1.5em 0;
   border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.3);
   box-shadow:  
    inset 0 0 15px rgba(0, 0, 0, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}
}


/* 终端窗口标题栏 */
/* 倾斜 + 放大 */
.terminal::before {
.hovers-grow-rotate:hover,
  content: "TERMINAL";
.hovers-grow-rotate.active {
  display: block;
   transition-duration: 0.3s;
  position: absolute;
   transform: scale(1.1) rotate(4deg);
  top: 0;
  left: 0;
  width: 100%;
  padding: 4px 10px;
  background: linear-gradient(to bottom, #444, #333);
   color: #ddd;
  font-size: 0.8em;
   text-align: center;
  border-bottom: 1px solid #222;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
}


/* 终端内容 */
/* 升起 */
.terminal-content {
.hovers-float:hover,
  margin-top: 25px;
.hovers-float.active {
   line-height: 1.4;
   transition-duration: 0.3s;
   overflow-x: auto;
   transition-timing-function: ease-out;
   white-space: pre-wrap;
   transform: translateY(-8px);
}
}


/* 终端命令提示符 */
/* 下沉 */
.terminal-prompt {
.hovers-sink:hover,
   color: #0f0;
.hovers-sink.active {
   margin-right: 5px;
   transition-duration: 0.3s;
   transition-timing-function: ease-out;
  transform: translateY(8px);
}
}


/* 终端命令行 */
/* 飘浮 */
.terminal-line {
@keyframes bob {
  margin: 5px 0;
  word-break: break-all;
}
 
/* 终端光标闪烁 */
.terminal-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background-color: var(--console-indicator-color);
  vertical-align: middle;
  animation: console-blink 1s infinite;
}
 
/* 加载指示器 - 复古科幻风格 */
.loading {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 20px;
  margin: 1em auto;
  text-align: center;
}
 
.loading div {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 3px;
  background-color: rgba(0, 200, 100, 0.8);
  border-radius: 0;
  animation: loading 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
 
.loading div:nth-child(1) {
  animation-delay: -0.24s;
}
 
.loading div:nth-child(2) {
  animation-delay: -0.12s;
}
 
.loading div:nth-child(3) {
  animation-delay: 0;
}
 
@keyframes loading {
   0% {
   0% {
     transform: scaleY(1);
     transform: translateY(-10px);
    background-color: rgba(0, 200, 100, 0.8);
   }
   }
   50% {
   50% {
     transform: scaleY(2);
     transform: translateY(-5px);
    background-color: rgba(0, 255, 100, 0.8);
   }
   }
   100% {
   100% {
     transform: scaleY(1);
     transform: translateY(-10px);
    background-color: rgba(0, 200, 100, 0.8);
   }
   }
}
}
 
@keyframes bob-float {
/* 工具提示 - 复古科幻风格 */
   100% {
.tooltip {
    transform: translateY(-10px);
   position: relative;
   }
  display: inline-block;
   cursor: help;
}
}


.tooltip .tooltip-text {
.hovers-bob:hover,
  visibility: hidden;
.hovers-bob.active {
  width: 200px;
   animation-name: bob-float, bob;
  background-color: rgba(20, 20, 20, 0.9);
   animation-duration: 0.3s, 1.5s;
   color: #fff;
   animation-delay: 0s, 0.3s;
  text-align: center;
   animation-timing-function: ease-out, ease-in-out;
   border-radius: 0;
   animation-iteration-count: 1, infinite;
   padding: 8px 12px;
   animation-fill-mode: forwards;
  position: absolute;
   animation-direction: normal, alternate;
  z-index: 1001;
  bottom: 125%;
  left: 50%;
   margin-left: -100px;
  font-family: var(--small-font);
   font-size: var(--small-font-size);
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
   transform: translateY(10px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid #444;
  text-shadow: none;
}
}


/* 工具提示箭头 */
/* 悬挂 */
.tooltip .tooltip-text::after {
@keyframes hang {
   content: "";
   0% {
  position: absolute;
    transform: translateY(10px);
   top: 100%;
   }
   left: 50%;
   50% {
  margin-left: -5px;
    transform: translateY(5px);
   border-width: 5px;
   }
   border-style: solid;
   100% {
  border-color: rgba(20, 20, 20, 0.9) transparent transparent transparent;
    transform: translateY(10px);
  }
}
}
 
@keyframes hang-sink {
/* 显示工具提示 */
   100% {
.tooltip:hover .tooltip-text {
    transform: translateY(10px);
   visibility: visible;
  }
  opacity: 1;
  transform: translateY(0);
}
}


/* 徽章 - 复古科幻风格 */
.hovers-hang:hover,
.badge {
.hovers-hang.active {
   display: inline-block;
   animation-name: hang-sink, hang;
   padding: 2px 6px;
   animation-duration: 0.3s, 1.5s;
   font-size: 0.8em;
   animation-delay: 0s, 0.3s;
   font-family: var(--UI-font);
   animation-timing-function: ease-out, ease-in-out;
  line-height: 1;
   animation-iteration-count: 1, infinite;
  text-align: center;
   animation-fill-mode: forwards;
  white-space: nowrap;
   animation-direction: normal, alternate;
  vertical-align: middle;
   background-color: #777;
  color: #fff;
  border-radius: 0;
  margin: 0 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
   text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}
}


.badge-primary {
/* 非对称 */
   background-color: #0078d7;
.hovers-skew:hover,
.hovers-skew.active {
   transform: skew(-10deg);
}
}


.badge-success {
/* 非对称-左 */
   background-color: #5cb85c;
.hovers-skew-forward {
   transform-origin: 0 100%;
}
}
 
.hovers-skew-forward:hover,
.badge-info {
.hovers-skew-forward.active {
   background-color: #5bc0de;
   transform: skew(-10deg);
}
}


.badge-warning {
/* 非对称-右 */
   background-color: #f0ad4e;
.hovers-skew-backward {
   transform-origin: 0 100%;
}
}
 
.hovers-skew-backward:hover,
.badge-danger {
.hovers-skew-backward.active {
   background-color: #d9534f;
   transform: skew(10deg);
}
}


/* 进度条 - 复古科幻风格 */
/* 垂直抖动 */
.progress {
@keyframes wobble-vertical {
   height: 20px;
   16.65% {
  margin: 1em 0;
    transform: translateY(8px);
  background-color: rgba(220, 225, 230, 0.8);
   }
   border-radius: 0;
   33.3% {
   box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateY(-6px);
   overflow: hidden;
   }
  border: 1px solid #ccc;
   49.95% {
   position: relative;
    transform: translateY(4px);
}
   }
 
  66.6% {
.progress-bar {
     transform: translateY(-2px);
  height: 100%;
   }
   background: repeating-linear-gradient(
   83.25% {
    45deg,
     transform: translateY(1px);
    rgba(0, 200, 100, 0.8),
     rgba(0, 200, 100, 0.8) 10px,
    rgba(0, 220, 110, 0.9) 10px,
    rgba(0, 220, 110, 0.9) 20px
  );
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   transition: width 0.6s ease;
  position: relative;
  animation: progress-animation 2s linear infinite;
}
 
@keyframes progress-animation {
   0% {
     background-position: 0 0;
   }
   }
   100% {
   100% {
     background-position: 40px 0;
     transform: translateY(0);
   }
   }
}
}


.progress-text {
.hovers-wobble-vertical:hover,
  position: absolute;
.hovers-wobble-vertical.active {
  top: 0;
   animation-name: wobble-vertical;
   left: 0;
   animation-duration: 1s;
  width: 100%;
   animation-timing-function: ease-in-out;
  height: 100%;
   animation-iteration-count: 1;
  display: flex;
}
   align-items: center;
   justify-content: center;
  color: #333;
  font-family: var(--UI-font);
   font-size: 0.8em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}


/* 标签页 - 复古科幻风格 */
/* 水平抖动 */
.tabs {
@keyframes wobble-horizontal {
   margin: 1.5em 0;
  16.65% {
   border-radius: 0;
    transform: translateX(8px);
   background-color: rgba(255, 255, 255, 0.9);
  }
   border: 1px solid #ccc;
   33.3% {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transform: translateX(-6px);
   }
  49.95% {
    transform: translateX(4px);
   }
  66.6% {
    transform: translateX(-2px);
   }
  83.25% {
    transform: translateX(1px);
   }
  100% {
    transform: translateX(0);
  }
}
}
 
.hovers-wobble-horizontal:hover,
.tabs-nav {
.hovers-wobble-horizontal.active {
   display: flex;
   animation-name: wobble-horizontal;
   list-style: none;
   animation-duration: 1s;
   padding: 0;
   animation-timing-function: ease-in-out;
   margin: 0;
   animation-iteration-count: 1;
  background-color: rgba(240, 245, 250, 0.8);
  border-bottom: 1px solid #ccc;
}
}


.tabs-nav li {
/* 右下弹回 */
   margin: 0;
@keyframes wobble-to-bottom-right {
  16.65% {
    transform: translate(8px, 8px);
  }
  33.3% {
    transform: translate(-6px, -6px);
  }
  49.95% {
    transform: translate(4px, 4px);
  }
  66.6% {
    transform: translate(-2px, -2px);
  }
  83.25% {
    transform: translate(1px, 1px);
  }
   100% {
    transform: translate(0, 0);
  }
}
}


.tabs-nav a {
.hovers-wobble-to-bottom-right:hover,
  display: block;
.hovers-wobble-to-bottom-right.active {
  padding: 8px 15px;
   animation-name: wobble-to-bottom-right;
  text-decoration: none;
   animation-duration: 1s;
  color: #555;
   animation-timing-function: ease-in-out;
  border-right: 1px solid #ddd;
   animation-iteration-count: 1;
  font-family: var(--UI-font);
   font-size: calc(var(--base-font-size) * 0.9);
   transition: all 0.2s ease;
   background: linear-gradient(to bottom, #f5f5f5, #e5e5e5);
   border-bottom: 3px solid transparent;
}
}


.tabs-nav a:hover {
/* 右上弹回 */
   background: linear-gradient(to bottom, #fff, #f0f0f0);
@keyframes wobble-to-top-right {
   color: #333;
   16.65% {
   transform: none;
    transform: translate(8px, -8px)
   box-shadow: none;
   }
}
   33.3% {
 
    transform: translate(-6px, 6px);
.tabs-nav a.active {
   }
  background: #fff;
  49.95% {
   color: #333;
    transform: translate(4px, -4px);
   border-bottom: 3px solid var(--crt-glow-color);
   }
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1);
   66.6% {
}
    transform: translate(-2px, 2px);
 
   }
.tabs-content {
  83.25% {
  padding: 15px;
    transform: translate(1px, -1px);
   border-radius: 0 0 3px 3px;
  }
  100% {
    transform: translate(0);
   }
}
}


.tab-pane {
.hovers-wobble-to-top-right:hover,
   display: none;
.hovers-wobble-to-top-right.active {
   animation-name: wobble-to-top-right;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
}


.tab-pane.active {
/* 果冻 */
  display: block;
@keyframes wobble-top {
  animation: fade-in 0.3s ease-in-out;
   16.65% {
}
     transform: skew(-12deg);
 
@keyframes fade-in {
   from {
     opacity: 0;
   }
   }
   to {
   33.3% {
     opacity: 1;
     transform: skew(10deg);
  }
  49.95% {
    transform: skew(-6deg);
  }
  66.6% {
    transform: skew(4deg);
  }
  83.25% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(0);
   }
   }
}
}


/* 卡片 - 复古科幻风格 */
/* 赘肉 */
.card {
.hovers-wobble-top {
  background-color: rgba(255, 255, 255, 0.95);
   transform-origin: 0 100%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  margin: 1em 0;
   box-shadow:  
    var(--box-depth),
    inset 0 0 10px rgba(0, 255, 100, 0.02);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
}
 
.hovers-wobble-top:hover,
.card:hover {
.hovers-wobble-top.active {
   transform: translateY(-3px);
   animation-name: wobble-top;
   box-shadow:  
   animation-duration: 1s;
    0 5px 15px rgba(0, 0, 0, 0.1),
  animation-timing-function: ease-in-out;
    inset 0 0 10px rgba(0, 255, 100, 0.04);
  animation-iteration-count: 1;
}
}


.card::before {
@keyframes wobble-bottom {
  content: "";
  16.65% {
   position: absolute;
    transform: skew(-12deg);
   top: 0;
   }
   left: 0;
  33.3% {
   width: 100%;
    transform: skew(10deg);
   height: 2px;
   }
   background: linear-gradient(to right, transparent, var(--crt-glow-color), transparent);
  49.95% {
    transform: skew(-6deg);
   }
  66.6% {
    transform: skew(4deg);
   }
  83.25% {
    transform: skew(-2deg);
   }
   100% {
    transform: skew(0);
  }
}
}


.card-header {
.hovers-wobble-bottom {
  background: linear-gradient(to bottom, #f8f9fa, #e8eaec);
   transform-origin: 100% 0;
  padding: 10px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--title-font);
  font-size: calc(var(--base-font-size) * 1.1);
  color: #333;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
  position: relative;
}
}
 
.hovers-wobble-bottom:hover,
.card-body {
.hovers-wobble-bottom.active {
   padding: 15px;
   animation-name: wobble-bottom;
   font-family: var(--body-font);
   animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
}


.card-footer {
/* 颤动 */
   background-color: rgba(245, 248, 250, 0.7);
@keyframes wobble-skew {
  padding: 10px 15px;
   16.65% {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
    transform: skew(-12deg);
}
  }
 
  33.3% {
/* 侧边栏 - 复古科幻风格 */
    transform: skew(10deg);
.sidebar {
   }
  width: var(--sidebar-width);
   49.95% {
   max-height: var(--sidebar-max-height);
    transform: skew(-6deg);
   margin-top: var(--sidebar-top-offset);
   }
   background:
  66.6% {
    linear-gradient(135deg, rgba(0, 255, 100, 0.05) 0%, transparent 100%),
     transform: skew(4deg);
     linear-gradient(to bottom, rgba(220, 230, 240, 0.9), rgba(190, 210, 225, 0.95));
   }
  border: 1px solid rgba(0, 0, 0, 0.2);
   83.25% {
   border-radius: 3px;
     transform: skew(-2deg);
   box-shadow:
   }
     var(--box-depth),
   100% {
    inset 0 0 20px rgba(0, 200, 255, 0.07);
    transform: skew(0);
   overflow-y: auto;
   }
   position: sticky;
  top: var(--sidebar-top-offset);
   transition: all 0.3s ease;
}
}
 
.hovers-wobble-skew:hover,
.sidebar-header {
.hovers-wobble-skew.active {
  background: linear-gradient(to bottom, #445, #334);
   animation-name: wobble-skew;
  color: #fff;
   animation-duration: 1s;
  padding: 12px 15px;
   animation-timing-function: ease-in-out;
  font-family: var(--title-font);
   animation-iteration-count: 1;
   font-size: calc(var(--base-font-size) * 1.1);
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
   text-align: center;
   border-bottom: 1px solid #223;
  letter-spacing: 0.05em;
  position: relative;
}
}


.sidebar-header::after {
/* 振动 */
   content: "";
@keyframes buzz {
  position: absolute;
   50% {
  bottom: 0;
    transform: translateX(3px) rotate(2deg);
   left: 0;
   }
   width: 100%;
   100% {
  height: 1px;
    transform: translateX(-3px) rotate(-2deg);
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
  }
}
}


.sidebar-section {
.hovers-buzz:hover,
   padding: 10px 15px;
.hovers-buzz.active {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   animation-name: buzz;
   animation-duration: 0.15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
}


.sidebar-section:last-child {
/* 振出 */
   border-bottom: none;
@keyframes buzz-out {
}
   10% {
 
    transform: translateX(3px) rotate(2deg);
.sidebar-title {
  }
  font-family: var(--UI-font);
  20% {
  font-size: calc(var(--base-font-size) * 0.95);
    transform: translateX(-3px) rotate(-2deg);
   color: #333;
   }
   margin: 0 0 8px 0;
   30% {
  padding-bottom: 5px;
    transform: translateX(3px) rotate(2deg);
  border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
  }
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  40% {
}
    transform: translateX(-3px) rotate(-2deg);
 
   }
.sidebar-list {
   50% {
  list-style: none;
    transform: translateX(2px) rotate(1deg);
   margin: 0;
   }
   padding: 0;
  60% {
}
    transform: translateX(-2px) rotate(-1deg);
 
   }
.sidebar-list li {
   70% {
  margin: 5px 0;
    transform: translateX(2px) rotate(1deg);
   padding: 0;
   }
}
   80% {
 
    transform: translateX(-2px) rotate(-1deg);
.sidebar-list a {
   }
  display: block;
  90% {
  padding: 5px 8px;
    transform: translateX(1px) rotate(0);
  color: var(--link-color);
   }
   text-decoration: none;
   100% {
   font-size: calc(var(--base-font-size) * 0.9);
    transform: translateX(-1px) rotate(0);
   transition: all 0.2s ease;
   }
   text-shadow: 0 0 2px rgba(0, 100, 255, 0.1);
   border-left: 2px solid transparent;
}
 
.sidebar-list a:hover {
  background-color: rgba(0, 150, 255, 0.1);
   color: var(--link-color-active);
   text-shadow: 0 0 5px rgba(0, 150, 255, 0.3);
  transform: translateX(2px);
   border-left: 2px solid var(--crt-glow-color);
}
}


.sidebar-list a.active {
.hovers-buzz-out:hover,
   background-color: rgba(0, 200, 100, 0.1);
.hovers-buzz-out.active {
   color: #008851;
   animation-name: buzz-out;
   border-left: 2px solid #008851;
   animation-duration: 0.75s;
   font-weight: normal;
   animation-timing-function: linear;
   animation-iteration-count: 1;
}
}


/* 弹窗对话框 - 复古科幻风格 */
/* 右移 */
.modal {
.hovers-forward:hover,
  position: fixed;
.hovers-forward.active {
  top: 0;
   transform: translateX(8px);
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
   align-items: center;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
}


.modal.show {
/* 左移 */
   opacity: 1;
.hovers-backward:hover,
  visibility: visible;
.hovers-backward.active {
   transform: translateX(-8px);
}
}


.modal-dialog {
/* 自由移动 */
  width: 100%;
.hovers-top,
  max-width: 500px;
.hovers-left,
  margin: 1.75rem;
.hovers-bottom,
  background-color: rgba(245, 250, 255, 0.95);
.hovers-right {
  border: 1px solid rgba(0, 0, 0, 0.2);
   transition: all 0.5s;
  border-radius: 0;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.3),
    inset 0 0 30px rgba(0, 255, 100, 0.05);
  transform: translateY(-50px);
   transition: transform 0.3s ease;
  position: relative;
  overflow: hidden;
}
}


.modal.show .modal-dialog {
.hovers-top:hover,
   transform: translateY(0);
.hovers-top.active {
   transform: translateY(-0.0625em);
}
}


.modal-header {
.hovers-left:hover,
  display: flex;
.hovers-left.active {
  align-items: center;
   transform: translateX(-0.0625em);
   justify-content: space-between;
  padding: 12px 15px;
  border-bottom: 1px solid #e9ecef;
  background: linear-gradient(to bottom, #f8f9fa, #e8eaec);
}
}


.modal-title {
.hovers-bottom:hover,
  margin: 0;
.hovers-bottom.active {
  font-family: var(--title-font);
   transform: translateY(0.0625em);
  font-size: calc(var(--base-font-size) * 1.1);
  color: #333;
   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), var(--crt-text-shadow);
}
}


.modal-close {
.hovers-right:hover,
  padding: 0;
.hovers-right.active {
  background-color: transparent;
   transform: translateX(0.0625em);
  border: 0;
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
   opacity: 0.5;
  cursor: pointer;
}
}


.modal-close:hover {
/* 滤镜 */
  opacity: 0.75;
.hovers-blur,
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
.hovers-blur-reverse,
.hovers-brightness,
.hovers-brightness-reverse,
.hovers-contrast,
.hovers-contrast-reverse,
.hovers-grayscale,
.hovers-grayscale-reverse,
.hovers-invert,
.hovers-invert-reverse,
.hovers-saturate,
.hovers-saturate-reverse,
.hovers-sepia,
.hovers-sepia-reverse,
.hovers-hue-rotate,
.hovers-hue-rotate-reverse {
  transition-duration: 0.75s;
}
}


.modal-body {
.hovers-blur:hover,
  padding: 15px;
.hovers-blur.active,
  font-family: var(--body-font);
.hovers-brightness:hover,
}
.hovers-brightness.active,
 
.hovers-contrast:hover,
.modal-footer {
.hovers-contrast.active,
  display: flex;
.hovers-grayscale:hover,
  align-items: center;
.hovers-grayscale.active,
  justify-content: flex-end;
.hovers-invert:hover,
  padding: 12px 15px;
.hovers-invert.active,
  border-top: 1px solid #e9ecef;
.hovers-saturate:hover,
  background-color: rgba(245, 248, 250, 0.7);
.hovers-saturate.active,
.hovers-sepia:hover,
.hovers-sepia.active,
.hovers-hue-rotate:hover,
.hovers-hue-rotate.active {
  filter: initial;
}
}


.modal-footer > button {
.hovers-blur {
   margin-left: 5px;
   filter: blur(5px);
}
}


/* 自定义滚动条 */
.hovers-blur-reverse:hover,
.custom-scrollbar {
.hovers-blur-reverse.active {
   scrollbar-width: thin;
   filter: blur(5px);
  scrollbar-color: #999 #f5f5f5;
}
}


.custom-scrollbar::-webkit-scrollbar {
.hovers-brightness {
   width: 8px;
   filter: brightness(50%);
  height: 8px;
}
}


.custom-scrollbar::-webkit-scrollbar-track {
.hovers-brightness-reverse:hover,
   background: rgba(0, 0, 0, 0.03);
.hovers-brightness-reverse.active {
  border-radius: 0;
   filter: brightness(50%);
}
}


.custom-scrollbar::-webkit-scrollbar-thumb {
.hovers-contrast {
   background: repeating-linear-gradient(
   filter: contrast(50%);
    to bottom,
    #aaa 0px,
    #aaa 2px,
    #999 3px,
    #999 5px
  );
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
}


/* 打字机效果文本 */
.hovers-contrast-reverse:hover,
.typewriter {
.hovers-contrast-reverse.active {
  overflow: hidden;
   filter: contrast(50%);
  white-space: nowrap;
  border-right: 2px solid var(--console-text-color);
   animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
  display: inline-block;
}
}


@keyframes typing {
.hovers-grayscale {
   from { width: 0 }
   filter: grayscale(100%);
  to { width: 100% }
}
}


@keyframes blink-caret {
.hovers-grayscale-reverse:hover,
  from, to { border-color: transparent }
.hovers-grayscale-reverse.active {
   50% { border-color: var(--console-text-color) }
   filter: grayscale(100%);
}
}


/* 折叠面板 - 复古科幻风格 */
.hovers-invert {
.accordion {
   filter: invert(100%);
   margin: 1.5em 0;
  border: 1px solid #ccc;
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
}


.accordion-item {
.hovers-invert-reverse:hover,
   border-bottom: 1px solid #ddd;
.hovers-invert-reverse.active {
   filter: invert(100%);
}
}


.accordion-item:last-child {
.hovers-saturate {
   border-bottom: none;
   filter: saturate(200%);
}
}


.accordion-header {
.hovers-saturate-reverse:hover,
   padding: 0;
.hovers-saturate-reverse.active {
  margin: 0;
   filter: saturate(200%);
}
}


.accordion-button {
.hovers-sepia {
   display: block;
   filter: sepia(100%);
  width: 100%;
  padding: 12px 15px;
  background: linear-gradient(to bottom, #f8f9fa, #e8eaec);
  color: #333;
  text-align: left;
  border: none;
  cursor: pointer;
  font-family: var(--title-font);
  font-size: calc(var(--base-font-size) * 1);
  font-weight: normal;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  transition: all 0.3s ease;
}
}


.accordion-button::after {
.hovers-sepia-reverse:hover,
   content: "▼";
.hovers-sepia-reverse.acitve {
  position: absolute;
   filter: sepia(100%);
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7em;
  transition: transform 0.3s ease;
}
}


.accordion-button.collapsed::after {
.hovers-hue-rotate {
   transform: translateY(-50%) rotate(-90deg);
   filter: hue-rotate(180deg);
}
}


.accordion-button:hover {
.hovers-hue-rotate-reverse:hover,
   background: linear-gradient(to bottom, #fff, #f0f0f0);
.hovers-hue-rotate-reverse.active {
   filter: hue-rotate(180deg);
}
}


.accordion-body {
/* 背景滑动 */
  padding: 15px;
.hovers-sweep-to-right,
  display: none;
.hovers-sweep-to-left,
  font-family: var(--body-font);
.hovers-sweep-to-bottom,
}
.hovers-sweep-to-top,
 
.hovers-radial-out,
.accordion-body.show {
.hovers-radial-in {
  display: block;
   position: relative;
}
   transition-duration: 0.3s;
 
   transition-timing-function: ease-out;
/* 文章卡片 - 复古科幻风格 */
.article-card {
  display: flex;
  flex-direction: column;
  margin: 1.5em 0;
  background-color: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0;
   box-shadow:  
    var(--box-depth),
    inset 0 0 10px rgba(0, 255, 100, 0.02);
   overflow: hidden;
   overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}
}


.article-card::before {
.hovers-sweep-to-right:before,
   content: "";
.hovers-sweep-to-left:before,
.hovers-sweep-to-bottom:before,
.hovers-sweep-to-top:before,
.hovers-radial-out:before,
.hovers-radial-in:before {
   content: '';
   position: absolute;
   position: absolute;
  z-index: 10;
   top: 0;
   top: 0;
   left: 0;
   left: 0;
   width: 100%;
   right: 0;
   height: 2px;
   bottom: 0;
   background: linear-gradient(to right, transparent, var(--crt-glow-color), transparent);
   background: inherit;
  transform: scaleX(0);
  transition: inherit;
}
}
 
.hovers-sweep-to-bottom:before,
.article-card:hover {
.hovers-sweep-to-top:before {
   transform: translateY(-3px);
   transform: scaleY(0);
  box-shadow:
    0 5px 15px rgba(0, 0, 0, 0.1),
    inset 0 0 10px rgba(0, 255, 100, 0.04);
}
}
 
.hovers-radial-out:before,
.article-header {
.hovers-radial-in:before {
   padding: 15px;
   border-radius: 50%;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   transform: scale(0);
}
}
 
.hovers-radial-in:before {
.article-title {
   transform: scale(2);
  margin: 0 0 10px 0;
  font-family: var(--title-font);
   font-size: calc(var(--base-font-size) * 1.3);
  color: #333;
  text-shadow: var(--crt-text-shadow);
}
}


.article-meta {
.hovers-sweep-to-right:before {
  display: flex;
   transform-origin: 0 50%;
  align-items: center;
  font-family: var(--small-font);
   font-size: var(--small-font-size);
  color: #777;
}
}
 
.hovers-sweep-to-left:before {
.article-author {
   transform-origin: 100% 50%;
   margin-right: 15px;
}
}
 
.hovers-sweep-to-bottom:before {
.article-date {
   transform-origin: 50% 0;
   margin-right: 15px;
}
}
 
.hovers-sweep-to-top:before {
.article-thumbnail {
   transform-origin: 50% 100%;
   width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
}
 
.hovers-radial-out:hover:before,
.article-content {
.hovers-radial-out.active:before {
  padding: 15px;
   transform: scale(2);
  flex: 1;
   font-family: var(--body-font);
}
}
 
.hovers-radial-in:hover:before,
.article-footer {
.hovers-radial-in.active:before {
  display: flex;
   transform: scale(0);
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: rgba(245, 248, 250, 0.7);
   border-top: 1px solid rgba(0, 0, 0, 0.1);
}
}


.article-tags {
.hovers-sweep-to-right .hovers-content.center,
   display: flex;
.hovers-sweep-to-left .hovers-content.center,
   flex-wrap: wrap;
.hovers-sweep-to-bottom .hovers-content.center,
   gap: 5px;
.hovers-sweep-to-top .hovers-content.center,
.hovers-radial-out .hovers-content.center,
.hovers-radial-in .hovers-content.center {
   display: flex;
   align-items: center;
  justify-content: center;
   word-break: break-all;
}
}


.article-tag {
.hovers-sweep-to-right:hover:before,
  display: inline-block;
.hovers-sweep-to-left:hover:before,
  padding: 2px 6px;
.hovers-sweep-to-bottom:hover:before,
  font-size: 0.8em;
.hovers-sweep-to-top:hover:before,
  font-family: var(--UI-font);
.hovers-sweep-to-right.active:before,
  background-color: rgba(0, 150, 255, 0.1);
.hovers-sweep-to-left:hover:before,
  color: var(--link-color);
.hovers-sweep-to-bottom:hover:before,
  border-radius: 0;
.hovers-sweep-to-top:hover:before {
   border: 1px solid rgba(0, 150, 255, 0.2);
   transform: scaleX(1);
  transition: all 0.2s ease;
}
}


.article-tag:hover {
.hovers-sweep-to-right .hovers-content,
  background-color: rgba(0, 150, 255, 0.2);
.hovers-sweep-to-left .hovers-content,
   color: var(--link-color-active);
.hovers-sweep-to-bottom .hovers-content,
   transform: translateY(-1px);
.hovers-sweep-to-top .hovers-content,
.hovers-radial-out .hovers-content,
.hovers-radial-in .hovers-content {
  width: 100%;
   height: 100%;
  position: absolute;
  transition-property: all;
  transition-duration: inherit;
  top: 0;
   left: 0;
  z-index: 11;
}
}


/* 网格布局 - 复古科幻风格 */
.hovers-sweep-to-right .hovers-content {
.grid {
   left: initial;
   display: grid;
   right: 100%;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
  gap: 20px;
.hovers-sweep-to-right:hover .hovers-content,
   margin: 1.5em 0;
.hovers-sweep-to-right.active .hovers-content {
   right: 0;
}
}


.grid-item {
.hovers-sweep-to-left .hovers-content {
  background-color: rgba(255, 255, 255, 0.95);
   left: 100%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: 15px;
  box-shadow: var(--box-depth);
  transition: all 0.3s ease;
  position: relative;
   overflow: hidden;
}
}
 
.hovers-sweep-to-left:hover .hovers-content,
.grid-item::before {
.hovers-sweep-to-left.active .hovers-content {
  content: "";
  position: absolute;
  top: 0;
   left: 0;
   left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--crt-glow-color), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
}


.grid-item:hover {
.hovers-sweep-to-bottom .hovers-content {
   transform: translateY(-3px);
   top: initial;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
   bottom: 100%;
}
}
 
.hovers-sweep-to-bottom:hover .hovers-content,
.grid-item:hover::before {
.hovers-sweep-to-bottom.active .hovers-content {
   opacity: 1;
   bottom: 0;
}
}


/* 按钮组 - 复古科幻风格 */
.hovers-sweep-to-top .hovers-content {
.btn-group {
   top: 100%;
   display: inline-flex;
  vertical-align: middle;
}
}
 
.hovers-sweep-to-top:hover .hovers-content,
.btn-group button {
.hovers-sweep-to-top.active .hovers-content {
   margin: 0;
   top: 0;
  border-radius: 0;
}
}


.btn-group button:not(:first-child) {
.hovers-radial-out .hovers-content,
   border-left: none;
.hovers-radial-in:hover .hovers-content,
.hovers-radial-in.active .hovers-content {
   opacity: 0;
}
}


.btn-group button:first-child {
.hovers-radial-in .hovers-content,
  border-top-left-radius: 0;
.hovers-radial-out:hover .hovers-content,
  border-bottom-left-radius: 0;
.hovers-radial-out.active .hovers-content {
  opacity: 1;
}
}


.btn-group button:last-child {
/* 默认em */
   border-top-right-radius: 0;
.hovers-border,
   border-bottom-right-radius: 0;
.hovers-trim,
.hovers-ripple-out,
.hovers-ripple-in,
.hovers-outline-out,
.hovers-outline-in,
.hovers-reveal {
   font-size: 160px;
   line-height: 16px;
}
}


/* 通知横幅 - 复古科幻风格 */
/* 内边框滑出 */
.banner {
.hovers-border,
  display: flex;
.hovers-trim {
  align-items: center;
  margin: 1.5em 0;
  padding: 12px 15px;
  background-color: rgba(245, 248, 250, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0;
  box-shadow: var(--box-depth);
   position: relative;
   position: relative;
   overflow: hidden;
   top: 0;
  left: 0;
  transition: all 0.3s;
}
}


.banner::before {
.hovers-border:before {
   content: "";
   content: '';
  width: 100%;
  height: 100%;
   position: absolute;
   position: absolute;
   top: 0;
   top: 0;
   left: 0;
   left: 0;
   width: 100%;
   box-sizing: border-box;
   height: 2px;
   transition: inherit;
   background: linear-gradient(to right, transparent, var(--crt-glow-color), transparent);
   border-width: calc(0.0625em * 0.6);
  border-color: inherit;
  border-style: solid;
  border-radius: inherit;
  opacity: 0;
}
}


.banner-icon {
.hovers-border:hover:before,
  margin-right: 15px;
.hovers-border.active:before {
   font-size: 1.5em;
   opacity: 1;
  color: #777;
}
}


.banner-content {
/* 带边距内边框 */
   flex: 1;
.hovers-trim:before {
   font-family: var(--body-font);
  content: '';
  position: absolute;
  top: calc(0.0625em * 0.4);
  left: calc(0.0625em * 0.4);
  bottom: calc(0.0625em * 0.4);
  right: calc(0.0625em * 0.4);
   transition: inherit;
   border-width: calc(0.0625em * 0.6);
  border-color: inherit;
  border-style: solid;
  opacity: 0;
  border-radius: inherit;
}
}


.banner-title {
.hovers-trim:hover:before,
  font-family: var(--title-font);
.hovers-trim.active:before {
  font-size: calc(var(--base-font-size) * 1.1);
   opacity: 1;
  margin: 0 0 5px 0;
   color: #333;
}
}


.banner-text {
/* 边框飞出与飞入 */
  margin: 0;
.hovers-ripple-out,
  color: #555;
.hovers-ripple-in,
}
.hovers-outline-out,
 
.hovers-outline-in,
.banner-close {
.hovers-reveal {
   margin-left: 15px;
   animation-duration: 0.7s;
   cursor: pointer;
   animation-timing-function: ease-out;
  color: #777;
   transition: all 0.3s;
  font-size: 1.2em;
   transition: all 0.2s ease;
}
}


.banner-close:hover {
.hovers-ripple-out:before,
  color: #333;
.hovers-ripple-in:before,
  transform: scale(1.1);
.hovers-outline-out:before,
}
.hovers-outline-in:before,
 
.hovers-reveal:before {
/* 主题变换按钮 - 复古科幻风格 */
   content: '';
.theme-switch {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  background-color: rgba(20, 20, 20, 0.8);
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 8px 12px;
  font-family: var(--UI-font);
  font-size: calc(var(--base-font-size) * 0.8);
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
}
 
.theme-switch-icon {
  font-size: 1.2em;
}
 
.theme-switch:hover {
  background-color: rgba(30, 30, 30, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
 
/* 页脚 - 复古科幻风格 */
.footer {
  margin-top: 3rem;
  padding: 2rem 0;
  background-color: rgba(240, 245, 250, 0.9);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  font-family: var(--small-font);
  font-size: var(--small-font-size);
  text-align: center;
  position: relative;
}
 
.footer::before {
   content: "";
   position: absolute;
   position: absolute;
   top: 0;
   top: 0;
  right: 0;
  bottom: 0;
   left: 0;
   left: 0;
   width: 100%;
   animation: inherit;
   height: 1px;
   transition: inherit;
   background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
   border-width: calc(0.0625em * 0.6);
  border-color: inherit;
  border-style: solid;
  border-radius: inherit;
}
.hovers-ripple-out:before {
  opacity: 0;
}
}
 
.hovers-ripple-in:before {
.footer-links {
   top: calc(-0.0625em * 1.2);
   display: flex;
   right: calc(-0.0625em * 1.2);
   justify-content: center;
   bottom: calc(-0.0625em * 1.2);
   flex-wrap: wrap;
   left: calc(-0.0625em * 1.2);
   gap: 20px;
   opacity: 0;
   margin-bottom: 1rem;
}
}
 
.hovers-outline-out:before {
.footer-link {
   opacity: 0;
  color: var(--link-color);
  text-decoration: none;
   transition: all 0.2s ease;
}
}
 
.hovers-outline-out:before {
.footer-link:hover {
   top: calc(-0.0625em * 1.6);
   color: var(--link-color-active);
  right: calc(-0.0625em * 1.6);
   text-shadow: 0 0 3px rgba(0, 150, 255, 0.3);
  bottom: calc(-0.0625em * 1.6);
   left: calc(-0.0625em * 1.6);
  opacity: 0;
}
}
 
.hovers-reveal:before {
.footer-copyright {
   border-width: 0;
   color: #777;
   opacity: 0;
   margin: 0;
}
}


/* 媒体查询 - 响应式布局 */
@keyframes ripple-out {
@media screen and (max-width: 768px) {
   50% {
   :root {
     opacity: 1;
     --base-font-size: 14px;
    --small-font-size: 12px;
   }
   }
 
 
   body {
   100% {
     padding: 1rem;
     top: calc(-0.0625em * 1.2);
    margin: 0.5rem;
     right: calc(-0.0625em * 1.2);
  }
     bottom: calc(-0.0625em * 1.2);
 
     left: calc(-0.0625em * 1.2);
  .sidebar {
     opacity: 0;
    width: 100%;
     max-height: none;
    margin-top: 1rem;
     position: static;
  }
 
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
 
  .notaninfobox {
     float: none;
    width: 100%;
    margin: 1em 0;
  }
 
  .modal-dialog {
    margin: 1rem;
     max-width: 100%;
   }
   }
}
.hovers-ripple-out:hover:before,
.hovers-ripple-out.active:before {
  animation-name: ripple-out;
}
}


@media screen and (min-width: 1440px) {
@keyframes ripple-in {
   :root {
   50% {
     --base-font-size: 16px;
     opacity: 1;
    --small-font-size: 14px;
   }
   }
 
 
   body {
   100% {
     width: 80%;
     top: 0;
     max-width: 1400px;
    right: 0;
    bottom: 0;
    left: 0;
     opacity: 0;
   }
   }
}
}
 
.hovers-ripple-in:hover:before,
/* 打印样式优化 */
.hovers-ripple-in.active:before {
@media print {
   animation-name: ripple-in;
  :root {
    --crt-effects-display: none;
  }
 
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
 
  body::before,
  body::after,
  .crt-primary-scanline,
  .crt-secondary-scanline,
  .crt-fast-scanline,
  .crt-scanline-shadow,
  .crt-curve-effect,
  .crt-monitor-frame,
  .crt-reflection,
  .theme-switch {
    display: none !important;
   }
 
  * {
    text-shadow: none !important;
    box-shadow: none !important;
    animation: none !important;
    border-color: #ddd !important;
  }
 
  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
 
  a::before {
    display: none !important;
  }
 
  pre, code {
    border: 1px solid #ddd;
    background: #f8f8f8 !important;
  }
 
  .notaninfobox,
  .card,
  .article-card,
  .sidebar,
  .banner,
  .modal {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}
}


/* 为JS操作预留的类 */
.hovers-outline-out:hover:before,
.hidden {
.hovers-outline-in:hover:before,
   display: none !important;
.hovers-outline-out.active:before,
.hovers-outline-in:hover:before {
  top: calc(-0.0625em * 0.8);
  right: calc(-0.0625em * 0.8);
  bottom: calc(-0.0625em * 0.8);
  left: calc(-0.0625em * 0.8);
   opacity: 1;
}
}


.visible {
.hovers-reveal:hover:before,
   display: block !important;
.hovers-reveal.active:before {
   transform: translateY(0);
  border-width: calc(0.0625em * 0.4);
  opacity: 1;
}
}


.invisible {
/* 圆角化 */
   visibility: hidden !important;
.hovers-round-corners {
   overflow: hidden;
}
}
.hovers-round-corners:hover,
.hovers-round-corners.active {
  border-radius: 0.0625em;
}
/* 重叠：翻转切换 */


.transparent {
.hover-turn {
   opacity: 0 !important;
   position: relative;
  transform: translateZ(1px);
}
}


.no-transitions {
.hover-turn-before,
   transition: none !important;
.hover-turn-after {
   position: absolute;
  top: 0;
  left: 0;
}
}


/* 页面加载后自动添加CRT效果元素和功能性JS */
@keyframes hover-turn {
document.addEventListener('DOMContentLoaded', function() {
   from {
  // 创建一个隐藏/显示CRT效果的按钮
     transform: rotateY(-90deg);
  var toggleButton = document.createElement('button');
   }
  toggleButton.innerHTML = '切换CRT效果';
 
  toggleButton.className = 'theme-switch';
   50% {
  toggleButton.innerHTML = '<span class="theme-switch-icon">📺</span> CRT效果';
     transform: scale(1.2);
 
   }
  // 添加事件监听
  toggleButton.addEventListener('click', function() {
    var root = document.documentElement;
    var currentDisplay = getComputedStyle(root).getPropertyValue('--crt-effects-display').trim();
   
    if (currentDisplay === 'block' || currentDisplay === '') {
      root.style.setProperty('--crt-effects-display', 'none');
      toggleButton.innerHTML = '<span class="theme-switch-icon">📺</span> 显示CRT';
    } else {
      root.style.setProperty('--crt-effects-display', 'block');
      toggleButton.innerHTML = '<span class="theme-switch-icon">📺</span> 隐藏CRT';
    }
  });
 
  document.body.appendChild(toggleButton);
 
  // 添加CRT效果元素
  var body = document.querySelector('body');
 
  // CRT曲面效果
  var crtCurveEffect = document.createElement('div');
  crtCurveEffect.className = 'crt-curve-effect';
  body.appendChild(crtCurveEffect);
 
  // CRT显示器边框
  var crtMonitorFrame = document.createElement('div');
  crtMonitorFrame.className = 'crt-monitor-frame';
  body.appendChild(crtMonitorFrame);
 
  // CRT反光效果
   var crtReflection = document.createElement('div');
  crtReflection.className = 'crt-reflection';
  body.appendChild(crtReflection);
 
  // 主扫描线
  var primaryScanline = document.createElement('div');
  primaryScanline.className = 'crt-primary-scanline';
  body.appendChild(primaryScanline);
 
  // 副扫描线
  var secondaryScanline = document.createElement('div');
  secondaryScanline.className = 'crt-secondary-scanline';
  body.appendChild(secondaryScanline);
 
  // 快速扫描线
  var fastScanline = document.createElement('div');
  fastScanline.className = 'crt-fast-scanline';
  body.appendChild(fastScanline);
 
  // 扫描线阴影
  var scanlineShadow = document.createElement('div');
  scanlineShadow.className = 'crt-scanline-shadow';
  body.appendChild(scanlineShadow);
 
  // 标签页功能
  var tabLinks = document.querySelectorAll('.tabs-nav a');
 
  tabLinks.forEach(function(link) {
     link.addEventListener('click', function(e) {
      e.preventDefault();
     
      // 移除所有活动类
      tabLinks.forEach(function(l) {
        l.classList.remove('active');
      });
     
      // 添加活动类到当前链接
      this.classList.add('active');
     
      // 获取目标面板ID
      var targetId = this.getAttribute('href').substring(1);
     
      // 隐藏所有面板
      var tabPanes = document.querySelectorAll('.tab-pane');
      tabPanes.forEach(function(pane) {
        pane.classList.remove('active');
      });
     
      // 显示目标面板
      document.getElementById(targetId).classList.add('active');
    });
   });
 
   // 折叠面板功能
  var accordionButtons = document.querySelectorAll('.accordion-button');
 
  accordionButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      this.classList.toggle('collapsed');
     
      var target = this.getAttribute('data-target');
      var body = document.querySelector(target);
     
      if (body.classList.contains('show')) {
        body.classList.remove('show');
      } else {
        body.classList.add('show');
      }
    });
  });
 
  // 实现打字机效果
  var typewriterElements = document.querySelectorAll('.typewriter');
 
  typewriterElements.forEach(function(element) {
    var text = element.textContent;
    element.innerHTML = "";
    element.style.width = "0";
   
    var i = 0;
    var speed = 50; // 打字速度，毫秒每字符
   
    function typeWriter() {
      if (i < text.length) {
        element.innerHTML += text.charAt(i);
        i++;
        setTimeout(typeWriter, speed);
      }
     }
   
    // 文本可见后开始打字效果
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          typeWriter();
          observer.unobserve(element);
        }
      });
    });
   
    observer.observe(element);
   });
});
/* 本段内容来自萌娘百科 https://zh.moegirl.org.cn/MediaWiki:Gadget-site-styles.css 感谢贡献！*/
/* 版权协定：知识共享 署名-非商业性使用-相同方式共享 3.0 */


.heimu,
  to {
.heimu rt{
     transform: rotateY(0);
     --heimu-color:#252525;
  }
    --heimu-text-color:#fff;
    --heimu-link-color:#add8e6;
    --heimu-visited-link-color:#c5cae9;
    --heimu-new-link-color:#fcc;
    --heimu-new-visited-link-color:#ef9a9a;
    --heimu-extiw-visited-link-color:#d1c4e9;
 
    background-color:var(--heimu-color);
}
}


.heimu,
.hover-turn:not(:hover) .hover-turn-before,
.heimu a,
.hover-turn:hover .hover-turn-after {
a .heimu,
  animation: hover-turn 0.5s;
a.new .heimu,
span.heimu a:visited,
span.heimu a.new,
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited,
span.heimu a.mw-disambig,
span.heimu a.mw-redirect{
    transition:color 0.13s linear;
    color:var(--heimu-color);
    text-shadow:none;
}
}


span.heimu:hover,
.hover-turn:hover .hover-turn-before,
span.heimu:active{
.hover-turn:not(:hover) .hover-turn-after {
    color:var(--heimu-text-color);
opacity: 0;
}
}
/* [[Category:在模板名字空间下的CSS页面]] */


span.heimu:hover a,
/* 信息框样式 - Windows XP风格 */
a:hover span.heimu{
.infobox,
     color:var(--heimu-link-color);
.notaninfobox {
     position: relative;
    clear: right;
    float: right;
    margin: 0 0 1em 1em;
    width: 350px;
    font-size: 90%;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    padding: 0;
    overflow: auto;
    z-index: 1;
    box-shadow: var(--window-shadow);
    border-radius: 0;
}
}


span.heimu:hover a:visited,
@media all and (max-width: 511px) {
a:visited:hover span.heimu{
    .notaninfobox {
    color:var(--heimu-visited-link-color);
        float: none;
        margin-left: 0;
        width: auto;
    }
}
}


span.heimu:hover a.new,
.infobox tr:not(:first-child) td {
a.new:hover span.heimu{
     border-bottom: 1px solid #ababab;
     color:var(--heimu-new-link-color);
}
}


span.heimu a.new:hover:visited,
@media all and (max-width: 337px) {
a.new:hover:visited span.heimu{
    .notaninfobox {
    color:var(--heimu-new-visited-link-color);
        margin-left: -16px;
        margin-right: -16px;
        border-left: none;
        border-right: none;
    }
}
}


span.heimu:hover a.extiw:visited,
.notaninfobox > .infobox-title,
a.extiw:visited:hover span.heimu{
.infobox th {
     color:var(--heimu-extiw-visited-link-color);
    position: relative;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
     color: white;
    font-weight: bold;
    text-align: center;
    font-size: 120%;
    padding: 5px;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
}
}
[color-mode="dark"] .heimu,
 
[color-mode="dark"] .heimu rt{
.notaninfobox > .infobox-title::after,
     --heimu-color:#5e6272;
.infobox th::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
     text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}


/*
.infobox-imagearea {
该文档为一个hover特效库，由一些常用的效果以及GitHub上的开源项目“Hover.css”的一些部分构成。
    text-align: center;
请使用hovers在页面中进行载入。
    padding: 8px;
*/
    background-color: white;
}


/* hover状态切换 */
.infobox-imagearea > div:not(:first-child) {
.hover-change,
    padding-top: 1em;
.hover-remote {
}
  position: relative;
 
  display: inline-block;
/* Horizontally centre animated images */
  transition: opacity 0.5s linear;
.infobox-imagearea .animated {
    display: inline-flex;
    align-items: center;
}
}


.hover-change-before,
.notaninfobox .infobox-rows {
.hover-change-after,
    display: grid;
.hover-remote-target {
    grid-template-columns: max-content 1fr;
  transition: inherit;
    gap: 1px;
    background-color: white;
}
}


.hover-change-after,
.infobox .plainlinks a {
.hover-remote-target {
    color: rgb(var(--link-color)) !important;
  opacity: 0;
    text-decoration: underline;
  position: absolute;
  top: 0;
  left: 0;
}
}
.hover-remote-target {
 
  left: 100%;
.infobox .plainlinks a:visited {
    color: rgb(var(--visited-link-color)) !important;
}
}


.hover-change-after[style^='right:'],
.notaninfobox .infobox-rows .infobox-row {
.hover-change-after[style*=' right:'],
    display: contents;
.hover-remote-after[style^='right:'],
.hover-remote-after[style*=' right:'] {
  left: initial;
}
}


.hover-change-after[style^='bottom:'],
.notaninfobox .infobox-row .infobox-row-label,
.hover-change-after[style*=' bottom:'],
.notaninfobox .infobox-row .infobox-row-field {
.hover-remote-after[style^='bottom:'],
    padding: 4px 8px;
.hover-remote-after[style*=' bottom:'] {
    border: 1px solid #ababab;
  top: initial;
}
}


.hover-change-after:hover,
.notaninfobox .infobox-row .infobox-row-label {
.hover-remote-target {
    font-weight: bold;
  opacity: 0;
    display: flex;
  margin-left: -9999px;
    align-items: center;
    background-color: #f0f0f0;
}
 
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label,
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field {
    background-color: #f9f9f9;
}
}


/* 主要用于制作hover形式的标签页(tab)切换 */
/* Community Updates - Windows XP风格 */
.hover-tab-mode {
.community-updates {
  position: relative;
    background: rgb(var(--xp-window-bg));
  transition: none;
    padding: 15px;
    border: 2px solid rgb(var(--xp-window-border));
    margin-top: 20px;
    box-shadow: var(--window-shadow);
    position: relative;
    border-radius: 0;
}
}
.hover-tab-mode .hover-remote {
 
  transition: inherit;
.community-updates::before {
  position: static;
    content: "Community Updates";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
}
}


/* 闪烁效果 */
.community-updates ul {
.hover-change.flash:hover .hover-change-before {
    margin-top: 30px;
  margin-left: -9999px;
}
}


.hover-change:hover > .hover-change-before,
.community-updates ul li {
.hover-remote > .hover-remote-target,
    list-style: none;
.hover-change:hover > a > .hover-change-before,
    padding: 10px;
.hover-remote > a > .hover-remote-target {
    background: white;
  opacity: 0;
    margin: 5px 0;
    border: 1px solid #ababab;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
}


.hover-change:hover > .hover-change-after,
.community-updates ul li a {
.hover-remote:hover > .hover-remote-target,
    color: rgb(var(--link-color));
.hover-change:hover > a > .hover-change-after,
    text-decoration: none;
.hover-remote:hover > a > .hover-remote-target {
    font-weight: bold;
  opacity: 1;
  margin-left: initial;
}
}


/* 基类 */
/* Infoboxes with tabber */
[class*='hovers-'] {
.tabber-container-infobox .tabber .tabbertab,
  display: inline-block;
.tabber-container-infobox ul.tabbernav li a,
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
.tabber-container-infobox ul.tabbernav li.tabberactive a {
  transform: perspective(1px) translateZ(0);
    background: none;
  vertical-align: middle;
    border: none;
  transition-duration: 0.25s;
}
  transition-property: all;
 
.tabber-container-infobox .tabber .tabbertab {
    padding: 0;
}
}


/* 旋转放大 */
.tabber-container-infobox ul.tabbernav {
.hovers-rotate-shrink {
    font: inherit;
  transition-duration: 0.5s;
    font-size: 100%;
  transform: rotate(0) scale(0.75);
    border-bottom: 1px solid #ababab;
}
}
.hovers-rotate-shrink:hover {
 
  transform: rotate(360deg) scale(1);
.tabber-container-infobox ul.tabbernav li a:hover {
    color: rgb(var(--hover-link-color));
}
}


.hovers-rotate-shrink-reverse {
.tabber-container-infobox ul.tabbernav > li {
  transition-duration: 0.5s;
    margin-bottom: 5px;
  transform: rotate(360deg) scale(0.75);
    padding: 0;
}
}


.hovers-rotate-shrink-reverse:hover {
.announcement-content span {
  transform: rotate(0) scale(1);
    display: inline-block;
    white-space: nowrap;
    animation: marquee 15s linear infinite;
}
}


/* 旋转 */
@keyframes marquee {
.hovers-rotate,
    0% { transform: translate(100%, 0); }
.hovers-rotate-reverse:hover {
    100% { transform: translate(-100%, 0); }
  transition-duration: 0.5s;
  transform: rotate(0);
}
}


.hovers-rotate-reverse,
/* 主页头部样式 - Windows XP风格 */
.hovers-rotate:hover {
.mw-mainpage-header {
  transition-duration: 0.5s;
    background-color: rgb(var(--xp-window-bg));
  transform: rotate(360deg);
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    color: rgb(var(--xp-text));
    font-size: 1.5em;
    padding: 30px 20px 20px;
    text-align: center;
    position: relative;
    border-radius: 0;
}
}


/* 正常 => 浅 */
.mw-mainpage-header::before {
.hovers-fade-deep,
    content: "Welcome";
.hovers-fade,
    position: absolute;
.hovers-fade-shallow {
    top: 0;
  opacity: 1;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
}
}
.hovers-fade-deep:hover,
 
.hovers-fade-deep.active {
.mw-mainpage-header h1 {
  opacity: 0.35;
    font-size: 2.5em;
    margin-bottom: 10px;
    background: none;
    color: rgb(var(--xp-text));
    text-shadow: none;
}
}
.hovers-fade:hover,
 
.hovers-fade.active {
.mw-mainpage-header p {
  opacity: 0.5;
    font-size: 1.2em;
    margin: 5px 0;
}
}
.hovers-fade-shallow:hover,
 
.hovers-fade-shallow.active {
.tabber-container-infobox ul.tabbernav > li > a {
  opacity: 0.75;
    color: rgb(var(--link-color));
    padding: 5px 10px;
    display: block;
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}
}


/* 浅 => 正常 */
/* To prevent the tabs from jumping around when they become active or inactive */
.hovers-bloom-deep {
.tabber-container-infobox ul.tabbernav > li > a::before {
  opacity: 0.35;
    display: block;
    content: attr(alt);
    font-weight: bold;
    height: 0;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}
}
.hovers-bloom {
 
  opacity: 0.5;
.tabber-container-infobox ul.tabbernav > li.tabberactive {
    border: none;
}
}
.hovers-bloom-shallow {
 
  opacity: 0.75;
/* ModuleBox - Windows XP风格 */
.modulebox {
    border: 2px solid rgb(var(--xp-window-border));
    padding: 30px 10px 10px;
    margin: 10px 0;
    background-color: rgb(var(--xp-window-bg));
    position: relative;
    box-shadow: var(--window-shadow);
    border-radius: 0;
}
}


.hovers-bloom-deep:hover,
.modulebox::before {
.hovers-bloom-deep.active,
    content: "Module";
.hovers-bloom:hover,
    position: absolute;
.hovers-bloom.active,
    top: 0;
.hovers-bloom-shallow:hover,
    left: 0;
.hovers-bloom-shallow.active {
    right: 0;
  opacity: 1;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
}
}


/* 正常 => 大 */
.tabber-container-infobox ul.tabbernav > li.tabberactive > a {
.hovers-grow-deep,
    font-weight: bold;
.hovers-grow,
    color: rgb(var(--hover-link-color));
.hovers-grow-shallow {
    background: linear-gradient(to bottom, #ffffff, #f6f6f6);
  transform: scale(1);
    border-bottom: 1px solid #ffffff;
    position: relative;
    z-index: 1;
}
}
.hovers-grow-deep:hover,
 
.hovers-grow-deep.active {
.infobox-rows p {
  transform: scale(1.5);
    margin: 0;
}
}
.hovers-grow:hover,
 
.hovers-grow.active {
.infobox-rows dl + dl {
  transform: scale(1.25);
    margin-top: -0.4em;
}
}
.hovers-grow-shallow:hover,
 
.hovers-grow-shallow.active {
.infobox-rows dl:last-child {
  transform: scale(1.1);
    margin-bottom: 0.2em;
}
}


/* 正常 => 小 */
.infobox-footer {
.hovers-shrink-deep:hover,
    text-align: center;
.hovers-shrink-deep.active,
    padding: 5px;
.hovers-shrink:hover,
    background-color: #f0f0f0;
.hovers-shrink.active,
    border-top: 1px solid #ababab;
.hovers-shrink-shallow:hover,
.hovers-shrink-shallow.active {
  transform: scale(1);
}
}
.hovers-shrink-deep {
 
  transform: scale(0.5);
/* 导航框（查论编）- Windows XP风格 */
table.navbox {
    border: 2px solid rgb(var(--xp-window-border));
    clear: both;
    margin: 1em auto;
    padding: 0;
    text-align: center;
    width: 100%;
    background-color: rgb(var(--xp-window-bg));
    box-shadow: var(--window-shadow);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
}
}
.hovers-shrink {
 
  transform: scale(0.75);
table.navbox + table.navbox {
    margin-top: 5px;
}
}
.hovers-shrink-shallow {
 
  transform: scale(0.9);
.navbox-title,
.navbox-abovebelow,
table.navbox th {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
}
}


/* 左右抖动 */
.navbox-title::after,
@keyframes shake-flexible {
table.navbox th::after {
  25% {
    content: "×";
     transform: translateX(-0.0625em);
    position: absolute;
  }
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
     border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}


  50% {
.navbox-group {
     transform: translateX(0.0625em);
     background-color: #f0f0f0;
  }
    border: 1px solid #ababab;
    color: black;
    font-weight: bold;
    padding: 5px;
    text-align: right;
    white-space: nowrap;
}


  75% {
.navbox-list {
     transform: translateX(-0.0625em);
     background-color: white;
  }
    border: 1px solid #ababab;
    padding: 5px;
    text-align: left;
}
}


.hovers-shake-flexible:hover,
.navbox,
.hovers-shake-flexible.active {
.navbox-subgroup {
  animation: shake-flexible 0.5s ease-out;
    background-color: rgb(var(--xp-window-bg));
}
}


@keyframes shake {
.navbox-subgroup .navbox-title {
  25% {
    background-color: #c0d8f0;
     transform: translateX(-8px);
     color: black;
  }
    text-shadow: none;
}


  50% {
.navbox-subgroup .navbox-group,
     transform: translateX(8px);
.navbox-subgroup .navbox-abovebelow {
  }
     background-color: #e6f0f9;
}


  75% {
.navbox-even {
     transform: translateX(-8px);
     background-color: #f9f9f9;
  }
}
}


.hovers-shake:hover,
.navbox-odd {
.hovers-shake.active {
    background-color: white;
  animation: shake 0.5s ease-out;
}
}


/* 上下抖动 */
.collapseButton {
@keyframes bounce-flexible {
    float: right;
  25% {
    font-weight: 400;
     transform: translateY(-0.0625em);
    text-align: right;
  }
     width: auto;
}


  50% {
.navbox .collapseButton {
     transform: translateY(0.0625em);
     width: 6em;
  }
}


  75% {
.navbar {
     transform: translateY(-0.0625em);
     position: relative;
  }
    min-height: 23px !important;
    margin-bottom: 0px !important;
    border: 1px solid transparent;
}
}


.hovers-bounce-flexible:hover,
.navbox-title .Wikiplus-Edit-EveryWhereBtn {
.hovers-bounce-flexible.active {
    display: none;
  animation: bounce-flexible 0.5s ease-out;
}
}


@keyframes bounce {
@media only screen and (max-width:759px) {
  25% {
    .infotable {
     transform: translateY(-8px);
        width: 90%;
  }
        float: none;
        margin: 0 auto;
    }
   
    .navbox-title>div {
        display: none;
    }
   
    .navbox-group,
     .navbox-group >div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
    }
}


  50% {
/* 主页Windows XP风格布局 */
     transform: translateY(8px);
.main-page-banner {
  }
    position: relative;
    display: grid;
    grid-template-areas:
        "welcome welcome welcome"
        "discord faq join";
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 3%;
    margin-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
     background-color: rgb(var(--xp-window-bg));
    z-index: 1;
    border-radius: 0;
}


  75% {
/* 欢迎文本区域 - Windows XP样式 */
     transform: translateY(-8px);
.main-page-banner .welcome-text {
  }
    grid-area: welcome;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 30px 20px 20px;
    margin: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
     border-bottom: 1px solid rgb(var(--xp-window-border));
    border-radius: 0;
    z-index: 2;
    text-shadow: var(--text-shadow);
}
}


.hovers-bounce:hover,
/* 添加标题栏 */
.hovers-bounce.active {
.main-page-banner .welcome-text::before {
  position: relative;
    content: "Welcome";
  left: 0;
    position: absolute;
  animation: bounce 0.5s ease-out;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    text-shadow: var(--text-shadow);
    text-align: left;
    line-height: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 3;
}
}


/* 绕顶端中点抖动 */
/* 添加XP窗口控制按钮 */
@keyframes swing {
.main-page-banner .welcome-text::after {
  20% {
    content: "×";
     transform: rotate3d(0, 0, 1, 10deg);
    position: absolute;
  }
    top: 7px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
     border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 4;
}


  40% {
/* 添加最小化、最大化按钮 */
     transform: rotate3d(0, 0, 1, -10deg);
.main-page-banner .welcome-text .min-button,
  }
.main-page-banner .welcome-text .max-button {
     position: absolute;
    top: 7px;
    width: 16px;
    height: 16px;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: black;
    background-color: rgb(var(--light-gray-monochrome));
    cursor: pointer;
    z-index: 4;
}


  60% {
.main-page-banner .welcome-text .min-button {
     transform: rotate3d(0, 0, 1, 5deg);
     right: 45px;
  }
    content: "_";
    line-height: 13px;
}


  80% {
.main-page-banner .welcome-text .max-button {
     transform: rotate3d(0, 0, 1, -5deg);
     right: 25px;
  }
    content: "□";
}


  to {
.main-page-banner .welcome-text p {
     transform: rotate3d(0, 0, 1, 0deg);
     position: relative;
  }
    z-index: 2;
    margin: 0;
    font-size: 1.1em;
}
}


.hovers-swing {
/* 导航按钮 - Windows XP风格 */
  transform-origin: top center;
.main-page-banner .navigation-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 3%;
    grid-area: discord / discord / join / join;
    width: 100%;
    padding: 10px;
    background-color: rgb(var(--xp-window-bg));
}
}
.hovers-swing:hover,
 
.hovers-swing.active {
.main-page-banner .nav-button {
  animation: swing 0.75s ease-out;
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    border-radius: 3px;
    margin: 0 0 10px 0;
    transition: all 0.3s ease;
    height: min-content;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}
}


/* 正常 => 大 */
.main-page-banner .nav-button:hover {
@keyframes pulse-grow {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
  to {
     transform: translateY(-3px);
     transform: scale(1.1);
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3);
  }
}
}


.hovers-pulse-grow:hover,
.main-page-banner .nav-button:active {
.hovers-pulse-grow.active {
    background: linear-gradient(to bottom, #e0e0e0, #f0f0f0);
  animation: pulse-grow 0.5s linear infinite alternate;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}
}


/* 正常 => 小 */
.main-page-banner .nav-button a {
@keyframes pulse-shrink {
    display: block;
  to {
     padding: 8px 0;
     transform: scale(0.9);
    width: 100%;
  }
    text-align: center;
    color: black;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none !important;
    position: relative;
    z-index: 1;
}
}


.hovers-pulse-shrink:hover,
/* 响应式布局 */
.hovers-pulse-shrink.active {
@media (max-width: 767px) {
  animation: pulse-shrink 0.5s linear infinite alternate;
    .main-page-banner {
        grid-template-areas:  
            "welcome"
            "navigation";
        grid-template-columns: 1fr;
    }
   
    .main-page-banner .welcome-text {
        width: 100%;
        margin-bottom: 0;
        box-sizing: border-box;
    }
   
    .main-page-banner .navigation-links {
        grid-area: navigation;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
   
    .main-page-banner .nav-button {
        flex: 1;
        min-width: 30%;
        margin: 0 5px 10px;
    }
}
}


/* 正常 => 小 */
/* 公告容器 - Windows XP风格 */
@keyframes push {
.announcement-container {
  50% {
    background-color: rgb(var(--xp-window-bg));
     transform: scale(0.8);
    border: 2px solid rgb(var(--xp-window-border));
  }
     box-shadow: var(--window-shadow);
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    position: relative;
    border-radius: 0;
}
}


.hovers-push:hover,
.announcement-container .section-title {
.hovers-push.active {
    width: 100%;
  animation: push 0.3s linear;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-family: var(--title-font);
    font-size: 1.3rem;
    text-align: left;
    border-left: none;
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-shadow: var(--text-shadow);
    position: relative;
}
}


/* 正常 => 大 */
.announcement-container .section-title::after {
@keyframes pop {
    content: "×";
  50% {
    position: absolute;
     transform: scale(1.2);
    top: 7px;
  }
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
     border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}


.hovers-pop:hover,
.announcement-container .announcement-content {
.hovers-pop.active {
    background-color: white;
  animation: pop 0.3s linear;
    color: black;
    padding: 10px;
    width: 100%;
}
}


/* 正常 => 大 => 正常 => 大 */
.announcement-container .more-content {
.hovers-bounce-in:hover,
    width: 100%;
.hovers-bounce-in.active {
    border-top: 1px solid #ababab;
  transform: scale(1.2);
    padding: 5px;
  transition-duration: 0.5s;
    background-color: #f0f0f0;
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    text-align: right;
}
 
/* 最近页面容器 - Windows XP风格 */
.recent-pages-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1rem;
}
 
.recent-pages-container .page-section {
    flex-basis: 48%;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 1rem;
    display: grid;
    grid-template-areas: "title" "page" "more";
    grid-template-rows: auto 1fr auto;
    position: relative;
    border-radius: 0;
}
}


/* 正常 => 小 => 正常 => 小 */
.recent-pages-container .section-title {
.hovers-bounce-out:hover,
    grid-area: title;
.hovers-bounce-out.active {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
  transform: scale(0.8);
    color: white;
  transition-duration: 0.5s;
    padding: 5px 30px 5px 10px;
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-align: left;
    height: 25px;
    line-height: 25px;
    border-left: none;
}
}


/* 倾斜 */
.recent-pages-container .section-title::after {
.hovers-tilt:hover,
    content: "×";
.hovers-tilt.active {
    position: absolute;
  transition-duration: 0.3s;
    top: 5px;
  transform: rotate(4deg);
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}


/* 倾斜 + 放大 */
.recent-pages-container .page-list {
.hovers-grow-rotate:hover,
    grid-area: page;
.hovers-grow-rotate.active {
    background-color: white;
  transition-duration: 0.3s;
    padding: 10px;
  transform: scale(1.1) rotate(4deg);
    max-height: 200px;
    overflow-y: auto;
    border-bottom: 1px solid #ababab;
}
}


/* 升起 */
.recent-pages-container .page-list a {
.hovers-float:hover,
    display: block;
.hovers-float.active {
    padding: 3px 0;
  transition-duration: 0.3s;
    border-bottom: 1px solid #e0e0e0;
  transition-timing-function: ease-out;
    color: rgb(var(--link-color));
  transform: translateY(-8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
}


/* 下沉 */
.recent-pages-container .page-list a:last-child {
.hovers-sink:hover,
    border-bottom: none;
.hovers-sink.active {
}
  transition-duration: 0.3s;
 
  transition-timing-function: ease-out;
.recent-pages-container .see-more {
  transform: translateY(8px);
    grid-area: more;
    background-color: #f0f0f0;
    padding: 5px 10px;
    text-align: right;
}
}


/* 飘浮 */
.recent-pages-container .see-more a {
@keyframes bob {
     color: rgb(var(--link-color));
  0% {
     transform: translateY(-10px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(-10px);
  }
}
}
@keyframes bob-float {
 
  100% {
/* 特色内容容器 - Windows XP风格 */
     transform: translateY(-10px);
.featured-content-container .feature-content .featured-description {
  }
     font-style: italic;
    color: #444;
}
}


.hovers-bob:hover,
.featured-content-container .see-more {
.hovers-bob.active {
    grid-area: more;
  animation-name: bob-float, bob;
    background-color: #f0f0f0;
  animation-duration: 0.3s, 1.5s;
    padding: 5px 10px;
  animation-delay: 0s, 0.3s;
    text-align: right;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}
}


/* 悬挂 */
.featured-content-container .see-more a {
@keyframes hang {
     color: rgb(var(--link-color));
  0% {
     transform: translateY(10px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(10px);
  }
}
}
@keyframes hang-sink {
 
  100% {
/* 工具和资源容器 - Windows XP风格 */
     transform: translateY(10px);
.tools-and-resources {
  }
     margin-bottom: 2rem;
}
}


.hovers-hang:hover,
.tools-container {
.hovers-hang.active {
    display: grid;
  animation-name: hang-sink, hang;
    grid-template-columns: 1fr 1fr;
  animation-duration: 0.3s, 1.5s;
    grid-gap: 1rem;
  animation-delay: 0s, 0.3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}
}


/* 非对称 */
.tools-container .tool-item {
.hovers-skew:hover,
    background-color: rgb(var(--xp-window-bg));
.hovers-skew.active {
    border: 2px solid rgb(var(--xp-window-border));
  transform: skew(-10deg);
    box-shadow: var(--window-shadow);
    padding: 30px 10px 10px;
    display: grid;
    grid-template-areas:
        "icon content"
        "title content";
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0.5rem 1rem;
    position: relative;
    border-radius: 0;
}
}


/* 非对称-左 */
.tools-container .tool-item::before {
.hovers-skew-forward {
    content: "Tool";
  transform-origin: 0 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}
 
.tools-container .tool-item::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
 
.tools-container .tool-item .tool-icon {
    grid-area: icon;
    justify-self: center;
    align-self: center;
    background-color: white;
    border: 1px solid #ababab;
    padding: 5px;
}
 
.tools-container .tool-item .tool-title {
    grid-area: title;
    text-align: center;
}
 
.tools-container .tool-item .tool-title a {
    color: rgb(var(--link-color));
    font-weight: bold;
}
}
.hovers-skew-forward:hover,
 
.hovers-skew-forward.active {
.tools-container .tool-item .tool-description {
  transform: skew(-10deg);
    grid-area: content;
    background-color: white;
    border: 1px solid #ababab;
    padding: 8px;
}
}


/* 非对称-右 */
/* 新闻容器 - Windows XP风格 */
.hovers-skew-backward {
.news-container {
  transform-origin: 0 100%;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 2rem;
    position: relative;
    border-radius: 0;
}
}
.hovers-skew-backward:hover,
 
.hovers-skew-backward.active {
.news-container .section-title {
  transform: skew(10deg);
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 30px 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-align: left;
    width: 100%;
    border-left: none;
}
}


/* 垂直抖动 */
.news-container .section-title::after {
@keyframes wobble-vertical {
    content: "×";
  16.65% {
    position: absolute;
     transform: translateY(8px);
    top: 5px;
  }
    right: 5px;
  33.3% {
    width: 16px;
     transform: translateY(-6px);
    height: 16px;
  }
    background-color: #ff6347;
  49.95% {
     border: 1px solid rgb(var(--xp-window-border));
     transform: translateY(4px);
    text-align: center;
  }
    line-height: 16px;
  66.6% {
    font-size: 12px;
     transform: translateY(-2px);
    color: white;
  }
    cursor: pointer;
  83.25% {
    z-index: 1;
     transform: translateY(1px);
}
  }
 
  100% {
.news-container .news-content {
     transform: translateY(0);
     background-color: white;
  }
    padding: 10px;
    width: 100%;
    border-bottom: 1px solid #ababab;
}
 
.news-container .news-content .news-item {
     border-bottom: 1px solid #e0e0e0;
    padding: 5px 0;
}
 
.news-container .news-content .news-item:last-child {
     border-bottom: none;
}
 
.news-container .news-content .news-title {
     font-weight: bold;
    margin-bottom: 3px;
     color: rgb(var(--xp-blue-dark));
}
}


.hovers-wobble-vertical:hover,
.news-container .news-content .news-date {
.hovers-wobble-vertical.active {
    font-size: 0.8rem;
  animation-name: wobble-vertical;
    color: #666;
  animation-duration: 1s;
    margin-bottom: 3px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
}


/* 水平抖动 */
.news-container .news-archive {
@keyframes wobble-horizontal {
     background-color: #f0f0f0;
  16.65% {
     padding: 5px 10px;
     transform: translateX(8px);
     text-align: right;
  }
     width: 100%;
  33.3% {
}
     transform: translateX(-6px);
 
  }
.news-container .news-archive a {
  49.95% {
     color: rgb(var(--link-color));
     transform: translateX(4px);
  }
  66.6% {
     transform: translateX(-2px);
  }
  83.25% {
     transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}
}
.hovers-wobble-horizontal:hover,
 
.hovers-wobble-horizontal.active {
/* 轮播图容器 - Windows XP风格 */
  animation-name: wobble-horizontal;
.mw-carousel {
  animation-duration: 1s;
    position: relative;
  animation-timing-function: ease-in-out;
    width: 100%;
  animation-iteration-count: 1;
    max-width: 960px;
    margin: 20px auto;
    overflow: hidden;
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    aspect-ratio: 16 / 9;
    background-color: rgb(var(--xp-window-bg));
    border-radius: 0;
}
}


/* 右下弹回 */
.mw-carousel::before {
@keyframes wobble-to-bottom-right {
    content: "Slideshow";
  16.65% {
    position: absolute;
     transform: translate(8px, 8px);
    top: 0;
  }
    left: 0;
  33.3% {
    right: 0;
     transform: translate(-6px, -6px);
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
  }
    color: white;
  49.95% {
    padding: 5px 10px;
     transform: translate(4px, 4px);
    font-weight: bold;
  }
    text-shadow: var(--text-shadow);
  66.6% {
     border-bottom: 1px solid rgb(var(--xp-window-border));
     transform: translate(-2px, -2px);
    text-align: left;
  }
    height: 15px;
  83.25% {
     line-height: 15px;
     transform: translate(1px, 1px);
    font-size: 12px;
  }
    z-index: 10;
  100% {
}
     transform: translate(0, 0);
 
  }
.mw-carousel::after {
     content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
     border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 10;
}
 
.mw-carousel .carousel-image {
     width: 100%;
    height: 100%;
     position: relative;
    margin-top: 25px;
}
}


.hovers-wobble-to-bottom-right:hover,
.mw-carousel .carousel-image img {
.hovers-wobble-to-bottom-right.active {
    width: 100%;
  animation-name: wobble-to-bottom-right;
    height: calc(100% - 25px);
  animation-duration: 1s;
    object-fit: cover;
  animation-timing-function: ease-in-out;
    display: block;
  animation-iteration-count: 1;
    border: 1px solid #ababab;
}
}


/* 右上弹回 */
.mw-carousel .carousel-caption {
@keyframes wobble-to-top-right {
    position: absolute;
  16.65% {
    bottom: 0;
     transform: translate(8px, -8px)
    left: 0;
  }
    width: 100%;
  33.3% {
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
     transform: translate(-6px, 6px);
    color: white;
  }
    padding: 20px 15px 12px;
  49.95% {
    text-align: left;
     transform: translate(4px, -4px);
    transition: all 0.4s ease;
  }
     z-index: 2;
  66.6% {
}
     transform: translate(-2px, 2px);
 
  }
.mw-carousel:hover .carousel-caption {
  83.25% {
     top: 25px;
     transform: translate(1px, -1px);
    left: 0;
  }
    bottom: 0;
  100% {
    width: 100%;
     transform: translate(0);
     height: calc(100% - 25px);
  }
    background: rgba(0, 0, 0, 0.6);  
    display: flex;
    flex-direction: column;
     justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
     backdrop-filter: blur(3px);
}
}


.hovers-wobble-to-top-right:hover,
.mw-carousel .carousel-caption h3 {
.hovers-wobble-to-top-right.active {
    margin: 0 0 5px;
  animation-name: wobble-to-top-right;
    font-size: 1.6em;
  animation-duration: 1s;
    font-weight: 600;
  animation-timing-function: ease-in-out;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation-iteration-count: 1;
    transition: transform 0.4s ease;
    background: none;
    padding: 0;
    border: none;
}
}


/* 果冻 */
.mw-carousel .carousel-caption p {
@keyframes wobble-top {
    margin: 0;
  16.65% {
    font-size: 1.1em;
     transform: skew(-12deg);
     line-height: 1.4;
  }
    max-width: 80%;
  33.3% {
    transition: all 0.4s ease 0.1s;
     transform: skew(10deg);
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}
  49.95% {
 
     transform: skew(-6deg);
.mw-carousel .carousel-navigation {
  }
     position: absolute;
  66.6% {
    top: 50%;
     transform: skew(4deg);
    left: 0;
  }
    width: 100%;
  83.25% {
     display: flex;
     transform: skew(-2deg);
    justify-content: space-between;
  }
     transform: translateY(-50%);
  100% {
    z-index: 3;
     transform: skew(0);
    padding: 0 15px;
  }
    opacity: 0;
     transition: opacity 0.3s ease;
}
 
.mw-carousel:hover .carousel-navigation {
    opacity: 1;
}
}


/* 赘肉 */
.mw-carousel .carousel-prev,
.hovers-wobble-top {
.mw-carousel .carousel-next {
  transform-origin: 0 100%;
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
}
.hovers-wobble-top:hover,
 
.hovers-wobble-top.active {
.mw-carousel .carousel-prev:hover,
  animation-name: wobble-top;
.mw-carousel .carousel-next:hover {
  animation-duration: 1s;
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
}


@keyframes wobble-bottom {
.mw-carousel .carousel-indicators {
  16.65% {
     position: absolute;
     transform: skew(-12deg);
    bottom: 15px;
  }
    right: 20px;
  33.3% {
     left: auto;
     transform: skew(10deg);
    display: flex;
  }
     gap: 5px;
  49.95% {
     z-index: 4;
     transform: skew(-6deg);
     padding: 5px 10px;
  }
     background-color: rgba(0, 0, 0, 0.3);
  66.6% {
     transform: skew(4deg);
  }
  83.25% {
     transform: skew(-2deg);
  }
  100% {
     transform: skew(0);
  }
}
}


.hovers-wobble-bottom {
.mw-carousel .carousel-indicators .indicator {
  transform-origin: 100% 0;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s;
}
}
.hovers-wobble-bottom:hover,
 
.hovers-wobble-bottom.active {
.mw-carousel .carousel-indicators .indicator.active {
  animation-name: wobble-bottom;
    background-color: #ffffff;
  animation-duration: 1s;
    transform: scale(1.2);
  animation-timing-function: ease-in-out;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
  animation-iteration-count: 1;
}
}


/* 颤动 */
/* 图片全局样式 */
@keyframes wobble-skew {
img {
  16.65% {
    max-width: 100%;
     transform: skew(-12deg);
     height: auto;
  }
     display: block;
  33.3% {
     border: 1px solid #ababab;
     transform: skew(10deg);
}
  }
 
  49.95% {
/* 添加图片过渡效果 */
     transform: skew(-6deg);
.mw-carousel .carousel-image img {
  }
     transition: transform 0.5s ease;
  66.6% {
    transform: skew(4deg);
  }
  83.25% {
     transform: skew(-2deg);
  }
  100% {
    transform: skew(0);
  }
}
}
.hovers-wobble-skew:hover,
 
.hovers-wobble-skew.active {
.mw-carousel:hover .carousel-image img {
  animation-name: wobble-skew;
    transform: scale(1.03);
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}
}


/* 振动 */
/* 目录框样式 - Windows XP风格 */
@keyframes buzz {
#toc, .toc {
  50% {
    background-color: rgb(var(--xp-window-bg));
     transform: translateX(3px) rotate(2deg);
     border: 2px solid rgb(var(--xp-window-border));
  }
    box-shadow: var(--window-shadow);
  100% {
    padding: 30px 10px 10px;
     transform: translateX(-3px) rotate(-2deg);
    margin: 1em 0;
  }
    position: relative;
    border-radius: 0;
}
 
#toc::before, .toc::before {
     content: "Contents";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}
 
#toc::after, .toc::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
 
.toc .toctitle, #toc .toctitle {
    display: none;
}
 
.toc ul, #toc ul {
    margin: 0;
    padding: 0 0 0 1.5em;
}
}


.hovers-buzz:hover,
.toc li, #toc li {
.hovers-buzz.active {
    margin: 5px 0;
  animation-name: buzz;
  animation-duration: 0.15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
}


/* 振出 */
.toc a, #toc a {
@keyframes buzz-out {
     color: rgb(var(--link-color));
  10% {
     text-decoration: none;
     transform: translateX(3px) rotate(2deg);
  }
  20% {
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    transform: translateX(2px) rotate(1deg);
  }
  60% {
     transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    transform: translateX(1px) rotate(0);
  }
  100% {
    transform: translateX(-1px) rotate(0);
  }
}
}


.hovers-buzz-out:hover,
.toc a:hover, #toc a:hover {
.hovers-buzz-out.active {
    color: rgb(var(--hover-link-color));
  animation-name: buzz-out;
    text-decoration: underline;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}
}


/* 右移 */
.tocnumber {
.hovers-forward:hover,
    color: #666;
.hovers-forward.active {
    margin-right: 5px;
  transform: translateX(8px);
}
 
/* 变色龙皮肤特定修复 */
.chameleon-toc {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    padding: 30px 10px 10px;
    position: relative;
    border-radius: 0;
}
}


/* 左移 */
.chameleon-toc::before {
.hovers-backward:hover,
    content: "Contents";
.hovers-backward.active {
    position: absolute;
  transform: translateX(-8px);
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}
}


/* 自由移动 */
.chameleon-toc::after {
.hovers-top,
    content: "×";
.hovers-left,
    position: absolute;
.hovers-bottom,
    top: 2px;
.hovers-right {
    right: 5px;
  transition: all 0.5s;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}


.hovers-top:hover,
.chameleon-toc .toctitle {
.hovers-top.active {
    display: none;
  transform: translateY(-0.0625em);
}
}


.hovers-left:hover,
.hovers-left.active {
  transform: translateX(-0.0625em);
}


.hovers-bottom:hover,
/* Windows XP启动栏和任务栏 */
.hovers-bottom.active {
body::after {
  transform: translateY(0.0625em);
    content: "开始";
    position: fixed;
    left: 0;
    bottom: 30px;
    width: 100px;
    height: 30px;
    background: linear-gradient(to bottom, #4cae4c, #398439);
    color: white;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    border-radius: 0 5px 5px 0;
    z-index: 9999;
    cursor: pointer;
    border: 1px solid #366;
    border-left: none;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;
}
}


.hovers-right:hover,
body::before {
.hovers-right.active {
    content: "";
  transform: translateX(0.0625em);
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, #4581c8, #2f5b9d);
    border-top: 1px solid #223f6f;
    z-index: 9998;
}
 
/* 响应式调整 */
@media (max-width: 767px) {
    .tools-container {
        grid-template-columns: 1fr;
    }
   
    .recent-pages-container .page-section,
    .featured-content-container .feature-item {
        flex-basis: 100%;
        margin-bottom: 15px;
    }
   
    body::after {
        width: 80px;
        font-size: 12px;
    }
}
}


/* 滤镜 */
/* Windows XP蓝屏风格 */
.hovers-blur,
.bluescreen {
.hovers-blur-reverse,
    background-color: #0000aa;
.hovers-brightness,
    color: #ffffff;
.hovers-brightness-reverse,
    font-family: "Courier New", monospace;
.hovers-contrast,
    padding: 20px;
.hovers-contrast-reverse,
    margin: 10px 0;
.hovers-grayscale,
    border: 2px solid #000055;
.hovers-grayscale-reverse,
    box-shadow: var(--window-shadow);
.hovers-invert,
    position: relative;
.hovers-invert-reverse,
.hovers-saturate,
.hovers-saturate-reverse,
.hovers-sepia,
.hovers-sepia-reverse,
.hovers-hue-rotate,
.hovers-hue-rotate-reverse {
  transition-duration: 0.75s;
}
}


.hovers-blur:hover,
.bluescreen h2 {
.hovers-blur.active,
    color: #ffffff;
.hovers-brightness:hover,
    background: none;
.hovers-brightness.active,
    border: none;
.hovers-contrast:hover,
    margin-top: 10px;
.hovers-contrast.active,
    margin-bottom: 20px;
.hovers-grayscale:hover,
    font-size: 1.5em;
.hovers-grayscale.active,
    text-shadow: none;
.hovers-invert:hover,
.hovers-invert.active,
.hovers-saturate:hover,
.hovers-saturate.active,
.hovers-sepia:hover,
.hovers-sepia.active,
.hovers-hue-rotate:hover,
.hovers-hue-rotate.active {
  filter: initial;
}
}


.hovers-blur {
.bluescreen p {
  filter: blur(5px);
    margin: 10px 0;
    line-height: 1.5;
}
}


.hovers-blur-reverse:hover,
.bluescreen code {
.hovers-blur-reverse.active {
    background-color: #0000aa;
  filter: blur(5px);
    border: none;
    color: #ffffff;
    display: block;
    margin: 10px 0;
    font-family: "Courier New", monospace;
}
}


.hovers-brightness {
/* 标题栏文本 */
  filter: brightness(50%);
.titlebox {
    color: white;
    position: relative;
    top: -16px;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    padding: 5px 20px;
    line-height: 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border: 1px solid rgb(var(--xp-window-border));
    display: inline-block;
}
}


.hovers-brightness-reverse:hover,
/* Windows XP Logo风格块 */
.hovers-brightness-reverse.active {
.logoblock {
  filter: brightness(50%);
    padding: 30px 10px 10px;
    color: black;
    box-shadow: var(--window-shadow);
    margin: 10px 0;
    display: block;
    position: relative;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    border-radius: 0;
}
}


.hovers-contrast {
.logoblock::before {
  filter: contrast(50%);
    content: "Windows";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}
}


.hovers-contrast-reverse:hover,
.logoblock::after {
.hovers-contrast-reverse.active {
    content: "";
  filter: contrast(50%);
    float: center;
    border: solid 2px #0000;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat;
    opacity: 0.7;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}
}


.hovers-grayscale {
/* Windows XP错误对话框 */
  filter: grayscale(100%);
.error-dialog {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    padding: 30px 10px 10px;
    margin: 10px 0;
    position: relative;
    box-shadow: var(--window-shadow);
    border-radius: 0;
}
}


.hovers-grayscale-reverse:hover,
.error-dialog::before {
.hovers-grayscale-reverse.active {
    content: "Error";
  filter: grayscale(100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}
}


.hovers-invert {
.error-dialog::after {
  filter: invert(100%);
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}


.hovers-invert-reverse:hover,
.error-dialog .icon {
.hovers-invert-reverse.active {
    float: left;
  filter: invert(100%);
    margin-right: 10px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
}


.hovers-saturate {
.error-dialog .message {
  filter: saturate(200%);
    margin-left: 50px;
    font-weight: bold;
}
}


.hovers-saturate-reverse:hover,
.error-dialog .buttons {
.hovers-saturate-reverse.active {
    text-align: right;
  filter: saturate(200%);
    margin-top: 15px;
}
}


.hovers-sepia {
.error-dialog .buttons button {
  filter: sepia(100%);
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    padding: 3px 10px;
    margin-left: 5px;
    cursor: pointer;
}
}


.hovers-sepia-reverse:hover,
.error-dialog .buttons button:hover {
.hovers-sepia-reverse.acitve {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
  filter: sepia(100%);
}
}


.hovers-hue-rotate {
/* JS添加功能 */
  filter: hue-rotate(180deg);
.JS-added-button {
    display: none; /* 由JS控制显示 */
    position: fixed;
    right: 10px;
    bottom: 40px;
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
}


.hovers-hue-rotate-reverse:hover,
.JS-added-button:hover {
.hovers-hue-rotate-reverse.active {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
  filter: hue-rotate(180deg);
}
 
/* 创建一个窗口最小化图标，显示在任务栏中 */
.minimized-window {
    position: fixed;
    left: 110px;
    bottom: 0;
    height: 30px;
    padding: 0 10px;
    background: linear-gradient(to bottom, #67a9e0, #3a84c5);
    color: white;
    line-height: 30px;
    font-size: 12px;
    z-index: 9999;
    cursor: pointer;
    border-top: 1px solid #81bdeb;
    border-left: 1px solid #81bdeb;
    border-right: 1px solid #25619a;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
}


/* 背景滑动 */
.minimized-window:hover {
.hovers-sweep-to-right,
    background: linear-gradient(to bottom, #81bdeb, #67a9e0);
.hovers-sweep-to-left,
.hovers-sweep-to-bottom,
.hovers-sweep-to-top,
.hovers-radial-out,
.hovers-radial-in {
  position: relative;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  overflow: hidden;
}
}


.hovers-sweep-to-right:before,
/* 添加系统时钟到任务栏 */
.hovers-sweep-to-left:before,
.taskbar-clock {
.hovers-sweep-to-bottom:before,
    position: fixed;
.hovers-sweep-to-top:before,
    right: 10px;
.hovers-radial-out:before,
    bottom: 0;
.hovers-radial-in:before {
    height: 30px;
  content: '';
    padding: 0 10px;
  position: absolute;
    background: transparent;
  z-index: 10;
    color: white;
  top: 0;
    line-height: 30px;
  left: 0;
    font-size: 12px;
  right: 0;
    z-index: 9999;
  bottom: 0;
  background: inherit;
  transform: scaleX(0);
  transition: inherit;
}
}
.hovers-sweep-to-bottom:before,
 
.hovers-sweep-to-top:before {
/* CommonJS功能 */
  transform: scaleY(0);
/* 这些样式将由JavaScript功能使用 */d-content-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}
}
.hovers-radial-out:before,
 
.hovers-radial-in:before {
.featured-content-container .feature-item {
  border-radius: 50%;
    flex-basis: 48%;
  transform: scale(0);
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 1rem;
    display: grid;
    grid-template-areas: "title" "content" "more";
    grid-template-rows: auto 1fr auto;
    position: relative;
    border-radius: 0;
}
}
.hovers-radial-in:before {
 
  transform: scale(2);
.featured-content-container .section-title {
    grid-area: title;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 30px 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-align: left;
    height: 25px;
    line-height: 25px;
    border-left: none;
}
}


.hovers-sweep-to-right:before {
.featured-content-container .section-title::after {
  transform-origin: 0 50%;
    content: "×";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}
.hovers-sweep-to-left:before {
 
  transform-origin: 100% 50%;
.featured-content-container .feature-content {
    grid-area: content;
    background-color: white;
    padding: 10px;
    border-bottom: 1px solid #ababab;
}
}
.hovers-sweep-to-bottom:before {
 
  transform-origin: 50% 0;
.featured-content-container .feature-content .featured-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: rgb(var(--xp-blue-dark));
}
}
.hovers-sweep-to-top:before {
 
  transform-origin: 50% 100%;
.featured-content-container .feature-content .featured-author {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}
}
.hovers-radial-out:hover:before,
 
.hovers-radial-out.active:before {
.featured-content-container .feature-content .featured-description {
  transform: scale(2);
    font-style: italic;
    color: #444;
}
}
.hovers-radial-in:hover:before,
 
.hovers-radial-in.active:before {
.featured-content-container .see-more {
  transform: scale(0);
    grid-area: more;
    background-color: #f0f0f0;
    padding: 5px 10px;
    text-align: right;
}
}


.hovers-sweep-to-right .hovers-content.center,
.featured-content-container .see-more a {
.hovers-sweep-to-left .hovers-content.center,
    color: rgb(var(--link-color));
.hovers-sweep-to-bottom .hovers-content.center,
}
.hovers-sweep-to-top .hovers-content.center,
 
.hovers-radial-out .hovers-content.center,
/* 工具和资源容器 - Windows XP风格 */
.hovers-radial-in .hovers-content.center {
.tools-and-resources {
  display: flex;
    margin-bottom: 2rem;
  align-items: center;
}
  justify-content: center;
 
  word-break: break-all;
.tools-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}
}


.hovers-sweep-to-right:hover:before,
.tools-container .tool-item {
.hovers-sweep-to-left:hover:before,
    background-color: rgb(var(--xp-window-bg));
.hovers-sweep-to-bottom:hover:before,
    border: 2px solid rgb(var(--xp-window-border));
.hovers-sweep-to-top:hover:before,
    box-shadow: var(--window-shadow);
.hovers-sweep-to-right.active:before,
    padding: 30px 10px 10px;
.hovers-sweep-to-left:hover:before,
    display: grid;
.hovers-sweep-to-bottom:hover:before,
    grid-template-areas:
.hovers-sweep-to-top:hover:before {
        "icon content"
  transform: scaleX(1);
        "title content";
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0.5rem 1rem;
    position: relative;
    border-radius: 0;
}
}


.hovers-sweep-to-right .hovers-content,
.tools-container .tool-item::before {
.hovers-sweep-to-left .hovers-content,
    content: "Tool";
.hovers-sweep-to-bottom .hovers-content,
    position: absolute;
.hovers-sweep-to-top .hovers-content,
    top: 0;
.hovers-radial-out .hovers-content,
    left: 0;
.hovers-radial-in .hovers-content {
    right: 0;
  width: 100%;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
  height: 100%;
    color: white;
  position: absolute;
    padding: 5px 10px;
  transition-property: all;
    font-weight: bold;
  transition-duration: inherit;
    text-shadow: var(--text-shadow);
  top: 0;
    border-bottom: 1px solid rgb(var(--xp-window-border));
  left: 0;
    text-align: left;
  z-index: 11;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}
}


.hovers-sweep-to-right .hovers-content {
.tools-container .tool-item::after {
  left: initial;
    content: "×";
  right: 100%;
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}
.hovers-sweep-to-right:hover .hovers-content,
 
.hovers-sweep-to-right.active .hovers-content {
.tools-container .tool-item .tool-icon {
  right: 0;
    grid-area: icon;
    justify-self: center;
    align-self: center;
    background-color: white;
    border: 1px solid #ababab;
    padding: 5px;
}
}


.hovers-sweep-to-left .hovers-content {
.tools-container .tool-item .tool-title {
  left: 100%;
    grid-area: title;
    text-align: center;
}
}
.hovers-sweep-to-left:hover .hovers-content,
 
.hovers-sweep-to-left.active .hovers-content {
.tools-container .tool-item .tool-title a {
  left: 0;
    color: rgb(var(--link-color));
    font-weight: bold;
}
}


.hovers-sweep-to-bottom .hovers-content {
.tools-container .tool-item .tool-description {
  top: initial;
    grid-area: content;
  bottom: 100%;
    background-color: white;
    border: 1px solid #ababab;
    padding: 8px;
}
}
.hovers-sweep-to-bottom:hover .hovers-content,
 
.hovers-sweep-to-bottom.active .hovers-content {
/* 新闻容器 - Windows XP风格 */
  bottom: 0;
.news-container {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 2rem;
    position: relative;
    border-radius: 0;
}
}


.hovers-sweep-to-top .hovers-content {
.news-container .section-title {
  top: 100%;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 30px 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-align: left;
    width: 100%;
    border-left: none;
}
}
.hovers-sweep-to-top:hover .hovers-content,
 
.hovers-sweep-to-top.active .hovers-content {
.news-container .section-title::after {
  top: 0;
    content: "×";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
 
.news-container .news-content {
    background-color: white;
    padding: 10px;
    width: 100%;
    border-bottom: 1px solid #ababab;
}
}


.hovers-radial-out .hovers-content,
.news-container .news-content .news-item {
.hovers-radial-in:hover .hovers-content,
    border-bottom: 1px solid #e0e0e0;
.hovers-radial-in.active .hovers-content {
    padding: 5px 0;
  opacity: 0;
}
}


.hovers-radial-in .hovers-content,
.news-container .news-content .news-item:last-child {
.hovers-radial-out:hover .hovers-content,
    border-bottom: none;
.hovers-radial-out.active .hovers-content {
  opacity: 1;
}
}


/* 默认em */
.news-container .news-content .news-title {
.hovers-border,
    font-weight: bold;
.hovers-trim,
    margin-bottom: 3px;
.hovers-ripple-out,
    color: rgb(var(--xp-blue-dark));
.hovers-ripple-in,
.hovers-outline-out,
.hovers-outline-in,
.hovers-reveal {
  font-size: 160px;
  line-height: 16px;
}
}


/* 内边框滑出 */
.news-container .news-content .news-date {
.hovers-border,
    font-size: 0.8rem;
.hovers-trim {
    color: #666;
  position: relative;
    margin-bottom: 3px;
  top: 0;
  left: 0;
  transition: all 0.3s;
}
}


.hovers-border:before {
.news-container .news-archive {
  content: '';
    background-color: #f0f0f0;
  width: 100%;
    padding: 5px 10px;
  height: 100%;
    text-align: right;
  position: absolute;
    width: 100%;
  top: 0;
}
  left: 0;
 
  box-sizing: border-box;
.news-container .news-archive a {
  transition: inherit;
    color: rgb(var(--link-color));
  border-width: calc(0.0625em * 0.6);
  border-color: inherit;
  border-style: solid;
  border-radius: inherit;
  opacity: 0;
}
}


.hovers-border:hover:before,
/* 响应式调整 */
.hovers-border.active:before {
@media (max-width: 767px) {
  opacity: 1;
    .tools-container {
        grid-template-columns: 1fr;
    }
   
    .recent-pages-container .page-section,
    .featured-content-container .feature-item {
        flex-basis: 100%;
        margin-bottom: 15px;
    }
   
    body::after {
        width: 80px;
        font-size: 12px;
    }
}
}


/* 带边距内边框 */
/* Windows XP蓝屏风格 */
.hovers-trim:before {
.bluescreen {
  content: '';
    background-color: #0000aa;
  position: absolute;
    color: #ffffff;
  top: calc(0.0625em * 0.4);
    font-family: "Courier New", monospace;
  left: calc(0.0625em * 0.4);
    padding: 20px;
  bottom: calc(0.0625em * 0.4);
    margin: 10px 0;
  right: calc(0.0625em * 0.4);
    border: 2px solid #000055;
  transition: inherit;
    box-shadow: var(--window-shadow);
  border-width: calc(0.0625em * 0.6);
    position: relative;
  border-color: inherit;
}
  border-style: solid;
 
  opacity: 0;
.bluescreen h2 {
  border-radius: inherit;
    color: #ffffff;
    background: none;
    border: none;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-shadow: none;
}
 
.bluescreen p {
    margin: 10px 0;
    line-height: 1.5;
}
 
.bluescreen code {
    background-color: #0000aa;
    border: none;
    color: #ffffff;
    display: block;
    margin: 10px 0;
    font-family: "Courier New", monospace;
}
}


.hovers-trim:hover:before,
/* 标题栏文本 */
.hovers-trim.active:before {
.titlebox {
  opacity: 1;
    color: white;
    position: relative;
    top: -16px;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    padding: 5px 20px;
    line-height: 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border: 1px solid rgb(var(--xp-window-border));
    display: inline-block;
}
}


/* 边框飞出与飞入 */
/* Windows XP Logo风格块 */
.hovers-ripple-out,
.logoblock {
.hovers-ripple-in,
    padding: 30px 10px 10px;
.hovers-outline-out,
    color: black;
.hovers-outline-in,
    box-shadow: var(--window-shadow);
.hovers-reveal {
    margin: 10px 0;
  animation-duration: 0.7s;
    display: block;
  animation-timing-function: ease-out;
    position: relative;
  transition: all 0.3s;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    border-radius: 0;
}
}


.hovers-ripple-out:before,
.logoblock::before {
.hovers-ripple-in:before,
    content: "Windows";
.hovers-outline-out:before,
    position: absolute;
.hovers-outline-in:before,
    top: 0;
.hovers-reveal:before {
    left: 0;
  content: '';
    right: 0;
  position: absolute;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
  top: 0;
    color: white;
  right: 0;
    padding: 5px 10px;
  bottom: 0;
    font-weight: bold;
  left: 0;
    text-shadow: var(--text-shadow);
  animation: inherit;
    border-bottom: 1px solid rgb(var(--xp-window-border));
  transition: inherit;
    text-align: left;
  border-width: calc(0.0625em * 0.6);
    height: 15px;
  border-color: inherit;
    line-height: 15px;
  border-style: solid;
    font-size: 12px;
  border-radius: inherit;
}
}
.hovers-ripple-out:before {
 
  opacity: 0;
.logoblock::after {
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat;
    opacity: 0.7;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}
}
.hovers-ripple-in:before {
 
  top: calc(-0.0625em * 1.2);
/* Windows XP错误对话框 */
  right: calc(-0.0625em * 1.2);
.error-dialog {
  bottom: calc(-0.0625em * 1.2);
    background-color: rgb(var(--xp-window-bg));
  left: calc(-0.0625em * 1.2);
    border: 2px solid rgb(var(--xp-window-border));
  opacity: 0;
    padding: 30px 10px 10px;
    margin: 10px 0;
    position: relative;
    box-shadow: var(--window-shadow);
    border-radius: 0;
}
}
.hovers-outline-out:before {
 
  opacity: 0;
.error-dialog::before {
    content: "Error";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}
}
.hovers-outline-out:before {
 
  top: calc(-0.0625em * 1.6);
.error-dialog::after {
  right: calc(-0.0625em * 1.6);
    content: "×";
  bottom: calc(-0.0625em * 1.6);
    position: absolute;
  left: calc(-0.0625em * 1.6);
    top: 2px;
  opacity: 0;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}
}
.hovers-reveal:before {
 
  border-width: 0;
.error-dialog .icon {
  opacity: 0;
    float: left;
    margin-right: 10px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}
}


@keyframes ripple-out {
.error-dialog .message {
  50% {
    margin-left: 50px;
     opacity: 1;
     font-weight: bold;
  }
}


  100% {
.error-dialog .buttons {
    top: calc(-0.0625em * 1.2);
     text-align: right;
     right: calc(-0.0625em * 1.2);
     margin-top: 15px;
    bottom: calc(-0.0625em * 1.2);
     left: calc(-0.0625em * 1.2);
    opacity: 0;
  }
}
}
.hovers-ripple-out:hover:before,
 
.hovers-ripple-out.active:before {
.error-dialog .buttons button {
  animation-name: ripple-out;
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    padding: 3px 10px;
    margin-left: 5px;
    cursor: pointer;
}
}


@keyframes ripple-in {
.error-dialog .buttons button:hover {
  50% {
     background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
     opacity: 1;
}
  }


  100% {
/* JS添加功能 */
     top: 0;
.JS-added-button {
     right: 0;
     display: none; /* 由JS控制显示 */
     bottom: 0;
    position: fixed;
     left: 0;
     right: 10px;
     opacity: 0;
    bottom: 40px;
  }
     background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    padding: 5px 10px;
    cursor: pointer;
     z-index: 9999;
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
}
.hovers-ripple-in:hover:before,
 
.hovers-ripple-in.active:before {
.JS-added-button:hover {
  animation-name: ripple-in;
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}
}


.hovers-outline-out:hover:before,
/* 创建一个窗口最小化图标，显示在任务栏中 */
.hovers-outline-in:hover:before,
.minimized-window {
.hovers-outline-out.active:before,
    position: fixed;
.hovers-outline-in:hover:before {
    left: 110px;
  top: calc(-0.0625em * 0.8);
    bottom: 0;
  right: calc(-0.0625em * 0.8);
    height: 30px;
  bottom: calc(-0.0625em * 0.8);
    padding: 0 10px;
  left: calc(-0.0625em * 0.8);
    background: linear-gradient(to bottom, #67a9e0, #3a84c5);
  opacity: 1;
    color: white;
    line-height: 30px;
    font-size: 12px;
    z-index: 9999;
    cursor: pointer;
    border-top: 1px solid #81bdeb;
    border-left: 1px solid #81bdeb;
    border-right: 1px solid #25619a;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
}


.hovers-reveal:hover:before,
.minimized-window:hover {
.hovers-reveal.active:before {
    background: linear-gradient(to bottom, #81bdeb, #67a9e0);
  transform: translateY(0);
  border-width: calc(0.0625em * 0.4);
  opacity: 1;
}
}


/* 圆角化 */
/* 添加系统时钟到任务栏 */
.hovers-round-corners {
.taskbar-clock {
  overflow: hidden;
    position: fixed;
    right: 10px;
    bottom: 0;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    color: white;
    line-height: 30px;
    font-size: 12px;
    z-index: 9999;
}
/* 导航框（查论编）- Windows XP风格 */
table.navbox {
    border: 2px solid rgb(var(--xp-window-border));
    clear: both;
    margin: 1em auto;
    padding: 0;
    text-align: center;
    width: 100%;
    background-color: rgb(var(--xp-window-bg));
    box-shadow: var(--window-shadow);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
}
}
.hovers-round-corners:hover,
 
.hovers-round-corners.active {
.navbox-title,
  border-radius: 0.0625em;
.navbox-abovebelow,
table.navbox th {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
}
}


/* 重叠：翻转切换 */
.navbox-title::after,
table.navbox th::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}


.hover-turn {
.navbox-group {
  position: relative;
    background-color: #f0f0f0;
  transform: translateZ(1px);
    border: 1px solid #ababab;
    color: black;
    font-weight: bold;
    padding: 5px;
    text-align: right;
    white-space: nowrap;
}
}


.hover-turn-before,
.navbox-list {
.hover-turn-after {
    background-color: white;
  position: absolute;
    border: 1px solid #ababab;
  top: 0;
    padding: 5px;
  left: 0;
    text-align: left;
}
}


@keyframes hover-turn {
/* 修复开始按钮 - 实际元素而非伪元素 */
  from {
.start-button {
     transform: rotateY(-90deg);
    position: fixed;
  }
    left: 0;
    bottom: 30px;
    width: 100px;
    height: 30px;
    background: linear-gradient(to bottom, #4cae4c, #398439);
    color: white;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    border-radius: 0 5px 5px 0;
    z-index: 9999;
    cursor: pointer;
    border: 1px solid #366;
    border-left: none;
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;
}


  50% {
/* 修复开始菜单样式 */
     transform: scale(1.2);
#xp-start-menu {
  }
     position: fixed !important;
    left: 0 !important;
    bottom: 60px !important;
    width: 250px !important;
    background-color: white !important;
    border: 2px solid #0054e3 !important;
    box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.3) !important;
    z-index: 10000 !important;
    display: none;
}


  to {
.start-menu-top {
     transform: rotateY(0);
     height: 60px !important;
  }
    background: linear-gradient(to bottom, #235ddc, #225ada 50%, #214fbb) !important;
    color: white !important;
    padding: 10px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
}
}


.hover-turn:not(:hover) .hover-turn-before,
.start-menu-items {
.hover-turn:hover .hover-turn-after {
    background-color: white !important;
  animation: hover-turn 0.5s;
    padding: 5px 0 !important;
}
}


.hover-turn:hover .hover-turn-before,
.start-menu-item {
.hover-turn:not(:hover) .hover-turn-after {
    padding: 5px 10px !important;
opacity: 0;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}
}
/* [[Category:在模板名字空间下的CSS页面]] */


/*
.start-menu-item:hover {
.colormu_toggle_on是为了黑幕开关(MediaWiki:Gadget-heimu-toggle.js)做适配。
    background-color: #e0ecff !important;
.colormu-drk、.colormu-bri分别是暗色背景和亮色背景，
暗色背景的文字通常是浅色，在半隐背景后，颜色需要变成深色。
*/
.colormu-drk {
color: #FFF;
}
}
.colormu-bri {
 
color: #000;
/* 修复下拉菜单 */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 1px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    border-radius: 0 !important;
    z-index: 1000;
}
}
.colormu-drk:not(.colormu_toggle_on) a {
 
color: #add8e6;
.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
}
}
.colormu-drk:not(.colormu_toggle_on) a.new {
 
color: #FCC;
/* 修复2: 下拉菜单位置 */
#p-personal .vector-menu-content,
.vector-user-menu .vector-menu-content,
.vector-menu-dropdown .vector-menu-content {
    right: 0 !important;
    left: auto !important;
}
}
.colormu>span, .colormu a, .colormu a>span {
 
transition: color 0.2s;
/* 确保下拉菜单不会超出屏幕 */
.dropdown-menu {
    right: 0 !important;
    left: auto !important;
}
}
 
.colormu:not(:hover):not(:active):not(.colormu_toggle_on)>span,
#p-personal {
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a {
    position: relative !important;
color: transparent;
}
}
 
/* for T:Coloredlink in T:彩幕 */
/* 修复3: 时钟显示问题 */
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a>span {
/* 隐藏时钟图标 */
color: transparent !important;
.oo-ui-icon-clock:before,
.mw-ui-icon-clock:before,
#pt-watchlist .mw-ui-icon:before {
    display: none !important;
}
 
/* 重新设置时钟样式，确保不会重叠 */
.taskbar-clock {
    position: fixed !important;
    right: 10px !important;
    bottom: 5px !important;
    height: 20px !important;
    padding: 0 8px !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: white !important;
    font-weight: bold !important;
    line-height: 20px !important;
    font-size: 14px !important;
    z-index: 10000 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 3px !important;
    font-family: "Segoe UI", Tahoma, sans-serif !important;
}
 
/* 修复4: 开始按钮背景 */
.start-button {
    position: fixed !important;
    left: 0 !important;
    bottom: 30px !important;
    width: 100px !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #4cae4c, #398439) !important;
    color: white !important;
    text-align: center !important;
    line-height: 30px !important;
    font-weight: bold !important;
    border-radius: 0 5px 5px 0 !important;
    z-index: 9999 !important;
    cursor: pointer !important;
    border: 1px solid #366 !important;
    border-left: none !important;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3) !important;
    padding-left: 30px !important;
    font-family: "Segoe UI", Tahoma, sans-serif !important;
}
 
.start-button::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}
 
/* 修复底部任务栏，使开始按钮正确显示 */
body::before {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #3367d1, #2851a3) !important;
    border-top: 1px solid #4a78d8 !important;
    z-index: 9998 !important;
}
 
 
 
/* 修复3: 移除之前的开始按钮伪元素 */
body::after {
    display: none !important;
}
 
/* 修复4: 时钟样式完善 */
.taskbar-clock {
    position: fixed !important;
    right: 10px !important;
    bottom: 5px !important;
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 8px !important;
    background-color: transparent !important;
    color: white !important;
    font-weight: normal !important;
    font-size: 13px !important;
    font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important;
    z-index: 10000 !important;
    text-shadow: none !important;
}
}
 
/* for T:彩幕 in link */
/* 完全隐藏时钟图标 */
a .colormu-bri {
.oo-ui-icon-clock,
color: inherit;
.mw-ui-icon-clock,
#pt-watchlist .mw-ui-icon,
.mw-watchlink .mw-ui-icon::before {
    display: none !important;
}
}
a:hover .colormu>span, a:active .colormu>span,
 
/* and for MediaWiki:Gadget-heimu-toggle.js */
/* 修复5: 完善底部任务栏 */
.colormu-drk.colormu_toggle_on, .colormu_toggle_on>span, .colormu-drk.colormu_toggle_on a>span {
.taskbar {
color: inherit !important;
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #3367d1, #2851a3) !important;
    border-top: 1px solid #4a78d8 !important;
    z-index: 9998 !important;
    display: flex !important;
    align-items: center !important;
}
}
 
/* [[Category:在模板名字空间下的CSS页面]] */
/* 任务栏内容区域 */
.taskbar-content {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
}
 
/* 快速启动栏 */
.quick-launch {
    display: flex !important;
    align-items: center !important;
    padding: 0 5px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-right: 5px !important;
}
 
.quick-launch-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 2px !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s !important;
}
 
.quick-launch-icon:hover {
    opacity: 1 !important;
}
 
/* 系统托盘区域 */
.system-tray {
    display: flex !important;
    align-items: center !important;
    padding: 0 5px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-left: auto !important;
}
 
 
//* 修复系统托盘布局 */
.system-tray {
    position: fixed !important;
    right: 10px !important;
    bottom: 0 !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 5px !important;
    z-index: 10000 !important;
}
 
/* 单独设置时钟样式 */
.taskbar-clock {
    position: static !important;
    color: white !important;
    font-family: "Tahoma", sans-serif !important;
    font-size: 13px !important;
    line-height: 30px !important;
}
 
/* 移除重复的系统图标 */
.tray-icon {
    display: none !important;
}
/* 强制应用指定字体 */
* {
    font-family: var(--body-font) !important;
}
 
body, html {
    font-family: "VonwaonBitmap 16px", VT323, monospace !important;
}
 
/* 特别设置任务栏字体 */
.taskbar, .start-button, .taskbar-clock {
    font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important;
}
/* 修复媒体查询 */
@media (max-width: 767px) {
    .navbar-toggle, .navbar-toggler {
        display: block !important;
    }
   
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: rgb(var(--xp-window-bg)) !important;
        border: 1px solid rgb(var(--xp-window-border)) !important;
        z-index: 1000 !important;
    }
}
 
/* 确保任务栏不与页面内容重叠 */
body {
    padding-bottom: 40px !important;
}
 
#content {
    margin-bottom: 40px !important;
}
 
/* 在顶栏显示用户头像 - 针对变色龙皮肤 */
.navbar-userloggedin,
#personal-inner,
#p-personal .vector-menu-content-list > li:first-child,
.navbar-personaltools > li:first-child {
    position: relative;
    padding-left: 30px !important;
}
 
.navbar-userloggedin::before,
#personal-inner::before,
#p-personal .vector-menu-content-list > li:first-child > a::before,
.navbar-personaltools > li:first-child > a::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid rgb(var(--bright-accent));
    z-index: 100;
}
 
/* 头像悬停效果 */
.navbar-userloggedin:hover::before,
#personal-inner:hover::before,
#p-personal .vector-menu-content-list > li:first-child > a:hover::before,
.navbar-personaltools > li:first-child > a:hover::before {
    transform: translateY(-50%) scale(1.2) !important;
    box-shadow: 0 0 10px rgba(var(--bright-accent), 0.6) !important;
    border-color: rgb(var(--white-monochrome)) !important;
}
/* Echo扩展通知图标修复 */
#pt-notifications-alert,
#pt-notifications-notice,
.mw-echo-notifications-badge,
.mw-echo-notification-badge-nojs {
    background-color: transparent !important;
    border: none !important;
}
 
#pt-notifications-alert .mw-echo-notifications-badge:before,
#pt-notifications-notice .mw-echo-notifications-badge:before,
.mw-echo-notifications-badge:before {
    color: rgb(var(--bright-accent)) !important;
    filter: none !important;
    opacity: 1 !important;
}
 
.mw-echo-notifications-badge:after,
.mw-echo-notification-badge-nojs:after {
    background-color: rgb(var(--bright-accent)) !important;
    color: rgb(var(--black-monochrome)) !important;
    border: 1px solid rgb(var(--black-monochrome)) !important;
    opacity: 1 !important;
}
 
/* 只修改通知图标的颜色 */
/* Echo图标蓝色风格 - Windows XP主题 */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray {
    filter: invert(34%) sepia(37%) saturate(2476%) hue-rotate(201deg) brightness(97%) contrast(85%);
}
 
/* 或者更直接的方式，使用颜色而不是filter */
#pt-notifications-alert .mw-echo-notifications-badge:before,
#pt-notifications-notice .mw-echo-notifications-badge:before,
.mw-echo-notifications-badge:before {
    color: rgb(49, 106, 197) !important; /* 使用XP蓝色 */
    filter: none !important;
    opacity: 1 !important;
}
 
/* 悬停时变亮 */
#pt-notifications-alert:hover .mw-echo-notifications-badge:before,
#pt-notifications-notice:hover .mw-echo-notifications-badge:before {
    color: rgb(82, 153, 235) !important; /* 使用XP浅蓝色 */
}
/* 目录框样式 */
#toc, .toc {
    background-color: rgb(var(--gray-monochrome)) !important;
    border: 2px solid rgb(var(--bright-accent)) !important;
    padding: 0.5em !important;
    font-family: var(--body-font) !important;
}
 
.toc .toctitle, #toc .toctitle {
    background-color: rgb(var(--bright-accent)) !important;
    color: rgb(var(--black-monochrome)) !important;
    text-align: center !important;
    padding: 0.25em !important;
    margin: -0.5em -0.5em 0.5em -0.5em !important;
    font-weight: bold !important;
}
 
.toc ul, #toc ul {
    margin: 0 !important;
    padding: 0 0 0 1.5em !important;
}
 
.toc a, #toc a {
    color: rgb(var(--bright-accent)) !important;
    text-decoration: none !important;
}
 
.toc a:hover, #toc a:hover {
    color: rgb(var(--white-monochrome)) !important;
    text-decoration: underline !important;
}
 
.tocnumber {
    color: rgb(var(--pale-accent)) !important;
}
/* 简化的导航栏布局 */
.navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}
 
.navbar-brand {
    margin-right: 20px !important;
    flex-shrink: 0 !important;
}
 
.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}
 
.navbar-nav > li {
    margin: 0 10px !important;
}
 
.navbar-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
}
 
/* 搜索框间距修复 */
#searchform {
    margin: 0 10px !important;
}
 
/* 响应式修复 */
@media (max-width: 767px) {
    .navbar {
        flex-wrap: wrap !important;
    }
   
    .navbar-collapse {
        width: 100% !important;
    }
}
/* 修复logo样式 */
.navbar-brand img,
.navbar .logo img,
#p-logo img,
.navbar-header img {
    border: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 40px !important;
    vertical-align: middle !important;
}
 
.navbar-brand,
.navbar .logo,
#p-logo,
.navbar-header {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 5px 15px !important;
    margin: 0 !important;
}
/* 完全重置TOC样式 - Windows XP风格 */
#toc, .toc, .chameleon-toc, .mw-toc, #mw-toc, .Table_of_Contents {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 2px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    padding: 35px 10px 10px !important; /* 上方留出标题空间 */
    margin: 1em 0 !important;
    position: relative !important;
    border-radius: 0 !important;
    width: auto !important;
    max-width: 360px !important; /* 限制最大宽度 */
    min-width: 200px !important;
    display: block !important; /* 改用块级显示 */
    float: right !important; /* 向右浮动 */
    clear: right !important;
    overflow: visible !important;
    z-index: 1 !important;
}
 
/* 自定义标题栏 */
#toc::before, .toc::before, .chameleon-toc::before, .mw-toc::before, #mw-toc::before, .Table_of_Contents::before {
    content: "Contents" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important;
    color: white !important;
    padding: 5px 10px !important;
    font-weight: bold !important;
    text-shadow: var(--text-shadow) !important;
    border-bottom: 1px solid rgb(var(--xp-window-border)) !important;
    text-align: left !important;
    height: auto !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    display: block !important;
    z-index: 2 !important;
}
 
/* 处理原始标题和关闭按钮 */
.toc .toctitle, #toc .toctitle, .chameleon-toc .toctitle,
.mw-toc-heading, .tocheader, .toctoggle, .toctogglecheckbox {
    display: none !important; /* 隐藏原始标题 */
}
 
/* 确保目录列表可见 */
.toc ul, #toc ul, .chameleon-toc ul,
.mw-toc ul, #mw-toc ul, .Table_of_Contents ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0.5em 0 !important;
    padding: 0 0 0 1.5em !important;
    list-style-type: disc !important;
    text-align: left !important;
    max-height: none !important;
    overflow: visible !important;
}
 
/* 确保目录列表项可见 */
.toc li, #toc li, .chameleon-toc li,
.mw-toc li, #mw-toc li, .Table_of_Contents li {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
    color: rgb(var(--xp-text)) !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}
 
/* 链接样式 */
.toc a, #toc a, .chameleon-toc a,
.mw-toc a, #mw-toc a, .Table_of_Contents a {
    display: inline !important;
    color: rgb(var(--link-color)) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}
 
.toc a:hover, #toc a:hover, .chameleon-toc a:hover,
.mw-toc a:hover, #mw-toc a:hover, .Table_of_Contents a:hover {
    color: rgb(var(--hover-link-color)) !important;
    text-decoration: underline !important;
}
 
/* 目录编号样式 */
.tocnumber {
    color: rgb(var(--xp-blue)) !important;
    font-weight: bold !important;
    margin-right: 0.3em !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}
 
/* 强制显示所有子目录 */
.toc .toclevel-1 ul,
.toc .toclevel-2 ul,
.toc .toclevel-3 ul,
#toc .toclevel-1 ul,
#toc .toclevel-2 ul,
#toc .toclevel-3 ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
 
/* 整个目录容器设置 */
#mw-content-text .toc,
#mw-content-text #toc {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
/* CommonJS功能 */
/* 这些样式将由JavaScript功能使用 */

2025年5月11日 (日) 15:22的最新版本

/* Windows XP风格MediaWiki主题 - 完整迁移自Wikidot */

/* 导入所需字体 */
@import url("https://fonts.googleapis.com/css2?family=Microsoft+Sans+Serif&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-16px.css");
@import url("https://fastly.jsdelivr.net/gh/hoah2333/Fonts@main/Typeface-VonwaonBitmap-12px.css");
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
    /* 主题基础设置 */
    --fade-in-delay: 0.1s;
    --theme-base: "xp-style";
    --theme-id: "windows-xp";
    --theme-name: "Windows XP Theme";
    
    /* 字体设置 - 保持原有字体 */
    --body-font: "VonwaonBitmap 16px", VT323, monospace;
    --header-font: "VonwaonBitmap 16px", VT323, monospace;
    --title-font: "VonwaonBitmap 16px", VT323, monospace;
    --mono-font: "VonwaonBitmap 16px", VT323, monospace;
    --pixel-font-16: 'VonwaonBitmap 16px', VT323, monospace;
    --pixel-font-12: 'VonwaonBitmap 12px', VT323, monospace;
    --base-font-size: 14px;
    
    /* Windows XP 颜色方案 */
    --xp-blue: 49, 106, 197;
    --xp-blue-light: 82, 153, 235;
    --xp-blue-dark: 16, 35, 85;
    --xp-green: 57, 154, 48;
    --xp-button: 192, 192, 192;
    --xp-window-border: 0, 0, 0;
    --xp-window-bg: 236, 233, 216;
    --xp-text: 0, 0, 0;
    
    /* 颜色方案 - 迁移并适配XP风格 */
    --white-monochrome: 255, 255, 255;
    --pale-gray-monochrome: 236, 233, 216;
    --light-gray-monochrome: 192, 192, 192;
    --gray-monochrome: 128, 128, 128;
    --black-monochrome: 0, 0, 0;
    --bright-accent: var(--xp-blue);
    --medium-accent: var(--xp-blue);
    --dark-accent: var(--xp-blue-dark);
    --pale-accent: var(--xp-blue-light);
    
    /* 链接颜色 */
    --link-color: 0, 0, 255;
    --visited-link-color: 128, 0, 128;
    --hover-link-color: 0, 0, 255;
    
    /* 文本阴影 */
    --text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    
    /* 边框和阴影 */
    --window-border: 1px solid rgb(var(--xp-window-border));
    --window-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 应用全局字体 */
body {
    font-family: var(--body-font) !important;
    font-size: var(--base-font-size) !important;
    line-height: 1.5 !important;
    background-color: #3a6ea5; /* 经典XP桌面蓝色背景 */
    background-image: url("/aoh2wiki/images/b/be/Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: rgb(var(--xp-text));
}

/* 标题字体 */
h1, h2, h3, h4, h5, h6, #firstHeading {
    font-family: var(--title-font);
    color: rgb(var(--white-monochrome));
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    padding: 5px 10px;
    margin-top: 10px;
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-shadow: var(--text-shadow);
}

/* 窗口操作按钮 - 关闭、最大化、最小化 */
h1::after, 
h2::after,
h3::after,
h4::after,
h5::after,
h6::after,
#firstHeading::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
}

h1::before, 
h2::before,
h3::before,
h4::before,
h5::before,
h6::before,
#firstHeading::before {
    content: "□";
    position: absolute;
    top: 2px;
    right: 25px;
    width: 16px;
    height: 16px;
    background-color: rgb(var(--light-gray-monochrome));
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: black;
    cursor: pointer;
}

h1 span::before, 
h2 span::before,
h3 span::before,
h4 span::before,
h5 span::before,
h6 span::before,
#firstHeading span::before {
    content: "_";
    position: absolute;
    top: 2px;
    right: 45px;
    width: 16px;
    height: 16px;
    background-color: rgb(var(--light-gray-monochrome));
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 14px;
    font-size: 12px;
    color: black;
    font-weight: bold;
    cursor: pointer;
}

/* 链接样式 */
a {
    color: rgb(var(--link-color));
    text-decoration: none;
}

a:visited {
    color: rgb(var(--visited-link-color));
}

a:hover {
    color: rgb(var(--hover-link-color));
    text-decoration: underline;
}

/* ">" 箭头指示符 - 保留原样 */
a:hover::before {
    content: "> ";
}


/* 背景样式 */
html, body {
    background-color: #3a6ea5 !important; /* 保留XP桌面风格 */
}

/* 搜索框和搜索按钮样式 */
#searchButton, 
.searchButton,
input[type="submit"],
input[type="button"],
.mw-ui-button,
button[name="go"],
button[name="fulltext"],
.mw-ui-button.mw-ui-progressive {
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
    border: 1px solid #ababab !important;
    color: black !important;
    font-family: var(--body-font) !important;
    padding: 3px 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}

#searchButton:hover,
.searchButton:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.mw-ui-button:hover,
button[name="go"]:hover,
button[name="fulltext"]:hover,
.mw-ui-button.mw-ui-progressive:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* 分类条样式 */
#catlinks,
.catlinks {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 1px solid rgb(var(--xp-window-border)) !important;
    padding: 0.5em !important;
    margin-top: 1em !important;
    font-family: var(--body-font) !important;
    box-shadow: var(--window-shadow) !important;
}

#catlinks a,
.catlinks a {
    color: rgb(var(--link-color)) !important;
    text-decoration: none !important;
}

#catlinks a:hover,
.catlinks a:hover {
    color: rgb(var(--hover-link-color)) !important;
    text-decoration: underline !important;
}

/* 工具栏样式 */
#footer-info,
#footer-places,
.footer-places,
.footer-info {
    background-color: rgb(var(--xp-window-bg)) !important;
    border-top: 1px solid rgb(var(--xp-window-border)) !important;
    color: rgb(var(--xp-text)) !important;
    padding: 0.5em 1em !important;
    font-family: var(--body-font) !important;
}

#footer-info a,
#footer-places a {
    color: rgb(var(--link-color)) !important;
}

#footer-info a:hover,
#footer-places a:hover {
    color: rgb(var(--hover-link-color)) !important;
}

/* 主内容区背景 */
#content {
    background-color: rgb(var(--xp-window-bg));
    position: relative;
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin: 10px auto;
    padding: 0;
    border-radius: 0;
}

/* 导航栏 */
.navbar, 
.navbar.navbar-default,
.navbar-light {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 1px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    border-radius: 0 !important;
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar-light .navbar-nav .nav-link {
    color: rgb(var(--link-color)) !important;
    font-family: var(--header-font) !important;
}

.navbar .nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
    color: rgb(var(--hover-link-color)) !important;
    background-color: rgba(var(--xp-blue), 0.1) !important;
}

/* 下拉菜单 */
.dropdown-menu {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 1px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    border-radius: 0 !important;
}

.dropdown-item {
    color: rgb(var(--link-color)) !important;
    font-family: var(--body-font) !important;
}

.dropdown-item:hover {
    background-color: rgba(var(--xp-blue), 0.1) !important;
    color: rgb(var(--hover-link-color)) !important;
}

/* 侧边栏 */
#mw-navigation, #mw-panel, .sidebar {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 2px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    border-radius: 0 !important;
}

#mw-navigation h2, #mw-panel h3, .sidebar h3 {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important;
    color: rgb(var(--white-monochrome)) !important;
    font-family: var(--header-font) !important;
    border-bottom: 1px solid rgb(var(--xp-window-border)) !important;
    padding: 5px 10px !important;
    text-shadow: var(--text-shadow) !important;
    position: relative !important;
}

/* 工具栏 */
#p-tb, .tools-menu {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 2px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    border-radius: 0 !important;
}

/* 内容区域 */
#content, .mw-body {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 2px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    border-radius: 0 !important;
}

/* 页脚 */
#footer, .footer {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 2px solid rgb(var(--xp-window-border)) !important;
    border-top: 1px solid rgb(var(--xp-window-border)) !important;
    color: rgb(var(--xp-text)) !important;
    box-shadow: var(--window-shadow) !important;
    border-radius: 0 !important;
    margin: 10px auto !important;
    padding: 10px !important;
}

/* 搜索框 */
#searchInput, .form-control {
    background-color: white !important;
    border: 1px solid #7f9db9 !important;
    color: rgb(var(--xp-text)) !important;
    font-family: var(--body-font) !important;
    padding: 3px 5px !important;
}

/* 按钮 */
.btn, .mw-ui-button {
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0) !important;
    border: 1px solid #ababab !important;
    color: black !important;
    font-family: var(--body-font) !important;
    padding: 3px 8px !important;
    border-radius: 0 !important;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.btn:hover, .mw-ui-button:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9) !important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* 表格 */
.wikitable, table.wikitable {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 2px solid rgb(var(--xp-window-border)) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    box-shadow: var(--window-shadow) !important;
}

.wikitable th {
    background: linear-gradient(to bottom, #e3e3e3, #d0d0d0) !important;
    border: 1px solid #ababab !important;
    color: black !important;
    padding: 5px !important;
}

.wikitable td {
    border: 1px solid #ababab !important;
    background-color: white !important;
    color: black !important;
    padding: 5px !important;
}

/* 代码块和预格式文本 */
pre, code, .mw-code {
    background-color: white !important;
    border: 1px solid #ababab !important;
    color: black !important;
    font-family: var(--mono-font) !important;
    padding: 5px !important;
}

/* 链接颜色 */
a {
    color: rgb(var(--link-color)) !important;
}

a:visited {
    color: rgb(var(--visited-link-color)) !important;
}

a:hover {
    color: rgb(var(--hover-link-color)) !important;
    text-decoration: underline !important;
}

/* 扫描线动画 - 修改为半透明灰色 */
.scan-animation {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
}

/* 主扫描线 - 较宽较慢 */
.scan-animation::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(128, 128, 128, 0) 0%,
        rgba(128, 128, 128, 0.1) 20%,
        rgba(128, 128, 128, 0.2) 50%,
        rgba(128, 128, 128, 0.1) 80%,
        rgba(128, 128, 128, 0) 100%
    );
    box-shadow: 
        0 0 8px rgba(128, 128, 128, 0.15),
        0 0 15px rgba(128, 128, 128, 0.1);
    animation: scanMain 12s linear infinite;
    opacity: 0.4;
}

/* 副扫描线 - 中等速度 */
.scan-animation::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(128, 128, 128, 0) 0%,
        rgba(128, 128, 128, 0.3) 50%,
        rgba(128, 128, 128, 0) 100%
    );
    box-shadow: 0 0 6px rgba(128, 128, 128, 0.2);
    animation: scanSecondary 7s linear infinite;
    animation-delay: -3s;
    opacity: 0.25;
}

/* 快速扫描线 - 细小快速 */
.scan-animation .fast-scan {
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    background: rgba(128, 128, 128, 0.6);
    box-shadow: 0 0 3px rgba(128, 128, 128, 0.3);
    animation: scanFast 3s linear infinite;
    animation-delay: -1.5s;
    opacity: 0.15;
}

/* 各个扫描线的动画 */
@keyframes scanMain {
    0% { 
        top: -2rem;
        opacity: 0.6;
    }
    50% {
        opacity: 0.3;
    }
    100% { 
        top: 100vh;
        opacity: 0.6;
    }
}

@keyframes scanSecondary {
    0% { 
        top: -1rem;
        opacity: 0.4;
    }
    35% {
        opacity: 0.2;
    }
    70% {
        opacity: 0.5;
    }
    100% { 
        top: 100vh;
        opacity: 0.4;
    }
}

@keyframes scanFast {
    0% { 
        top: -0.3rem;
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
    100% { 
        top: 100vh;
        opacity: 0.3;
    }
}

/* 保留原始的淡入效果 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 应用动画到内容 */
.mw-parser-output > * {
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}

/* 延迟动画 */
.mw-parser-output > *:nth-child(1) { animation-delay: 0.1s; }
.mw-parser-output > *:nth-child(2) { animation-delay: 0.2s; }
.mw-parser-output > *:nth-child(3) { animation-delay: 0.3s; }
.mw-parser-output > *:nth-child(4) { animation-delay: 0.4s; }
.mw-parser-output > *:nth-child(5) { animation-delay: 0.5s; }
.mw-parser-output > *:nth-child(n+6) { animation-delay: 0.6s; }

/* 修复代码区域样式 */
.mw-highlight pre {
    background-color: white !important;
    border: 1px solid #ababab !important;
    padding: 1em !important;
    overflow: auto !important;
}

/* 语法高亮颜色 - 保持原有值 */
.mw-highlight .k { color: #0000AA !important; } /* 关键字 */
.mw-highlight .s { color: #006600 !important; } /* 字符串 */
.mw-highlight .c { color: #666666 !important; } /* 注释 */
.mw-highlight .n { color: #000000 !important; } /* 名称 */
.mw-highlight .o { color: #000000 !important; } /* 运算符 */

/* 引用样式 - Windows XP风格 */
.lightstyled-quote, .darkstyled-quote {
    background-color: rgb(var(--xp-window-bg));
    color: rgb(var(--xp-text));
    border: 1px solid #ababab;
    padding: 10px;
    margin: 10px 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    border-left: 4px solid rgb(var(--xp-blue));
    position: relative;
}

.lightstyled-quote::before, .darkstyled-quote::before {
    content: "Information";
    position: absolute;
    top: -22px;
    left: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 2px 10px;
    font-weight: bold;
    font-size: 0.9em;
    text-shadow: var(--text-shadow);
}

/* 块样式 - Windows XP风格 */
.lightblock, .darkblock {
    background-color: rgb(var(--xp-window-bg));
    color: rgb(var(--xp-text));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    padding: 10px;
    margin: 10px 0;
    position: relative;
    border-radius: 0;
}

.lightblock::before, .darkblock::before {
    content: "Message";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-align: left;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
}

.lightblock::after, .darkblock::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

/* 保留黑幕效果 - 行826-947 */
.heimu,
.heimu rt{
    --heimu-color:#252525;
    --heimu-text-color:#fff;
    --heimu-link-color:#add8e6;
    --heimu-visited-link-color:#c5cae9;
    --heimu-new-link-color:#fcc;
    --heimu-new-visited-link-color:#ef9a9a;
    --heimu-extiw-visited-link-color:#d1c4e9;

    background-color:var(--heimu-color);
}

.heimu,
.heimu a,
a .heimu,
a.new .heimu,
span.heimu a:visited,
span.heimu a.new,
span.heimu a.external,
span.heimu a.external:visited,
span.heimu a.extiw,
span.heimu a.extiw:visited,
span.heimu a.mw-disambig,
span.heimu a.mw-redirect{
    transition:color 0.13s linear;
    color:var(--heimu-color);
    text-shadow:none;
}

span.heimu:hover,
span.heimu:active{
    color:var(--heimu-text-color);
}

span.heimu:hover a,
a:hover span.heimu{
    color:var(--heimu-link-color);
}

span.heimu:hover a:visited,
a:visited:hover span.heimu{
    color:var(--heimu-visited-link-color);
}

span.heimu:hover a.new,
a.new:hover span.heimu{
    color:var(--heimu-new-link-color);
}

span.heimu a.new:hover:visited,
a.new:hover:visited span.heimu{
    color:var(--heimu-new-visited-link-color);
}

span.heimu:hover a.extiw:visited,
a.extiw:visited:hover span.heimu{
    color:var(--heimu-extiw-visited-link-color);
}
[color-mode="dark"] .heimu,
[color-mode="dark"] .heimu rt{
    --heimu-color:#5e6272;
}

/* 保留彩幕效果 - 行1778-1838 */
.colormu-drk {
	color: #FFF;
}
.colormu-bri {
	color: #000;
}
.colormu-drk:not(.colormu_toggle_on) a {
	color: #add8e6;
}
.colormu-drk:not(.colormu_toggle_on) a.new {
	color: #FCC;
}
.colormu>span, .colormu a, .colormu a>span {
	transition: color 0.2s;
}
 
.colormu:not(:hover):not(:active):not(.colormu_toggle_on)>span,
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a {
	color: transparent;
}
 
/* for T:Coloredlink in T:彩幕 */
.colormu:not(:hover):not(:active):not(.colormu_toggle_on) a>span {
	color: transparent !important;
}
 
/* for T:彩幕 in link */
a .colormu-bri {
	color: inherit;
}
a:hover .colormu>span, a:active .colormu>span,
/* and for MediaWiki:Gadget-heimu-toggle.js */
.colormu-drk.colormu_toggle_on, .colormu_toggle_on>span, .colormu-drk.colormu_toggle_on a>span {
	color: inherit !important;
}

/* 橙幕效果 - 修改为Windows XP样式 */
.blackmu,
.blackmu rt {
    --blackmu-color: var(--xp-blue);
    --blackmu-text-color: 255, 255, 255;
    --blackmu-link-color: 173, 216, 230;
    --blackmu-visited-link-color: 197, 202, 233;
    --blackmu-new-link-color: 255, 204, 204;
    --blackmu-new-visited-link-color: 239, 154, 154;
    --blackmu-extiw-visited-link-color: 209, 196, 233;
    
    background-color: rgb(var(--blackmu-color));
}

.blackmu,
.blackmu a,
a .blackmu,
a.new .blackmu,
span.blackmu a:visited,
span.blackmu a.new,
span.blackmu a.external,
span.blackmu a.external:visited,
span.blackmu a.extiw,
span.blackmu a.extiw:visited,
span.blackmu a.mw-disambig,
span.blackmu a.mw-redirect {
    transition: color 0.13s linear;
    color: rgb(var(--blackmu-color));
    text-shadow: none;
}

span.blackmu:hover,
span.blackmu:active {
    color: rgb(var(--blackmu-text-color));
}

span.blackmu:hover a,
a:hover span.blackmu {
    color: rgb(var(--blackmu-link-color));
}

/* 保留特效库代码 - 行949-1777 */
/*
	该文档为一个hover特效库，由一些常用的效果以及GitHub上的开源项目“Hover.css”的一些部分构成。
	请使用hovers在页面中进行载入。
*/

/* hover状态切换 */
.hover-change,
.hover-remote {
  position: relative;
  display: inline-block;
  transition: opacity 0.5s linear;
}

.hover-change-before,
.hover-change-after,
.hover-remote-target {
  transition: inherit;
}

.hover-change-after,
.hover-remote-target {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
.hover-remote-target {
  left: 100%;
}

.hover-change-after[style^='right:'],
.hover-change-after[style*=' right:'],
.hover-remote-after[style^='right:'],
.hover-remote-after[style*=' right:'] {
  left: initial;
}

.hover-change-after[style^='bottom:'],
.hover-change-after[style*=' bottom:'],
.hover-remote-after[style^='bottom:'],
.hover-remote-after[style*=' bottom:'] {
  top: initial;
}

.hover-change-after:hover,
.hover-remote-target {
  opacity: 0;
  margin-left: -9999px;
}

/* 主要用于制作hover形式的标签页(tab)切换 */
.hover-tab-mode {
  position: relative;
  transition: none;
}
.hover-tab-mode .hover-remote {
  transition: inherit;
  position: static;
}

/* 闪烁效果 */
.hover-change.flash:hover .hover-change-before {
  margin-left: -9999px;
}

.hover-change:hover > .hover-change-before,
.hover-remote > .hover-remote-target,
.hover-change:hover > a > .hover-change-before,
.hover-remote > a > .hover-remote-target {
  opacity: 0;
}

.hover-change:hover > .hover-change-after,
.hover-remote:hover > .hover-remote-target,
.hover-change:hover > a > .hover-change-after,
.hover-remote:hover > a > .hover-remote-target {
  opacity: 1;
  margin-left: initial;
}

/* 基类 */
[class*='hovers-'] {
  display: inline-block;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transform: perspective(1px) translateZ(0);
  vertical-align: middle;
  transition-duration: 0.25s;
  transition-property: all;
}

/* 旋转放大 */
.hovers-rotate-shrink {
  transition-duration: 0.5s;
  transform: rotate(0) scale(0.75);
}
.hovers-rotate-shrink:hover {
  transform: rotate(360deg) scale(1);
}

.hovers-rotate-shrink-reverse {
  transition-duration: 0.5s;
  transform: rotate(360deg) scale(0.75);
}

.hovers-rotate-shrink-reverse:hover {
  transform: rotate(0) scale(1);
}

/* 旋转 */
.hovers-rotate,
.hovers-rotate-reverse:hover {
  transition-duration: 0.5s;
  transform: rotate(0);
}

.hovers-rotate-reverse,
.hovers-rotate:hover {
  transition-duration: 0.5s;
  transform: rotate(360deg);
}

/* 正常 => 浅 */
.hovers-fade-deep,
.hovers-fade,
.hovers-fade-shallow {
  opacity: 1;
}
.hovers-fade-deep:hover,
.hovers-fade-deep.active {
  opacity: 0.35;
}
.hovers-fade:hover,
.hovers-fade.active {
  opacity: 0.5;
}
.hovers-fade-shallow:hover,
.hovers-fade-shallow.active {
  opacity: 0.75;
}

/* 浅 => 正常 */
.hovers-bloom-deep {
  opacity: 0.35;
}
.hovers-bloom {
  opacity: 0.5;
}
.hovers-bloom-shallow {
  opacity: 0.75;
}

.hovers-bloom-deep:hover,
.hovers-bloom-deep.active,
.hovers-bloom:hover,
.hovers-bloom.active,
.hovers-bloom-shallow:hover,
.hovers-bloom-shallow.active {
  opacity: 1;
}

/* 正常 => 大 */
.hovers-grow-deep,
.hovers-grow,
.hovers-grow-shallow {
  transform: scale(1);
}
.hovers-grow-deep:hover,
.hovers-grow-deep.active {
  transform: scale(1.5);
}
.hovers-grow:hover,
.hovers-grow.active {
  transform: scale(1.25);
}
.hovers-grow-shallow:hover,
.hovers-grow-shallow.active {
  transform: scale(1.1);
}

/* 正常 => 小 */
.hovers-shrink-deep:hover,
.hovers-shrink-deep.active,
.hovers-shrink:hover,
.hovers-shrink.active,
.hovers-shrink-shallow:hover,
.hovers-shrink-shallow.active {
  transform: scale(1);
}
.hovers-shrink-deep {
  transform: scale(0.5);
}
.hovers-shrink {
  transform: scale(0.75);
}
.hovers-shrink-shallow {
  transform: scale(0.9);
}

/* 左右抖动 */
@keyframes shake-flexible {
  25% {
    transform: translateX(-0.0625em);
  }

  50% {
    transform: translateX(0.0625em);
  }

  75% {
    transform: translateX(-0.0625em);
  }
}

.hovers-shake-flexible:hover,
.hovers-shake-flexible.active {
  animation: shake-flexible 0.5s ease-out;
}

@keyframes shake {
  25% {
    transform: translateX(-8px);
  }

  50% {
    transform: translateX(8px);
  }

  75% {
    transform: translateX(-8px);
  }
}

.hovers-shake:hover,
.hovers-shake.active {
  animation: shake 0.5s ease-out;
}

/* 上下抖动 */
@keyframes bounce-flexible {
  25% {
    transform: translateY(-0.0625em);
  }

  50% {
    transform: translateY(0.0625em);
  }

  75% {
    transform: translateY(-0.0625em);
  }
}

.hovers-bounce-flexible:hover,
.hovers-bounce-flexible.active {
  animation: bounce-flexible 0.5s ease-out;
}

@keyframes bounce {
  25% {
    transform: translateY(-8px);
  }

  50% {
    transform: translateY(8px);
  }

  75% {
    transform: translateY(-8px);
  }
}

.hovers-bounce:hover,
.hovers-bounce.active {
  position: relative;
  left: 0;
  animation: bounce 0.5s ease-out;
}

/* 绕顶端中点抖动 */
@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 10deg);
  }

  40% {
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.hovers-swing {
  transform-origin: top center;
}
.hovers-swing:hover,
.hovers-swing.active {
  animation: swing 0.75s ease-out;
}

/* 正常 => 大 */
@keyframes pulse-grow {
  to {
    transform: scale(1.1);
  }
}

.hovers-pulse-grow:hover,
.hovers-pulse-grow.active {
  animation: pulse-grow 0.5s linear infinite alternate;
}

/* 正常 => 小 */
@keyframes pulse-shrink {
  to {
    transform: scale(0.9);
  }
}

.hovers-pulse-shrink:hover,
.hovers-pulse-shrink.active {
  animation: pulse-shrink 0.5s linear infinite alternate;
}

/* 正常 => 小 */
@keyframes push {
  50% {
    transform: scale(0.8);
  }
}

.hovers-push:hover,
.hovers-push.active {
  animation: push 0.3s linear;
}

/* 正常 => 大 */
@keyframes pop {
  50% {
    transform: scale(1.2);
  }
}

.hovers-pop:hover,
.hovers-pop.active {
  animation: pop 0.3s linear;
}

/* 正常 => 大 => 正常 => 大 */
.hovers-bounce-in:hover,
.hovers-bounce-in.active {
  transform: scale(1.2);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* 正常 => 小 => 正常 => 小 */
.hovers-bounce-out:hover,
.hovers-bounce-out.active {
  transform: scale(0.8);
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}

/* 倾斜 */
.hovers-tilt:hover,
.hovers-tilt.active {
  transition-duration: 0.3s;
  transform: rotate(4deg);
}

/* 倾斜 + 放大 */
.hovers-grow-rotate:hover,
.hovers-grow-rotate.active {
  transition-duration: 0.3s;
  transform: scale(1.1) rotate(4deg);
}

/* 升起 */
.hovers-float:hover,
.hovers-float.active {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transform: translateY(-8px);
}

/* 下沉 */
.hovers-sink:hover,
.hovers-sink.active {
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  transform: translateY(8px);
}

/* 飘浮 */
@keyframes bob {
  0% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes bob-float {
  100% {
    transform: translateY(-10px);
  }
}

.hovers-bob:hover,
.hovers-bob.active {
  animation-name: bob-float, bob;
  animation-duration: 0.3s, 1.5s;
  animation-delay: 0s, 0.3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}

/* 悬挂 */
@keyframes hang {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(10px);
  }
}
@keyframes hang-sink {
  100% {
    transform: translateY(10px);
  }
}

.hovers-hang:hover,
.hovers-hang.active {
  animation-name: hang-sink, hang;
  animation-duration: 0.3s, 1.5s;
  animation-delay: 0s, 0.3s;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards;
  animation-direction: normal, alternate;
}

/* 非对称 */
.hovers-skew:hover,
.hovers-skew.active {
  transform: skew(-10deg);
}

/* 非对称-左 */
.hovers-skew-forward {
  transform-origin: 0 100%;
}
.hovers-skew-forward:hover,
.hovers-skew-forward.active {
  transform: skew(-10deg);
}

/* 非对称-右 */
.hovers-skew-backward {
  transform-origin: 0 100%;
}
.hovers-skew-backward:hover,
.hovers-skew-backward.active {
  transform: skew(10deg);
}

/* 垂直抖动 */
@keyframes wobble-vertical {
  16.65% {
    transform: translateY(8px);
  }
  33.3% {
    transform: translateY(-6px);
  }
  49.95% {
    transform: translateY(4px);
  }
  66.6% {
    transform: translateY(-2px);
  }
  83.25% {
    transform: translateY(1px);
  }
  100% {
    transform: translateY(0);
  }
}

.hovers-wobble-vertical:hover,
.hovers-wobble-vertical.active {
  animation-name: wobble-vertical;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* 水平抖动 */
@keyframes wobble-horizontal {
  16.65% {
    transform: translateX(8px);
  }
  33.3% {
    transform: translateX(-6px);
  }
  49.95% {
    transform: translateX(4px);
  }
  66.6% {
    transform: translateX(-2px);
  }
  83.25% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}
.hovers-wobble-horizontal:hover,
.hovers-wobble-horizontal.active {
  animation-name: wobble-horizontal;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* 右下弹回 */
@keyframes wobble-to-bottom-right {
  16.65% {
    transform: translate(8px, 8px);
  }
  33.3% {
    transform: translate(-6px, -6px);
  }
  49.95% {
    transform: translate(4px, 4px);
  }
  66.6% {
    transform: translate(-2px, -2px);
  }
  83.25% {
    transform: translate(1px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

.hovers-wobble-to-bottom-right:hover, 
.hovers-wobble-to-bottom-right.active {
  animation-name: wobble-to-bottom-right;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* 右上弹回 */
@keyframes wobble-to-top-right {
  16.65% {
    transform: translate(8px, -8px)
  }
  33.3% {
    transform: translate(-6px, 6px);
  }
  49.95% {
    transform: translate(4px, -4px);
  }
  66.6% {
    transform: translate(-2px, 2px);
  }
  83.25% {
    transform: translate(1px, -1px);
  }
  100% {
    transform: translate(0);
  }
}

.hovers-wobble-to-top-right:hover,
.hovers-wobble-to-top-right.active {
  animation-name: wobble-to-top-right;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* 果冻 */
@keyframes wobble-top {
  16.65% {
    transform: skew(-12deg);
  }
  33.3% {
    transform: skew(10deg);
  }
  49.95% {
    transform: skew(-6deg);
  }
  66.6% {
    transform: skew(4deg);
  }
  83.25% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(0);
  }
}

/* 赘肉 */
.hovers-wobble-top {
  transform-origin: 0 100%;
}
.hovers-wobble-top:hover,
.hovers-wobble-top.active {
  animation-name: wobble-top;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

@keyframes wobble-bottom {
  16.65% {
    transform: skew(-12deg);
  }
  33.3% {
    transform: skew(10deg);
  }
  49.95% {
    transform: skew(-6deg);
  }
  66.6% {
    transform: skew(4deg);
  }
  83.25% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(0);
  }
}

.hovers-wobble-bottom {
  transform-origin: 100% 0;
}
.hovers-wobble-bottom:hover,
.hovers-wobble-bottom.active {
  animation-name: wobble-bottom;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* 颤动 */
@keyframes wobble-skew {
  16.65% {
    transform: skew(-12deg);
  }
  33.3% {
    transform: skew(10deg);
  }
  49.95% {
    transform: skew(-6deg);
  }
  66.6% {
    transform: skew(4deg);
  }
  83.25% {
    transform: skew(-2deg);
  }
  100% {
    transform: skew(0);
  }
}
.hovers-wobble-skew:hover,
.hovers-wobble-skew.active {
  animation-name: wobble-skew;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

/* 振动 */
@keyframes buzz {
  50% {
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    transform: translateX(-3px) rotate(-2deg);
  }
}

.hovers-buzz:hover,
.hovers-buzz.active {
  animation-name: buzz;
  animation-duration: 0.15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 振出 */
@keyframes buzz-out {
  10% {
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    transform: translateX(1px) rotate(0);
  }
  100% {
    transform: translateX(-1px) rotate(0);
  }
}

.hovers-buzz-out:hover,
.hovers-buzz-out.active {
  animation-name: buzz-out;
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

/* 右移 */
.hovers-forward:hover,
.hovers-forward.active {
  transform: translateX(8px);
}

/* 左移 */
.hovers-backward:hover,
.hovers-backward.active {
  transform: translateX(-8px);
}

/* 自由移动 */
.hovers-top,
.hovers-left,
.hovers-bottom,
.hovers-right {
  transition: all 0.5s;
}

.hovers-top:hover,
.hovers-top.active {
  transform: translateY(-0.0625em);
}

.hovers-left:hover,
.hovers-left.active {
  transform: translateX(-0.0625em);
}

.hovers-bottom:hover,
.hovers-bottom.active {
  transform: translateY(0.0625em);
}

.hovers-right:hover,
.hovers-right.active {
  transform: translateX(0.0625em);
}

/* 滤镜 */
.hovers-blur,
.hovers-blur-reverse,
.hovers-brightness,
.hovers-brightness-reverse,
.hovers-contrast,
.hovers-contrast-reverse,
.hovers-grayscale,
.hovers-grayscale-reverse,
.hovers-invert,
.hovers-invert-reverse,
.hovers-saturate,
.hovers-saturate-reverse,
.hovers-sepia,
.hovers-sepia-reverse,
.hovers-hue-rotate,
.hovers-hue-rotate-reverse {
  transition-duration: 0.75s;
}

.hovers-blur:hover,
.hovers-blur.active,
.hovers-brightness:hover,
.hovers-brightness.active,
.hovers-contrast:hover,
.hovers-contrast.active,
.hovers-grayscale:hover,
.hovers-grayscale.active,
.hovers-invert:hover,
.hovers-invert.active,
.hovers-saturate:hover,
.hovers-saturate.active,
.hovers-sepia:hover,
.hovers-sepia.active,
.hovers-hue-rotate:hover,
.hovers-hue-rotate.active {
  filter: initial;
}

.hovers-blur {
  filter: blur(5px);
}

.hovers-blur-reverse:hover,
.hovers-blur-reverse.active {
  filter: blur(5px);
}

.hovers-brightness {
  filter: brightness(50%);
}

.hovers-brightness-reverse:hover,
.hovers-brightness-reverse.active {
  filter: brightness(50%);
}

.hovers-contrast {
  filter: contrast(50%);
}

.hovers-contrast-reverse:hover,
.hovers-contrast-reverse.active {
  filter: contrast(50%);
}

.hovers-grayscale {
  filter: grayscale(100%);
}

.hovers-grayscale-reverse:hover, 
.hovers-grayscale-reverse.active {
  filter: grayscale(100%);
}

.hovers-invert {
  filter: invert(100%);
}

.hovers-invert-reverse:hover,
.hovers-invert-reverse.active {
  filter: invert(100%);
}

.hovers-saturate {
  filter: saturate(200%);
}

.hovers-saturate-reverse:hover,
.hovers-saturate-reverse.active {
  filter: saturate(200%);
}

.hovers-sepia {
  filter: sepia(100%);
}

.hovers-sepia-reverse:hover,
.hovers-sepia-reverse.acitve {
  filter: sepia(100%);
}

.hovers-hue-rotate {
  filter: hue-rotate(180deg);
}

.hovers-hue-rotate-reverse:hover,
.hovers-hue-rotate-reverse.active {
  filter: hue-rotate(180deg);
}

/* 背景滑动 */
.hovers-sweep-to-right,
.hovers-sweep-to-left,
.hovers-sweep-to-bottom,
.hovers-sweep-to-top,
.hovers-radial-out,
.hovers-radial-in {
  position: relative;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
  overflow: hidden;
}

.hovers-sweep-to-right:before,
.hovers-sweep-to-left:before,
.hovers-sweep-to-bottom:before,
.hovers-sweep-to-top:before,
.hovers-radial-out:before,
.hovers-radial-in:before {
  content: '';
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  transform: scaleX(0);
  transition: inherit;
}
.hovers-sweep-to-bottom:before,
.hovers-sweep-to-top:before {
  transform: scaleY(0);
}
.hovers-radial-out:before,
.hovers-radial-in:before {
  border-radius: 50%;
  transform: scale(0);
}
.hovers-radial-in:before {
  transform: scale(2);
}

.hovers-sweep-to-right:before {
  transform-origin: 0 50%;
}
.hovers-sweep-to-left:before {
  transform-origin: 100% 50%;
}
.hovers-sweep-to-bottom:before {
  transform-origin: 50% 0;
}
.hovers-sweep-to-top:before {
  transform-origin: 50% 100%;
}
.hovers-radial-out:hover:before,
.hovers-radial-out.active:before {
  transform: scale(2);
}
.hovers-radial-in:hover:before,
.hovers-radial-in.active:before {
  transform: scale(0);
}

.hovers-sweep-to-right .hovers-content.center,
.hovers-sweep-to-left .hovers-content.center,
.hovers-sweep-to-bottom .hovers-content.center,
.hovers-sweep-to-top .hovers-content.center,
.hovers-radial-out .hovers-content.center,
.hovers-radial-in .hovers-content.center {
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-all;
}

.hovers-sweep-to-right:hover:before,
.hovers-sweep-to-left:hover:before,
.hovers-sweep-to-bottom:hover:before,
.hovers-sweep-to-top:hover:before,
.hovers-sweep-to-right.active:before,
.hovers-sweep-to-left:hover:before,
.hovers-sweep-to-bottom:hover:before,
.hovers-sweep-to-top:hover:before {
  transform: scaleX(1);
}

.hovers-sweep-to-right .hovers-content,
.hovers-sweep-to-left .hovers-content,
.hovers-sweep-to-bottom .hovers-content,
.hovers-sweep-to-top .hovers-content,
.hovers-radial-out .hovers-content,
.hovers-radial-in .hovers-content {
  width: 100%;
  height: 100%;
  position: absolute;
  transition-property: all;
  transition-duration: inherit;
  top: 0;
  left: 0;
  z-index: 11;
}

.hovers-sweep-to-right .hovers-content {
  left: initial;
  right: 100%;
}
.hovers-sweep-to-right:hover .hovers-content,
.hovers-sweep-to-right.active .hovers-content {
  right: 0;
}

.hovers-sweep-to-left .hovers-content {
  left: 100%;
}
.hovers-sweep-to-left:hover .hovers-content,
.hovers-sweep-to-left.active .hovers-content {
  left: 0;
}

.hovers-sweep-to-bottom .hovers-content {
  top: initial;
  bottom: 100%;
}
.hovers-sweep-to-bottom:hover .hovers-content,
.hovers-sweep-to-bottom.active .hovers-content {
  bottom: 0;
}

.hovers-sweep-to-top .hovers-content {
  top: 100%;
}
.hovers-sweep-to-top:hover .hovers-content,
.hovers-sweep-to-top.active .hovers-content {
  top: 0;
}

.hovers-radial-out .hovers-content,
.hovers-radial-in:hover .hovers-content,
.hovers-radial-in.active .hovers-content {
  opacity: 0;
}

.hovers-radial-in .hovers-content,
.hovers-radial-out:hover .hovers-content,
.hovers-radial-out.active .hovers-content {
  opacity: 1;
}

/* 默认em */
.hovers-border,
.hovers-trim,
.hovers-ripple-out,
.hovers-ripple-in,
.hovers-outline-out,
.hovers-outline-in,
.hovers-reveal {
  font-size: 160px;
  line-height: 16px;
}

/* 内边框滑出 */
.hovers-border,
.hovers-trim {
  position: relative;
  top: 0;
  left: 0;
  transition: all 0.3s;
}

.hovers-border:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transition: inherit;
  border-width: calc(0.0625em * 0.6);
  border-color: inherit;
  border-style: solid;
  border-radius: inherit;
  opacity: 0;
}

.hovers-border:hover:before,
.hovers-border.active:before {
  opacity: 1;
}

/* 带边距内边框 */
.hovers-trim:before {
  content: '';
  position: absolute;
  top: calc(0.0625em * 0.4);
  left: calc(0.0625em * 0.4);
  bottom: calc(0.0625em * 0.4);
  right: calc(0.0625em * 0.4);
  transition: inherit;
  border-width: calc(0.0625em * 0.6);
  border-color: inherit;
  border-style: solid;
  opacity: 0;
  border-radius: inherit;
}

.hovers-trim:hover:before,
.hovers-trim.active:before {
  opacity: 1;
}

/* 边框飞出与飞入 */
.hovers-ripple-out,
.hovers-ripple-in,
.hovers-outline-out,
.hovers-outline-in,
.hovers-reveal {
  animation-duration: 0.7s;
  animation-timing-function: ease-out;
  transition: all 0.3s;
}

.hovers-ripple-out:before,
.hovers-ripple-in:before,
.hovers-outline-out:before,
.hovers-outline-in:before,
.hovers-reveal:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: inherit;
  transition: inherit;
  border-width: calc(0.0625em * 0.6);
  border-color: inherit;
  border-style: solid;
  border-radius: inherit;
}
.hovers-ripple-out:before {
  opacity: 0;
}
.hovers-ripple-in:before {
  top: calc(-0.0625em * 1.2);
  right: calc(-0.0625em * 1.2);
  bottom: calc(-0.0625em * 1.2);
  left: calc(-0.0625em * 1.2);
  opacity: 0;
}
.hovers-outline-out:before {
  opacity: 0;
}
.hovers-outline-out:before {
  top: calc(-0.0625em * 1.6);
  right: calc(-0.0625em * 1.6);
  bottom: calc(-0.0625em * 1.6);
  left: calc(-0.0625em * 1.6);
  opacity: 0;
}
.hovers-reveal:before {
  border-width: 0;
  opacity: 0;
}

@keyframes ripple-out {
  50% {
    opacity: 1;
  }

  100% {
    top: calc(-0.0625em * 1.2);
    right: calc(-0.0625em * 1.2);
    bottom: calc(-0.0625em * 1.2);
    left: calc(-0.0625em * 1.2);
    opacity: 0;
  }
}
.hovers-ripple-out:hover:before,
.hovers-ripple-out.active:before {
  animation-name: ripple-out;
}

@keyframes ripple-in {
  50% {
    opacity: 1;
  }

  100% {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
  }
}
.hovers-ripple-in:hover:before,
.hovers-ripple-in.active:before {
  animation-name: ripple-in;
}

.hovers-outline-out:hover:before,
.hovers-outline-in:hover:before,
.hovers-outline-out.active:before,
.hovers-outline-in:hover:before {
  top: calc(-0.0625em * 0.8);
  right: calc(-0.0625em * 0.8);
  bottom: calc(-0.0625em * 0.8);
  left: calc(-0.0625em * 0.8);
  opacity: 1;
}

.hovers-reveal:hover:before,
.hovers-reveal.active:before {
  transform: translateY(0);
  border-width: calc(0.0625em * 0.4);
  opacity: 1;
}

/* 圆角化 */
.hovers-round-corners {
  overflow: hidden;
}
.hovers-round-corners:hover,
.hovers-round-corners.active {
  border-radius: 0.0625em;
}

/* 重叠：翻转切换 */

.hover-turn {
  position: relative;
  transform: translateZ(1px);
}

.hover-turn-before,
.hover-turn-after {
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes hover-turn {
  from {
    transform: rotateY(-90deg);
  }

  50% {
    transform: scale(1.2);
  }

  to {
    transform: rotateY(0);
  }
}

.hover-turn:not(:hover) .hover-turn-before,
.hover-turn:hover .hover-turn-after {
  animation: hover-turn 0.5s;
}

.hover-turn:hover .hover-turn-before,
.hover-turn:not(:hover) .hover-turn-after {
	opacity: 0;
}
/* [[Category:在模板名字空间下的CSS页面]] */


/* 信息框样式 - Windows XP风格 */
.infobox,
.notaninfobox {
    position: relative;
    clear: right;
    float: right;
    margin: 0 0 1em 1em;
    width: 350px;
    font-size: 90%;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    padding: 0;
    overflow: auto;
    z-index: 1;
    box-shadow: var(--window-shadow);
    border-radius: 0;
}

@media all and (max-width: 511px) {
    .notaninfobox {
        float: none;
        margin-left: 0;
        width: auto;
    }
}

.infobox tr:not(:first-child) td {
    border-bottom: 1px solid #ababab;
}

@media all and (max-width: 337px) {
    .notaninfobox {
        margin-left: -16px;
        margin-right: -16px;
        border-left: none;
        border-right: none;
    }
}

.notaninfobox > .infobox-title,
.infobox th {
    position: relative;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 120%;
    padding: 5px;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
}

.notaninfobox > .infobox-title::after,
.infobox th::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.infobox-imagearea {
    text-align: center;
    padding: 8px;
    background-color: white;
}

.infobox-imagearea > div:not(:first-child) {
    padding-top: 1em;
}

/* Horizontally centre animated images */
.infobox-imagearea .animated {
    display: inline-flex;
    align-items: center;
}

.notaninfobox .infobox-rows {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 1px;
    background-color: white;
}

.infobox .plainlinks a {
    color: rgb(var(--link-color)) !important;
    text-decoration: underline;
}

.infobox .plainlinks a:visited {
    color: rgb(var(--visited-link-color)) !important;
}

.notaninfobox .infobox-rows .infobox-row {
    display: contents;
}

.notaninfobox .infobox-row .infobox-row-label,
.notaninfobox .infobox-row .infobox-row-field {
    padding: 4px 8px;
    border: 1px solid #ababab;
}

.notaninfobox .infobox-row .infobox-row-label {
    font-weight: bold;
    display: flex;
    align-items: center;
    background-color: #f0f0f0;
}

.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-label,
.notaninfobox .infobox-rows .infobox-row:nth-child(2n) .infobox-row-field {
    background-color: #f9f9f9;
}

/* Community Updates - Windows XP风格 */
.community-updates {
    background: rgb(var(--xp-window-bg));
    padding: 15px;
    border: 2px solid rgb(var(--xp-window-border));
    margin-top: 20px;
    box-shadow: var(--window-shadow);
    position: relative;
    border-radius: 0;
}

.community-updates::before {
    content: "Community Updates";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
}

.community-updates ul {
    margin-top: 30px;
}

.community-updates ul li {
    list-style: none;
    padding: 10px;
    background: white;
    margin: 5px 0;
    border: 1px solid #ababab;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.community-updates ul li a {
    color: rgb(var(--link-color));
    text-decoration: none;
    font-weight: bold;
}

/* Infoboxes with tabber */
.tabber-container-infobox .tabber .tabbertab,
.tabber-container-infobox ul.tabbernav li a,
.tabber-container-infobox ul.tabbernav li.tabberactive a {
    background: none;
    border: none;
}

.tabber-container-infobox .tabber .tabbertab {
    padding: 0;
}

.tabber-container-infobox ul.tabbernav {
    font: inherit;
    font-size: 100%;
    border-bottom: 1px solid #ababab;
}

.tabber-container-infobox ul.tabbernav li a:hover {
    color: rgb(var(--hover-link-color));
}

.tabber-container-infobox ul.tabbernav > li {
    margin-bottom: 5px;
    padding: 0;
}

.announcement-content span {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(100%, 0); }
    100% { transform: translate(-100%, 0); }
}

/* 主页头部样式 - Windows XP风格 */
.mw-mainpage-header {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    color: rgb(var(--xp-text));
    font-size: 1.5em;
    padding: 30px 20px 20px;
    text-align: center;
    position: relative;
    border-radius: 0;
}

.mw-mainpage-header::before {
    content: "Welcome";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
}

.mw-mainpage-header h1 {
    font-size: 2.5em;
    margin-bottom: 10px;
    background: none;
    color: rgb(var(--xp-text));
    text-shadow: none;
}

.mw-mainpage-header p {
    font-size: 1.2em;
    margin: 5px 0;
}

.tabber-container-infobox ul.tabbernav > li > a {
    color: rgb(var(--link-color));
    padding: 5px 10px;
    display: block;
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    border-bottom: none;
    border-radius: 3px 3px 0 0;
}

/* To prevent the tabs from jumping around when they become active or inactive */
.tabber-container-infobox ul.tabbernav > li > a::before {
    display: block;
    content: attr(alt);
    font-weight: bold;
    height: 0;
    color: transparent;
    overflow: hidden;
    visibility: hidden;
}

.tabber-container-infobox ul.tabbernav > li.tabberactive {
    border: none;
}

/* ModuleBox - Windows XP风格 */
.modulebox {
    border: 2px solid rgb(var(--xp-window-border));
    padding: 30px 10px 10px;
    margin: 10px 0;
    background-color: rgb(var(--xp-window-bg));
    position: relative;
    box-shadow: var(--window-shadow);
    border-radius: 0;
}

.modulebox::before {
    content: "Module";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
}

.tabber-container-infobox ul.tabbernav > li.tabberactive > a {
    font-weight: bold;
    color: rgb(var(--hover-link-color));
    background: linear-gradient(to bottom, #ffffff, #f6f6f6);
    border-bottom: 1px solid #ffffff;
    position: relative;
    z-index: 1;
}

.infobox-rows p {
    margin: 0;
}

.infobox-rows dl + dl {
    margin-top: -0.4em;
}

.infobox-rows dl:last-child {
    margin-bottom: 0.2em;
}

.infobox-footer {
    text-align: center;
    padding: 5px;
    background-color: #f0f0f0;
    border-top: 1px solid #ababab;
}

/* 导航框（查论编）- Windows XP风格 */
table.navbox {
    border: 2px solid rgb(var(--xp-window-border));
    clear: both;
    margin: 1em auto;
    padding: 0;
    text-align: center;
    width: 100%;
    background-color: rgb(var(--xp-window-bg));
    box-shadow: var(--window-shadow);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
}

table.navbox + table.navbox {
    margin-top: 5px;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
}

.navbox-title::after,
table.navbox th::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.navbox-group {
    background-color: #f0f0f0;
    border: 1px solid #ababab;
    color: black;
    font-weight: bold;
    padding: 5px;
    text-align: right;
    white-space: nowrap;
}

.navbox-list {
    background-color: white;
    border: 1px solid #ababab;
    padding: 5px;
    text-align: left;
}

.navbox,
.navbox-subgroup {
    background-color: rgb(var(--xp-window-bg));
}

.navbox-subgroup .navbox-title {
    background-color: #c0d8f0;
    color: black;
    text-shadow: none;
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
    background-color: #e6f0f9;
}

.navbox-even {
    background-color: #f9f9f9;
}

.navbox-odd {
    background-color: white;
}

.collapseButton {
    float: right;
    font-weight: 400;
    text-align: right;
    width: auto;
}

.navbox .collapseButton {
    width: 6em;
}

.navbar {
    position: relative;
    min-height: 23px !important;
    margin-bottom: 0px !important;
    border: 1px solid transparent;
}

.navbox-title .Wikiplus-Edit-EveryWhereBtn {
    display: none;
}

@media only screen and (max-width:759px) {
    .infotable {
        width: 90%;
        float: none;
        margin: 0 auto;
    }
    
    .navbox-title>div {
        display: none;
    }
    
    .navbox-group,
    .navbox-group >div {
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: center;
    }
}

/* 主页Windows XP风格布局 */
.main-page-banner {
    position: relative;
    display: grid;
    grid-template-areas: 
        "welcome welcome welcome"
        "discord faq join";
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 3%;
    margin-bottom: 2rem;
    width: 100%;
    box-sizing: border-box;
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    background-color: rgb(var(--xp-window-bg));
    z-index: 1;
    border-radius: 0;
}

/* 欢迎文本区域 - Windows XP样式 */
.main-page-banner .welcome-text {
    grid-area: welcome;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 30px 20px 20px;
    margin: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgb(var(--xp-window-border));
    border-radius: 0;
    z-index: 2;
    text-shadow: var(--text-shadow);
}

/* 添加标题栏 */
.main-page-banner .welcome-text::before {
    content: "Welcome";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 25px;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    text-shadow: var(--text-shadow);
    text-align: left;
    line-height: 25px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    z-index: 3;
}

/* 添加XP窗口控制按钮 */
.main-page-banner .welcome-text::after {
    content: "×";
    position: absolute;
    top: 7px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 4;
}

/* 添加最小化、最大化按钮 */
.main-page-banner .welcome-text .min-button,
.main-page-banner .welcome-text .max-button {
    position: absolute;
    top: 7px;
    width: 16px;
    height: 16px;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: black;
    background-color: rgb(var(--light-gray-monochrome));
    cursor: pointer;
    z-index: 4;
}

.main-page-banner .welcome-text .min-button {
    right: 45px;
    content: "_";
    line-height: 13px;
}

.main-page-banner .welcome-text .max-button {
    right: 25px;
    content: "□";
}

.main-page-banner .welcome-text p {
    position: relative;
    z-index: 2;
    margin: 0;
    font-size: 1.1em;
}

/* 导航按钮 - Windows XP风格 */
.main-page-banner .navigation-links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 3%;
    grid-area: discord / discord / join / join;
    width: 100%;
    padding: 10px;
    background-color: rgb(var(--xp-window-bg));
}

.main-page-banner .nav-button {
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    border-radius: 3px;
    margin: 0 0 10px 0;
    transition: all 0.3s ease;
    height: min-content;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.main-page-banner .nav-button:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
    transform: translateY(-3px);
    box-shadow: 2px 3px 4px rgba(0, 0, 0, 0.3);
}

.main-page-banner .nav-button:active {
    background: linear-gradient(to bottom, #e0e0e0, #f0f0f0);
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

.main-page-banner .nav-button a {
    display: block;
    padding: 8px 0;
    width: 100%;
    text-align: center;
    color: black;
    font-size: 1.1rem;
    font-weight: bold;
    text-decoration: none !important;
    position: relative;
    z-index: 1;
}

/* 响应式布局 */
@media (max-width: 767px) {
    .main-page-banner {
        grid-template-areas: 
            "welcome"
            "navigation";
        grid-template-columns: 1fr;
    }
    
    .main-page-banner .welcome-text {
        width: 100%;
        margin-bottom: 0;
        box-sizing: border-box;
    }
    
    .main-page-banner .navigation-links {
        grid-area: navigation;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    
    .main-page-banner .nav-button {
        flex: 1;
        min-width: 30%;
        margin: 0 5px 10px;
    }
}

/* 公告容器 - Windows XP风格 */
.announcement-container {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    position: relative;
    border-radius: 0;
}

.announcement-container .section-title {
    width: 100%;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-family: var(--title-font);
    font-size: 1.3rem;
    text-align: left;
    border-left: none;
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-shadow: var(--text-shadow);
    position: relative;
}

.announcement-container .section-title::after {
    content: "×";
    position: absolute;
    top: 7px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.announcement-container .announcement-content {
    background-color: white;
    color: black;
    padding: 10px;
    width: 100%;
}

.announcement-container .more-content {
    width: 100%;
    border-top: 1px solid #ababab;
    padding: 5px;
    background-color: #f0f0f0;
    text-align: right;
}

/* 最近页面容器 - Windows XP风格 */
.recent-pages-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1rem;
}

.recent-pages-container .page-section {
    flex-basis: 48%;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 1rem;
    display: grid;
    grid-template-areas: "title" "page" "more";
    grid-template-rows: auto 1fr auto;
    position: relative;
    border-radius: 0;
}

.recent-pages-container .section-title {
    grid-area: title;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 30px 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-align: left;
    height: 25px;
    line-height: 25px;
    border-left: none;
}

.recent-pages-container .section-title::after {
    content: "×";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.recent-pages-container .page-list {
    grid-area: page;
    background-color: white;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;
    border-bottom: 1px solid #ababab;
}

.recent-pages-container .page-list a {
    display: block;
    padding: 3px 0;
    border-bottom: 1px solid #e0e0e0;
    color: rgb(var(--link-color));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-pages-container .page-list a:last-child {
    border-bottom: none;
}

.recent-pages-container .see-more {
    grid-area: more;
    background-color: #f0f0f0;
    padding: 5px 10px;
    text-align: right;
}

.recent-pages-container .see-more a {
    color: rgb(var(--link-color));
}

/* 特色内容容器 - Windows XP风格 */
.featured-content-container .feature-content .featured-description {
    font-style: italic;
    color: #444;
}

.featured-content-container .see-more {
    grid-area: more;
    background-color: #f0f0f0;
    padding: 5px 10px;
    text-align: right;
}

.featured-content-container .see-more a {
    color: rgb(var(--link-color));
}

/* 工具和资源容器 - Windows XP风格 */
.tools-and-resources {
    margin-bottom: 2rem;
}

.tools-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.tools-container .tool-item {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    padding: 30px 10px 10px;
    display: grid;
    grid-template-areas:
        "icon content"
        "title content";
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0.5rem 1rem;
    position: relative;
    border-radius: 0;
}

.tools-container .tool-item::before {
    content: "Tool";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}

.tools-container .tool-item::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.tools-container .tool-item .tool-icon {
    grid-area: icon;
    justify-self: center;
    align-self: center;
    background-color: white;
    border: 1px solid #ababab;
    padding: 5px;
}

.tools-container .tool-item .tool-title {
    grid-area: title;
    text-align: center;
}

.tools-container .tool-item .tool-title a {
    color: rgb(var(--link-color));
    font-weight: bold;
}

.tools-container .tool-item .tool-description {
    grid-area: content;
    background-color: white;
    border: 1px solid #ababab;
    padding: 8px;
}

/* 新闻容器 - Windows XP风格 */
.news-container {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 2rem;
    position: relative;
    border-radius: 0;
}

.news-container .section-title {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 30px 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-align: left;
    width: 100%;
    border-left: none;
}

.news-container .section-title::after {
    content: "×";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.news-container .news-content {
    background-color: white;
    padding: 10px;
    width: 100%;
    border-bottom: 1px solid #ababab;
}

.news-container .news-content .news-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 0;
}

.news-container .news-content .news-item:last-child {
    border-bottom: none;
}

.news-container .news-content .news-title {
    font-weight: bold;
    margin-bottom: 3px;
    color: rgb(var(--xp-blue-dark));
}

.news-container .news-content .news-date {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 3px;
}

.news-container .news-archive {
    background-color: #f0f0f0;
    padding: 5px 10px;
    text-align: right;
    width: 100%;
}

.news-container .news-archive a {
    color: rgb(var(--link-color));
}

/* 轮播图容器 - Windows XP风格 */
.mw-carousel {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 20px auto;
    overflow: hidden;
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    aspect-ratio: 16 / 9;
    background-color: rgb(var(--xp-window-bg));
    border-radius: 0;
}

.mw-carousel::before {
    content: "Slideshow";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
    z-index: 10;
}

.mw-carousel::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 10;
}

.mw-carousel .carousel-image {
    width: 100%;
    height: 100%;
    position: relative;
    margin-top: 25px;
}

.mw-carousel .carousel-image img {
    width: 100%;
    height: calc(100% - 25px);
    object-fit: cover;
    display: block;
    border: 1px solid #ababab;
}

.mw-carousel .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
    color: white;
    padding: 20px 15px 12px;
    text-align: left;
    transition: all 0.4s ease;
    z-index: 2;
}

.mw-carousel:hover .carousel-caption {
    top: 25px;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 25px);
    background: rgba(0, 0, 0, 0.6); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    backdrop-filter: blur(3px);
}

.mw-carousel .carousel-caption h3 {
    margin: 0 0 5px;
    font-size: 1.6em;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease;
    background: none;
    padding: 0;
    border: none;
}

.mw-carousel .carousel-caption p {
    margin: 0;
    font-size: 1.1em;
    line-height: 1.4;
    max-width: 80%;
    transition: all 0.4s ease 0.1s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.mw-carousel .carousel-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 3;
    padding: 0 15px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mw-carousel:hover .carousel-navigation {
    opacity: 1;
}

.mw-carousel .carousel-prev,
.mw-carousel .carousel-next {
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    width: 32px;
    height: 32px;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.mw-carousel .carousel-prev:hover,
.mw-carousel .carousel-next:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}

.mw-carousel .carousel-indicators {
    position: absolute;
    bottom: 15px;
    right: 20px;
    left: auto;
    display: flex;
    gap: 5px;
    z-index: 4;
    padding: 5px 10px;
    background-color: rgba(0, 0, 0, 0.3);
}

.mw-carousel .carousel-indicators .indicator {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s;
}

.mw-carousel .carousel-indicators .indicator.active {
    background-color: #ffffff;
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* 图片全局样式 */
img {
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid #ababab;
}

/* 添加图片过渡效果 */
.mw-carousel .carousel-image img {
    transition: transform 0.5s ease;
}

.mw-carousel:hover .carousel-image img {
    transform: scale(1.03);
}

/* 目录框样式 - Windows XP风格 */
#toc, .toc {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    padding: 30px 10px 10px;
    margin: 1em 0;
    position: relative;
    border-radius: 0;
}

#toc::before, .toc::before {
    content: "Contents";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}

#toc::after, .toc::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.toc .toctitle, #toc .toctitle {
    display: none;
}

.toc ul, #toc ul {
    margin: 0;
    padding: 0 0 0 1.5em;
}

.toc li, #toc li {
    margin: 5px 0;
}

.toc a, #toc a {
    color: rgb(var(--link-color));
    text-decoration: none;
}

.toc a:hover, #toc a:hover {
    color: rgb(var(--hover-link-color));
    text-decoration: underline;
}

.tocnumber {
    color: #666;
    margin-right: 5px;
}

/* 变色龙皮肤特定修复 */
.chameleon-toc {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    padding: 30px 10px 10px;
    position: relative;
    border-radius: 0;
}

.chameleon-toc::before {
    content: "Contents";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}

.chameleon-toc::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.chameleon-toc .toctitle {
    display: none;
}


/* Windows XP启动栏和任务栏 */
body::after {
    content: "开始";
    position: fixed;
    left: 0;
    bottom: 30px;
    width: 100px;
    height: 30px;
    background: linear-gradient(to bottom, #4cae4c, #398439);
    color: white;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    border-radius: 0 5px 5px 0;
    z-index: 9999;
    cursor: pointer;
    border: 1px solid #366;
    border-left: none;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;
}

body::before {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, #4581c8, #2f5b9d);
    border-top: 1px solid #223f6f;
    z-index: 9998;
}

/* 响应式调整 */
@media (max-width: 767px) {
    .tools-container {
        grid-template-columns: 1fr;
    }
    
    .recent-pages-container .page-section,
    .featured-content-container .feature-item {
        flex-basis: 100%;
        margin-bottom: 15px;
    }
    
    body::after {
        width: 80px;
        font-size: 12px;
    }
}

/* Windows XP蓝屏风格 */
.bluescreen {
    background-color: #0000aa;
    color: #ffffff;
    font-family: "Courier New", monospace;
    padding: 20px;
    margin: 10px 0;
    border: 2px solid #000055;
    box-shadow: var(--window-shadow);
    position: relative;
}

.bluescreen h2 {
    color: #ffffff;
    background: none;
    border: none;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-shadow: none;
}

.bluescreen p {
    margin: 10px 0;
    line-height: 1.5;
}

.bluescreen code {
    background-color: #0000aa;
    border: none;
    color: #ffffff;
    display: block;
    margin: 10px 0;
    font-family: "Courier New", monospace;
}

/* 标题栏文本 */
.titlebox {
    color: white;
    position: relative;
    top: -16px;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    padding: 5px 20px;
    line-height: 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border: 1px solid rgb(var(--xp-window-border));
    display: inline-block;
}

/* Windows XP Logo风格块 */
.logoblock {
    padding: 30px 10px 10px;
    color: black;
    box-shadow: var(--window-shadow);
    margin: 10px 0;
    display: block;
    position: relative;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    border-radius: 0;
}

.logoblock::before {
    content: "Windows";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}

.logoblock::after {
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat;
    opacity: 0.7;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}

/* Windows XP错误对话框 */
.error-dialog {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    padding: 30px 10px 10px;
    margin: 10px 0;
    position: relative;
    box-shadow: var(--window-shadow);
    border-radius: 0;
}

.error-dialog::before {
    content: "Error";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}

.error-dialog::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.error-dialog .icon {
    float: left;
    margin-right: 10px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.error-dialog .message {
    margin-left: 50px;
    font-weight: bold;
}

.error-dialog .buttons {
    text-align: right;
    margin-top: 15px;
}

.error-dialog .buttons button {
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    padding: 3px 10px;
    margin-left: 5px;
    cursor: pointer;
}

.error-dialog .buttons button:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}

/* JS添加功能 */
.JS-added-button {
    display: none; /* 由JS控制显示 */
    position: fixed;
    right: 10px;
    bottom: 40px;
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.JS-added-button:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}

/* 创建一个窗口最小化图标，显示在任务栏中 */
.minimized-window {
    position: fixed;
    left: 110px;
    bottom: 0;
    height: 30px;
    padding: 0 10px;
    background: linear-gradient(to bottom, #67a9e0, #3a84c5);
    color: white;
    line-height: 30px;
    font-size: 12px;
    z-index: 9999;
    cursor: pointer;
    border-top: 1px solid #81bdeb;
    border-left: 1px solid #81bdeb;
    border-right: 1px solid #25619a;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.minimized-window:hover {
    background: linear-gradient(to bottom, #81bdeb, #67a9e0);
}

/* 添加系统时钟到任务栏 */
.taskbar-clock {
    position: fixed;
    right: 10px;
    bottom: 0;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    color: white;
    line-height: 30px;
    font-size: 12px;
    z-index: 9999;
}

/* CommonJS功能 */
/* 这些样式将由JavaScript功能使用 */d-content-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
}

.featured-content-container .feature-item {
    flex-basis: 48%;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 1rem;
    display: grid;
    grid-template-areas: "title" "content" "more";
    grid-template-rows: auto 1fr auto;
    position: relative;
    border-radius: 0;
}

.featured-content-container .section-title {
    grid-area: title;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 30px 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-align: left;
    height: 25px;
    line-height: 25px;
    border-left: none;
}

.featured-content-container .section-title::after {
    content: "×";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.featured-content-container .feature-content {
    grid-area: content;
    background-color: white;
    padding: 10px;
    border-bottom: 1px solid #ababab;
}

.featured-content-container .feature-content .featured-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: rgb(var(--xp-blue-dark));
}

.featured-content-container .feature-content .featured-author {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.featured-content-container .feature-content .featured-description {
    font-style: italic;
    color: #444;
}

.featured-content-container .see-more {
    grid-area: more;
    background-color: #f0f0f0;
    padding: 5px 10px;
    text-align: right;
}

.featured-content-container .see-more a {
    color: rgb(var(--link-color));
}

/* 工具和资源容器 - Windows XP风格 */
.tools-and-resources {
    margin-bottom: 2rem;
}

.tools-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1rem;
}

.tools-container .tool-item {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    padding: 30px 10px 10px;
    display: grid;
    grid-template-areas:
        "icon content"
        "title content";
    grid-template-columns: max-content 1fr;
    grid-template-rows: auto auto;
    grid-gap: 0.5rem 1rem;
    position: relative;
    border-radius: 0;
}

.tools-container .tool-item::before {
    content: "Tool";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}

.tools-container .tool-item::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.tools-container .tool-item .tool-icon {
    grid-area: icon;
    justify-self: center;
    align-self: center;
    background-color: white;
    border: 1px solid #ababab;
    padding: 5px;
}

.tools-container .tool-item .tool-title {
    grid-area: title;
    text-align: center;
}

.tools-container .tool-item .tool-title a {
    color: rgb(var(--link-color));
    font-weight: bold;
}

.tools-container .tool-item .tool-description {
    grid-area: content;
    background-color: white;
    border: 1px solid #ababab;
    padding: 8px;
}

/* 新闻容器 - Windows XP风格 */
.news-container {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    box-shadow: var(--window-shadow);
    margin-bottom: 2rem;
    position: relative;
    border-radius: 0;
}

.news-container .section-title {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 30px 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
    text-align: left;
    width: 100%;
    border-left: none;
}

.news-container .section-title::after {
    content: "×";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.news-container .news-content {
    background-color: white;
    padding: 10px;
    width: 100%;
    border-bottom: 1px solid #ababab;
}

.news-container .news-content .news-item {
    border-bottom: 1px solid #e0e0e0;
    padding: 5px 0;
}

.news-container .news-content .news-item:last-child {
    border-bottom: none;
}

.news-container .news-content .news-title {
    font-weight: bold;
    margin-bottom: 3px;
    color: rgb(var(--xp-blue-dark));
}

.news-container .news-content .news-date {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 3px;
}

.news-container .news-archive {
    background-color: #f0f0f0;
    padding: 5px 10px;
    text-align: right;
    width: 100%;
}

.news-container .news-archive a {
    color: rgb(var(--link-color));
}

/* 响应式调整 */
@media (max-width: 767px) {
    .tools-container {
        grid-template-columns: 1fr;
    }
    
    .recent-pages-container .page-section,
    .featured-content-container .feature-item {
        flex-basis: 100%;
        margin-bottom: 15px;
    }
    
    body::after {
        width: 80px;
        font-size: 12px;
    }
}

/* Windows XP蓝屏风格 */
.bluescreen {
    background-color: #0000aa;
    color: #ffffff;
    font-family: "Courier New", monospace;
    padding: 20px;
    margin: 10px 0;
    border: 2px solid #000055;
    box-shadow: var(--window-shadow);
    position: relative;
}

.bluescreen h2 {
    color: #ffffff;
    background: none;
    border: none;
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.5em;
    text-shadow: none;
}

.bluescreen p {
    margin: 10px 0;
    line-height: 1.5;
}

.bluescreen code {
    background-color: #0000aa;
    border: none;
    color: #ffffff;
    display: block;
    margin: 10px 0;
    font-family: "Courier New", monospace;
}

/* 标题栏文本 */
.titlebox {
    color: white;
    position: relative;
    top: -16px;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    padding: 5px 20px;
    line-height: 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border: 1px solid rgb(var(--xp-window-border));
    display: inline-block;
}

/* Windows XP Logo风格块 */
.logoblock {
    padding: 30px 10px 10px;
    color: black;
    box-shadow: var(--window-shadow);
    margin: 10px 0;
    display: block;
    position: relative;
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    border-radius: 0;
}

.logoblock::before {
    content: "Windows";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}

.logoblock::after {
    content: "";
    float: center;
    border: solid 2px #0000;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230078d7' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") center/70% no-repeat;
    opacity: 0.7;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 1;
}

/* Windows XP错误对话框 */
.error-dialog {
    background-color: rgb(var(--xp-window-bg));
    border: 2px solid rgb(var(--xp-window-border));
    padding: 30px 10px 10px;
    margin: 10px 0;
    position: relative;
    box-shadow: var(--window-shadow);
    border-radius: 0;
}

.error-dialog::before {
    content: "Error";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    text-align: left;
    height: 15px;
    line-height: 15px;
    font-size: 12px;
}

.error-dialog::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.error-dialog .icon {
    float: left;
    margin-right: 10px;
    width: 32px;
    height: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff0000'/%3E%3Cpath d='M12 6v8M12 16v2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.error-dialog .message {
    margin-left: 50px;
    font-weight: bold;
}

.error-dialog .buttons {
    text-align: right;
    margin-top: 15px;
}

.error-dialog .buttons button {
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    padding: 3px 10px;
    margin-left: 5px;
    cursor: pointer;
}

.error-dialog .buttons button:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}

/* JS添加功能 */
.JS-added-button {
    display: none; /* 由JS控制显示 */
    position: fixed;
    right: 10px;
    bottom: 40px;
    background: linear-gradient(to bottom, #f6f6f6, #e0e0e0);
    border: 1px solid #ababab;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.JS-added-button:hover {
    background: linear-gradient(to bottom, #f9f9f9, #e9e9e9);
}

/* 创建一个窗口最小化图标，显示在任务栏中 */
.minimized-window {
    position: fixed;
    left: 110px;
    bottom: 0;
    height: 30px;
    padding: 0 10px;
    background: linear-gradient(to bottom, #67a9e0, #3a84c5);
    color: white;
    line-height: 30px;
    font-size: 12px;
    z-index: 9999;
    cursor: pointer;
    border-top: 1px solid #81bdeb;
    border-left: 1px solid #81bdeb;
    border-right: 1px solid #25619a;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.minimized-window:hover {
    background: linear-gradient(to bottom, #81bdeb, #67a9e0);
}

/* 添加系统时钟到任务栏 */
.taskbar-clock {
    position: fixed;
    right: 10px;
    bottom: 0;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    color: white;
    line-height: 30px;
    font-size: 12px;
    z-index: 9999;
}
/* 导航框（查论编）- Windows XP风格 */
table.navbox {
    border: 2px solid rgb(var(--xp-window-border));
    clear: both;
    margin: 1em auto;
    padding: 0;
    text-align: center;
    width: 100%;
    background-color: rgb(var(--xp-window-bg));
    box-shadow: var(--window-shadow);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 0;
}

.navbox-title,
.navbox-abovebelow,
table.navbox th {
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light)));
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-weight: bold;
    text-shadow: var(--text-shadow);
    border-bottom: 1px solid rgb(var(--xp-window-border));
    position: relative;
}

.navbox-title::after,
table.navbox th::after {
    content: "×";
    position: absolute;
    top: 2px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: #ff6347;
    border: 1px solid rgb(var(--xp-window-border));
    text-align: center;
    line-height: 16px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    z-index: 1;
}

.navbox-group {
    background-color: #f0f0f0;
    border: 1px solid #ababab;
    color: black;
    font-weight: bold;
    padding: 5px;
    text-align: right;
    white-space: nowrap;
}

.navbox-list {
    background-color: white;
    border: 1px solid #ababab;
    padding: 5px;
    text-align: left;
}

/* 修复开始按钮 - 实际元素而非伪元素 */
.start-button {
    position: fixed;
    left: 0;
    bottom: 30px;
    width: 100px;
    height: 30px;
    background: linear-gradient(to bottom, #4cae4c, #398439);
    color: white;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    border-radius: 0 5px 5px 0;
    z-index: 9999;
    cursor: pointer;
    border: 1px solid #366;
    border-left: none;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    padding-left: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;
}

/* 修复开始菜单样式 */
#xp-start-menu {
    position: fixed !important;
    left: 0 !important;
    bottom: 60px !important;
    width: 250px !important;
    background-color: white !important;
    border: 2px solid #0054e3 !important;
    box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.3) !important;
    z-index: 10000 !important;
    display: none;
}

.start-menu-top {
    height: 60px !important;
    background: linear-gradient(to bottom, #235ddc, #225ada 50%, #214fbb) !important;
    color: white !important;
    padding: 10px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
}

.start-menu-items {
    background-color: white !important;
    padding: 5px 0 !important;
}

.start-menu-item {
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
}

.start-menu-item:hover {
    background-color: #e0ecff !important;
}

/* 修复下拉菜单 */
.dropdown-menu {
    display: none;
    position: absolute;
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 1px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    border-radius: 0 !important;
    z-index: 1000;
}

.dropdown.open .dropdown-menu,
.dropdown:hover .dropdown-menu,
.nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
}

/* 修复2: 下拉菜单位置 */
#p-personal .vector-menu-content,
.vector-user-menu .vector-menu-content,
.vector-menu-dropdown .vector-menu-content {
    right: 0 !important;
    left: auto !important;
}

/* 确保下拉菜单不会超出屏幕 */
.dropdown-menu {
    right: 0 !important;
    left: auto !important;
}

#p-personal {
    position: relative !important;
}

/* 修复3: 时钟显示问题 */
/* 隐藏时钟图标 */
.oo-ui-icon-clock:before,
.mw-ui-icon-clock:before,
#pt-watchlist .mw-ui-icon:before {
    display: none !important;
}

/* 重新设置时钟样式，确保不会重叠 */
.taskbar-clock {
    position: fixed !important;
    right: 10px !important;
    bottom: 5px !important;
    height: 20px !important;
    padding: 0 8px !important;
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: white !important;
    font-weight: bold !important;
    line-height: 20px !important;
    font-size: 14px !important;
    z-index: 10000 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
    border-radius: 3px !important;
    font-family: "Segoe UI", Tahoma, sans-serif !important;
}

/* 修复4: 开始按钮背景 */
.start-button {
    position: fixed !important;
    left: 0 !important;
    bottom: 30px !important;
    width: 100px !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #4cae4c, #398439) !important;
    color: white !important;
    text-align: center !important;
    line-height: 30px !important;
    font-weight: bold !important;
    border-radius: 0 5px 5px 0 !important;
    z-index: 9999 !important;
    cursor: pointer !important;
    border: 1px solid #366 !important;
    border-left: none !important;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3) !important;
    padding-left: 30px !important;
    font-family: "Segoe UI", Tahoma, sans-serif !important;
}

.start-button::before {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M0 0h11v11H0V0zm13 0h11v11H13V0zM0 13h11v11H0V13zm13 0h11v11H13V13z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* 修复底部任务栏，使开始按钮正确显示 */
body::before {
    content: "" !important;
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #3367d1, #2851a3) !important;
    border-top: 1px solid #4a78d8 !important;
    z-index: 9998 !important;
}



/* 修复3: 移除之前的开始按钮伪元素 */
body::after {
    display: none !important;
}

/* 修复4: 时钟样式完善 */
.taskbar-clock {
    position: fixed !important;
    right: 10px !important;
    bottom: 5px !important;
    height: 20px !important;
    line-height: 20px !important;
    padding: 0 8px !important;
    background-color: transparent !important;
    color: white !important;
    font-weight: normal !important;
    font-size: 13px !important;
    font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important;
    z-index: 10000 !important;
    text-shadow: none !important;
}

/* 完全隐藏时钟图标 */
.oo-ui-icon-clock,
.mw-ui-icon-clock,
#pt-watchlist .mw-ui-icon,
.mw-watchlink .mw-ui-icon::before {
    display: none !important;
}

/* 修复5: 完善底部任务栏 */
.taskbar {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 30px !important;
    background: linear-gradient(to bottom, #3367d1, #2851a3) !important;
    border-top: 1px solid #4a78d8 !important;
    z-index: 9998 !important;
    display: flex !important;
    align-items: center !important;
}

/* 任务栏内容区域 */
.taskbar-content {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px !important;
}

/* 快速启动栏 */
.quick-launch {
    display: flex !important;
    align-items: center !important;
    padding: 0 5px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-right: 5px !important;
}

.quick-launch-icon {
    width: 22px !important;
    height: 22px !important;
    margin: 0 2px !important;
    cursor: pointer !important;
    opacity: 0.8 !important;
    transition: opacity 0.2s !important;
}

.quick-launch-icon:hover {
    opacity: 1 !important;
}

/* 系统托盘区域 */
.system-tray {
    display: flex !important;
    align-items: center !important;
    padding: 0 5px !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
    margin-left: auto !important;
}


//* 修复系统托盘布局 */
.system-tray {
    position: fixed !important;
    right: 10px !important;
    bottom: 0 !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 5px !important;
    z-index: 10000 !important;
}

/* 单独设置时钟样式 */
.taskbar-clock {
    position: static !important;
    color: white !important;
    font-family: "Tahoma", sans-serif !important;
    font-size: 13px !important;
    line-height: 30px !important;
}

/* 移除重复的系统图标 */
.tray-icon {
    display: none !important;
}
/* 强制应用指定字体 */
* {
    font-family: var(--body-font) !important;
}

body, html {
    font-family: "VonwaonBitmap 16px", VT323, monospace !important;
}

/* 特别设置任务栏字体 */
.taskbar, .start-button, .taskbar-clock {
    font-family: "Tahoma", "Microsoft Sans Serif", sans-serif !important;
}
/* 修复媒体查询 */
@media (max-width: 767px) {
    .navbar-toggle, .navbar-toggler {
        display: block !important;
    }
    
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        background: rgb(var(--xp-window-bg)) !important;
        border: 1px solid rgb(var(--xp-window-border)) !important;
        z-index: 1000 !important;
    }
}

/* 确保任务栏不与页面内容重叠 */
body {
    padding-bottom: 40px !important;
}

#content {
    margin-bottom: 40px !important;
}

/* 在顶栏显示用户头像 - 针对变色龙皮肤 */
.navbar-userloggedin,
#personal-inner,
#p-personal .vector-menu-content-list > li:first-child,
.navbar-personaltools > li:first-child {
    position: relative;
    padding-left: 30px !important;
}

.navbar-userloggedin::before,
#personal-inner::before,
#p-personal .vector-menu-content-list > li:first-child > a::before,
.navbar-personaltools > li:first-child > a::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid rgb(var(--bright-accent));
    z-index: 100;
}

/* 头像悬停效果 */
.navbar-userloggedin:hover::before,
#personal-inner:hover::before,
#p-personal .vector-menu-content-list > li:first-child > a:hover::before,
.navbar-personaltools > li:first-child > a:hover::before {
    transform: translateY(-50%) scale(1.2) !important;
    box-shadow: 0 0 10px rgba(var(--bright-accent), 0.6) !important;
    border-color: rgb(var(--white-monochrome)) !important;
}
/* Echo扩展通知图标修复 */
#pt-notifications-alert,
#pt-notifications-notice,
.mw-echo-notifications-badge,
.mw-echo-notification-badge-nojs {
    background-color: transparent !important;
    border: none !important;
}

#pt-notifications-alert .mw-echo-notifications-badge:before,
#pt-notifications-notice .mw-echo-notifications-badge:before,
.mw-echo-notifications-badge:before {
    color: rgb(var(--bright-accent)) !important;
    filter: none !important;
    opacity: 1 !important;
}

.mw-echo-notifications-badge:after,
.mw-echo-notification-badge-nojs:after {
    background-color: rgb(var(--bright-accent)) !important;
    color: rgb(var(--black-monochrome)) !important;
    border: 1px solid rgb(var(--black-monochrome)) !important;
    opacity: 1 !important;
}

/* 只修改通知图标的颜色 */
/* Echo图标蓝色风格 - Windows XP主题 */
#pt-notifications-alert .oo-ui-icon-bell,
#pt-notifications-notice .oo-ui-icon-tray {
    filter: invert(34%) sepia(37%) saturate(2476%) hue-rotate(201deg) brightness(97%) contrast(85%);
}

/* 或者更直接的方式，使用颜色而不是filter */
#pt-notifications-alert .mw-echo-notifications-badge:before,
#pt-notifications-notice .mw-echo-notifications-badge:before,
.mw-echo-notifications-badge:before {
    color: rgb(49, 106, 197) !important; /* 使用XP蓝色 */
    filter: none !important;
    opacity: 1 !important;
}

/* 悬停时变亮 */
#pt-notifications-alert:hover .mw-echo-notifications-badge:before,
#pt-notifications-notice:hover .mw-echo-notifications-badge:before {
    color: rgb(82, 153, 235) !important; /* 使用XP浅蓝色 */
}
/* 目录框样式 */
#toc, .toc {
    background-color: rgb(var(--gray-monochrome)) !important;
    border: 2px solid rgb(var(--bright-accent)) !important;
    padding: 0.5em !important;
    font-family: var(--body-font) !important;
}

.toc .toctitle, #toc .toctitle {
    background-color: rgb(var(--bright-accent)) !important;
    color: rgb(var(--black-monochrome)) !important;
    text-align: center !important;
    padding: 0.25em !important;
    margin: -0.5em -0.5em 0.5em -0.5em !important;
    font-weight: bold !important;
}

.toc ul, #toc ul {
    margin: 0 !important;
    padding: 0 0 0 1.5em !important;
}

.toc a, #toc a {
    color: rgb(var(--bright-accent)) !important;
    text-decoration: none !important;
}

.toc a:hover, #toc a:hover {
    color: rgb(var(--white-monochrome)) !important;
    text-decoration: underline !important;
}

.tocnumber {
    color: rgb(var(--pale-accent)) !important;
}
/* 简化的导航栏布局 */
.navbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
}

.navbar-brand {
    margin-right: 20px !important;
    flex-shrink: 0 !important;
}

.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.navbar-nav > li {
    margin: 0 10px !important;
}

.navbar-right {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
}

/* 搜索框间距修复 */
#searchform {
    margin: 0 10px !important;
}

/* 响应式修复 */
@media (max-width: 767px) {
    .navbar {
        flex-wrap: wrap !important;
    }
    
    .navbar-collapse {
        width: 100% !important;
    }
}
/* 修复logo样式 */
.navbar-brand img, 
.navbar .logo img, 
#p-logo img,
.navbar-header img {
    border: none !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    max-height: 40px !important;
    vertical-align: middle !important;
}

.navbar-brand, 
.navbar .logo, 
#p-logo,
.navbar-header {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 5px 15px !important;
    margin: 0 !important;
}
/* 完全重置TOC样式 - Windows XP风格 */
#toc, .toc, .chameleon-toc, .mw-toc, #mw-toc, .Table_of_Contents {
    background-color: rgb(var(--xp-window-bg)) !important;
    border: 2px solid rgb(var(--xp-window-border)) !important;
    box-shadow: var(--window-shadow) !important;
    padding: 35px 10px 10px !important; /* 上方留出标题空间 */
    margin: 1em 0 !important;
    position: relative !important;
    border-radius: 0 !important;
    width: auto !important;
    max-width: 360px !important; /* 限制最大宽度 */
    min-width: 200px !important;
    display: block !important; /* 改用块级显示 */
    float: right !important; /* 向右浮动 */
    clear: right !important; 
    overflow: visible !important;
    z-index: 1 !important;
}

/* 自定义标题栏 */
#toc::before, .toc::before, .chameleon-toc::before, .mw-toc::before, #mw-toc::before, .Table_of_Contents::before {
    content: "Contents" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to right, rgb(var(--xp-blue)), rgb(var(--xp-blue-light))) !important;
    color: white !important;
    padding: 5px 10px !important;
    font-weight: bold !important;
    text-shadow: var(--text-shadow) !important;
    border-bottom: 1px solid rgb(var(--xp-window-border)) !important;
    text-align: left !important;
    height: auto !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    display: block !important;
    z-index: 2 !important;
}

/* 处理原始标题和关闭按钮 */
.toc .toctitle, #toc .toctitle, .chameleon-toc .toctitle,
.mw-toc-heading, .tocheader, .toctoggle, .toctogglecheckbox {
    display: none !important; /* 隐藏原始标题 */
}

/* 确保目录列表可见 */
.toc ul, #toc ul, .chameleon-toc ul, 
.mw-toc ul, #mw-toc ul, .Table_of_Contents ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0.5em 0 !important;
    padding: 0 0 0 1.5em !important;
    list-style-type: disc !important;
    text-align: left !important;
    max-height: none !important;
    overflow: visible !important;
}

/* 确保目录列表项可见 */
.toc li, #toc li, .chameleon-toc li,
.mw-toc li, #mw-toc li, .Table_of_Contents li {
    display: list-item !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 4px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
    color: rgb(var(--xp-text)) !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* 链接样式 */
.toc a, #toc a, .chameleon-toc a,
.mw-toc a, #mw-toc a, .Table_of_Contents a {
    display: inline !important;
    color: rgb(var(--link-color)) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    height: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.toc a:hover, #toc a:hover, .chameleon-toc a:hover,
.mw-toc a:hover, #mw-toc a:hover, .Table_of_Contents a:hover {
    color: rgb(var(--hover-link-color)) !important;
    text-decoration: underline !important;
}

/* 目录编号样式 */
.tocnumber {
    color: rgb(var(--xp-blue)) !important;
    font-weight: bold !important;
    margin-right: 0.3em !important;
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 强制显示所有子目录 */
.toc .toclevel-1 ul, 
.toc .toclevel-2 ul,
.toc .toclevel-3 ul,
#toc .toclevel-1 ul,
#toc .toclevel-2 ul,
#toc .toclevel-3 ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 整个目录容器设置 */
#mw-content-text .toc,
#mw-content-text #toc {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
/* CommonJS功能 */
/* 这些样式将由JavaScript功能使用 */
检索自“http://age-of-history-cn.com/aoh2wiki/index.php?title=MediaWiki:Common.css&oldid=1222”
知识共享署名-非商业性使用-相同方式共享
Powered by MediaWiki
Powered by Semantic MediaWiki