/* Full-bleed chapters are the default, including when motion is reduced. */
.silk-study { display: grid; place-items: center; overflow: visible; }
.silk-study .silk { width: 94%; mix-blend-mode: multiply; }
.exhibition {
  --rail: clamp(22px, 6.1vw, 112px);
  position: relative;
  background: #131b20;
  color: #fffbef;
  scroll-margin-top: -24px;
}
.theatre { position: relative; isolation: isolate; }
.act {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(560px, 82svh); color: #fff9ed; background: #111a20;
}
.world, .world img, .act-light { position: absolute; height: 100%; width: 100%; }
.world { inset: 0; z-index: -3; overflow: hidden; }
.world img { inset: 0; object-fit: cover; object-position: 53% 50%;  }
.act-light { inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg,#090d13db 1%,#0a0e16a5 31%,#0b111722 62%,transparent),linear-gradient(0deg,#060a0ed1,transparent 25%); }
.act-story { color: #251d17; background: #dfc9a7; }
.act-story .act-light { background: linear-gradient(90deg,#f4e4cbdc 1%,#f3e1c5bc 32%,#efdfc647 50%,transparent 70%),linear-gradient(0deg,#17140af0,transparent 22%); }
.act-shift .act-light { background: linear-gradient(90deg,#071914d9 1%,#0719149e 32%,transparent 64%),linear-gradient(0deg,#03110eca,transparent 28%); }
.act-copy {
  position: absolute; z-index: 2; left: var(--rail); top: 48%;
  width: min(44%, 670px); transform: translateY(-50%);
}
.act-signature { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(20px, 3.6vh, 42px); }
.act-signature img { width: 36px; height: 36px; border-radius: 22%; }
.act-signature b { font: 650 clamp(17px,1.6vw,26px)/1.2 Manrope,sans-serif; letter-spacing: -.05em; }
.act-signature span { font: 11px/1 var(--mono); letter-spacing: .13em; opacity: .84; }
.act h2 { max-width: 100%; font: 400 clamp(60px,7.2vw,128px)/.88 var(--serif); letter-spacing: -.045em; text-wrap: balance; }
.act h2 span, .act h2 em { display: block; }
.act h2 em { margin-top: .085em; font-weight: 400; }
.act-story h2 em { color: #802f24; }
.act-description { max-width: 33em; margin: clamp(18px,3vh,34px) 0 20px; font-size: clamp(14px,1.18vw,19px); line-height: 1.6; text-wrap: pretty; }
.act-open, .watch-film {
  display: inline-flex; align-items: center; justify-content: center; gap: 17px; padding: 12px 17px;
  border: 1px solid #fffae978; border-radius: 30px; color: #fffaed; background: #142020b3;
  font-weight: 650; font-size: 13px; line-height: 1.3; min-height: 43px;
}
.act-open:hover, .watch-film:hover { color: #171b1b; background: #fff8e9; }
.act-story .act-open { color: #fff8e9; border-color: #46372b; background: #302a22; }
.act-open:focus-visible, .screen-object:focus-visible, .film-nav a:focus-visible { outline: 3px solid #efd0a9; outline-offset: 3px; }
.object-track {
  position: absolute; right: clamp(35px,10vw,195px); top: 47%;
  width: min(23vw,32svh,380px); aspect-ratio: 627 / 1280;
  transform: translateY(-50%);
}
.act-story .object-track { transform: translateY(-50%); }
.screen-object {
  display: block; position: relative; width: 100%; height: 100%; padding: 0; overflow: hidden;
  border-radius: clamp(14px,2.1vw,34px); border: 3px solid #1e211f; background: #171c1a;
  box-shadow: 0 0 0 1px #e5dbc887, 0 24px 66px #03080963;
}
.actual-screen, .game-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-film { opacity: 0; background: #122021; pointer-events: none; }
.game-film.ready { opacity: 1; }
.film-nav {
  position: absolute; z-index: 5; inset: auto var(--rail) max(18px,env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(12px,2vw,34px);
}
.film-nav a {
  display: flex; align-items: baseline; gap: 8px; position: relative; min-width: 0;
  padding: 13px 0 7px; text-decoration: none; color: #fffaeb;
  font: 600 clamp(12px,1vw,16px)/1.25 Manrope,sans-serif;
}
.film-nav a i { position: absolute; height: 2px; margin: 0; top: 1px; inset-inline: 0; background: #cfc5b66e; }
.film-nav a i::after { content: ""; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--read,0)); background: #fff4df; }
.film-nav a small { font: 10px/1.2 var(--mono); color: #efdfcb; }
.film-nav a[aria-current] span { text-decoration: underline; text-underline-offset: 5px; }
.exhibition.is-pinned { height: 400vh; height: 400svh; }
.is-pinned .theatre { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.is-pinned .act { position: absolute; inset: 0; min-height: 0; }
.is-pinned .act[aria-hidden=true] { pointer-events: none; }
.is-pinned .act.is-away { visibility: hidden; }
.invite-section { padding-top: clamp(30px,5vw,80px); }
.watch-film { background: #ebead8; border-color: #d2d3bd; color: #183027; }
#game-watch { width: 100%; text-align: center; }
#full-game { display: block; margin: auto; width: auto; max-width: 100%; max-height: min(64svh,560px); border-radius: 10px; }
html:lang(zh-Hans) .act h2 { font: 500 clamp(48px,5.5vw,94px)/1.12 "Songti SC","STSong",serif; letter-spacing: -.05em; }
html:lang(zh-Hans) .act h2 em { font-style: normal; }
@media (min-width:1800px) { .object-track { right: 15vw; } .act-copy { left: 10vw; } }
@media (max-width:700px) {
  .exhibition { --rail: 21px; }
  .act { min-height: max(675px,92svh); }
  .world img { object-position: 58% 50%; }
  .act-light,.act-shift .act-light { background: linear-gradient(0deg,#071111f2 1%,#081017db 26%,#090f1570 48%,transparent 76%); }
  .act-story .act-light { background: linear-gradient(0deg,#201a13f5,#f0dfc7 10%,#f5e5ceef 28%,#ecdcc66b 49%,transparent 73%); }
  .act-story .film-nav { color:#fff; }
  .act-copy { top: auto; left: var(--rail); bottom: 67px; width: calc(100% - 2 * var(--rail)); transform: none; }
  .act-signature { margin-bottom: 9px; gap: 8px; }
  .act-signature img { width: 26px; height: 26px; }
  .act-signature b { font-size: 17px; }
  .act h2 { font-size: clamp(42px,10.8vw,65px); line-height: .99; text-wrap: pretty; }
  .act h2 span, .act h2 em { display: inline; }
  html:lang(zh-Hans) .act h2 { font-size: clamp(34px,9.2vw,52px); }
  .act-description { font-size: 14px; line-height: 1.5; margin: 10px 0 13px; max-width: 32em; }
  .act-open { padding: 9px 13px; min-height: 38px; }
  .object-track { top: 4%; right: 13vw; width: min(38vw,21svh); transform: none; }
  .act-story .object-track { transform: none; }
  .film-nav { gap: 10px; bottom: max(9px,env(safe-area-inset-bottom)); }
  .film-nav a { font-size: 12px; gap: 4px; padding: 10px 0; }
  .film-nav a small { font-size: 8px; }
  .screen-object { border-radius: 16px; border-width: 2px; }
}
@media (max-height:640px) and (max-width:700px) { .object-track { width: min(29vw,18svh); right: 11%; } .act-copy { bottom: 58px; } }
@media (max-height:570px) and (min-width:701px) { .act { min-height: 520px; } }
@media (prefers-reduced-motion:reduce) {
  .act { min-height: max(575px,77svh); }
  .act-copy { top: 50%; }
  .act-shift .actual-screen { transform: none; }
}
@media (max-width:700px) and (prefers-reduced-motion:reduce) { .act { min-height: 650px; } .act-copy { top: auto; bottom: 28px; } }
.film-nav::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -26px calc(-1 * var(--rail)) calc(-1 * max(18px,env(safe-area-inset-bottom)));
  background: linear-gradient(0deg,#0b1113e8,#0b1113a6 54%,transparent);
}
.turn-edge { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
@media (max-width:700px) and (min-height:670px) { .object-track { width: min(45vw,23svh); } }

/* A stationary, brushed metal housing. Only the pixels inside its glass change. */
.object-track { width: min(26vw,35svh,380px); aspect-ratio: 1 / 2; isolation: isolate; }
.screen-object {
  overflow: visible; border: 1px solid #a6a7a5; border-radius: 13% / 6.5%;
  background: linear-gradient(105deg,#b9bdc0 0%,#474b50 2%,#25282b 4%,#606165 44%,#383b40 85%,#c3c3c1 98%,#565b60);
  box-shadow: inset 1px 1px 1px #eff2efba, inset -2px -1px 2px #17191c, 3px 2px 0 #44484a, 4px 3px 0 #18191a, 0 20px 42px #080b0d70;
}
.device-display {
  position: absolute; inset: 1.7% 2.5% 1.31%; overflow: hidden; isolation: isolate;
  display: block; container-type: inline-size; border-radius: 10.8% / 5.35%;
  background: #0b1011; box-shadow: 0 0 0 2px #101214,0 0 0 3px #66686a;
}
.earpiece { position: absolute; width: 13%; height: .45%; border-radius: 3px; top: .49%; left: 43.5%; background: #111415; box-shadow: inset 0 1px 1px #000,0 1px 0 #a5aaab65; }
.earpiece::after { content: ''; position: absolute; left: 117%; top: -15%; height: 130%; aspect-ratio: 1; border-radius: 100%; background: radial-gradient(circle at 34% 33%,#829eb3,#17222a 53%,#12151a); }
.object-track::before,.object-track::after { content: ''; position: absolute; z-index: -1; border-radius: 2px; background: linear-gradient(90deg,#67686a,#c3c5c5 55%,#5d6065); }
.object-track::before { left: -2px; width: 3px; height: 7%; top: 22%; box-shadow: 0 2.8em #717378; }
.object-track::after { right: -5px; width: 4px; height: 10%; top: 30%; }
.device-display .actual-screen,.device-display .game-film,.import-screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.writing-field {
  position: absolute; display: block; left: 5.15%; right: 4.6%; top: 37.85%; height: 8.65%;
  padding: 1.15% 1.65% 0; background: #2f2f2f; color: #efefed; text-align: left;
  font: 400 4.05cqw/1.36 system-ui,"PingFang SC",sans-serif; letter-spacing: -.025em;
}
.text-cursor { display: inline-block; width: .4cqw; height: 1.12em; margin-left: .08em; vertical-align: -.18em; background: #5985fe; }
.sequence-steps { display: flex; width: fit-content; flex-wrap: wrap; gap: 4px; margin: -3px 0 17px; }
.sequence-steps button { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid #72645185; border-radius: 4px; background: #f4e7d3d9; color: #423528; font-size: 11px; line-height: 1.2; cursor: pointer; }
.sequence-steps i { font: 9px var(--mono); }
.sequence-steps [aria-pressed=true] { background: #4d342d; color: #fff6e5; border-color: #4d342d; }
@media (max-width:700px) {
  .object-track { width: min(45vw,22.5svh); }
  .sequence-steps { gap: 3px; margin: -2px 0 9px; }
  .sequence-steps button { font-size: 10px; padding: 5px; }
}
@media (max-height:670px) and (max-width:700px) { .object-track { width: min(34vw,18svh); } }

.gesture-mark { position:absolute; pointer-events:none; width:11%; aspect-ratio:1; border:1.5px solid #fff6e8; border-radius:50%; background:#b6594e45; box-shadow:0 0 0 1px #803c3090; }