:root {
  --ink:#493728;
  --brown:#845139;
  --paper:#f7e8d1;
  --serif:'Songti SC','STSong','SimSun',serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:0;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:15px/1.9 'PingFang SC','Microsoft YaHei',sans-serif;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  font-family:var(--serif);
  font-weight:400;
}
button,a {
  color:inherit;
}
button {
  font:inherit;
  cursor:pointer;
}
a {
  text-decoration:none;
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible {
  outline:2px dashed #72452e;
  outline-offset:5px;
}
header {
  height:78px;
  position:fixed;
  inset:0 0 auto;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  background:linear-gradient(#f6e3c8ed,#f6e3c8b0,transparent);
}
.brand {
  font:24px var(--serif);
  letter-spacing:4px;
}
.brand span {
  display:block;
  font:9px/2 sans-serif;
  letter-spacing:2px;
  margin-top:4px;
}
nav {
  display:flex;
  gap:44px;
}
nav a {
  font-size:13px;
  letter-spacing:3px;
  padding:9px 0;
  border-bottom:1px solid transparent;
}
nav a[aria-current] {
  border-color:var(--brown);
}
#motion {
  border:0;
  background:none;
  font-size:11px;
  letter-spacing:1px;
}
.skip {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:60;
  background:var(--paper);
  padding:10px;
}
.skip:focus {
  top:12px;
}
.scene {
  position:relative;
  height:100vh;
  min-height:760px;
  overflow:hidden;
  isolation:isolate;
  background:#e9c5a0;
}
.world {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  z-index:-2;
}
.mother {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.wash {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,#fce6c4a8 0,#fce6c435 31%,transparent 44%);
}
.chapter-copy {
  position:absolute;
  top:23%;
  left:6.5%;
  width:29%;
  transition:opacity .35s;
}
.eyebrow {
  font-size:10px;
  letter-spacing:3px;
  margin-bottom:26px;
}
.chapter-copy h1 {
  font-size:clamp(66px,5.3vw,100px);
  line-height:1.35;
  letter-spacing:5px;
}
.chapter-copy h2 {
  font-size:clamp(40px,3.6vw,67px);
  line-height:1.5;
  letter-spacing:2px;
}
.chapter-copy>p:last-child {
  font-size:13px;
  line-height:2.2;
  margin-top:26px;
  max-width:330px;
}
.scene.pinned .chapter-copy {
  opacity:0;
  pointer-events:none;
}
.scene-foot {
  position:absolute;
  bottom:25px;
  left:6.5%;
  right:5%;
  display:flex;
  justify-content:space-between;
  align-items:end;
  font-size:10px;
  letter-spacing:1px;
}
.scene-foot .hint {
  font-size:11px;
  line-height:2.2;
}
.scene-foot a {
  border-bottom:1px solid #785b4150;
}
.scene-foot small {
  font-size:9px;
}
.zone {
  position:absolute;
  border:0;
  padding:0;
  background:transparent;
  border-radius:40%;
  z-index:3;
  cursor:pointer;
  color:var(--ink);
}
.zone:focus-visible {
  outline:2px dashed #765035a0;
  outline-offset:5px;
}
.zone-tip {
  position:absolute;
  z-index:4;
  visibility:hidden;
  max-width:250px;
  min-width:160px;
  padding:16px 24px;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%,calc(-100% + 7px));
  transition:opacity .4s,transform .6s;
  font-size:12px;
  line-height:1.7;
  text-align:center;
  isolation:isolate;
}
.zone-tip:before {
  content:'';
  position:absolute;
  inset:-14px -23px;
  background:radial-gradient(ellipse,#fff0d950 25%,#ffedd330 52%,transparent 73%);
  z-index:-1;
}
.zone-tip strong {
  display:block;
  font:22px/1.6 var(--serif);
  letter-spacing:2px;
}
.zone-tip small {
  display:block;
  font-size:10px;
  margin-top:6px;
  color:#76513a;
}
.zone-tip.visible {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-100%);
}
.local-light {
  position:absolute;
  z-index:1;
  opacity:0;
  pointer-events:none;
  transition:opacity .75s;
  background:radial-gradient(ellipse,#ffdf9366, #ffc46c30 38%,transparent 70%);
  mix-blend-mode:screen;
}
.local-light.active {
  opacity:.85;
  animation:lamplight 5s ease-in-out infinite alternate;
}
.local-light.invite {
  animation:invitation 2.5s ease-out 1;
}
.local-light.steam:after,.local-light.steam:before {
  content:'';
  position:absolute;
  width:17%;
  height:50%;
  left:43%;
  top:5%;
  opacity:.0;
  background:radial-gradient(ellipse,#fff6df8c,transparent 65%);
  filter:blur(4px);
  animation:vapor 8s infinite;
  animation-play-state:paused;
}
.local-light.steam:after {
  left:57%;
  animation-delay:-4s;
}
.local-light.steam.active:after,.local-light.steam.active:before {
  animation-play-state:running;
}
.local-light.sea.active {
  animation:waterlight 12s ease-in-out infinite alternate;
}
.paint-note {
  position:absolute;
  left:5.5%;
  top:18%;
  width:31%;
  max-width:520px;
  padding:24px 20px 30px;
  z-index:7;
  isolation:isolate;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .4s,transform .5s,visibility .4s;
}
.paint-note:before {
  content:'';
  position:absolute;
  inset:-40px -40px;
  background:radial-gradient(ellipse,#fae8cfad 30%,#fae7ce85 52%,#f8e4cb40 62%,transparent 74%);
  z-index:-1;
  pointer-events:none;
}
.paint-note.open {
  opacity:1;
  visibility:visible;
  transform:none;
}
.paint-note .eyebrow {
  margin-bottom:14px;
}
.paint-note h3 {
  font-size:clamp(27px,2.2vw,41px);
  line-height:1.55;
  margin:0 0 20px;
}
.paint-note p {
  font-size:13px;
  line-height:2;
  max-width:360px;
}
.paint-note ul {
  list-style:none;
  padding:0;
  margin:17px 0;
}
.paint-note li {
  font-size:12px;
  padding:6px 0;
}
.paint-note li:before {
  content:'·';
  margin-right:10px;
}
.paint-note .note {
  font-size:11px;
  color:#795b44;
  margin-top:20px;
  line-height:1.9;
}
.close-note {
  font-size:11px;
  background:none;
  border:0;
  border-bottom:1px solid #77543960;
  padding:6px 0;
  margin-top:23px;
}
.paint-note a {
  font-size:11px;
  display:block;
  margin-top:15px;
  text-decoration:underline;
  text-underline-offset:5px;
}
.image-failed .world {
  opacity:.15;
}
.image-failed:after {
  content:'场景图片暂不可用 · 可在下方阅读完整方案';
  position:absolute;
  bottom:80px;
  left:6%;
  font-size:13px;
}
.image-failed .zone {
  outline:1px dashed #785b4180;
  background:#ffeac344;
}
.image-failed .zone:after {
  content:attr(aria-label);
  font-size:13px;
}
.reading {
  scroll-margin-top:78px;
  padding:105px 12% 85px;
  position:relative;
  background:linear-gradient(#f1d6b5,#f8eddd 170px,#f4e5d0);
  box-shadow:0 -20px 35px #f1d6b5;
  z-index:2;
}
.reading-heading h2 {
  font-size:43px;
  letter-spacing:2px;
}
.reading-heading>p:last-child {
  font-size:13px;
  margin-top:20px;
  color:#715b49;
}
.north-star {
  margin:55px 0;
  padding:25px 0;
  border-block:1px solid #876b4733;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:10px 30px;
}
.north-star>p:first-child {
  font-size:11px;
  grid-column:1/-1;
  letter-spacing:2px;
}
.north-star h3 {
  font-size:30px;
}
.north-star>p:last-child {
  font-size:12px;
}
.timeline {
  margin-top:65px;
}
#phase-tabs {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:16px;
}
#phase-tabs button {
  border:0;
  border-top:1px solid #9a765640;
  background:none;
  text-align:left;
  padding:17px 0;
  font-size:13px;
}
#phase-tabs small {
  display:block;
  font-size:9px;
  letter-spacing:1px;
  margin-bottom:8px;
}
#phase-tabs button[aria-selected=true] {
  color:#a45534;
  border-top:2px solid #a45534;
}
#phase-panel {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:45px;
  padding:20px 0 35px;
  min-height:185px;
}
#phase-panel h4 {
  font:24px var(--serif);
  margin:0 0 15px;
}
#phase-panel li,#phase-panel p {
  font-size:12px;
}
#phase-panel ul {
  padding-left:16px;
  margin:0;
}
#phase-panel span {
  font-size:10px;
  letter-spacing:2px;
  display:block;
  margin-bottom:16px;
}
.preflight {
  display:grid;
  grid-template-columns:1fr 1.7fr;
  gap:65px;
  border-top:1px solid #876b4733;
  padding-top:45px;
  margin-top:20px;
}
.preflight h3 {
  font-size:31px;
  line-height:1.6;
}
.preflight p:not(.eyebrow) {
  font-size:12px;
  margin-top:20px;
}
#checklist label {
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:13px 0;
  font-size:12px;
  border-bottom:1px solid #876b4726;
  cursor:pointer;
}
#checklist input {
  accent-color:#9a6544;
  width:16px;
  height:16px;
  margin-top:5px;
  flex-shrink:0;
}
#ready-status {
  color:#8f4d31;
}
.goals {
  display:flex;
  flex-wrap:wrap;
  gap:80px;
  margin:55px 0 70px;
}
.goals>div {
  display:flex;
  gap:23px;
  align-items:center;
}
.goals strong {
  font:64px Georgia;
  color:#a26742;
}
.goals strong span {
  font-size:24px;
}
.goals p {
  font-size:11px;
}
.goals>p {
  flex-basis:100%;
  margin-top:-50px;
  color:#7d6652;
}
#reference h3 {
  font-size:28px;
}
#reference>p {
  font-size:12px;
  color:#7d6652;
  margin:10px 0 20px;
}
details {
  border-bottom:1px solid #876b4730;
  font-size:13px;
}
summary {
  cursor:pointer;
  list-style:none;
  padding:18px 0;
  font-family:var(--serif);
  font-size:19px;
}
summary:after {
  content:'＋';
  float:right;
  font:14px sans-serif;
}
details[open]>summary:after {
  content:'−';
}
details article {
  max-width:760px;
  padding:0 0 25px;
}
details h4 {
  font:21px var(--serif);
  margin:18px 0 10px;
}
details p,details li {
  font-size:13px;
  line-height:2;
}
details ul {
  padding-left:20px;
}
footer {
  padding:25px 8% 35px;
  background:#f4e5d0;
  text-align:center;
}
footer>p {
  font:32px var(--serif);
  letter-spacing:3px;
  margin-bottom:40px;
}
footer>div {
  display:flex;
  justify-content:space-between;
  font-size:10px;
}
footer small {
  display:block;
  font-size:9px;
  margin-top:16px;
  color:#816a54;
}
.offscreen .local-light,.paused .local-light,.paused .local-light:before,.paused .local-light:after,.offscreen .local-light:before,.offscreen .local-light:after {
  animation-play-state:paused!important;
}
.paused {
  scroll-behavior:auto;
}
.paused * {
  transition:none!important;
}
.is-scrolling .zone-tip {
  opacity:0!important;
}
@keyframes lamplight {
  from {
    opacity:.6;
  }
  to {
    opacity:.9;
  }
}
@keyframes invitation {
  0%,100% {
    opacity:0;
  }
  45% {
    opacity:.9;
  }
}
@keyframes vapor {
  0% {
    transform:translateY(15px);
    opacity:0;
  }
  40% {
    opacity:.25;
  }
  100% {
    transform:translateY(-15px);
    opacity:0;
  }
}
@keyframes waterlight {
  from {
    transform:translateX(-4px);
    opacity:.5;
  }
  to {
    transform:translateX(4px);
    opacity:.8;
  }
}
@media(max-width:1300px) {
  .chapter-copy {
    left:5%;
    width:31%;
    top:23%;
  }
  .chapter-copy h2 {
    font-size:39px;
  }
  .chapter-copy h1 {
    font-size:65px;
  }
  .paint-note {
    left:4%;
    width:33%;
    top:15%;
  }
  .paint-note h3 {
    font-size:28px;
  }
  .paint-note p {
    font-size:12px;
  }
  .paint-note .note {
    font-size:10px;
  }
  .reading {
    padding-inline:8%;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
}
.paused .local-light.active {
  opacity:.8;
}