@property --accent{syntax:"<color>";inherits:true;initial-value:#6ea8ff}
:root{
  --bg:#05070d; --ink:#e4ebf5; --muted:#8390a6; --faint:#4c5669;
  --line:rgba(220,230,245,.1); --line-2:rgba(220,230,245,.2);
  --gold:#6ea8ff; --accent:#6ea8ff;
  --mh:#45d0c8; --w3:#6f7dff; --tof:#4fb8ff; --ro:#a58cff; --wed:#a9cbff;
  --display:"Cormorant Garamond","Noto Serif TC",serif;
  --serif:"Noto Serif TC","Songti TC",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --r:6px;
  transition:--accent 1.2s var(--ease);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.9;letter-spacing:.02em;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#000}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;z-index:2}
main{position:relative;z-index:2}
@media(max-width:640px){.wrap{padding:0 20px}}

/* ===== 背景層：星空、暗角、底紋、游標光 ===== */
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 50% 45%,transparent 30%,rgba(0,0,0,.75))}
body::before{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor-glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;z-index:1;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 10%,transparent),transparent 62%);will-change:transform}
.progress{position:fixed;top:0;left:0;height:1px;width:100%;z-index:80;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);box-shadow:0 0 8px var(--accent)}
@media(hover:none){.cursor-glow{display:none}}

/* ===== 共用小元件 ===== */
.label{font-family:var(--mono);font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.sec-head{display:flex;align-items:center;gap:18px;margin-bottom:56px;font-family:var(--mono);font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.sec-head .no{color:var(--accent)}
.sec-head .rule{flex:1;height:1px;background:var(--line)}
.section{padding:clamp(90px,12vw,170px) 0 0}

/* ===== 導覽列 ===== */
.site-header{position:fixed;inset:0 0 auto;z-index:60}
.site-header::before{content:"";position:absolute;inset:0;background:rgba(5,7,13,.66);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border-bottom:1px solid var(--line);opacity:0;transition:opacity .6s}
.site-header.solid::before{opacity:1}
.bar{position:relative;max-width:1320px;margin:0 auto;padding:0 32px;height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:baseline;gap:14px;position:relative;z-index:2}
.brand b{font-family:var(--serif);font-weight:600;font-size:1.05rem;letter-spacing:.16em}
.brand small{font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:var(--muted);text-transform:uppercase}
.nav{display:flex;gap:38px}
.nav a{color:var(--muted);font-size:.88rem;letter-spacing:.1em;position:relative;padding:6px 0;display:flex;gap:9px;align-items:baseline;transition:color .4s}
.nav a i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--faint);transition:color .4s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.nav a:hover,.nav a.active{color:var(--ink)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left}
.nav a.active i{color:var(--accent)}
.menu-btn{display:none;position:relative;z-index:2;width:40px;height:40px;background:none;border:0;cursor:pointer;flex-direction:column;justify-content:center;gap:7px;align-items:flex-end}
.menu-btn i{display:block;height:1px;width:26px;background:var(--ink);transition:.5s var(--ease)}
.menu-btn i:last-child{width:16px}
.menu-open .menu-btn i:first-child{transform:translateY(4px) rotate(45deg)}
.menu-open .menu-btn i:last-child{width:26px;transform:translateY(-4px) rotate(-45deg)}
@media(max-width:780px){
  .bar{padding:0 20px;height:64px}
  .brand small{display:none}
  .menu-btn{display:flex}
  .nav{position:fixed;inset:0;height:100vh;background:rgba(5,7,13,.97);flex-direction:column;justify-content:center;padding:0 28px;gap:4px;opacity:0;pointer-events:none;transition:opacity .5s}
  .menu-open .nav{opacity:1;pointer-events:auto}
  .nav a{font-family:var(--serif);font-size:2rem;color:var(--ink);letter-spacing:.12em}
  .nav a::after{display:none}
  .nav a i{font-size:12px}
}

/* ===== 首頁 Hero ===== */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-meta{position:absolute;z-index:3;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:6px;animation:fade 1.4s ease 1.6s both}
.hero-meta b{color:var(--ink);font-weight:400}
.hero-meta.tl{top:118px;left:32px}
.hero-meta.tr{top:118px;right:32px;text-align:right}
.hero-meta.bl{bottom:40px;left:32px}
.hero-meta.br{bottom:40px;right:32px;align-items:flex-end}
.scroll-hint{flex-direction:row!important;align-items:center!important;gap:14px!important}
.scroll-hint i{display:block;width:56px;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;inset:0;background:var(--accent);animation:sweep 2.4s var(--ease) infinite}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(34px);filter:blur(10px)}}

.stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(16px,4vw,72px);width:100%;max-width:1320px;padding:0 32px}
.side{will-change:transform,opacity}
.side .zh{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6vw,5.4rem);letter-spacing:.16em;line-height:1.1;animation:rise 1.6s var(--ease) .9s both}
.side .en{display:block;font-family:var(--display);font-style:italic;font-size:clamp(1rem,1.6vw,1.4rem);color:var(--muted);margin-top:14px;letter-spacing:.02em;animation:rise 1.6s var(--ease) 1.15s both}
.hl{text-align:right}
.hr{text-align:left}

/* 星球與軌道 */
.orbit{--s:min(40vw,460px);width:var(--s);aspect-ratio:1;position:relative;will-change:transform}
.orb{position:absolute;inset:31%;border-radius:50%;
  background:
    radial-gradient(circle at 34% 30%,rgba(235,245,255,.55) 0,rgba(235,245,255,.12) 14%,transparent 30%),
    radial-gradient(circle at 36% 34%,color-mix(in srgb,var(--accent) 75%,#fff) 0%,var(--accent) 28%,color-mix(in srgb,var(--accent) 40%,#000) 64%,#03060d 94%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),0 0 60px 2px color-mix(in srgb,var(--accent) 40%,transparent),0 0 200px 60px color-mix(in srgb,var(--accent) 14%,transparent),inset -22px -28px 60px rgba(0,0,0,.75),inset 3px 3px 12px rgba(255,255,255,.14);
  animation:glowIn 2.4s var(--ease) .2s both,breathe 8s ease-in-out 2.6s infinite}
.orb::before{content:"";position:absolute;inset:0;border-radius:50%;opacity:.5;mix-blend-mode:multiply;
  background:repeating-linear-gradient(-16deg,rgba(0,0,0,.18) 0 2px,transparent 2px 10px);
  -webkit-mask:radial-gradient(circle at 36% 34%,transparent 18%,#000 75%);mask:radial-gradient(circle at 36% 34%,transparent 18%,#000 75%)}
.orb::after{content:"";position:absolute;inset:-16%;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);animation:pulse 8s ease-in-out infinite}
@keyframes glowIn{from{opacity:0;filter:blur(30px) brightness(2.2)}}
@keyframes breathe{50%{transform:scale(1.025)}}
@keyframes pulse{0%,100%{transform:scale(.95);opacity:.6}50%{transform:scale(1.1);opacity:0}}
.ring{position:absolute;z-index:2;border-radius:50%;border:1px solid rgba(220,230,245,.09);
  animation:spin var(--t) linear var(--dl,0s) infinite,fade 1.8s ease calc(.6s + var(--i)*.18s) both}
.ring:nth-of-type(1){inset:21%;--t:28s;--i:0}
.ring:nth-of-type(2){inset:11%;--t:40s;--i:1;animation-direction:reverse,normal}
.ring:nth-of-type(3){inset:1%;--t:56s;--i:2}
.ring:nth-of-type(4){inset:-10%;--t:76s;--i:3;animation-direction:reverse,normal;border-style:dashed;border-color:rgba(220,230,245,.06)}
@keyframes spin{to{transform:rotate(360deg)}}
.planet{position:absolute;top:0;left:50%;width:0;height:0}
.planet a{position:absolute;display:block;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--c);
  box-shadow:0 0 10px 1px var(--c),0 0 34px 6px color-mix(in srgb,var(--c) 35%,transparent);
  animation:spin var(--t) linear var(--dl,0s) infinite reverse;transition:scale .5s var(--ease)}
.ring:nth-of-type(2) .planet a,.ring:nth-of-type(4) .planet a{animation-direction:normal}
.planet a:hover{scale:1.8}
.planet a span{position:absolute;left:20px;top:50%;translate:0 -50%;white-space:nowrap;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--muted);opacity:.7;transition:opacity .4s,color .4s;pointer-events:none}
.planet a:hover span{opacity:1;color:var(--ink)}
.orbit:hover .ring,.orbit:hover .planet a{animation-play-state:paused}
@media(max-width:780px){
  .stage{grid-template-columns:1fr;justify-items:center;gap:0;padding:0 20px}
  .side{text-align:center!important;transform:none!important;opacity:1!important}
  .side .zh{font-size:2.6rem}
  .hl{order:2;margin-top:10px}.hr{order:3;margin-top:6px}
  .side .en{margin-top:4px}
  .orbit{--s:min(78vw,380px);order:1}
  .hero-meta.tl{top:90px;left:20px}
  .hero-meta.br{right:20px;bottom:28px}
  .hero-meta.tr,.hero-meta.bl{display:none}
}

/* ===== 首頁：序章 ===== */
.statement{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(40px,7vw,120px);align-items:end}
.statement h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,4.6vw,3.9rem);line-height:1.35;letter-spacing:.08em}
.statement h2 em{font-style:normal;color:var(--accent)}
.scrub{font-size:clamp(1.05rem,1.45vw,1.22rem);line-height:2.1;color:var(--ink)}
.scrub span{opacity:.16;transition:opacity .5s}
.scrub span.on{opacity:1}
@media(max-width:780px){.statement{grid-template-columns:1fr}}

