:root {
  --ink: #10130f;
  --paper: #eee7d9;
  --loess: #c68c42;
  --loess-light: #f5ca75;
  --signal: #7df5a5;
  --cream: #fff6dc;
  --muted: #a69f91;
  --line: rgba(255,255,255,.17);
  --ease: cubic-bezier(.22,.78,.25,1);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--cream); }
body { font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; text-rendering: optimizeLegibility; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; }

#topography { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .18; pointer-events: none; z-index: 2; mix-blend-mode: screen; }
.app { position: fixed; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease; background: #0d120e; }
body.entered .app { opacity: 1; visibility: visible; }

.boot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; transition: transform 1.1s var(--ease), opacity .8s ease; }
.boot-photo { position: absolute; inset: -3%; background: url("photos/bangluo-ridge-2022.jpg") center/cover; filter: saturate(.72) contrast(1.12); animation: drift 16s ease-in-out infinite alternate; }
.boot-shade { position: absolute; inset: 0; background: radial-gradient(circle at 72% 33%, transparent 0 18%, rgba(10,13,10,.35) 52%, #0b0e0b 100%), linear-gradient(90deg, rgba(9,12,9,.9), rgba(9,12,9,.18) 60%, rgba(9,12,9,.76)); }
.boot::before { content: ""; position: absolute; inset: 0; opacity: .15; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.05) 4px); mix-blend-mode: overlay; }
.boot.exit { transform: scale(1.06); opacity: 0; pointer-events: none; }
@keyframes drift { to { transform: scale(1.05) translate3d(-1.5%,1%,0); } }

