:root {
  --design-width: 1961px;
  --site-scale: 1;
  --ink: #152520;
  --pine: #173b37;
  --pine-deep: #102b2b;
  --jade: #63d1c0;
  --spirit: #a7f5ea;
  --paper: #eef0dc;
  --paper-warm: #e4dfc3;
  --earth: #8a5a3a;
  --wood: #412d26;
  --white: #fbfff6;
  --line: rgba(21, 37, 32, .18);
  --display: "STKaiti", "KaiTi", "FangSong", serif;
  --body: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 0; overflow-x: hidden; scroll-behavior: smooth; background: #0b302f; }
body {
  width: var(--design-width);
  min-width: var(--design-width);
  max-width: var(--design-width);
  margin: 0 auto;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  line-height: 1.75;
  overflow-x: hidden;
  container-type: inline-size;
  zoom: var(--site-scale);
  box-shadow: inset 7px 0 rgba(85,184,193,.45), inset -7px 0 rgba(85,184,193,.45), 0 0 42px rgba(0,0,0,.32);
}

/* Entrance loader: keeps the fixed desktop canvas concealed until its visual
   resources are decoded, while still allowing them to render and download. */
.site-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  width: 100%;
  height: var(--site-viewport-height, 100vh);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  color: #edf6e7;
  background:
    radial-gradient(circle at 50% 46%, rgba(72,183,166,.15), transparent 27%),
    linear-gradient(180deg, #0a292a 0%, #071f21 55%, #041618 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity .82s cubic-bezier(.22,.72,.22,1), visibility .82s step-end;
}
.site-loader::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,12,13,.78), transparent 22%, transparent 78%, rgba(2,12,13,.78)),
    radial-gradient(ellipse at center, transparent 36%, rgba(1,10,11,.46) 100%);
}
.site-loader::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(225,244,224,.08) 4px);
  mix-blend-mode: soft-light;
}
.site-loader-sky {
  position: absolute;
  z-index: 0;
  inset: -20%;
  background:
    radial-gradient(circle at 50% 45%, rgba(159,236,217,.11), transparent 19%),
    radial-gradient(ellipse at 50% 120%, rgba(80,152,138,.16), transparent 54%);
  animation: loader-breathe 4.8s ease-in-out infinite alternate;
}
.site-loader-mountains {
  position: absolute;
  z-index: 1;
  left: -4%;
  right: -4%;
  bottom: 0;
  transform-origin: 50% 100%;
  pointer-events: none;
}
.site-loader-mountains-far {
  height: 52%;
  opacity: .36;
  background: #103536;
  clip-path: polygon(0 100%,0 70%,8% 52%,14% 65%,22% 27%,30% 61%,38% 41%,45% 66%,52% 30%,61% 63%,70% 35%,78% 60%,86% 25%,94% 62%,100% 47%,100% 100%);
  animation: loader-mountain-drift 9s ease-in-out infinite alternate;
}
.site-loader-mountains-near {
  z-index: 2;
  height: 38%;
  opacity: .72;
  background: #061b1d;
  clip-path: polygon(0 100%,0 64%,10% 44%,18% 70%,29% 38%,39% 73%,50% 51%,61% 70%,73% 37%,84% 66%,93% 48%,100% 67%,100% 100%);
}
.site-loader-gate {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
}
.site-loader-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28%;
  background:
    linear-gradient(90deg, transparent, rgba(154,112,62,.12)),
    repeating-linear-gradient(90deg, rgba(3,15,16,.97) 0 44px, rgba(39,54,47,.8) 45px 48px);
  box-shadow: 0 0 70px rgba(0,0,0,.55);
}
.site-loader-door::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 7px;
  background: linear-gradient(180deg, #7d5b31, #2d291d 45%, #8f6937 100%);
  box-shadow: 0 0 18px rgba(209,164,86,.22);
}
.site-loader-door-left { left: 0; }
.site-loader-door-left::after { right: 0; }
.site-loader-door-right { right: 0; transform: scaleX(-1); }
.site-loader-door-right::after { right: 0; }
.site-loader-spirit-light {
  position: absolute;
  top: 6%;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(169,244,226,.2) 16%, #d7fff2 48%, rgba(113,224,203,.24) 82%, transparent);
  box-shadow: 0 0 18px rgba(150,243,222,.5), 0 0 65px rgba(82,211,187,.2);
  animation: loader-spirit-pulse 2.2s ease-in-out infinite;
}
.site-loader-core {
  position: relative;
  z-index: 10;
  width: min(520px, 58%);
  margin-top: -1.5rem;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.site-loader-seal {
  position: relative;
  width: 74px;
  height: 74px;
  margin: 0 auto 1.45rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(223,190,116,.7);
  border-radius: 50%;
  background: rgba(7,31,31,.72);
  box-shadow: 0 0 0 7px rgba(173,135,70,.08), 0 0 45px rgba(112,226,202,.15);
}
.site-loader-seal::before,
.site-loader-seal::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(150,229,211,.26);
  transform: rotate(45deg);
}
.site-loader-seal::after { inset: 15px; transform: rotate(45deg); opacity: .58; }
.site-loader-seal span { position: relative; z-index: 1; color: #dfc78b; font: 700 1.7rem/1 var(--display); }
.site-loader-eyebrow {
  margin: 0 0 .35rem;
  color: #8ddacb;
  font-size: .72rem;
  letter-spacing: .42em;
}
.site-loader h1 {
  margin: 0;
  color: #f2efda;
  font: 400 clamp(2rem, 3.1cqw, 3.4rem)/1.25 var(--display);
  letter-spacing: .2em;
}
.site-loader-status {
  min-height: 1.8em;
  margin: 1.15rem 0 .7rem;
  color: rgba(224,239,223,.68);
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .2em;
}
.site-loader-progress {
  position: relative;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border: 1px solid rgba(187,170,119,.42);
  background: rgba(1,12,13,.7);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.68), 0 0 24px rgba(83,212,189,.09);
}
.site-loader-progress::before {
  content: "";
  position: absolute;
  inset: -8px 50% -8px auto;
  width: 1px;
  background: rgba(224,198,127,.42);
}
.site-loader-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #568c80, #9ae9d6 72%, #f1d991);
  box-shadow: 0 0 14px rgba(148,239,218,.72);
  transition: width .16s linear;
}
.site-loader-count {
  margin: .55rem 0 0;
  color: #d7c384;
  font-family: var(--display);
  letter-spacing: .08em;
}
.site-loader-count strong { font-size: 1rem; font-weight: 400; }
.site-loader-count span { margin-left: .15rem; font-size: .68rem; opacity: .72; }
.site-loader.is-exiting { opacity: 0; visibility: hidden; pointer-events: none; }
html.is-loading { scroll-behavior: auto; }

@keyframes loader-breathe {
  from { transform: scale(1); opacity: .72; }
  to { transform: scale(1.05); opacity: 1; }
}
@keyframes loader-mountain-drift {
  from { transform: translate3d(-.6%,0,0) scale(1.01); }
  to { transform: translate3d(.6%,0,0) scale(1.03); }
}
@keyframes loader-spirit-pulse {
  0%,100% { opacity: .48; transform: translateX(-50%) scaleX(.7); }
  50% { opacity: 1; transform: translateX(-50%) scaleX(1.8); }
}