/* 文字逐字上升 */
.split .ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .ch>span{display:inline-block;transform:translateY(110%);transition:transform 1.3s var(--ease);transition-delay:calc(var(--i)*45ms)}
.split.in .ch>span{transform:none}

/* ===== 目錄列 ===== */
.sweep{position:relative;overflow:hidden}
.sweep::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 75%);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
.sweep:hover::before{transform:scaleY(1)}
.sweep>*{position:relative}
.ar{justify-self:end;font-size:1.15rem;transition:transform .7s var(--ease),color .4s}
.sweep:hover .ar{transform:translateX(4px) rotate(-45deg);color:var(--accent)}

.toc{border-top:1px solid var(--line)}
.toc-row{display:grid;grid-template-columns:70px 1.1fr .9fr 1.3fr 32px;align-items:center;gap:24px;padding:38px 8px;border-bottom:1px solid var(--line)}
.toc-row .n{font-family:var(--mono);font-size:11px;color:var(--muted)}
.toc-row .zh{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);letter-spacing:.1em;line-height:1.3;transition:transform .7s var(--ease)}
.toc-row:hover .zh{transform:translateX(14px)}
.toc-row .en{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--muted)}
.toc-row .d{color:var(--muted);font-size:.9rem}
@media(max-width:780px){.toc-row{grid-template-columns:40px 1fr 24px;padding:28px 4px}.toc-row .en,.toc-row .d{display:none}}

