/* 顶部 Logo 栏 */
.top-logos {
  background: white;          /* 可根据需求改背景色 */
  padding: 0.5rem 0;          /* 上下间距 */
  border-bottom: 1px solid #e0e0e0; /* 可选：与 navbar 分隔线 */
}
.navbar .logo {
  visibility: hidden;  /* 或者：opacity: 0; */
}


.top-logos .logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;            /* 加大间距 */
  flex-wrap: wrap;
}

.top-logos .logo-row img {
  height: 80px;         /* 放大 logo */
  object-fit: contain;
}

/* 放大nus logo */
.top-logos .logo-row img.logo2 {
  transform: scale(1.4); /* 放大 1.2 倍 */
  transform-origin: center center;
}

/* 缩小msl logo */
.top-logos .logo-row img.logo3 {
  transform: scale(0.75); /* 放大 1.2 倍 */
  transform-origin: center center;
}

/* zoom out marmot logo */
.top-logos .logo-row img.logo4 {
  transform: scale(0.88); /* 放大 1.2 倍 */
  transform-origin: center center;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}
.container {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

/* Navbar */
.navbar {
  background: #181897;
  padding: 1rem 0;
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, nav links take remaining space */
  gap: 1rem;
}
.navbar .logo img {
  height: 40px;
}
.navbar .nav-links {
  list-style: none;
  display: flex;
  flex: 1; /* occupy remaining horizontal space */
  justify-content: space-evenly; /* evenly distribute the links */
  align-items: center;
  margin: 0;
  padding: 0;
}
.navbar .nav-links li {
  display: block;
  margin: 0; /* spacing handled by space-evenly */
}
.navbar .nav-links a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  padding: 0.25rem 0.5rem;
}


/* Dropdown styles for Result menu */
.nav-links .has-dropdown {
  position: relative;
}
.nav-links .has-dropdown > a {
  display: inline-flex;
  align-items: center;
}
.nav-links .has-dropdown > a::after {
  content: '\25BE'; /* small down caret */
  font-size: 0.6rem;
  margin-left: 0.35rem;
  opacity: 0.9;
}
.nav-links .dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  padding: 0.35rem 0;
  display: none;
  z-index: 60;
}
.nav-links .dropdown li {
  list-style: none;
}
.nav-links .dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--text-color, #222);
  white-space: nowrap;
}
.nav-links .dropdown a:hover {
  background: rgba(0,0,0,0.03);
}

/* Show dropdown on hover for pointer devices */
@media (hover: hover) {
  .nav-links .has-dropdown:hover > .dropdown,
  .nav-links .has-dropdown.open > .dropdown {
    display: block;
  }
}

/* On small screens make dropdown cover full width under the nav link */
@media (max-width: 900px) {
  .nav-links {
    flex-direction: column;
    align-items: stretch;
  }
  .nav-links .dropdown {
    position: static;
    box-shadow: none;
    padding-left: 0.5rem;
    display: none;
  }
  .nav-links .has-dropdown.open > .dropdown {
    display: block;
  }
}
/* For small screens, stack nav items and keep logo on top */
@media (max-width: 768px) {
  .navbar .container {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  }
  .navbar .nav-links {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1rem;
  }
}



/* Dropdown 基本布局 */
.navbar .nav-links li.dropdown {
  position: relative;
  /* 确保同行内显示 */
  display: inline-block;
}

/* 隐藏子菜单 */
.navbar .nav-links .dropdown-content {
  display: none;
  position: absolute;
  top: 100%;           /* 紧贴父项下方 */
  left: 0;
  background-color: white;
  min-width: 200px;    /* 可根据需要调整 */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 1000;
  padding: 0.5rem 0;
}

/* 子菜单项 */
.navbar .nav-links .dropdown-content li {
  display: block;
}
.navbar .nav-links .dropdown-content li a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: nowrap;
  color: #333333;
  text-decoration: none;
}

/* Hover 效果 */
.navbar .nav-links .dropdown-content li a:hover {
  background-color: #f2f2f2;
}

/* 鼠标移上父项时展示子菜单 */
.navbar .nav-links li.dropdown:hover .dropdown-content {
  display: block;
}