@media (max-width: 700px) {
  .site-loader-core { width: min(520px, 72%); }
  .site-loader-door { width: 23%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader-sky,
  .site-loader-mountains-far,
  .site-loader-spirit-light { animation: none; }
  .site-loader { transition-duration: .12s; }
  .site-loader-progress i { transition: none; }
}

/* Loader art direction v2: a Zi Xiao Sect spirit-array opening ritual. */
.site-loader {
  --loader-progress: 0%;
  color: #f4efd9;
  background:
    radial-gradient(circle at 50% 39%, rgba(107, 226, 201, .17), transparent 15%),
    radial-gradient(circle at 50% 12%, rgba(221, 190, 118, .1), transparent 20%),
    linear-gradient(180deg, #071c1d 0%, #062526 46%, #031415 100%);
}
.site-loader::before {
  z-index: 8;
  background:
    linear-gradient(90deg, rgba(1, 9, 10, .92), transparent 17%, transparent 83%, rgba(1, 9, 10, .92)),
    radial-gradient(ellipse at 50% 48%, transparent 28%, rgba(0, 8, 9, .64) 100%);
}
.site-loader::after {
  z-index: 20;
  opacity: .18;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(239, 222, 172, .13) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 65%, rgba(144, 224, 205, .1) 0 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(232, 239, 216, .035) 5px);
  background-size: 73px 73px, 101px 101px, auto;
  mix-blend-mode: screen;
}
.site-loader-sky {
  inset: -12%;
  background:
    radial-gradient(circle at 50% 21%, rgba(245, 221, 153, .82) 0 2px, rgba(211, 177, 99, .2) 3px 46px, transparent 48px),
    radial-gradient(circle at 50% 46%, rgba(113, 229, 205, .12), transparent 25%),
    linear-gradient(180deg, transparent 50%, rgba(35, 104, 95, .1));
  animation: loader-breathe 5.8s ease-in-out infinite alternate;
}
.site-loader-mountains {
  left: -2%;
  right: -2%;
  filter: drop-shadow(0 -18px 26px rgba(0, 0, 0, .18));
}
.site-loader-mountains-far {
  height: 55%;
  opacity: .3;
  background: linear-gradient(180deg, #174342, #0a2d2e);
  clip-path: polygon(0 100%,0 78%,7% 66%,13% 73%,21% 33%,27% 62%,33% 52%,40% 73%,49% 30%,56% 66%,63% 51%,70% 72%,79% 36%,86% 67%,94% 51%,100% 72%,100% 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000);
}
.site-loader-mountains-near {
  height: 31%;
  opacity: .88;
  background: linear-gradient(180deg, #082324, #020d0f 75%);
  clip-path: polygon(0 100%,0 72%,9% 49%,16% 76%,26% 47%,36% 78%,48% 58%,58% 75%,69% 42%,78% 75%,88% 51%,100% 72%,100% 100%);
}
.site-loader-clouds {
  position: absolute;
  z-index: 4;
  left: -15%;
  right: -15%;
  bottom: 16%;
  height: 25%;
  opacity: .21;
  filter: blur(18px);
  background:
    radial-gradient(ellipse at 14% 63%, rgba(183, 226, 209, .75), transparent 26%),
    radial-gradient(ellipse at 40% 34%, rgba(132, 204, 188, .56), transparent 24%),
    radial-gradient(ellipse at 68% 55%, rgba(176, 224, 207, .72), transparent 27%),
    radial-gradient(ellipse at 91% 30%, rgba(120, 198, 181, .55), transparent 23%);
  animation: loader-cloud-drift 12s ease-in-out infinite alternate;
}
.site-loader-gate::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 8%;
  right: 8%;
  height: 112px;
  opacity: .78;
  background:
    linear-gradient(180deg, #020b0c, #092323 72%, transparent 73%),
    linear-gradient(90deg, transparent 4%, rgba(189, 142, 70, .5) 12% 88%, transparent 96%);
  clip-path: polygon(0 0,100% 0,100% 38%,92% 38%,88% 66%,72% 66%,68% 50%,32% 50%,28% 66%,12% 66%,8% 38%,0 38%);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.42));
}
.site-loader-door {
  z-index: 3;
  width: 16%;
  border-right: 1px solid rgba(190, 145, 73, .3);
  background:
    linear-gradient(90deg, rgba(1, 8, 9, .98), rgba(5, 26, 26, .9)),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(181, 143, 74, .16) 48px 50px);
  box-shadow: 0 0 80px rgba(0,0,0,.72);
  transition: transform 1.05s cubic-bezier(.2,.75,.2,1), opacity .8s ease;
}
.site-loader-door::after {
  width: 4px;
  background: linear-gradient(180deg, #d0a963, #3f3422 46%, #a98043);
  box-shadow: 0 0 28px rgba(218, 176, 91, .28);
}
.site-loader-spirit-light {
  z-index: 6;
  top: 7%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(192, 255, 236, .35) 23%, #d9fff2 52%, rgba(123, 232, 206, .18) 86%, transparent);
  box-shadow: 0 0 18px rgba(160, 247, 225, .72), 0 0 90px rgba(72, 204, 177, .27);
}
.site-loader-array {
  position: absolute;
  z-index: 5;
  top: 49%;
  left: 50%;
  width: min(610px, 44vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(207, 173, 96, .25);
  border-radius: 50%;
  opacity: .76;
  box-shadow: inset 0 0 70px rgba(100, 228, 200, .035), 0 0 80px rgba(66, 197, 172, .06);
  transition: transform .9s ease, opacity .7s ease;
}
.site-loader-array::before,
.site-loader-array::after,
.site-loader-array i {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.site-loader-array::before {
  inset: 7%;
  background: repeating-conic-gradient(from 22.5deg, rgba(220, 186, 106, .62) 0 1deg, transparent 1.2deg 44deg);
  -webkit-mask: radial-gradient(circle, transparent 65%, #000 65.3% 67%, transparent 67.3%);
  mask: radial-gradient(circle, transparent 65%, #000 65.3% 67%, transparent 67.3%);
  animation: loader-array-spin 36s linear infinite;
}
.site-loader-array::after {
  inset: 20%;
  border: 1px dashed rgba(131, 224, 202, .38);
  box-shadow: 0 0 28px rgba(90, 224, 194, .08);
  animation: loader-array-spin-reverse 28s linear infinite;
}
.site-loader-array i:nth-child(1) {
  inset: 2%;
  border: 1px solid rgba(113, 222, 197, .2);
}
.site-loader-array i:nth-child(2) {
  inset: 30%;
  border: 1px solid rgba(213, 176, 96, .32);
  transform: rotate(45deg);
  border-radius: 4px;
}
.site-loader-array i:nth-child(3) {
  inset: 40%;
  border: 1px solid rgba(137, 237, 213, .5);
  box-shadow: 0 0 28px rgba(106, 231, 203, .22);
}
.site-loader-inscription {
  position: absolute;
  z-index: 10;
  top: 50%;
  margin: 0;
  color: rgba(210, 184, 116, .43);
  font: 400 .76rem/1.75 var(--display);
  letter-spacing: .28em;
  writing-mode: vertical-rl;
  text-shadow: 0 0 20px rgba(207, 168, 87, .2);
}
.site-loader-inscription::before,
.site-loader-inscription::after {
  content: "";
  display: block;
  width: 1px;
  height: 52px;
  margin: 12px auto;
  background: linear-gradient(transparent, rgba(205, 169, 91, .55), transparent);
}
.site-loader-inscription-left { left: 21%; transform: translateY(-50%); }
.site-loader-inscription-right { right: 21%; transform: translateY(-50%); }
.site-loader-core {
  z-index: 12;
  width: min(610px, 48%);
  margin-top: -1rem;
}
.site-loader-seal {
  width: 92px;
  height: 92px;
  margin-bottom: 1.7rem;
  border-color: rgba(224, 190, 108, .72);
  background: radial-gradient(circle, rgba(22, 75, 69, .94), rgba(4, 27, 28, .96));
  box-shadow: 0 0 0 8px rgba(195, 151, 72, .08), 0 0 0 9px rgba(138, 226, 204, .12), 0 0 58px rgba(87, 225, 195, .2);
}
.site-loader-seal::before { inset: 12px; border-color: rgba(166, 231, 214, .32); }
.site-loader-seal::after { inset: 24px; border-color: rgba(224, 189, 105, .55); }
.site-loader-seal span {
  color: #ead79c;
  font-size: 2rem;
  text-shadow: 0 0 18px rgba(238, 215, 147, .36);
}
.site-loader-eyebrow {
  margin-bottom: .6rem;
  color: #91d9ca;
  font-size: .73rem;
  letter-spacing: .52em;
}
.site-loader h1 {
  color: #f5efd8;
  font-size: clamp(2.65rem, 3.3cqw, 4.15rem);
  line-height: 1.2;
  letter-spacing: .25em;
  text-shadow: 0 5px 32px rgba(0,0,0,.72), 0 0 22px rgba(161, 231, 210, .09);
}
.site-loader-status {
  margin: 1.35rem 0 .9rem;
  color: rgba(217, 231, 211, .72);
  font-size: .83rem;
  letter-spacing: .28em;
}
.site-loader-progress {
  width: min(470px, 82%);
  height: 7px;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  background:
    linear-gradient(180deg, transparent 2px, rgba(213, 180, 100, .52) 2px 3px, rgba(3, 16, 17, .88) 3px 5px, transparent 5px);
  box-shadow: none;
}
.site-loader-progress::before,
.site-loader-progress::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(217, 181, 96, .68);
  background: #092a2a;
  transform: rotate(45deg);
}
.site-loader-progress::before { left: -2px; }
.site-loader-progress::after { right: -2px; }
.site-loader-progress i {
  position: relative;
  height: 3px;
  top: 2px;
  background: linear-gradient(90deg, #b78e47, #75d9c5 55%, #e5d08f);
  box-shadow: 0 0 12px rgba(129, 229, 207, .8), 0 0 26px rgba(91, 206, 181, .25);
}
.site-loader-progress i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e8d59b;
  box-shadow: 0 0 12px #9af0dc, 0 0 28px rgba(125, 233, 208, .8);
  transform: translateY(-50%);
}
.site-loader-count {
  margin-top: .65rem;
  color: #d9bd72;
  letter-spacing: .16em;
}
.site-loader-count strong { font-size: 1.25rem; }
.site-loader.is-exiting .site-loader-door-left { transform: translateX(-108%); opacity: .35; }
.site-loader.is-exiting .site-loader-door-right { transform: scaleX(-1) translateX(-108%); opacity: .35; }
.site-loader.is-exiting .site-loader-array { transform: translate(-50%, -50%) scale(1.18); opacity: 0; }

@keyframes loader-cloud-drift {
  from { transform: translate3d(-2%, 0, 0) scale(1); }
  to { transform: translate3d(2%, -4%, 0) scale(1.05); }
}
@keyframes loader-array-spin { to { transform: rotate(360deg); } }
@keyframes loader-array-spin-reverse { to { transform: rotate(-360deg); } }

@media (max-width: 700px) {
  .site-loader-array { width: min(610px, 58vw); }
  .site-loader-core { width: min(610px, 64%); }
  .site-loader-door { width: 11%; }
  .site-loader-inscription-left { left: 12%; }
  .site-loader-inscription-right { right: 12%; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader-clouds,
  .site-loader-array::before,
  .site-loader-array::after { animation: none; }
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; transform: translateY(-160%); padding: .6rem 1rem; background: var(--white); color: var(--ink); }
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 50%;
  margin-left: calc(var(--design-width) / -2);
  width: var(--design-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem clamp(1rem, 4cqw, 4rem);
  color: var(--white);
  transition: background .3s ease, box-shadow .3s ease, transform .42s cubic-bezier(.22,.75,.25,1);
}
.site-header.companion-focus { transform: translateY(-112%); }
.site-header.scrolled { background: rgba(16,43,43,.94); box-shadow: 0 8px 30px rgba(0,0,0,.2); backdrop-filter: blur(12px); }
.site-header > .brand { margin-right: auto; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; }
.brand-logo { display: block; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; object-fit: cover; border: 1px solid rgba(255,255,255,.72); border-radius: 22%; box-shadow: 0 5px 16px rgba(0,0,0,.2); }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--white); background: #9d3c2d; border: 1px solid rgba(255,255,255,.65); font-size: 1rem; line-height: 1; transform: rotate(-3deg); }
.site-nav { display: flex; align-items: center; gap: clamp(1.25rem, 3cqw, 2.6rem); font-size: .9rem; letter-spacing: .16em; }
.site-nav a { text-decoration: none; }
.site-nav > a:not(.nav-status)::after { content: ""; display: block; width: 0; height: 1px; background: var(--spirit); transition: width .25s ease; }
.site-nav > a:hover::after { width: 100%; }
.nav-plan { color: var(--spirit); font-weight: 700; }
.nav-chronicle {
  color: #f1d49a;
  font-weight: 700;
  text-shadow: 0 0 14px rgba(241, 212, 154, .22);
}
.nav-status { display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .75rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; letter-spacing: .05em; }
.nav-status i, .status-strip i { width: .5rem; height: .5rem; background: #f2c56d; border-radius: 50%; box-shadow: 0 0 0 4px rgba(242,197,109,.16); }
.language-switcher { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: .18rem .4rem .18rem .55rem; border: 1px solid rgba(255,255,255,.42); background: rgba(8,30,29,.22); }
.language-glyph { color: var(--spirit); font-family: var(--display); font-size: .88rem; line-height: 1; }
.language-switcher select { max-width: 6rem; padding: .15rem 1.35rem .15rem .2rem; color: white; border: 0; outline: 0; background: transparent; font: 600 .76rem/1.2 var(--body); cursor: pointer; }
.language-switcher select option { color: var(--ink); background: var(--white); }
.nav-toggle { display: none; border: 0; background: transparent; padding: .5rem; }
.nav-toggle > span:not(.sr-only) { display: block; width: 24px; height: 2px; margin: 5px; background: white; }

.plan-page { min-height: 100vh; background: #d8d7cb; overflow: hidden; }
.plan-header { position: fixed; z-index: 10; top: 0; left: 0; width: var(--design-width); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; padding: .8rem clamp(1rem, 4cqw, 3.5rem); color: var(--white); background: rgba(16,43,43,.97); box-shadow: 0 8px 30px rgba(0,0,0,.22); }
.plan-header .brand { flex-shrink: 0; }
.plan-heading { margin: 0; font-family: var(--display); font-size: clamp(1.1rem, 2cqw, 1.45rem); letter-spacing: .18em; }
.plan-actions { display: flex; align-items: center; gap: .75rem; }
.plan-action { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: .4rem .9rem; color: var(--white); border: 1px solid rgba(255,255,255,.46); text-decoration: none; font-size: .82rem; letter-spacing: .08em; }
.plan-action:hover { color: var(--pine-deep); background: var(--spirit); border-color: var(--spirit); }
.plan-frame { width: 100%; height: calc(100vh - 72px); margin-top: 72px; border: 0; background: #fff; }
.plan-fallback { display: none; }

@media (max-width: 0px) {
  .site-header > .brand { font-size: 1.05rem; }
  .plan-header { min-height: 124px; flex-wrap: wrap; align-content: center; }
  .plan-heading { order: 3; width: 100%; font-size: 1rem; }
  .plan-actions { margin-left: auto; }
  .plan-action-secondary { display: none; }
  .plan-frame { height: calc(100vh - 124px); margin-top: 124px; }
}

.hero { position: relative; height: 760px; min-height: 760px; display: flex; align-items: center; isolation: isolate; color: var(--white); overflow: hidden; }
.hero-art { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; image-rendering: auto; transform: scale(1.015); animation: arrive 1.4s cubic-bezier(.2,.7,.2,1) both; }
.hero-veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(11,28,28,.86) 0%, rgba(11,28,28,.52) 36%, rgba(11,28,28,.08) 67%), linear-gradient(0deg, rgba(10,25,24,.5), transparent 48%); }
.hero::after { content: ""; position: absolute; z-index: -1; inset: auto auto 9% 25%; width: 23rem; height: 23rem; background: rgba(112,245,230,.14); border-radius: 50%; filter: blur(60px); }
.hero-copy { width: min(92%, 1240px); margin: 0 auto; padding: 8rem clamp(1rem, 5cqw, 4rem) 5rem; }
.eyebrow, .section-label { margin: 0 0 1rem; color: var(--jade); font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.hero-title-wrap { display: flex; align-items: flex-end; gap: clamp(1rem,3cqw,3rem); }
.hero h1 { display: flex; margin: 0; font-family: var(--display); font-size: clamp(5.2rem, 12cqw, 10rem); font-weight: 500; line-height: .78; letter-spacing: -.12em; text-shadow: 0 8px 28px rgba(0,0,0,.35); }
.hero h1 span:last-child { margin-top: .62em; }
.hero-kicker { margin: 0 0 .7rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.45); font-family: var(--display); font-size: clamp(1rem, 2cqw, 1.25rem); letter-spacing: .28em; line-height: 2; }
.hero-lede { margin: 2.7rem 0 1.7rem; color: rgba(255,255,255,.86); font-family: var(--display); font-size: clamp(1.05rem, 2cqw, 1.3rem); letter-spacing: .08em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .65rem 1.4rem; border: 1px solid transparent; text-decoration: none; font-weight: 700; letter-spacing: .08em; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--pine-deep); background: var(--spirit); box-shadow: 0 10px 32px rgba(64,225,206,.18); }
.button-ghost { color: white; border-color: rgba(255,255,255,.6); background: rgba(12,31,29,.15); }
.hero-seal { position: absolute; right: clamp(1rem,4cqw,4rem); top: 24%; display: grid; gap: .12rem; padding: .8rem .5rem; color: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.46); font-family: var(--display); font-size: .8rem; line-height: 1.15; text-align: center; background: rgba(17,51,45,.2); }
.scroll-cue { position: absolute; right: clamp(1rem,5cqw,4rem); bottom: 2rem; display: flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.75); font-size: .72rem; letter-spacing: .2em; text-decoration: none; writing-mode: vertical-rl; }
.scroll-cue i { display: block; width: 1px; height: 48px; background: linear-gradient(white, transparent); }
.reservation-cta { position: absolute; z-index: 5; left: 50%; bottom: 1.75rem; display: grid; justify-items: center; gap: .58rem; min-width: min(17rem, 78cqw); transform: translateX(-50%); color: var(--white); text-align: center; }
.reservation-count { margin: 0; padding: .22rem 1rem; font-family: var(--display); font-size: clamp(.92rem, 1.4cqw, 1.08rem); letter-spacing: .14em; text-shadow: 0 2px 12px rgba(0,0,0,.65); }
.reservation-count strong { color: var(--spirit); font-family: var(--body); font-size: 1.2em; font-weight: 800; }
.reservation-button { min-width: 11.5rem; min-height: 2.85rem; padding: .55rem 1.5rem; color: var(--pine-deep); border: 1px solid var(--spirit); background: rgba(167,245,234,.94); box-shadow: 0 10px 28px rgba(0,0,0,.22); font: 800 .92rem/1 var(--body); letter-spacing: .18em; cursor: pointer; transition: transform .2s ease, background .2s ease, opacity .2s ease; }
.reservation-button:hover:not(:disabled) { transform: translateY(-2px); background: var(--white); }
.reservation-button:disabled { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.28); background: rgba(72,83,80,.78); box-shadow: none; cursor: not-allowed; opacity: .86; }
.reservation-message { min-height: 1rem; margin: -.2rem 0 0; color: #ffd7b5; font-size: .72rem; letter-spacing: .04em; text-shadow: 0 2px 8px rgba(0,0,0,.7); }

@media (max-width: 0px) {
  .hero-copy { padding-bottom: 11rem; }
  .reservation-cta { bottom: 1rem; }
}

.section, .world { position: relative; padding: clamp(5.5rem, 10cqw, 9rem) clamp(1.25rem, 6cqw, 6rem); }
.section::before, .world::before { content: none; }
.axis-mark { position: absolute; z-index: 2; top: 0; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 4rem; height: 4rem; color: var(--paper); background: var(--pine); border: 5px solid var(--paper); box-shadow: 0 0 0 1px rgba(23,59,55,.25); border-radius: 50%; font-family: var(--display); font-size: .82rem; letter-spacing: .1em; }
.section-intro { position: relative; z-index: 1; width: min(680px, 90%); margin: 0 auto 4rem; padding: 2.5rem clamp(1rem, 4cqw, 3.5rem); background: rgba(238,240,220,.93); text-align: center; }
.section h2, .world h2, .follow h2 { margin: 0 0 1.2rem; font-family: var(--display); font-size: clamp(2.5rem, 5cqw, 4.5rem); font-weight: 500; line-height: 1.18; letter-spacing: -.04em; }
.section-intro p:last-child, .path-copy > p:last-child, .world-copy > p { color: #4a5d54; }
.story { padding-top: clamp(5.5rem, 8cqw, 7.5rem); padding-bottom: clamp(7rem, 11cqw, 10rem); background-color: #e8dfc8; background-image: linear-gradient(90deg, rgba(84,67,38,.06), transparent 8%, transparent 92%, rgba(84,67,38,.06)), linear-gradient(180deg, rgba(255,253,239,.34), rgba(193,174,132,.08)), url("assets/story-xuan-paper-v1.webp"); background-size: 100% 100%, 100% 100%, 720px 720px; background-blend-mode: multiply, normal, normal; }
.story::after { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(ellipse at 8% 40%, rgba(57,72,62,.09), transparent 24%), radial-gradient(ellipse at 92% 64%, rgba(126,83,48,.08), transparent 26%), linear-gradient(90deg, transparent 49.9%, rgba(72,61,40,.09) 50%, transparent 50.1%); mix-blend-mode: multiply; pointer-events: none; }
.desktop-art-scroll { position: relative; width: 100%; overflow: visible; }
.story-poem-stage { position: relative; z-index: 2; width: min(1760px, 100%); height: clamp(940px, 58cqw, 1030px); margin: clamp(-8.5rem, -8cqw, -5rem) auto 1.2rem; overflow: visible; isolation: isolate; }
.story-poem-stage::before { content: ""; position: absolute; z-index: 1; inset: 19rem 4.5% 1rem; border: 1px solid rgba(78,63,37,.12); border-right-color: transparent; border-left-color: transparent; background: linear-gradient(90deg, rgba(247,241,218,.48), rgba(255,253,239,.16) 24%, rgba(255,253,239,.16) 76%, rgba(247,241,218,.48)); box-shadow: inset 0 1px rgba(255,255,255,.42); pointer-events: none; }
.story-poem-canvas { position: absolute; z-index: 4; top: 0; right: 0; left: 0; width: 100%; height: clamp(940px, 58cqw, 1030px); cursor: crosshair; touch-action: none; }
.story-eaves-art { position: absolute; z-index: 7; top: clamp(-3rem, -2.6cqw, -2rem); left: 50%; display: block; width: min(1760px, 96cqw); max-width: none; height: auto; transform: translateX(-50%); filter: saturate(.88) contrast(1.08) drop-shadow(0 22px 24px rgba(39,31,20,.2)); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; pointer-events: none; user-select: none; }
.story-poem-context { position: absolute; z-index: 6; top: clamp(20rem, 21cqw, 23rem); left: 1.5%; width: min(320px, 24%); padding: 2.45rem 1.35rem 1.25rem 1.55rem; border: 1px solid rgba(76,60,34,.19); border-left: 3px solid rgba(23,59,55,.52); background: linear-gradient(135deg, rgba(252,248,228,.94), rgba(233,222,190,.86)); box-shadow: 0 18px 44px rgba(70,55,30,.08), inset 0 0 32px rgba(255,255,255,.34); pointer-events: none; }
.story-poem-context::before { content: "一纸入门帖"; position: absolute; top: .72rem; left: 1.48rem; color: var(--earth); font-family: var(--display); font-size: .7rem; letter-spacing: .28em; }
.story-poem-context::after { content: ""; position: absolute; top: 2rem; right: 1.35rem; left: 1.48rem; height: 1px; background: linear-gradient(90deg, rgba(156,91,55,.36), transparent); }
.story-poem-context h2 { margin: 0 0 .55rem; font-size: clamp(1.42rem,1.9cqw,1.82rem); letter-spacing: .02em; white-space: nowrap; }
.story-poem-context p { margin: 0; color: #4f5c53; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-size: .78rem; line-height: 1.78; }
.story-poem-legend { position: absolute; z-index: 6; right: 1.7%; top: clamp(20rem, 21cqw, 23rem); display: grid; gap: .82rem; padding: 1rem .72rem; color: var(--earth); border-top: 1px solid rgba(156,91,55,.28); border-bottom: 1px solid rgba(156,91,55,.28); background: rgba(244,235,208,.62); writing-mode: vertical-rl; pointer-events: none; }
.story-poem-legend span { color: rgba(74,93,84,.64); font-size: .62rem; letter-spacing: .32em; }
.story-poem-legend strong { padding-right: .7rem; border-right: 1px solid rgba(156,91,55,.31); font-family: var(--display); font-size: .85rem; font-weight: 500; letter-spacing: .2em; }
.story-poem-controls { position: absolute; z-index: 6; right: 4.5%; bottom: 1rem; left: 4.5%; display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; border-top: 1px solid rgba(23,59,55,.18); }
.story-poem-controls p { display: flex; align-items: center; gap: .6rem; margin: 0; color: rgba(74,93,84,.72); font-size: .68rem; letter-spacing: .15em; }
.story-poem-controls p i { width: .5rem; height: .5rem; border: 1px solid var(--pine); border-radius: 50%; box-shadow: 0 0 0 5px rgba(23,59,55,.06); }
.story-poem-controls button { padding: .48rem .85rem; color: var(--pine); border: 1px solid rgba(23,59,55,.3); background: rgba(255,255,246,.56); font-family: var(--display); font-size: .75rem; letter-spacing: .15em; cursor: pointer; transition: color .2s ease,border-color .2s ease,background .2s ease; }
.story-poem-controls button:hover,.story-poem-controls button:focus-visible { color: var(--paper); border-color: var(--earth); background: var(--earth); outline: none; }
.story-poem-actions { display: flex; align-items: center; gap: .55rem; }
.motion-toggle { display: none; }
.motion-toggle.is-active { color: var(--paper); border-color: var(--pine); background: var(--pine); }
.mobile-poem-passive .story-poem-canvas { pointer-events: none; touch-action: pan-x pan-y; cursor: default; }
.mobile-poem-passive .story-poem-controls { display: none !important; }
.story-grid-heading { position: relative; z-index: 6; display: flex; align-items: center; gap: 1.2rem; width: min(1320px, 94%); margin: 0 auto 1rem; color: #574d39; }
.story-grid-heading span { font-family: var(--display); font-size: 1.1rem; letter-spacing: .28em; }
.story-grid-heading i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(23,59,55,.4), rgba(23,59,55,.06)); }
.story-grid-heading p { margin: 0; color: rgba(87,77,57,.68); font-size: .7rem; letter-spacing: .22em; }
.story-grid { position: relative; z-index: 6; display: grid; grid-template-columns: repeat(3, 1fr); width: min(1320px, 94%); margin: 0 auto; border-top: 1px solid rgba(23,59,55,.42); border-bottom: 1px solid rgba(23,59,55,.24); background: rgba(244,236,210,.54); box-shadow: 0 22px 60px rgba(72,55,28,.08); }
.story-card { position: relative; display: grid; grid-template-columns: 3.7rem 1fr; grid-template-rows: auto auto; column-gap: 1.25rem; align-content: center; min-height: 190px; padding: 1.8rem 2rem; border: 0; background: linear-gradient(135deg, rgba(255,252,235,.76), rgba(231,217,181,.42)); box-shadow: none; }
.story-card + .story-card { border-left: 1px solid rgba(23,59,55,.18); }
.story-card::after { content: ""; position: absolute; right: 1rem; bottom: .8rem; width: 3.4rem; height: 3.4rem; border: 1px solid rgba(156,91,55,.1); transform: rotate(8deg); }
.story-glyph { grid-row: 1 / 3; display: grid; place-items: center; align-self: start; width: 3.2rem; height: 3.2rem; margin: .1rem 0 0; color: #f5ecd2; border: 1px solid rgba(107,55,34,.56); border-radius: 4px; background: #9b583a; box-shadow: inset 0 0 0 3px rgba(255,238,203,.16); font-family: var(--display); font-size: 1.35rem; transform: rotate(-3deg); }
.story-card h3, .path-list h3 { align-self: end; margin: 0 0 .58rem; font-family: var(--display); font-size: 1.38rem; letter-spacing: .04em; }
.story-card p { align-self: start; max-width: 22rem; margin: 0; color: #586159; font-family: "Noto Serif SC", "Songti SC", SimSun, serif; font-size: .84rem; line-height: 1.72; }

/* Story v13: the eaves and hanging poem are the hero; everything else reads as a quiet scroll colophon. */
.story-poem-stage { height: clamp(800px, 50cqw, 890px); margin-bottom: 0; }
.story-poem-stage::before { inset: 18.5rem 7% 1.5rem; border-color: rgba(78,63,37,.1); border-right-color: transparent; border-left-color: transparent; background: linear-gradient(90deg, rgba(247,241,218,.32), rgba(255,253,239,.08) 28%, rgba(255,253,239,.08) 72%, rgba(247,241,218,.32)); }
.story-poem-canvas { height: clamp(800px, 50cqw, 890px); }
.story-poem-controls { right: 7%; bottom: 1.5rem; left: 7%; }

.story-afterword { position: relative; z-index: 6; display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: clamp(2.5rem, 6cqw, 6rem); align-items: center; width: min(1180px, 88%); margin: .5rem auto clamp(4.5rem, 6cqw, 6.5rem); padding: 2rem 0 2.15rem; border-top: 1px solid rgba(23,59,55,.34); border-bottom: 1px solid rgba(23,59,55,.16); }
.story-afterword::before { content: ""; position: absolute; top: -4px; left: 0; width: 5.5rem; height: 7px; background: #9b583a; opacity: .78; }
.story-afterword .story-poem-context { position: static; width: auto; padding: 0; border: 0; background: none; box-shadow: none; pointer-events: auto; }
.story-afterword .story-poem-context::before,
.story-afterword .story-poem-context::after { display: none; }
.story-afterword-kicker { display: block; margin-bottom: .85rem; color: #9b583a; font-family: var(--display); font-size: .7rem; letter-spacing: .32em; }
.story-afterword .story-poem-context h2 { margin: 0 0 .7rem; font-size: clamp(1.85rem, 2.5cqw, 2.45rem); letter-spacing: .03em; white-space: normal; }
.story-afterword .story-poem-context p { max-width: 48rem; color: #526058; font-size: .84rem; line-height: 1.9; }
.story-afterword .story-poem-legend { position: static; display: grid; grid-template-columns: 2.7rem 1fr; gap: 1rem; align-items: center; min-height: 5.2rem; padding: .4rem 0 .4rem 1.7rem; border: 0; border-left: 1px solid rgba(156,91,55,.3); background: none; writing-mode: horizontal-tb; pointer-events: auto; }
.story-afterword .story-poem-legend span { color: rgba(74,93,84,.62); font-size: .64rem; letter-spacing: .22em; writing-mode: vertical-rl; }
.story-afterword .story-poem-legend strong { padding: 0; border: 0; color: #8d5138; font-size: 1rem; line-height: 1.8; letter-spacing: .22em; }

.story-grid-heading { justify-content: center; gap: 1.4rem; width: min(1180px, 88%); margin-bottom: 1.1rem; text-align: center; }
.story-grid-heading span { color: #203d38; font-size: 1.18rem; letter-spacing: .34em; }
.story-grid-heading i { flex: 0 1 8rem; background: linear-gradient(90deg, rgba(23,59,55,.06), rgba(23,59,55,.42), rgba(23,59,55,.06)); }
.story-grid-heading p { color: rgba(87,77,57,.62); font-size: .68rem; letter-spacing: .2em; }
.story-grid { width: min(1180px, 88%); border: 0; border-top: 1px solid rgba(23,59,55,.36); border-bottom: 1px solid rgba(23,59,55,.18); background: transparent; box-shadow: none; }
.story-card { grid-template-columns: 3.15rem 1fr; min-height: 210px; padding: 2.25rem clamp(1.5rem, 2.5cqw, 2.8rem); background: rgba(250,245,223,.18); }
.story-card + .story-card { border-left-color: rgba(23,59,55,.2); }
.story-card::after { right: 1.4rem; bottom: 1.25rem; width: 4.1rem; height: 4.1rem; border-color: rgba(156,91,55,.08); }
.story-glyph { width: 2.65rem; height: 2.65rem; border-radius: 2px; font-size: 1.1rem; box-shadow: inset 0 0 0 2px rgba(255,238,203,.14); }
.story-card h3 { margin-bottom: .72rem; font-size: 1.28rem; }
.story-card p { font-size: .8rem; line-height: 1.82; }

/* Story v14: a single concise tableau. Supporting copy remains in the markup for easy recovery. */
.story { padding-bottom: 2.2rem; }
.story-afterword,
.story-grid-heading,
.story-grid { display: none; }
.story-poem-stage { height: clamp(830px, 51cqw, 910px); margin-bottom: 0; }
.story-poem-canvas { height: clamp(830px, 51cqw, 910px); }
.story-poem-stage::before { bottom: .65rem; }
.story-poem-controls { bottom: .65rem; }

/* Story v15: a faint ink-wash sect gate gives the concise tableau a painted-paper finish. */
.story::after { background-image: linear-gradient(180deg, rgba(232,223,200,.12), rgba(232,223,200,.3)), url("assets/story-ink-gate-v1.webp"), radial-gradient(ellipse at 8% 40%, rgba(57,72,62,.07), transparent 24%), radial-gradient(ellipse at 92% 64%, rgba(126,83,48,.06), transparent 26%), linear-gradient(90deg, transparent 49.9%, rgba(72,61,40,.07) 50%, transparent 50.1%); background-position: center, center bottom, center, center, center; background-size: 100% 100%, 100% auto, 100% 100%, 100% 100%, 100% 100%; background-repeat: no-repeat; background-blend-mode: normal, multiply, multiply, multiply, multiply; opacity: .64; }
.story-poem-stage { height: clamp(900px, 55cqw, 980px); }
.story-poem-canvas { height: clamp(900px, 55cqw, 980px); }

/* Story v19: the gate itself bridges the two scenes; no artificial fog bank. */
.story { isolation: isolate; padding-top: 0; box-shadow: inset 0 24px 32px -34px rgba(20,34,29,.68); }
.story::before { content: ""; position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(54,43,28,.34) 18%, rgba(54,43,28,.48) 50%, rgba(54,43,28,.34) 82%, transparent); pointer-events: none; }
.story > .axis-mark { z-index: 10; }
.story-poem-stage { margin-top: -7.5rem; }
.story-eaves-art { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); filter: saturate(.88) contrast(1.08) drop-shadow(0 18px 18px rgba(25,27,22,.24)); }

/* Story v20: keep both pages in their own space; a narrow deckled paper lip is the only bridge. */
.hero { box-shadow: inset 0 -22px 26px -26px rgba(7,24,22,.74); }
.story { padding-top: clamp(5.5rem, 8cqw, 7.5rem); box-shadow: inset 0 18px 24px -28px rgba(27,38,31,.4); }
.story::before { top: -10px; height: 12px; background-color: #e8dfc8; background-image: url("assets/story-xuan-paper-v1.webp"); background-size: 720px 720px; clip-path: polygon(0 38%, 3% 55%, 7% 31%, 11% 62%, 16% 39%, 21% 58%, 27% 28%, 33% 59%, 39% 36%, 45% 64%, 51% 34%, 57% 56%, 63% 29%, 69% 61%, 75% 37%, 82% 58%, 88% 32%, 94% 61%, 100% 40%, 100% 100%, 0 100%); opacity: .96; }
.story-poem-stage { margin: clamp(-8.5rem, -8cqw, -5rem) auto 0; }
.story-eaves-art { top: clamp(-3rem, -2.6cqw, -2rem); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 13%, #000 100%), linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-composite: intersect; filter: saturate(.88) contrast(1.08) drop-shadow(0 22px 24px rgba(39,31,20,.2)); }

/* Story v21: the visible roof begins below the section boundary, never over the hero. */
.story-poem-stage { margin: -4rem auto 0; }

/* Hero v22: lower the primary copy slightly without crowding the reservation controls. */
.hero-copy { transform: translateY(2rem); }

/* Seam v23: intentionally plain; no deckle, fog, shadow, or overlap. */
.hero,
.story { box-shadow: none; }
.story::before { content: none; }

/* Hero v24: extend the opening scene downward before the story begins. */
.hero { height: 900px; min-height: 900px; }

/* Hero v25: continue the same expansion rhythm. */
.hero { height: 1040px; min-height: 1040px; }

/* Story v26: enlarge the faint gate so its central doorway sits beneath the solid eaves. */
.story::after { background-size: 100% 100%, 142% auto, 100% 100%, 100% 100%, 100% 100%; background-position: center, center bottom, center, center, center; opacity: .68; }

/* Story v31: preserve the pale paper while separating the ink lines of the enlarged doorway. */
.story::before { content: none; }
.story-poem-stage::after { content: ""; position: absolute; z-index: 2; inset: 13rem 5.5% .65rem; background: url("assets/story-ink-gate-v1.webp") center bottom / 175% auto no-repeat; opacity: .46; filter: brightness(.72) contrast(2.8) grayscale(.18) sepia(.18); mix-blend-mode: multiply; pointer-events: none; }
.story::after { background-image: linear-gradient(180deg, rgba(232,223,200,.12), rgba(232,223,200,.3)), radial-gradient(ellipse at 8% 40%, rgba(57,72,62,.07), transparent 24%), radial-gradient(ellipse at 92% 64%, rgba(126,83,48,.06), transparent 26%), linear-gradient(90deg, transparent 49.9%, rgba(72,61,40,.07) 50%, transparent 50.1%); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; opacity: .64; }

/* Story v32: blend the gate into the full paper field, move its doorway lower, and restyle reset as a colophon seal. */
.story-poem-stage::after { inset: 12rem 2.5% .65rem; background-position: center calc(100% + 5.5rem); opacity: .48; -webkit-mask-image: radial-gradient(ellipse 78% 86% at 50% 51%, #000 48%, rgba(0,0,0,.78) 68%, transparent 100%); mask-image: radial-gradient(ellipse 78% 86% at 50% 51%, #000 48%, rgba(0,0,0,.78) 68%, transparent 100%); }
.story-poem-controls .poem-reset-seal { position: relative; display: grid; grid-template-rows: 1fr 1fr; place-items: center; width: 3.3rem; height: 3.3rem; padding: .36rem .3rem; color: #8f4e35; border: 1px solid rgba(143,78,53,.72); border-radius: .16rem; background: rgba(240,226,194,.46); box-shadow: inset 0 0 0 3px rgba(143,78,53,.12), 0 3px 10px rgba(65,43,26,.08); font-family: var(--display); font-size: .76rem; line-height: 1; letter-spacing: .08em; transform: rotate(-1.4deg); transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.story-poem-controls .poem-reset-seal::before { content: ""; position: absolute; inset: .28rem; border: 1px solid rgba(143,78,53,.3); border-radius: .08rem; pointer-events: none; }
.story-poem-controls .poem-reset-seal span { display: block; white-space: nowrap; }
.story-poem-controls .poem-reset-seal:hover,.story-poem-controls .poem-reset-seal:focus-visible { color: #f6ebcf; border-color: #8f4e35; background: #8f4e35; box-shadow: inset 0 0 0 3px rgba(246,235,207,.16), 0 3px 10px rgba(65,43,26,.12); transform: rotate(0) translateY(-1px); outline: 2px solid rgba(143,78,53,.18); outline-offset: 3px; }
.story-poem-controls .poem-reset-seal:active { transform: rotate(0) translateY(1px) scale(.97); box-shadow: inset 0 0 0 3px rgba(246,235,207,.12); }
.path-list p { margin: 0; color: #58675f; }

.path { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(430px, 1.2fr); gap: clamp(3rem,8cqw,8rem); align-items: start; background: var(--paper-warm); }
.path-copy, .path-list { position: relative; z-index: 1; }
.path-copy { position: sticky; top: 8rem; max-width: 520px; padding: 1rem; background: var(--paper-warm); }
.path-list { list-style: none; margin: 0; padding: 0; background: var(--paper-warm); }
.path-list li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1.5rem; min-height: 145px; padding: 0 0 2.4rem; }
.path-list li:not(:last-child) .step-no::after { content: ""; position: absolute; top: 4rem; bottom: -8rem; left: 50%; width: 1px; background: var(--line); }
.step-no { position: relative; display: grid; place-items: center; align-self: start; width: 4.5rem; height: 4.5rem; border: 1px solid var(--pine); border-radius: 50%; font-family: var(--display); font-size: 1.25rem; background: var(--paper-warm); }

.npc-showcase { position: relative; height: auto; min-height: 0; isolation: isolate; overflow: visible; background: #e6f0f1; }
.npc-showcase::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(237,247,247,.08), transparent 38%, transparent 78%, rgba(237,247,247,.08)); pointer-events: none; }
.npc-showcase-canvas { position: relative; z-index: 1; width: 100%; isolation: isolate; overflow: visible; box-shadow: 0 0 80px rgba(69,124,130,.12); }
.npc-showcase-stage { position: relative; height: 802px; isolation: isolate; overflow: hidden; }
.npc-showcase-background { position: absolute; z-index: -3; inset: 0; background: url("assets/npc-showcase-background-clean-v1.png") center top / cover no-repeat; transition: filter .55s ease, opacity .35s ease; }
.npc-showcase-video { --companion-scale: 1.9; --companion-x: 0%; --companion-y: .25%; position: absolute; z-index: -2; top: 0; right: 28.56%; width: 39.97%; height: 100%; display: grid; place-items: center; overflow: visible; mix-blend-mode: multiply; pointer-events: none; }
.npc-showcase-video video, .npc-showcase-video .companion-static { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; filter: saturate(.9) contrast(1.03) brightness(1.01); transform: scale(var(--companion-scale)) translate(var(--companion-x), var(--companion-y)); transform-origin: 51% 50%; -webkit-mask-image: radial-gradient(ellipse 49% 64% at 51% 50%, #000 68%, rgba(0,0,0,.98) 82%, transparent 100%); mask-image: radial-gradient(ellipse 49% 64% at 51% 50%, #000 68%, rgba(0,0,0,.98) 82%, transparent 100%); transition: opacity .42s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.npc-showcase-video .companion-static { opacity: 1; }
.npc-showcase-video video { opacity: 0; }
.npc-showcase-video.is-playing .companion-static { opacity: 0; }
.npc-showcase-video.is-playing video { opacity: 1; }
.companion-copy { position: absolute; z-index: 3; top: 116px; left: 24.6%; width: 350px; color: var(--companion-accent, #347f88); text-align: center; text-shadow: 0 1px rgba(255,255,255,.72); transition: opacity .25s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
.companion-rank { margin: 0 0 2rem; font-family: var(--display); font-size: 1.02rem; letter-spacing: .16em; }
.companion-copy h2 { margin: 0; color: var(--companion-accent, #2f8791); font-family: var(--display); font-size: clamp(4.7rem, 5.3cqw, 6.7rem); font-weight: 500; line-height: .96; letter-spacing: .06em; white-space: nowrap; }
.companion-traits { margin: 1.6rem 0 1.25rem; font-family: var(--display); font-size: 1.2rem; letter-spacing: .16em; }
.companion-bio { width: 92%; margin: 0 auto; font-size: .9rem; line-height: 1.9; letter-spacing: .08em; }
.companion-facts { display: grid; gap: .72rem; width: 76%; margin: 2rem auto 0; text-align: left; }
.companion-facts div { display: grid; grid-template-columns: 2.15rem 1fr; gap: .75rem; }
.companion-facts dt { color: rgba(47,135,145,.76); font-size: .72rem; letter-spacing: .14em; }
.companion-facts dd { margin: 0; font-size: .78rem; line-height: 1.55; letter-spacing: .06em; }
.companion-quote { position: absolute; z-index: 3; top: 265px; right: 14.2%; max-height: 330px; margin: 0; color: var(--companion-accent, #347f88); font-family: var(--display); font-size: 1rem; line-height: 1.75; letter-spacing: .12em; text-shadow: 0 1px rgba(255,255,255,.8); writing-mode: vertical-rl; }
.companion-emblem { position: absolute; z-index: 3; top: 72px; right: 14.3%; display: grid; place-items: center; width: 104px; aspect-ratio: 1; color: rgba(64,146,154,.7); border: 1px solid rgba(64,146,154,.38); border-radius: 50%; background: radial-gradient(circle, rgba(245,253,253,.42), transparent 68%); box-shadow: inset 0 0 0 7px rgba(105,178,184,.07); }
.companion-emblem::before, .companion-emblem::after { content: ""; position: absolute; background: currentColor; opacity: .38; }
.companion-emblem::before { width: 1px; height: 132%; }
.companion-emblem::after { width: 132%; height: 1px; }
.companion-emblem span { font-family: var(--display); font-size: 1.1rem; letter-spacing: .18em; writing-mode: vertical-rl; }
.npc-showcase-stage.is-changing .companion-copy, .npc-showcase-stage.is-changing .companion-quote { opacity: 0; transform: translateY(8px); }
.npc-showcase-stage.is-changing .npc-showcase-video { opacity: .3; }
.npc-showcase .npc-axis { z-index: 8; top: 0; color: var(--pine); background: var(--spirit); border-color: var(--paper-warm); }
.companion-roster { position: absolute; z-index: 6; right: 0; bottom: 0; left: 0; display: flex; flex-direction: row; align-items: center; gap: 1.15rem; width: auto; min-height: 88px; padding: .55rem clamp(.75rem, 2cqw, 2rem); border-top: 1px solid rgba(67,155,164,.32); background: linear-gradient(90deg, rgba(241,250,250,.72), rgba(241,250,250,.26) 35%, transparent 72%); backdrop-filter: blur(5px); }
.companion-roster p { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; margin: 0; color: #285f68; white-space: nowrap; transform: none; }
.companion-roster strong { font-family: var(--display); font-size: .92rem; font-weight: 500; letter-spacing: .16em; }
.companion-roster p span { color: rgba(40,95,104,.62); font-size: .56rem; letter-spacing: .12em; }
.companion-roster > div { display: flex; flex-direction: row; align-items: center; gap: .8rem; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.companion-roster > div::-webkit-scrollbar { display: none; width: 0; height: 0; }
.companion-card { position: relative; flex: 0 0 auto; width: clamp(62px, 4.8cqw, 82px); aspect-ratio: 1; padding: 0; overflow: hidden; color: #245761; border: 2px solid #172626; border-radius: 50%; background: rgba(245,252,252,.82); cursor: pointer; touch-action: manipulation; box-shadow: 0 10px 28px rgba(35,79,88,.14); transition: transform .25s ease, box-shadow .25s ease; }
.companion-card:hover { transform: translateX(4px); }
.companion-card.is-active { border-color: #172626; box-shadow: 0 0 0 4px #55b8c1, 0 0 0 8px rgba(112,205,213,.2), 0 12px 30px rgba(35,79,88,.2); }
.companion-card.is-placeholder { overflow: hidden; opacity: .92; border: 0; border-radius: 50%; background: transparent; cursor: pointer; filter: none; box-shadow: none; clip-path: circle(50% at 50% 50%); }
.companion-card.is-placeholder:hover { transform: translateY(-3px); filter: brightness(1.05); }
.companion-card.is-placeholder:active { transform: translateY(0) scale(.92); }
.companion-card.is-placeholder img { border-radius: 50%; transform: scale(1.15); }
.companion-card.is-placeholder[data-companion-id="coming-more"] img { border-radius: 0; clip-path: circle(31% at 50% 48%); transform: none; }
.companion-card.is-placeholder.is-feedback { animation: companion-placeholder-feedback .46s ease-out; }
@keyframes companion-placeholder-feedback { 0% { transform: scale(1); filter: brightness(1); } 35% { transform: scale(.88); filter: brightness(1.2) drop-shadow(0 0 8px rgba(85,184,193,.72)); } 100% { transform: scale(1); filter: brightness(1); } }
.companion-card img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.companion-card span { position: absolute; right: 3px; bottom: 3px; left: 3px; padding: .07rem .16rem; color: #245761; border: 1px solid rgba(47,135,147,.3); background: rgba(238,250,250,.92); font-family: var(--display); font-size: .55rem; text-align: center; }

/* NPC v75: keep one uninterrupted painting behind the character and roster.
   The former extension repeated the lower skirt and created a visible ghost seam. */
.npc-showcase-canvas { height: 898px; overflow: hidden; }
.npc-showcase-stage { height: 898px; }
.npc-showcase-extension { display: none; }
.npc-showcase-video { --companion-y: 1.5%; }
.npc-showcase-video[data-companion-id="lin-xiaoman"] { --companion-scale: 2.36; --companion-x: -1.5%; --companion-y: 5.5%; }
.npc-showcase-video[data-companion-id="pei-zhaoxue"] { --companion-scale: 2.02; --companion-x: -4%; --companion-y: 5%; }
.npc-showcase-video[data-companion-id="gu-changan"] { --companion-scale: 2.12; --companion-x: -3%; --companion-y: 5.5%; }
.companion-roster { z-index: 6; top: 802px; bottom: 0; min-height: 0; border-top: 1px solid rgba(108,163,168,.24); border-bottom: 1px solid rgba(45,105,111,.2); background: linear-gradient(180deg, rgba(202,226,228,.16) 0%, rgba(171,205,209,.32) 46%, rgba(129,174,181,.48) 100%); -webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9); box-shadow: inset 0 1px rgba(246,252,250,.25), inset 0 -1px rgba(48,104,110,.12); }

.world { color: var(--white); background: var(--pine-deep); overflow: visible; }
.world::before { background: rgba(167,245,234,.2); }
.world::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 68% 45%, rgba(99,209,192,.15), transparent 38%); pointer-events: none; }
.world .axis-mark { color: var(--pine); background: var(--spirit); border-color: var(--pine-deep); }
.world-panel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(280px,.8fr) minmax(470px,1.2fr); gap: clamp(2.5rem,6cqw,6rem); align-items: center; width: min(1250px, 100%); margin: 0 auto; }
.world-copy { padding: 1rem; background: var(--pine-deep); }
.world-copy > p { color: rgba(255,255,255,.7); }
.place-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.place-list li { padding: .4rem .7rem; color: var(--spirit); border: 1px solid rgba(167,245,234,.28); font-size: .76rem; letter-spacing: .08em; }
.map-frame { margin: 0; padding: .75rem; background: #24372f; border: 1px solid rgba(167,245,234,.28); box-shadow: 0 30px 90px rgba(0,0,0,.3); transform: rotate(1deg); }
.map-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.map-frame figcaption { display: flex; justify-content: space-between; padding: .7rem .25rem 0; color: rgba(255,255,255,.55); font-family: var(--display); font-size: .78rem; letter-spacing: .08em; }

.scenes { background: #d6ddc2; }
.scene-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1rem,3cqw,2.5rem); width: min(1180px,100%); margin: 0 auto; }
.scene-card { margin: 0; padding: .75rem; background: rgba(248,249,231,.88); border: 1px solid rgba(21,37,32,.18); box-shadow: 0 25px 65px rgba(31,54,45,.12); }
.scene-card img { width: 100%; object-fit: cover; background: linear-gradient(#c6eee9, #e3efd2); }
.scene-gameplay img { aspect-ratio: 16 / 9; }
.scene-art img { aspect-ratio: 1 / 1; object-position: center 42%; }
.scene-card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .9rem .45rem .25rem; }
.scene-card strong { font-family: var(--display); font-size: 1.35rem; }
.scene-card span { color: #657168; font-size: .8rem; }
.scene-art { transform: translateY(4rem); }

.follow { position: relative; padding: clamp(7rem,13cqw,12rem) 1.25rem; color: white; background: linear-gradient(rgba(12,31,29,.7),rgba(12,31,29,.86)), url("assets/title-background.png") center 60%/cover fixed; text-align: center; }
.follow-inner { width: min(1040px, 100%); margin: 0 auto; }
.follow-inner > p:not(.section-label) { width: min(760px, 100%); margin-right: auto; margin-left: auto; color: rgba(255,255,255,.75); }
html[lang="zh-CN"] .follow h2 { font-size: clamp(1.55rem, 5cqw, 4.5rem); white-space: nowrap; }
.status-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; margin: 2.2rem 0; font-size: .82rem; }
.status-strip span { display: flex; align-items: center; gap: .6rem; }
.status-strip i { display: inline-block; box-shadow: none; }
.status-strip i.done { background: var(--jade); }

footer { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 2rem clamp(1rem,5cqw,4rem); color: rgba(255,255,255,.65); background: #091d1d; font-size: .76rem; }
.footer-brand { color: white; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s ease, transform .65s ease; }
.reveal.in-view { opacity: 1; transform: none; }
@keyframes arrive { from { opacity: .4; transform: scale(1.08); } to { opacity: 1; transform: scale(1.015); } }

@media (max-width: 0px) {
  .site-header { padding: .8rem 1rem; }
  .brand-logo { width: 2.35rem; height: 2.35rem; }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; align-items: stretch; padding: 1rem; background: rgba(16,43,43,.97); }
  .site-nav.open { display: grid; }
  .site-nav a { padding: .65rem; }
  .language-switcher { width: 100%; justify-content: space-between; padding: .55rem .7rem; }
  .language-switcher select { width: 100%; max-width: none; }
  .hero-copy { padding-left: 1.25rem; }
  .hero-title-wrap { align-items: flex-start; flex-direction: column-reverse; gap: .6rem; }
  .hero-kicker { display: none; }
  .hero h1 { font-size: clamp(4.2rem, 23cqw, 7rem); }
  .hero-seal { top: 18%; }
  .story-grid, .path, .world-panel, .scene-grid { grid-template-columns: 1fr; }
  .story-card { min-height: 0; }
  .story { padding-bottom: clamp(5.5rem, 10cqw, 9rem); }
  .desktop-art-scroll { width: calc(100% + 2rem); margin-right: -1rem; margin-left: -1rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(23,59,55,.42) rgba(23,59,55,.08); touch-action: pan-x pan-y; }
  .desktop-art-scroll::after { content: "\5de6\53f3\6ed1\52a8\67e5\770b\5168\666f"; position: sticky; z-index: 12; right: .75rem; bottom: .65rem; float: right; margin-top: -2.3rem; padding: .38rem .72rem; color: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(16,43,43,.76); box-shadow: 0 6px 18px rgba(0,0,0,.16); font-size: .68rem; letter-spacing: .12em; pointer-events: none; }
  .story-art-scroll { margin-top: -2rem; }
  .story-poem-stage { width: 1440px; min-width: 1440px; height: 1100px; margin: 0; overflow: hidden; }
  .story-poem-canvas { width: 1440px; height: 1040px; pointer-events: none; touch-action: pan-x pan-y; cursor: default; }
  .story-eaves-art { top: -2.5rem; width: 1380px; max-width: none; }
  .story-poem-context { top: 368px; right: auto; bottom: auto; left: 1.2%; width: 300px; padding: .72rem .95rem .72rem 1.1rem; text-align: left; }
  .story-poem-context h2 { font-size: 1.7rem; }
  .story-poem-context p { display: block; }
  .story-poem-legend { top: 368px; right: 1.5%; display: grid; }
  .story-poem-controls { top: 994px; right: 1.2%; bottom: auto; left: 1.2%; }
  .story-poem-controls { display: none; }
  .path-copy { position: relative; top: 0; }
  .npc-showcase { height: auto; min-height: 0; }
  .npc-art-scroll { width: 100%; margin-right: 0; margin-left: 0; }
  .npc-showcase-canvas { width: 1600px; min-width: 1600px; }
  .npc-showcase-stage { height: 720px; }
  .npc-showcase-background { background-position: center top; }
  .npc-showcase-video { right: 28.56%; width: 39.97%; }
  .npc-showcase-video { --companion-y: .25%; }
  .companion-roster { right: 0; bottom: 0; left: 0; width: auto; max-width: none; min-height: 88px; flex-direction: row; padding: .55rem 2rem; transform: none; overflow: hidden; }
  .companion-roster p { position: static; flex-direction: column; transform: none; }
  .companion-roster p span { display: inline; }
  .companion-roster > div { flex-direction: row; }
  .companion-card { width: 76px; }
  .map-frame { transform: none; }
  .scene-art { transform: none; }
  footer { flex-direction: column; text-align: center; }
}

html[lang="en"] .hero h1 { font-size: clamp(3.8rem, 9cqw, 7.5rem); letter-spacing: -.06em; }
html[lang="ko"] .hero h1 { letter-spacing: -.05em; }

@media (max-width: 0px) {
  .hero-veil { background: linear-gradient(90deg,rgba(10,27,27,.85),rgba(10,27,27,.18)), linear-gradient(0deg,rgba(10,27,27,.68),transparent); }
  .hero-actions { align-items: stretch; flex-direction: column; width: min(270px,100%); }
  .hero-seal { right: .8rem; }
  .section, .world { padding-left: 1rem; padding-right: 1rem; }
  .section-intro { width: 100%; padding-left: .6rem; padding-right: .6rem; }
  .story-poem-stage { height: 1100px; }
  .path-list li { grid-template-columns: 3.4rem 1fr; gap: 1rem; }
  .step-no { width: 3.4rem; height: 3.4rem; }
  .path-list li:not(:last-child) .step-no::after { top: 3.4rem; }
  .scene-card figcaption { align-items: flex-start; flex-direction: column; }
  .follow { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* v33: quiet usability polish that preserves the fixed-canvas composition. */
.site-nav > a[aria-current="location"] { color: var(--spirit); }
.site-nav > a[aria-current="location"]::after { width: 100%; }
.site-nav > a[aria-current="location"].nav-status {
  color: var(--pine-deep);
  border-color: var(--spirit);
  background: var(--spirit);
}
.site-nav > a[aria-current="location"].nav-status i { box-shadow: 0 0 0 4px rgba(16,43,43,.12); }
.button:focus-visible,
.reservation-button:focus-visible,
.story-poem-controls button:focus-visible,
.companion-card:focus-visible {
  outline: 3px solid var(--spirit);
  outline-offset: 4px;
}

/* Story v44: align the ink gate behind the poem and clip it to the complete Story page. */
.story {
  isolation: isolate;
  overflow: hidden;
}
.story-poem-stage::after {
  content: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.story::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("assets/story-ink-gate-v1.webp") calc(50% + 50px) calc(60% - 300px) / 204% auto no-repeat;
  opacity: .58;
  filter: brightness(.75) contrast(1.75) grayscale(.1) sepia(.14);
  mix-blend-mode: multiply;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}
.story-poem-stage::before { border-bottom: 0; }
.story-poem-controls { border-top: 0; }
.path {
  isolation: auto;
  overflow: visible;
  background: var(--paper-warm);
}
.path::before {
  content: none;
}
.path-copy,
.path-list,
.step-no { background: var(--paper-warm); }

/* Story v45: keep the section seal inside its clip and let restrained qi drift through the open paper. */
.story {
  overflow: visible;
  scroll-margin-top: 6.75rem;
}
.story > .axis-mark {
  top: 0;
  transform: translate(-50%,-50%);
}
.story-aura {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.story-aura i {
  position: absolute;
  display: block;
  width: 22rem;
  height: 7rem;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(66,132,108,.26), rgba(96,153,128,.11) 36%, transparent 72%),
    linear-gradient(100deg, transparent 12%, rgba(112,164,138,.18) 48%, transparent 84%);
  filter: blur(13px);
  opacity: .44;
  transform: translate3d(0,0,0) rotate(-5deg) scaleX(1.08);
  animation: story-qi-drift 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.story-aura i::after {
  content: "";
  position: absolute;
  inset: 42% 8% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(58,124,103,.32), transparent);
  box-shadow: 0 8px 14px rgba(82,143,119,.17);
}
.story-aura i:nth-child(1) { top: 8%; left: 1.5%; animation-duration: 23s; }
.story-aura i:nth-child(2) { top: 17%; right: -3%; width: 26rem; animation-delay: -9s; animation-duration: 27s; }
.story-aura i:nth-child(3) { top: 43%; left: -7%; width: 25rem; animation-delay: -15s; animation-duration: 25s; }
.story-aura i:nth-child(4) { top: 49%; right: -6%; width: 24rem; animation-delay: -5s; animation-duration: 22s; }
.story-aura i:nth-child(5) { bottom: 8%; left: 4%; width: 29rem; animation-delay: -12s; animation-duration: 29s; }
.story-aura i:nth-child(6) { right: 7%; bottom: 3%; width: 27rem; animation-delay: -18s; animation-duration: 31s; }

@keyframes story-qi-drift {
  0% { opacity: .28; transform: translate3d(-1.8rem,.8rem,0) rotate(-6deg) scaleX(1.02); }
  48% { opacity: .52; }
  100% { opacity: .34; transform: translate3d(2.2rem,-1.25rem,0) rotate(4deg) scaleX(1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .story-aura i { animation: none; opacity: .2; }
}

/* Story v47: lift the ink gate and dissolve its lower edge into the paper. */
.story::after {
  background-position: calc(50% + 50px) calc(54% - 8.5rem - 150px);
  background-size: 224% auto;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 69%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.26) 93%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 69%, rgba(0,0,0,.72) 82%, rgba(0,0,0,.26) 93%, transparent 100%);
}

/* Story v68: the downward-opening roof shadow uses a feathered alpha silhouette,
   so its sloping sides dissolve into the paper instead of ending on a hard clip. */
.story-poem-stage::before {
  inset: 18.5rem 6.5% 1.15rem;
  border: 0;
  clip-path: none;
  background:
    linear-gradient(90deg,
      rgba(8, 10, 9, 0) 0%,
      rgba(8, 10, 9, .055) 10%,
      rgba(8, 10, 9, .11) 50%,
      rgba(8, 10, 9, .055) 90%,
      rgba(8, 10, 9, 0) 100%),
    linear-gradient(180deg,
      rgba(12, 13, 11, .32) 0%,
      rgba(12, 13, 11, .17) 42%,
      rgba(12, 13, 11, .055) 74%,
      rgba(12, 13, 11, 0) 100%);
  box-shadow: none;
  filter: drop-shadow(0 24px 30px rgba(10, 11, 9, .1));
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='fade' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='.48' stop-color='white' stop-opacity='.9'/%3E%3Cstop offset='.8' stop-color='white' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='soft' x='-8%25' y='-5%25' width='116%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='22 10'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M130 0H870L1000 1000H0Z' fill='url(%23fade)' filter='url(%23soft)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='fade' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='white' stop-opacity='1'/%3E%3Cstop offset='.48' stop-color='white' stop-opacity='.9'/%3E%3Cstop offset='.8' stop-color='white' stop-opacity='.42'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='soft' x='-8%25' y='-5%25' width='116%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='22 10'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M130 0H870L1000 1000H0Z' fill='url(%23fade)' filter='url(%23soft)'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
  mix-blend-mode: multiply;
  opacity: .82;
}

/* v57: one material language across the site — ink, old paper, jade and bronze. */
:root {
  --chapter-paper: #e7e0c7;
  --chapter-paper-light: #f2ecd7;
  --chapter-jade: #4f9e94;
  --chapter-bronze: #a36542;
  --chapter-ink: #173630;
}

/* The chapter seal is the recurring signature between otherwise different art styles. */
.axis-mark {
  width: 4.2rem;
  height: 4.2rem;
  color: #f1ead3;
  border: 4px solid #eee7ce;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.12), transparent 26%),
    #163b37;
  box-shadow:
    0 0 0 1px rgba(38,60,52,.42),
    0 0 0 5px rgba(163,101,66,.12),
    0 8px 20px rgba(31,39,31,.14),
    inset 0 0 0 1px rgba(229,198,145,.26);
  letter-spacing: .14em;
}
.axis-mark::before {
  content: "";
  position: absolute;
  inset: .34rem;
  border: 1px solid rgba(229,198,145,.3);
  border-radius: 50%;
  pointer-events: none;
}
.axis-mark::after {
  content: "";
  position: absolute;
  bottom: -.28rem;
  left: 50%;
  width: .42rem;
  height: .42rem;
  border: 1px solid rgba(238,231,206,.88);
  background: var(--chapter-bronze);
  transform: translateX(-50%) rotate(45deg);
  pointer-events: none;
}
.world .axis-mark,
.npc-showcase .npc-axis {
  color: #f1ead3;
  border-color: #eee7ce;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.12), transparent 26%),
    #163b37;
}

/* Let the cultivation chapter feel like the next leaf of the same sect ledger. */
.path {
  background-color: var(--chapter-paper);
  background-image:
    linear-gradient(90deg, rgba(81,63,37,.055), transparent 10%, transparent 90%, rgba(81,63,37,.055)),
    linear-gradient(180deg, rgba(255,251,230,.42), rgba(196,181,139,.1)),
    url("assets/story-xuan-paper-v1.webp");
  background-size: 100% 100%, 100% 100%, 720px 720px;
  background-blend-mode: multiply, normal, normal;
}
.path-copy,
.path-list,
.step-no {
  background: transparent;
}
.path-copy {
  padding: 1.6rem 1.7rem 1.75rem;
  border-left: 3px solid rgba(163,101,66,.68);
  background: linear-gradient(90deg, rgba(246,240,216,.62), transparent 88%);
}
.path-copy::after {
  content: "";
  display: block;
  width: 5.2rem;
  height: 1px;
  margin-top: 1.45rem;
  background: linear-gradient(90deg, var(--chapter-bronze), transparent);
}
.path .section-label,
.scenes .section-label {
  color: var(--chapter-bronze);
}
.path-list li {
  position: relative;
  border-bottom: 1px solid rgba(67,84,72,.1);
}
.path-list li:last-child { border-bottom: 0; }
.step-no {
  color: var(--chapter-ink);
  border-color: rgba(40,76,67,.68);
  box-shadow:
    inset 0 0 0 5px rgba(244,236,207,.64),
    0 0 0 1px rgba(163,101,66,.15);
}
.path-list li:not(:last-child) .step-no::after {
  background: linear-gradient(rgba(46,82,73,.34), rgba(163,101,66,.18), transparent);
}

/* Carry a restrained paper grain through the dark map chapter. */
.world {
  border-top: 1px solid rgba(229,198,145,.25);
  border-bottom: 1px solid rgba(229,198,145,.18);
  background:
    linear-gradient(115deg, rgba(12,38,36,.98), rgba(16,43,43,.96) 54%, rgba(21,55,48,.96)),
    url("assets/story-xuan-paper-v1.webp");
  background-blend-mode: normal, soft-light;
}
.world::after {
  background:
    radial-gradient(circle at 68% 45%, rgba(99,209,192,.15), transparent 38%),
    linear-gradient(90deg, rgba(163,101,66,.06), transparent 22%, transparent 78%, rgba(163,101,66,.05));
}
.world-copy {
  padding: 2rem 2.2rem;
  border-left: 2px solid rgba(163,101,66,.66);
  background: linear-gradient(90deg, rgba(7,31,29,.46), transparent);
}
.world .section-label { color: #d19a70; }
.place-list li {
  border-color: rgba(229,198,145,.25);
  background: rgba(238,231,206,.035);
}
.map-frame {
  border-color: rgba(229,198,145,.36);
  box-shadow: 0 30px 90px rgba(0,0,0,.3), inset 0 0 0 1px rgba(163,101,66,.16);
}

/* Keep the character artwork intact; only give its chrome the same sect materials. */
.npc-showcase {
  border-top: 1px solid rgba(163,101,66,.2);
  border-bottom: 1px solid rgba(24,62,57,.3);
}
.companion-roster {
  border-top-color: rgba(163,101,66,.25);
  border-bottom-color: rgba(24,62,57,.24);
}
.companion-roster strong { color: var(--chapter-ink); }
.companion-roster p span { color: rgba(87,79,58,.65); }
.companion-card {
  border-color: var(--chapter-ink);
  box-shadow: 0 8px 24px rgba(35,79,88,.12), 0 0 0 1px rgba(163,101,66,.12);
}
.companion-card.is-active {
  border-color: var(--chapter-ink);
  box-shadow: 0 0 0 3px #62c5c6, 0 0 0 6px rgba(163,101,66,.22), 0 12px 30px rgba(35,79,88,.2);
}

/* The gallery becomes a cool-green leaf of the same paper book, not a new template. */
.scenes {
  background-color: #d8ddc5;
  background-image:
    linear-gradient(90deg, rgba(62,82,62,.06), transparent 12%, transparent 88%, rgba(62,82,62,.06)),
    linear-gradient(180deg, rgba(239,238,209,.28), rgba(116,144,113,.08)),
    url("assets/story-xuan-paper-v1.webp");
  background-size: 100% 100%, 100% 100%, 720px 720px;
  background-blend-mode: multiply, normal, soft-light;
}
.section-intro {
  background: transparent;
}
.section-intro::before,
.section-intro::after {
  content: "";
  display: block;
  width: 5.5rem;
  height: 1px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(90deg, transparent, rgba(163,101,66,.68), transparent);
}
.section-intro::after { margin: 1.5rem auto 0; }
.scene-card {
  border-color: rgba(54,78,65,.25);
  background: rgba(246,242,218,.78);
  box-shadow: 0 25px 65px rgba(31,54,45,.11), inset 0 0 0 1px rgba(163,101,66,.08);
}
.scene-card figcaption { border-top: 1px solid rgba(163,101,66,.16); }

/* Finish on the same bronze-jade note used at the entrance. */
.follow {
  border-top: 1px solid rgba(229,198,145,.28);
}
.follow .section-label { color: #d9a57b; }
.status-strip i.done { background: #6fd3c3; }
footer { border-top: 1px solid rgba(163,101,66,.32); }

/* v58: a lightweight, scroll-driven curve gallery adapted to the sect journey. */
.curve-gallery {
  position: relative;
  z-index: 1;
  width: min(1500px, 96%);
  height: 760px;
  margin: -1rem auto 0;
  overflow: hidden;
  border-top: 1px solid rgba(43,78,68,.38);
  border-bottom: 1px solid rgba(163,101,66,.25);
  background:
    radial-gradient(ellipse at 50% 36%, rgba(230,243,222,.84), rgba(194,210,184,.38) 44%, transparent 72%),
    linear-gradient(180deg, rgba(244,239,213,.48), rgba(151,178,157,.1));
  box-shadow: inset 0 1px rgba(255,255,255,.54), 0 26px 70px rgba(31,54,45,.1);
  isolation: isolate;
}
.curve-gallery::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 46%;
  left: 50%;
  width: 1420px;
  height: 520px;
  border: 1px solid rgba(54,93,79,.18);
  border-right-color: rgba(163,101,66,.16);
  border-left-color: rgba(163,101,66,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 50px rgba(255,255,255,.025), 0 0 0 100px rgba(32,77,66,.018);
  transform: translate(-50%,-50%) rotate(-6deg);
  pointer-events: none;
}
.curve-gallery::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(216,221,197,.98), transparent 12%, transparent 88%, rgba(216,221,197,.98)),
    linear-gradient(180deg, transparent 72%, rgba(216,221,197,.88));
  pointer-events: none;
}
.curve-gallery-stage {
  position: relative;
  z-index: 2;
  height: 650px;
  overflow: hidden;
  perspective: 1150px;
  perspective-origin: 50% 46%;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
}
.curve-gallery-stage:active { cursor: grabbing; }
.curve-gallery-stage:focus-visible {
  outline: 2px solid rgba(79,158,148,.72);
  outline-offset: -6px;
}
.curve-gallery .curve-card {
  position: absolute;
  top: 47%;
  left: 50%;
  width: 520px;
  height: 330px;
  margin: 0;
  padding: .62rem;
  overflow: hidden;
  border: 1px solid rgba(30,61,53,.34);
  background: rgba(245,241,218,.88);
  box-shadow: 0 24px 70px rgba(20,48,42,.2), inset 0 0 0 1px rgba(163,101,66,.12);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
  pointer-events: none;
}
.curve-gallery .curve-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: .62rem;
  border: 1px solid rgba(229,198,145,.25);
  box-shadow: inset 0 0 28px rgba(13,41,36,.08);
  pointer-events: none;
}
.curve-gallery .curve-card img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
}
.curve-gallery .curve-card figcaption {
  position: absolute;
  z-index: 3;
  right: 1.2rem;
  bottom: 1.1rem;
  left: 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  padding: 1.15rem 1rem .72rem;
  color: #f8f3dc;
  border: 0;
  background: linear-gradient(180deg, transparent, rgba(11,35,32,.82));
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .38s ease, transform .38s ease;
}
.curve-gallery .curve-card figcaption strong {
  color: #fff8df;
  font-size: 1.28rem;
  text-shadow: 0 2px 10px rgba(0,0,0,.34);
}
.curve-gallery .curve-card figcaption span {
  color: rgba(255,248,223,.72);
  font-size: .72rem;
}
.curve-gallery .curve-card.is-active figcaption {
  opacity: 1;
  transform: none;
}
.curve-gallery-hud {
  position: absolute;
  z-index: 9;
  right: 3.2rem;
  bottom: 1.35rem;
  left: 3.2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  pointer-events: none;
}
.curve-gallery-copy {
  display: grid;
  grid-template-columns: auto auto;
  gap: .1rem 1rem;
  align-items: baseline;
  padding-left: 1rem;
  border-left: 2px solid rgba(163,101,66,.66);
}
.curve-gallery-copy > span {
  grid-column: 1 / -1;
  color: var(--chapter-bronze);
  font-family: var(--display);
  font-size: .68rem;
  letter-spacing: .3em;
}
.curve-gallery-copy strong {
  color: var(--chapter-ink);
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: .08em;
}
.curve-gallery-copy p {
  margin: 0;
  color: rgba(48,71,61,.7);
  font-size: .72rem;
  letter-spacing: .08em;
}
.curve-gallery-controls {
  display: flex;
  align-items: center;
  gap: .85rem;
  pointer-events: auto;
}
.curve-gallery-controls button {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: var(--chapter-ink);
  border: 1px solid rgba(31,67,58,.42);
  border-radius: 50%;
  background: rgba(245,240,216,.72);
  font-size: 1rem;
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.curve-gallery-controls button:hover,
.curve-gallery-controls button:focus-visible {
  color: #f5efd8;
  background: var(--chapter-ink);
  transform: translateY(-2px);
}
.curve-gallery-controls span {
  min-width: 4.5rem;
  color: rgba(29,61,53,.72);
  font: .72rem/1 var(--body);
  letter-spacing: .16em;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .curve-gallery .curve-card,
  .curve-gallery .curve-card figcaption { transition: none; }
}

/* v59: 御剑穿云 — a cinematic cultivation-world interpretation of the curve gallery. */
.scenes {
  overflow: hidden;
  padding-top: clamp(6rem, 10cqw, 9rem);
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  color: #eaf9ee;
  background: #061b1d;
}
.scenes::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(89,238,218,.14), transparent 22%),
    radial-gradient(circle at 15% 60%, rgba(44,131,145,.15), transparent 28%),
    linear-gradient(180deg, rgba(2,15,18,.18), rgba(2,16,18,.82));
  pointer-events: none;
}
.scenes .axis-mark {
  z-index: 12;
  color: #e8d8a0;
  background: #08292a;
  border-color: #d6c98e;
  box-shadow: 0 0 0 1px rgba(96,238,221,.3), 0 0 42px rgba(68,221,209,.28);
}
.scenes .section-intro {
  position: relative;
  z-index: 10;
  width: min(960px, 90%);
  margin-bottom: -8.5rem;
  padding-top: 1.8rem;
  color: #effff4;
  text-shadow: 0 5px 28px rgba(0,0,0,.68);
  pointer-events: none;
}
.scenes .section-intro::before,
.scenes .section-intro::after {
  width: 8.5rem;
  background: linear-gradient(90deg, transparent, rgba(218,188,111,.85), transparent);
}
.scenes .section-label {
  color: #78efe1;
  letter-spacing: .42em;
}
.scenes .section-intro h2 {
  font-size: clamp(3rem, 5.6cqw, 5.8rem);
  line-height: 1.05;
}
.curve-gallery {
  width: 100%;
  height: 940px;
  margin: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(3,19,21,.72), rgba(3,20,22,.22) 42%, rgba(2,15,18,.96)),
    radial-gradient(ellipse at 50% 48%, transparent 0 18%, rgba(4,28,30,.08) 46%, rgba(2,13,16,.84) 86%),
    url("assets/title-background.png") center 58% / cover no-repeat;
  box-shadow: inset 0 1px rgba(111,239,223,.15), inset 0 -100px 160px rgba(0,9,12,.76);
}
.curve-gallery::before {
  top: 49%;
  width: 1780px;
  height: 650px;
  border-color: rgba(108,241,220,.28);
  border-right-color: rgba(222,188,102,.16);
  border-left-color: rgba(222,188,102,.16);
  box-shadow:
    0 0 18px rgba(69,230,215,.22),
    0 0 0 70px rgba(96,235,218,.022),
    0 0 0 140px rgba(220,181,91,.016);
  transform: translate(-50%,-50%) rotate(-9deg);
}
.curve-gallery::after {
  z-index: 8;
  background:
    radial-gradient(circle at 50% 48%, transparent 0 34%, rgba(1,14,17,.13) 53%, rgba(1,12,15,.74) 100%),
    linear-gradient(90deg, rgba(1,13,16,.96), transparent 11%, transparent 89%, rgba(1,13,16,.96)),
    linear-gradient(180deg, rgba(2,17,20,.18), transparent 62%, rgba(1,11,14,.96));
}
.curve-gallery-stage {
  height: 820px;
  perspective: 1550px;
  perspective-origin: 50% 43%;
}
.curve-gallery-stage::before,
.curve-gallery-stage::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.curve-gallery-stage::before {
  opacity: .6;
  background-image:
    radial-gradient(circle, rgba(129,255,238,.75) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(233,198,113,.45) 0 1px, transparent 1.5px);
  background-position: 0 0, 43px 71px;
  background-size: 123px 123px, 181px 181px;
  mask-image: radial-gradient(ellipse at 50% 45%, #000 4%, transparent 72%);
  animation: curve-stars 16s linear infinite;
}
.curve-gallery-stage::after {
  background: linear-gradient(113deg, transparent 28%, rgba(119,251,233,.11) 45%, transparent 46% 54%, rgba(224,187,102,.08) 55%, transparent 72%);
  transform: translateX(-12%);
  animation: curve-light-sweep 8s ease-in-out infinite alternate;
}
.curve-celestial-gate {
  position: absolute;
  z-index: 2;
  top: 47%;
  left: 50%;
  width: 710px;
  height: 710px;
  transform: translate(-50%,-50%) rotate(-8deg);
  pointer-events: none;
}
.curve-celestial-gate::before,
.curve-celestial-gate::after,
.curve-celestial-gate i {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.curve-celestial-gate::before {
  inset: 0;
  border: 1px solid rgba(104,240,221,.3);
  box-shadow: inset 0 0 48px rgba(68,231,215,.11), 0 0 60px rgba(68,231,215,.12);
}
.curve-celestial-gate::after {
  inset: 9%;
  border: 1px dashed rgba(220,185,99,.34);
  animation: curve-sigil-spin 28s linear infinite;
}
.curve-celestial-gate i:nth-child(1) { inset: 18%; border: 1px solid rgba(103,231,221,.24); }
.curve-celestial-gate i:nth-child(2) { inset: 31%; border: 1px dashed rgba(225,196,118,.28); animation: curve-sigil-spin 17s linear infinite reverse; }
.curve-celestial-gate i:nth-child(3) { inset: 43%; background: radial-gradient(circle, rgba(116,247,229,.3), transparent 68%); box-shadow: 0 0 90px rgba(92,231,216,.22); }
.curve-spirit-trail {
  position: absolute;
  z-index: 3;
  top: 51%;
  left: 50%;
  width: 1800px;
  height: 520px;
  border: 2px solid transparent;
  border-top-color: rgba(102,237,220,.45);
  border-bottom-color: rgba(218,184,105,.2);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px rgba(81,230,213,.36));
  transform: translate(-50%,-50%) rotate(-9deg);
  opacity: .7;
  pointer-events: none;
}
.curve-gallery .curve-card {
  top: 48%;
  width: 650px;
  height: 410px;
  padding: .52rem;
  border-color: rgba(121,245,226,.34);
  background: #0b2b2b;
  box-shadow:
    0 45px 110px rgba(0,0,0,.58),
    0 0 calc(12px + 42px * var(--curve-focus, 0)) rgba(79,233,215,calc(.08 + .27 * var(--curve-focus, 0))),
    inset 0 0 0 1px rgba(222,188,105,.17);
}
.curve-gallery .curve-card::before {
  inset: .52rem;
  border-color: rgba(228,199,121,.38);
  box-shadow: inset 0 0 45px rgba(3,25,26,.3);
}
.curve-gallery .curve-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: .52rem;
  background: linear-gradient(135deg, rgba(137,255,239,.12), transparent 30% 70%, rgba(229,192,102,.1));
  mix-blend-mode: screen;
  pointer-events: none;
}
.curve-gallery .curve-card img {
  filter: saturate(1.02) contrast(1.08);
}
.curve-gallery .curve-card figcaption {
  right: 1.15rem;
  bottom: 1.05rem;
  left: 1.15rem;
  padding: 4rem 1.25rem 1rem;
  background: linear-gradient(180deg, transparent, rgba(2,21,22,.92));
}
.curve-gallery .curve-card figcaption strong {
  color: #f6e5ad;
  font-size: 1.55rem;
  letter-spacing: .14em;
}
.curve-gallery .curve-card figcaption span { color: rgba(207,255,244,.76); }
.curve-gallery-hud {
  right: 4.5rem;
  bottom: 2.6rem;
  left: 4.5rem;
  align-items: center;
  padding: 1.15rem 1.25rem;
  border-top: 1px solid rgba(107,235,220,.24);
  border-bottom: 1px solid rgba(220,186,105,.14);
  background: linear-gradient(90deg, rgba(2,22,23,.88), rgba(4,30,31,.38) 52%, rgba(2,22,23,.88));
  backdrop-filter: blur(12px);
}
.curve-gallery-copy { border-left-color: rgba(222,186,99,.8); }
.curve-gallery-copy > span { color: #79ebdc; }
.curve-gallery-copy strong { color: #f0dfa8; }
.curve-gallery-copy p { color: rgba(204,246,235,.66); }
.curve-gallery-controls button {
  color: #e9d79c;
  border-color: rgba(219,186,100,.48);
  background: rgba(6,39,39,.8);
  box-shadow: 0 0 20px rgba(71,226,211,.1);
}
.curve-gallery-controls button:hover,
.curve-gallery-controls button:focus-visible {
  color: #062323;
  background: #78eadc;
}
.curve-gallery-controls span { color: rgba(225,199,128,.82); }
@keyframes curve-stars { to { background-position: 123px -123px, -138px 252px; } }
@keyframes curve-light-sweep { to { transform: translateX(12%); opacity: .48; } }
@keyframes curve-sigil-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .curve-gallery-stage::before,
  .curve-gallery-stage::after,
  .curve-celestial-gate::after,
  .curve-celestial-gate i { animation: none !important; }
}

/* v60: 云海无相境 — no reused scenery, only mist, light and floating memory scrolls. */
.scenes {
  min-height: 980px;
  color: #153d3d;
  background:
    radial-gradient(ellipse at 76% 20%, rgba(255,255,255,.92), transparent 28%),
    linear-gradient(145deg, #d7e7df 0%, #eef3e9 48%, #c6ddd7 100%);
}
.scenes::before {
  content: "御影入境";
  position: absolute;
  z-index: 1;
  top: 8rem;
  right: 4.8rem;
  color: rgba(28,85,82,.08);
  font-family: var(--display);
  font-size: 5.8rem;
  letter-spacing: .22em;
  writing-mode: vertical-rl;
  pointer-events: none;
}
.scenes::after {
  background:
    radial-gradient(ellipse at 50% 46%, rgba(255,255,255,.96) 0 14%, rgba(229,241,234,.46) 42%, transparent 70%),
    radial-gradient(ellipse at 10% 72%, rgba(51,118,111,.12), transparent 34%),
    radial-gradient(ellipse at 92% 26%, rgba(80,166,158,.12), transparent 31%);
}
.scenes .axis-mark {
  color: #e9d9a6;
  background: #153f3e;
  border-color: #edf2e5;
  box-shadow: 0 0 0 1px rgba(22,71,67,.32), 0 18px 40px rgba(35,91,84,.18);
}
.scenes .section-intro {
  position: absolute;
  z-index: 11;
  top: 8.2rem;
  left: clamp(3rem, 7cqw, 8rem);
  width: 430px;
  margin: 0;
  padding: 0 0 0 1.7rem;
  color: #153b39;
  border-left: 2px solid rgba(167,112,62,.65);
  text-align: left;
  text-shadow: none;
}
.scenes .section-intro::before,
.scenes .section-intro::after { display: none; }
.scenes .section-label {
  color: #a05e39;
  font-size: .7rem;
  letter-spacing: .48em;
}
.scenes .section-intro h2 {
  margin-top: 1rem;
  color: #153b39;
  font-size: clamp(3.1rem, 4.2cqw, 4.9rem);
  line-height: 1.08;
}
.curve-gallery {
  height: 960px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255,255,255,.98) 0 13%, rgba(235,245,238,.68) 31%, transparent 57%),
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(123,170,160,.1));
  box-shadow: inset 0 1px rgba(255,255,255,.7), inset 0 -70px 110px rgba(62,116,107,.1);
}
.curve-gallery::before {
  top: 50%;
  width: 1840px;
  height: 660px;
  border: 2px solid rgba(35,109,102,.2);
  border-right-color: rgba(168,105,55,.2);
  border-left-color: rgba(168,105,55,.2);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.72),
    0 0 36px rgba(33,123,113,.12),
    0 0 0 76px rgba(65,134,123,.025);
}
.curve-gallery::after {
  background:
    linear-gradient(90deg, rgba(208,229,220,.96), transparent 9%, transparent 91%, rgba(208,229,220,.96)),
    linear-gradient(180deg, rgba(224,238,229,.18), transparent 64%, rgba(193,219,210,.82));
}
.curve-gallery-stage {
  height: 835px;
  perspective: 1700px;
}
.curve-gallery-stage::before {
  opacity: .58;
  background-image:
    radial-gradient(circle, rgba(31,115,106,.42) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(169,111,55,.34) 0 1px, transparent 1.4px);
  mask-image: radial-gradient(ellipse at 50% 45%, #000 3%, transparent 69%);
}
.curve-gallery-stage::after {
  opacity: .7;
  background: linear-gradient(113deg, transparent 31%, rgba(255,255,255,.82) 45%, transparent 46% 54%, rgba(63,144,135,.12) 55%, transparent 70%);
}
.curve-celestial-gate {
  width: 760px;
  height: 760px;
  opacity: .65;
}
.curve-celestial-gate::before {
  border-color: rgba(40,119,111,.23);
  box-shadow: inset 0 0 45px rgba(42,133,123,.06), 0 0 70px rgba(255,255,255,.7);
}
.curve-celestial-gate::after { border-color: rgba(165,103,48,.28); }
.curve-celestial-gate i:nth-child(1) { border-color: rgba(37,120,111,.2); }
.curve-celestial-gate i:nth-child(2) { border-color: rgba(168,108,54,.24); }
.curve-celestial-gate i:nth-child(3) {
  background: radial-gradient(circle, rgba(255,255,255,.9), rgba(114,192,180,.12) 38%, transparent 70%);
  box-shadow: 0 0 110px rgba(255,255,255,.9);
}
.curve-spirit-trail {
  border-top-color: rgba(31,116,107,.36);
  border-bottom-color: rgba(163,101,48,.2);
  filter: drop-shadow(0 0 8px rgba(43,132,121,.16));
  opacity: .6;
}
.curve-gallery .curve-card {
  width: 680px;
  height: 425px;
  border-color: rgba(23,79,74,.32);
  background: rgba(240,246,235,.96);
  box-shadow:
    0 52px 95px rgba(35,77,68,.2),
    0 0 calc(10px + 38px * var(--curve-focus, 0)) rgba(62,147,136,calc(.05 + .16 * var(--curve-focus, 0))),
    inset 0 0 0 1px rgba(163,101,48,.15);
}
.curve-gallery .curve-card::before {
  border-color: rgba(163,103,48,.32);
  box-shadow: inset 0 0 34px rgba(25,75,69,.08);
}
.curve-gallery .curve-card::after {
  background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 30% 70%, rgba(92,164,151,.09));
}
.curve-gallery .curve-card figcaption {
  background: linear-gradient(180deg, transparent, rgba(8,42,40,.88));
}
.curve-gallery .curve-card figcaption strong { color: #f3dfaa; }
.curve-gallery .curve-card figcaption span { color: rgba(226,255,246,.78); }
.curve-gallery-hud {
  right: clamp(3rem, 6cqw, 7rem);
  bottom: 2.2rem;
  left: clamp(3rem, 6cqw, 7rem);
  border-color: rgba(37,101,94,.2);
  background: linear-gradient(90deg, rgba(232,242,234,.92), rgba(246,248,236,.62) 50%, rgba(232,242,234,.92));
  box-shadow: 0 20px 50px rgba(43,92,83,.11), inset 0 1px rgba(255,255,255,.8);
}
.curve-gallery-copy { border-left-color: rgba(161,96,48,.65); }
.curve-gallery-copy > span { color: #9a5a36; }
.curve-gallery-copy strong { color: #153d3a; }
.curve-gallery-copy p { color: rgba(37,73,67,.65); }
.curve-gallery-controls button {
  color: #174b47;
  border-color: rgba(29,92,86,.35);
  background: rgba(244,247,234,.82);
  box-shadow: 0 10px 30px rgba(42,101,92,.1);
}
.curve-gallery-controls button:hover,
.curve-gallery-controls button:focus-visible {
  color: #f4ecd1;
  background: #174d48;
}
.curve-gallery-controls span { color: rgba(110,70,38,.72); }

/* v61 — 独立生成的云海无相境背景与概念级宣传画廊 */
.curve-gallery {
  background:
    linear-gradient(180deg, rgba(236,247,242,.22), rgba(213,235,228,.08) 55%, rgba(177,214,204,.36)),
    radial-gradient(ellipse at 50% 43%, rgba(255,255,255,.56) 0 13%, transparent 54%),
    url("assets/curve-gallery-realm-v1.png") center / cover no-repeat;
  box-shadow:
    inset 0 1px rgba(255,255,255,.78),
    inset 0 -90px 130px rgba(32,91,84,.2);
}
.curve-gallery::after {
  background:
    linear-gradient(90deg, rgba(211,232,224,.78), transparent 7%, transparent 93%, rgba(211,232,224,.78)),
    linear-gradient(180deg, rgba(232,245,239,.04), transparent 66%, rgba(177,210,201,.58));
}
.curve-gallery .curve-card img {
  object-fit: cover;
  object-position: center;
  filter: saturate(1.06) contrast(1.03);
}

/* v62 — 清晰的海报展映层级：章节标题、主画幅、侧预览、控制台 */
.scenes {
  min-height: 1060px;
  padding: 0;
  overflow: visible;
  background:
    linear-gradient(180deg, #dcece5 0%, #edf4ef 20%, #c9e1da 100%);
}
.scenes > .axis-mark {
  z-index: 30;
  top: 0;
  transform: translate(-50%, -50%);
}
.scenes .section-intro {
  top: 5.5rem;
  left: 50%;
  width: min(1080px, 82%);
  padding: 0;
  border: 0;
  text-align: center;
  transform: translateX(-50%);
}
.scenes .section-label {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-size: .72rem;
  letter-spacing: .5em;
}
.scenes .section-label::before,
.scenes .section-label::after {
  content: "";
  width: 5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(151,91,48,.68));
}
.scenes .section-label::after { transform: scaleX(-1); }
.scenes .section-intro h2 {
  max-width: none;
  margin: .75rem auto 0;
  color: #123b39;
  font-size: clamp(2.75rem, 3.5cqw, 4.2rem);
  line-height: 1.08;
  letter-spacing: .08em;
  white-space: nowrap;
}
.scenes .section-intro h2 br { display: none; }
.curve-gallery {
  width: calc(100% - 6rem);
  max-width: 1780px;
  height: 830px;
  margin: 14.5rem auto 0;
  overflow: hidden;
  border: 1px solid rgba(40,101,94,.18);
  border-radius: 1.75rem;
  box-shadow:
    0 38px 90px rgba(28,77,69,.16),
    inset 0 1px rgba(255,255,255,.82),
    inset 0 -90px 130px rgba(32,91,84,.18);
}
.curve-gallery-stage {
  height: 700px;
  perspective: 1900px;
  perspective-origin: 50% 47%;
}
.curve-gallery .curve-card {
  top: 49%;
  width: 720px;
  height: 430px;
  padding: .58rem;
  border-radius: .35rem;
}
.curve-gallery .curve-card::before,
.curve-gallery .curve-card::after { inset: .58rem; }
.curve-gallery .curve-card figcaption {
  right: 1.25rem;
  bottom: 1.15rem;
  left: 1.25rem;
  padding: 4.5rem 1.35rem 1rem;
}
.curve-gallery-hud {
  right: 2.5rem;
  bottom: 1.55rem;
  left: 2.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(38,101,94,.18);
  border-radius: .85rem;
  background: linear-gradient(90deg, rgba(237,246,240,.94), rgba(247,249,238,.72) 50%, rgba(237,246,240,.94));
}
.curve-gallery-copy strong { font-size: 1.35rem; }
.curve-gallery-controls button { width: 2.8rem; height: 2.8rem; }
@media (max-width: 900px) {
  .scenes .section-intro h2 { font-size: 2.35rem; white-space: normal; }
  .scenes .section-intro h2 br { display: initial; }
  .curve-gallery { width: calc(100% - 2rem); }
}

/* v82: keep the gallery chapter mark and title in a real header band. */
.scenes {
  padding-top: 18rem;
}
.scenes > .axis-mark {
  top: 6.75rem;
}
.scenes .section-intro {
  top: 9.25rem;
}
.scenes .curve-gallery {
  margin: 0 auto;
}

/* v83: enlarge the companion typography without changing the stage composition. */
.companion-copy {
  width: 390px;
}
.companion-rank {
  margin-bottom: 1.8rem;
  font-size: 1.22rem;
  letter-spacing: .18em;
}
.companion-copy h2 {
  font-size: clamp(5.2rem, 5.8cqw, 7.25rem);
}
.companion-traits {
  margin: 1.7rem 0 1.35rem;
  font-size: 1.45rem;
  letter-spacing: .18em;
}
.companion-bio {
  width: 94%;
  font-size: 1.18rem;
  line-height: 1.95;
}
.companion-facts {
  width: 82%;
  gap: .82rem;
  margin-top: 2.15rem;
}
.companion-facts div {
  grid-template-columns: 2.5rem 1fr;
  gap: .85rem;
}
.companion-facts dt {
  font-size: .92rem;
}
.companion-facts dd {
  font-size: 1.02rem;
  line-height: 1.6;
}
.companion-quote {
  font-size: 1.2rem;
  line-height: 1.85;
}

/* v85: seat the Great Hall chapter medallion directly on the section seam. */
.scenes > .axis-mark {
  top: 0;
  transform: translate(-50%, -50%);
}

/* v86: lift the gallery chapter copy into the empty header space. */
.scenes .section-intro {
  top: 4.75rem;
}