/* =========================================================
   希安 · Cian — 手机端优先的角色档案站骨架
   钴蓝天空 → 草原；一条细白线串起五个章节
   ========================================================= */

:root{
  --blue:#3A6FDE;
  --blue-hi:#4A80E9;
  --blue-mid:#3569DA;
  --blue-deep:#2754BC;
  --cream:#F5EFDF;
  --gold:#E9C482;
  --ink:#16233F;
  --paper:#F5EFDF;
  --line:rgba(245,239,223,.5);

  --serif:"Noto Serif SC","Songti SC","STSong","SimSun","Source Han Serif SC",serif;
  --script:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --pinyon:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --display:"Playfair Display","Times New Roman",Georgia,serif;
  --sans:"Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --gutter:clamp(22px,6.2vw,28px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
html::-webkit-scrollbar{width:0;height:0}
html.is-loading,html.is-loading body{overflow:hidden;height:100svh}
html,body{overflow-x:hidden;overflow-x:clip}
html.sheet-open,html.sheet-open body{overflow:hidden}
body{
  margin:0;
  min-height:100svh;
  color:var(--cream);
  font-family:var(--serif);
  font-weight:400;
  background-color:#3A6FDE;
  background-image:linear-gradient(180deg,#487DE8 0%,#3A6FDE 16%,#3466D4 38%,#2C5AC4 66%,#2650B4 100%);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--gold);color:var(--ink)}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:1px solid var(--gold);outline-offset:5px}

/* ---------- 颗粒质感（全站 fixed） ---------- */
.grain{
  position:fixed;inset:0;z-index:9600;pointer-events:none;
  background-image:url("assets/grain.png");
  background-size:200px 200px;
  background-repeat:repeat;
  opacity:.13;
  mix-blend-mode:soft-light;
}

/* =========================================================
   加载页
   ========================================================= */
.loader{
  position:fixed;inset:0;z-index:9500;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(120% 95% at 50% 30%,#4A80E9 0%,#3569DA 52%,#2450B8 100%);
  transition:opacity .72s var(--ease),visibility 0s linear .72s;
}
.loader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.loader__stage{
  position:relative;
  width:min(100vw,560px);
  aspect-ratio:375/240;
}
.loader__scene{display:block;width:100%;height:100%;overflow:visible}
.loader__trail{fill:none;stroke:rgba(245,239,223,.17);stroke-width:1;stroke-linecap:round}
.loader__trail-progress{fill:none;stroke:rgba(245,239,223,.8);stroke-width:1.4;stroke-linecap:round}
.loader__dot{fill:rgba(245,239,223,.65)}
.falcon-svg{overflow:visible;filter:drop-shadow(0 10px 18px rgba(10,24,58,.32))}
.loader__tail{
  position:relative;
  margin-top:clamp(6px,1.4vh,14px);
  display:flex;align-items:center;justify-content:center;
}
.loader__caption{
  margin:0;font-family:var(--pinyon);font-weight:400;
  font-size:16px;letter-spacing:.06em;color:rgba(245,239,223,.66);
}
.loader__skip{
  position:absolute;top:calc(var(--safe-t) + 22px);right:var(--gutter);
  padding:12px 6px;
  font-family:var(--sans);font-size:9px;letter-spacing:.32em;
  color:rgba(245,239,223,.55);
  transition:color .3s;
}
.loader__skip:hover{color:var(--cream)}

/* =========================================================
   天空 / 首屏（竖排）
   ========================================================= */
.sky{position:relative;overflow-x:clip}

/* 云 */
.clouds{
  position:fixed;top:0;left:0;right:0;z-index:2;
  height:clamp(150px,26svh,240px);
  pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,0));
  mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,0));
}
.clouds__svg{display:block;width:100%;height:100%;min-width:780px}
.cloud{fill:rgba(245,239,223,.04);stroke:rgba(245,239,223,.15);stroke-width:1}
.clouds__wisp{fill:none;stroke:rgba(245,239,223,.12);stroke-width:1}
.clouds__part{animation:cloudDrift 36s ease-in-out infinite alternate}
.clouds__part--b{animation-duration:48s;animation-delay:-9s}
.clouds__part--c{animation-duration:62s;animation-delay:-22s}
@keyframes cloudDrift{from{transform:translateX(-16px)}to{transform:translateX(16px)}}

