/* SILEUS — 電影級沉浸式檔案
   版面：固定鏡頭舞台＋捲動時間軸；黑 65％、深藍 25％、冷銀白 8％、特殊光 2％ */
:root{
  --abyss:#05070D; --midnight:#0B1325; --deep:#172846; --cobalt:#344C7D; --silver:#8296C4; --mist:#D9E1F1; --gold:#E9D8B0;
  --fg:var(--mist); --dim:rgba(217,225,241,.58); --faint:rgba(217,225,241,.32); --hair:rgba(130,150,196,.22);
  --glass:rgba(11,19,37,.55); --glass-strong:rgba(5,7,13,.78);
  --f-brand:'Cormorant Garamond','Bodoni Moda',Georgia,serif;
  --f-en:'Bodoni Moda','Cormorant Garamond',Georgia,serif;
  --f-zh:'Noto Serif SC','Noto Serif TC','Songti SC','STSong',serif;
  --f-body:'Noto Sans SC','Noto Sans TC','PingFang SC','Microsoft YaHei',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--abyss);scroll-snap-type:y proximity;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
html.lock{overflow:hidden;scroll-snap-type:none}
body{background:var(--abyss);color:var(--fg);font-family:var(--f-zh);font-weight:300;font-size:14px;line-height:1.8;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:1px solid var(--silver);outline-offset:3px}
img,video{max-width:100%;display:block}

/* 捲動時間軸（只負責長度與吸附點） */
#track{position:relative;width:100%}
#track .snap{height:100svh;scroll-snap-align:center}
#track .gap{height:60svh}

/* 鏡頭舞台 */
#stage{position:fixed;inset:0;overflow:hidden;z-index:0}
#world{position:absolute;inset:0;width:100%;height:100%;display:block}
.grade{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(120% 80% at 50% 45%,transparent 40%,rgba(5,7,13,.55) 78%,rgba(5,7,13,.92) 100%),
  linear-gradient(180deg,rgba(5,7,13,.5),transparent 18%,transparent 80%,rgba(5,7,13,.7))}
#grain{position:absolute;inset:-50%;pointer-events:none;opacity:.035;background-size:160px 160px;mix-blend-mode:screen}
.flare{position:absolute;left:-20%;right:-20%;top:50%;height:2px;margin-top:-1px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(130,150,196,.0) 20%,rgba(217,225,241,.9) 50%,rgba(130,150,196,0) 80%,transparent);
  box-shadow:0 0 24px 6px rgba(130,150,196,.35);filter:blur(.4px)}
.flare.go{animation:flare 1s var(--ease) forwards}
@keyframes flare{0%{opacity:0;transform:scaleX(.2)}25%{opacity:.85}100%{opacity:0;transform:scaleX(1.3)}}
.bars::before,.bars::after{content:"";position:fixed;left:0;right:0;height:var(--bar,0px);background:#000;z-index:3;transition:height .9s var(--ease);pointer-events:none}
.bars::before{top:0}.bars::after{bottom:0}
.axis{position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,rgba(217,225,241,.14) 15%,rgba(217,225,241,.14) 85%,transparent);pointer-events:none}
.axis i{position:absolute;left:-3px;width:7px;height:7px;background:var(--mist);opacity:.7;top:var(--ax,30%);transition:top .2s linear}
.axis b{position:absolute;left:-5px;width:11px;height:1px;background:var(--mist);opacity:.4}

