body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background-color: #0b0b0d;
  color: #e6e7eb;
  line-height: 1.6;
}

header {
  text-align: center;
  padding: 60px 20px 20px;
}

/* 确保header中的所有元素默认z-index为10 */
header * {
  z-index: 10;
}

header h1 {
  font-size: 6rem;
  margin-bottom: 0px;
}

header p.subtitle {
  font-size: 1.2rem;
  color: #a0a3ab;
  margin-bottom: 0px;
}

header p.authors,
header p.affiliation {
  font-size: 1.55rem;
  color: #bbb;
  margin: 3px 0;
}

main * {
  z-index: 10;
}

.btn {
  background-color: #68e1fd;
  color: #000;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: background 0.3s;
}
.btn:hover {
  background-color: #4cc3df;
}

/* main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
} */

h2 {
  font-size: 1.6rem;
  margin: 25px 0 15px;
  color: #fff;
}

p {
  margin-bottom: 15px;
}

/* 自由拼接容器 */
.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 150px;
  gap: 0px;
  margin-bottom: 20px;
  min-height: 600px;
}

.mosaic video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
}

/* 自由拼接：定义区域（你可以随意修改） */
.item1 {
  grid-column: 2 / span 4;
  grid-row: 1 / span 2;
}
.item2 {
  grid-column: 5 / span 8;
  grid-row: 1 / span 2;
}
.item3 {
  grid-column: 1 / span 3;
  grid-row: 4 / span 2;
}
.item4 {
  grid-column: 4 / span 3;
  grid-row: 4 / span 2;
}
.item5 {
  grid-column: 7 / span 3;
  grid-row: 4 / span 2;
}

.item6 {
  grid-column: 1 / span 4;
  grid-row: 6 / span 2;
}
.item7 {
  grid-column: 5 / span 4;
  grid-row: 6 / span 2;
}
.item8 {
  grid-column: 9 / span 4;
  grid-row: 6 / span 2;
}

.item9 {
  grid-column: 1 / span 3;
  grid-row: 8 / span 2;
}
.item10 {
  grid-column: 4 / span 3;
  grid-row: 8 / span 2;
}
.item11 {
  grid-column: 7 / span 3;
  grid-row: 8 / span 2;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .mosaic {
    grid-template-columns: repeat(8, 1fr);
    grid-auto-rows: 120px;
  }
  .item1 {
    grid-column: 1 / span;
    grid-row: 1 / span 2;
  }
  .item2 {
    grid-column: 4 / span 5;
    grid-row: 1 / span 2;
  }
  .item3 {
    grid-column: 1 / span 2;
    grid-row: 3 / span 2;
  }
  .item4 {
    grid-column: 3 / span 2;
    grid-row: 3 / span 2;
  }
  .item5 {
    grid-column: 5 / span 2;
    grid-row: 3 / span 2;
  }
}

@media (max-width: 768px) {
  .mosaic {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 100px;
  }
  .item1,
  .item2,
  .item3,
  .item4,
  .item5,
  .item6,
  .item7,
  .item8,
  .item9,
  .item10,
  .item11 {
    grid-column: auto / span 1;
    grid-row: auto / span 1;
  }
}
/* 7列网格布局 */
.grid-seven {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0px;
  margin-bottom: 0px;
}
/* 6列网格布局 */
.grid-six {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0px;
  margin-bottom: 0px;
}
/* 5列网格布局 */
.grid-five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0px;
  margin-bottom: 0px;
}

/* 4列网格布局 */
.grid-four-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px;
  margin-bottom: 0;
}

/* 4列网格布局 */
.grid-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0px;
  margin-bottom: 0px;
}

/* 3列网格布局 */
.grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0px;
  margin-bottom: 0px;
}

/* 2列网格布局 */
.grid-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
  margin-bottom: 0px;
}

.grid-four video,
.grid-four-top video,
.grid-three video,
.grid-two video,
.grid-five video,
.grid-six video,
.grid-seven video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
  cursor: pointer;
}

/* 全屏状态（不同浏览器前缀都写上） */
video:fullscreen {
  object-fit: contain;
  background: black;
}

video:-webkit-full-screen {
  object-fit: contain;
  background: black;
}

video:-moz-full-screen {
  object-fit: contain;
  background: black;
}

video:-ms-fullscreen {
  object-fit: contain;
  background: black;
}

/* 默认隐藏控制栏 */
.video-container video::-webkit-media-controls {
  display: none !important;
}
.video-container video::-moz-media-controls {
  display: none !important;
}

/* 鼠标悬停时显示 */
.video-container:hover video::-webkit-media-controls {
  display: flex !important;
}
.video-container:hover video::-moz-media-controls {
  display: flex !important;
}

.video-label-hover, .video-label-always {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 8px 10px;
  font-size: 14px;
  display: none; /* 默认隐藏 */
}

.video-container:hover .video-label-hover {
  display: block; /* 鼠标移入时显示 */
}

.video-container .video-label-always {
  display: block; /* 一直显示 */
}

/* 背景视频 */
video.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  opacity: 0.3; /* 控制透明度 */
  z-index: 0;
}

/* 播放按钮样式 */
.video-container {
  position: relative;
  cursor: pointer;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  transition: opacity 0.3s;
  z-index: 20;
}

/* 音量控制按钮 */
.volume-control {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  cursor: pointer;
  z-index: 25;
  transition: background 0.3s;
}