.hero{
  position:relative;z-index:3;
  min-height:100vh;min-height:100svh;min-height:100dvh;
  padding:0 var(--gutter);
  overflow:hidden;
}
.hero__glow{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -8%,rgba(168,200,255,.28),rgba(168,200,255,0) 64%),
    radial-gradient(80% 34% at 50% 6%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%);
}
.hero__wrap{
  position:relative;
  width:100%;max-width:620px;margin:0 auto;
  height:100vh;height:100svh;height:100dvh;
  min-height:620px;
}
.hero__eyebrow{
  position:absolute;left:0;top:calc(var(--safe-t) + 8svh);
  margin:0;
  font-family:var(--sans);font-size:9px;letter-spacing:.5em;
  color:rgba(245,239,223,.6);
  z-index:5;
}
.hero__micro{
  position:absolute;left:0;top:calc(var(--safe-t) + 11.4svh);
  display:flex;align-items:center;gap:10px;margin:0;
  font-family:var(--sans);font-size:8px;letter-spacing:.28em;
  color:var(--gold);opacity:.82;
  z-index:5;
}
.hero__micro i{display:block;width:24px;height:1px;background:var(--gold);opacity:.5}

.hero__backword{
  position:absolute;left:-4%;top:17%;z-index:0;
  writing-mode:vertical-rl;
  font-family:var(--display);font-weight:500;
  font-size:clamp(48px,min(18vw,11svh),110px);
  letter-spacing:.02em;line-height:1;
  color:rgba(245,239,223,.13);
  pointer-events:none;user-select:none;
}
.hero__word{
  position:absolute;right:18%;top:11%;z-index:1;
  writing-mode:vertical-rl;
  font-family:var(--display);font-weight:500;
  font-size:clamp(64px,min(26vw,15svh),148px);
  letter-spacing:.01em;line-height:1;
  color:var(--gold);opacity:.95;
  text-shadow:0 10px 30px rgba(20,40,90,.18);
  pointer-events:none;user-select:none;
}
.hero__zh{
  margin:0;
  position:absolute;right:-4%;top:12%;z-index:4;
  writing-mode:vertical-rl;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(64px,min(25vw,15svh),150px);
  line-height:.95;letter-spacing:.04em;
  color:var(--cream);
  text-shadow:0 18px 44px rgba(10,25,64,.25);
}
.hero__figure{
  position:absolute;left:-8%;bottom:-4%;z-index:2;
  height:84svh;width:auto;
  filter:drop-shadow(0 30px 50px rgba(8,20,52,.35));
  pointer-events:none;
}
.hero__note{
  position:absolute;right:4%;top:40%;z-index:4;margin:0;
  writing-mode:vertical-rl;
  font-family:var(--serif);font-weight:400;
  font-size:9px;letter-spacing:.34em;
  color:rgba(245,239,223,.55);
}
.hero__year{
  position:absolute;right:4%;bottom:20%;z-index:4;margin:0;
  writing-mode:vertical-rl;
  font-family:var(--sans);font-size:8px;letter-spacing:.3em;
  color:var(--gold);opacity:.8;
}
.hero__script{
  position:absolute;left:28%;bottom:10%;z-index:4;
  font-family:var(--pinyon);font-size:clamp(54px,16vw,100px);
  line-height:.9;color:#FBF6E8;
  transform:rotate(-4deg);
  text-shadow:0 2px 16px rgba(10,25,64,.3);
}
.hero__scroll{
  position:absolute;right:0;bottom:calc(var(--safe-b) + 24px);
  display:flex;flex-direction:column;align-items:center;gap:11px;
  z-index:5;
}
.hero__scroll-line{
  display:block;width:1px;height:42px;
  background:linear-gradient(to bottom,rgba(245,239,223,0),rgba(245,239,223,.7));
  animation:scrollDrip 3s var(--ease) infinite;
  transform-origin:top;
}
@keyframes scrollDrip{
  0%{transform:scaleY(.2);opacity:0}
  30%{opacity:1}
  100%{transform:scaleY(1);opacity:0}
}
.hero__scroll-txt{
  font-family:var(--sans);font-size:9px;letter-spacing:.36em;text-indent:.36em;
  color:rgba(245,239,223,.66);
}