/* HUD */
.hud{position:fixed;z-index:20;pointer-events:none;font-family:var(--f-mono);font-size:10px;letter-spacing:.22em;color:var(--dim)}
.hud *{pointer-events:auto}
.hud-tl{top:calc(var(--safe-t) + 18px);left:max(18px,var(--safe-l))}
.hud-tl .no{font-family:var(--f-brand);font-style:italic;font-size:15px;letter-spacing:.28em;color:var(--fg)}
.hud-tl .rule{width:46px;height:1px;background:var(--hair);margin:10px 0}
.hud-tl .cur{font-family:var(--f-brand);font-style:italic;font-size:12px;letter-spacing:.24em;color:var(--dim)}
.hud-tr{top:calc(var(--safe-t) + 12px);right:max(10px,var(--safe-r))}
.menu-btn{width:48px;height:44px;display:grid;place-items:center}
.menu-btn span{display:block;width:30px;height:1px;background:var(--fg);position:relative;transition:transform .5s var(--ease),width .5s var(--ease)}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;height:1px;background:var(--fg);transition:transform .5s var(--ease),width .5s var(--ease)}
.menu-btn span::before{top:-7px;width:30px}.menu-btn span::after{top:7px;width:18px;left:12px}
.menu-btn span{width:14px;margin-left:8px}
.menu-open .menu-btn span{width:0}
.menu-open .menu-btn span::before{transform:translate(-8px,7px) rotate(35deg);width:30px}
.menu-open .menu-btn span::after{transform:translate(-20px,-7px) rotate(-35deg);width:30px}

.rail{right:max(6px,var(--safe-r));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}
.rail button{font-family:var(--f-en);font-size:10px;letter-spacing:.12em;color:var(--faint);width:30px;height:34px;display:grid;place-items:center;transition:color .4s}
.rail button.on{color:var(--fg)}
.rail button.on::after{content:"";position:absolute;right:30px;width:10px;height:1px;background:var(--mist)}
.rail i{width:12px;height:1px;background:var(--hair)}

.hud-bl{left:max(18px,var(--safe-l));bottom:calc(var(--safe-b) + 18px);font-size:9px}
.hud-bl .sc{color:var(--fg)}
.hud-br{right:max(14px,var(--safe-r));bottom:calc(var(--safe-b) + 10px)}
.snd{display:flex;align-items:center;gap:8px;padding:10px 6px;font-family:var(--f-mono);font-size:9px;letter-spacing:.22em;color:var(--dim)}
.snd .eq{display:flex;gap:2px;align-items:flex-end;height:10px}
.snd .eq i{width:2px;height:3px;background:var(--mist);opacity:.5}
.sound-on .snd .eq i{animation:eq 1.1s ease-in-out infinite;opacity:.9}
.sound-on .snd .eq i:nth-child(2){animation-delay:-.4s}.sound-on .snd .eq i:nth-child(3){animation-delay:-.8s}
@keyframes eq{0%,100%{height:3px}50%{height:10px}}
.progress{position:fixed;left:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--cobalt),var(--mist));z-index:21;width:calc(var(--p,0)*100%);opacity:.8}

/* 場景文字層 */
#scenes{position:fixed;inset:0;z-index:10;pointer-events:none}
.scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:calc(var(--safe-t) + 92px) max(40px,calc(var(--safe-r) + 40px)) calc(var(--safe-b) + 64px) max(20px,calc(var(--safe-l) + 20px));
  opacity:0;visibility:hidden;will-change:opacity,transform,filter}
.scene.vis{visibility:visible}
.scene.live{pointer-events:auto}
/* 統一輕微斜向透視：像被投影在空間裡的檔案 */
.inner{width:100%;max-width:560px;min-width:0;max-height:100%;display:flex;flex-direction:column;gap:18px;
  transform:perspective(1100px) rotateY(7deg) rotateX(2deg) rotateZ(-1deg);transform-origin:0% 50%}