/* ===== 遊戲主視覺（共用） ===== */
.mh{--c:var(--mh);--art:radial-gradient(90% 70% at 25% 85%,rgba(69,208,200,.95),transparent 60%),radial-gradient(70% 60% at 85% 15%,rgba(10,70,92,.9),transparent 65%),linear-gradient(165deg,#06141a,#04080b)}
.w3{--c:var(--w3);--art:radial-gradient(80% 60% at 75% 80%,rgba(111,125,255,.9),transparent 60%),radial-gradient(70% 60% at 15% 15%,rgba(80,88,104,.8),transparent 65%),linear-gradient(170deg,#121317,#08080a)}
.tof{--c:var(--tof);--art:radial-gradient(80% 60% at 50% 25%,rgba(79,184,255,.9),transparent 60%),radial-gradient(80% 60% at 15% 95%,rgba(40,70,150,.8),transparent 65%),linear-gradient(180deg,#081222,#05070c)}
.ro{--c:var(--ro);--art:radial-gradient(80% 60% at 30% 25%,rgba(165,140,255,.9),transparent 60%),radial-gradient(80% 60% at 85% 90%,rgba(50,78,190,.75),transparent 65%),linear-gradient(180deg,#0e0b1f,#06060d)}

.art{position:relative;aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;background:var(--art);isolation:isolate;transition:transform .9s var(--ease),box-shadow .9s var(--ease)}
.art::before{content:"";position:absolute;inset:0;z-index:1;
  background:repeating-radial-gradient(circle at 50% 118%,transparent 0 44px,rgba(255,255,255,.06) 44px 45px)}
.art::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 60%,rgba(0,0,0,.6))}
.glyph{position:absolute;inset:0;z-index:2;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:clamp(7rem,13vw,12rem);line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.4);transition:color 1s var(--ease),transform 1.2s var(--ease)}
.art .roman{position:absolute;top:16px;left:20px;z-index:3;font-family:var(--display);font-style:italic;font-size:1.5rem}
.art .ix{position:absolute;bottom:18px;left:20px;right:20px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.75;display:flex;justify-content:space-between}
.glare{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 45%)}
.tilt:hover .glare{opacity:1}
.tilt:hover .glyph{color:rgba(255,255,255,.08);transform:scale(1.06)}
.tilt:hover{box-shadow:0 40px 90px -40px var(--c)}

.worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.world{display:block}
.world .cap{display:flex;justify-content:space-between;align-items:baseline;padding:18px 2px 0;gap:10px}
.world .cap .zh{font-family:var(--serif);font-size:1.2rem;letter-spacing:.1em}
.world .cap .en{font-family:var(--display);font-style:italic;color:var(--muted);font-size:1.05rem;white-space:nowrap}
@media(max-width:1000px){.worlds{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.worlds{grid-template-columns:1fr}}

/* 跑馬燈 */
.marquee{overflow:hidden;padding:44px 0;margin-top:clamp(90px,12vw,170px);border-block:1px solid var(--line);position:relative;z-index:2;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee .track{display:flex;gap:56px;width:max-content;align-items:center;animation:slide 60s linear infinite}
.marquee span{font-family:var(--display);font-style:italic;font-size:clamp(3rem,7vw,6.2rem);line-height:1.1;color:transparent;-webkit-text-stroke:1px rgba(220,230,245,.3);white-space:nowrap;transition:color .6s}
.marquee span.cjk{font-family:var(--serif);font-style:normal;font-weight:400;letter-spacing:.1em}
.marquee span:hover{color:var(--ink)}
.marquee i{font-style:normal;color:var(--accent);font-size:1.2rem}
@keyframes slide{to{transform:translateX(-50%)}}

/* ===== 內頁標題 ===== */
.page-head{padding:clamp(150px,20vw,230px) 0 clamp(56px,7vw,90px);border-bottom:1px solid var(--line);margin-bottom:clamp(40px,6vw,80px);display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-bottom:30px;display:flex;gap:12px}
.crumb span{color:var(--accent)}
.crumb a:hover{color:var(--ink)}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,9vw,7.6rem);letter-spacing:.12em;line-height:1.05}
.page-head .en{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,2vw,1.65rem);color:var(--muted);margin-top:22px}
.page-head .desc{max-width:300px;color:var(--muted);font-size:.9rem;line-height:2}
@media(max-width:780px){.page-head{grid-template-columns:1fr}}

/* ===== 遊戲頁 ===== */
.feature{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,7vw,110px);align-items:center;padding:clamp(56px,7vw,100px) 0;border-bottom:1px solid var(--line);scroll-margin-top:60px}
.feature:nth-child(even) .art{order:2}
.feature .art{aspect-ratio:4/5}
/* 主視覺由下往上展開；被 clip 的元素偵測不到可見度，所以改由旁邊的文字區觸發 */
.art.clip{clip-path:inset(100% 0 0 0 round var(--r));transition:clip-path 1.6s var(--ease),transform .9s var(--ease),box-shadow .9s var(--ease)}
.feature:has(.body.in) .art.clip{clip-path:inset(0 0 0 0 round var(--r))}
.feature .en{font-family:var(--display);font-style:italic;font-size:1.35rem;color:var(--c)}
.feature h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.3rem,4.2vw,3.6rem);letter-spacing:.12em;line-height:1.2;margin:4px 0 20px}
.feature .tagline{font-size:1.1rem;line-height:2;margin-bottom:36px}
.specs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.specs div{padding:16px 0;border-bottom:1px solid var(--line)}
.specs div:nth-child(odd){padding-right:24px}
.specs dt{font-size:.78rem;letter-spacing:.15em;color:var(--muted)}
.specs dd{margin-top:2px}
.likes{list-style:none;counter-reset:l;margin:14px 0 30px}
.likes li{counter-increment:l;display:flex;gap:18px;padding:6px 0;color:var(--muted)}
.likes li::before{content:"0" counter(l);font-family:var(--mono);font-size:11px;color:var(--c);padding-top:6px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;padding:3px 13px;border:1px solid var(--line-2);border-radius:999px;color:var(--muted)}
.ext{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;font-size:.9rem}
.ext a{border-bottom:1px solid var(--line-2)}
.ext a:hover{border-color:var(--c)}
@media(max-width:780px){.feature{grid-template-columns:1fr}.feature:nth-child(even) .art{order:0}}