/* 给 dropbtn 加个指针和内边距 */
.navbar .nav-links .dropbtn {
  cursor: pointer;
  padding: 0.5rem 0.75rem;
}
.navbar .nav-links .dropbtn:hover {
  color: #ffb81c;  /* 或其他 hover 颜色 */
}


/* Hero */
.hero {
  /*background: url('../assets/hero-bg.jpg') center/cover no-repeat;*/
  color: #666666;
  text-align: center;
  padding: 6rem 0;
  position: relative; /* create stacking context for the background video */
  overflow: hidden; /* ensure video doesn't overflow hero area */
}
.hero h1 {
  /* Use a code/monospace font for the big title */
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Monaco, 'Courier New', monospace;
  font-weight: 700;
  font-size: 4rem;      /* slightly larger so the title scope is wider */
  line-height: 1.2;
  margin-bottom: 1rem;
  /* Use inline layout so the icon sits directly before the word 'FALCON' */
  display: block;
  text-align: center;
  gap: 0.8rem;
}

/* Background video behind hero content */
.hero .hero-bg-video {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0.4; /* slightly less faded */
  filter: brightness(0.6) contrast(0.95);
  z-index: 0; /* behind content */
  pointer-events: none; /* allow clicks through video */
}

/* Ensure content sits above the video */
.hero > .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  /* reduce visual clutter on small screens */
  .hero .hero-bg-video { opacity: 0.18; filter: brightness(0.72); }
  .hero { padding: 4rem 0; }
}

/* Small title icon placed left of the main H1 text */
.title-icon {
  width: 60px; /* slightly larger icon */
  height: auto;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.8rem; /* more space between icon and title */
  object-fit: contain;
}

/* Ensure title text stays as a single flex item and doesn't break into multiple blocks */
.title-text {
  display: block; /* allow the title to occupy full line and avoid narrow inline wrapping */
  vertical-align: middle;
  max-width: none; /* remove ch-based cap so it can fill the container */
  width: 100%;
  text-align: center;
}

/* add - Let the hero's container be a bit wider so long titles have more horizontal room */
.hero > .container {
  max-width: 1200px; /* larger than the site's default 1000px, only in hero */
}

/* Ensure icon stays directly left of 'FALCON' and doesn't wrap away */
.brand {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 0.4rem;
  margin-right: 0.45rem;
  /* Make the word "FALCON:" blue and slightly larger than the rest of the H1 */
  color: #181897; /* primary blue used across the site */
  /* inherit the hero font (monospace) and size so it matches the H1 */
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
}

@media (max-width: 700px) {
  .hero h1 {
    /* scale down proportionally for small screens */
    font-size: 2.6rem; /* ~0.64 of 5rem, matches previous responsive ratio */
    gap: 0.5rem;
    text-align: center;
  }
  .title-icon {
    width: 48px;
  }
  /* Reduce brand size on small screens so layout stays compact */
  .brand {
    font-size: inherit; /* keep matching the H1 */
  }
}
/* Custom cursor using assets/robo.png with fallback to assets/falcon.png */
/* CSS file lives in css/, so assets are referenced as ../assets/ */
/* Apply custom cursor to the page. If you don't see it, try a hard refresh (Ctrl/Cmd+Shift+R).
   Use hotspot (0 0) which maps to the top-left pixel of the image (works better for many browsers).
*/
html, body {
  cursor: url('../assets/icon/robo-32-sharp2.cur') 16 16, url('../assets/falcon.png') 16 16, pointer;
}

a, button {
  cursor: pointer;
}

/* Videos: use same custom cursor for consistency */
video { cursor: url('../assets/icon/robo-32-sharp2.cur') 16 16, url('../assets/falcon.png') 16 16, auto; }

/* Debug helper: add .show-default-cursor to body to force a visible system cursor if needed */
.show-default-cursor { cursor: default !important; }
.hero p {
    font-size: 1.2rem;        /* 你想要的大小 */
    line-height: 1.6;       /* 可读性 */
    color: #666666;         /* 如果你希望正文也用浅灰，这里可以加 */
    text-align: justify;
}
.highlight {
  color: #181897;         /* Stanford Cardinal Red */
  font-weight: bold;      /* 可选，加粗更突出 */
}

.btn {
    background: #181897;
    padding: 0.75rem 1.5rem;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
}