.s-prologue .inner{transform:perspective(1100px) rotateY(5deg) rotateX(2deg) rotateZ(-1deg);transform-origin:50% 50%}
.tg-head{display:flex;flex-direction:column;gap:8px}
.eyebrow{font-family:var(--f-mono);font-weight:300;font-size:9.5px;letter-spacing:.28em;color:var(--silver);display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:1;max-width:120px;height:1px;background:linear-gradient(90deg,var(--hair),transparent)}
.ch-title{display:flex;flex-direction:column;gap:4px}
.ch-title .en{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(40px,12vw,58px);letter-spacing:.02em;line-height:1;color:#E6ECF7;text-shadow:0 0 28px rgba(130,150,196,.25)}
.ch-title .zh{font-family:var(--f-zh);font-weight:300;font-size:clamp(20px,5.6vw,26px);letter-spacing:.42em;color:rgba(217,225,241,.78)}
.record{font-family:var(--f-mono);font-weight:300;font-size:9.5px;letter-spacing:.24em;color:var(--dim)}
.rv{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.scene.in .rv{opacity:1;transform:none}
.scene.in .rv:nth-child(2){transition-delay:.08s}.scene.in .rv:nth-child(3){transition-delay:.16s}
.scene.in .rv:nth-child(4){transition-delay:.24s}.scene.in .rv:nth-child(5){transition-delay:.32s}.scene.in .rv:nth-child(6){transition-delay:.4s}

/* 按鈕：無外框，毛玻璃＋冷銀字 */
.btn{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:12px 18px;background:rgba(130,150,196,.1);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-family:var(--f-mono);font-size:10px;letter-spacing:.28em;color:var(--fg);
  transition:background .4s,transform .25s var(--ease)}
.btn:hover{background:rgba(130,150,196,.2)}
.btn:active{transform:scale(.96)}
.btn .ar{font-family:var(--f-en);letter-spacing:0;font-size:13px}

/* 序幕 */
.s-prologue .inner{align-items:center;text-align:center;gap:14px}
.brand{font-family:'Bodoni Moda',var(--f-brand);font-style:italic;font-weight:300;font-size:clamp(42px,12.5vw,92px);letter-spacing:.16em;line-height:1;margin-right:-.2em;
  text-shadow:0 0 30px rgba(130,150,196,.35)}
.brand .dot{color:var(--mist)}
.brand-sub{font-family:var(--f-brand);font-style:italic;font-size:12px;letter-spacing:.42em;color:var(--dim);margin-right:-.42em}
.brand-zh{font-family:var(--f-zh);font-weight:300;font-size:13px;letter-spacing:.6em;color:var(--dim);margin-right:-.6em}
.brand-meta{font-family:var(--f-mono);font-size:9px;letter-spacing:.3em;color:var(--faint);margin-top:6px}
.scroll-cue{position:absolute;left:50%;bottom:calc(var(--safe-b) + 40px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--f-brand);font-style:italic;font-size:11px;letter-spacing:.4em;color:var(--dim)}
.scroll-cue svg{animation:cue 2.2s var(--ease-io) infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* 人物 */
.prof{display:grid;grid-template-columns:96px 1fr;gap:18px;align-items:center}
.prof .ph{width:96px;height:96px;border-radius:50%;background-size:cover;background-position:center;filter:grayscale(.35) saturate(.7) contrast(1.05);
  box-shadow:0 0 0 1px rgba(217,225,241,.12),0 18px 40px rgba(0,0,0,.6),0 0 40px rgba(52,76,125,.5)}
.prof .nm{font-family:var(--f-zh);font-weight:300;font-size:24px;letter-spacing:.4em}
.prof .en2{font-family:var(--f-brand);font-style:italic;font-size:14px;letter-spacing:.3em;color:var(--dim)}
.prof .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--silver);margin-top:6px}
.mark{font-family:var(--f-zh);font-weight:300;font-size:13px;letter-spacing:.5em;color:var(--silver)}
.verse{font-family:var(--f-zh);font-weight:300;font-size:15px;line-height:2;color:var(--fg)}
.verse p{opacity:.9}
.quote{font-family:var(--f-brand);font-style:italic;font-size:17px;letter-spacing:.08em;color:var(--dim)}

/* 回憶時間軸 */
.tl{display:flex;flex-direction:column;gap:2px;position:relative;padding-left:18px}
.tl::before{content:"";position:absolute;left:3px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,var(--silver),transparent)}
.tl-it{display:block;padding:8px 0;position:relative;text-align:left;width:100%}
.tl-it::before{content:"";position:absolute;left:-18px;top:50%;width:7px;height:7px;margin-top:-3px;background:var(--abyss);box-shadow:inset 0 0 0 1px var(--mist);transform:rotate(45deg)}
.tl-it .d{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--silver)}
.tl-it .t{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:400;font-size:20px;letter-spacing:.04em;line-height:1.25;color:#E6ECF7}
.tl-it .d{font-weight:300;font-size:9px}

/* 回憶影像編輯（#edit） */
.mem-edit{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-b) + 34px);z-index:25;width:min(92vw,420px);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 14px;
  background:radial-gradient(closest-side,rgba(2,3,7,.92),rgba(2,3,7,.7) 70%,rgba(2,3,7,0));font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--dim)}
