:root{--white:#f0f0ec;--black:#080909;--muted:#a4a6a2;--line:rgba(255,255,255,.28);--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;--sans:"PingFang SC","Noto Sans CJK SC","Microsoft YaHei",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--black);color:var(--white);font-family:var(--sans)}
button{font:inherit;color:inherit}
.skip-link{position:fixed;top:-70px;left:20px;z-index:100;background:#fff;color:#111;padding:12px 18px}
.skip-link:focus{top:20px}
.opening{position:fixed;inset:0;z-index:300;overflow:hidden;background:transparent;cursor:pointer;pointer-events:auto}
.opening[hidden]{display:none}
.opening-panel{position:absolute;left:0;right:0;height:calc(50% + 1px);z-index:1;background:#020303;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.opening-panel--top{top:0;transform-origin:top;animation:curtain-top 1.15s .85s cubic-bezier(.76,0,.24,1) forwards}
.opening-panel--bottom{bottom:0;transform-origin:bottom;animation:curtain-bottom 1.15s .85s cubic-bezier(.76,0,.24,1) forwards}
@keyframes curtain-top{to{transform:translateY(-100%)}}
@keyframes curtain-bottom{to{transform:translateY(100%)}}
.opening.is-leaving .opening-panel--top{transform:translateY(-100%)}
.opening.is-leaving .opening-panel--bottom{transform:translateY(100%)}
.opening-center{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:18px;animation:curtain-title 1.3s .4s ease forwards}
.opening-center img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.opening-center span{font:10px var(--mono);letter-spacing:.3em;text-indent:.3em;color:#aaa}
@keyframes curtain-title{0%,45%{opacity:1}100%{opacity:0;filter:blur(6px)}}
.opening.is-leaving .opening-center{opacity:0;transition:opacity .25s}
.topbar{position:fixed;z-index:30;top:0;left:0;right:0;height:84px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.brand span{font:9px var(--mono);letter-spacing:.3em;color:#aaa}
.brand b{color:#fff}
.brand i{font-style:normal;margin:0 8px;color:#555}
.counter{display:flex;align-items:center;gap:10px;font:8px var(--mono);letter-spacing:.1em}
.counter i{display:block;width:70px;height:1px;background:rgba(255,255,255,.3)}
.counter i b{display:block;width:14.28%;height:1px;background:#fff;transition:width .55s ease}
.topbar-actions{display:flex;align-items:center;gap:20px;pointer-events:auto}
.sound-toggle{min-width:96px;height:44px;padding:0 10px;border:1px solid rgba(255,255,255,.22);background:rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;color:#ddd;backdrop-filter:blur(5px)}
.sound-toggle>b{font:8px var(--mono);letter-spacing:.1em;white-space:nowrap}
.sound-bars{height:16px;display:flex;align-items:center;gap:2px}
.sound-bars i{display:block;width:2px;height:5px;background:currentColor}
.sound-toggle[aria-pressed="true"] .sound-bars i{animation:sound-bar .8s ease-in-out infinite alternate}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2){animation-delay:.2s}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3){animation-delay:.4s}
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(4){animation-delay:.1s}
.sound-toggle.needs-gesture{border-color:rgba(255,255,255,.7);animation:music-prompt 1.4s ease-in-out infinite}
@keyframes sound-bar{to{height:15px}}
@keyframes music-prompt{50%{box-shadow:0 0 0 5px rgba(255,255,255,.08)}}
.deck{position:fixed;inset:0}
.slide{position:absolute;inset:0;visibility:hidden;opacity:0;transform:scale(1.015);transition:opacity .65s ease,transform .9s cubic-bezier(.2,.7,.2,1),visibility 0s .65s;overflow:hidden}
.slide.is-active{visibility:visible;opacity:1;transform:scale(1);transition-delay:0s;z-index:2}
.media,.shade,.texture,.light-wash,.follow-wash{position:absolute;inset:0}
.media{background-position:center;background-size:cover;transition:transform 8s ease}
.is-active .media{transform:scale(1.035)}
.media--forest{background-image:url("assets/source/signal-forest.jpg")}
.media--forest.zoomed{filter:grayscale(1) brightness(.58);transform:scale(1.12)}
.media--archive{background-image:url("assets/source/xuanwu-archive.jpg")}
.media--rewilded{background-image:url("assets/source/xuanwu-rewilded.jpg")}
.media--poster{background-image:url("assets/source/poster-rewilded.jpg");background-position:center 64%}
.blurred{filter:grayscale(1) blur(5px);transform:scale(1.06)}
.shade{background:linear-gradient(180deg,rgba(0,0,0,.18) 0,rgba(0,0,0,.34) 52%,rgba(0,0,0,.62) 100%)}
.shade--deep{background:rgba(0,0,0,.7)}
.shade--archive{background:linear-gradient(90deg,rgba(0,0,0,.82) 0,rgba(0,0,0,.25) 58%,rgba(0,0,0,.15)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 55%)}
.light-wash{background:linear-gradient(90deg,rgba(235,242,244,.95) 0,rgba(235,242,244,.6) 43%,transparent 72%),linear-gradient(0deg,rgba(233,241,243,.2),transparent)}
.follow-wash{background:linear-gradient(90deg,rgba(239,242,240,.96) 0,rgba(239,242,240,.9) 44%,rgba(239,242,240,.15) 75%)}
.texture{opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.2) 4px);animation:noise .18s steps(2) infinite;pointer-events:none}
.texture--light{opacity:.08}
@keyframes noise{25%{transform:translate(2%,-3%)}
50%{transform:translate(-3%,2%)}
75%{transform:translate(3%,3%)}
}
.corner-code{position:absolute;left:clamp(20px,6vw,100px);top:125px;font:9px/2 var(--mono);letter-spacing:.18em;color:#ccc}
.corner-code span{color:#777}
.copy{position:absolute}
.copy--bottom{left:clamp(20px,6vw,100px);bottom:14vh}
.eyebrow{font:9px var(--mono);letter-spacing:.2em;text-transform:uppercase}
.copy--bottom .eyebrow{color:#a7a9a5}
.copy h1{font-size:clamp(42px,5vw,76px);font-weight:200;line-height:1.3;letter-spacing:.07em;margin:20px 0}
.copy h1 strong{font:.83em var(--mono);letter-spacing:.12em}
.copy--message{left:clamp(20px,18vw,350px);top:50%;transform:translateY(-50%);font-size:clamp(17px,1.7vw,25px);line-height:1.9;letter-spacing:.12em}
.copy--message .eyebrow{color:#777}
.copy--message p{margin:0 0 22px;color:#aaa}
.copy--message .bright{color:#fff;margin-top:42px}
.archive-label{position:absolute;top:126px;right:clamp(20px,5vw,75px);display:flex;flex-direction:column;align-items:flex-end;gap:7px;text-align:right}
.archive-label span,.archive-label small{font:8px var(--mono);letter-spacing:.15em;color:#aaa}
.archive-label b{font-size:17px;font-weight:300;letter-spacing:.16em}
.archive-label--dark{color:#111}
.archive-label--dark span,.archive-label--dark small{color:#525654}
.copy--archive{left:clamp(20px,6vw,100px);bottom:12vh}
.copy--archive h2,.copy--rewilded h2,.copy--brief h2{font-size:clamp(38px,4.7vw,70px);font-weight:200;line-height:1.35;letter-spacing:.08em;margin:18px 0}
.copy--archive>p:last-child,.copy--rewilded>p:last-child,.copy--brief>p{font-size:clamp(14px,1.25vw,18px);line-height:1.9;letter-spacing:.08em;color:#b8bab6}
.copy--rewilded{left:clamp(20px,6vw,100px);top:50%;transform:translateY(-45%);color:#101212}
.copy--rewilded .eyebrow,.copy--rewilded>p:last-child{color:#3f4543}
.brief-images{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.brief-images div:first-child{background:url("assets/source/poster-archive.jpg") center 66%/cover}
.brief-images div:last-child{background:url("assets/source/poster-rewilded.jpg") center 66%/cover}
.chapter-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;background:#080909}
.shade--brief{background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.74) 52%,rgba(0,0,0,.45))}
.copy--brief{left:clamp(20px,8vw,150px);top:50%;transform:translateY(-48%);width:min(680px,50vw)}
.copy--brief p{max-width:590px}
.identity-wrap{position:relative;z-index:3;width:100%;height:100%;display:grid;grid-template-columns:.8fr 1.2fr;gap:7vw;align-items:center;padding:100px clamp(20px,8vw,150px) 70px}
.identity-intro h2{font-size:clamp(38px,4.6vw,68px);font-weight:200;line-height:1.35;letter-spacing:.07em}
.identity-intro>p:last-child{color:#999;line-height:1.9;letter-spacing:.08em}
.identity-options{border-top:1px solid var(--line)}
.identity-options button{width:100%;min-height:104px;padding:14px 20px;border:0;border-bottom:1px solid var(--line);background:transparent;display:grid;grid-template-columns:45px 175px 1fr 20px;align-items:center;text-align:left;cursor:pointer;transition:.25s}
.identity-options button:hover,.identity-options button:focus-visible{background:#eeeeea;color:#111}
.identity-options span{font:9px var(--mono);color:#777}
.identity-options b{font-size:22px;font-weight:300;letter-spacing:.1em}
.identity-options small{color:#8e908d;line-height:1.7}
.identity-options i{font-style:normal}
.follow-card{position:absolute;z-index:3;left:clamp(20px,7vw,120px);top:50%;transform:translateY(-48%);width:min(610px,42vw);color:#101212}
.follow-card>img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:20px}
.follow-card .eyebrow{color:#666}
.follow-card h2{font-size:clamp(38px,4.3vw,64px);font-weight:200;line-height:1.35;letter-spacing:.06em}
.follow-card>p:not(.eyebrow){max-width:520px;line-height:1.8;letter-spacing:.07em;color:#4f5553}
.follow-card>button{width:100%;min-height:70px;margin-top:22px;padding:13px 18px;border:1px solid #1c1e1d;background:rgba(255,255,255,.45);color:#111;display:grid;grid-template-columns:1fr 1.4fr auto;align-items:center;text-align:left;cursor:pointer;transition:.25s}
.follow-card>button:hover{background:#111;color:#fff}
.follow-card button span,.follow-card button i{font:8px var(--mono);letter-spacing:.12em}
.follow-card button b{font-weight:400;letter-spacing:.1em}
.follow-card button i{font-style:normal}
.follow-card>small{display:block;margin-top:12px;color:#666;font-size:10px;letter-spacing:.08em}
.restart{position:absolute;right:25px;bottom:20px;z-index:6;min-height:44px;border:0;background:transparent;color:#333;cursor:pointer;font:8px var(--mono);letter-spacing:.13em}
.continue-hint{position:fixed;left:50%;bottom:24px;z-index:20;transform:translateX(-50%);margin:0;pointer-events:none;font:8px var(--mono);letter-spacing:.16em;color:rgba(255,255,255,.38);white-space:nowrap}
.continue-hint[hidden]{display:none}
.is-light .continue-hint{color:rgba(0,0,0,.38)}
.toast{position:fixed;z-index:80;left:50%;bottom:82px;transform:translate(-50%,15px);padding:13px 20px;background:#111;color:#fff;font:9px var(--mono);letter-spacing:.12em;opacity:0;pointer-events:none;transition:.25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
button:focus-visible{outline:2px solid currentColor;outline-offset:4px}

@media(max-width:700px){.topbar{height:68px}
.brand img{width:34px;height:34px}
.brand span{font-size:8px}
.counter i{width:40px}
.topbar-actions{gap:8px}
.sound-toggle{min-width:44px;width:44px;padding:0;border:0;background:rgba(0,0,0,.22)}
.sound-toggle>b{display:none}
.corner-code{top:92px}
.copy--bottom{bottom:19vh}
.copy h1{font-size:39px}
.continue-hint{bottom:18px}
.copy--message{left:24px;right:24px;font-size:17px}
.archive-label{top:92px;right:20px}
.shade--archive{background:linear-gradient(0deg,rgba(0,0,0,.85),transparent 72%),rgba(0,0,0,.18)}
.copy--archive{left:20px;right:20px;bottom:14vh}
.copy--archive h2,.copy--rewilded h2,.copy--brief h2{font-size:38px}
.media--archive{background-position:58% center}
.media--rewilded{background-position:58% center}
.light-wash{background:linear-gradient(0deg,rgba(238,243,243,.96) 0,rgba(238,243,243,.75) 50%,rgba(238,243,243,.1) 83%)}
.copy--rewilded{left:20px;right:20px;top:auto;bottom:14vh;transform:none}
.brief-images{grid-template-columns:1fr}
.brief-images div:first-child{display:none}
.shade--brief{background:rgba(0,0,0,.67)}
.copy--brief{left:20px;right:20px;top:50%;width:auto}
.copy--brief p{font-size:14px}
.identity-wrap{display:flex;flex-direction:column;justify-content:center;gap:12px;padding:74px 20px 54px}
.identity-intro h2{font-size:32px;margin:8px 0}
.identity-intro>p:last-child{font-size:13px}
.identity-options{width:100%}
.identity-options button{min-height:72px;grid-template-columns:27px 108px 1fr 16px;padding:7px 6px}
.identity-options b{font-size:18px}
.identity-options small{font-size:9px;line-height:1.45}
.media--poster{background-position:center bottom}
.follow-wash{background:linear-gradient(0deg,rgba(240,243,240,.97) 0,rgba(240,243,240,.94) 64%,rgba(240,243,240,.35) 90%)}
.follow-card{left:20px;right:20px;top:auto;bottom:70px;transform:none;width:auto}
.follow-card>img{width:54px;height:54px;margin-bottom:8px}
.follow-card h2{font-size:35px;margin:14px 0}
.follow-card>p:not(.eyebrow){font-size:13px}
.follow-card>button{min-height:62px}
.follow-card button span{display:none}
.restart{right:12px;bottom:8px}
.slide--follow .topbar{color:#111}
}

@media(max-height:700px) and (min-width:701px){.copy--bottom{bottom:11vh}
.copy h1{font-size:52px}
.identity-options button{min-height:94px}
.follow-card h2{font-size:45px}
.follow-card>img{width:54px;height:54px}
.follow-card>button{min-height:60px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.is-active .media{transform:none}
}
.copy-fallback{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.76);backdrop-filter:blur(10px)}
.copy-fallback[hidden]{display:none}
.copy-fallback>div{width:min(480px,100%);padding:30px;background:#eeeeea;color:#111;border:1px solid #fff}
.copy-fallback .eyebrow{color:#666}
.copy-fallback h2{font-size:24px;font-weight:300;letter-spacing:.08em}
.copy-fallback input{width:100%;height:58px;margin:12px 0;padding:0 14px;border:1px solid #222;background:#fff;color:#111;font-size:16px}
.copy-fallback small{display:block;color:#666}
.copy-fallback button{width:100%;min-height:48px;margin-top:22px;border:1px solid #111;background:#111;color:#fff;cursor:pointer}