:root {
  /* 每个页面背景框(毛玻璃卡片)的颜色,集中在这里改 */
  --page1-frame-color: rgba(255, 255, 255, 0.7);
  --page2-frame-color: rgba(255, 255, 255, 0.7);
  --page3-frame-color: rgba(255, 255, 255, 0.7);
  --page4-frame-color: rgba(255, 255, 255, 0.7);
  --page5-frame-color: rgba(255, 255, 255, 0.7);
  --page6-frame-color: rgba(255, 255, 255, 0.7);
  --page7-frame-color: rgba(255, 255, 255, 0.7);
  --page7-5-frame-color: rgba(255, 255, 255, 0.7);
  --page8-frame-color: rgba(255, 255, 255, 0.7);
  --page9-frame-color: rgba(255, 255, 255, 0.7);
  --page-applications-frame-color: rgba(255, 255, 255, 0.7);
  --background-video-blur: 18px;
}
@font-face {
  font-family: "Nico Moji";
  src: url("NicoMoji-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Jockey One";
  src: url("JockeyOne-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Jaldi";
  src: url("Jaldi-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: #dbd6c4;
}
#video-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
#video-blur-wrap {
  position: absolute;
  inset: 0;
  background: rgb(213, 207, 187);
  -webkit-filter: blur(var(--background-video-blur));
  filter: blur(var(--background-video-blur));
  transform: scale(1.03);
}
#background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translate(-50%, -50%) translate(-210px, 24px) scale(1.8);
  transform-origin: center;
  pointer-events: none;
  mix-blend-mode: multiply;
}
#sign-slideshow {
  position: fixed;
  top: var(--sign-top, 31px);
  left: var(--sign-left, 16px);
  width: 150px;
  height: 70px;
  opacity: 0.85;
  z-index: 5;
  pointer-events: none;
}
#sign-slideshow .sign-slide {
  position: absolute;
  top: var(--sign-slide-top, 0px);
  left: var(--sign-slide-left, 0px);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#sign-slideshow .sign-slide.is-active {
  opacity: 1;
}
#sign-slideshow .sign-slide--nsf,
#sign-slideshow .sign-slide--nature-lab,
#sign-slideshow .sign-slide--expanded {
  transform: scale(1.35);
}
#site-title {
  position: fixed;
  top: 34px;
  right: 34px;
  z-index: 5;
  margin: 0;
  text-align: right;
  color: #505050;
  font-family: "Nico Moji", sans-serif;
  font-size: 40px;
  line-height: 1.3;
  pointer-events: none;
}
#site-title .letter {
  display: inline-block;
  opacity: 0;
  animation: letter-fade-in 0.35s ease-out forwards;
  pointer-events: auto;
}
#hero-intro {
  position: fixed;
  bottom: 34px;
  left: 34px;
  z-index: 5;
  width: min(620px, calc(100vw - 68px));
  margin: 0;
  color: #ffffff;
  font-family: "Jaldi", sans-serif;
  font-size: clamp(18px, 1.55vw, 26px);
  line-height: 1.65;
  text-align: left;
  pointer-events: none;
}
#poster-actions {
  position: fixed;
  right: 34px;
  bottom: 34px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 20px;
}
#language-selector {
  position: relative;
}
#language-toggle,
#language-menu button {
  border: 0;
  padding: 0;
  background: transparent;
  color: #ffffff;
  font-family: "Jockey One", sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