.hero-text-img p .wrap-img {
  /* Make banner/image span the same width as the container (body text) */
  float: none;
  display: block;
  width: 100%;           /* fill the parent .container width */
  max-width: 100%;
  height: auto;
  margin: 0 0 1rem 0;    /* spacing below the image before the paragraph text */
  transition: transform .2s ease-in-out;
  object-fit: cover;
}
.hero-text-img p .wrap-img:hover {
  transform: scale(1.2);   /* 鼠标悬停时小幅放大，避免过大缩放 */
}

/* Generic responsive image utility: keeps image within its container */
.wrap-img {
  max-width: 100%;
  height: auto;
  display: block;
  transition: transform 0.25s ease-in-out; /* enable smooth hover transforms by default */
}

/* Full-bleed: stretch image to span the entire viewport width (ignores .container limits).
   Use by adding `full-bleed` alongside `wrap-img`, e.g. `<img class="wrap-img full-bleed">` */
.wrap-img.full-bleed {
  width: 90vw;
  margin-left: calc(50% - 45vw);
  margin-right: calc(50% - 45vw);
  max-width: none;
  display: block;
}

/* 清理 float，保证外层容器撑开高度 */
.hero-text-img::after {
  content: "";
  display: table;
  clear: both;
}

/* 段落两端对齐（保留之前设置） */
.hero-text-img p {
  text-align: justify;
  text-justify: inter-word;
  color: #666666;
  font-family: Arial, sans-serif;
  line-height: 1.6;
}

/* 手机屏幕下垂直排列 */
@media (max-width: 768px) {
  .hero-text-img {
    flex-direction: column;
    align-items: center;
    text-align: justify;
  }
  .hero-text-img img {
    margin-bottom: 1rem;
  }
}


/* Sections */
.section {
    padding: 3rem 0; /* reduce vertical spacing between sections */
}
.section h2 {
  text-align: left;
  font-family: Arial, sans-serif;
  color: #666666;
  margin-bottom: 1rem; /* reduce the large gap after secondary headings */
  font-size: 2rem;
}

.section h3 {
  text-align: left;
  font-family: Arial, sans-serif;
  color: #666666;
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.section h4 {
  text-align: left;
  font-family: Arial, sans-serif;
  color: #666666;
  margin-bottom: 2rem;
  font-size: 1.6rem;
}

#alt-results,
#diffusion-model-analysis,
#diffusion-policy-analysis,
#details,
#publications,
#videos,
#team,
#contact {
  font-family: Arial, sans-serif;
  color: #666666;       /* 浅灰色 */
}

/* Publications */
.pub-list {
    list-style: disc inside;
    max-width: 600px;
    margin: 0 auto;
}

