*{
  -webkit-tap-highlight-color: transparent;
}

html,body{
  /* 隐藏x轴滚动条,超出部分直接裁剪；不会创建滚动容器 */
  overflow-x: clip;
}

/* .vitepress/custom.css */
.VPHomeHero .image-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  width: 320px;
  height: 320px;
  transform: translate(-50%, -50%);
  background-image: linear-gradient(-45deg, #f5d76e 50%, #ffffb8 50%);
  background-size: 150% 150%;
  filter: blur(68px);
  -webkit-filter: blur(68px);
  /* animation: gradientFlow 8s ease infinite; */
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.VPHomeHero .image-src {
  border-radius: 10px;
  transform: translate(-50%, -50%) scaleX(-1);
}

/* 自动换行，保留空格 */
/* .vp-doc pre,
.vp-doc code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
} */

/* 触摸屏设备（手指触控，无精确悬停） */
@media (pointer: coarse) and (hover: none) {
  /* 触摸设备专属样式 */
  /* 水合完成前：强制禁用过渡 */
  .VPNavBar,
  .divider-line {
    transition: none !important;
  }
}

/* 鼠标/触控板设备（精确指针，支持悬停） */
@media (pointer: fine) and (hover: hover) {
  /* 桌面设备专属样式 */
}



:root {
    --lukes-scrollbar-width: 8px;
}

/* ===================== 全局滚动条样式 ===================== */

/* 1. WebKit 浏览器（Chrome/Edge/Safari） */
/* 滚动条整体样式（宽/高） */
::-webkit-scrollbar {
    width: var(--lukes-scrollbar-width);    /* 垂直滚动条宽度 */
    height: var(--lukes-scrollbar-width);   /* 水平滚动条高度 */
}

/* 滚动条轨道（背景、圆角） */
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0);
}

/* 滚动条滑块（核心样式） */
::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
    cursor: pointer;
    border-right: 2px solid var(--vp-c-bg); /* 营造悬浮感 */
    border-radius: calc(var(--lukes-scrollbar-width) / 2);
}

/* 滑块 hover 状态 */
::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.5);
}

/* 滑块激活（点击拖动）状态 */
::-webkit-scrollbar-thumb:active {
    /* background: #888; */
}

/* 滚动条交汇处样式 */
::-webkit-scrollbar-corner {
    /* background: #f1f1f1;
    border-radius: 6px; */
}

/* 2. Firefox */
.container {
    /* scrollbar-width: 6px; */
    /* scrollbar-color: rgba(144, 147, 153, 0.3) rgba(0,0,0,0); */
}


/* ===================== 自定义容器滚动条 ===================== */

pre,aside {
    --lukes-container-scroll-width: 6px;
}

/* 滚动条整体样式 */
aside::-webkit-scrollbar,
pre::-webkit-scrollbar {
    width: var(--lukes-container-scroll-width);
    height: var(--lukes-container-scroll-width);
}

/* 滚动条轨道 */
aside::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
    background: transparent;
}

/* 滚动条滑块 */
aside::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.3);
    cursor: pointer;
    border-right: 2px solid transparent;
    border-radius: calc(var(--lukes-container-scroll-width) / 2);
}

/* 滑块 hover 状态 */
aside::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.5);
}

/* 滑块激活状态 */
aside::-webkit-scrollbar-thumb:active,
pre::-webkit-scrollbar-thumb:active {
    /* background: #888; */
}

/* 滚动条交汇处 */
aside::-webkit-scrollbar-corner,
pre::-webkit-scrollbar-corner {
    /* background: #f1f1f1;
    border-radius: 6px; */
}


/* ===================== 响应式适配 ===================== */

@media screen and (max-width: 768px) {
    pre,aside {
      --lukes-container-scroll-width: 3px;
    }
}