.mem-edit .me-t{width:100%;color:var(--fg);letter-spacing:.24em}
.mem-edit .btn{padding:8px 12px;cursor:pointer}
.me-r{display:flex;align-items:center;gap:8px;flex:1 1 150px}
.me-r input{flex:1;accent-color:var(--silver)}
.me-r b{width:22px;font-weight:400;color:var(--fg);font-variant-numeric:tabular-nums}
.me-c{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--silver)}
.tl-it .ds{font-size:12.5px;color:var(--dim);line-height:1.6}
/* 局部暗場 Localized Dark Gradient Overlay：每組文字自帶羽化暗區，隨文字一起浮現、移動、消散 */
/* 整片漸層黑：每一幕一層覆蓋全畫面的連續漸層，以文字欄為中心由深黑過渡到透明，沒有任何邊界或色塊；隨場景一起浮現、消散 */
.tg{position:relative}
.scene::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 85% at var(--gx,42%) 52%,rgba(2,3,7,.9) 0%,rgba(2,3,7,.78) 30%,rgba(4,6,12,.5) 58%,rgba(8,13,23,.18) 82%,rgba(8,13,23,0) 100%),
    linear-gradient(90deg,rgba(2,3,7,.55),rgba(2,3,7,.2) 55%,rgba(2,3,7,0))}
.s-prologue::before{--gx:50%;background:radial-gradient(ellipse 80% 60% at 50% 50%,rgba(2,3,7,.7) 0%,rgba(2,3,7,.45) 40%,rgba(2,3,7,.12) 75%,rgba(2,3,7,0) 100%)}
@media (min-width:760px){.scene::before{--gx:50%}}
.tl-it .th{width:64px;height:40px;background-size:cover;background-position:center;opacity:.8;filter:grayscale(.4)}

/* 封存 */
.peek{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;flex:none;width:100%;max-width:340px;min-width:0}
.peek button{aspect-ratio:3/4;background-size:cover;background-position:center;filter:grayscale(.55) brightness(.75) contrast(1.05);transition:filter .5s,transform .4s var(--ease)}
.peek button:hover{filter:none}
.peek button:active{transform:scale(.96)}
.count{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--dim)}