/* ===== 人生大事：時間軸 ===== */
.timeline{position:relative;--p:0;--x:220px;padding-top:12px}
.timeline::before,.timeline::after{content:"";position:absolute;left:var(--x);top:0;width:1px}
.timeline::before{bottom:0;background:var(--line)}
.timeline::after{height:calc(var(--p)*100%);background:linear-gradient(var(--gold),var(--accent));box-shadow:0 0 12px var(--accent)}
.event{display:grid;grid-template-columns:var(--x) 1fr;padding-bottom:88px}
.event:last-child{padding-bottom:10px}
.event .date{text-align:right;padding:12px 46px 0 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--faint);transition:color 1s}
.event.in .date{color:var(--ink)}
.event .body{position:relative;padding-left:58px}
.event .body::before{content:"";position:absolute;left:-5px;top:17px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);transition:all 1s var(--ease)}
.event.in .body::before{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 6px rgba(110,168,255,.1),0 0 18px var(--gold)}
.event.pending.in .body::before{background:var(--bg);border-color:var(--line-2);box-shadow:none}
.event.big .body::before{top:52px}
.event.big.in .body::before{background:var(--wed);border-color:var(--wed);box-shadow:0 0 0 7px rgba(169,203,255,.12),0 0 28px var(--wed)}
.event.big .date{padding-top:46px}
.event h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:.08em;line-height:1.4}
.event p{color:var(--muted);max-width:560px;margin-top:8px}
.event.pending h3{color:var(--muted)}
.panel{position:relative;overflow:hidden;padding:clamp(30px,4.5vw,54px);border:1px solid rgba(169,203,255,.26);border-radius:var(--r);
  background:radial-gradient(120% 90% at 100% 0%,rgba(169,203,255,.15),transparent 55%),rgba(255,255,255,.015)}
.panel .label{color:var(--wed)}
.panel h3{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:12px 0 10px;position:relative;z-index:1}
.panel p{position:relative;z-index:1}
.panel .wm{position:absolute;right:-8px;bottom:-54px;font-family:var(--serif);font-weight:700;font-size:clamp(9rem,18vw,15rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(169,203,255,.2);pointer-events:none}
.btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:12px 24px;border:1px solid var(--line-2);border-radius:999px;font-size:.9rem;letter-spacing:.1em;transition:background .5s var(--ease),color .5s var(--ease)}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn span{transition:transform .5s var(--ease)}
.btn:hover span{transform:translateX(5px)}
@media(max-width:780px){
  .timeline{--x:0px}
  .event{grid-template-columns:1fr;padding-bottom:60px}
  .event .date,.event.big .date{text-align:left;padding:0 0 8px 34px}
  .event .body{padding-left:34px}
  .event .body::before,.event.big .body::before{top:-22px}
}