/* 首屏入场 */
[data-hero]{opacity:0;transform:translateY(26px)}
body.is-ready [data-hero]{
  opacity:1;transform:none;
  transition:opacity 1.15s var(--ease),transform 1.15s var(--ease);
}
body.is-ready [data-hero="1"]{transition-delay:.05s}
body.is-ready [data-hero="2"]{transition-delay:.14s}
body.is-ready [data-hero="3"]{transition-delay:.22s}
body.is-ready [data-hero="4"]{transition-delay:.3s}
body.is-ready [data-hero="5"]{transition-delay:.4s}
body.is-ready [data-hero="6"]{transition-delay:.55s}
body.is-ready [data-hero="7"]{transition-delay:.7s}

/* =========================================================
   那条线
   ========================================================= */
.thread{
  position:absolute;top:0;left:50%;z-index:2;
  width:100%;max-width:520px;height:100%;
  transform:translateX(-50%);
  pointer-events:none;
}
.thread svg{display:block;width:100%;height:100%;overflow:visible}

/* =========================================================
   五章
   ========================================================= */
.journey{position:relative}
.chapter{
  position:relative;
  height:92vh;height:92svh;min-height:600px;
}
.chapter__inner{
  position:relative;height:100%;
  width:100%;max-width:520px;margin:0 auto;
}
.chapter__knot{
  position:absolute;left:74%;top:43%;
  width:1px;height:1px;
}
.chapter--left .chapter__knot{left:26%;right:auto}

/* 章节标题 */
.chapter__entry{
  position:absolute;left:var(--gutter);top:52%;
  z-index:4;
  display:block;
  padding:6px 2px;
  transition:transform .8s var(--ease);
}
.chapter--left .chapter__entry{
  left:auto;right:var(--gutter);text-align:right;
}
.chapter__no{
  display:flex;align-items:center;gap:12px;
  font-family:var(--script);font-style:italic;font-weight:300;
  font-size:15px;letter-spacing:.18em;line-height:1;
  color:var(--gold);
  margin-bottom:14px;
}
.chapter--left .chapter__no{flex-direction:row-reverse}
.chapter__rule{
  display:block;width:30px;height:1px;background:var(--gold);opacity:.55;
  flex:none;
}
.chapter__zh{
  margin:0;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(52px,15.5vw,82px);
  line-height:1.02;letter-spacing:.06em;
  color:var(--cream);
  text-shadow:0 14px 34px rgba(10,25,64,.18);
}
.chapter__en{
  display:block;margin-top:10px;
  font-family:var(--pinyon);font-style:normal;font-weight:400;
  font-size:clamp(24px,6.6vw,34px);
  line-height:1.15;letter-spacing:.01em;
  color:var(--gold);opacity:.95;
}
.chapter__entry:hover .chapter__zh{color:#fffaf0}
.chapter__entry:hover .chapter__rule{width:42px;transition:width .5s var(--ease)}

/* 物件图 */
.chapter__object{
  position:absolute;top:var(--obj-top,14%);right:var(--gutter);
  width:var(--obj-w,54vw);max-width:var(--obj-max,236px);
  margin:0;z-index:3;
}
.chapter--left .chapter__object{right:auto;left:var(--gutter)}
.chapter__float{
  transform:translate3d(0,var(--py,0px),0) rotate(var(--rot,0deg));
  will-change:transform;
}
.chapter__object img{
  width:100%;height:auto;
  filter:drop-shadow(0 24px 30px rgba(8,20,52,.36));
  animation:objectDrift 7.6s ease-in-out infinite;
}
.chapter:nth-of-type(2) .chapter__object img{animation-delay:-1.6s}
.chapter:nth-of-type(3) .chapter__object img{animation-delay:-3.1s}
.chapter:nth-of-type(4) .chapter__object img{animation-delay:-4.4s}
.chapter:nth-of-type(5) .chapter__object img{animation-delay:-2.3s}
@keyframes objectDrift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.chapter__ghost{
  position:absolute;bottom:1.5%;z-index:0;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(150px,48vw,260px);
  line-height:.76;letter-spacing:-.02em;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,239,223,.13);
  pointer-events:none;user-select:none;
}
.chapter--right .chapter__ghost{left:calc(var(--gutter) - .1em)}
.chapter--left .chapter__ghost{right:calc(var(--gutter) - .1em)}