/* 回廊列表 */
.cor{display:flex;flex-direction:column}
.cor .sec{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.3em;color:var(--silver);padding:10px 0 4px}
.cor button{display:grid;grid-template-columns:30px auto auto;justify-content:start;align-items:center;gap:8px 16px;padding:9px 0;text-align:left;position:relative}
.cor button::after{content:"";position:absolute;left:30px;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(130,150,196,.16),transparent)}
.cor .n{font-family:var(--f-en);font-size:12px;color:var(--silver);letter-spacing:.1em}
.cor .t{font-family:var(--f-zh);font-weight:300;font-size:16px;letter-spacing:.24em}
.cor .pr{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--gold);opacity:.85}
.cor button:hover .t{color:#fff}

/* 對話 */
.dlg{position:relative;min-height:150px}
.dlg .q{width:100%;word-break:break-all;overflow-wrap:anywhere;font-family:var(--f-zh);font-weight:300;font-size:clamp(17px,4.6vw,21px);line-height:1.9;letter-spacing:.06em;position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(10px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.dlg .q.on{opacity:1;transform:none;position:relative}
.dlg .q small{display:block;margin-top:10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--silver)}
.dlg .q .av{font-family:var(--f-zh);font-size:11px;color:var(--dim);margin-right:10px;letter-spacing:.2em}
.dots{display:flex;gap:6px}
.dots button{width:18px;height:18px;display:grid;place-items:center}
.dots button i{width:5px;height:5px;background:var(--faint);transform:rotate(45deg);transition:background .3s}
.dots button.on i{background:var(--mist)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.metrics div{display:flex;flex-direction:column}
.metrics b{font-family:var(--f-en);font-weight:300;font-size:clamp(26px,8vw,36px);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.metrics span{font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;color:var(--dim)}

/* 存檔 */
.sav-q{font-family:var(--f-zh);font-weight:300;font-size:clamp(19px,5.2vw,24px);line-height:1.8;letter-spacing:.12em}
.slots{display:flex;flex-direction:column}
.slots button{display:grid;grid-template-columns:16px 76px 1fr auto;align-items:center;gap:10px;padding:12px 0;text-align:left;position:relative}
.slots button::after{content:"";position:absolute;left:26px;right:0;bottom:0;height:1px;background:linear-gradient(90deg,rgba(130,150,196,.16),transparent)}
.slots .s{font-size:10px;color:var(--silver)}
.slots .l{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--dim)}
.slots .v{font-family:var(--f-en);font-style:italic;font-size:16px;letter-spacing:.06em;min-width:0;overflow-wrap:anywhere}
.slots .c{font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;color:var(--faint)}
.slots button.ok .c{color:var(--gold)}
.rel{display:flex;flex-direction:column;gap:6px}
.rel div{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.24em}
.rel i{height:1px;background:linear-gradient(90deg,var(--hair),rgba(130,150,196,.05))}
.rel span:last-child{color:var(--silver)}
.stamp{font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;color:var(--faint);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}

/* 寄信／終幕 */
.notes{display:flex;flex-direction:column;gap:10px}
.note{padding:4px 0;font-family:var(--f-zh);font-weight:300;font-size:14px;line-height:1.8;white-space:pre-line}
.note small{display:block;font-family:var(--f-mono);font-size:9px;letter-spacing:.24em;color:var(--silver);margin-top:6px}
.paper{display:flex;flex-direction:column;gap:8px;padding:4px 0}
.paper .to{font-family:var(--f-brand);font-style:italic;font-size:17px;letter-spacing:.06em}
.paper input,.paper textarea{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(130,150,196,.2);color:var(--fg);font-family:var(--f-zh);font-size:16px;padding:6px 0;resize:none;outline:none;border-radius:0}
.paper textarea{height:84px;line-height:1.7}
.paper input::placeholder,.paper textarea::placeholder{color:var(--faint)}
.paper .fr{align-self:flex-end;font-family:var(--f-zh);font-size:13px;color:var(--dim)}
.send-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hint{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--silver);opacity:0;transition:opacity .5s}
.hint.on{opacity:1}
.end{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--f-mono);font-size:9px;letter-spacing:.26em;color:var(--faint)}

/* 全螢幕選單 */
.menu{position:fixed;inset:0;z-index:15;background:rgba(5,7,13,.72);-webkit-backdrop-filter:blur(22px) saturate(.9);backdrop-filter:blur(22px) saturate(.9);
  display:flex;align-items:center;padding:calc(var(--safe-t) + 70px) max(28px,var(--safe-r)) calc(var(--safe-b) + 40px) max(28px,var(--safe-l));
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.menu-open .menu{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.menu ol{list-style:none;display:flex;flex-direction:column;gap:4px;width:100%;max-width:520px;margin:0 auto}
.menu li button{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:baseline;width:100%;padding:8px 0;text-align:left;
  opacity:0;transform:translateX(-16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.menu-open .menu li button{opacity:1;transform:none}
.menu .n{font-family:var(--f-mono);font-size:10px;color:var(--silver);letter-spacing:.2em}
.menu .e{font-family:var(--f-en);font-style:italic;font-weight:300;font-size:clamp(24px,7vw,34px);letter-spacing:.12em;line-height:1.2}
.menu .z{font-family:var(--f-zh);font-size:12px;letter-spacing:.3em;color:var(--dim)}
.menu li button.on .e{color:#fff;text-shadow:0 0 20px rgba(130,150,196,.6)}

/* 彈窗：毛玻璃、無外框、點空白關閉 */
.menu-open .rail,.menu-open .hud-bl{opacity:0;pointer-events:none;transition:opacity .4s}
/* 詳情側欄：從左側顯現，右側仍看得到場景；底色是由左至右的漸層黑，沒有卡片邊界 */
.sheet{position:fixed;inset:0;z-index:30;display:flex;justify-content:flex-start;align-items:stretch;
  background:linear-gradient(90deg,rgba(2,3,7,.5),rgba(2,3,7,.22) 55%,rgba(2,3,7,.06));
  opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}
.sheet.on{opacity:1;visibility:visible;transition:opacity .6s var(--ease)}
.sheet .panel{width:min(600px,100%);height:100%;overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(90deg,rgba(2,3,7,.97) 0%,rgba(2,3,7,.93) 62%,rgba(2,3,7,.6) 84%,rgba(2,3,7,0) 100%);
  padding:calc(var(--safe-t) + 74px) 90px calc(var(--safe-b) + 50px) max(28px,calc(var(--safe-l) + 28px));
  opacity:0;filter:blur(6px);transform:translateX(-36px);
  transition:transform .9s var(--ease),opacity .7s var(--ease),filter .7s var(--ease);scrollbar-width:none}
.sheet .panel::-webkit-scrollbar{display:none}
.sheet.on .panel{opacity:1;filter:none;transform:none}
@media (max-width:600px){.sheet .panel{width:86%;padding-right:22px;background:linear-gradient(90deg,rgba(2,3,7,.96),rgba(2,3,7,.9) 72%,rgba(2,3,7,.55) 92%,rgba(2,3,7,0))}}
/* 側欄打開時，背後的場景文字淡到幾乎看不見，讓右側反射玻璃不被文字擋住 */
.sheet-open #scenes{opacity:.08;transition:opacity .6s var(--ease)}
#scenes{transition:opacity .6s var(--ease)}
.sheet.on #sheetBody > *,.sheet.on .rich > *{animation:rise .8s var(--ease) both}
.sheet.on #sheetBody > :nth-child(2){animation-delay:.06s}.sheet.on #sheetBody > :nth-child(3){animation-delay:.12s}.sheet.on #sheetBody > :nth-child(4){animation-delay:.18s}
.sheet.on .rich > :nth-child(1){animation-delay:.2s}.sheet.on .rich > :nth-child(2){animation-delay:.26s}.sheet.on .rich > :nth-child(3){animation-delay:.32s}.sheet.on .rich > :nth-child(4){animation-delay:.38s}.sheet.on .rich > :nth-child(n+5){animation-delay:.44s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.embed{overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.embed.in{opacity:1;transform:none}
.embed iframe{display:block;width:100%;border:0;background:#05070D;filter:grayscale(.2)}
.rich .links a.on{background:rgba(217,225,241,.22);color:#fff}
.x{position:sticky;top:-10px;float:right;width:40px;height:40px;margin:-14px -10px 0 0;display:grid;place-items:center;font-family:var(--f-en);font-size:18px;color:var(--dim);z-index:2}
.panel h3{font-family:var(--f-zh);font-weight:300;font-size:24px;letter-spacing:.3em;margin-bottom:4px}
.panel .meta{font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;color:var(--silver);margin-bottom:18px}
.rich{font-size:14px;line-height:1.9;color:rgba(217,225,241,.86);display:flex;flex-direction:column;gap:14px}
.rich b{color:var(--gold);font-weight:400;font-family:var(--f-mono);font-size:13px}
.rich h4{font-family:var(--f-zh);font-weight:400;font-size:15px;letter-spacing:.3em;color:var(--fg);margin-top:8px}
.rich .safe{font-family:var(--f-zh);font-size:17px;color:#fff;letter-spacing:.12em}
.rich .lead{font-family:var(--f-zh);font-size:16px;letter-spacing:.24em;color:var(--fg)}
.rich .links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rich .links a{text-decoration:none;padding:7px 14px;background:rgba(130,150,196,.14);font-family:var(--f-zh);font-size:13px;letter-spacing:.2em}
.rich .note{background:none;padding:0;font-size:11px;color:var(--dim);backdrop-filter:none;-webkit-backdrop-filter:none}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{padding:4px 10px;background:rgba(130,150,196,.12);font-size:12px;letter-spacing:.12em;color:var(--fg)}
.media{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.media video,.media img{width:100%;background:#000}
.media button{display:block;width:100%}
.letter{font-family:var(--f-zh);font-weight:300;font-size:15.5px;line-height:2.05;letter-spacing:.04em}
.letter p{opacity:0;transform:translateY(8px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.letter p.on{opacity:1;transform:none}
.letter p.gap{height:1.2em}
.letter em,.verse em{font-style:normal;color:#AFC3EE;text-shadow:0 0 14px rgba(130,150,196,.6)}
.letter .to{font-size:14px;color:var(--dim);margin-bottom:14px;opacity:1;transform:none}
.letter .to span{background:rgba(217,225,241,.85);color:transparent;padding:0 4px;letter-spacing:.2em}
.sign{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-top:22px;font-family:var(--f-zh);letter-spacing:.5em;color:var(--dim)}
.sign img{width:38px;opacity:.75;filter:grayscale(1) brightness(1.4)}

/* 相簿 */
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -4px 14px;padding:0 4px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;padding:8px 12px;font-family:var(--f-zh);font-size:13px;letter-spacing:.18em;color:var(--dim);position:relative}
.tabs button.on{color:#fff}
.tabs button.on::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--mist)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
@media (min-width:760px){.grid{grid-template-columns:repeat(4,1fr)}}
.grid button{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--midnight) center/cover no-repeat}
.grid button video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.grid button span{position:absolute;left:6px;bottom:4px;font-family:var(--f-mono);font-size:8.5px;letter-spacing:.14em;color:var(--fg);text-shadow:0 1px 6px #000;z-index:1}
.grid button::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(5,7,13,.7))}
.lb{position:fixed;inset:0;z-index:40;background:rgba(5,7,13,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:calc(var(--safe-t) + 50px) max(10px,var(--safe-r)) calc(var(--safe-b) + 50px) max(10px,var(--safe-l));opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.lb.on{opacity:1;visibility:visible;transition:opacity .4s}
.lb .frame{max-width:min(100%,900px);max-height:100%;overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
.lb .frame img,.lb .frame video{max-height:calc(100svh - 150px);width:auto;margin:0 auto;object-fit:contain}
.lb .cap{font-family:var(--f-mono);font-size:10px;letter-spacing:.24em;color:var(--dim)}
.lb .nav{position:absolute;top:50%;width:48px;height:80px;margin-top:-40px;font-family:var(--f-en);font-size:28px;color:var(--dim)}
.lb .prev{left:max(0px,var(--safe-l))}.lb .next{right:max(0px,var(--safe-r))}
.lb .x{position:absolute;top:calc(var(--safe-t) + 8px);right:max(8px,var(--safe-r));float:none;margin:0}

/* 入場閘門 */
.gate{position:fixed;inset:0;z-index:50;background:radial-gradient(80% 60% at 50% 45%,#0d1730,var(--abyss) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;
  padding:calc(var(--safe-t) + 40px) max(20px,var(--safe-r)) calc(var(--safe-b) + 40px) max(20px,var(--safe-l));transition:opacity 1.6s var(--ease),filter 1.6s var(--ease),transform 1.8s var(--ease)}
.gate.out{opacity:0;filter:blur(12px);transform:scale(1.12);pointer-events:none}
.gate .brand{animation:breathe 5s ease-in-out infinite}
@keyframes breathe{50%{text-shadow:0 0 44px rgba(130,150,196,.6)}}
.gate .row{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:26px}
.gate .btn{align-self:center;padding:14px 26px}
.gate .mute{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.26em;color:var(--dim);padding:10px}
.gate .load{font-family:var(--f-mono);font-size:9px;letter-spacing:.3em;color:var(--faint);margin-top:6px}
.gate .tip{font-family:var(--f-body);font-size:11px;color:var(--faint);letter-spacing:.1em}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 60px);transform:translate(-50%,10px);z-index:60;padding:9px 16px;background:rgba(23,40,70,.8);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;opacity:0;transition:opacity .4s,transform .4s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-height:640px){.inner{gap:12px}.verse{font-size:14px;line-height:1.85}.tl-it{padding:6px 0}.tl-it .th{display:none}.tl-it{grid-template-columns:1fr}}
@media (min-width:900px){.hud-tl{left:40px;top:34px}.scene{padding-left:80px;padding-right:80px}.inner{max-width:600px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.2s!important}}