/*
 * Apple presentation / editorial chapters.
 * Deliberately scoped to the assigned section ids. The source content,
 * Watch cloud transforms and dinner scroll-mask contract stay untouched.
 */

/* Full-bleed project artwork. */
#practice,
#practice-ballance,
#ascension {
  min-height: 100svh;
  padding: 112px clamp(38px, 5.2vw, 100px) 88px;
  justify-content: flex-end;
  background: #05080d;
  color: #f5f5f7;
}

#practice > .scene-image,
#practice-ballance > .scene-image,
#ascension > .scene-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

#practice::before {
  background: linear-gradient(0deg, rgb(3 10 23 / 94%) 0%, rgb(5 15 33 / 78%) 18%, rgb(5 15 33 / 10%) 63%, rgb(4 13 29 / 8%) 100%);
}

#practice > .scene-image { object-position: 55% center; }

#practice .photo-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 136px;
  align-items: end;
  column-gap: 60px;
  max-width: 1400px;
}

#practice .eyebrow,
#practice-ballance .eyebrow,
#ascension .eyebrow {
  color: rgb(245 245 247 / 67%);
  font-size: 14px;
  letter-spacing: .05em;
  font-weight: 500;
  margin-bottom: 24px;
}

#practice .eyebrow { grid-column: 1 / -1; }

#practice .section-title,
#practice-ballance .section-title,
#ascension .section-title {
  color: #f5f5f7;
  font-family: inherit;
  font-size: clamp(58px, 6.2vw, 112px);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1.1;
  text-shadow: 0 4px 28px rgb(0 0 0 / 14%);
  max-width: 1120px;
}

#practice .photo-subtitle {
  grid-column: 1;
  font-family: inherit;
  color: #d9e2ed;
  font-size: clamp(24px, 2.2vw, 35px);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 22px;
}

#practice .starrail-app {
  grid-column: 2;
  grid-row: 2 / 4;
  width: 136px;
  height: 136px;
  max-height: none;
  margin: 0 0 4px;
  border-radius: 23%;
  box-shadow: 0 12px 38px rgb(0 0 0 / 25%);
}

#practice-ballance::before {
  background: linear-gradient(90deg, rgb(0 7 10 / 80%), rgb(0 9 15 / 46%) 48%, transparent 90%), linear-gradient(0deg, rgb(0 6 9 / 90%), transparent 80%);
}

#practice-ballance > .scene-image { object-position: center 42%; }

#practice-ballance .photo-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: end;
  gap: 0 50px;
  max-width: 1400px;
}

#practice-ballance .eyebrow { grid-column: 1 / -1; }
#practice-ballance .section-title { grid-column: 1; font-size: clamp(53px, 5.7vw, 102px); }

#practice-ballance .report-link {
  grid-column: 1;
  justify-self: start;
  width: max-content;
  max-width: 100%;
  margin-top: 28px;
  padding: 11px 22px;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
  color: #f5f5f7;
  font-size: 17px;
  line-height: 1.5;
  backdrop-filter: blur(16px);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}

#practice-ballance .report-link:hover {
  border-color: rgb(255 255 255 / 55%);
  background: rgb(255 255 255 / 18%);
}

#practice-ballance .ballance-logo {
  grid-column: 2;
  grid-row: 2 / 4;
  width: 240px;
  max-width: 100%;
  max-height: 140px;
  margin: 0 0 3px;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgb(0 0 0 / 28%);
  opacity: 1;
}

/* The original pixel image remains at or below its native 640 x 480. */
#practice-efz {
  background: #f5f5f7;
  color: #1d1d1f;
  justify-content: center;
  text-align: center;
}

#practice-efz .eyebrow { margin-bottom: 18px; color: #86868b; }
#practice-efz .section-title { font-size: clamp(48px, 5.4vw, 88px); letter-spacing: -.055em; }

#practice-efz .efz-original {
  width: min(640px, 100%);
  max-width: 640px;
  margin: 42px auto 0;
}

#practice-efz .efz-original img {
  display: block;
  width: 640px;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: 0 28px 60px rgb(0 0 0 / 15%);
}

/* A whole, readable paper, floating beside the editorial title. */
#game-ai {
  min-height: 740px;
  height: 100svh;
  padding: 110px 5.2% 50px;
  background: #f5f5f7;
  color: #1d1d1f;
  overflow: hidden;
}

#game-ai::before { display: none; }