.volume-control:hover {
  background: rgba(0, 0, 0, 0.9);
}

.volume-control.muted {
  background: rgba(255, 0, 0, 0.7);
}

.video-container.playing .play-button {
  opacity: 0;
  pointer-events: none;
}

.video-container:hover .play-button {
  opacity: 1;
}

.video-container.playing:hover .play-button {
  opacity: 0;
}

/* 自定义mosaic布局类 */
.mosaic-hero {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 200px;
}

.mosaic-hero .item1 {
  grid-column: 1 / span 6;
  grid-row: 1 / span 3;
}
.mosaic-hero .item2 {
  grid-column: 7 / span 6;
  grid-row: 1 / span 2;
}
.mosaic-hero .item3 {
  grid-column: 7 / span 3;
  grid-row: 3 / span 1;
}
.mosaic-hero .item4 {
  grid-column: 10 / span 3;
  grid-row: 3 / span 1;
}

.mosaic-symmetrical {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 150px;
}

.mosaic-symmetrical .item1 {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
}
.mosaic-symmetrical .item2 {
  grid-column: 5 / span 4;
  grid-row: 1 / span 2;
}
.mosaic-symmetrical .item3 {
  grid-column: 9 / span 4;
  grid-row: 1 / span 2;
}
.mosaic-symmetrical .item4 {
  grid-column: 1 / span 6;
  grid-row: 3 / span 2;
}
.mosaic-symmetrical .item5 {
  grid-column: 7 / span 6;
  grid-row: 3 / span 2;
}

.mosaic-feature {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 180px;
}

.mosaic-feature .item1 {
  grid-column: 1 / span 8;
  grid-row: 1 / span 3;
}
.mosaic-feature .item2 {
  grid-column: 9 / span 4;
  grid-row: 1 / span 3;
}
.mosaic-feature .item3 {
  grid-column: 1 / span 3;
  grid-row: 4 / span 2;
}
.mosaic-feature .item4 {
  grid-column: 4 / span 3;
  grid-row: 4 / span 2;
}
.mosaic-feature .item5 {
  grid-column: 7 / span 3;
  grid-row: 4 / span 2;
}
.mosaic-feature .item6 {
  grid-column: 10 / span 3;
  grid-row: 4 / span 2;
}

/* 横屏+竖屏混合布局 */
.mosaic-mixed {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 240px;
  height: 240px;
}

.mosaic-mixed .item1 {
  grid-column: 1 / span 4;
  grid-row: 1 / span 1;
} /* 横屏1 */
.mosaic-mixed .item2 {
  grid-column: 5 / span 4;
  grid-row: 1 / span 1;
} /* 横屏2 */
.mosaic-mixed .item3 {
  grid-column: 9 / span 2;
  grid-row: 1 / span 1;
} /* 竖屏1 */
.mosaic-mixed .item4 {
  grid-column: 11 / span 2;
  grid-row: 1 / span 1;
} /* 竖屏2 */

/* 另一种混合布局：横屏在上，竖屏在下 */
.mosaic-mixed-alt {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 120px;
  height: 240px;
}

.mosaic-mixed-alt .item1 {
  grid-column: 1 / span 6;
  grid-row: 1 / span 2;
} /* 横屏1 */
.mosaic-mixed-alt .item2 {
  grid-column: 7 / span 6;
  grid-row: 1 / span 2;
} /* 横屏2 */
.mosaic-mixed-alt .item3 {
  grid-column: 1 / span 3;
  grid-row: 3 / span 2;
} /* 竖屏1 */
.mosaic-mixed-alt .item4 {
  grid-column: 4 / span 3;
  grid-row: 3 / span 2;
} /* 竖屏2 */
.mosaic-mixed-alt .item5 {
  grid-column: 7 / span 3;
  grid-row: 3 / span 2;
} /* 竖屏3 */
.mosaic-mixed-alt .item6 {
  grid-column: 10 / span 3;
  grid-row: 3 / span 2;
} /* 竖屏4 */

@media (max-width: 900px) {
  .mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
  .mosaic > div {
    grid-column: auto / span 1 !important;
    grid-row: auto / span 1 !important;
  }
}

@media (max-width: 800px) {
  #floating-outline {
    /* a floating panel */
    position: fixed;
    z-index: 1000;
    top: 4rem;
    left: 1.5rem;
    opacity: 0.3;
    transition: opacity 0.1s ease;
    display: none;
  }
}
@media (min-width: 800px) {
  #floating-outline {
    /* a floating panel */
    position: fixed;
    z-index: 1000;
    top: 4rem;
    left: 1.5rem;
    opacity: 0.3;
    transition: opacity 0.1s ease;
  }

  #floating-outline:hover {
    opacity: 0.8;
  }
}

.demo-bar {
  display: inline-flex;
  align-items: center;
  padding: 10px 10px;
  background-color: #333;
  color: #f0f0f0;
  border-radius: 8px;
  text-decoration: none;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* font-size: 17px; */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.demo-bar .icon {
  margin-right: 10px;
  font-size: 20px;
}

.demo-bar .icon-alone {
  font-size: 24px;
}

.demo-bar:hover {
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

.video-caption {
  position: absolute;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px;
  opacity: 1;
}

.video-caption .prompt {
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.video-container:hover .video-overlay {
  opacity: 1;
}

.video-overlay .prompt {
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}