.waybill { position: relative; width: min(820px, 64vw); min-height: min(620px, 78vh); padding: clamp(26px,3vw,54px); background: rgba(239,232,218,.95); color: #11150f; box-shadow: 0 38px 120px rgba(0,0,0,.55); clip-path: polygon(0 0, 97% 0, 100% 5%, 99% 96%, 93% 100%, 3% 99%, 0 93%); transform: rotate(-1.1deg); }
.waybill::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(15,20,14,.18); pointer-events: none; }
.waybill-head { display: flex; align-items: center; gap: 12px; padding-bottom: 15px; border-bottom: 2px solid #151912; font: 700 11px/1.2 Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
.waybill-head span:last-child { margin-left: auto; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #1e6e41; box-shadow: 0 0 0 5px rgba(30,110,65,.12); }
.eyebrow { margin: 28px 0 8px; color: #727568; font: 700 10px/1.4 Consolas, monospace; letter-spacing: .24em; }
.waybill h1 { margin: 0; font-size: clamp(42px,5.2vw,84px); letter-spacing: -.08em; line-height: .98; }
.boot-sub { margin: 12px 0 28px; font-size: clamp(18px,1.8vw,30px); font-weight: 700; letter-spacing: .02em; }
.address-grid { display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; border-block: 1px solid rgba(16,20,15,.28); padding: 17px 0; }
.address-grid div:last-child { text-align: right; }
.address-grid small { display: block; font-size: 10px; color: #777a70; margin-bottom: 5px; }
.address-grid b { font-size: clamp(18px,1.8vw,28px); }
.route-arrow { text-align: center !important; font-size: 28px; }
.barcode { height: 42px; width: 47%; margin: 22px 0 18px auto; background: repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 5px,#111 5px 6px,transparent 6px 11px,#111 11px 15px,transparent 15px 18px); opacity: .8; }
.scan-start { position: relative; width: 100%; border: 0; cursor: pointer; padding: 16px 20px; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; background: #151a13; color: var(--cream); overflow: hidden; }
.scan-start b { font-size: 18px; letter-spacing: .12em; }
.scan-start em { font-style: normal; font-size: 11px; opacity: .65; }
.scan-beam { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--signal); box-shadow: 0 0 18px 8px rgba(125,245,165,.35); animation: scan 2.3s ease-in-out infinite; }
@keyframes scan { 0%,100% { left: 5%; opacity: .2; } 50% { left: 95%; opacity: 1; } }
.boot-credit { margin: 14px 0 0; text-align: center; color: #777a70; font-size: 10px; }
.boot-index { position: absolute; right: 4vw; bottom: 4vh; text-align: right; font: 700 13px/1.1 Consolas, monospace; letter-spacing: .18em; }
.boot-index b { font-size: 64px; color: var(--loess-light); }

.topbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 74px; padding: 0 3.4vw; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,rgba(9,12,9,.88),rgba(9,12,9,.25)); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 12px; border: 0; background: none; cursor: pointer; padding: 0; }
.brand span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--signal); font: 800 13px Consolas, monospace; color: var(--signal); }
.brand b { font-size: 14px; letter-spacing: .12em; }
.tracking { margin-left: 4vw; display: flex; gap: 12px; align-items: baseline; font-family: Consolas, monospace; }
.tracking small { color: #858a7f; font-size: 9px; letter-spacing: .15em; }
.tracking strong { font-size: 11px; color: var(--loess-light); letter-spacing: .1em; }
.top-actions { margin-left: auto; display: flex; gap: 8px; }
.icon-btn { width: 39px; height: 39px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; display: grid; place-items: center; font-size: 12px; transition: .25s; }
.icon-btn:hover { border-color: var(--signal); color: var(--signal); transform: translateY(-2px); }
.music { grid-template-columns: repeat(3,3px); gap: 3px; align-content: center; justify-content: center; }
.music i { display: block; width: 3px; background: var(--signal); animation: equalize .9s ease-in-out infinite alternate; }
.music i:nth-child(1) { height: 9px; }.music i:nth-child(2){height:16px;animation-delay:-.25s}.music i:nth-child(3){height:12px;animation-delay:-.5s}
.music:not(.is-on) i { animation-play-state: paused; height: 3px; opacity: .45; }
@keyframes equalize { to { height: 4px; } }

.scene-stack { position: fixed; inset: 0; }
.scene { position: absolute; inset: 0; padding: 92px 4vw 72px; opacity: 0; visibility: hidden; transform: translate3d(5%,0,0) scale(.985); transition: opacity .72s var(--ease), transform .8s var(--ease), visibility .72s; overflow: hidden; }
.scene.active { opacity: 1; visibility: visible; transform: none; z-index: 4; }
.scene.leaving { transform: translate3d(-5%,0,0) scale(.985); }
.scene-photo, .timeline-bg, .end-photo { position: absolute; inset: 0; background-size: cover; background-position: center; }
.route-photo { background-image: url("photos/bangluo-forest-2022.jpg"); filter: saturate(.55) contrast(1.18) brightness(.52); }
.scene-wash { position: absolute; inset: 0; background: radial-gradient(circle at 76% 40%, transparent 0 22%, rgba(10,14,10,.3) 48%, #0b100c 100%), linear-gradient(90deg,#0a0e0b 0 21%,transparent 60%); }
.section-no { margin: 0 0 18px; color: var(--signal); font: 700 10px/1.2 Consolas, monospace; letter-spacing: .22em; }
.glass-card { background: rgba(15,19,15,.68); border: 1px solid var(--line); box-shadow: 0 28px 70px rgba(0,0,0,.22); backdrop-filter: blur(20px); }

.route-layout { position: relative; height: 100%; display: grid; grid-template-columns: minmax(260px,27vw) 1fr; gap: 2.2vw; align-items: stretch; }
.manifest { align-self: center; padding: clamp(22px,2.5vw,40px); border-radius: 3px; }
.manifest h2,.map-copy h2,.timeline-title h2,.people-head h2,.compare-copy h2,.end-copy h2 { margin: 0; font-size: clamp(30px,3.2vw,56px); line-height: 1.08; letter-spacing: -.055em; }
.manifest > p:not(.section-no), .map-copy > p:not(.section-no), .timeline-title > p:not(.section-no), .people-head > p:not(.section-no), .compare-copy > p:not(.section-no), .end-copy > p:not(.section-no) { color: #c5c4b9; font-size: clamp(12px,1vw,15px); line-height: 1.85; margin: 22px 0; }
.status-pill { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: rgba(125,245,165,.08); color: var(--signal); border-left: 2px solid var(--signal); font-size: 11px; }
.status-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 6px rgba(125,245,165,.1); }
.manifest dl { margin: 25px 0 0; }
.manifest dl div { padding: 12px 0; display: flex; gap: 10px; border-top: 1px solid var(--line); }
.manifest dt { width: 42%; color: #84897f; font-size: 10px; }
.manifest dd { margin: 0; font-size: 11px; }
.route-console { position: relative; align-self: center; height: min(66vh,600px); min-height: 420px; border: 1px solid var(--line); background: rgba(9,13,10,.38); overflow: hidden; }
.route-console::before { content:""; position:absolute; inset:0; background: linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom,black,transparent); }
.route-caption { position: absolute; z-index: 2; left: 28px; top: 22px; display: flex; gap: 16px; font: 10px Consolas,monospace; letter-spacing: .14em; }
.route-caption span { color: #777e73; }.route-caption b{color:var(--loess-light)}
.route-svg { position: absolute; inset: 7% 3% 10%; width: 94%; height: 80%; overflow: visible; }
.terrain-line { fill:none; stroke:rgba(255,255,255,.08); stroke-width:1; stroke-dasharray:3 8; }
.route-base,.route-done { fill:none; stroke-linecap:round; }
.route-base { stroke:rgba(255,255,255,.18); stroke-width:4; stroke-dasharray:3 12; }
.route-done { stroke:url(#routeGradient); stroke-width:5; filter:drop-shadow(0 0 8px rgba(125,245,165,.34)); }
.route-node circle { fill:#141a14; stroke:rgba(255,255,255,.38); stroke-width:2; transition:.3s; }
.route-node text { fill:#c4c8bd; font-size:13px; text-anchor:middle; font-family:"Microsoft YaHei"; }
.route-node.active circle { fill:var(--signal); stroke:#fff; filter:drop-shadow(0 0 9px var(--signal)); }
.route-node.active text { fill:var(--cream); font-weight:700; }
.parcel rect { fill:var(--loess-light); stroke:#fff5d5; stroke-width:1.5; }
.parcel path { fill:none; stroke:#6e4d1f; stroke-width:1.5; }.parcel circle{fill:none;stroke:rgba(245,202,117,.2);stroke-width:1}
.route-slider { position: absolute; z-index: 3; left: 28px; right: 28px; bottom: 25px; display: grid; grid-template-columns: 45px 1fr 72px; gap: 12px; align-items: center; color:#8b9186; font:10px Consolas,monospace; }
input[type="range"] { appearance:none; height:18px; background:transparent; cursor:pointer; }
input[type="range"]::-webkit-slider-runnable-track { height:2px; background:rgba(255,255,255,.25); }
input[type="range"]::-webkit-slider-thumb { appearance:none; width:18px;height:18px;border-radius:50%;background:var(--signal);border:5px solid #152018;margin-top:-8px;box-shadow:0 0 0 1px var(--signal),0 0 15px rgba(125,245,165,.5); }
input[type="range"]::-moz-range-track { height:2px;background:rgba(255,255,255,.25) } input[type="range"]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--signal);border:4px solid #152018}

.map-layout { height:100%; display:grid; grid-template-columns:minmax(260px,25vw) 1fr minmax(250px,22vw); gap:2vw; align-items:center; }
.map-copy { align-self:center; }
.legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin:20px 0; color:#b7b8af; font-size:10px; }
.legend span{display:flex;align-items:center;gap:6px}.legend i{width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,255,255,.04)}.legend i.core{background:var(--signal)}.legend i.near{background:var(--loess-light)}.legend i.far{background:#df7d69}
.map-method { padding:13px 14px;border:1px solid var(--line);color:#82887e;font-size:10px;line-height:1.6; }
.village-map { position:relative; height:min(69vh,650px); overflow:hidden; border:1px solid var(--line); background:radial-gradient(circle at 52% 50%,rgba(193,138,67,.2),transparent 25%),#111711; box-shadow:inset 0 0 100px rgba(0,0,0,.5); }
.village-map::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:40px 40px;pointer-events:none}
.contours{position:absolute;border:1px dashed rgba(221,166,90,.15);border-radius:46% 54% 51% 49%;transform:rotate(-17deg)}.c1{inset:9% 7%}.c2{inset:18% 17%;transform:rotate(8deg)}.c3{inset:29% 30%;transform:rotate(-8deg)}
.map-river{position:absolute;left:8%;right:5%;top:45%;height:13%;border-radius:50%;border-top:5px solid rgba(89,177,160,.24);transform:rotate(-12deg)}
.map-road{position:absolute;height:2px;background:rgba(245,202,117,.46);transform-origin:left}.map-road.main{width:72%;left:15%;top:54%;transform:rotate(-14deg)}.map-road.branch{width:45%;left:48%;top:54%;transform:rotate(47deg);background:rgba(245,202,117,.22)}
.map-center{position:absolute;z-index:3;left:49%;top:49%;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#19231a;border:1px solid var(--signal);box-shadow:0 0 0 12px rgba(125,245,165,.05),0 0 45px rgba(125,245,165,.15)}.map-center b{font-size:12px}.map-center small{color:var(--signal);font-size:8px;margin-top:3px}
.village-node{position:absolute;z-index:4;width:12px;height:12px;border-radius:50%;border:0;cursor:pointer;transform:translate(-50%,-50%);transition:.25s;background:var(--node-color);box-shadow:0 0 0 5px color-mix(in srgb,var(--node-color) 14%,transparent)}
.village-node::after{content:attr(data-label);position:absolute;left:50%;top:15px;transform:translateX(-50%);white-space:nowrap;color:#8e9589;font-size:8px;opacity:0;transition:.25s;pointer-events:none}.village-node:hover,.village-node.active{transform:translate(-50%,-50%) scale(1.6);box-shadow:0 0 18px var(--node-color)}.village-node:hover::after,.village-node.active::after{opacity:1;transform:translateX(-50%) scale(.65)}
.village-panel { padding:0 0 22px; overflow:hidden; align-self:center; }
.panel-photo{height:170px;overflow:hidden;position:relative}.panel-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(15,19,15,.9))}.panel-photo img{width:100%;height:100%;object-fit:cover;transition:.5s}
.village-panel>*:not(.panel-photo){margin-inline:22px}.panel-kicker{color:var(--loess-light);font:9px Consolas,monospace;letter-spacing:.14em;margin-top:16px}.village-panel h3{font-size:28px;margin-block:7px 18px}.arrival-line{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:10px 0;border-top:1px solid var(--line)}.arrival-line span{font-size:9px;color:#777e73}.arrival-line b{font-size:10px;line-height:1.5}.village-panel>p:last-of-type{color:#aaa99f;font-size:10px;line-height:1.7}

.timeline-bg{background-image:linear-gradient(90deg,rgba(9,13,10,.98),rgba(9,13,10,.72),rgba(9,13,10,.88)),url("photos/bangluo-street-2019.jpg");filter:saturate(.5)}
.timeline-layout{position:relative;height:100%;display:grid;grid-template-columns:minmax(300px,29vw) 1fr minmax(190px,16vw);gap:3vw;align-items:center}.timeline-title{align-self:center}.year-stage{position:relative;height:min(63vh,600px);display:grid;place-items:center}.year-ghost{position:absolute;font:800 clamp(105px,16vw,250px)/1 Consolas,monospace;color:transparent;-webkit-text-stroke:1px rgba(245,202,117,.28);letter-spacing:-.1em;transform:rotate(-90deg);opacity:.6}.year-card{position:relative;width:min(580px,80%);padding:clamp(26px,3vw,48px);background:rgba(17,22,17,.78)}.year-tag{color:var(--signal);font:9px Consolas,monospace;letter-spacing:.15em}.year-card h3{font-size:clamp(23px,2.4vw,40px);line-height:1.2;margin:12px 0 18px}.year-card>p{color:#b7b8af;line-height:1.9;font-size:12px}.evidence{margin-top:22px;padding-top:13px;border-top:1px solid var(--line);display:flex;gap:15px;align-items:center}.evidence span{color:#7c8278;font-size:9px}.evidence b{font-size:10px}.year-controls{position:absolute;left:4%;right:4%;bottom:0}.year-controls>div{display:flex;justify-content:space-between;color:#7d8378;font:9px Consolas,monospace}.year-controls input{width:100%}.change-meter{display:grid;gap:28px}.change-meter div{position:relative}.change-meter small{display:block;color:#7d8379;font-size:9px}.change-meter b{display:block;margin:6px 0 11px;font-size:12px}.change-meter i{display:block;height:2px;background:linear-gradient(90deg,var(--loess-light) var(--v),rgba(255,255,255,.13) var(--v));position:relative}.change-meter i::after{content:"";position:absolute;left:var(--v);top:-3px;width:8px;height:8px;border-radius:50%;background:var(--loess-light);transition:.4s}

.people-layout{height:100%;display:grid;grid-template-columns:minmax(270px,23vw) 1fr;gap:3vw;align-items:center}.people-head{align-self:center}.people-cards{height:min(67vh,640px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.person-card{position:relative;border:1px solid var(--line);padding:0;background:#151a15;text-align:left;overflow:hidden;cursor:pointer;transition:.45s var(--ease)}.person-card:hover{transform:translateY(-10px);border-color:rgba(125,245,165,.55);box-shadow:0 28px 60px rgba(0,0,0,.35)}.person-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.65) brightness(.58);transition:.55s var(--ease)}.person-card:hover img{transform:scale(1.06);filter:saturate(.9) brightness(.7)}.person-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(8,11,9,.94) 85%)}.card-no{position:absolute;z-index:2;top:19px;left:19px;font:10px Consolas,monospace;color:var(--signal);border:1px solid rgba(125,245,165,.4);padding:6px}.person-copy{position:absolute;z-index:2;left:22px;right:22px;bottom:50px}.person-copy span{font-size:9px;color:var(--loess-light);letter-spacing:.1em}.person-copy h3{font-size:clamp(18px,1.7vw,28px);line-height:1.25;margin:9px 0}.person-copy p{font-size:10px;line-height:1.7;color:#acaea6}.person-card>i{position:absolute;z-index:2;bottom:19px;left:22px;font-style:normal;font-size:9px;color:var(--signal)}

.compare-layout{height:100%;display:grid;grid-template-columns:minmax(300px,28vw) 1fr;gap:3vw;align-items:center}.compare-copy{align-self:center}.compare-fact{display:flex;gap:18px;align-items:center;border-top:1px solid var(--line);padding-top:20px}.compare-fact b{font:700 34px Consolas,monospace;color:var(--loess-light)}.compare-fact span{font-size:10px;color:#979b91;line-height:1.5}.wipe{position:relative;height:min(68vh,650px);border:1px solid var(--line);overflow:hidden;background:#f6f5ef;box-shadow:0 30px 90px rgba(0,0,0,.4)}.wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f6f5ef}.wipe-before{filter:saturate(.62) contrast(1.04)}.wipe-after{position:absolute;inset:0;clip-path:inset(0 0 0 50%);overflow:hidden}.wipe-after img{width:100%;height:100%;max-width:none}.wipe-line{position:absolute;z-index:3;left:50%;top:0;bottom:0;width:2px;background:var(--signal);transform:translateX(-50%);box-shadow:0 0 22px rgba(125,245,165,.8)}.wipe-line span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#142019;border:1px solid var(--signal);font-size:17px}.wipe-label{position:absolute;z-index:4;top:20px;padding:7px 10px;background:rgba(11,14,11,.82);font:9px Consolas,monospace;letter-spacing:.08em}.wipe-label.before{left:20px}.wipe-label.after{right:20px}.wipe input{position:absolute;z-index:5;inset:0;width:100%;height:100%;opacity:0}

.end-photo{background-image:url("photos/bangluo-apple-2025.jpg");filter:saturate(.8) brightness(.55)}.end-overlay{position:absolute;inset:0;background:linear-gradient(90deg,#0a0e0b 3%,rgba(10,14,11,.82) 43%,rgba(10,14,11,.25) 78%,#0a0e0b),linear-gradient(0deg,#0a0e0b,transparent 45%)}.end-layout{position:relative;height:100%;display:grid;grid-template-columns:minmax(350px,43vw) 1fr;gap:5vw;align-items:center}.end-copy{align-self:center}.end-copy h2{font-size:clamp(46px,6vw,96px)}.end-quote{margin:27px 0;font-size:15px;line-height:1.8;color:#bfc1b8}.end-quote b{color:var(--loess-light);font-size:18px}.replay-btn{border:1px solid var(--signal);background:rgba(125,245,165,.06);padding:13px 25px;color:var(--signal);cursor:pointer;font-size:11px;letter-spacing:.1em}.final-parcel{position:relative;justify-self:end;width:min(450px,32vw);padding:28px;background:rgba(237,229,213,.94);color:#121610;display:grid;grid-template-columns:58px 1fr;gap:18px;box-shadow:0 35px 80px rgba(0,0,0,.4);transform:rotate(2deg)}.parcel-mark{display:grid;place-items:center;height:58px;background:#152018;color:var(--signal);font:800 18px Consolas,monospace}.final-parcel small,.final-parcel em{display:block;font:9px Consolas,monospace;color:#777b70}.final-parcel b{display:block;margin:7px 0;font-size:17px}.final-parcel em{font-style:normal}.stamp{position:absolute;right:18px;bottom:14px;border:3px solid #b84f3d;color:#b84f3d;border-radius:50%;width:70px;height:70px;display:grid;place-items:center;font-weight:800;transform:rotate(-16deg);opacity:.7}

.scene-nav{position:fixed;z-index:20;left:50%;bottom:22px;transform:translateX(-50%);height:38px;display:flex;align-items:center;gap:13px;padding:0 8px;background:rgba(8,11,9,.55);border:1px solid var(--line);backdrop-filter:blur(10px)}.scene-nav>button{width:28px;height:28px;border:0;background:transparent;cursor:pointer;color:#9aa095}.scene-nav>button:hover{color:var(--signal)}#navDots{display:flex;gap:7px}#navDots button{width:20px;height:2px;border:0;padding:0;background:rgba(255,255,255,.22);cursor:pointer;transition:.3s}#navDots button.active{width:38px;background:var(--signal)}.scene-nav>span{font:9px Consolas,monospace;color:#777d73}.scene-nav>span b{color:var(--cream)}
.gesture-hint{position:fixed;z-index:15;right:3.4vw;bottom:30px;color:#747b71;font-size:9px;display:flex;gap:8px;align-items:center}.gesture-hint span{width:32px;height:1px;background:var(--line);position:relative}.gesture-hint span::after{content:"";position:absolute;right:0;top:-3px;border:3px solid transparent;border-left-color:#747b71}

.source-drawer{position:fixed;z-index:70;top:0;right:0;width:min(520px,44vw);height:100%;background:#eae2d3;color:#151913;transform:translateX(102%);transition:.65s var(--ease);box-shadow:-30px 0 100px rgba(0,0,0,.45);overflow:auto}.source-drawer.open{transform:none}.drawer-head{position:sticky;top:0;z-index:2;background:#eae2d3;padding:28px 30px 20px;display:flex;align-items:center;border-bottom:1px solid rgba(20,25,18,.18)}.drawer-head small{font:9px Consolas,monospace;letter-spacing:.15em;color:#7d7f73}.drawer-head h2{margin:6px 0 0;font-size:23px}.drawer-head button{margin-left:auto;width:38px;height:38px;border:1px solid rgba(20,25,18,.2);background:none;cursor:pointer;font-size:24px}.drawer-body{padding:18px 30px 40px}.drawer-body h3{margin:20px 0 10px;font-size:11px;color:#686c61;letter-spacing:.12em}.drawer-body a{display:block;padding:14px 0;border-top:1px solid rgba(20,25,18,.13);text-decoration:none}.drawer-body a:hover b{color:#2f754b}.drawer-body a b{display:block;font-size:12px}.drawer-body a span{display:block;margin-top:5px;color:#73766c;font-size:10px;line-height:1.6}.drawer-note{padding:14px;background:#dcd1bd;color:#64685f;font-size:10px;line-height:1.7}.drawer-mask{position:fixed;z-index:65;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.4s}.drawer-mask.open{opacity:1;visibility:visible}

.story-modal{position:fixed;z-index:80;left:50%;top:50%;width:min(980px,82vw);height:min(620px,76vh);transform:translate(-50%,-45%) scale(.94);opacity:0;visibility:hidden;background:#111611;border:1px solid var(--line);box-shadow:0 40px 140px rgba(0,0,0,.65);display:grid;grid-template-columns:45% 55%;transition:.5s var(--ease)}.story-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.modal-close{position:absolute;z-index:3;right:16px;top:16px;width:38px;height:38px;border:1px solid var(--line);background:rgba(10,12,10,.5);cursor:pointer;font-size:23px}.story-visual{position:relative;overflow:hidden}.story-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(17,22,17,.85))}.story-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.story-copy{padding:clamp(32px,4vw,64px);align-self:stretch;overflow:auto}.story-copy>small{color:var(--loess-light);font-size:10px;letter-spacing:.12em}.story-copy h2{font-size:clamp(28px,3vw,48px);line-height:1.15;margin:12px 0 22px}.story-copy>p{font-size:12px;line-height:1.9;color:#b8bbb1;white-space:pre-line}.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:24px 0}.story-grid div{border:1px solid var(--line);padding:12px}.story-grid small{display:block;color:#7d847a;font-size:8px}.story-grid b{display:block;font-size:10px;margin-top:7px}

.portrait-gate{display:none;position:fixed;z-index:100;inset:0;background:#10130f;color:var(--cream);place-content:center;text-align:center}.portrait-gate strong{font-size:24px;margin-top:20px}.portrait-gate small{color:#858a80;margin-top:8px}.rotate-icon{width:82px;height:52px;border:2px solid var(--signal);border-radius:6px;margin:auto;transform:rotate(-18deg);animation:rotateHint 2s ease-in-out infinite}.rotate-icon span{display:block;width:6px;height:6px;border-radius:50%;background:var(--signal);margin:21px auto}@keyframes rotateHint{50%{transform:rotate(0deg)}}

@media (max-width:1100px){
  .scene{padding-inline:3vw}.route-layout{grid-template-columns:260px 1fr}.manifest{padding:24px}.map-layout{grid-template-columns:235px 1fr 225px}.timeline-layout{grid-template-columns:260px 1fr 150px}.people-layout{grid-template-columns:240px 1fr}.people-cards{gap:8px}.person-copy{left:15px;right:15px}.person-copy p{display:none}.compare-layout{grid-template-columns:270px 1fr}.gesture-hint{display:none}
}
@media (orientation:portrait) and (max-width:900px){.portrait-gate{display:grid}.boot,.app,.source-drawer,.drawer-mask,.story-modal{display:none!important}}
@media (max-height:650px){.topbar{height:60px}.scene{padding-top:72px;padding-bottom:58px}.route-console,.village-map,.people-cards,.wipe{height:72vh}.manifest>p:not(.section-no),.map-copy>p:not(.section-no),.timeline-title>p:not(.section-no),.people-head>p:not(.section-no),.compare-copy>p:not(.section-no),.end-copy>p:not(.section-no){margin:12px 0}.scene-nav{bottom:12px}.gesture-hint{bottom:20px}.waybill{min-height:88vh}.waybill h1{font-size:44px}.eyebrow{margin-top:14px}.boot-sub{margin-bottom:14px}.barcode{height:25px;margin-block:10px}.address-grid{padding-block:9px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}