/* 字体按需加载，下载期间先显示系统字体；避免预加载大体积 OTF。 */
@font-face {
  font-family: 'Source Han Sans CN';
  src: url('./font/SourceHanSansCN-Regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* 全局重置样式 - 去除所有元素的默认边距和内边距 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Source Han Sans CN', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  line-height: 1.6;
  color: #333;

  [class*="product"],
  .active {
    will-change: transform, opacity, box-shadow;
  }

  /* 给所有元素加红色边框 */
  /* outline: 1px solid red !important; */



}

/* Locomotive Scroll 样式 */


/* 删除原 Locomotive Scroll 容器样式，恢复原生滚动 */



/* 移动端恢复原生滚动，避免 Locomotive Scroll 冲突 */


/* 预载遮罩 - 简约高级视觉 */
/* 预载遮罩 - 纯文本进度，白底黑字 */
/* ...existing code... */
/* ...existing code... */

/* 白底黑字文本预载遮罩（用于 refresh-overlay） */
/* ...existing code... */

/* 强制置顶且不被父级裁剪，白底黑字文本预载遮罩 */
#refresh-overlay {
  position: fixed;
  /* 固定于视口，避免被父元素 overflow 裁剪 */
  inset: 0;
  z-index: 999999;
  /* 足够高，确保覆盖所有内容 */
  display: none;
  /* 脚本切换为 flex */
  align-items: center;
  justify-content: center;
  background: #ffffff;
  /* 白底 */
  color: #000;
  /* 黑字 */
  -webkit-font-smoothing: antialiased;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  pointer-events: auto;
  border-bottom: #000 1px solid;
  height: 100vh;
}

/* 容器可见层级再提高，避免内部被遮挡 */
#refresh-overlay .progress-container {
  position: relative;
  z-index: 1000000;
  text-align: center;

  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  /* 轻微盖层效果，仍白色 */
  box-shadow: 0 16px 40px rgba(10, 10, 20, 0.04);
  overflow: visible;
  /* 保证子元素不被裁剪 */
}

/* 百分比样式（保证字体可见且不会被父级影响） */
.percentage-number,
.percentage-number span,
#percentage {
  display: inline-block;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1;
  color: #6b6b6b;
  letter-spacing: -1px;
  z-index: 1000001;
  position: relative;
  transform: translateZ(0);
  /* 触发合成层，防止被重绘/裁剪问题 */
}

/* loading 说明文本 */
.loading-text,
#loading-text {

  font-size: 24px;
  font-weight: 700;
  color: #111;
  opacity: 0.95;
  letter-spacing: 1px;
}

/* 上滑隐藏类（脚本用 inline style 设置，保留备用） */
#refresh-overlay.slide-up {
  transform: translateY(-120%);
  opacity: 1;
  transition: transform 1020ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 820ms ease;
  pointer-events: none;
}

/* 移动端适配 */
@media (max-width: 480px) {
  .percentage-number {
    font-size: 20px;
  }

  #refresh-overlay .progress-container {
    padding: 12px 16px;
    min-width: 200px;
  }
}

/* ...existing code... */


.about-one,
.home-one,
.Project-one,
.Project-div,
.news-div,
.rocket-btn {
  transition:
    width 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}



/* 加载屏样式（简约高级） */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff, #f7f7f8);
  transition: opacity 450ms ease, visibility 450ms ease;
  opacity: 1;
  visibility: visible;
  backdrop-filter: blur(4px);
}

.loading-screen.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  text-align: center;
  display: flex;
  gap: 20px;
  align-items: center;
  flex-direction: column;
  padding: 28px;
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(12, 12, 20, 0.06);
  background: rgba(255, 255, 255, 0.7);
  min-width: 320px;
}

/* 标志文字 */
.logo-loader {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  letter-spacing: 6px;
  color: #111;
  font-size: 18px;
  transform: translateY(-4px);
  opacity: .95;
}

/* 进度条容器 */
.progress-wrap {
  width: 260px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.progress-container-first {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.06);

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.progress-bar {}

.percentage {
  width: 50px;
  font-size: 14px;
  color: #333;
  font-weight: 600;
  text-align: right;
}

/* 小装饰圆环 */
.loader-deco {
  opacity: .08;
  transform: translateY(6px);
}

/* 移动端适配 */
@media (max-width: 480px) {
  .loader-inner {
    min-width: 260px;
    padding: 18px;
  }

  .progress-wrap {
    width: 200px;
  }

  .logo-loader {
    font-size: 14px;
    letter-spacing: 4px;
  }
}

/* 页面基础样式 */

/* 默认保留原生滚动，仅在增强滚动初始化成功后锁定页面。 */
body {
  overflow-x: hidden;
  overflow-y: auto;
}

html.smooth-scroll-enabled,
html.smooth-scroll-enabled body {
  overflow: hidden;
}

/* 即使第三方库部分初始化失败，也不让遗留变换干扰原生滚动。 */
html:not(.smooth-scroll-enabled) main[data-scroll-container] {
  transform: none !important;
}

html:not(.smooth-scroll-enabled) .c-scrollbar {
  display: none;
}

.c-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  width: 11px;
  height: 100%;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s;
}

.c-scrollbar:hover,
.has-scroll-scrolling .c-scrollbar,
.has-scroll-dragging .c-scrollbar {
  opacity: 1;
}

.c-scrollbar_thumb {
  position: absolute;
  top: 0;
  right: 2px;
  width: 7px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.45);
  cursor: grab;
}

/* 保证滚动容器高度足够，避免被限制 */
main[data-scroll-container] {
  min-height: 100vh;
  /* 将首尾子元素的外边距计入容器高度，保证滚动边界覆盖完整页脚。 */
  display: flow-root;
}

/* ...existing code... */

/* 简约导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.navbar-brand a {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
}

.navbar-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 30px;
}

.navbar-menu li a {
  color: #666;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.navbar-menu li a:hover {
  color: #333;
  background-color: #f5f5f5;
}

/* 移动端响应式 */
@media (max-width: 768px) {
  .navbar-container {
    padding: 0 15px;
  }

  .navbar-menu {
    gap: 20px;
  }

  .navbar-menu li a {
    font-size: 14px;
    padding: 6px 8px;
  }
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: fixed;
  /* 改为固定定位，更简约 */
  top: 0;
  background-color: #fff;
  /* 纯白背景，更简约 */
  border-bottom: 1px solid #eee;
  /* 简单边框 */
  z-index: 1000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 轻微阴影 */
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  /* 限制最大宽度 */
  padding: 0 20px;
  height: 60px;
}

.nav-logo img {
  width: 32px;
  /* 缩小logo */
  height: auto;
}

.nav-links {
  display: flex;
  gap: 30px;
  /* 减少间距 */
}