#game-ai > .chapter-label {
  position: absolute;
  top: 110px;
  left: 5.2%;
  max-width: 39%;
  width: 39%;
  margin: 0;
  color: #6e6e73;
  text-shadow: none;
  z-index: 2;
}

#game-ai .chapter-label h2 { font-size: 21px; color: #6e6e73; }
#game-ai .chapter-label > span { color: #86868b; border-color: #c9c9ce; }
#game-ai .paper-layout { position: static; display: block; width: 100%; height: 100%; margin: 0; transform: none !important; }

#game-ai .paper-layout > div {
  position: absolute;
  left: 5.2%;
  top: 31%;
  width: 36%;
  max-width: 36%;
  display: block;
  color: #1d1d1f;
  text-shadow: none;
}

#game-ai #world-model {
  margin: 0;
  font-size: clamp(50px, 5vw, 86px);
  line-height: 1.02;
  letter-spacing: -.06em;
  font-weight: 650;
  color: #1d1d1f;
}

#game-ai .world-chinese { margin: 16px 0 0; font-size: 23px; font-weight: 500; letter-spacing: -.025em; color: #86868b; }
#game-ai .jepa-title { margin: 52px 0 17px; font-family: inherit; font-size: clamp(38px, 3.5vw, 62px); line-height: 1.1; font-weight: 600; letter-spacing: -.045em; color: #1689fa; }
#game-ai .jepa-title small { font-family: inherit; font-size: 17px; color: #86868b; font-weight: 400; letter-spacing: 0; }
#game-ai .paper-name { font-size: 15px; line-height: 1.6; color: #6e6e73; margin: 0; }
#game-ai .inline-link { font-size: 12px; color: #1689fa; line-height: 1.7; margin-top: 17px; }

#game-ai .paper-preview {
  position: absolute;
  inset: 84px 3.2% 34px auto;
  width: 56%;
  height: calc(100% - 118px);
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  z-index: 1;
  transform: translateY(0) !important;
}

#game-ai .paper-preview a { display: block; width: 100%; height: 100%; }

#game-ai .paper-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  transform: none;
  filter: drop-shadow(0 18px 26px rgb(0 0 0 / 10%));
}

body.motion-ready #game-ai .paper-preview:not(.visible) { transform: translateY(75px) !important; }

/* The continuous causal world, in a restrained white composition. */
#natural { background: #fff; color: #1d1d1f; }
#natural > .eyebrow { color: #86868b; }
#natural > .section-title { font-size: clamp(48px, 5vw, 88px); letter-spacing: -.055em; }

#natural .natural-words {
  display: grid;
  grid-template-columns: .65fr .65fr 1.7fr;
  gap: 30px;
  align-items: baseline;
  margin-top: 45px;
  font-size: clamp(30px, 3vw, 48px);
}

#natural .natural-words strong { color: #1d1d1f; font-weight: 600; }
#natural .natural-words strong:last-child { color: #1689fa; }
#natural .filmstrip { margin-top: 38px; }
#natural .filmstrip img { width: 100%; max-height: 290px; object-fit: contain; }
#natural .film-labels { margin-top: 4px; font-size: 15px; color: #6e6e73; }
#natural .filmstrip figcaption { position: static; margin-top: 12px; font-size: 10px; color: #a1a1a6; text-align: right; }
#natural .natural-bottom { gap: 7vw; margin-top: 32px; padding-top: 28px; border-color: #dedee3; }
#natural .natural-bottom p { font-size: clamp(23px, 2.2vw, 33px); font-weight: 550; color: #1d1d1f; }
#natural .natural-bottom small { margin-top: 8px; font-size: 14px; font-weight: 400; color: #86868b; }
#natural .inline-text { margin-top: 30px; font-size: 20px; line-height: 1.75; color: #86868b; }

/* Human observations retain the author's wording and the original three items. */
#ai-human { background: #f5f5f7; color: #1d1d1f; }
#ai-human .chapter-label { color: #6e6e73; margin-bottom: 32px; }
#ai-human .energy-equation { font-family: inherit; font-size: clamp(42px, 4.9vw, 78px); line-height: 1.15; letter-spacing: -.05em; font-weight: 600; color: #1d1d1f; }
#ai-human .energy-equation b { color: #1689fa; font-weight: 400; padding-inline: .15em; }
#ai-human .human-ideas { margin-top: 44px; gap: 26px; }

#ai-human .human-idea {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  border-radius: 24px;
  background: #fff;
  min-width: 0;
}

