/* 公共排版工具类：集中替代页面中的重复内联样式。 */
.panel {
  position: relative;
  overflow: scroll;
  color: black;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition: all 0.5s ease-in-out;
}

/* Chrome 和 Safari 隐藏滚动条，但保留滚动功能。 */
.panel::-webkit-scrollbar { display: none; }

.panel-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: filter 0.5s ease-in-out;
}

.poster-title,
.poster-subtitle {
  font-size: 0.9em;
  opacity: 0.8;
}

.mkv {
  filter: blur(10px);
  transition: filter 0.3s ease;
}

.mkv:hover { filter: blur(0); }

.text-left { text-align: left; }
.text-muted-left { color: var(--muted-color); text-align: left; }
.text-dark { color: black; }
.content-scroll { display: flex; flex-direction: column; align-items: center; overflow: scroll; scrollbar-width: none; }
.row-between { display: flex; justify-content: space-between; }
.menu-text { font-size: var(--font-size-menu); }
.feature-text { font-size: var(--font-size-feature); font-weight: bold; }
.info-item { margin-bottom: var(--item-gap); line-height: var(--line-height-compact); }
.pull-up { margin-top: -4vh; }
.subsection-title { margin-top: var(--subsection-gap); }
.text-left-spaced { text-align: left; margin-top: 6vh; }
.full-width { width: 100%; }
.centered-stack { width: 100%; display: flex; flex-direction: column; align-items: center; }
.responsive-media { width: 100%; height: auto; }
.about-label-first { width: 12%; display: block; margin-bottom: var(--section-gap); }
.about-label { width: 12%; display: block; margin: var(--section-gap) 0; }
.section-label { width: 12%; display: block; margin: var(--section-gap) auto; }
.section-label-centered { width: 12vw; display: block; margin: 6.6vh auto; }
.section-heading-image { width: 15%; display: block; }
.section-heading-spaced { width: 15%; display: block; margin-top: 6.6vh; }
.section-heading-centered { width: 15%; display: block; margin: 0 auto; }
.split-column { width: 48%; }
.copy-width { width: var(--copy-width); }
.hero-copy { width: var(--copy-width); margin: 0 auto; margin-top: var(--section-gap); text-align: center; }
.intro-copy { width: var(--copy-width); margin: var(--section-gap) auto; text-align: center; }
.copy-with-gap { width: var(--copy-width); margin: 2vh 0; }
.about-copy-first { width: var(--copy-width); text-align: center; margin-top: var(--section-gap); }
.about-copy { width: var(--copy-width); text-align: center; margin: var(--section-gap) 0; }
.content-columns { width: var(--content-width); display: flex; justify-content: space-between; }
.screening-slider { width: var(--content-width); padding: 0 8.7%; }
.content-centered { width: var(--content-width); text-align: center; }
.content-left { width: var(--content-width); text-align: left; }
.content-title { width: var(--content-width); text-align: left; margin-bottom: 0; margin-top: 2vh; }
.content-copy-short { width: var(--content-width); text-align: left; margin-bottom: 3vh; }
.content-copy-spaced { width: var(--content-width); text-align: left; margin-bottom: 6vh; }
.content-heading { width: var(--content-width); text-align: left; margin: 0; }
.content-heading-spaced { width: var(--content-width); text-align: left; margin: 5vh 0 0; }
.wide-copy { width: 60%; }
.wide-copy-spaced { width: 60%; margin-top: var(--section-gap); }
.wide-media { width: 60%; margin: var(--section-gap) auto; display: block; }
.talk-media { width: 70%; }
.about-structure { width: 70%; display: block; margin-bottom: 20vh; }
.feature-media { width: var(--media-width); margin: 0 auto; display: block; }