/* ===== 清單列（研究、婚禮連結） ===== */
.list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:110px 1fr auto 32px;gap:28px;align-items:center;padding:28px 8px;border-bottom:1px solid var(--line)}
.row .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted)}
.row .t{font-family:var(--serif);font-size:1.3rem;letter-spacing:.06em;line-height:1.5;transition:transform .7s var(--ease)}
.row:hover .t{transform:translateX(10px)}
.row small{display:block;font-family:var(--sans);color:var(--muted);font-size:.88rem;letter-spacing:.02em;margin-top:4px}
.row .m{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--muted);display:flex;gap:10px;align-items:center;text-transform:uppercase}
.row .m i{width:7px;height:7px;border-radius:50%;background:var(--c,var(--gold));box-shadow:0 0 10px var(--c,var(--gold))}
@media(max-width:780px){.row{grid-template-columns:1fr 24px;gap:6px 16px}.row .n{grid-column:1/-1}.row .m{display:none}}

.filters{display:flex;flex-wrap:wrap;gap:6px 28px;margin-bottom:34px}
.filters button{background:none;border:0;color:var(--muted);font:inherit;font-size:.92rem;letter-spacing:.1em;padding:6px 0;cursor:pointer;position:relative;transition:color .4s}
.filters button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.filters button:hover,.filters button.on{color:var(--ink)}
.filters button.on::after{transform:scaleX(1);transform-origin:left}

/* ===== 婚禮 ===== */
.couple{text-align:right;font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:.14em;line-height:1.3}
.couple em{display:block;font-family:var(--display);font-style:italic;font-size:1.3em;color:var(--wed);letter-spacing:0;margin:2px 0}
@media(max-width:780px){.couple{text-align:left;display:flex;gap:.5em;align-items:baseline}.couple em{display:inline}}
.w-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-block:1px solid var(--line)}
.w-info div{padding:30px 28px;border-left:1px solid var(--line)}
.w-info div:first-child{border-left:0;padding-left:0}
.w-info b{display:block;font-family:var(--serif);font-weight:400;font-size:1.35rem;letter-spacing:.06em;margin-top:6px}