#ai-human .human-idea h4 { min-height: 3.1em; font-family: inherit; font-weight: 600; font-size: clamp(22px, 2vw, 31px); line-height: 1.4; letter-spacing: -.035em; color: #1d1d1f; }
#ai-human .human-idea figure { margin-top: 26px; }
#ai-human .human-idea figure > a { display: flex; align-items: center; justify-content: center; height: clamp(180px, 24vh, 300px); background: #fff; border-radius: 0; }
#ai-human .human-idea img { display: block; width: 100%; height: 100%; object-fit: contain; }
#ai-human .human-idea figcaption { margin-top: 22px; font-size: 13px; color: #86868b; }
#ai-human .human-last-line { font-family: inherit; font-size: clamp(25px, 2.5vw, 40px); font-weight: 550; line-height: 1.4; letter-spacing: -.04em; margin-top: 42px; color: #1d1d1f; }

/* Historical images rise behind the thought; the thought stays at the bottom. */
#human-utopia {
  min-height: 100svh;
  padding: 110px clamp(36px, 5.2vw, 100px) 76px;
  background: #f5f3ee !important;
  color: #1d1d1f;
  justify-content: flex-end;
  text-align: center;
}

#human-utopia .utopia-backdrop { position: absolute; inset: 0; padding: 0; gap: 0; width: 100%; max-width: none; align-items: stretch; }
#human-utopia .utopia-backdrop img { width: 50%; height: 100%; min-height: 100svh; max-width: none; object-fit: cover; object-position: center 22%; opacity: .94; mix-blend-mode: multiply; filter: contrast(.96); }
#human-utopia::before { background: linear-gradient(0deg, #f5f3ee 0%, rgb(245 243 238 / 96%) 16%, rgb(245 243 238 / 70%) 38%, transparent 72%); }
#human-utopia .utopia-foreground { max-width: 1440px; }
#human-utopia .eyebrow { margin-bottom: 23px; color: #6e6e73; }
#human-utopia .human-title { max-width: 1300px; margin-inline: auto; font-size: clamp(46px, 5.4vw, 94px); line-height: 1.12; letter-spacing: -.055em; font-weight: 600; color: #1d1d1f; text-shadow: 0 2px 22px rgb(245 243 238 / 50%); }
#human-utopia .utopia-question { justify-content: center; margin-top: 35px; gap: 22px; }
#human-utopia .utopia-question h4 { font-family: inherit; font-size: clamp(27px, 3vw, 46px); line-height: 1.25; font-weight: 500; color: #5f5b54; }
#human-utopia .cpc-emblem { width: 76px; height: 76px; }
body.motion-ready #human-utopia .utopia-from-bottom .reveal:not(.visible) { transform: translateY(70px); }

#ascension > .scene-image { object-position: 62% center; }
#ascension::before { background: linear-gradient(90deg, rgb(0 5 12 / 88%), rgb(0 8 18 / 42%) 58%, transparent), linear-gradient(0deg, rgb(0 5 12 / 83%), transparent 80%); }
#ascension .photo-copy { display: grid; grid-template-columns: minmax(0, 1fr) 180px; column-gap: 55px; align-items: end; max-width: 1400px; }
#ascension .eyebrow { grid-column: 1 / -1; }
#ascension .section-title { grid-column: 1; font-size: clamp(47px, 5.1vw, 92px); }
#ascension .ascension-perk { grid-column: 2; grid-row: 2 / 4; flex-direction: column; text-align: center; justify-content: center; gap: 18px; margin: 0; }
#ascension .ascension-perk img { width: 144px; height: 166px; object-fit: contain; filter: drop-shadow(0 0 30px rgb(0 166 255 / 28%)); }
#ascension .ascension-perk figcaption { color: #b6c9dc; font-size: 13px; line-height: 1.6; }
#ascension .photo-caption { grid-column: 1; font-family: inherit; margin-top: 28px; color: #a1b7cb; font-size: 17px; letter-spacing: .02em; }