.nav-links a {
  text-decoration: none;
  color: #333;
  /* 深色文字 */
  font-weight: 400;
  /* 正常字体 */
  font-size: 16px;
  /* 缩小字体 */
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.nav-links a:hover {
  background-color: #f5f5f5;
  /* 简单hover效果 */
}





@media (max-width: 1300px) {
  .nav {
    width: 90vw;
    /* 小于1000px时自适应 */
  }
}

@media (max-width: 768px) {
  .nav {
    justify-content: space-between;
    width: 90vw;
    /* 移动端宽度为90%视口宽度 */
  }

}




.hamburger {
  display: none;
  /* 默认隐藏 */

  justify-content: center;
  align-items: center;
  position: absolute;
  /* 使用绝对定位 */
  right: 0;
  /* 距离父级右侧 20px */
  top: 50%;
  /* 垂直居中 */
  transform: translateY(-50%);
  /* 修正垂直居中偏移 */
  cursor: pointer;

}

.hamburger input {
  display: none;
}

.hamburger svg {
  /* The size of the SVG defines the overall size */
  height: 3em;
  /* Define the transition for transforming the SVG */
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line {
  fill: none;
  stroke: rgb(37, 37, 37);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
  /* Define the transition for transforming the Stroke */
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line-top-bottom {
  stroke-dasharray: 12 63;
}

.hamburger input:checked+svg {
  transform: rotate(-45deg);
}

.hamburger input:checked+svg .line-top-bottom {
  stroke-dasharray: 20 300;
  stroke-dashoffset: -32.42;
}

@media (max-width: 768px) {
  .nav {
    padding: 0 15px;
  }

  .nav-links {
    gap: 20px;
    /* 减少间距 */
  }

  .nav-links a {
    font-size: 14px;
    /* 缩小字体 */
    padding: 6px 8px;
  }

  .hamburger {
    display: none;
    /* 隐藏汉堡菜单，保持简约 */
  }

  .nav-links {
    display: flex;
    /* 显示链接 */
  }
}


















/* 侧边播放器整体容器：固定定位在右侧 */
.side-audio-player {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 0;
  transition: all 0.3s ease;
}

/* 收起状态：仅显示图标按钮 */
.player-toggle {
  width: 45px;
  height: 45px;
  background-color: #ffffff;
  color: #fff;
  border-radius: 8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
  opacity: 0.1;

}

.player-toggle:hover {
  background-color: #ffffff;

}

.music-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 展开状态：播放器内容（默认隐藏/宽度为0） */
.player-content {
  width: 0px;
  height: 150px;
  /* 增高以容纳歌曲列表 */
  background-color: #fff;
  border-radius: 8px 0 0 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: width 0.3s ease;
  padding: 15px 0px;
  box-sizing: border-box;
  opacity: 0;
  transition:
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    /* 宽度过渡（和按钮过渡曲线一致） */
    padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    /* 内边距过渡 */
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* 透明度过渡 */
  /* 简化写法：用 all 替代所有属性，效果一致 */
  /* transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
}

/* 鼠标悬停播放器容器时，展开内容 */
.side-audio-player:hover .player-content {
  width: 350px;
  /* 略增宽度，适配歌曲列表 */
  height: 300px;
  /* 增高以容纳歌曲列表 */
  padding: 15px;
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 鼠标悬停播放器容器时，wyy图标透明度 */
.side-audio-player:hover .player-toggle {
  opacity: 1;
}

/* 播放器内部布局（垂直排列） */
.player-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  width: 100%;
}

/* 音乐信息样式 */
.audio-info {
  text-align: center;
  margin-bottom: 5px;
}

.music-title {
  margin: 0;
  color: #222;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-author {
  margin: 3px 0 0 0;
  color: #666;
  font-size: 12px;
}

/* 播放控制样式 */
.audio-controls {
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: 100%;
  padding: 5px 0px;
  border-top: 1px solid #cdcdcd;
}

.play-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background-color: #ff0000;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  flex-shrink: 0;
}

/* 先给图标容器设置尺寸 */
.play-icon,
.pause-icon,
.volume-icon {
  width: 16px;
  /* 容器宽度，决定图标大小 */
  height: 16px;
  /* 容器高度 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 让img自适应容器大小 */
.play-icon img,
.pause-icon img,
.volume-icon img {
  width: 100%;
  /* 占满容器宽度 */
  height: 100%;
  /* 占满容器高度 */
  object-fit: contain;
  /* 保持比例 */
}






















.play-btn:hover {
  background-color: #e60000;
}

.loop-btn {
  width: 80px;
  height: 30px;
  border-radius: 12px;
  border: none;
  background-color: #e60000;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  flex-shrink: 0;

}

.loop-btn:hover {
  background-color: #cf0303;
}

/* 进度条 */
.progress-container {
  width: 100%;
  height: 5px;
  background-color: #eee;
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background-color: #007bff;
  width: 100%;
  background: linear-gradient(90deg, #444, #de0303);
  border-radius: 999px;
  transition: width 200ms linear;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 5px;
  width: auto;
  flex-shrink: 0;
}

.volume-icon {
  font-size: 12px;
  color: #666;
}

.volume-slider {
  width: 100%;
  height: 3px;
  accent-color: #007bff;
  cursor: pointer;
}

/* 新增：歌曲列表样式 */
.music-list {
  flex: 1;
  /* 占满剩余高度 */
  overflow-y: auto;
  /* 歌曲过多时滚动 */
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 5px 0;
  /* 隐藏滚动条（可选） */
  -webkit-scrollbar: none;
  scrollbar-width: none;
}

/* 单个歌曲项样式 */
.music-item {
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  transition: background-color 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 歌曲项hover样式 */
.music-item:hover {
  background-color: #f5f8ff;
}

/* 当前播放歌曲高亮样式 */
.music-item.active {
  background-color: #e6f0ff;
  color: #007bff;
  font-weight: 500;
}

/* 歌曲项播放标识 */
.music-item .play-tag {
  font-size: 12px;
  display: none;
  /* 默认隐藏 */
}

/* 当前播放歌曲显示标识 */
.music-item.active .play-tag {
  display: inline;
}

/* 移动端适配：屏幕<768px时，调整样式 */
@media (max-width: 768px) {
  .side-audio-player {
    top: 10px;
    display: flex;
    align-items: flex-start;
    right: 20px;
    transform: translateY(0);
  }

  .volume-slider {
    width: 100px;
    height: 3px;
    accent-color: #007bff;
    cursor: pointer;
  }

  .progress-container {
    height: 5px;
  }

  .side-audio-player:hover .player-content {
    width: 300px;
    /* 移动端展开宽度适配 */
    height: 350px;
    /* 移动端略减高度 */
  }
}



/* 首页：编辑式首屏与轻量视觉轨道。与旧版 .home / .wrapper 样式隔离。 */
.intro-frame {
  width: calc(100% - 112px);
  max-width: 1320px;
  margin-inline: auto;
}

.portfolio-header { background: #fff; }
.header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  border-bottom: 1px solid #e8e8e8;
  gap: 24px;
}
.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #181818;
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.4;
}
.brand-symbol {
  display: grid;
  grid-template-columns: repeat(2, 10px);
  grid-template-rows: repeat(2, 10px);
  gap: 3px;
}
.brand-symbol i { background: #1b1b1b; }
.brand-symbol i:last-child { background: #244bff; }
.brand-caption {
  display: block;
  color: #737373;
  font: 9px/1.8 Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 1.6px;
}
.header-nav { display: flex; align-items: center; gap: 28px; }
.header-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 44px;
  min-width: 44px;
  color: #484848;
  font-size: 13px;
  text-decoration: none;
}
.header-nav .header-contact { color: #181818; }
.header-contact span { color: inherit; font: 22px/1 Arial, sans-serif; }
.header-nav a:hover { color: #244bff; }

.hero {
  display: flex;
  flex-direction: column;
  min-height: min(720px, calc(100svh - 180px));
}
.hero-grid {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding-block: 48px;
}
.hero-copy { min-width: 0; }
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 32px;
  color: #656565;
  font: 10px/1.6 Arial, sans-serif;
  letter-spacing: 1.6px;
}
.hero-status-dot { width: 6px; height: 6px; flex: 0 0 6px; background: #244bff; }
.hero h1 {
  color: #191919;
  font-size: clamp(48px, 5.5vw, 80px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.065em;
}
.hero h1 span { color: #244bff; line-height: inherit; }
.hero-description {
  margin-top: 30px;
  color: #696969;
  font-size: 14px;
  line-height: 1.95;
}
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 36px; }
.hero-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  font-size: 13px;
  text-decoration: none;
}
.hero-primary { min-width: 168px; padding: 12px 20px; background: #191919; color: #fff; border: 1px solid #191919; border-radius: 3px; }
.hero-primary:hover { background: #244bff; border-color: #244bff; }
.hero-secondary { gap: 18px; color: #454545; }
.hero-secondary:hover { color: #244bff; }
.hero-actions a span { color: inherit; font: 23px/1 Arial, sans-serif; }
.hero-art { width: min(100%, 460px); justify-self: end; min-width: 0; }
.hero-art > img { display: block; width: 100%; height: auto; background: #244bff; }
.hero-art figcaption {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
}
.hero-art figcaption span { color: #777; font-size: 10px; letter-spacing: .025em; }
.hero-art figcaption span:first-child { font-family: Arial, sans-serif; letter-spacing: .8px; }
.hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  min-height: 70px;
  padding-block: 12px;
  border-bottom: 1px solid #e8e8e8;
}
.hero-disciplines { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; }
.hero-disciplines li { color: #686868; font-size: 11px; }
.hero-disciplines li + li::before { content: "/"; margin-right: 24px; color: #bcbcbc; }
.hero-explore { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: #666; font-size: 11px; white-space: nowrap; text-decoration: none; }
.hero-explore span { color: #244bff; font: 22px/1 Arial, sans-serif; }
.hero-explore:hover { color: #244bff; }

.visual-rail { padding-block: 32px 0; background: #fff; }
.visual-rail-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.visual-rail-label { display: flex; align-items: baseline; gap: 16px; }
.visual-rail-label h2 { font-size: 16px; font-weight: 500; color: #272727; }
.visual-rail-label p { font-size: 10px; color: #777; letter-spacing: .06em; }
.visual-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.visual-pause[hidden] { display: none; }
.visual-pause-label { color: #555; font-size: 11px; }
.visual-pause-icon { width: 8px; height: 10px; border-inline: 2px solid #555; }
.visual-pause[aria-pressed="true"] .visual-pause-icon { width: 0; height: 0; border: 5px solid transparent; border-right: 0; border-left: 8px solid #555; }
.visual-pause:hover { border-color: #244bff; }
.visual-lanes { display: grid; gap: 18px; }
.visual-lane { overflow-x: auto; scrollbar-width: thin; }
.visual-track { display: flex; width: max-content; }
.visual-group {
  display: flex;
  flex-shrink: 0;
  gap: 18px;
  min-width: 100vw;
  padding-right: 18px;
  list-style: none;
}
.visual-tile { flex: 1 0 clamp(220px, 21vw, 320px); width: clamp(220px, 21vw, 320px); min-width: 0; }
.visual-tile figure { margin: 0; }
.visual-tile img { display: block; width: 100%; height: 174px; object-fit: cover; background: #f2f2f0; }
.visual-tile figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; background: #f7f7f5; }
.visual-tile figcaption span { color: #636363; font-size: 10px; }
.visual-tile figcaption span:last-child { font: 9px/1.6 Arial, sans-serif; letter-spacing: .8px; }
.visual-rail.is-enhanced:not(.is-reduced) .visual-lane { overflow-x: hidden; }
.visual-rail.is-enhanced:not(.is-reduced) .visual-track { animation: visual-drift 48s linear infinite; }
.visual-rail.is-enhanced:not(.is-reduced) .visual-lane-reverse .visual-track { animation-direction: reverse; animation-duration: 54s; }
.visual-rail.is-paused .visual-track,
.visual-rail.is-offscreen .visual-track,
.visual-rail.is-page-hidden .visual-track,
.visual-rail .visual-lane:focus-within .visual-track { animation-play-state: paused !important; }
.visual-rail.is-reduced .visual-group[aria-hidden="true"] { display: none; }
@keyframes visual-drift { to { transform: translateX(-50%); } }
@media (hover: hover) {
  .visual-lanes:hover .visual-track { animation-play-state: paused !important; }
}
.portfolio-header a:focus-visible,
.hero a:focus-visible,
.visual-pause:focus-visible { outline: 2px solid #244bff; outline-offset: 5px; }
.visual-lane:focus-visible,
.visual-rail:focus-visible { outline: 2px solid #244bff; outline-offset: -3px; }

/* 收紧轨道与原有项目区之间的过渡，其他页面保持原样。 */
.visual-rail + .inspiration { margin-top: 48px; }

@media (max-width: 1100px) {
  .hero h1 { font-size: clamp(43px, 5.25vw, 58px); }
  .hero-grid { gap: 36px; }
}
@media (max-width: 900px) {
  .intro-frame { width: calc(100% - 64px); }
  .header-layout { min-height: 80px; }
  .hero { min-height: auto; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 28px; padding-block: 52px; }
  .hero h1 { font-size: clamp(36px, 4.7vw, 44px); }
  .hero-eyebrow { font-size: 9px; letter-spacing: 1px; margin-bottom: 24px; }
  .hero-description { font-size: 13px; margin-top: 24px; }
  .hero-actions { gap: 22px; margin-top: 26px; }
  .hero-primary { min-width: 138px; padding-inline: 16px; }
  .hero-art figcaption { gap: 4px; }
}
@media (max-width: 640px) {
  .intro-frame { width: calc(100% - 40px); }
  .header-layout { min-height: 72px; gap: 12px; }
  .header-brand { font-size: 16px; gap: 8px; white-space: nowrap; }
  .brand-symbol { grid-template-columns: repeat(2, 8px); grid-template-rows: repeat(2, 8px); gap: 2px; }
  .brand-caption { display: none; }
  .header-nav { gap: 8px; }
  .header-nav a { font-size: 12px; gap: 5px; }
  .header-contact span { font-size: 18px; }
  .hero-grid { grid-template-columns: 1fr; gap: 36px; padding-block: 44px 28px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 60px); letter-spacing: -.055em; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 1px; margin-bottom: 24px; }
  .hero-description { font-size: 13px; line-height: 1.9; }
  .hero-actions { gap: 28px; }
  .hero-actions a { min-height: 50px; }
  .hero-primary { min-width: 156px; }
  .hero-art { width: 100%; }
  .hero-bottom { gap: 12px; min-height: 66px; }
  .hero-disciplines { gap: 6px 10px; }
  .hero-disciplines li { font-size: 10px; }
  .hero-disciplines li + li::before { margin-right: 10px; }
  .hero-explore { font-size: 10px; gap: 8px; }
  .visual-rail { padding-top: 24px; }
  .visual-rail-header { gap: 12px; margin-bottom: 18px; }
  .visual-rail-label { display: block; }
  .visual-rail-label p { margin-top: 4px; font-size: 9px; letter-spacing: 0; }
  .visual-pause { flex-shrink: 0; padding-inline: 8px; }
  .visual-lane-reverse { display: none; }
  .visual-group { gap: 12px; padding-right: 12px; }
  .visual-tile { flex-basis: 240px; width: 240px; }
  .visual-tile img { height: 154px; }
  .visual-rail + .inspiration { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .visual-rail .visual-track { animation: none !important; }
}

/* 新导航启用后，小屏音乐入口移到底部，与返回顶部并排，避开导航和轨道控件。 */
@media (max-width: 768px) {
  .portfolio-page .side-audio-player {
    top: auto;
    right: 76px;
    bottom: 16px;
    transform: none;
    align-items: flex-end;
  }
  .portfolio-page .side-audio-player .player-content {
    position: absolute;
    right: -60px;
    bottom: 60px;
    max-width: calc(100vw - 32px);
  }
  .portfolio-page .side-audio-player:hover .player-content {
    width: min(300px, calc(100vw - 32px));
  }
}


.home {

  display: flex;
  align-items: flex-start;
  justify-content: center;

  width: 100%;
  height: 600px;
  color: #e9e9e9;

}

.home-all {
  width: 95%;
}

.home-all-title P {
  padding-top: 20PX;
}







.infunte-top {
  width: 100%;
  background-color: #ffffff;
  padding-bottom: 100px;

}

.infunte {
  width: 100%;
  background-color: #1b1b1b;
  padding-bottom: 100px;

}


.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;

  width: 2000px;
  /* 固定宽度，不随窗口变化 */
  max-width: 95%;
  margin-inline: auto;
  height: 100px;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0));
}

@keyframes scrollLeft {
  to {
    left: -200px;
  }
}

@keyframes scrollRight {
  to {
    right: -200px;
  }
}

.runLeft,
.runRight {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 200px;
  height: 100px;
  background-color: #1c1c1c;
  border-radius: 6px;
  position: absolute;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

/* run 顶部跑马灯 */
.runLeft,
.runRight {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 200px;
  height: 100px;
  background-color: #e5e5e5;
  border-radius: 6px;
  position: absolute;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;
}

.itemLeft,
.itemRight {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 200px;
  height: 100px;
  background-color: #1c1c1c;
  border-radius: 6px;
  position: absolute;
  cursor: pointer;
  animation-timing-function: linear;
  animation-duration: 30s;
  animation-iteration-count: infinite;

}

/* 顶部和其他跑马灯共同速度 */
.runLeft,
.itemLeft {
  left: max(calc(200px * 8), 100%);
  animation-name: scrollLeft;
}

.runRight,
.itemRight {
  right: max(calc(200px * 8), calc(100% + 200px));
  animation-name: scrollRight;
}

.item1 {
  animation-delay: calc(30s / 8 * (8 - 1) * -1);
}

.item2 {
  animation-delay: calc(30s / 8 * (8 - 2) * -1);
}

.item3 {
  animation-delay: calc(30s / 8 * (8 - 3) * -1);
}

.item4 {
  animation-delay: calc(30s / 8 * (8 - 4) * -1);
}

.item5 {
  animation-delay: calc(30s / 8 * (8 - 5) * -1);
}

.item6 {
  animation-delay: calc(30s / 8 * (8 - 6) * -1);
}

.item7 {
  animation-delay: calc(30s / 8 * (8 - 7) * -1);
}

.item8 {
  animation-delay: calc(30s / 8 * (8 - 8) * -1);
}




























.inspiration {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 140px;
}

.inspiration-all {
  width: 2000px;
  /* 固定宽度，不随窗口变化 */
  max-width: 95%;


}

@media (max-width: 1300px) {

  .inspiration-all {
    width: 95%;
    /* 小于1000px时自适应 */

  }
}

.title {
  width: 100%;
  height: auto;
  /* 把2vw调整为4vw，更易在常规屏幕（如1920px宽）下触发动态值 */
  padding: clamp(40px, 4vw, 80px) 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title h {
  font-size: clamp(18px, 2vw, 48px);
  color: #2e2e2e;
  font-weight: 700;


}

.title h3 {
  font-size: clamp(24px, 3vw, 48px)
}

.title p {
  font-size: clamp(18px, 1vw, 24px);

}






/* 卡片容器 */
.card-container {
  /* background-color: #6c757d; */
  width: 100%;

  height: auto;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* 卡片 */
.card {
  background-color: white;
  width: 700px;

  height: auto;

  border-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;

  /* 新增：让子元素可用 flex 布局 */
}




@media (max-width: 768px) {
  .card-container {
    flex-wrap: wrap;
    gap: 40px;
  }

  .card {
    width: 700px;
    height: auto;
  }
}

/* 图片 */

.card-image-wrapper {
  position: relative;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.card-image {
  display: block;
  width: 100%;
  height: auto;
  background-color: rgb(69, 69, 69);

  height: auto;
  border-radius: 16px;
  overflow: hidden;
  /* 保证伪元素不溢出 */
}

@media (max-width: 768px) {
  .card-image {
    height: auto;

  }
}

.card-image-mask {
  position: absolute;
  inset: 0;
  bottom: 0px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0) 100%);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  border-radius: 16px;
  display: flex;
  align-items: flex-end;
}

.card-image-text {
  color: #fff;
  font-size: 18px;
  padding: 24px;
  padding-bottom: 32px;
  font-weight: 600;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.card-image-wrapper:hover .card-image-mask {
  opacity: 1;
}

.title-container {
  margin-top: auto;
  /* 自动推到底部 */
  padding-bottom: 24px;
  /* 可选：底部留白 */

}

.card-title {

  font-size: clamp(24px, 2vw, 36px);


}

.tag {

  display: inline-block;
  min-width: 80px;
  padding: 2px 16px;
  border: 1.5px solid #3c3c3c;
  border-radius: 40px;
  /* 圆角拉满 */
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  text-align: center;
  margin-top: 10px;
  background: #fff;
  box-sizing: border-box;

}

.tag:hover {
  background-color: rgb(44, 44, 44);
  color: white;
  cursor: pointer;
  transition: .25s;
}





.web {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 120px;
  align-items: center;
  /* 添加这行使子元素水平居中 */
}

.web-all {
  width: 2000px;
  /* 固定宽度，不随窗口变化 */
  max-width: 95%;
  height: auto;

}

@media (max-width: 1300px) {
  .web-all {
    width: 95%;
    /* 小于1000px时自适应 */

  }

  .tag {
    padding: 2px 8px;
    min-width: 40px;
  }
}




.web-card-container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

}

.web-card {
  padding: 20px;
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  /* 关键：让子项高度同步 */
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* 过渡所有可变化样式 */
}

.web-card:hover {
  border-radius: 6PX;
  /* 圆角需要和父级一至 */
  color: #222;
  /* 新增文字颜色变化，也会丝滑过渡 */
  box-shadow: 0px 0px 8px rgba(28, 97, 215, 0.5);
  /* 新增阴影，同样丝滑 */
}

.web-card a {

  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  /* 关键：让子项高度同步 */
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* 过渡所有可变化样式 */
}

.web-card-image {
  width: 40%;
  height: auto;
  border-radius: 12PX;
  object-fit: cover;
  /* 可选：保持图片比例 */
}

.web-title-container {
  width: 40%;
  /* 与图片平分宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-around;


}

.web-card-title-top h2 {
  padding-top: 10px;
}

.web-card-title-top h1 {
  font-size: clamp(16px, 1vw, 18px);
  color: #666;
}

.web-title-container h {
  font-size: clamp(16px, 1vw, 18px);
  color: #666;
  letter-spacing: 2px;
  font-weight: 500;
}

.web-title-container h2 {

  font-size: clamp(24px, 1.5vw, 36px);
  line-height: 1.1;
  /* 无单位，表示字体的1.5倍行高 */
  font-weight: 700;
}

.web-card-title-boom p {
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 600;
  color: #232323;
}

.web-card-tags {

  display: flex;
  justify-content: flex-start;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中（可选） */
  font-size: clamp(12px, 1vw, 16px);
  font-weight: 700;
  transition: all 0.2s ease;
  /* 添加悬停动画效果 */

}

.web-card-tags .tag:hover {
  background-color: #e0e0e0;
  /* 悬停时改变背景色 */
  color: #333;
  border-color: #bbb;
}

@media (max-width: 1000px) {
  .web-card-container {
    flex-direction: column;
    justify-content: space-between;
  }

  .web-card {
    padding: 20px 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }

  .web-card-image {
    width: 50%;

  }

  .web-title-container {
    width: 45%;
  }

  .web-card-title-boom {
    padding-top: 20px;

  }

  .web-title p {

    margin-bottom: 20px;
    /* 移动端间距 */
  }
}





.Work-Experience {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 140px;
  align-items: center;
  /* 添加这行使子元素水平居中 */
}

.Work-Experience-all {
  width: 2000px;
  /* 固定宽度，不随窗口变化 */
  max-width: 95%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}



/* 左侧卡片位置 */
.Work-Experience-card {
  width: 45%;
  height: auto;

  background-color: #ffffff;
  border-radius: 24px;
}

.Work-Experience-card img {
  width: 100%;
  height: auto;
  border-radius: 24PX;
  /* 圆角需要和父级一至 */
}

.Work-Experience-txt {
  width: 50%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.Work-Experience-txt-top {
  display: flex;
  justify-content: center;

  flex-direction: column;
  gap: 10px;
}

.Work-Experience-txt-top h {
  font-size: clamp(24px, 2vw, 36px);

  font-weight: 700;
}

.Work-Experience-txt-top h3 {
  width: 100%;
  font-size: clamp(18px, 1vw, 24px);
  font-weight: 600;
  color: #555555;
  display: flex;
  flex-direction: row;
  gap: 50px;
}

.Work-Experience-txt-top h3 span {
  display: flex;
  align-items: center;
  width: auto;
  box-shadow: 0 0 6px 1px rgba(206, 206, 206, 0.5);
  /* 蓝色发光 */
  flex-direction: row;
  font-size: clamp(14px, 1vw, 24px);
  color: #999;
  border: #cecece 1px solid;
  background-color: white;
  border-radius: 6px;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.Work-Experience-txt-top h3 span:hover {
  color: #ffffff;
  background-color: rgb(0, 0, 0);
}


.Work-Experience-txt-top p {

  /*  上下边距是动态的  左右为0 */
  color: #585858;
  font-size: 18px;
  font-size: clamp(12px, 1vw, 18px);
  font-weight: 500;

  position: relative;
  /*  给与子集定位前置 */
}

.Work-Experience-txt-top p::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50px;
  /* 控制上边起始位置 */
  bottom: 50px;
  /* 控制下边结束位置 */
  width: 2px;
  background-color: #c7c7c7;
  border-radius: 12px;
}

.Work-Experience-txt-cards {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding-top: 20px;
}

.Work-Experience-tag {

  display: inline-block;
  min-width: 80px;
  padding: 4px 16px;
  border: 1.5px solid #b9b9b9;
  border-radius: 6px;
  /* 圆角拉满 */
  font-size: 16px;
  font-size: clamp(12px, 1vw, 16px);
  text-align: center;
  font-weight: 700;
  background: #fff;
  box-sizing: border-box;

}

.Work-Experience-tag:hover {
  background-color: rgb(44, 44, 44);
  color: white;
  cursor: pointer;
  transition: .25s;
}

.Work-Experience-txt a {
  width: 150px;
  padding: clamp(5px, 1vw, 20px)0px;
  font-weight: 700;
  color: #154cff;

  cursor: pointer;
  /* 鼠标悬停时变成手型 */
}

@media (max-width: 900px) {
  .Work-Experience-all {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .Work-Experience-card {
    width: 100%;
  }

  .Work-Experience-txt {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .Work-Experience-txt-top {
    width: 100%;
  }

  .Work-Experience-txt-top h3 {
    width: auto;
    font-size: clamp(18px, 1vw, 24px);
    font-weight: 600;
    color: #555555;
    display: flex;
    flex-direction: column;
    justify-content: center;



    gap: 10px;
  }

  .Work-Experience-txt-top p {
    padding: 10px 0px;
    border-left: 0px;
  }

  .Work-Experience-txt-top p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50px;
    /* 控制上边起始位置 */
    bottom: 50px;
    /* 控制下边结束位置 */
    width: 0px;
    background-color: #c7c7c7;
    border-radius: 12px;
  }

  .Work-Experience-txt-cards {
    gap: 5px;
  }
}

















.Personal-Information {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 140px;
}

.Personal-Information-all {
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.Personal-Information-all-left-Expertise {
  width: 100%;
}

.Personal-Information-all-left-Expertise h {
  font-size: clamp(16px, 1vw, 18px);
  color: #666;
  letter-spacing: 2px;
  font-weight: 500;
}

.Personal-Information-all-left-Expertise h3 {
  padding-bottom: 40px;
  font-size: clamp(24px, 1.5vw, 36px);
}

.skill-item {
  width: 80%;
  font-weight: 700;
  font-size: clamp(16px, 1vw, 18px);
}

.Personal-Information-all-left {
  width: 45%;
}

.Personal-Information-all-right {
  width: 50%;
}

@media (max-width: 900px) {
  .Personal-Information-all {
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .Personal-Information-all-left {
    width: 100%;
  }

  .Personal-Information-all-right {
    width: 100%;
    padding-top: 60px;
  }
}

/* ========== 核心修复：skill-container 样式 ========== */
.skill-container {
  width: 100%;
  max-height: 400px;
  /* 固定最大高度，触发滚动 */
  overflow-y: auto;
  /* 仅纵向滚动，横向禁止 */
  overflow-x: hidden;

  /* 正确隐藏滚动条（保留滚动功能） */
  /* Chrome/Safari/Edge */
  ::-webkit-scrollbar {
    display: none;
  }

  /* Firefox */
  scrollbar-width: none;
  /* IE/旧Edge */
  -ms-overflow-style: none;

  position: relative;
  padding-bottom: 40px;
  box-sizing: border-box;
  /* 移除冗余的Flex布局，恢复默认块级布局 */
  /* display: flex; */
  /* flex-direction: column; */
  /* justify-content: flex-start; */
  /* align-items: flex-start; */
  gap: 40px;
  /* 保留间距，用margin/padding替代flex gap */
}

/* 修复：给skill-item加margin，替代flex gap */
.skill-item {
  margin-bottom: 40px;
}

.skill-item:last-child {
  margin-bottom: 0;
  /* 最后一个项去掉底部间距 */
}

/* ========== 滚动提示样式修复 ========== */
.scroll-tip {
  position: absolute;
  bottom: 10px;
  right: 10%;
  /* 改为右对齐，移除translateX避免冲突 */
  /* 删掉干扰的transform: translateX(-50%); */
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4px 12px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 修复动画：只保留Y轴浮动，移除X轴transform */
  animation: bounce 1.5s ease-in-out infinite;
  /* 确保提示在最上层 */
  z-index: 10;
}

/* 修复动画：仅Y轴浮动 */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }

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

  100% {
    transform: translateY(0);
  }
}

/* 滚动后隐藏提示 */
.skill-container.scrolled .scroll-tip {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* 技能项原有样式 */
.skill-item-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 16px;
}

.skill-bar {
  width: 100%;
  background-color: #dadada;
  border-radius: 16px;
}

.skill-bar-true {
  padding: 10px 0px;
  background-color: #000000;
  border-radius: 16px;
}





/* 标题样式 */
.project-title {
  margin-bottom: 40px;
}

.project-title h2 {
  font-size: 16px;
  color: #666;
  letter-spacing: 2px;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.project-title p {
  font-size: clamp(24px, 1.5vw, 36px);
  color: #222;
  margin: 0;
  font-weight: 600;
}

/* 案例列表（3列布局） */
.project-list {
  display: flex;
  flex-direction: row;

  justify-content: space-between;

  gap: 20px;
}

/* 响应式优化 */
@media (max-width: 1248px) {
  .project-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}


/* 案例卡片样式 */
.project-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 案例内容样式 */
.project-content {
  padding: 15px;
}

.project-content h3 {
  font-size: 16px;
  color: #222;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.project-tool {
  font-size: 12px;
  font-weight: 600;
  color: #0037ff;
  margin: 0 0 10px 0;
}

.project-desc {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
  margin: 0;
}





























.Services-Available {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 60px;
}

.Services-Available-all {
  padding-top: 90px;
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Services-Available-all-top {
  display: flex;
  flex-direction: column;

  justify-content: center;

  align-items: center;
}

.Services-Available-all-top h {



  font-size: clamp(16px, 1vw, 18px);
  color: #666;
  letter-spacing: 2px;
  font-weight: 500;
}

.Services-Available-all-top h3 {
  width: 100%;
  font-size: clamp(24px, 1.5vw, 36px);
  font-weight: 700;

}

.Services-Available-all-bottom {
  width: 70%;
  min-width: 1050px;
  max-width: 1150px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  /* 自动换行（超出3个则换行显示） */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 55px;
  padding-top: 40px;
}

.Services-Available-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  /* 核心：33.333% 是三列均分，减去gap的一半（因为gap是两个卡片之间的间距，每个卡片分摊一半） */
  width: calc(33% - (20px * 2 / 3));
  max-width: 300px;
  min-width: 300px;
  /* 可选：给卡片加样式，方便你看到效果 */
  height: 300px;
  /* 卡片高度，自行调整 */
  background-color: #f5f5f5;
  /* 卡片背景色 */
  border-radius: 8px;
  /* 圆角 */
  box-sizing: border-box;
  /* 保证padding/border不影响宽度计算 */
  cursor: pointer;
  border: 0 solid transparent;
  transition: all 0.3s ease;
  outline: 1px solid #7a7a7a;
  /* 2px 宽度 + 蓝色描边，可修改颜色/宽度 */
}

.Services-Available-card:hover {
  background-color: #0208ae;
  box-shadow: 0 4px 12px rgba(0, 140, 255, 0.1);

  transform: translateY(-5px);
}

.Services-Available-card h3 {
  transition: color 0.3s ease;
  font-weight: 700;
  font-size: clamp(22px, 1.5vw, 24px);
}

.Services-Available-card p {
  width: 80%;
  font-size: 16px;
  font-weight: 500;
}

/* 核心：悬停时修改卡片内h3的颜色 */
.Services-Available-card:hover h3 {
  color: #ffffff;
  /* 改为你想要的颜色，这里用和描边一致的蓝色示例 */
  /* 可选：加个文字过渡，颜色变化更丝滑 */
  transition: color 0.3s ease;
}

.Services-Available-card:hover p {
  color: #e1e1e1;
  /* 改为你想要的颜色，这里用和描边一致的蓝色示例 */
  /* 可选：加个文字过渡，颜色变化更丝滑 */
  transition: color 0.3s ease;
}

/* 响应式优化：小屏幕（如手机）自动改为1列 */
@media (max-width: 1400px) {
  .Services-Available-all-bottom {
    width: 100%;
    /* 手机端占满宽度，一行一个 */
    min-width: 400px;
    gap: 40px;

  }

  .Services-Available-card {
    width: 100%;
    /* 手机端占满宽度，一行一个 */
  }
}


.call-me {
  display: flex;
  width: 60%;
  padding-top: 30px;
  align-items: center;
  justify-content: center;
}

/* 按钮核心样式：保留过渡效果（控制回弹速度） */
.call-me .contact-link {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  width: 80%;
  padding: 12px 30px;
  background-color: #000000;
  border: 1px solid #000000;
  color: #ffffff;

  border-radius: 6px;
  font-size: clamp(16px, 1vw, 18px);
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transform: translateY(0);
  /* 核心：过渡效果保留，0.8s保证缓慢回弹（可调整） */
  transition: all 0.3s ease;
  /* 调整阴影颜色，与黑色按钮更协调 */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* 定义非原点区间上下浮动动画 */
@keyframes continuousFloat {
  0% {
    transform: translateY(-0px);
    /* 浮动最高点 */
  }

  50% {
    transform: translateY(-10px);
    /* 浮动最低点 */
  }

  100% {
    transform: translateY(-0px);
    /* 回到最高点循环 */
  }
}

/* 悬停时：触发动画，移除 transition: none; */
.call-me .contact-link:hover {
  /* 可选：微调背景色，增加hover视觉反馈（可保留纯黑，删除此行即可） */
  background-color: #222222;
  color: #ffffff;
  /* 触发动画，优先级高于过渡，不影响移出回弹 */
  animation: continuousFloat 1.2s ease-in-out infinite;
  /* 调整阴影颜色，与黑色按钮匹配 */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  /* 关键：删除 transition: none; 让移出时过渡生效 */
}

/* 点击时：暂停动画，模拟按压感 */
.call-me .contact-link:active {
  animation-play-state: paused;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

























/* 首页收尾：开放式简介、合作邀请、紧凑页脚。旧版页面样式独立保留。 */
.closing-frame {
  width: calc(100% - 112px);
  max-width: 1320px;
  margin-inline: auto;
}

.about-me,
.contact-section,
.portfolio-footer {
  background: #fff;
}

.about-layout {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: clamp(48px, 7vw, 112px);
  padding-block: 96px 88px;
}

.closing-eyebrow {
  margin: 0 0 26px;
  color: #707070;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.5;
}

.closing-eyebrow span {
  margin-inline: 10px;
  color: #b0b0b0;
}

.about-heading h2 {
  color: #181818;
  font-size: clamp(36px, 3.8vw, 56px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.045em;
}

.about-heading h2 span {
  color: #777;
  line-height: inherit;
}

.about-copy {
  min-width: 0;
  padding-top: 38px;
}

.about-copy p {
  max-width: 560px;
  margin-bottom: 16px;
  color: #626262;
  font-size: 16px;
  line-height: 1.9;
}

.about-copy .about-intro {
  margin-bottom: 20px;
  color: #242424;
  font-size: 23px;
  font-weight: 500;
  line-height: 1.5;
}

.about-disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 28px;
  list-style: none;
}

.about-disciplines li {
  color: #555;
  font-size: 12px;
  white-space: nowrap;
}

.about-disciplines li + li::before {
  content: "/";
  margin-right: 20px;
  color: #b5b5b5;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  border-top: 1px solid #e6e6e6;
  padding-block: 64px;
}

.contact-heading .closing-eyebrow {
  margin-bottom: 16px;
}

.contact-heading h2 {
  color: #181818;
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.045em;
}

.contact-note {
  margin-top: 16px;
  color: #717171;
  font-size: 14px;
  line-height: 1.8;
}

.contact-action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.contact-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  min-width: 192px;
  min-height: 60px;
  margin-bottom: 6px;
  padding: 14px 24px;
  border: 1px solid #181818;
  border-radius: 4px;
  background: #181818;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s;
}

.contact-button span {
  color: inherit;
}

.contact-button .contact-arrow {
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.2s;
}

.contact-button:hover {
  background: #363636;
}

.contact-button:hover .contact-arrow {
  transform: translate(2px, -2px);
}

.contact-email,
.contact-wechat,
.contact-wechat span {
  color: #6b6b6b;
  font-size: 12px;
  line-height: 1.7;
}

.contact-email {
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-email:hover {
  color: #181818;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-wechat span {
  margin-left: 8px;
}

.portfolio-footer {
  border-top: 1px solid #ededed;
  /* 为固定的返回顶部按钮留出空间，避免遮住最后一行链接。 */
  padding-block: 36px 88px;
}

.footer-main,
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-main {
  margin-bottom: 28px;
}

.footer-signature {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
}

.footer-brand {
  color: #242424;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.03em;
}

.footer-tagline {
  color: #767676;
  font-size: 11px;
  letter-spacing: 0.025em;
}

.footer-nav,
.footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.footer-nav a,
.footer-social a {
  padding-block: 6px;
  color: #606060;
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-social a,
.footer-social a span {
  color: #717171;
  font-size: 12px;
}

.footer-social a span {
  margin-left: 4px;
  font-family: Arial, sans-serif;
}

.footer-nav a:hover,
.footer-social a:hover {
  color: #181818;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.footer-copyright {
  color: #767676;
  font-size: 11px;
  line-height: 1.7;
}

.contact-section a:focus-visible,
.portfolio-footer a:focus-visible {
  outline: 2px solid #0037ff;
  outline-offset: 5px;
}

.contact-section:focus-visible {
  outline-offset: -4px;
}

@media (max-width: 900px) {
  .closing-frame {
    width: calc(100% - 64px);
  }

  .about-layout {
    gap: 40px;
    padding-block: 72px;
  }

  .about-copy p {
    font-size: 15px;
  }

  .about-copy .about-intro {
    font-size: 20px;
  }

  .contact-layout {
    gap: 32px;
    padding-block: 48px;
  }
}

@media (max-width: 640px) {
  .closing-frame {
    width: calc(100% - 40px);
  }

  .about-layout,
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-layout {
    padding-block: 56px;
  }

  .closing-eyebrow {
    margin-bottom: 20px;
  }

  .about-copy {
    padding-top: 0;
  }

  .about-disciplines {
    margin-top: 24px;
    gap: 10px 16px;
  }

  .about-disciplines li + li::before {
    margin-right: 16px;
  }

  .contact-action {
    align-items: flex-start;
  }

  .contact-button {
    width: 100%;
  }

  .portfolio-footer {
    padding-block: 28px 80px;
  }

  .footer-main,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .footer-main {
    margin-bottom: 24px;
  }

  .footer-bottom {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .footer-nav a,
  .footer-social a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-button,
  .contact-button .contact-arrow,
  .footer-nav a,
  .footer-social a {
    transition: none;
  }
}

.site-footer {
  margin-top: 140px;
  width: 100%;
  background-color: #f8f9fa;
  color: #6c757d;
  font-size: 14px;
  border-top: 1px solid #e9ecef;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.footer-content {
  width: 2000px;
  /* 固定宽度，不随窗口变化 */
  max-width: 95%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

.footer-column {
  width: 550px;
  margin-bottom: 20px;

}

.footer-column h3 {
  color: #343a40;
  font-size: 24px;
  margin-bottom: 15px;
}

.friend-links a {
  text-decoration: none;
  color: #343a40;
}

.quick-links li,
.contact-info li {
  margin-bottom: 10px;
  list-style: none;
}

.quick-links a,
.contact-info a {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.3s;
}

.quick-links a:hover,
.contact-info a:hover {
  color: #007bff;
}

.contact-Copyright {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.copyright {
  display: flex;
  justify-content: center;
  text-align: center;
  border-top: 1px solid #e9ecef;
  font-size: 12px;
  gap: 30px;
}

.site-info img {
  height: 16px;
  vertical-align: middle;
  margin-right: 5px;
}

.keep {
  width: 100%;
  display: flex;
  justify-content: center;
}

.keep-day {
  width: 95%;
  max-width: 2000px;


}

























/* 返回顶部 */
.rocket-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  /* 改为底部固定，避免与导航栏冲突 */
  z-index: 10001;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, #000000 0%, #192ac7 100%);
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
  padding: 0;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  visibility: hidden;
}

.rocket-btn.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
}

.rocket-btn:hover {
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6);
  transform: translateY(-2px) scale(1.05);
}

.rocket-btn:active {
  transform: translateY(0) scale(0.95);
}

.rocket-icon {
  width: 40px;
  height: 40px;

  background-size: contain;
  /* filter: brightness(0) invert(1);  */
  /* 使图标变白 */
  transition: transform 0.3s ease;
}

.rocket-btn:hover .rocket-icon {
  transform: translateY(-2px);
}

.rocket-text {
  color: #ffffff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-top: 2px;
  user-select: none;
  opacity: 0.9;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .rocket-btn {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }

  .rocket-icon {
    width: 20px;
    height: 20px;
  }

  .rocket-text {
    font-size: 9px;
  }
}

/* 定义火箭点击升空动画 */
@keyframes rocketLaunch {
  0% {
    transform: translateY(0);
  }

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

  /* 中间状态：升高8px（最高点） */
  100% {
    transform: translateY(-2px);
  }

  /* 结束状态：回到hover的升高高度 */
}

/* 按钮点击时，图标执行升空动画 */
.rocket-btn.launching .rocket-icon {
  animation: rocketLaunch 0.5s ease-in-out;
}

.call-me .contact-link:focus-visible,
.rocket-btn:focus-visible,
#contact:focus-visible {
  outline: 3px solid #0037ff;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .call-me .contact-link,
  .rocket-btn,
  .rocket-icon {
    transition: none;
    animation: none !important;
  }
}

/* 作品与网站：仅作用于新版首页，保留 BACK.html 的旧版布局。 */
.portfolio-page .work-section { display: block; margin-top: 0; padding-block: 88px 96px; }
.portfolio-page .sites-section { display: block; margin-top: 0; padding-block: 88px 96px; border-block: 1px solid #e9e9e5; background: #f7f7f4; }
.collection-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); align-items: end; gap: 48px; margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid #e3e3df; }
.collection-eyebrow { color: #757575; font: 10px/1.6 Arial, sans-serif; letter-spacing: 1.6px; }
.collection-eyebrow > span { color: #244bff; margin-right: 10px; font: inherit; }
.collection-heading h2 { margin-top: 12px; color: #1b1b1b; font-size: clamp(36px, 3.6vw, 52px); font-weight: 700; line-height: 1.3; letter-spacing: -.055em; }
.collection-dot { color: #244bff; line-height: inherit; }
.collection-intro > p { color: #737373; font-size: 13px; line-height: 1.9; }
.collection-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: 10px; color: #333; font-size: 12px; text-decoration: none; }
.collection-link > span { color: #244bff; font: 21px/1 Arial, sans-serif; }
.collection-link:hover { color: #244bff; }
.projects-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 28px 32px; align-items: stretch; }
.project-entry { min-width: 0; }
.project-featured { grid-row: span 2; display: flex; flex-direction: column; }
.project-study > a { display: block; color: inherit; text-decoration: none; }
.project-media { position: relative; height: clamp(160px, 14.5vw, 190px); overflow: hidden; border-radius: 3px; background: #eeefee; }
.project-media > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.project-featured .project-media { flex: 1; min-height: 420px; }
.project-media-inspiration { background: #f9d8d2; }
.project-media-inspiration > img { object-position: center top; }
.project-media-signal > img { object-position: center 15%; }
.project-media-label { position: absolute; top: 16px; left: 16px; padding: 6px 10px; background: #fff; color: #595959; font-size: 9px; letter-spacing: .04em; }
.project-image-arrow { position: absolute; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #244bff; background: #fff; font: 22px/1 Arial, sans-serif; }
.project-caption { padding-top: 16px; }
.project-caption-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.project-index { color: #777; font: 9px/1.6 Arial, sans-serif; letter-spacing: 1px; }
.project-category { color: #777; font-size: 10px; white-space: nowrap; }
.project-caption h3 { margin-top: 8px; color: #252525; font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: -.025em; }
.project-featured h3 { font-size: 28px; }
.project-note { margin-top: 6px; color: #777; font-size: 12px; line-height: 1.8; }
.project-study a:hover .project-media > img { transform: scale(1.025); }
.project-study a:hover h3 { color: #244bff; }

.collection-intro .sites-count { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #5e5e5e; font-size: 11px; }
.sites-count > span { width: 5px; height: 5px; background: #244bff; }
.sites-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; }
.site-showcase { display: flex; flex-direction: column; min-width: 0; border: 1px solid #e4e4df; border-radius: 4px; background: #fff; text-decoration: none; overflow: hidden; transition: border-color .2s ease; }
.site-showcase:hover { border-color: #244bff; }
.site-preview { position: relative; height: clamp(230px, 24vw, 330px); overflow: hidden; background: #15111d; }
.site-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform .35s ease; }
.site-showcase:hover .site-preview > img { transform: scale(1.02); }
.site-preview-label { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 24px; padding: 6px 10px; color: #4d4d4d; background: #fff; font: 9px/1.6 Arial, sans-serif; letter-spacing: 1px; }
.site-preview-label > span { color: #244bff; font: 16px/1 Arial, sans-serif; }
.site-content { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.site-kicker { color: #7a7a7a; font: 9px/1.6 Arial, sans-serif; letter-spacing: 1.5px; }
.site-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 8px; }
.site-title-row h3 { min-width: 0; color: #252525; font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.5; letter-spacing: -.04em; }
.site-title-arrow { flex-shrink: 0; color: #244bff; font: 28px/1 Arial, sans-serif; transition: transform .2s ease; }
.site-showcase:hover .site-title-arrow { transform: translate(2px, -2px); }
.site-description { margin-top: 10px; color: #777; font-size: 12px; line-height: 1.9; }
.site-detail-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 24px; }
.site-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.site-facts > div { display: flex; flex-direction: column; gap: 4px; }
.site-facts dt { color: #929292; font-size: 9px; }
.site-facts dd { color: #656565; font-size: 11px; }
.site-kind { color: #777; font-size: 10px; }
.site-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid #eeeeea; }
.site-detail-row + .site-bottom { margin-top: 24px; }
.site-bottom > span { color: #858585; font: 10px/1.6 Arial, sans-serif; }
.site-bottom > span:last-child { color: #3f3f3f; font-family: inherit; font-size: 11px; }
.site-bottom > span:last-child > span { margin-left: 8px; color: #244bff; font: 18px/1 Arial, sans-serif; }
.site-future-art { background-color: #efefe9; background-image: linear-gradient(#dfdfd733 1px, transparent 1px), linear-gradient(90deg, #dfdfd733 1px, transparent 1px); background-size: 42px 42px; padding: 65px 30px 32px; }
.site-future-type { position: absolute; bottom: 50px; left: 30px; display: flex; flex-direction: column; }
.site-future-type > span, .site-future-type > strong { font: 700 clamp(64px, 6.4vw, 96px)/.9 Arial, sans-serif; letter-spacing: -6px; }
.site-future-type > span { color: transparent; -webkit-text-stroke: 1px #a3a39a; }
.site-future-type > strong { color: #272722; }
.site-future-cross { position: absolute; right: 28px; top: 68px; color: #244bff; font: 300 72px/1 Arial, sans-serif; }
.site-future-note { position: absolute; left: 32px; bottom: 20px; color: #8b8b83; font: 9px/1.5 Arial, sans-serif; letter-spacing: 1px; }
.site-preparing { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; color: #75756c; font-size: 11px; }
.site-preparing::before { content: ""; width: 5px; height: 5px; background: #aaa99c; }

.work-section a:focus-visible, .sites-section a:focus-visible { outline: 2px solid #244bff; outline-offset: 5px; }
#projects:focus-visible, #live-sites:focus-visible { outline: 2px solid #244bff; outline-offset: -4px; }
@media (max-width: 900px) {
  .portfolio-page .work-section, .portfolio-page .sites-section { padding-block: 64px; }
  .collection-heading { grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 32px; }
  .projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .project-featured { grid-column: 1 / -1; grid-row: auto; }
  .project-featured .project-media { flex: none; min-height: 0; height: auto; aspect-ratio: 16 / 10; }
  .project-media { height: 190px; }
  .sites-grid { gap: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-content { padding: 22px; }
  .site-title-row h3 { font-size: 22px; }
  .site-future-type > span, .site-future-type > strong { font-size: 72px; }
  .site-future-cross { top: 70px; right: 22px; font-size: 56px; }
}
@media (max-width: 640px) {
  .portfolio-page .work-section, .portfolio-page .sites-section { padding-block: 48px; }
  .collection-heading { grid-template-columns: 1fr; gap: 18px; margin-bottom: 26px; padding-bottom: 24px; }
  .collection-heading h2 { font-size: 36px; margin-top: 10px; }
  .collection-eyebrow { font-size: 9px; letter-spacing: 1px; }
  .collection-intro > p { font-size: 12px; }
  .collection-link { margin-top: 4px; }
  .projects-grid { grid-template-columns: 1fr; gap: 30px; }
  .project-featured { grid-column: auto; }
  .project-featured .project-media { aspect-ratio: 4 / 3; }
  .project-study .project-media { height: auto; aspect-ratio: 16 / 10; }
  .project-featured h3 { font-size: 24px; }
  .project-caption h3 { font-size: 22px; }
  .project-media-label { top: 12px; left: 12px; font-size: 8px; }
  .project-index { font-size: 8px; letter-spacing: .7px; }
  .project-note { font-size: 11px; }
  .collection-intro .sites-count { margin-top: 12px; }
  .sites-grid { grid-template-columns: 1fr; gap: 24px; }
  .site-preview { height: auto; aspect-ratio: 4 / 3; }
  .site-future-art { height: 220px; aspect-ratio: auto; }
  .site-content { padding: 22px 20px; }
  .site-title-row h3 { font-size: 23px; }
  .site-preview-label { top: 14px; left: 14px; }
  .site-future-type { left: 24px; bottom: 42px; }
  .site-future-note { left: 26px; bottom: 15px; font-size: 8px; }
  .site-future-cross { right: 24px; top: 65px; }
}
@media (prefers-reduced-motion: reduce) {
  .project-media > img, .site-preview > img, .site-showcase, .site-title-arrow { transition: none; }
}

/* 工作经历：倒序时间线，信息分栏，不再使用无关的参考图片。 */
.experience-section { padding-block: 88px 72px; background: #fff; }
.experience-section .collection-heading { margin-bottom: 0; }
.career-timeline { padding: 0; margin: 0; list-style: none; }
.career-entry { display: grid; grid-template-columns: 152px minmax(0, .95fr) minmax(0, 1.05fr); gap: 44px; padding-block: 44px; border-bottom: 1px solid #e5e5e2; }
.career-date { position: relative; padding-left: 24px; }
.career-date::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border: 1px solid #b7b7b0; border-radius: 50%; background: #fff; }
.career-current .career-date::before { border-color: #244bff; background: #244bff; }
.career-timeline > li:not(:last-child) .career-date::after { content: ""; position: absolute; left: 3px; top: 30px; bottom: -44px; width: 1px; background: #e7e7e3; }
.career-range > time { display: block; color: #353535; font: 24px/1.3 Arial, sans-serif; letter-spacing: -.5px; }
.career-range > span { display: block; margin-top: 8px; color: #8a8a82; font: 12px/1.8 Arial, sans-serif; }
.career-range > span time { color: inherit; font: inherit; }
.career-status { display: inline-flex; align-items: center; min-height: 26px; margin-top: 18px; padding: 4px 8px; color: #244bff; background: #eff2ff; font-size: 10px; line-height: 1.5; }
.career-status-past { color: #85857d; background: #f4f4f1; }
.career-profile { min-width: 0; }
.career-profile h3 { color: #252525; font-size: clamp(22px, 2vw, 27px); font-weight: 500; line-height: 1.55; letter-spacing: -.025em; overflow-wrap: anywhere; }
.career-role { margin-top: 12px; color: #454545; font-size: 14px; line-height: 1.6; }
.career-role > span { display: block; margin-top: 4px; color: #92928a; font: 10px/1.8 Arial, sans-serif; letter-spacing: .3px; }
.career-summary { max-width: 430px; margin-top: 22px; color: #707070; font-size: 13px; line-height: 1.95; }
.career-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.career-tags li { padding: 5px 9px; border: 1px solid #e8e8e3; color: #77776e; background: #fafaf8; font-size: 10px; line-height: 1.5; }
.career-responsibilities { min-width: 0; padding-top: 4px; }
.career-focus + .career-focus { margin-top: 22px; }
.career-focus h4 { display: flex; gap: 12px; align-items: baseline; color: #434343; font-size: 13px; font-weight: 500; line-height: 1.7; }
.career-focus h4 > span { color: #a0a098; font: 9px/1.6 Arial, sans-serif; }
.career-focus p { margin-top: 7px; color: #707070; font-size: 13px; line-height: 1.95; }
.career-results { margin-top: 24px; border-top: 1px solid #ecece8; }
.career-results summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-block: 12px 8px; color: #696961; font-size: 11px; list-style: none; cursor: pointer; }
.career-results summary::-webkit-details-marker { display: none; }
.career-results summary::marker { content: ""; }
.career-disclosure-icon { color: #244bff; font: 22px/1 Arial, sans-serif; }
.career-results[open] .career-disclosure-icon { transform: rotate(45deg); }
.career-results > p { margin-top: 4px; color: #85857d; font-size: 11px; line-height: 1.95; }
.career-results strong { color: #4d4d47; font-size: inherit; font-weight: 500; }
.career-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 24px; }
.career-footer > p { color: #8c8c84; font-size: 11px; line-height: 1.8; }
.career-footer > a { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; color: #3e3e3e; font-size: 12px; text-decoration: none; white-space: nowrap; }
.career-footer > a span { color: #244bff; font: 22px/1 Arial, sans-serif; }
.career-footer > a:hover, .career-results summary:hover { color: #244bff; }
.experience-section a:focus-visible, .career-results summary:focus-visible { outline: 2px solid #244bff; outline-offset: 5px; }
.experience-section:focus-visible { outline: 2px solid #244bff; outline-offset: -4px; }
@media (max-width: 1100px) {
  .career-entry { grid-template-columns: 125px minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .experience-section { padding-block: 64px 48px; }
  .career-entry { grid-template-columns: 130px minmax(0, 1fr); gap: 24px 32px; padding-block: 36px; }
  .career-date { grid-row: span 2; }
  .career-profile h3 { font-size: 25px; }
  .career-summary { max-width: none; margin-top: 18px; }
  .career-tags { margin-top: 18px; }
  .career-responsibilities { grid-column: 2; padding-top: 0; }
  .career-timeline > li:not(:last-child) .career-date::after { bottom: -36px; }
}
@media (max-width: 640px) {
  .experience-section { padding-block: 48px 32px; }
  .career-entry { grid-template-columns: 1fr; gap: 22px; padding-block: 30px 32px; }
  .career-date { display: flex; align-items: center; justify-content: space-between; gap: 12px; grid-row: auto; padding-left: 18px; }
  .career-date::before { top: 10px; width: 6px; height: 6px; }
  .career-timeline > li:not(:last-child) .career-date::after { display: none; }
  .career-range { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
  .career-range > time { font-size: 16px; }
  .career-range > span { margin: 0; font-size: 11px; }
  .career-status { flex-shrink: 0; min-height: 26px; margin-top: 0; font-size: 9px; }
  .career-profile h3 { font-size: 24px; }
  .career-role { margin-top: 10px; }
  .career-summary { margin-top: 18px; font-size: 13px; }
  .career-responsibilities { grid-column: auto; }
  .career-focus h4 { font-size: 13px; }
  .career-focus p { font-size: 13px; }
  .career-footer { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 20px; }
}