/* 鼠标效果样式 */ 


/* ========== 光标样式 ========== */ 
.cursor-pointer { 
  cursor: pointer; 
}


/* ========== 链接样式 ========== */ 
.link {
  color: var(--theme-surface-on-surface-variant); 
  text-decoration: none; 
  transition: .2s opacity; 
}


.link:hover {
  color: #1557b0; 
  text-decoration: none; 
}


/* ========== 箭头链接样式 ========== */ 
.arrow-link, .arrow-link-left {
  display: inline-flex; 
  align-items: center; 
  transition: .2s opacity; 
  color: var(--theme-surface-on-surface-variant); 
  text-decoration: none; 
}


.arrow-link:not(.arrow-link-left):after {
  content: "keyboard_arrow_right"; 
  display: inline-flex; 
  font-size: 1.25em; 
  font-family: Symbol; 
  margin: 0 0 0 var(--space-xs); 
  height: inherit; 
  opacity: inherit; 
  transition: .3s transform; 
}


.arrow-link:not(.arrow-link-left):hover:after {
  transform: translate(50%); 
}


.arrow-link-left:before {
  content: "keyboard_arrow_left"; 
  display: inline-flex; 
  font-size: 1.25em; 
  font-family: Symbol; 
  margin: 0 var(--space-xs) 0 0; 
  height: inherit; 
  opacity: inherit; 
  transition: .3s transform; 
}


.arrow-link-left:hover:before {
  transform: translate(-50%); 
}


/* ========== 轮播导航按钮样式 ========== */ 
.carousel-nav {
  margin-top: 60px; 
  border-radius: 99em; 
  background: var(--theme-tonal-tonal); 
  display: inline-flex; 
  align-items: center; 
  padding: 4px; 
  width: fit-content; 
  gap: var(--space-xs); 
}


.carousel-nav button {
  color: var(--theme-surface-on-surface); 
  font-family: Symbol; 
  display: flex; 
  padding: 8px 12px; 
  justify-content: center; 
  align-items: center; 
  gap: var(--space-sm); 
  flex: 1 0 0; 
  background: #f8f9fc; 
  border: none; 
  height: 36px; 
  width: 48px; 
  flex-grow: 0; 
  border-radius: 8px; 
  cursor: pointer; 
  transition: all 0.2s ease; 
}


.carousel-nav button:hover {
  border-radius: var(--shape-corner-rounded, 9999px); 
  background: #eff0f3; 
  -webkit-backdrop-filter: blur(8px); 
  backdrop-filter: blur(8px); 
}


/* ========== 视频控制按钮样式 ========== */ 
.video-control-button {
  background: var(--theme-surface-overlay-low); 
  border-radius: var(--shape-corner-rounded); 
  -webkit-backdrop-filter: blur(16px); 
  backdrop-filter: blur(16px); 
  display: inline-flex; 
  justify-content: center; 
  align-items: center; 
  position: absolute; 
  bottom: var(--space-md); 
  right: var(--space-md); 
  height: 48px; 
  width: 48px; 
  cursor: pointer; 
  transition: all 0.2s ease; 
}


.video-control-button:hover {
  background: var(--theme-surface-overlay-high); 
}


/* ========== 缓动函数 ========== */ 
:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53); 
  --ease-in-cubic: cubic-bezier(.55, .055, .675, .19); 
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22); 
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06); 
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035); 
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335); 
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94); 
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1); 
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1); 
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1); 
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1); 
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1); 
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955); 
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1); 
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1); 
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1); 
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1); 
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86); 
  --ease-out-back: cubic-bezier(.34, 1.85, .64, 1); 
}


/* ========== 基础样式变量 ========== */ 
:root {
  --palette-grey-900: #2F3034; 
  --palette-grey-800: #45474D; 
  --palette-grey-50: #E6EAF0; 
  --palette-grey-0: #FFFFFF; 
  --palette-grey-1000: #212226; 
  --palette-grey-20: #EFF2F7; 
  --palette-grey-1200: #121317; 
  --palette-grey-1100: #18191D; 
  --palette-grey-10: #F8F9FC; 
  --palette-grey-100: #E1E6EC; 
  --palette-grey-200: #CDD4DC; 
  --palette-grey-300: #B2BBC5; 
  --palette-grey-400: #B7BFD9; 
  --palette-grey-600: #AAB1CC4D; 
  --palette-grey-1000-12: #dedfe2; 
  --palette-grey-50-20: #414347; 
  --palette-grey-15: #F0F1F5; 
  --palette-grey-0-rgb: 255, 255, 255; 
  --palette-grey-50-rgb: 230, 234, 240; 
  --palette-grey-400-rgb: 183, 191, 217; 
  --palette-grey-600-rgb: 170, 177, 204; 
  --palette-grey-1000-rgb: 33, 34, 38; 
  --palette-grey-1200-rgb: 18, 19, 23; 
  
  --theme-surface-surface: var(--palette-grey-0); 
  --theme-surface-on-surface: var(--palette-grey-1200); 
  --theme-surface-on-surface-variant: var(--palette-grey-800); 
  --theme-surface-surface-container: var(--palette-grey-10); 
  --theme-surface-surface-container-high: var(--palette-grey-20); 
  --theme-surface-surface-container-higher: var(--palette-grey-50); 
  --theme-surface-surface-container-highest: var(--palette-grey-100); 
  --theme-surface-inverse-surface: var(--palette-grey-1200); 
  --theme-surface-inverse-on-surface: var(--palette-grey-10); 
  --theme-surface-inverse-on-surface-variant: var(--palette-grey-300); 
  --theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95); 
  --theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12); 
  --theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24); 
  --theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72); 
  --theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95); 
  --theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0); 
  
  --theme-primary-primary: var(--theme-surface-on-surface); 
  --theme-primary-on-primary: var(--theme-surface-surface); 
  --theme-tonal-tonal: var(--theme-surface-surface-container); 
  --theme-tonal-on-tonal: var(--theme-surface-on-surface); 
  
  --shape-corner-xs: 4px; 
  --shape-corner-sm: 8px; 
  --shape-corner-md: 16px; 
  --shape-corner-lg: 24px; 
  --shape-corner-xl: 36px; 
  --shape-corner-2xl: 48px; 
  --shape-corner-rounded: 9999px; 
  
  --space-none: 0px; 
  --space-xs: 4px; 
  --space-sm: 8px; 
  --space-md: 16px; 
  --space-lg: 24px; 
  --space-xl: 36px; 
  --space-2xl: 48px; 
  --space-3xl: 60px; 
  --space-4xl: 80px; 
  --space-5xl: 88px; 
  --space-6xl: 120px; 
  --space-7xl: 180px; 
}