.empiriecom-theme-color {
    background: var(--empiriecom-gradient-background, linear-gradient(180deg, #FFF 0%, #ECEEF0 100%));
}

.empiriecom-theme-color-secondary {
    background: var(--empiriecom-background, #F7F7F7);
}

.empiriecom-theme-color-main {

    background: linear-gradient(157deg, var(--Text-light-primary, #0F0F0F) 3.22%, var(--70-black, rgba(15, 15, 15, 0.70)) 96.2%);
}

.empiriecom-theme-text {
    color: rgba(31, 31, 31, 0.50);
    font-family: JetBrains Mono;
    font-weight: 700;
}

.empiriecom-theme-text-main {
    color: rgba(31, 31, 31, 1);
    font-weight: 600;
}






.project-video.bytedance._01 {
    margin-left: -600px;
}
.project-video.bytedance {
    z-index: 5;
    flex: none;
    width: 1200px;
    max-width: none;
    display: block;
    position: relative;
}
.project-video {
    object-fit: contain;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    display: flex;
    overflow: hidden;
}


.heading-1.background-deco.bytedance-2 {
    margin-left: 1980px;
    left: 50vw;
}

.heading-1.background-deco.bytedance-1 {
    margin-left: -147px;
    left: 50vw;
}

.heading-1.background-deco {
    z-index: 0;
    opacity: .04;
    color: var(--text--bytedance--primary);
    font-family: JetBrains Mono, sans-serif;
    font-size: 1080px;
    font-weight: 700;
    line-height: 100%;
    position: absolute;
    left: 0;
}





-------------




:root {
    --text--light--paragraph: #535358;
    --text--light--primary: #34353a;
    --text--light--secondary: #8e8e98;
    --text--bytedance--primary: #3370ff;
    --text--translucent--primary: rgba(0, 0, 0, 0.80);
    --text--translucent--secondary: rgba(0, 0, 0, 0.40);
    --text--translucent--paragraph: rgba(0, 0, 0, 0.60);
  }

  .heading-1 {
    color: var(--text--light--primary);
    font-family: 'Barlow', sans-serif;
    font-size: 36px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.5px;
  }
  
  .heading-1.light-translucent-primary {
    color: var(--text--translucent--primary);
  }
  
  /* 大字背景装饰 —— 1080px JetBrains Mono，opacity 0.04 */
  .heading-1.background-deco {
    z-index: 0;
    opacity: 0.05;
    color: var(--text--bytedance--primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 1080px;
    font-weight: 700;
    line-height: 100%;
    position: absolute;
    left: 0;
    white-space: nowrap;
    pointer-events: none;
  }
  
  .heading-1.background-deco.bytedance-1 {
    margin-left: -147px;
    left: 50vw;
  }
  
  .heading-1.background-deco.bytedance-2 {
    margin-left: 1980px;
    left: 50vw;
  }
  
  .heading-6 {
    color: var(--text--light--secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
  }
  
  .heading-6.light-translucent-secondary {
    color: var(--text--translucent--secondary);
  }
  
  .paragraph {
    font-family: 'Barlow', sans-serif;
    font-size: 20px;
    font-weight: 500;
    line-height: 150%;
  }
  
  .paragraph.light-translucent-paragraph {
    color: var(--text--translucent--paragraph);
  }
  
  /* Spacing 原子 */
  .spacing-xxsmall---8 { flex: none; width: 100%; height: 8px; }
  .spacing-small---24 { flex: none; width: 100%; height: 24px; }
  
  /* ============================================
     Section 容器
     ============================================ */
  .main-section {
    position: relative;
    width: 100%;
  }
  
  /* 用原站的 bytedance-secondary 渐变背景 */
  .main-section.bytedance-secondary {
    background-image: linear-gradient(#edf1ff, #e0e9ff);
  }
  
  .main-section.bytedance-secondary.horizontal-scroll {
    padding-top: 0;
    padding-bottom: 256px;
    display: block;
    overflow: visible;
  }
  
  /* ============================================
     Horizontal Scroll 核心结构
     ============================================ */
  .horizontal-scroll-wrapper {
    width: 100%;
    padding-bottom: 100vh;
  }
  
  .horizontal-scroll-height {
    width: 100%;
    height: 200vw; /* 关键：提供垂直滚动距离 */
  }
  
  .horizontal-scroll-camera {
    position: sticky;
    top: 0;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    height: 100vh;
    margin-bottom: -100vh;
    display: flex;
    overflow: hidden;
  }
  
  .horizontal-scroll-track {
    flex: none;
    height: 100%;
    will-change: transform;
  }
  
  .horizontal-scroll-content {
    flex: none;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    margin-right: -100vw;
    display: flex;
  }
  
  /* 横向间隔 */
  .horizontal-spacing {
    flex: none;
    height: 100%;
  }
  
  .horizontal-spacing.start {
    width: 50vw;
  }
  
  .horizontal-spacing._25vw {
    width: 30vw;
    max-width: 600px;
  }
  
  .horizontal-spacing.end {
    width: 190vw;
    
  }
  
  /* 文字容器 */
  .horizontal-scroll-container {
    z-index: 3;
    flex: none;
    width: 480px;
    position: relative;
    padding: 0 24px;
  }

  .project-video {
    z-index: 5;
    flex: none;
    width: 1000px;
    max-width: none;
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(31, 31, 31, 0.15);
  }

  .project-video._01 {
    margin-left: -200px;
  }
  
  /* 图片容器（替代原来的 project-video）*/
  .project-image {
    z-index: 5;
    flex: none;
    width: 1200px;
    max-width: none;
    display: block;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(31, 31, 31, 0.15);
  }
  
 

  
  .project-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .card-video {
    z-index: 5;
    flex: none;
    width: 600px;
    max-width: none;
    display: block;
    position: relative;
    overflow: hidden;
  }
  
  /* ============================================
     响应式：≤991px 隐藏（和原站一致）
     ============================================ */
  @media (max-width: 991px) {
    .main-section.bytedance-secondary.horizontal-scroll {
      display: none;
    }
    
    .mobile-fallback {
      display: flex !important;
    }
  }
  
  /* 移动端降级内容（可选） */
  .mobile-fallback {
    display: none;
    flex-direction: column;
    gap: 48px;
    padding: 80px 24px;
    background-image: linear-gradient(#edf1ff, #e0e9ff);
  }
  
  .mobile-fallback .mobile-item img {
    width: 100%;
    border-radius: 16px;
    margin-bottom: 24px;
  }
  
  .mobile-fallback .mobile-item h1 {
    color: var(--text--translucent--primary);
    font-size: 28px;
    font-weight: 600;
    line-height: 130%;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
  }
  
  .mobile-fallback .mobile-item h6 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
    color: var(--text--translucent--secondary);
    margin-bottom: 16px;
  }
  
  .mobile-fallback .mobile-item p {
    color: var(--text--translucent--paragraph);
    font-size: 18px;
    line-height: 150%;
  }
  
  /* ============================================
     占位区（上下其他内容）
     ============================================ */
  .placeholder-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    text-align: center;
  }
  
  .placeholder-section h2 {
    font-size: 28px;
    font-weight: 500;
    color: var(--text--light--secondary);
  }