/* A large browser surface gives Arena its own visual rhythm. */
#arena { background: #fff; color: #1d1d1f; text-align: center; }
#arena .eyebrow { color: #86868b; margin-bottom: 16px; }
#arena .section-title { font-size: clamp(68px, 7.2vw, 126px); line-height: 1.05; letter-spacing: -.07em; }
#arena .support-copy { margin-top: 19px; color: #6e6e73; font-size: clamp(23px, 2vw, 32px); }
#arena .browser-shot { max-width: 1450px; margin-top: 44px; }
#arena .browser-shot > a { display: block; overflow: hidden; border-radius: 18px; box-shadow: 0 25px 65px rgb(0 0 0 / 12%); border: 1px solid #e8e8ed; }
#arena .browser-shot img { display: block; width: 100%; height: auto; max-height: 64vh; object-fit: cover; object-position: center top; border-radius: 0; box-shadow: none; }
#arena .browser-shot figcaption { margin-top: 22px; font-size: 12px; color: #86868b; }
#arena .browser-shot figcaption a { color: #86868b; }

/* The interactive cloud is the hero. No CSS transforms touch its moving items. */
#naming { min-height: 100svh; padding-inline: 5.2%; background: #f5f5f7; color: #1d1d1f; }
#naming > .eyebrow { color: #86868b; max-width: 1440px; margin-bottom: 30px; }
#naming .naming-composition { grid-template-columns: minmax(390px, .95fr) minmax(0, 1.5fr); gap: 25px; align-items: center; margin-top: 0; max-width: 1440px; }
#naming .naming-message .section-title { font-family: inherit; font-size: clamp(43px, 3.7vw, 66px); line-height: 1.13; font-weight: 650; letter-spacing: -.055em; color: #1d1d1f; white-space: nowrap; }
#naming .naming-message .aside-text { color: #1689fa; font-size: 19px; margin-top: 16px; }
#naming .naming-message .support-copy { font-family: inherit; color: #86868b; font-size: clamp(23px, 2.15vw, 35px); font-weight: 500; line-height: 1.42; letter-spacing: -.035em; margin-top: 35px; }
#naming .naming-message .inline-note { display: inline-block; font-family: inherit; color: #594a12; font-size: 21px; line-height: 1.5; font-weight: 500; margin-top: 24px; padding: 7px 15px; border-radius: 10px; background: #ffe891; }
#naming .watch-cloud { height: clamp(490px, 72vh, 850px); min-height: 490px; max-width: none; margin: 0; }

#naming .watch-item,
#west .watch-item,
#china .watch-item {
  padding: 4px;
  border: 1px solid rgb(0 0 0 / 4%);
  background: #fff;
  box-shadow: 0 10px 22px rgb(0 0 0 / 9%), 0 1px 3px rgb(0 0 0 / 5%);
}

#naming .watch-item > img,
#west .watch-item > img,
#china .watch-item > img { background: #fff; }

#naming .watch-label,
#west .watch-label,
#china .watch-label { color: #1d1d1f; background: rgb(255 255 255 / 97%); border-color: rgb(0 0 0 / 5%); font-family: inherit; box-shadow: 0 8px 25px rgb(0 0 0 / 14%); }

/* Diagram and brands share one clean, spacious research page. */
#label-models { padding-top: 110px; padding-bottom: 90px; background: #fff; color: #1d1d1f; }
#label-models > .eyebrow { color: #86868b; }
#label-models > .section-title { font-size: clamp(48px, 5.3vw, 92px); letter-spacing: -.06em; line-height: 1.1; }
#label-models .model-reference-layout { grid-template-columns: minmax(0, 1fr) 180px; gap: clamp(35px, 5vw, 90px); margin-top: 62px; max-width: 1440px; }
#label-models .diffusion-paper-figure img { width: 100%; height: auto; max-height: 57vh; object-fit: contain; border-radius: 0; }
#label-models .diffusion-paper-figure figcaption { margin-top: 27px; font-family: inherit; font-size: 13px; line-height: 1.65; color: #86868b; text-align: left; }
#label-models .diffusion-paper-figure figcaption a { color: inherit; }
#label-models .label-model-marks { gap: 40px; }
#label-models .label-model-mark > a { width: 174px; height: 174px; padding: 35px; background: #f5f5f7; border: 0; box-shadow: none; border-radius: 50%; }
#label-models .label-model-mark img { width: 100%; height: 100%; object-fit: contain; }
#label-models .label-model-mark figcaption { font-family: inherit; font-size: 20px; margin-top: 15px; color: #6e6e73; }

/* White-backed company marks use the same Watch cloud language. */
#west,
#china {
  display: grid;
  grid-template-columns: minmax(280px, .85fr) minmax(0, 1.6fr);
  grid-template-rows: auto 1fr;
  align-content: center;
  align-items: center;
  gap: 0 30px;
  min-height: 100svh;
  padding: 110px 5.2% 90px;
  color: #1d1d1f;
}