#language-toggle::after {
  content: "▾";
  margin-left: 5px;
  font-size: 0.7em;
}
#language-toggle:hover,
#language-toggle:focus-visible,
#language-menu button:hover,
#language-menu button:focus-visible {
  color: rgba(175, 19, 19, 0.85);
}
#language-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: max-content;
}
#language-menu[hidden] {
  display: none;
}
#language-menu button {
  text-align: left;
  font-family: "Jaldi", sans-serif;
  font-size: 18px;
}
.poster-button {
  color: #ffffff;
  text-decoration: none;
  font-family: "Jockey One", sans-serif;
  font-size: 20px;
  transition: color 0.2s ease;
}
.poster-button:hover,
.poster-button:focus-visible {
  color: rgba(175, 19, 19, 0.85);
}
.poster-arrow {
  display: inline-block;
  position: relative;
  width: 13px;
  height: 13px;
  margin-left: 7px;
  transition: transform 0.2s ease;
}
.poster-arrow::before {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 13px;
  height: 2px;
  background: currentColor;
  transform: rotate(-45deg);
  transform-origin: left center;
}
.poster-arrow::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}
.poster-button:hover .poster-arrow,
.poster-button:focus-visible .poster-arrow {
  transform: translate(2px, -2px);
}
@keyframes letter-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.reveal-heading .letter {
  display: inline-block;
  opacity: 0;
}
.reveal-heading.in-view .letter {
  animation: letter-fade-in 0.35s ease-out forwards;
}
.letter {
  display: inline-block;
  border-radius: 2px;
  background-color: rgba(255, 0, 0, 0);
  transition: background-color 2s ease;
  -webkit-tap-highlight-color: transparent;
}
.letter:hover,
.letter.is-touched {
  background-color: rgba(175, 19, 19, 0.85);
  transition: background-color 0.2s ease;
}
#hero-spacer {
  position: relative;
  z-index: 1;
  height: 100vh;
}
#page1,
#page2,
#page3,
#page4,
#page5,
#page6,
#page7,
#page7-5,
#page8,
#page9,
#page-applications {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 60px clamp(24px, 6vw, 100px);
}
#page10,
#page11 {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 60px clamp(24px, 6vw, 100px);
}
#page-display {
  position: relative;
  z-index: 2;
  height: 70vh;
  background: #ffffff;
}
.display-sticky {
  position: relative;
  display: grid;
  width: 100%;
  height: 70vh;
  place-items: center;
  padding: clamp(24px, 5vw, 80px);
}
#page-display-image {
  display: block;
  width: 32%;
  height: 32%;
  object-fit: contain;
  transition: opacity 0.2s ease;
}
#page-display .display-next {
  right: 40px;
  bottom: 40px;
}
.credits {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: #000000;
  font-family: "Jaldi", sans-serif;
  font-size: clamp(19px, 1.55vw, 28px);
  line-height: 1.35;
}
.credits p {
  margin: 0;
}
.credits-authors {
  margin-bottom: 14px !important;
  font-size: clamp(26px, 2.2vw, 42px);
  font-weight: 700;
}
.credits sup {
  font-size: 0.55em;
  line-height: 0;
}
.credits-acknowledgements {
  margin-top: clamp(36px, 5vw, 72px);
  max-width: 1200px;
  font-size: clamp(14px, 1vw, 18px);
  line-height: 1.45;
}
.credits-acknowledgements h2 {
  margin: 0 0 10px;
  font: inherit;
  font-weight: 700;
}
.credits-acknowledgements p + p {
  margin-top: 14px;
}
.designer-page {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  color: #000000;
  font-family: "Jaldi", sans-serif;
  font-size: clamp(16px, 1.15vw, 21px);
  line-height: 1.45;
}
.designer-page h2 {
  margin: 0 0 10px;
  font-size: 1.2em;
}
.designer-page p {
  margin: 0;
}
.designer-page a {
  color: inherit;
  text-underline-offset: 3px;
}
.designer-page a:hover,
.designer-page a:focus-visible {
  color: rgba(175, 19, 19, 0.85);
}
.page1-inner {
  position: relative;
  z-index: 0;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  --frame-blur: 0px;
}
#page1-inner { --frame-color: var(--page1-frame-color); }
#page2-inner { --frame-color: var(--page2-frame-color); }
#page3-inner { --frame-color: var(--page3-frame-color); }
#page4-inner { --frame-color: var(--page4-frame-color); }
#page5-inner { --frame-color: var(--page5-frame-color); }
#page6-inner { --frame-color: var(--page6-frame-color); }
#page7-inner { --frame-color: var(--page7-frame-color); }
#page7-5-inner { --frame-color: var(--page7-5-frame-color); }
#page8-inner { --frame-color: var(--page8-frame-color); }
#page9-inner { --frame-color: var(--page9-frame-color); }
#page-applications-inner { --frame-color: var(--page-applications-frame-color); }
.page1-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--frame-color);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  filter: blur(var(--frame-blur));
  transition: filter 0.15s linear;
}
.page1-content {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 60px;
  padding: 50px;
}
.page1-image {
  flex: 1 1 0;
}
.page1-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.page1-image iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: none;
  border-radius: 14px;
  background: transparent;
}
#page4-model-gif {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  border-radius: 14px;
  background: transparent;
}
.page4-caption {
  font-family: "Jaldi", sans-serif;
  font-size: 18px;
  letter-spacing: 0.05em;
  color: #666666;
  text-align: center;
  margin: 14px 0 0;
}
#page4-image {
  position: relative;
}
#page6-image {
  position: relative;
}
.page6-media-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  background: transparent;
  overflow: hidden;
}
.page6-media-group img,
.page6-media-group video {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
}
.page4-model-toggle {
  position: absolute;
  bottom: -10px;
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: #3a3a3a;
  padding: 0;
  cursor: pointer;
  z-index: 3;
  transition: color 0.2s ease;
}
.page4-model-toggle:hover {
  color: rgba(175, 19, 19, 0.85);
}
.page4-model-toggle--next {
  right: -16px;
}
.page4-model-toggle--prev {
  left: -16px;
  transform: rotate(180deg);
}
.page4-model-toggle-chevron {
  position: relative;
  width: 72px;
  height: 66px;
}
.page4-model-toggle-chevron::before,
.page4-model-toggle-chevron::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 36px;
  height: 36px;
  border-top: 7.5px solid currentColor;
  border-right: 7.5px solid currentColor;
  transform: rotate(45deg) scaleY(1.6);
}
.page4-model-toggle-chevron::before {
  left: 0;
}
.page4-model-toggle-chevron::after {
  left: 24px;
}
.page1-text {
  flex: 1 1 0;
  color: #000000;
  font-family: "Jockey One", sans-serif;
}
#page4-inner .page1-text {
  text-align: right;
}
.page1-text h2 {
  font-family: "Nico Moji", sans-serif;
  font-size: 34px;
  margin: 0 0 20px;
  color: #000000;
}
.page1-text p {
  font-family: "Jaldi", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  margin: 0;
  color: #666666;
}
#page2-heading {
  font-size: 31px;
  text-align: center;
}
#page2-paragraph {
  text-align: right;
}
.page3-content {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px;
  color: #000000;
  font-family: "Jockey One", sans-serif;
}
#page3-heading {
  font-family: "Nico Moji", sans-serif;
  font-size: 34px;
  margin: 0;
  color: #000000;
  text-align: center;
}
#page3-paragraph {
  font-family: "Jaldi", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  color: #666666;
}
.page3-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.page3-feature h3 {
  font-family: "Nico Moji", sans-serif;
  font-size: 20px;
  margin: 0 0 10px;
  color: #000000;
}
.page3-feature p {
  font-family: "Jaldi", sans-serif;
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  margin: 0;
  color: #333333;
}
#page5-heading {
  font-family: "Nico Moji", sans-serif;
  font-size: 34px;
  margin: 0;
  color: #000000;
  text-align: center;
}
#page5-paragraph {
  font-family: "Jaldi", sans-serif;
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  color: #666666;
}
.page5-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.page5-feature-image {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  margin-bottom: 14px;
  background: #ffffff;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.page5-feature-image:hover {
  transform: scale(1.03);
}
.page5-feature-image::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px dashed rgba(175, 19, 19, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.page5-feature-image:hover::after {
  opacity: 1;
  animation: page5-border-spin 4s linear infinite;
}
@keyframes page5-border-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.page5-feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.page5-feature:nth-child(2) .page5-feature-image img {
  object-position: 50% 70%;
}
.page5-feature h3 {
  font-family: "Nico Moji", sans-serif;
  font-size: 20px;
  margin: 0 0 10px;
  color: #000000;
  text-align: center;
}
.page5-feature-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(225, 225, 225, 0.82);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.page5-feature-image:hover .page5-feature-overlay {
  opacity: 1;
}
.page5-feature-overlay p {
  font-family: "Jaldi", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin: 0;
  color: #2f2f2f;
  text-align: center;
}
.applications-content {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 50px;
}
#page-applications-heading {
  margin: 0;
  color: #000000;
  font-family: "Nico Moji", sans-serif;
  font-size: 34px;
  text-align: center;
}
.applications-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 20px;
}
.applications-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  margin: 0;
}
.applications-image img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
}
#page7-inner .page1-text,
#page7-5-inner .page1-text,
#page8-inner .page1-text,
#page9-inner .page1-text {
  text-align: left;
  flex: 1 1 45%;
  max-width: 45%;
}
#page7-inner .page1-content,
#page7-5-inner .page1-content,
#page8-inner .page1-content,
#page9-inner .page1-content {
  overflow: visible;
  position: relative;
}
#page7-image,
#page7-5-image,
#page8-image,
#page9-image {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -60px;
  margin: auto 0;
  height: 804px;
  width: 804px;
  max-width: 90vw;
  z-index: 2;
}
#page7-image iframe,
#page7-5-image iframe,
#page8-image iframe,
#page9-image iframe {
  aspect-ratio: 1 / 1;
}
@media (max-width: 800px) {
  html, body {
    overflow-x: hidden;
  }
  #background-video {
    transform: translate(-50%, -50%) scale(2.5);
  }
  #sign-slideshow {
    top: 20px;
    left: 20px;
    width: 75px;
    height: 38px;
  }
  #site-title {
    top: 92px;
    right: 20px;
    max-width: calc(100vw - 40px);
    font-size: clamp(26px, 8vw, 34px);
    line-height: 1.2;
  }
  #hero-intro {
    right: 20px;
    bottom: 105px;
    left: 20px;
    width: auto;
    font-size: 17px;
    line-height: 1.55;
  }
  #poster-actions {
    right: 20px;
    bottom: 28px;
    gap: 16px;
  }
  #language-toggle {
    font-size: 18px;
  }
  #language-menu button {
    font-size: 17px;
  }
  .poster-button {
    font-size: 18px;
  }
  .page1-content {
    flex-direction: column;
    padding: 32px;
  }
  .page3-grid {
    grid-template-columns: 1fr;
  }
  .page5-grid {
    grid-template-columns: 1fr;
  }
  .applications-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .applications-image {
    min-height: 180px;
  }
  #page7-inner .page1-text,
  #page7-5-inner .page1-text,
  #page8-inner .page1-text,
  #page9-inner .page1-text {
    max-width: 100%;
  }
  #page7-image,
  #page7-5-image,
  #page8-image,
  #page9-image {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
  }
}