/* 浮现 */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity 1s var(--ease),transform 1s var(--ease);
  transition-delay:var(--obj-delay,0s);
}
.chapter__entry.reveal{transition-delay:.06s}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   页末 · 草原
   ========================================================= */
.meadow{
  position:relative;z-index:1;
  min-height:100vh;min-height:100svh;min-height:100dvh;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.meadow__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 58%;
  z-index:0;
}
.meadow__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,#2955BB 0%,#2A57BD 22%,rgba(43,88,189,.92) 31%,rgba(43,88,189,.74) 39%,rgba(43,88,189,.5) 46%,rgba(43,88,189,.26) 52%,rgba(43,88,189,.08) 57%,rgba(43,88,189,0) 62%),
    linear-gradient(180deg,rgba(10,26,60,0) 72%,rgba(10,28,46,.28) 100%);
}
.meadow__horizon{
  position:absolute;left:0;right:0;top:46%;height:16%;z-index:1;pointer-events:none;
  background:radial-gradient(58% 100% at 50% 50%,rgba(245,239,223,.16),rgba(245,239,223,0) 70%);
  filter:blur(6px);
}
/* 收尾：人物与签名 */
.meadow__end{
  position:absolute;left:8%;bottom:9%;z-index:2;
  height:26svh;margin:0;pointer-events:none;
}
.meadow__end img{
  display:block;height:100%;width:auto;
  filter:drop-shadow(0 16px 26px rgba(10,30,30,.38));
}
.meadow__sign{
  position:absolute;right:11%;bottom:21%;z-index:2;margin:0;
  font-family:var(--pinyon);font-size:clamp(46px,14vw,92px);
  line-height:.9;color:var(--cream);
  transform:rotate(-4deg);
  text-shadow:0 2px 16px rgba(10,25,35,.4),0 12px 34px rgba(10,25,35,.28);
  pointer-events:none;
}
.meadow__vnote{
  position:absolute;right:7%;bottom:39%;z-index:2;margin:0;
  writing-mode:vertical-rl;
  font-family:var(--serif);font-size:9px;letter-spacing:.34em;
  color:rgba(245,239,223,.62);
  pointer-events:none;
}
.closing{
  position:relative;z-index:2;
  width:100%;max-width:520px;margin:0 auto;
  min-height:15svh;
  padding:0 var(--gutter) calc(var(--safe-b) + 18px);
}

/* =========================================================
   索引按钮 / 索引面板
   ========================================================= */