#west { background: #f5f5f7; }
#china { background: #fff; }
#west > .eyebrow,
#china > .eyebrow { grid-column: 1 / -1; max-width: 1440px; color: #86868b; margin-bottom: 35px; }
#west > .section-title,
#china > .section-title { grid-column: 1; grid-row: 2; font-size: clamp(42px, 4.1vw, 74px); line-height: 1.15; letter-spacing: -.055em; font-weight: 650; max-width: 7.7em; margin: 0; text-wrap: balance; }
#west .watch-cloud,
#china .watch-cloud { grid-column: 2; grid-row: 2; width: 100%; max-width: none; margin: 0; height: clamp(470px, 69vh, 820px); min-height: 470px; }
#west .watch-item,
#china .watch-item { padding: 8px; background: #fff; }
#west .watch-cloud--logos .watch-item > img,
#china .watch-cloud--logos .watch-item > img { border-radius: 50%; object-fit: contain; padding: 12%; background: #fff; }
#west .watch-cloud--logos .logo-naughtydog img { padding: 2%; }
#west .watch-cloud--logos .logo-konami img { padding: 6%; }
#west .watch-cloud--logos .logo-santamonica img,
#china .watch-cloud--logos .logo-tencent_games img { background: transparent; }

/* Producer portraits feel like a broad photographic spread. */
#japan { background: #fff; color: #1d1d1f; }
#japan > .eyebrow { color: #86868b; }
#japan > .section-title { font-size: clamp(42px, 4.6vw, 80px); line-height: 1.15; letter-spacing: -.055em; max-width: 1440px; }
#japan .producer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 48px; max-width: 1440px; }
#japan .producer-grid figure { border-radius: 22px; position: relative; overflow: hidden; background: #f5f5f7; }
#japan .producer-grid img { display: block; width: 100%; height: clamp(350px, 58vh, 690px); object-fit: cover; object-position: center 22%; border-radius: 0; box-shadow: none; }
#japan .producer-grid figcaption { position: absolute; inset: auto 0 0; margin: 0; padding: 95px 12px 28px; background: linear-gradient(transparent, rgb(0 0 0 / 73%)); color: #f5f5f7; font-family: inherit; font-size: clamp(20px, 1.9vw, 30px); line-height: 1.3; font-weight: 500; text-align: center; letter-spacing: -.035em; }
#japan .producer-grid figcaption a { color: inherit; font: inherit; }

/* Preserve the before/after scroll mask while making the photographs edge-to-edge. */
#japan-jury {
  display: block;
  height: 220svh;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #05070b;
  color: #f5f5f7;
}

#japan-jury .dinner-stage { position: sticky; top: 0; height: 100svh; width: 100%; max-width: none; margin: 0; overflow: hidden; background: #05070b; }
#japan-jury .dinner-stage > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
#japan-jury .dinner-after { clip-path: inset(0 calc(100% - var(--reveal-percent, 0%)) 0 0); }
#japan-jury .dinner-caption { position: absolute; z-index: 3; inset: auto 0 0; max-width: none; padding: 140px 5.2% 56px; background: linear-gradient(transparent, rgb(0 0 0 / 48%) 44%, rgb(0 0 0 / 80%)); }
#japan-jury .dinner-caption h4 { max-width: 1400px; margin: 0 auto; color: #f5f5f7; font-family: inherit; font-size: clamp(32px, 3.7vw, 64px); line-height: 1.15; letter-spacing: -.05em; font-weight: 600; }
#japan-jury .dinner-caption p { max-width: 1400px; margin: 19px auto 0; color: rgb(245 245 247 / 67%); font-size: 13px; line-height: 1.6; }
#japan-jury .dinner-caption a { color: inherit; text-underline-offset: 4px; }