/* Video */
.video-section video {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

/* Team */
.team-grid {
    display: flex;
    justify-content: center;
    gap: 1.5rem; /* slightly larger gap for more breathing room */
    flex-wrap: wrap; /* allow wrapping on very small screens */
    align-items: center;
}
.team-member {
    text-align: center;
    flex: 0 0 auto; /* do not stretch; size determined by image */
    width: auto;
    box-sizing: border-box;
    padding: 0.5rem;
}
.team-member img {
  /* keep avatars square and avoid stretching: set both width and height
     to the same responsive clamp value and use object-fit: cover to crop */
  width: clamp(110px, 9vw, 150px);
  height: clamp(110px, 9vw, 150px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover; /* crop the image to fill the square without distortion */
  margin: 0 auto 1rem;
  display: block;
}

/* On medium screens use two columns if space is tight */
@media (max-width: 900px) {
  .team-member { width: calc(50% - 1rem); }
}
/* On small screens stack full width */
@media (max-width: 500px) {
  .team-member { width: 100%; }
}

/* On wide screens: force a single row */
@media (min-width: 901px) {
  .team-grid {
    flex-wrap: nowrap; /* keep all items on one line */
    /* remove horizontal scrollbar; avatars will scale down via clamp() if needed */
    overflow-x: visible;
  }
}

/* Footer */
footer {
    background: #181897;
    color: white;
    text-align: center;
    padding: 1.5rem 0;
}


/* Diffusion Model Analysis 下的视频网格 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;          /* 视频之间的间距 */
  margin: 1.5rem 0;   /* 与上下文本的间距 */
}

.video-grid video {
  width: 100%;        /* 自动撑满格子宽度 */
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #000;   /* 避视频加载前空白 */
}

@media (max-width: 1200px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* 给所有垂直排列的图片加上过渡效果 */
.image-stack img {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 0 auto 1.5rem;

  /* 下面两行是关键： */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* 鼠标悬停时的自动放大和阴影效果 */
.image-stack img:hover {
  transform: scale(1.5);               /* 放大 5% */
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Enable gentle hover-enlarge specifically for images in the Framework and Result sections.
   Use media query so it only applies on devices that support hover (avoids interfering with touch).
   This targets the two images you mentioned (framework_straight.png and pic2.png). */
@media (hover: hover) {
  #framework .wrap-img:hover,
  #result .wrap-img:hover {
    transform: scale(1.05);
    transform-origin: center;
    z-index: 2; /* bring above surrounding text if overlap occurs */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  }
}


/* S1 部分：1x1  */
.s1-video-mid {
  display: grid;
  /* Responsive, centered grid: each column is at least 220px, grow to fill. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
  width: 100%;
  max-width: 1100px; /* limit how wide the grid becomes on large screens */
  margin-left: auto;
  margin-right: auto; /* center the grid within its container */
}

/* 2x3 grid for Task1 human-in-the-loop: 6 equal cells (1 image + 5 videos) */
.grid-2x3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px; /* fixed row height so items are same size */
  gap: 0.75rem;
  max-width: 1100px;
  margin: 1rem auto;
}
.grid-2x3 .grid-item {
  position: relative;
  overflow: visible;
}
.grid-2x3 img {
  width: 100%;
  height: 100%;
  /* show the whole thumbnail without cropping; keep some padding so it doesn't touch rounded corners */
  object-fit: contain;
  display: block;
  border-radius: 6px;
  padding: 6px;
  box-sizing: border-box;
  background: #fafafa;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.grid-2x3 video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

/* Hover enlarge only on pointer devices */
@media (hover: hover) {
  .grid-2x3 .grid-item:hover img,
  .grid-2x3 .grid-item:hover video {
    transform: scale(1.08);
    z-index: 30;
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
  }
}

@media (max-width: 900px) {
  .grid-2x3 {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 180px;
  }
}
@media (max-width: 500px) {
  .grid-2x3 {
    grid-template-columns: 1fr;
    grid-auto-rows: 160px;
  }
}

/* Indent the Task1 results block so it sits inset from the main Result heading */
.Task1-results {
  /* Center container but keep text left-aligned; images will be centered separately */
  margin: 0 auto;
  max-width: 1100px;
  text-align: left;
  padding: 1rem 0; /* vertical spacing */
}

.Task1-results h3,
.Task1-results h4 {
  text-align: left;
  margin: 0.5rem 0;
}

/* Constrain single mid-size video to match body text width */
.s1-video-mid {
  max-width: 800px; /* similar to body content width; adjust as needed */
  width: 100%;
  margin: 0.75rem auto; /* center the video block */
  text-align: center;
}
.s1-video-mid video {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Ensure images inside the Task1/Task2 result block match the video width */
.Task1-results .wrap-img {
  max-width: 800px; /* same as .s1-video-mid */
  width: 100%;
  display: block;
  margin: 0.75rem auto; /* center the image horizontally */
}

/* Allow the mid video and row videos to smoothly scale on hover (desktop only) */
.s1-video-mid,
.s2-video-row,
.s3-video-row {
  position: relative; /* for z-index stacking of hovered child */
  overflow: visible;  /* allow scaled video to overflow without being clipped */
}
.s1-video-mid video,
.s2-video-row video,
.s3-video-row video {
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  transform-origin: center;
  will-change: transform;
}

@media (hover: hover) {
  .s1-video-mid video:hover,
  .s2-video-row video:hover,
  .s3-video-row video:hover {
    transform: scale(1.05);
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  }
}

/* Two-column layout: left large video + right stacked small videos */
.two-column-videos {
  display: grid;
  /* make left bigger and right column narrower so the three stacked videos are smaller */
  grid-template-columns: 3fr 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1rem 0 2rem 0;
  max-width: 1100px;
}
.two-column-videos .left-big video {
  width: 100%;
  height: auto;
  display: block;
}
.two-column-videos .right-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.two-column-videos .right-stack video {
  width: 100%;
  height: auto;
  max-height: 127.5px; /* restrict height so stacked videos appear smaller */
  object-fit: cover; /* crop if necessary to maintain aspect */
  display: block;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 900px) {
  .two-column-videos {
    grid-template-columns: 1fr;
  }
  .two-column-videos .right-stack {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .two-column-videos .right-stack video {
    width: calc(50% - 0.5rem);
  }
}

/*!* 视频样式：自适应宽度、自动播放循环、悬停放大 *!*/
.s1-video-grid video {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  background: #000;
}

/* 悬停时放大 5% */
.s1-video-grid video:hover {
  transform: scale(1.05);
}

/* Make all videos have a smooth hover-scale on hover-capable devices */
video {
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  transform-origin: center;
  will-change: transform;
}

@media (hover: hover) {
  video:hover {
    transform: scale(1.05);
    z-index: 15;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  }
}

/* Stronger hover effect for Task result videos (right-stack) */
@media (hover: hover) {
  .two-column-videos .right-stack video {
    transition: transform 220ms ease, box-shadow 220ms ease;
    transform-origin: center;
    will-change: transform;
    cursor: pointer;
  }
  .two-column-videos .right-stack video:hover {
    transform: scale(1.8);
    z-index: 30; /* float above neighbors */
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
  }

  /* Slight emphasis for the large left video */
  .two-column-videos .left-big video:hover {
    /* expand towards the right and slightly up so it overlays the top of the right column */
    transform-origin: 100% 50%; /* right center */
    transform: scale(1.15);
    z-index: 60;
    box-shadow: 0 20px 44px rgba(0,0,0,0.22);
  }
}

/* Ensure the two-column container allows overlap and establish stacking contexts */
.two-column-videos {
  position: relative;
  overflow: visible; /* allow hovered video to extend into the right column */
}
.two-column-videos .left-big,
.two-column-videos .right-stack {
  position: relative; /* create stacking context children */
}
.two-column-videos .right-stack {
  z-index: 10; /* normally above left column so left hover needs higher z-index to overlap */
}

/* Introduction video: centered wrapper with overlay play button */
.video-wrapper {
  position: relative;
  max-width: 800px;
  margin: 0.75rem auto;
}
.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  background: #000;
}
.video-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.20);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, opacity 0.18s ease;
  color: #fff;
}
.video-overlay svg { width: 72px; height: 72px; }
.video-overlay:hover svg { transform: scale(1.05); }
.video-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

@media (max-width: 600px) {
  .video-overlay svg { width: 52px; height: 52px; }
  .video-wrapper { max-width: 100%; }
}

/* Indent small headings inside Task result blocks (Task1, Task2, More Tasks) */
.Task1-results h4,
.Task2-results h4,
#more-tasks h4 {
  margin-left: 1.25rem; /* indent subheadings under each Task block */
  font-weight: 600;
}

@media (max-width: 700px) {
  .Task1-results h4,
  .Task2-results h4,
  #more-tasks h4 {
    margin-left: 0.6rem; /* reduce indent on small screens */
  }
}