.gallery{columns:3 260px;column-gap:16px}
.gallery figure{break-inside:avoid;margin-bottom:16px;border-radius:var(--r);overflow:hidden;cursor:zoom-in;position:relative;background:rgba(255,255,255,.02);border:1px solid var(--line)}
.gallery img{width:100%;transition:transform 1.2s var(--ease)}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 14px;font-size:.85rem;letter-spacing:.08em;background:linear-gradient(transparent,rgba(0,0,0,.8));transform:translateY(100%);transition:transform .7s var(--ease)}
.gallery figure:hover figcaption{transform:none}
.ph{aspect-ratio:var(--ar,4/5);display:flex;align-items:flex-end;padding:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:rgba(220,230,245,.4);
  background:radial-gradient(90% 70% at 20% 10%,rgba(169,203,255,.14),transparent 60%),radial-gradient(80% 60% at 90% 100%,rgba(50,78,190,.12),transparent 60%),#0a0f1c}
.lightbox{position:fixed;inset:0;background:rgba(5,5,7,.95);display:none;align-items:center;justify-content:center;z-index:100;flex-direction:column;padding:20px}
.lightbox.show{display:flex;animation:fade .4s}
.lightbox img{max-height:80vh;border-radius:4px}
.lightbox p{margin-top:14px;color:var(--muted);font-size:.9rem;letter-spacing:.1em}
.lightbox .x{position:absolute;top:18px;right:26px;font-size:2rem;cursor:pointer;font-weight:200}

/* ===== 鏡廳（婚紗照 3D 相片牆） ===== */
.mirror-hall{position:fixed;inset:0;z-index:95;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:none;cursor:grab;opacity:0;transition:opacity .7s var(--ease);
  background:radial-gradient(70% 45% at 50% var(--yf),rgba(169,203,255,.13),transparent 70%),radial-gradient(120% 80% at 50% 0%,#0a1020,transparent 70%),#03050b}
.mirror-hall.show{opacity:1}
.mirror-hall.drag{cursor:grabbing}
.mh-stage{position:absolute;inset:0}
.mh-scene{position:absolute;inset:0;perspective:var(--p);perspective-origin:50% var(--yf)}
.mh-ring{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% calc(var(--yf) - var(--ch) / 2)}
.mh-card{position:absolute;left:calc(50% - var(--cw) / 2);top:calc(var(--yf) - var(--ch));width:var(--cw);height:var(--ch);border-radius:4px;overflow:hidden;backface-visibility:hidden;
  background:radial-gradient(90% 70% at 25% 15%,rgba(169,203,255,.22),transparent 60%),radial-gradient(80% 60% at 85% 100%,rgba(50,78,190,.2),transparent 60%),#0b1120;
  box-shadow:0 0 0 1px rgba(220,230,245,.16),0 0 70px -12px rgba(169,203,255,.5)}
.mh-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.mh-card span{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:rgba(220,230,245,.55)}
.mh-card img~span{display:none}
/* 倒影只取卡片那一段高度來翻轉，濾鏡運算範圍比較小 */
.mh-reflect{position:absolute;left:0;right:0;top:calc(var(--yf) - var(--ch));height:var(--ch);overflow:hidden;transform-origin:50% 100%;transform:scaleY(-1);opacity:.4;filter:url(#mh-ripple) blur(1.6px);
  -webkit-mask:linear-gradient(to bottom,transparent 15%,rgba(0,0,0,.35) 55%,#000);mask:linear-gradient(to bottom,transparent 15%,rgba(0,0,0,.35) 55%,#000)}
.mh-reflect .mh-scene{bottom:auto;top:calc((var(--yf) - var(--ch)) * -1);height:100vh}
.mh-reflect .mh-card{box-shadow:none}
.mh-floor{position:absolute;left:0;right:0;top:var(--yf);bottom:0;pointer-events:none;background:linear-gradient(rgba(3,5,11,.1),rgba(3,5,11,.6) 40%,#03050b 90%)}
.mh-floor::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(220,230,245,.4),transparent);box-shadow:0 0 24px 2px rgba(169,203,255,.5)}
.mh-head{position:absolute;top:34px;left:40px;z-index:2;pointer-events:none}
.mh-title{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(2.2rem,4.6vw,4rem);line-height:1;letter-spacing:.01em;color:var(--ink);text-shadow:0 0 40px rgba(169,203,255,.35)}
.mh-title i{font-style:normal;color:var(--wed);margin:0 .28em;font-size:.7em;vertical-align:.12em}
.mh-close{position:absolute;top:28px;right:34px;z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:rgba(5,7,13,.4);color:var(--ink);font-size:1.5rem;font-weight:200;cursor:pointer;transition:background .4s,color .4s}
.mh-close:hover{background:var(--ink);color:var(--bg)}
.mh-foot{position:absolute;left:40px;right:40px;bottom:32px;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
/* 鏡廳特效：地平線霧光、正中間那張的光澤、粒子 */
.mh-fx{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}
.mh-fog{position:absolute;left:-15%;right:-15%;top:calc(var(--yf) - 110px);height:220px;pointer-events:none;
  background:radial-gradient(40% 45% at 30% 50%,rgba(169,203,255,.12),transparent 70%),radial-gradient(40% 45% at 70% 50%,rgba(110,168,255,.1),transparent 70%);
  filter:blur(18px);animation:fog 14s ease-in-out infinite alternate}
@keyframes fog{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.mh-ring.main .mh-card{cursor:zoom-in;transition:opacity .25s,box-shadow .6s}
.mh-card::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-130%);
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%)}
.mh-ring.main .mh-card.front{box-shadow:0 0 0 1px rgba(220,230,245,.4),0 0 110px -4px rgba(169,203,255,.8)}
.mh-ring.main .mh-card.front::after{animation:shine 5s ease-in-out 1.2s infinite}
@keyframes shine{0%{transform:translateX(-130%)}35%,100%{transform:translateX(130%)}}

/* 放大檢視 */
.mh-view{position:absolute;inset:0;z-index:10;visibility:hidden;pointer-events:none;cursor:default}
.mh-view.open{visibility:visible;pointer-events:auto}
.mh-view-bg{position:absolute;inset:0;overflow:hidden;background:rgba(3,5,11,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transition:opacity .6s var(--ease);cursor:zoom-out}
.mh-view-bg::before{content:"";position:absolute;inset:-15%;background:var(--vbg) center/cover;filter:blur(70px) saturate(1.4);opacity:.45;transition:background-image .4s}
.mh-view.open .mh-view-bg{opacity:1}
.mh-view:not(.open) .mh-view-bg{transition-delay:.15s}
.mh-view-img{position:fixed;left:0;top:0;object-fit:cover;border-radius:6px;transform-origin:0 0;will-change:transform;opacity:0;touch-action:none;user-select:none;
  box-shadow:0 50px 140px -30px rgba(0,0,0,.9),0 0 0 1px rgba(220,230,245,.22),0 0 140px -20px rgba(169,203,255,.5);
  transition:transform .8s var(--ease),opacity .45s}
.mh-view:not(.open) .mh-view-img{transition:transform .65s var(--ease),opacity .2s .5s}
.mh-nav,.mh-view-close{position:absolute;z-index:2;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:rgba(7,10,20,.45);backdrop-filter:blur(8px);
  color:var(--ink);font-size:1.2rem;cursor:pointer;opacity:0;transition:opacity .5s .3s,background .3s,color .3s,transform .3s}
.mh-view.open .mh-nav,.mh-view.open .mh-view-close{opacity:1}
.mh-view:not(.open) .mh-nav,.mh-view:not(.open) .mh-view-close{transition-delay:0s}
.mh-nav:hover,.mh-view-close:hover{background:var(--ink);color:var(--bg)}
.mh-nav{top:50%;margin-top:-26px}
.mh-nav.prev{left:clamp(14px,4vw,60px)}
.mh-nav.next{right:clamp(14px,4vw,60px)}
.mh-nav.prev:hover{transform:translateX(-3px)}
.mh-nav.next:hover{transform:translateX(3px)}
.mh-view-close{top:24px;right:28px;font-size:1.5rem;font-weight:200}
.mh-view-foot{position:absolute;left:40px;right:40px;bottom:22px;z-index:2;display:flex;justify-content:space-between;gap:16px;pointer-events:none;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--muted);opacity:0;transition:opacity .5s .3s}
.mh-view.open .mh-view-foot{opacity:1}
.mh-view:not(.open) .mh-view-foot{transition-delay:0s}
@media(max-width:640px){.mh-nav{top:auto;bottom:64px;margin:0}.mh-view-foot{left:20px;right:20px}.mh-view-foot span:last-child{display:none}.mh-view-close{right:16px;top:16px}}
@media(prefers-reduced-motion:reduce){.mh-fog{animation:none}}

@media(max-width:640px){.mh-head{left:20px;top:24px}.mh-close{right:18px;top:20px}.mh-foot{left:20px;right:20px}.mh-foot span:last-child{display:none}}

.note{border:1px dashed var(--line-2);border-radius:var(--r);padding:16px 20px;color:var(--muted);font-size:.88rem;margin-top:34px}
code{font-family:var(--mono);color:var(--accent);font-size:.9em}

/* ===== 頁尾 ===== */
.site-footer{position:relative;z-index:2;border-top:1px solid var(--line);margin-top:clamp(110px,14vw,190px)}
.site-footer .big{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(3.2rem,10vw,9rem);line-height:1;letter-spacing:-.01em;padding:clamp(60px,9vw,110px) 0 clamp(40px,6vw,70px)}
.site-footer .big span{color:var(--accent)}
.site-footer .row2{display:flex;justify-content:space-between;gap:16px 30px;flex-wrap:wrap;padding:26px 0 38px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.site-footer .row2 nav{display:flex;gap:24px;flex-wrap:wrap}
.site-footer a:hover{color:var(--ink)}

/* ===== 捲動浮現 ===== */
.reveal{opacity:0;transform:translateY(40px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .art.clip{clip-path:none}
  .split .ch>span{transform:none}
  .scrub span{opacity:1}
}