/* Compact laptop views keep the same hierarchy without crowding the artwork. */
@media (max-width: 1300px) and (min-width: 801px) {
  #practice .photo-copy { grid-template-columns: minmax(0, 1fr) 112px; gap: 0 28px; }
  #practice .starrail-app { width: 112px; height: 112px; }
  #practice-ballance .photo-copy { grid-template-columns: minmax(0, 1fr) 185px; gap: 0 25px; }
  #practice-ballance .ballance-logo { width: 185px; }
  #practice-ballance .section-title { font-size: clamp(48px, 5.3vw, 70px); }
  #ascension .photo-copy { grid-template-columns: minmax(0, 1fr) 130px; column-gap: 30px; }
  #ascension .ascension-perk img { width: 110px; height: 130px; }
  #ascension .ascension-perk figcaption { font-size: 11px; }
  #game-ai .paper-layout > div { width: 35%; max-width: 35%; }
  #game-ai #world-model { font-size: 58px; }
  #game-ai .jepa-title { margin-top: 35px; font-size: 44px; }
  #game-ai .paper-name { font-size: 13px; }
  #game-ai .inline-link { font-size: 11px; }
  #natural .natural-words { font-size: 32px; gap: 24px; }
  #ai-human .human-ideas { gap: 16px; }
  #ai-human .human-idea { padding: 23px 18px; }
  #ai-human .human-idea h4 { font-size: 22px; }
  #naming .naming-composition { grid-template-columns: minmax(310px, .9fr) minmax(0, 1.3fr); gap: 12px; }
  #naming .naming-message .section-title { font-size: 44px; }
  #naming .naming-message .support-copy { font-size: 25px; }
  #naming .watch-cloud { min-height: 460px; height: 66vh; }
  #west,
  #china { grid-template-columns: minmax(250px, .85fr) minmax(0, 1.4fr); gap: 0 20px; }
  #west > .section-title,
  #china > .section-title { font-size: 44px; }
  #west .watch-cloud,
  #china .watch-cloud { min-height: 450px; height: 64vh; }
  #label-models .model-reference-layout { grid-template-columns: minmax(0, 1fr) 130px; gap: 36px; }
  #label-models .label-model-mark > a { width: 130px; height: 130px; padding: 27px; }
}

@media (max-height: 820px) and (min-width: 801px) {
  #practice,
  #practice-ballance,
  #ascension { padding-bottom: 56px; }
  #practice-efz .efz-original { margin-top: 28px; width: min(560px, 100%); }
  #practice-efz .efz-original img { width: 560px; max-width: 100%; }
  #game-ai { min-height: 680px; }
  #game-ai > .chapter-label { top: 95px; }
  #game-ai .paper-layout > div { top: 29%; }
  #game-ai .paper-preview { top: 76px; bottom: 26px; height: calc(100% - 102px); }
  #game-ai #world-model { font-size: clamp(46px, 4.3vw, 66px); }
  #game-ai .jepa-title { font-size: 42px; margin-top: 30px; }
  #natural .natural-words { margin-top: 30px; }
  #natural .filmstrip { margin-top: 25px; }
  #natural .filmstrip img { max-height: 225px; }
  #ai-human .human-ideas { margin-top: 30px; }
  #ai-human .human-idea { padding: 22px; }
  #ai-human .human-idea figure { margin-top: 18px; }
  #ai-human .human-idea figure > a { height: 180px; }
  #ai-human .human-last-line { margin-top: 29px; }
  #human-utopia { padding-bottom: 56px; }
  #naming .watch-cloud { height: 490px; }
  #west .watch-cloud,
  #china .watch-cloud { height: 490px; }
  #japan .producer-grid { margin-top: 32px; }
  #japan .producer-grid img { height: 430px; }
}

