:root{--ink:#111a16;--bone:#f0eddf;--muted:#b8c3b9;--accent:#d7b67a;--line:rgba(230,235,217,.19);--pad:clamp(24px,5vw,88px);color-scheme:dark;font-family:Onest,"PingFang TC","Noto Sans TC",sans-serif;font-weight:300}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--ink);color:var(--bone);overflow-x:clip}body.exploring{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button:disabled{opacity:.4;cursor:wait}.skip{position:fixed;top:10px;left:10px;padding:12px;background:var(--ink);z-index:30;transform:translateY(-160%)}.skip:focus{transform:none}
#world,#scene,.scrim{position:fixed;inset:0;width:100%;height:100%}#world{z-index:0;overflow:hidden}#scene{display:block;opacity:0;transition:opacity 1s}body.ready #scene{opacity:1}#poster{position:absolute;right:0;top:0;width:75%;height:100%;object-fit:contain;opacity:.55;mix-blend-mode:screen;transition:opacity 1s}body.ready #poster{opacity:0;visibility:hidden}.scrim{z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,19,13,.89) 0%,rgba(8,19,13,.7) 22%,rgba(8,19,13,.04) 64%),linear-gradient(0deg,rgba(8,16,12,.65),transparent 23%,transparent 84%,rgba(8,16,12,.32))}
.nav{position:fixed;z-index:12;top:0;left:0;right:0;padding:30px var(--pad);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(rgba(12,22,16,.8),transparent);gap:25px}.brand{display:flex;align-items:center;gap:13px;font-size:23px;letter-spacing:-.8px;font-weight:400}.brand small{display:block;font-size:8px;letter-spacing:1.7px;margin-top:6px;color:var(--muted)}.brand-icon{display:grid;place-content:center;width:34px;height:40px;position:relative;color:var(--accent);border-left:1px solid var(--accent);font-size:32px;font-weight:300;line-height:1;letter-spacing:-8px;padding-right:9px}.brand-icon span{position:absolute;right:0;top:7px;width:1px;height:30px;background:var(--accent);transform:rotate(28deg)}.nav nav{display:flex;align-items:center;gap:32px;font-size:12px;letter-spacing:1px;color:var(--muted)}.nav nav a:hover,.nav nav a.active{color:var(--bone)}.nav-out{padding-left:28px;border-left:1px solid var(--line)}.nav-out span{margin-left:18px}
#story{position:relative;z-index:2;pointer-events:none}.chapter{height:130svh;min-height:790px;position:relative;display:flex;align-items:center;padding:120px var(--pad)}.chapter.hero{height:100svh;min-height:680px}.chapter.finale{height:110svh}.copy{width:min(470px,38vw);pointer-events:auto;will-change:opacity,transform}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:10px;letter-spacing:2px;line-height:1.8;margin:0 0 31px;font-weight:400}.eyebrow>span{display:block;width:5px;height:5px;background:var(--accent);border-radius:50%;box-shadow:0 0 15px #d7b67a88}h1,h2{font-weight:400;letter-spacing:-.012em;line-height:1.25;margin:0 0 28px;font-size:clamp(40px,4.3vw,66px)}h2{font-size:clamp(36px,3.65vw,56px)}.period{color:var(--accent)}.lead{font-size:clamp(14px,1.1vw,17px);font-weight:300;line-height:1.95;color:var(--muted);margin:0 0 34px;letter-spacing:.03em}.enter{display:inline-flex;align-items:center;gap:46px;padding:13px 0;border-bottom:1px solid rgba(215,182,122,.62);font-size:13px;letter-spacing:1px;transition:color .25s,gap .3s}.enter:hover{color:var(--accent);gap:58px}.enter span{font-size:22px;color:var(--accent)}.micro{color:#9fae9f;font-size:10px;letter-spacing:1.1px;margin-top:35px}.detail{display:flex;align-items:center;gap:16px;margin-top:42px}.detail-line{display:block;width:33px;height:1px;background:var(--accent)}.detail p{font-size:13px;color:var(--bone);line-height:1.7;margin:0}.detail small{display:block;font-size:8px;letter-spacing:1.5px;color:var(--muted);margin-top:4px}.text-link{display:block;width:max-content;font-size:12px;color:var(--muted);margin-top:24px}.text-link:hover{color:var(--bone)}.vertical-note{position:absolute;top:45%;right:var(--pad);writing-mode:vertical-rl;font-size:8px;letter-spacing:2.5px;color:#a8b6a8}
.chapter-rail{position:fixed;right:27px;top:50%;transform:translateY(-50%);z-index:10;display:flex;flex-direction:column;gap:4px}.chapter-rail button{width:33px;height:35px;display:flex;gap:8px;align-items:center;justify-content:flex-end}.chapter-rail i{height:1px;width:7px;background:#849888;transition:width .3s,background .3s}.chapter-rail span{font-size:8px;color:var(--muted);opacity:0}.chapter-rail button[aria-current] i{width:15px;background:var(--accent)}.chapter-rail button[aria-current] span{opacity:1;color:var(--accent)}.scene-caption{position:fixed;z-index:4;bottom:146px;right:var(--pad);display:flex;gap:23px;align-items:center;color:#ccd5c8;font-size:9px;letter-spacing:1.8px}.scene-caption #scene-number{color:var(--accent);font-variant-numeric:tabular-nums}.toolbar{position:fixed;z-index:15;bottom:39px;left:var(--pad);right:var(--pad);display:flex;align-items:center;justify-content:space-between;padding:18px 0 13px;border-top:1px solid var(--line);gap:20px}.scroll-cue{display:flex;gap:13px;align-items:center;font-size:10px;letter-spacing:1px;color:var(--muted)}.scroll-cue>span:first-child{font-size:23px;color:var(--accent)}.toolbar-buttons{display:flex;gap:6px}.toolbar button{border:1px solid transparent;padding:10px 13px;min-height:40px;font-size:11px;letter-spacing:.6px;transition:background .25s,border-color .25s}.toolbar button:hover{border-color:var(--line);background:#1c2a21}.toolbar button[aria-pressed=true]{border-color:#d7b67a66;color:var(--accent);background:#1c2a21}.play-icon{display:inline-block;font-size:17px;vertical-align:-1px;margin-right:8px}.progress{position:fixed;z-index:20;bottom:0;left:0;right:0;height:2px;background:#50674e44}.progress i{display:block;transform-origin:left;transform:scaleX(0);width:100%;height:100%;background:var(--accent)}.concept-note{position:fixed;bottom:15px;left:var(--pad);z-index:4;font-size:8px;letter-spacing:1px;color:#93a394;margin:0}#loading{position:fixed;z-index:20;bottom:18px;right:var(--pad);font-size:10px;letter-spacing:.7px;color:var(--muted);display:flex;gap:9px;align-items:center}#loading.hidden{display:none}.loading-dot{width:4px;height:4px;background:var(--accent);border-radius:50%;animation:breathe 1.1s infinite alternate}#loading.error .loading-dot{animation:none;background:#ff9b79}#retry{color:var(--bone);text-decoration:underline;font-size:11px}#retry[hidden]{display:none}.noscript-note{position:fixed;right:var(--pad);bottom:16px;z-index:20;font-size:11px}.exploring .copy,.exploring .vertical-note,.exploring .chapter-rail,.exploring .scene-caption{opacity:0!important;pointer-events:none}.exploring .scrim{background:linear-gradient(0deg,rgba(8,16,12,.7),transparent 25%,transparent 85%,rgba(8,16,12,.5))}.exploring #scene{touch-action:none}.exploring #world{z-index:3}.exploring .scrim{z-index:4}.copy{transition:opacity .15s}.reduced *{scroll-behavior:auto!important}.reduced .loading-dot{animation:none}@keyframes breathe{to{opacity:.2}}
@media(max-width:900px){:root{--pad:30px}.nav nav{gap:19px}.copy{width:44vw}.nav{padding-top:25px}.chapter-rail{right:9px}.vertical-note{display:none}.scene-caption{bottom:154px}.lead br{display:none}}
@media(max-width:600px){:root{--pad:24px}.nav{padding:22px var(--pad)}.brand{font-size:20px}.brand small{font-size:6px;letter-spacing:1.3px}.brand-icon{width:27px;height:32px;font-size:26px}.nav nav{gap:14px;font-size:11px}.nav nav>a:not(.nav-out){display:none}.nav-out{border:0;padding:0}.nav-out span{margin-left:8px}.chapter,.chapter.hero,.chapter.finale{height:120svh;min-height:680px;padding:110px var(--pad) 150px;align-items:flex-start}.chapter.hero{height:100svh;min-height:700px}.copy{width:100%;max-width:370px}.eyebrow{font-size:8px;letter-spacing:1.5px;margin:0 0 16px}h1,h2{font-size:38px;line-height:1.2;margin-bottom:15px}.lead{font-size:12px;line-height:1.8;margin:0 0 14px;max-width:280px}.lead br{display:block}.enter{font-size:11px;padding:5px 0;gap:30px}.micro{display:none}.detail{margin-top:16px;gap:10px}.detail p{font-size:11px}.detail small{font-size:7px}.scrim{background:linear-gradient(180deg,rgba(8,19,13,.45),rgba(8,19,13,.6) 20%,rgba(8,19,13,.06) 47%,transparent 72%,rgba(8,19,13,.8) 92%)}#poster{width:100%;height:68%;top:29%}.chapter-rail{right:8px;top:59%;gap:0}.chapter-rail button{height:30px}.scene-caption{bottom:143px;font-size:7px;right:var(--pad);gap:12px}.toolbar{bottom:42px;padding:11px 0 4px;align-items:flex-start;gap:4px;flex-direction:column}.scroll-cue{font-size:9px;gap:9px;height:27px}.scroll-cue>span:first-child{font-size:17px}.toolbar-buttons{display:flex;width:100%;gap:3px;justify-content:space-between}.toolbar button{padding:8px 9px;font-size:10px;min-height:35px}.concept-note{font-size:7px;bottom:19px;max-width:145px}#loading{font-size:8px;bottom:19px;max-width:180px;right:20px}.text-link{margin-top:13px;font-size:11px}.exploring .toolbar{background:transparent}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Keep captions legible as pale architecture passes behind the fixed controls. */
.toolbar{background:linear-gradient(0deg,rgba(8,17,12,.9),rgba(8,17,12,.48));backdrop-filter:blur(8px);padding-inline:14px}
.scene-caption{background:rgba(8,17,12,.74);padding:8px 12px;border-left:1px solid var(--accent)}
@media(max-width:600px){h2{font-size:clamp(29px,8.4vw,36px)}}
.nav{background:linear-gradient(180deg,rgba(9,19,13,.98) 0%,rgba(9,19,13,.94) 65%,rgba(9,19,13,0) 100%)}
/* Pedestrian arrival: give the architecture more of the viewport. */
.copy{width:min(400px,32vw)}
h1{font-size:clamp(38px,3.8vw,58px)}
.scrim{background:linear-gradient(90deg,rgba(8,19,13,.80),rgba(8,19,13,.54) 25%,rgba(8,19,13,.05) 55%,transparent 80%),linear-gradient(0deg,rgba(8,16,12,.6),transparent 25%)}
.vertical-note{display:none}
#poster{width:100%;height:100%;top:0;object-fit:cover;mix-blend-mode:normal;opacity:.75}
@media(max-width:600px){
  .copy{width:100%;max-width:330px}
  h1{font-size:34px}.hero .eyebrow{margin-bottom:12px}.hero .lead{max-width:250px}
  .scrim{background:linear-gradient(180deg,rgba(8,19,13,.7),rgba(8,19,13,.58) 24%,rgba(8,19,13,.05) 46%,transparent 75%,rgba(8,19,13,.68) 94%)}
}

.lighting-switch{position:fixed;z-index:16;right:var(--pad);top:108px;display:flex;padding:4px;background:#101e22dd;border:1px solid #d7b67a44;border-radius:24px;backdrop-filter:blur(12px)}
.lighting-switch button{padding:9px 18px;min-height:38px;font-size:12px;border-radius:20px;color:#c7d0c8}
.lighting-switch button[aria-pressed=true]{background:#d7b67a;color:#162019}
@media(max-width:600px){.lighting-switch{top:84px;right:20px}.lighting-switch button{padding:7px 12px;min-height:34px;font-size:11px}.hero .eyebrow{max-width:210px}}
@media(max-width:600px){.chapter,.chapter.hero,.chapter.finale{padding-top:140px}}