.index-btn{
  position:fixed;z-index:7000;
  top:calc(var(--safe-t) + 16px);right:var(--gutter);
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(245,239,223,.38);
  background:rgba(16,38,92,.34);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:opacity .3s var(--ease),background .3s,border-color .3s;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.index-btn span{display:block;width:15px;height:1px;background:rgba(245,239,223,.9);transition:width .3s var(--ease)}
.index-btn span:last-child{width:9px;margin-right:6px}
.index-btn:hover{background:rgba(16,38,92,.55);border-color:rgba(245,239,223,.75)}
.index-btn:hover span:last-child{width:15px;margin-right:0}

body.index-open .index-btn{opacity:0;pointer-events:none}
html.index-open,html.index-open body{overflow:hidden}

.index{
  position:fixed;inset:0;z-index:9200;
  background:radial-gradient(120% 90% at 50% 18%,#2E60CC 0%,#214FBB 55%,#1B45A6 100%);
  opacity:0;visibility:hidden;
  overflow-y:auto;overscroll-behavior:contain;
  transition:opacity .55s var(--ease),visibility 0s linear .55s;
}
.index.is-open{opacity:1;visibility:visible;transition:opacity .55s var(--ease),visibility 0s}
.index__inner{
  min-height:100vh;min-height:100svh;
  width:100%;max-width:520px;margin:0 auto;
  padding:calc(var(--safe-t) + 13svh) var(--gutter) calc(var(--safe-b) + 9svh);
  display:flex;flex-direction:column;justify-content:center;
}
.index__eyebrow{
  margin:0 0 28px;
  font-family:var(--sans);font-size:9px;letter-spacing:.46em;
  color:var(--gold);opacity:.85;
}
.index__list{border-top:1px solid rgba(245,239,223,.16)}
.index__item{
  display:grid;grid-template-columns:32px 1fr auto;align-items:baseline;gap:10px;
  padding:17px 0;border-bottom:1px solid rgba(245,239,223,.16);
  color:var(--cream);text-decoration:none;
  transition:padding-left .35s var(--ease),color .35s;
}
.index__item .n{font-family:var(--script);font-style:italic;font-size:13px;letter-spacing:.1em;color:var(--gold)}
.index__item .t{font-family:var(--serif);font-weight:900;font-size:clamp(24px,7vw,32px);letter-spacing:.08em}
.index__item .e{font-family:var(--pinyon);font-size:23px;color:rgba(245,239,223,.58);white-space:nowrap}
.index__item:hover{padding-left:8px;color:#fffaf0}
.index__foot{margin:34px 0 0;font-family:var(--sans);font-size:8px;letter-spacing:.34em;color:rgba(245,239,223,.4)}
.index__close{
  position:fixed;z-index:2;
  top:calc(var(--safe-t) + 16px);right:var(--gutter);
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(245,239,223,.4);
  display:flex;align-items:center;justify-content:center;
}
.index__close span{position:absolute;width:13px;height:1px;background:var(--cream)}
.index__close span:first-child{transform:rotate(45deg)}
.index__close span:last-child{transform:rotate(-45deg)}

/* =========================================================
   日记 · 时间轴
   ========================================================= */
.timeline{
  list-style:none;margin:2svh 0 0;padding:0;
  position:relative;
}
.timeline::before{
  content:"";position:absolute;left:5px;top:8px;bottom:12px;
  width:1px;background:rgba(22,35,63,.16);
}
.timeline__item{
  position:relative;
  padding:0 0 34px 34px;
}
.timeline__item::before{
  content:"";position:absolute;left:2px;top:9px;
  width:7px;height:7px;border:1px solid rgba(22,35,63,.4);
  border-radius:50%;background:var(--paper);
}
.timeline__item:last-child{padding-bottom:0}
.timeline__time{
  display:block;
  font-family:var(--script);font-style:italic;font-size:14px;letter-spacing:.12em;
  color:#9a7b45;
}
.timeline__title{
  margin:6px 0 4px;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(19px,5.2vw,23px);letter-spacing:.06em;
  color:var(--ink);
}
.timeline__en{
  margin:0;
  font-family:var(--pinyon);font-size:20px;line-height:1.3;
  color:#7c86a0;
}

/* =========================================================
   画廊 · 叠卡 / 散开
   ========================================================= */
.gallery{position:relative;min-height:60svh}
.gallery__deck{
  position:relative;height:62svh;min-height:420px;
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;user-select:none;
}
.gallery__card{
  position:absolute;
  width:min(72vw,300px);aspect-ratio:3/4;
  padding:9px;background:#fbf7ec;
  border:1px solid rgba(22,35,63,.12);
  box-shadow:0 18px 40px rgba(20,30,50,.18);
  transition:transform .5s var(--ease),opacity .5s var(--ease);
  will-change:transform;
  margin:0;
}
.gallery__card img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__hint{
  position:absolute;left:0;right:0;bottom:-6px;
  margin:0;text-align:center;
  font-family:var(--sans);font-size:9px;letter-spacing:.3em;
  color:rgba(22,35,63,.42);
}
.gallery__scatter-btn{
  display:block;margin:26px auto 0;
  padding:9px 18px;
  font-family:var(--sans);font-size:9px;letter-spacing:.3em;
  color:#7c86a0;border:1px solid rgba(22,35,63,.2);border-radius:999px;
  transition:color .3s,border-color .3s;
}
.gallery__scatter-btn:hover{color:var(--ink);border-color:rgba(22,35,63,.5)}

.gallery__stage{
  position:fixed;inset:0;z-index:8700;
  background:var(--paper);
  opacity:0;visibility:hidden;
  overflow:hidden;touch-action:none;
  transition:opacity .5s var(--ease),visibility 0s linear .5s;
}
.gallery__stage.is-open{opacity:1;visibility:visible;transition:opacity .5s var(--ease),visibility 0s}
.gallery__plane{
  position:absolute;left:0;top:0;
  transform-origin:0 0;will-change:transform;
}
.gallery__stage .gallery__card{transition:none}
.gallery__back,.gallery__tip{
  position:fixed;z-index:2;font-family:var(--sans);font-size:9px;letter-spacing:.28em;
  color:#6b7891;
}
.gallery__back{
  top:calc(var(--safe-t) + 16px);right:var(--gutter);
  padding:10px 14px;border:1px solid rgba(22,35,63,.22);border-radius:999px;
  background:rgba(245,239,223,.86);
}
.gallery__tip{
  left:50%;bottom:calc(var(--safe-b) + 18px);transform:translateX(-50%);
  color:rgba(22,35,63,.4);white-space:nowrap;
}

.gallery__lightbox{
  position:fixed;inset:0;z-index:9100;
  background:rgba(9,19,42,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility 0s linear .4s;
}
.gallery__lightbox.is-open{opacity:1;visibility:visible;transition:opacity .4s var(--ease),visibility 0s}
.gallery__lightbox img{max-width:92vw;max-height:84svh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.gallery__lb-close{
  position:absolute;top:calc(var(--safe-t) + 16px);right:var(--gutter);
  padding:10px 14px;border:1px solid rgba(245,239,223,.4);border-radius:999px;
  font-family:var(--sans);font-size:9px;letter-spacing:.28em;color:var(--cream);
}

/* =========================================================
   详情页（空白文本页）
   ========================================================= */
.sheet{
  position:fixed;inset:0;z-index:8500;
  background:var(--paper);
  color:var(--ink);
  transform:translate3d(100%,0,0);
  visibility:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transition:transform .62s var(--ease),visibility 0s linear .62s;
}
.sheet.is-open{
  transform:translate3d(0,0,0);
  visibility:visible;
  transition:transform .62s var(--ease),visibility 0s;
}
.sheet__bar{
  position:sticky;top:0;z-index:2;
  width:100%;max-width:520px;margin:0 auto;
  padding:calc(var(--safe-t) + 16px) var(--gutter) 12px;
  background:linear-gradient(180deg,var(--paper) 62%,rgba(245,239,223,0));
}
.sheet__back{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 2px;
  font-family:var(--sans);font-size:11px;letter-spacing:.3em;
  color:#6b7891;
  transition:color .3s;
}
.sheet__back:hover{color:var(--ink)}
.sheet__arrow{font-family:var(--sans);font-size:14px;letter-spacing:0}
.sheet__inner{
  width:100%;max-width:520px;margin:0 auto;
  padding:3svh var(--gutter) calc(18svh + var(--safe-b));
}
.sheet__title{
  margin:0 0 30px;
  font-family:var(--serif);font-weight:700;
  font-size:clamp(26px,7.4vw,34px);
  letter-spacing:.14em;line-height:1.3;
  color:var(--ink);
  outline:none;
}
.sheet__text{
  min-height:54svh;
  font-family:var(--serif);font-weight:400;
  font-size:16px;line-height:2.1;
  color:#2a3550;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}

/* =========================================================
   桌面：居中窄栏 + 大留白
   ========================================================= */
@media (min-width:700px){
  .chapter{height:88svh}
  .chapter__zh{font-size:clamp(64px,5.4vw,82px)}
  .hero__sub{font-size:13px}
}
@media (min-width:1100px){
  .chapter__en{font-size:23px}
}

/* =========================================================
   减弱动效
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sheet{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
  [data-hero]{opacity:1;transform:none}
  .hero__scroll-line,.chapter__object img{animation:none}
  .chapter__float{transform:rotate(var(--rot,0deg))}
  .thread{display:none}
}

/* 隐藏内部滚动条 */
.sheet,.index{scrollbar-width:none}
.sheet::-webkit-scrollbar,.index::-webkit-scrollbar{width:0;height:0}

/* =========================================================
   暗夜模式（偏灰 · 星空）
   ========================================================= */
.theme-btn{
  position:fixed;z-index:7000;
  top:calc(var(--safe-t) + 16px);
  right:calc(var(--gutter) + 50px);
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(245,239,223,.38);
  background:rgba(16,38,92,.34);
  display:flex;align-items:center;justify-content:center;
  color:rgba(245,239,223,.85);
  transition:background .3s,border-color .3s,color .3s;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.theme-btn svg{width:16px;height:16px;display:block}
.theme-btn svg.theme-btn__sun{display:none}
html[data-theme="night"] .theme-btn svg.theme-btn__sun{display:block}
html[data-theme="night"] .theme-btn svg.theme-btn__moon{display:none}
.theme-btn:hover{border-color:rgba(245,239,223,.75)}
body.index-open .theme-btn{opacity:0;pointer-events:none}

.stars{
  position:fixed;inset:0;z-index:1;
  pointer-events:none;display:none;overflow:hidden;
}
html[data-theme="night"] .stars{display:block}
.stars__field{position:absolute;inset:0;width:100%;height:100%}
.stars__dots circle{fill:rgba(245,239,223,.42)}
.stars__moon{
  position:absolute;top:13%;left:7%;
  width:clamp(70px,16vw,132px);height:auto;opacity:.92;
  filter:drop-shadow(0 0 24px rgba(220,230,255,.18));
}
.stars__cross{
  position:absolute;height:auto;
  fill:rgba(245,239,223,.68);
  animation:twinkle 7.5s ease-in-out infinite;
}
.stars__cross--1{top:24%;left:14%;width:clamp(14px,3.2vw,24px)}
.stars__cross--2{top:37%;right:21%;width:clamp(10px,2.4vw,18px);animation-delay:-2.6s}
.stars__cross--3{top:13%;left:54%;width:clamp(8px,1.9vw,14px);animation-delay:-5s}
@keyframes twinkle{0%,100%{opacity:.4}50%{opacity:.95}}

html[data-theme="night"]{
  --paper:#171B23;
  --ink:#EDE7D8;
}
html[data-theme="night"] body{
  background-color:#0F131A;
  background-image:linear-gradient(180deg,#1C2230 0%,#171C26 18%,#141922 42%,#11151D 70%,#0C0F15 100%);
  color:#EDE7D8;
}
html[data-theme="night"] .clouds{display:none}
html[data-theme="night"] .hero__glow{
  background:
    radial-gradient(120% 70% at 50% -8%,rgba(120,150,210,.16),rgba(120,150,210,0) 64%),
    radial-gradient(60% 42% at 78% 4%,rgba(210,220,255,.06),rgba(210,220,255,0) 70%);
}
html[data-theme="night"] .hero__zh{text-shadow:0 18px 44px rgba(0,0,0,.5)}
html[data-theme="night"] .hero__frame img{filter:brightness(.82) saturate(.9)}
html[data-theme="night"] .hero__figure{filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) brightness(.88)}
html[data-theme="night"] .hero__frame{
  border-color:rgba(245,239,223,.26);
  background:rgba(255,255,255,.02);
  box-shadow:0 26px 60px rgba(0,0,0,.55);
}
html[data-theme="night"] .chapter__ghost{-webkit-text-stroke-color:rgba(245,239,223,.08)}
html[data-theme="night"] .chapter__object img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)) brightness(.92)}
html[data-theme="night"] .thread svg{opacity:.85}
html[data-theme="night"] .meadow__img{filter:brightness(.4) saturate(.66) contrast(1.02)}
html[data-theme="night"] .meadow__veil{
  background:
    linear-gradient(180deg,#12161E 0%,#131822 22%,rgba(19,24,34,.92) 31%,rgba(19,24,34,.74) 39%,rgba(19,24,34,.5) 46%,rgba(19,24,34,.26) 52%,rgba(19,24,34,.08) 57%,rgba(19,24,34,0) 62%),
    linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.42) 100%);
}
html[data-theme="night"] .meadow__end img{filter:drop-shadow(0 16px 26px rgba(0,0,0,.5)) brightness(.82)}
html[data-theme="night"] .meadow__sign{color:rgba(237,231,216,.9)}
html[data-theme="night"] .meadow__vnote{color:rgba(237,231,216,.5)}
html[data-theme="night"] .meadow__horizon{background:radial-gradient(58% 100% at 50% 50%,rgba(170,195,235,.1),rgba(170,195,235,0) 70%)}
html[data-theme="night"] .loader{background:radial-gradient(120% 95% at 50% 30%,#242B39 0%,#171C26 55%,#0E1218 100%)}
html[data-theme="night"] .index{background:radial-gradient(120% 90% at 50% 18%,#232A38 0%,#171C26 55%,#0E1218 100%)}
html[data-theme="night"] .sheet{background:var(--paper);color:var(--ink)}
html[data-theme="night"] .sheet__bar{background:linear-gradient(180deg,var(--paper) 62%,rgba(23,27,35,0))}
html[data-theme="night"] .sheet__back{color:rgba(237,231,216,.55)}
html[data-theme="night"] .sheet__back:hover{color:var(--ink)}
html[data-theme="night"] .sheet__title{color:var(--ink)}
html[data-theme="night"] .sheet__text{color:rgba(237,231,216,.8)}
html[data-theme="night"] .timeline::before{background:rgba(237,231,216,.16)}
html[data-theme="night"] .timeline__item::before{border-color:rgba(237,231,216,.42);background:var(--paper)}
html[data-theme="night"] .timeline__time{color:#C7A96C}
html[data-theme="night"] .timeline__title{color:var(--ink)}
html[data-theme="night"] .timeline__en{color:rgba(237,231,216,.45)}
html[data-theme="night"] .gallery__stage{background:var(--paper)}
html[data-theme="night"] .gallery__hint{color:rgba(237,231,216,.42)}
html[data-theme="night"] .gallery__scatter-btn{color:rgba(237,231,216,.6);border-color:rgba(237,231,216,.22)}
html[data-theme="night"] .gallery__scatter-btn:hover{color:var(--cream);border-color:rgba(237,231,216,.5)}
html[data-theme="night"] .gallery__back{background:rgba(23,27,35,.9);border-color:rgba(237,231,216,.24);color:rgba(237,231,216,.75)}
html[data-theme="night"] .gallery__tip{color:rgba(237,231,216,.38)}
html[data-theme="night"] .gallery__lightbox{background:rgba(4,7,11,.96)}
html[data-theme="night"] .index-btn{background:rgba(10,14,22,.45);border-color:rgba(245,239,223,.3)}
html[data-theme="night"] .theme-btn{background:rgba(10,14,22,.45);border-color:rgba(245,239,223,.3)}
html[data-theme="night"] .footer-tip{color:rgba(237,231,216,.4)}