/* The narrow layout removes side-by-side pressure, never source text. */
@media (max-width: 800px) {
  #practice,
  #practice-ballance,
  #ascension { padding: 100px 28px 62px; }
  #practice .photo-copy { grid-template-columns: minmax(0, 1fr) 88px; column-gap: 20px; }
  #practice .section-title { font-size: clamp(46px, 9vw, 72px); }
  #practice .starrail-app { width: 88px; height: 88px; }
  #practice .photo-subtitle { font-size: 23px; margin-top: 17px; }
  #practice-ballance .photo-copy { grid-template-columns: 1fr; }
  #practice-ballance .section-title { font-size: clamp(44px, 8.8vw, 70px); }
  #practice-ballance .ballance-logo { grid-column: 1; grid-row: auto; width: 170px; max-height: 90px; margin-top: 28px; }
  #practice-ballance .report-link { font-size: 15px; margin-top: 24px; }
  #practice-efz .section-title { font-size: 48px; }
  #practice-efz .efz-original { width: min(640px, 100%); margin-top: 35px; }
  #practice-efz .efz-original img { width: 640px; max-width: 100%; }
  #game-ai { height: auto; min-height: 100svh; padding: 100px 27px 50px; }
  #game-ai > .chapter-label { position: static; max-width: none; width: 100%; margin-bottom: 35px; }
  #game-ai .paper-layout { position: static; height: auto; }
  #game-ai .paper-layout > div { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; width: 100%; max-width: none; }
  #game-ai #world-model { grid-column: 1; grid-row: 1; font-size: clamp(36px, 7.5vw, 52px); }
  #game-ai .world-chinese { grid-column: 1; grid-row: 2; font-size: 18px; margin: 0; }
  #game-ai .jepa-title { grid-column: 2; grid-row: 1; font-size: 36px; margin: 0; }
  #game-ai .jepa-title small { display: block; font-size: 14px; margin-top: 10px; }
  #game-ai .paper-name { grid-column: 2; grid-row: 2 / 4; font-size: 11px; line-height: 1.6; }
  #game-ai .inline-link { grid-column: 1 / -1; margin-top: 8px; font-size: 11px; }
  #game-ai .paper-preview { position: relative; inset: auto; width: 100%; height: auto; margin-top: 34px; }
  #game-ai .paper-preview a { height: auto; }
  #game-ai .paper-preview img { height: auto; width: 100%; max-height: none; }
  #natural > .section-title { font-size: 43px; }
  #natural .natural-words { grid-template-columns: 1fr 1fr; gap: 15px 25px; font-size: 30px; margin-top: 30px; }
  #natural .natural-words strong:last-child { grid-column: 1 / -1; }
  #natural .filmstrip { margin-top: 28px; }
  #natural .filmstrip img { max-height: none; height: auto; }
  #natural .natural-bottom { gap: 25px; }
  #natural .natural-bottom p { font-size: 21px; }
  #natural .natural-bottom small { font-size: 11px; }
  #natural .inline-text { font-size: 18px; }
  #ai-human .energy-equation { font-size: clamp(34px, 7.5vw, 54px); }
  #ai-human .human-ideas { grid-template-columns: 1fr; gap: 22px; margin-top: 32px; }
  #ai-human .human-idea { padding: 27px; }
  #ai-human .human-idea h4 { min-height: 0; font-size: 26px; }
  #ai-human .human-idea figure > a { height: 245px; }
  #ai-human .human-last-line { font-size: 25px; margin-top: 35px; }
  #human-utopia { padding: 100px 28px 60px; }
  #human-utopia .utopia-backdrop img { width: 50%; min-height: 100svh; object-position: center top; opacity: .72; }
  #human-utopia::before { background: linear-gradient(0deg, #f5f3ee, rgb(245 243 238 / 88%) 34%, transparent 85%); }
  #human-utopia .human-title { font-size: clamp(35px, 7.7vw, 58px); line-height: 1.17; }
  #human-utopia .utopia-question { margin-top: 28px; gap: 15px; }
  #human-utopia .utopia-question h4 { font-size: 26px; }
  #human-utopia .cpc-emblem { width: 58px; height: 58px; }
  #ascension .photo-copy { grid-template-columns: 1fr; }
  #ascension .section-title { font-size: clamp(38px, 7.5vw, 58px); }
  #ascension .ascension-perk { grid-column: 1; grid-row: auto; flex-direction: row; text-align: left; justify-content: flex-start; gap: 18px; margin-top: 28px; }
  #ascension .ascension-perk img { width: 85px; height: 100px; }
  #ascension .ascension-perk figcaption { font-size: 13px; }
  #ascension .photo-caption { margin-top: 20px; font-size: 14px; }
  #arena .section-title { font-size: 78px; }
  #arena .support-copy { font-size: 22px; }
  #arena .browser-shot { margin-top: 34px; }
  #arena .browser-shot > a { border-radius: 12px; }
  #arena .browser-shot img { max-height: none; height: auto; }
  #naming { padding-inline: 27px; }
  #naming .naming-composition { grid-template-columns: 1fr; gap: 10px; }
  #naming .naming-message .section-title { font-size: clamp(39px, 7.7vw, 58px); white-space: normal; }
  #naming .naming-message .section-title br { display: initial; }
  #naming .naming-message .support-copy { font-size: 24px; margin-top: 25px; }
  #naming .naming-message .support-copy br { display: none; }
  #naming .naming-message .inline-note { font-size: 18px; margin-top: 18px; }
  #naming .watch-cloud { height: clamp(430px, 64vh, 650px); min-height: 430px; margin-top: 5px; }
  #label-models { padding-top: 100px; padding-bottom: 65px; }
  #label-models > .section-title { font-size: clamp(40px, 7.9vw, 60px); }
  #label-models .model-reference-layout { grid-template-columns: 1fr; gap: 35px; margin-top: 36px; }
  #label-models .diffusion-paper-figure img { max-height: none; }
  #label-models .diffusion-paper-figure figcaption { font-size: 11px; margin-top: 18px; }
  #label-models .label-model-marks { display: flex; justify-content: center; gap: 48px; }
  #label-models .label-model-mark > a { width: 125px; height: 125px; padding: 26px; }
  #label-models .label-model-mark figcaption { font-size: 17px; }
  #west,
  #china { display: flex; flex-direction: column; align-items: stretch; padding: 100px 27px 65px; }
  #west > .eyebrow,
  #china > .eyebrow { margin-bottom: 24px; }
  #west > .section-title,
  #china > .section-title { max-width: none; width: 100%; font-size: clamp(37px, 7.6vw, 56px); line-height: 1.17; margin: 0; }
  #west .watch-cloud,
  #china .watch-cloud { min-height: 420px; height: 60vh; margin-top: 20px; }
  #west .watch-item,
  #china .watch-item { padding: 5px; }
  #japan > .section-title { font-size: clamp(37px, 7.6vw, 56px); }
  #japan .producer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 33px; }
  #japan .producer-grid figure { border-radius: 16px; }
  #japan .producer-grid img { height: clamp(270px, 43vh, 420px); }
  #japan .producer-grid figcaption { padding: 70px 8px 20px; font-size: 20px; }
  #japan-jury .dinner-stage > img { object-fit: contain; }
  #japan-jury .dinner-caption { padding: 100px 27px 45px; }
  #japan-jury .dinner-caption h4 { font-size: clamp(29px, 6.3vw, 42px); }
  #japan-jury .dinner-caption p { font-size: 11px; line-height: 1.7; }
}