/* S2：两路视频并排 */
.s2-video-row {
  display: flex;
  justify-content: center; /* 居中排列，也可以用 space-between */
  gap: 1rem;               /* 两个视频之间的间距 */
  margin: 1.5rem 0;        /* 与上下段落的间距 */
}

.s2-video-row video {
  width: calc(50% - 0.5rem); /* 每个占一半宽度，减去一半 gap */
  height: auto;
  background: none;
}


/* S3：两路视频并排且静音 */
.s3-video-row {
  display: flex;
  justify-content: center;  /* 居中排列 */
  gap: 1rem;                /* 两视频间间距 */
  margin: 1.5rem 0;         /* 与上下内容保持间距 */
}

.s3-video-row video {
  width: calc(50% - 0.5rem);  /* 每个占一半宽度，减去一半 gap */
  height: auto;
  background: none;
}

/* 机构脚注 */
.affiliations {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: Arial, sans-serif;
  color: #888888;
  font-size: 0.9rem;
}
.affiliations div {
  display: inline-block;
}
.affiliations sup {
  font-size: 0.75rem;
}

/* Strong override for full-bleed banner when used inside the hero text.
   This increases specificity and removes the float so the image spans the
   full viewport width. If this still doesn't take effect, the image tag
   may have inline styles or other higher-specificity rules. */