/* The scroll position, not an animation timer, drives these four slow moves.
   Overscan stays below 6%; captions and reading gradients never move. */
#practice,
#practice-ballance,
#ascension,
#human-utopia {
  --editorial-scale: calc(1.02 + var(--scene-progress, .5) * .04);
  --editorial-shift: calc((.5 - var(--scene-progress, .5)) * 2%);
}

#practice > .scene-image,
#practice-ballance > .scene-image,
#ascension > .scene-image,
#human-utopia .utopia-backdrop {
  translate: none;
  transform: translate3d(0, var(--editorial-shift), 0) scale(var(--editorial-scale));
  transform-origin: center 45%;
  opacity: calc(1 - var(--scene-exit, 0) * .08);
  transition: none;
  will-change: transform;
}

#practice::before,
#practice-ballance::before,
#ascension::before,
#human-utopia::before {
  opacity: calc(.96 + var(--scene-enter, 1) * .04);
  transition: none;
  pointer-events: none;
}

body.motion-off #practice > .scene-image,
body.motion-off #practice-ballance > .scene-image,
body.motion-off #ascension > .scene-image,
body.motion-off #human-utopia .utopia-backdrop {
  transform: none;
  opacity: 1;
  will-change: auto;
}

body.motion-off #practice::before,
body.motion-off #practice-ballance::before,
body.motion-off #ascension::before,
body.motion-off #human-utopia::before { opacity: 1; }

body.motion-off #game-ai .paper-preview,
body.motion-off #game-ai .paper-preview:not(.visible),
body.motion-off #human-utopia .utopia-from-bottom .reveal:not(.visible) {
  transform: none !important;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  #practice > .scene-image,
  #practice-ballance > .scene-image,
  #ascension > .scene-image,
  #human-utopia .utopia-backdrop {
    transform: none;
    opacity: 1;
    will-change: auto;
  }
  #practice::before,
  #practice-ballance::before,
  #ascension::before,
  #human-utopia::before { opacity: 1; }
  body.motion-ready #game-ai .paper-preview:not(.visible),
  body.motion-ready #human-utopia .utopia-from-bottom .reveal:not(.visible) { transform: none !important; }
}

@media print {
  #practice > .scene-image,
  #practice-ballance > .scene-image,
  #ascension > .scene-image,
  #human-utopia .utopia-backdrop { transform: none; opacity: 1; }
  #game-ai { height: 190mm; min-height: 0; }
  #game-ai .paper-preview { top: 12mm; bottom: 10mm; height: 168mm; }
  #game-ai .paper-layout > div { top: 45mm; }
  #japan-jury { height: 190mm; min-height: 0; }
  #japan-jury .dinner-stage { position: relative; height: 190mm; }
  #japan-jury .dinner-after { clip-path: inset(0 0 0 50%); }
}