.hero-text-img p .wrap-img.full-bleed {
  width: 100vw !important;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: block;
  float: none;
}

/* 给三个小节标题增加上方间距 */
#diffusion-model-analysis {
  margin-top: 3rem;   /* 根据需要调大或调小 */
}

#diffusion-policy-analysis {
  margin-top: 3rem;
}

#alt-results {
  margin-top: 3rem;
}

/* 如果你还想同时让它们前面的段落或容器也有点缓冲，可加： */
#diffusion-model-analysis::before,
#diffusion-policy-analysis::before,
#alt-results::before {
  content: "";
  display: block;
  height: 1rem;      /* 额外空白高度 */
}

/* 只缩小 Introduction Video 区块的上内边距 */
#videos.section {
  padding-top: 1rem;      /* 原来可能是 4rem，改成 1rem 或更小 */
  /* padding-bottom 保持不变，或者你也可以单独调 */
}

/* 标题本身也去掉多余的外边距 */
#videos h2 {
  margin-top: 0;
  margin-bottom: 1rem;    /* 视需要保留一点下方间距 */
}

/* 在 ALT Results: Multimodality Behavior 标题前增加空白 */
#alt-results {
  margin-top: 3rem;  /* 调大或调小这个值来控制空白高度 */
}

/* 作者列表整个容器用 flex 居中 */
.hero .authors {
  display: flex;
  justify-content: center;  /* 水平居中 */
  margin: 0.5rem 0 0.25rem;
}

/* 段落本身不需要额外的左右 padding，行内文本自然居中 */
.hero .authors p {
  margin: 0;
  text-align: center;       /* 保险起见，再次声明居中 */
  font-size: 1.1rem;
  line-height: 1.2;
}

/* 脚注数字 */
.hero .authors sup {
  font-size: 0.75rem;
  vertical-align: super;
}

/* 机构脚注 */
.hero .affiliations {
  text-align: center;              /* 居中对齐 */
  margin: 0 0 1rem;                /* 上 0，下 1rem */
}
.hero .affiliations p {
  margin: 0;                       /* 去掉默认段落上下边距 */
  font-size: 0.9rem;
  line-height: 1.2;                /* 减小行高 */
}

/* 脚注标号 */
.hero .authors sup,
.hero .affiliations sup {
  font-size: 0.75rem;
  vertical-align: super;
}


/* Diffusion Model Analysis 中的说明文字 */
.dma-intro {
  font-family: 'Times New Roman', serif;
  color: #000000;
  font-size: 1rem;         /* 可根据需要调整 */
  line-height: 1.6;
  margin: 1.5rem 0;        /* 与上下内容留出空白 */
  text-align: justify;     /* 如需两端对齐可加 */
}

.bibtex {
  background-color: #f5f5f5;      /* 浅灰底 */
  padding: 1rem;                  /* 内边距 */
  border-radius: 6px;             /* 圆角 */
  overflow-x: auto;               /* 内容过宽时横向滚动 */
  font-family: 'Courier New', monospace;  /* 等宽字体 */
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;                    /* 深一点的灰色字体 */
  margin: 1.5rem 0;               /* 与上下文留白 */
}

.bibtex code {
  white-space: pre;               /* 保留所有空格和换行 */
  display: block;
}

/* Animated ellipsis for 'More Tasks' heading: three dots that animate sequentially */
.more-ellipsis {
  display: inline-block;
  margin-left: 0.4rem;
  vertical-align: text-bottom;
}
.more-ellipsis span {
  display: inline-block;
  font-weight: 700;
  color: #181897; /* match site blue */
  opacity: 0.25;
  transform: translateY(0);
  animation: more-dot 1s infinite ease-in-out;
  margin: 0 2px;
}
.more-ellipsis span:nth-child(1) { animation-delay: 0s; }
.more-ellipsis span:nth-child(2) { animation-delay: 0.15s; }
.more-ellipsis span:nth-child(3) { animation-delay: 0.3s; }

@keyframes more-dot {
  0%, 20% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0.25; transform: translateY(0); }
}

/* Reduce motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .more-ellipsis span { animation: none; opacity: 1; transform: none; }
}