:root {
  --ink:#18212b;
  --ink-soft:#344245;
  --paper:#f6edda;
  --cream:#fff4d2;
  --gold:#d8a35e;
  --orange:#c86f44;
  --rust:#a34739;
  --night:#111719;
  --panel:#1d2529;
  --line:rgba(24,33,43,.22);
  --serif:"Noto Serif SC","Songti SC","SimSun",serif;
  --sans:"Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
}
* { box-sizing:border-box; }
html { background:#111719; scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:#111719; font-family:var(--sans); overflow-x:hidden; }
body.cover-active,body.impact-transition { overflow:hidden; }
button,a { font:inherit; }
button { cursor:pointer; }
img,svg { display:block; max-width:100%; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

#experience { height:1360vh; position:relative; background:#f3e8d1; }
.stage { position:sticky; top:0; height:100vh; overflow:hidden; background:#f3e8d1; }
.world { position:relative; display:flex; width:1100vw; height:100%; will-change:transform; }
.scene { position:relative; flex:0 0 100vw; width:100vw; height:100vh; overflow:hidden; isolation:isolate; }
.scene-bg { position:absolute; inset:0; background-position:center; background-size:cover; }
.peace-ribbon { position:absolute; z-index:0; top:0; left:0; width:900vw; height:100%; background:url("assets/peace-ribbon-v6.jpg") center/cover no-repeat; pointer-events:none; }
.story-cover { position:fixed; z-index:120; inset:0; width:100%; height:100vh; height:100svh; overflow:hidden; isolation:isolate; transition:opacity .7s ease,visibility .7s ease; }
.story-cover.is-leaving { visibility:hidden; opacity:0; pointer-events:none; }
.impact-curtain { visibility:hidden; position:fixed; z-index:115; inset:0; display:grid; place-items:center; color:#cdbbac; background:#050606; opacity:0; pointer-events:none; transition:opacity 1s cubic-bezier(.55,0,.72,.4),visibility 0s linear 1s; }
.impact-curtain::after { content:""; position:absolute; inset:0; background:#fff; opacity:0; }
.impact-curtain span { font:400 11px/1 Georgia,serif; letter-spacing:.34em; opacity:0; transform:translateY(8px); transition:opacity .55s ease .5s,transform .55s ease .5s; }
.impact-curtain.is-active { visibility:visible; opacity:1; transition:opacity 1s cubic-bezier(.28,.62,.28,1),visibility 0s; }
.impact-curtain.is-active span { opacity:.62; transform:translateY(0); }
.impact-curtain.is-flashing::after { animation:curtain-flash .72s ease-out both; }
.impact-curtain.is-flashing span { opacity:0; transition-delay:0s; }
.impact-curtain.is-revealing { visibility:hidden; opacity:0; transition:opacity 1.05s ease .12s,visibility 0s linear 1.2s; }
@keyframes curtain-flash {
  0% { opacity:0; }
  9% { opacity:1; }
  24% { opacity:.82; }
  100% { opacity:0; }
}
.scene-prelude { color:#26302f; background:linear-gradient(90deg,rgba(247,240,222,.94) 0%,rgba(247,240,222,.76) 38%,rgba(247,240,222,.22) 64%,rgba(236,209,150,.04) 100%),url("assets/prelude-two-worlds-v2.png") center/cover no-repeat; }
.scene-prelude::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(255,249,231,.04),rgba(76,60,46,.07)); pointer-events:none; }
.prelude-atmosphere { position:absolute; z-index:2; inset:0; overflow:hidden; pointer-events:none; }
.prelude-sun { position:absolute; right:11vw; top:9vh; width:clamp(150px,20vw,310px); aspect-ratio:1; border:1px solid rgba(139,95,48,.18); border-radius:50%; box-shadow:0 0 0 4.5vw rgba(255,239,182,.12),0 0 0 9vw rgba(255,239,182,.08); }
.prelude-route { position:absolute; left:6vw; right:0; bottom:10vh; height:1px; background:linear-gradient(90deg,rgba(117,81,46,.64),rgba(117,81,46,.08) 76%,transparent); }
.prelude-route::before,.prelude-route::after { content:""; position:absolute; top:50%; width:7px; height:7px; border-radius:50%; background:#a96240; transform:translateY(-50%); box-shadow:0 0 0 5px rgba(169,98,64,.13); }
.prelude-route::before { left:0; }
.prelude-route::after { left:66%; }
.prelude-copy { position:absolute; z-index:4; left:8vw; top:11vh; width:min(57vw,820px); }
.prelude-kicker { display:flex; align-items:center; gap:15px; margin:0 0 clamp(22px,4vh,38px); color:#765638; font-size:clamp(11px,.9vw,13px); font-weight:700; letter-spacing:.18em; }
.prelude-kicker span { padding:6px 10px; color:#f8eed8; background:#7b4534; letter-spacing:.26em; }
.prelude-copy h1 { max-width:12em; margin:0 0 clamp(24px,4vh,42px); font-family:var(--serif); font-size:clamp(42px,5.1vw,78px); font-weight:500; line-height:1.18; letter-spacing:.035em; text-wrap:balance; }
.prelude-copy > p:not(.prelude-kicker) { max-width:51em; margin:0 0 12px; color:#3e4948; font-size:clamp(13px,1vw,15px); line-height:1.9; letter-spacing:.035em; }
.prelude-copy .prelude-lead { color:#263130; font-weight:500; }
.prelude-copy .prelude-note { margin-top:24px; color:#7d6e5a; font-size:11px; letter-spacing:.08em; }
.prelude-context { position:absolute; z-index:4; right:6vw; bottom:16vh; display:grid; grid-template-columns:repeat(3,minmax(110px,1fr)); width:min(42vw,600px); margin:0; border-top:1px solid rgba(72,68,54,.28); border-bottom:1px solid rgba(72,68,54,.2); background:rgba(255,248,229,.3); backdrop-filter:blur(4px); }
.prelude-context div { min-height:112px; padding:20px clamp(14px,1.7vw,26px); border-left:1px solid rgba(72,68,54,.18); }
.prelude-context div:first-child { border-left:0; }
.prelude-context dt { margin-bottom:12px; color:#9a583c; font-size:10px; font-weight:700; letter-spacing:.24em; }
.prelude-context dd { margin:0; color:#36413f; font-family:var(--serif); font-size:clamp(13px,1.1vw,17px); line-height:1.65; }
.cover-enter { position:absolute; z-index:5; right:5vw; bottom:4vh; display:flex; align-items:center; gap:16px; padding:12px 18px; color:#fff8e9; border:1px solid rgba(255,248,233,.42); border-radius:2px; background:#714637; box-shadow:0 10px 24px rgba(67,48,35,.2); font-size:12px; font-weight:700; letter-spacing:.14em; animation:prelude-pulse 2.4s ease-in-out infinite; transition:background .25s,transform .25s; }
.cover-enter:hover { background:#925b45; }
.cover-enter b { font-size:20px; font-weight:400; }
@keyframes prelude-pulse { 50% { transform:translateX(8px); opacity:.66; } }
.scene-home,.scene-walk-one,.scene-bench,.scene-radio,.scene-commute,.scene-bridge,.scene-walk-two,.scene-gate,.scene-school { background:transparent; }
.scene-home .scene-bg,.scene-walk-one .scene-bg,.scene-bench .scene-bg,.scene-radio .scene-bg,.scene-commute .scene-bg,.scene-bridge .scene-bg,.scene-walk-two .scene-bg,.scene-gate .scene-bg,.scene-school .scene-bg { display:none; }
.home-bg { background-image:url("assets/home-v2.png"); }
.walk-park-bg { background-image:url("assets/walk-park.png"); }
.bench-bg { background-image:url("assets/scene-bench.png"); }
.radio-bg { background-image:url("assets/scene-radio.png"); }
.commute-bg { background-image:url("assets/kiosk-front.png"); }
.walk-school-bg { background-image:url("assets/walk-school-approach.png"); }
.gate-id-bg { background-image:url("assets/scene-gate-id.png"); }
.school-bg { background-image:url("assets/school-ground.png"); }
.sunlight { position:absolute; z-index:1; inset:-12%; background:radial-gradient(circle at 70% 8%,rgba(255,238,168,.55),transparent 32%),linear-gradient(105deg,rgba(255,225,145,.28),transparent 52%); mix-blend-mode:screen; pointer-events:none; }
.parents { position:absolute; z-index:4; left:7vw; bottom:16vh; width:min(15.5vw,248px); filter:drop-shadow(0 14px 22px rgba(75,69,45,.24)); }
.traveler { position:absolute; z-index:9; left:48%; bottom:8.5vh; width:auto; height:min(44vh,370px); aspect-ratio:13/18; transform:translateX(-50%); pointer-events:none; filter:drop-shadow(0 12px 14px rgba(74,76,48,.32)); }
.traveler img { width:100%; height:100%; max-width:none; object-fit:contain; transform-origin:50% 90%; }
.traveler.is-walking img { animation:traveler-step .88s ease-in-out infinite; }
@keyframes traveler-step {
  0%,100% { transform:translateY(0) rotate(0); }
  25% { transform:translateY(-2px) rotate(-.25deg); }
  50% { transform:translateY(0) rotate(0); }
  75% { transform:translateY(-1px) rotate(.2deg); }
}

.scene-copy { position:absolute; z-index:5; padding-left:clamp(18px,2.2vw,34px); color:var(--ink); }
.scene-copy::before { content:""; position:absolute; left:0; top:.18em; width:1px; height:clamp(58px,8vh,86px); background:linear-gradient(to bottom,rgba(28,37,39,.86),rgba(28,37,39,.12)); }
.scene-copy .eyebrow { display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; margin:0 0 clamp(12px,1.8vh,18px); color:#705b3e; font-size:clamp(10px,.9vw,12px); font-weight:700; line-height:1.2; letter-spacing:.2em; text-transform:uppercase; }
.scene-copy .eyebrow::after { content:""; display:block; width:clamp(34px,5vw,70px); height:1px; background:currentColor; opacity:.45; }
.scene-copy h2 { margin:0 0 clamp(14px,2vh,20px); font-family:var(--serif); font-size:clamp(30px,3.5vw,56px); font-weight:600; line-height:1.18; letter-spacing:.035em; text-wrap:balance; }
.scene-copy p:not(.eyebrow) { max-width:32em; margin:0; font-size:clamp(13px,1.08vw,15px); line-height:1.9; letter-spacing:.04em; }
.opening-copy { top:11.5vh; right:7.5vw; width:min(45vw,680px); max-width:none; text-align:left; color:#18212b; }
.opening-copy::before { height:clamp(148px,27vh,230px); background:linear-gradient(to bottom,rgba(24,33,43,.92),rgba(128,92,60,.18)); }
.opening-copy h1 { display:grid; justify-items:start; gap:clamp(2px,.7vh,8px); margin:0; color:#18212b; font-family:var(--serif); font-size:clamp(46px,5.25vw,84px); font-weight:600; line-height:1.05; letter-spacing:.055em; text-shadow:0 1px 0 rgba(255,255,255,.28),0 18px 40px rgba(52,66,64,.16); }
.opening-copy h1 span { display:block; }
.opening-copy h1 span:first-child { font-size:1em; font-weight:500; letter-spacing:.07em; }
.opening-copy h1 span:last-child { margin-left:0; font-size:1.2em; letter-spacing:.16em; }
.opening-copy p:not(.eyebrow) { margin-top:clamp(18px,2.8vh,28px); max-width:32em; color:#2c3435; font-weight:500; text-shadow:0 1px 8px rgba(255,255,255,.66); }
.opening-copy .eyebrow { color:#684d2f; text-shadow:0 1px 8px rgba(255,248,226,.88); }
.walk-copy,.bench-copy,.radio-copy,.commute-copy,.walk-two-copy,.gate-copy,.school-copy { top:16vh; left:29vw; max-width:min(470px,42vw); text-shadow:0 1px 12px rgba(255,255,255,.72); }
.school-copy { left:28vw; }
.farewell { position:absolute; z-index:6; left:18.5vw; bottom:9vh; margin:0; color:#fff8e7; font-family:var(--serif); font-size:18px; text-shadow:0 1px 5px #8e5636; }
.turn-hint { position:absolute; z-index:6; left:58vw; bottom:13vh; color:#6f5c41; font-size:12px; letter-spacing:.12em; }
.scroll-cue { position:absolute; z-index:6; left:50%; bottom:4vh; transform:translateX(-50%); display:flex; align-items:center; gap:12px; color:#735d43; font-size:12px; letter-spacing:.12em; animation:float 2.4s infinite ease-in-out; }
.scroll-cue b { font-size:18px; font-weight:400; }
@keyframes float { 50% { transform:translate(-50%,8px); } }

.memory-hotspot,.kiosk-hotspot,.radio-control,.class-bell { border:0; border-radius:999px; color:#fbf2dc; background:#263f38; box-shadow:0 12px 28px rgba(44,61,45,.28); transition:transform .25s,background .25s,opacity .25s; }
.memory-hotspot:hover,.kiosk-hotspot:hover,.radio-control:hover,.class-bell:hover { transform:translateY(-3px); background:#355d52; }
.bird-hotspot { position:absolute; z-index:10; right:16vw; top:32vh; padding:12px 18px; }
.bird-hotspot.is-playing { background:#5c4836; transform:translateY(-2px); }
.bird-flock { position:absolute; z-index:8; inset:0; pointer-events:none; opacity:0; }
.bird-flock.is-flying { opacity:1; }
.bird { position:absolute; width:clamp(76px,8vw,128px); aspect-ratio:3/2; background:url("assets/birds-sprite.png") 0 0/200% 200% no-repeat; opacity:0; transform:scale(.72); filter:drop-shadow(0 8px 8px rgba(64,55,34,.22)); will-change:transform,opacity,background-position; }
.bird-a { --bird-delay:.05s; left:47vw; top:34vh; }
.bird-b { --bird-delay:.15s; left:50vw; top:37vh; }
.bird-c { --bird-delay:.28s; left:43vw; top:40vh; }
.bird-d { --bird-delay:.38s; left:53vw; top:33vh; }
.bird-flock.is-flying .bird { animation:bird-flight 3.2s cubic-bezier(.2,.62,.24,1) forwards,bird-wing .52s steps(1,end) infinite; animation-delay:var(--bird-delay),var(--bird-delay); }
@keyframes bird-flight {
  0% { opacity:0; transform:translate(0,10px) rotate(-4deg) scale(.62); }
  8% { opacity:.98; transform:translate(1vw,0) rotate(-2deg) scale(.78); }
  42% { transform:translate(11vw,-9vh) rotate(2deg) scale(.72); }
  70% { opacity:.88; }
  100% { opacity:0; transform:translate(28vw,-25vh) rotate(5deg) scale(.5); }
}
@keyframes bird-wing {
  0%,24% { background-position:0 0; }
  25%,49% { background-position:100% 0; }
  50%,74% { background-position:0 100%; }
  75%,100% { background-position:100% 100%; }
}
.radio-control { position:absolute; z-index:10; right:18vw; bottom:28vh; display:flex; align-items:center; gap:10px; padding:12px 17px; border-radius:4px; }
.radio-control.is-playing { background:#5c4836; }
.radio-speaker { position:relative; width:28px; height:22px; display:inline-block; }
.radio-speaker i { position:absolute; left:0; top:5px; width:10px; height:12px; background:#f5e7c7; clip-path:polygon(0 30%,45% 30%,100% 0,100% 100%,45% 70%,0 70%); }
.radio-speaker b,.radio-speaker em { position:absolute; left:14px; top:2px; width:14px; height:18px; border:1px solid #f5e7c7; border-left:0; border-radius:0 50% 50% 0; }
.radio-speaker em { left:19px; top:-2px; width:18px; height:26px; opacity:.55; }
.kiosk-hotspot { position:absolute; z-index:10; left:60vw; bottom:26vh; padding:12px 16px; border-radius:4px; text-align:left; }
.kiosk-hotspot span,.kiosk-hotspot small { display:block; }
.kiosk-hotspot span { letter-spacing:.18em; font-weight:700; }
.kiosk-hotspot small { margin-top:5px; opacity:.74; font-size:11px; }
.class-bell { position:absolute; z-index:10; right:8vw; top:18vh; padding:13px 22px; color:#665231; border:1px solid rgba(141,120,87,.72); background:rgba(255,241,201,.8); font-family:var(--serif); transform:rotate(-3deg); }
.class-bell:hover { background:#fff1c9; transform:rotate(-3deg) translateY(-3px); }
.class-bell.is-ringing,.class-bell:disabled { cursor:default; color:#f7edda; border-color:rgba(255,236,193,.42); background:#765044; opacity:.92; transform:rotate(-3deg); }

.gate-leaf { position:absolute; z-index:6; left:9vw; bottom:23vh; display:flex; gap:5px; height:32vh; transition:transform .8s cubic-bezier(.2,.8,.15,1),opacity .6s; }
.gate-leaf i { width:5px; height:100%; background:rgba(42,52,50,.68); }
.scene-gate.gate-open .gate-leaf { transform:translateX(21vw) scaleX(.18); opacity:.25; }
.draggable { position:absolute; z-index:18; display:grid; place-items:center; width:76px; height:58px; border:0; border-radius:8px; color:#4d5144; background:#f9f3e7; box-shadow:0 8px 19px rgba(40,53,33,.31); touch-action:none; cursor:grab; transition:box-shadow .2s,transform .2s,opacity .3s; }
.draggable small { display:block; font-size:10px; }
.draggable:active,.draggable.dragging { cursor:grabbing; box-shadow:0 16px 30px rgba(40,53,33,.43); transform:scale(1.08); }
.draggable.dropped { pointer-events:none; opacity:0; transform:scale(.2); }
.school-id { left:18vw; bottom:12vh; width:68px; height:52px; color:#e9f2f0; background:#557eac; font-size:12px; line-height:1.1; }
.id-photo { width:16px; height:16px; border-radius:50%; background:#dbe8ef; }
.drop-target { position:absolute; z-index:10; display:grid; place-items:center; min-width:78px; min-height:44px; border:1px dashed #e7d29c; border-radius:7px; color:#795f36; background:rgba(255,243,195,.36); font-size:11px; letter-spacing:.06em; transition:.25s; }
.drop-target.is-ready,.drop-target.is-scanning { background:#f5d88e; color:#384d40; border-style:solid; }
.scanner-target { left:12vw; bottom:46vh; }
.scanner-light { width:30px; height:2px; background:#72e6aa; box-shadow:0 0 10px #72e6aa; animation:scan 1.3s infinite ease-in-out; }
@keyframes scan { 50% { transform:translateY(14px); } }
.nfc-mark { font-family:Georgia,serif; }
.access-result { position:absolute; z-index:20; left:18vw; bottom:20vh; padding:8px 13px; color:#e7fff0; background:#123a2dcc; border:1px solid rgba(157,240,173,.45); opacity:0; transform:translateY(10px); transition:.35s; }
.access-result span { color:#9df0ad; }
.scene-gate.gate-open .access-result { opacity:1; transform:translateY(0); }

.scene-impact { color:#f4f1e8; background:#090c0e; }
.impact-aftermath { position:absolute; z-index:1; inset:0; background:linear-gradient(90deg,rgba(9,12,14,.9),rgba(9,12,14,.34)),url("assets/aftermath-school-v2.png") center/cover no-repeat; filter:grayscale(.9) contrast(.9); opacity:.65; }
.impact-white { position:absolute; z-index:5; inset:0; background:#fff; opacity:0; pointer-events:none; }
.impact-flash { position:absolute; z-index:4; left:50%; top:48%; width:2px; height:2px; border-radius:50%; background:#ffe6ba; box-shadow:0 0 0 0 rgba(241,182,75,.75); }
.shockwave-ring { position:absolute; z-index:3; left:50%; top:50%; width:30vmin; height:30vmin; border:1px solid rgba(255,209,142,.5); border-radius:50%; opacity:.45; transform:translate(-50%,-50%); }
.impact-fog { position:absolute; z-index:2; left:50%; top:72%; border-radius:50%; filter:blur(28px); background:#3a3d40; opacity:.42; }
.fog-near { width:52vw; height:42vw; }
.fog-mid { width:58vw; height:40vw; }
.fog-far { width:42vw; height:46vw; opacity:.25; }
.impact-word { position:absolute; z-index:11; left:50%; top:42%; transform:translate(-50%,-50%); display:grid; gap:12px; text-align:center; white-space:nowrap; opacity:1; }
.impact-word small { color:#d19a75; font:700 11px/1 Georgia,serif; letter-spacing:.26em; }
.impact-word strong { font-family:var(--serif); font-size:clamp(46px,7vw,102px); font-weight:600; line-height:1; letter-spacing:.18em; }
.scene-impact > p { position:absolute; z-index:11; left:50%; top:63%; transform:translateX(-50%); margin:0; font-size:15px; letter-spacing:.18em; white-space:nowrap; opacity:.92; }
.scene-aftermath-classroom { color:#f1ece3; background:#1a1b1c; }
.aftermath-classroom-bg { background-image:linear-gradient(90deg,rgba(13,15,16,.74),rgba(13,15,16,.1) 58%,rgba(13,15,16,.16)),url("assets/aftermath-classroom.png"); }
.classroom-copy { top:17vh; left:8vw; max-width:460px; color:#f3eee5; text-shadow:0 2px 10px #070808; }
.classroom-copy::before { background:linear-gradient(to bottom,rgba(215,155,114,.95),rgba(215,155,114,.12)); }
.classroom-copy .eyebrow { color:#d99b72; }
.classroom-copy h2 { font-size:clamp(38px,4.8vw,74px); line-height:1.12; }

.progress,.report-progress { position:fixed; z-index:80; top:0; left:0; width:100%; height:3px; background:rgba(255,255,255,.25); }
.progress i,.report-progress i { display:block; width:0; height:100%; background:#d98d57; }
.report-progress { left:auto; right:0; width:3px; height:100vh; }
.report-progress i { width:100%; height:0; }
.travel-toast { position:fixed; z-index:90; left:50%; bottom:6vh; max-width:min(82vw,520px); padding:12px 18px; color:#f7f0e3; background:rgba(31,45,47,.88); border:1px solid rgba(169,181,171,.34); border-radius:3px; font-family:var(--serif); font-size:14px; line-height:1.6; text-align:center; opacity:0; pointer-events:none; transform:translate(-50%,15px); transition:opacity .25s,transform .25s; }
.travel-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.sound-control { position:fixed; z-index:90; top:18px; right:18px; display:flex; align-items:center; gap:10px; min-width:128px; padding:9px 12px; border:1px solid rgba(255,255,255,.42); border-radius:999px; color:#24362f; background:rgba(255,246,222,.76); backdrop-filter:blur(10px); box-shadow:0 10px 28px rgba(40,52,47,.16); transition:.25s; }
body.is-war .sound-control,.sound-control.is-war { color:#f3e8df; background:rgba(65,32,28,.74); border-color:rgba(224,147,111,.38); }
.sound-bars { display:flex; align-items:end; gap:3px; width:22px; height:18px; }
.sound-bars i { width:3px; height:40%; border-radius:3px; background:currentColor; opacity:.45; }
.sound-control.is-enabled .sound-bars i { animation:sound-meter .9s infinite ease-in-out; opacity:.9; }
.sound-control.is-enabled .sound-bars i:nth-child(2){animation-delay:.12s}.sound-control.is-enabled .sound-bars i:nth-child(3){animation-delay:.24s}.sound-control.is-enabled .sound-bars i:nth-child(4){animation-delay:.36s}
@keyframes sound-meter { 50% { height:100%; } }
.sound-copy { display:grid; gap:1px; text-align:left; }
.sound-copy small { font-size:10px; letter-spacing:.18em; opacity:.72; }
.sound-copy b { font-size:12px; font-weight:700; }

.newspaper-modal { visibility:hidden; position:fixed; z-index:120; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .35s,visibility .35s; }
.newspaper-modal.is-open { visibility:visible; opacity:1; }
.modal-backdrop { position:absolute; inset:0; background:rgba(18,20,22,.78); backdrop-filter:blur(4px); }
.newspaper-wrap { position:relative; z-index:1; width:min(560px,82vw); }
.close-paper { position:absolute; z-index:4; top:-42px; right:0; width:32px; height:32px; border:1px solid #eee; border-radius:50%; background:transparent; color:#fff; font-size:24px; }
.paper-wheel-hint { position:absolute; z-index:4; top:-34px; left:50%; width:max-content; transform:translateX(-50%); color:#f8f3e6; font-size:13px; letter-spacing:.08em; }
.newspaper-viewport { position:relative; width:min(54vw,520px); height:min(80vh,780px); margin:auto; overflow:hidden; box-shadow:0 21px 60px rgba(0,0,0,.55); background:#eee2ca; cursor:grab; touch-action:none; }
.newspaper-viewport.is-dragging { cursor:grabbing; }
.newspaper { display:flex; width:300%; height:100%; transform:translate3d(0,0,0); transition:transform .48s cubic-bezier(.22,.72,.22,1); will-change:transform; }
.newspaper-viewport.is-dragging .newspaper { transition:none; }
.paper-image { position:relative; flex:0 0 33.333%; height:100%; margin:0; background:#f2e7d2; }
.paper-image img { width:100%; height:100%; object-fit:fill; }
.paper-date { position:absolute; top:3.1%; left:4%; width:21%; min-height:3.6%; padding:.25% 1%; color:#27221c; background:#f6ecd9; font-family:var(--serif); font-size:clamp(8px,1vw,13px); line-height:1.7; white-space:nowrap; }
.paper-pagination { display:flex; justify-content:center; gap:9px; margin-top:13px; }
.paper-pagination button { width:34px; height:26px; border:1px solid #b7a586; color:#eadcc7; background:transparent; font:12px Georgia,serif; transition:.2s; }
.paper-pagination button.is-active,.paper-pagination button:hover { color:#412f23; background:#e8d9bf; }
body.paper-open { overflow:hidden; }

.postwar-scroll { position:relative; height:720vh; background:#07090a; color:#f2ede5; }
.war-zoom-stage { position:sticky; top:0; height:100vh; overflow:hidden; background:#07090a; isolation:isolate; }
.postwar-panel { position:absolute; inset:0; visibility:hidden; opacity:0; overflow:hidden; background:#07090a; }
.postwar-panel:first-child { visibility:visible; opacity:1; }
.postwar-panel .scene-bg { z-index:0; transform-origin:50% 50%; will-change:transform,filter; filter:saturate(1.04) contrast(1.06); }
.postwar-panel::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(6,8,9,.46) 0%,rgba(6,8,9,.22) 24%,rgba(6,8,9,.04) 48%,transparent 66%); }
.postwar-bg-1 { background-image:url("assets/postwar-illustration-01.png"); }
.postwar-bg-2 { background-image:url("assets/postwar-illustration-02.png"); }
.postwar-bg-3 { background-image:url("assets/postwar-illustration-03.png"); }
.postwar-bg-4 { background-image:url("assets/postwar-illustration-04.png"); }
.postwar-bg-5 { background-image:url("assets/postwar-illustration-05.png"); }
.postwar-bg-6 { background-image:url("assets/postwar-illustration-06.png"); }
.postwar-bg-7 { background-image:url("assets/postwar-illustration-07.png"); }
.postwar-copy { z-index:3; top:17vh; left:8vw; max-width:500px; color:#f3eee5; text-shadow:0 2px 10px #070808; padding-left:clamp(20px,2.4vw,38px); }
.postwar-copy::before { background:linear-gradient(to bottom,rgba(215,155,114,.95),rgba(215,155,114,.12)); }
.postwar-copy .eyebrow { color:#d99b72; }
.postwar-copy h2 { font-size:clamp(38px,4.8vw,74px); line-height:1.12; }
.vertical-turn-cue { position:absolute; z-index:5; right:7vw; bottom:7vh; padding:11px 15px; color:#e8ddd0; border:1px solid #9c8a78; background:rgba(23,26,27,.83); font-size:12px; letter-spacing:.12em; opacity:0; }
.war-zoom-orbit { position:absolute; z-index:2; left:50%; top:50%; width:86vmin; transform:translate(-50%,-50%); opacity:.16; color:#d99b72; pointer-events:none; }
.war-zoom-orbit circle,.war-zoom-orbit path { fill:none; stroke:currentColor; stroke-width:1; opacity:.55; }
.war-zoom-counter { position:absolute; z-index:5; right:6vw; top:12vh; display:flex; align-items:baseline; gap:8px; color:#d9cec0; font-family:Georgia,serif; text-shadow:0 2px 12px #000; }
.war-zoom-counter span { font-size:10px; letter-spacing:.2em; opacity:.65; }
.war-zoom-counter strong { color:#d99b72; font-size:42px; font-weight:400; }
.war-zoom-counter b { font-weight:400; opacity:.65; }
.war-zoom-hint { position:absolute; z-index:5; left:50%; bottom:5vh; transform:translateX(-50%); color:#d9cec0; font-size:12px; letter-spacing:.16em; text-shadow:0 2px 12px #000; transition:opacity .3s; }
.war-zoom-hint i { display:inline-block; margin-left:8px; color:#de956b; font-style:normal; animation:war-hint 1.6s ease-in-out infinite; }
@keyframes war-hint { 50% { transform:translateY(7px); } }

.vertical-report { position:relative; overflow:hidden; color:#e8ece7; background:#0d1214; }
.vertical-report::before { content:""; position:absolute; z-index:0; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(8.333vw - 1px),rgba(220,228,223,.028) calc(8.333vw - 1px),rgba(220,228,223,.028) 8.333vw); }
.report-art-bg { position:absolute; z-index:0; inset:0; pointer-events:none; opacity:.04; background:url("assets/report-background-v2.png") center top/cover repeat-y; transform:translateY(calc(var(--report-bg-y,0) * -.04)); }
.report-cover,.report-section,.report-ending { position:relative; z-index:2; }
.report-cover { min-height:100vh; display:flex; align-items:flex-end; overflow:hidden; padding:12vh 8vw; isolation:isolate; background:#0a0e10; }
.report-cover::after { content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(6,9,10,.93) 0%,rgba(6,9,10,.74) 35%,rgba(6,9,10,.12) 72%),linear-gradient(0deg,rgba(6,9,10,.8),transparent 55%); }
.report-cover-image { position:absolute; z-index:0; inset:0; min-height:0; border-radius:0; background:url("assets/aftermath.png") center/cover no-repeat; box-shadow:none; clip-path:none; filter:saturate(.72) contrast(1.08); transform:scale(1.015); }
.report-cover-copy { position:relative; z-index:2; max-width:790px; padding-left:clamp(22px,2.2vw,38px); border-left:2px solid #d7865d; text-shadow:0 3px 22px rgba(0,0,0,.58); }
.report-kicker,.report-index,.drawn-chart-copy span,.user-chart-copy span,.cooperation-map-copy span,.conflict-ledger-notes span { margin:0 0 18px; color:#df9568; font-size:12px; font-weight:700; letter-spacing:.18em; }
.report-cover h2,.report-section h2,.report-ending h2 { margin:0; font-family:var(--serif); font-size:clamp(38px,5vw,78px); font-weight:600; line-height:1.16; letter-spacing:.025em; text-wrap:balance; }
.report-cover h2 { max-width:8em; font-size:clamp(54px,7.2vw,116px); line-height:1.04; letter-spacing:.04em; }
.report-cover-copy > p:not(.report-kicker),.report-section p,.report-ending p { line-height:2; color:#aeb8b9; }
.report-cover-copy > p:not(.report-kicker) { max-width:620px; margin:28px 0; font-size:clamp(15px,1.5vw,21px); color:#d2d5d2; }
.report-cover-copy > span { color:#9ca6a8; font-size:12px; letter-spacing:.12em; }
.report-section { min-height:auto; padding:12vh 8vw; background:transparent; }
.report-narrow { max-width:870px; }
.report-intro { min-height:82vh; display:flex; align-items:center; }
.report-reveal { opacity:0; transform:translateY(34px); transition:opacity .75s ease,transform .75s ease; }
.report-reveal.is-visible { opacity:1; transform:translateY(0); }
.report-cover.report-reveal { opacity:1; transform:none; }

.metric-stage { padding-top:4vh; }
.metric-route { position:absolute; inset:2vh 5vw auto; width:90vw; height:70vh; pointer-events:none; opacity:.5; filter:drop-shadow(0 0 10px rgba(226,154,112,0.5)); }
.metric-route path { fill:none; stroke:url(#route-glow); stroke-width:3; stroke-dasharray:8 14; stroke-linecap:round; }
.metric-route circle { fill:#f8b500; filter:drop-shadow(0 0 12px #f8b500); }
.metric-grid { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0; max-width:none; margin:auto; border-top:1px solid rgba(206,218,215,.28); border-bottom:1px solid rgba(206,218,215,.2); }
.metric-card { min-height:390px; padding:46px 3.4vw 42px; border:0; border-right:1px solid rgba(206,218,215,.2); background:transparent; backdrop-filter:none; box-shadow:none; }
.metric-card:first-child { padding-left:0; }
.metric-card:last-child { padding-right:0; border-right:0; }
.metric-card span { color:#d7dedb; font-size:12px; letter-spacing:.13em; }
.metric-card strong { display:block; margin:56px 0 28px; color:transparent; background:linear-gradient(135deg,#fceabb,#f8b500,#ff6a00); -webkit-background-clip:text; background-clip:text; font:600 clamp(54px,7.5vw,100px)/1 Georgia,serif; letter-spacing:-.03em; filter:drop-shadow(0 4px 12px rgba(255,100,0,0.15)); }
.metric-card p { margin:0 0 22px; font-size:14px; }
.metric-card a,.peacekeeping-copy a,.news-card { color:inherit; }
.metric-card a { color:#cfd8d5; font-size:12px; text-decoration:none; border-bottom:1px solid rgba(207,216,213,.5); }
.metric-alert strong { background:linear-gradient(135deg,#ff9a9e,#fecfef,#fec163,#de4313); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 4px 16px rgba(220,40,20,0.2)); }
.displacement-trend { max-width:none; margin:12vh auto 0; padding:7vh 0 5vh; border:0; border-top:1px solid rgba(205,219,216,.24); border-bottom:1px solid rgba(205,219,216,.16); background:transparent; }
.displacement-trend figcaption { display:flex; justify-content:space-between; gap:20px; color:#d9dedb; font-size:13px; letter-spacing:.06em; }
.displacement-trend figcaption b { color:#89979a; font-weight:400; }
.displacement-trend svg { width:100%; margin-top:20px; }
.chart-grid path { stroke:rgba(207,216,213,.14); }
.trend-area { fill:url(#trendFill); }
.trend-line { fill:none; stroke:#e28c62; stroke-width:5; stroke-linecap:round; }
.trend-points circle { fill:#e28c62; filter:drop-shadow(0 0 7px #e4a27a); }
.chart-labels text { fill:#b9c2c2; font:22px Georgia,serif; }
.displacement-trend > p { margin:18px 0 0; color:#9eaaac; font-size:12px; line-height:1.8; }

.child-section { min-height:88vh; display:grid; grid-template-columns:.8fr 1.2fr; gap:8vw; align-items:center; }
.child-visual { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; max-width:650px; }
.child-visual i { aspect-ratio:1; border-radius:50%; background:#c9c1b3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.child-visual .is-conflict { background:#a34739; box-shadow:0 0 0 12px rgba(163,71,57,.18); }
.child-copy .report-index { color:#e07d61; }
.impact-flow-copy { max-width:820px; margin:0 auto; text-align:center; }
.impact-flow-copy h2 { font-size:clamp(32px,4.6vw,68px); }
.impact-flow { max-width:1050px; margin:6vh auto 0; }
.impact-flow svg { width:100%; overflow:visible; }
.flow-lines path { fill:none; stroke:#d18a64; stroke-width:3; stroke-dasharray:8 12; opacity:.7; }
.flow-center circle { fill:rgba(163,71,57,.28); stroke:#d18a64; }
.flow-node circle { fill:rgba(31,41,45,.88); stroke:#6f807d; }
.flow-center text,.flow-node text { fill:#e8ece7; font:700 26px var(--sans); text-anchor:middle; }
.flow-node text:last-child { fill:#aeb8b9; font-size:18px; }

.conflict-ledger-heading { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.65fr); gap:8vw; align-items:end; }
.conflict-ledger-visual { margin:7vh 0 0; }
.conflict-ledger-frame { padding:0; border:0; background:transparent; box-shadow:none; }
.conflict-ledger-frame img { width:100%; filter:saturate(.78) contrast(1.05); }
.conflict-ledger-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:5vh; border-top:1px solid rgba(205,219,216,.22); border-bottom:1px solid rgba(205,219,216,.16); }
.conflict-ledger-notes article { padding:32px 3vw; border:0; border-right:1px solid rgba(205,219,216,.18); background:transparent; }
.conflict-ledger-notes article:first-child { padding-left:0; }
.conflict-ledger-notes article:last-child { padding-right:0; border-right:0; }
.conflict-ledger-notes strong { display:block; color:#ead7bd; font:400 34px/1.1 Georgia,serif; }
.conflict-ledger-notes p { margin:15px 0 0; font-size:13px; }

.spending-chart { max-width:none; margin:10vh auto 0; padding:7vh 0; border:0; border-top:1px solid rgba(205,219,216,.28); border-bottom:1px solid rgba(205,219,216,.18); background:transparent; }
.spending-number { position:relative; display:flex; align-items:end; justify-content:space-between; padding-bottom:38px; border-bottom:1px solid #536067; }
.spending-number strong { color:#e69b6e; font:400 clamp(46px,7vw,100px)/1 Georgia,serif; }
.spending-number span { color:#aab4b6; font-size:12px; }
.spending-ring { width:132px; height:132px; border:1px solid #d18a64; border-radius:50%; display:grid; place-items:center; text-align:center; color:#e7c2a8; }
.spending-ring i { display:block; font:400 30px Georgia,serif; font-style:normal; }
.spending-ring b { display:block; font-size:11px; font-weight:400; }
.bar-row { display:grid; grid-template-columns:80px 1fr 140px; gap:20px; align-items:center; margin-top:24px; color:#bac5c3; }
.bar-row i { display:block; height:12px; background:linear-gradient(90deg,#e69b6e,#7c8f8b); width:var(--bar); border-radius:999px; }
.bar-row b { font-weight:400; font-size:12px; color:#89979a; }

.peace-divider { min-height:92vh; display:flex; align-items:center; color:#1e292a; background:linear-gradient(180deg,#182024 0%,#dcd5c9 72%,#e8e1d6 100%); }
.peace-divider-copy { max-width:920px; padding-top:26vh; color:#1e292a; }
.peace-divider .report-index { color:#9b4f37; }
.peace-divider h2,.peace-divider p { color:#1e292a; text-shadow:0 1px rgba(255,255,255,.3); }
.china-section { color:#202a2b; isolation:isolate; background:#e8e1d6; }
.china-section::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 83% 6%,rgba(185,129,78,.18),transparent 26%),repeating-linear-gradient(90deg,transparent 0,transparent calc(8.333vw - 1px),rgba(40,52,52,.045) calc(8.333vw - 1px),rgba(40,52,52,.045) 8.333vw); filter:none; }
.china-section h2,.china-section h3 { color:#202a2b; }
.china-section p { color:#4d5a59; }
.china-section .report-kicker,.china-section .report-index,.china-section .drawn-chart-copy span,.china-section .user-chart-copy span,.china-section .cooperation-map-copy span { color:#9b4f37; }
.china-heading { max-width:880px; margin-bottom:10vh; }
.growth-list { max-width:none; margin:auto; border-top:1px solid rgba(35,48,48,.24); }
.growth-card { padding:48px 0; border-bottom:1px solid rgba(35,48,48,.2); }
.growth-card > div:first-child { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:25px; align-items:end; }
.growth-card h3 { margin:0; font:600 25px/1.4 var(--serif); }
.growth-card strong { color:#9d5138; font:400 42px/1 Georgia,serif; }
.growth-card strong em { color:#687473; font-size:16px; font-style:normal; }
.growth-track { height:4px; margin-top:28px; background:rgba(44,59,58,.18); border-radius:0; overflow:hidden; }
.growth-track i { display:block; height:100%; width:var(--growth); background:linear-gradient(90deg,#9d5138,#d1a25d); }

.drawn-chart-story,.user-chart-grid { max-width:none; margin:12vh auto 0; }
.drawn-chart,.user-chart-card,.cooperation-map-story { display:grid; grid-template-columns:.78fr 1.22fr; gap:5vw; align-items:center; margin:0; padding:10vh 0; border-top:1px solid rgba(35,48,48,.22); }
.drawn-chart:nth-child(even),.user-chart-card:nth-child(even) { grid-template-columns:1.22fr .78fr; }
.drawn-chart:nth-child(even) .drawn-chart-copy,.user-chart-card:nth-child(even) .user-chart-copy { order:2; }
.drawn-chart-copy h3,.user-chart-copy h3,.cooperation-map-copy h3,.news-card h3 { margin:0 0 18px; font-family:var(--serif); font-weight:600; line-height:1.35; letter-spacing:.02em; text-wrap:balance; }
.drawn-chart-copy h3,.user-chart-copy h3,.cooperation-map-copy h3 { font-size:clamp(25px,3vw,42px); }
.drawn-chart-copy p,.user-chart-copy p,.cooperation-map-copy p { color:#4d5a59; line-height:1.9; }
.drawn-chart-frame,.user-chart-media,.cooperation-map-media { overflow:hidden; padding:0; border:0; background:transparent; box-shadow:none; transform:none; }
.drawn-chart-frame img,.user-chart-media img,.cooperation-map-media img { width:100%; height:auto; object-fit:contain; }
.china-section .drawn-chart-frame img,.china-section .user-chart-media img,.china-section .cooperation-map-media img { mix-blend-mode:multiply; }
.drawn-chart figcaption,.user-chart-card figcaption,.cooperation-map-story figcaption { grid-column:1/-1; padding-top:16px; color:#687473; border-top:1px solid rgba(35,48,48,.16); font-size:12px; letter-spacing:.08em; }
.cooperation-chapter { margin-top:15vh; padding-top:12vh; border-top:1px solid rgba(35,48,48,.3); }
.cooperation-heading { max-width:850px; }
.map-year-controls { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.map-year-controls button { padding:8px 12px; color:#445251; border:1px solid rgba(35,48,48,.28); background:transparent; cursor:default; pointer-events:none; }
.map-year-controls button.is-active,.map-year-controls button:hover { color:#f6eee1; background:#9b4f37; }
.cooperation-map-media { position:relative; }
.cooperation-map-media img { transition:opacity .28s; }
.cooperation-map-media img.is-changing { opacity:.35; }
.cooperation-map-media strong { position:absolute; left:18px; bottom:16px; padding:5px 8px; background:rgba(35,45,44,.82); color:#f4e7cf; font:700 13px Georgia,serif; letter-spacing:.12em; }

.peace-development-chart { margin:12vh auto 0; max-width:none; padding:7vh 0 0; border:0; border-top:1px solid rgba(35,48,48,.24); }
.peace-development-chart figcaption { color:#9b4f37; font-weight:700; letter-spacing:.14em; }
.radar-like { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:4vh; border-top:1px solid rgba(35,48,48,.2); border-bottom:1px solid rgba(35,48,48,.2); }
.radar-like i { position:relative; display:grid; place-items:end center; min-height:180px; padding:24px 12px; border-right:1px solid rgba(35,48,48,.16); overflow:hidden; font-style:normal; }
.radar-like i::before { content:""; position:absolute; left:0; right:0; bottom:0; height:var(--reach); background:linear-gradient(180deg,rgba(155,79,55,.03),rgba(155,79,55,.18)); }
.radar-like i:last-of-type { border-right:0; }
.radar-like span { position:relative; z-index:1; color:#303e3d; text-align:center; }
.radar-like > b,.radar-like > em,.radar-like > strong { display:none; }
.peacekeeping-section { min-height:72vh; display:grid; grid-template-columns:1fr 1fr; gap:10vw; align-items:center; background:rgba(38,51,47,.5); }
.peacekeeping-number strong { display:block; color:#e4c381; font:400 clamp(48px,7.5vw,110px)/1 Georgia,serif; white-space:nowrap; }
.peacekeeping-number span { display:block; margin-top:20px; color:#b9c7c0; }
.news-section { padding-bottom:18vh; }
.news-heading { max-width:870px; margin-bottom:8vh; }
.news-grid { display:block; border:0; background:transparent; }
.news-card,.news-card-light { display:grid; grid-template-columns:110px minmax(240px,.9fr) minmax(260px,1.1fr) 60px; gap:3vw; align-items:center; min-height:0; padding:7vh 0; border:0; border-top:1px solid rgba(213,221,216,.28); color:#e6e8e4; background:transparent; text-decoration:none; transition:transform .3s,color .3s; }
.news-card:hover,.news-card-light:hover { color:#fff; transform:translateX(10px); }
.news-card time { color:#df9568; font:400 22px Georgia,serif; }
.news-card h3 { font-size:clamp(22px,2.3vw,34px); margin:0; }
.news-card p { margin:0; color:#9fa9aa; }
.news-card span { margin:0; text-align:right; color:#d8b68d; }
.report-ending { display:grid; place-items:center; min-height:75vh; padding:12vh 9vw; text-align:center; background:#0e1315; }
.report-ending h2 { margin:10px 0 28px; }
.report-ending button { margin-top:20px; padding:13px 22px; color:#f4eee4; border:1px solid #bd9678; background:transparent; transition:.25s; }
.report-ending button:hover { color:#1c2225; background:#d8b29a; }
.report-ending small { display:block; max-width:900px; margin-top:26px; color:#7e8989; line-height:1.8; }
.audio-credit a { color:#d8b68d; }

/* Interactive data-story system */
.viz-shell {
  --viz-fg:#f4eee6;
  --viz-muted:#8b9998;
  --viz-grid:rgba(230,90,60,0.15);
  --viz-panel:rgba(14,18,20,0.85);
  position:relative;
  width:100%;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(220,100,70,0.25);
  background:
    radial-gradient(circle at 78% 18%,rgba(200,60,40,0.18),transparent 45%),
    linear-gradient(145deg,rgba(30,35,40,0.6),rgba(10,12,14,0.9));
  box-shadow:inset 0 0 120px rgba(0,0,0,0.8),0 26px 70px rgba(0,0,0,0.3);
  color:var(--viz-fg);
  isolation:isolate;
  transition:border-color .35s,box-shadow .35s;
}
.viz-shell.is-scroll-active { border-color:rgba(230,120,80,0.5); box-shadow:inset 0 0 120px rgba(0,0,0,0.8),0 30px 80px rgba(0,0,0,.42); }
.viz-light {
  --viz-fg:#111818;
  --viz-muted:#6b7271;
  --viz-grid:rgba(30,50,45,0.06);
  --viz-panel:#ffffff;
  background:#fdfbf7;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 12px 40px rgba(0,0,0,0.03);
}
.viz-light.is-scroll-active { border-color:rgba(0,0,0,0.12); box-shadow:0 20px 60px rgba(0,0,0,0.08); }
.viz-head {
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:flex-start;
  padding:24px 26px 17px;
  border-bottom:1px solid var(--viz-grid);
}
.viz-head > div { display:grid; gap:7px; }
.viz-head span { color:#df9568; font:700 10px/1.2 var(--sans); letter-spacing:.2em; }
.viz-light .viz-head span { color:#9b4f37; }
.viz-head strong { color:var(--viz-fg); font:600 clamp(17px,1.6vw,24px)/1.35 var(--serif); letter-spacing:.025em; }
.viz-head small { max-width:270px; color:var(--viz-muted); font-size:10px; line-height:1.65; text-align:right; letter-spacing:.05em; }
.viz-controls { position:relative; z-index:10; display:flex; flex-wrap:wrap; gap:16px; min-height:32px; padding:12px 26px 0; }
.viz-controls:empty { display:none; }
.viz-controls button {
  height:32px;
  padding:0 4px;
  color:var(--viz-muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  border-radius:0;
  cursor:pointer;
  transition:color .2s, border-color .2s;
  font-family: system-ui, -apple-system, sans-serif;
}
.viz-controls button:hover,.viz-controls button:focus { color:var(--viz-fg); outline:none; }
.viz-controls button.is-active { color:var(--viz-fg); border-color:var(--viz-fg); }
.viz-stage { position:relative; min-height:clamp(330px,42vw,610px); padding:8px 18px 0; }
.viz-stage::after {
  content:"";
  position:absolute;
  z-index:8;
  left:4%;
  right:4%;
  top:calc(var(--viz-scroll,0) * 100%);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(226,144,98,.68),transparent);
  box-shadow:0 0 16px rgba(226,144,98,.28);
  opacity:calc(.18 + var(--viz-scroll,0) * .42);
  pointer-events:none;
}
.viz-stage svg { display:block; width:100%; height:auto; overflow:visible; }
.viz-stage svg [tabindex] { pointer-events:none; }
/* Readout removed, replaced entirely by tooltip */
.viz-tooltip {
  position:absolute;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
  max-width:260px;
  padding:14px 18px;
  color:var(--viz-fg);
  background:var(--viz-panel);
  border:1px solid rgba(227,160,103,.45);
  border-radius:4px;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-120%);
  transition:opacity .2s, transform .1s ease-out;
  backdrop-filter:blur(8px);
  font-family: system-ui, -apple-system, sans-serif;
}
.viz-light .viz-tooltip { background:#ffffff; border-color:rgba(0,0,0,0.08); box-shadow:0 10px 30px rgba(0,0,0,0.08); }
.viz-light .viz-tooltip::after { background:#ffffff; border-right-color:rgba(0,0,0,0.08); border-bottom-color:rgba(0,0,0,0.08); }
.viz-tooltip::after { content:""; position:absolute; bottom:-6px; left:50%; width:10px; height:10px; background:inherit; border-right:inherit; border-bottom:inherit; transform:translateX(-50%) rotate(45deg); }
.viz-tooltip.is-visible { opacity:1; }
.viz-tooltip span { color:#df9568; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.viz-light .viz-tooltip span { color:var(--viz-muted); font-weight:600; letter-spacing:.08em; }
.viz-tooltip strong { font:400 24px/1.1 Georgia,var(--serif); }
.viz-light .viz-tooltip strong { color:var(--viz-fg); font-weight:600; }
.viz-tooltip small { color:var(--viz-muted); font-size:11px; line-height:1.55; }
.viz-error { padding:40px; color:var(--viz-muted); }

.viz-grid-line { stroke:var(--viz-grid); stroke-width:1; stroke-dasharray:3 9; }
.viz-axis-label { fill:var(--viz-muted); font:12px system-ui, -apple-system, sans-serif; }
.viz-area { opacity:.9; transition:opacity .8s ease; }
.viz-line {
  fill:none;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:2800;
  stroke-dashoffset:2800;
  transition:stroke-dashoffset 2.2s cubic-bezier(.2,.8,.2,1);
}
.report-reveal.is-visible .viz-line,.viz-shell.is-visible .viz-line { stroke-dashoffset:0; }
.viz-point {
  stroke:var(--viz-panel);
  stroke-width:3;
  cursor:pointer;
  transition:r .25s cubic-bezier(.34,1.56,.64,1),filter .2s,stroke-width .2s;
}
.viz-point:hover,.viz-point:focus,.viz-point.is-active { r:11; outline:none; stroke-width:0; filter:drop-shadow(0 0 12px currentColor); }
.viz-guide { stroke:#d38a65; stroke-width:1; stroke-dasharray:5 7; transition:opacity .2s; }
.viz-orbit { fill:none; stroke:var(--viz-grid); stroke-width:1.2; stroke-dasharray:5 9; }
.viz-rose-petal {
  stroke:rgba(255,255,255,.22);
  stroke-width:1;
  cursor:pointer;
  opacity:.84;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .22s,filter .22s,transform .22s;
}
.viz-rose-petal:hover,.viz-rose-petal:focus,.viz-rose-petal.is-active { opacity:1; filter:drop-shadow(0 8px 12px rgba(0,0,0,.28)); transform:scale(1.025); outline:none; }
.viz-rose-label { fill:var(--viz-muted); font:600 15px var(--sans); }
.viz-center-number { fill:var(--viz-fg); font:400 36px Georgia,serif; }
.viz-center-label { fill:var(--viz-muted); font:11px var(--sans); letter-spacing:.1em; }

.child-visual.viz-shell { display:block; max-width:none; }
.viz-bubble-group { cursor:pointer; outline:none; }
.viz-bubble { opacity:.72; stroke:rgba(255,255,255,.18); stroke-width:2; transition:opacity .25s,filter .25s,transform .25s; transform-box:fill-box; transform-origin:center; }
.viz-bubble-group:hover .viz-bubble,.viz-bubble-group:focus .viz-bubble,.viz-bubble-group.is-active .viz-bubble { opacity:1; filter:drop-shadow(0 11px 18px rgba(0,0,0,.28)); transform:scale(1.045); }
.viz-bubble-number { fill:#fff8ee; font:400 28px Georgia,serif; pointer-events:none; }
.viz-bubble-label { fill:#f0e5d6; font:600 14px var(--sans); pointer-events:none; }

.viz-network-link { fill:none; stroke:#9a6b56; stroke-width:3; stroke-dasharray:7 12; opacity:.38; transition:opacity .25s,stroke-width .25s; animation:network-flow 3.2s linear infinite; }
.viz-network-link.is-active { opacity:1; stroke:#df9568; stroke-width:5; }
@keyframes network-flow { to { stroke-dashoffset:-38; } }
.viz-network-center circle:first-child { fill:rgba(163,71,57,.18); stroke:#b96c51; animation:network-pulse 2.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.viz-network-center circle:nth-child(2) { fill:#713d34; stroke:#e1a078; }
@keyframes network-pulse { 50% { transform:scale(1.12); opacity:.55; } }
.viz-network-center text { fill:#f6ecdf; font:700 21px var(--sans); }
.viz-network-node { cursor:pointer; outline:none; }
.viz-network-node circle { fill:rgba(34,45,47,.92); stroke:#788c88; stroke-width:2; transition:fill .25s,stroke .25s,stroke-width .25s,filter .25s; }
.viz-network-node text { fill:#e9ece7; font:700 20px var(--sans); pointer-events:none; }
.viz-network-node text:last-child { fill:#9ba8a6; font-size:13px; font-weight:400; }
.viz-network-node:hover circle,.viz-network-node:focus circle,.viz-network-node.is-active circle { fill:#70453a; stroke:#e0a177; stroke-width:4; filter:drop-shadow(0 9px 14px rgba(0,0,0,.28)); }

.viz-ledger-axis { stroke:var(--viz-grid); stroke-width:2; }
.viz-ledger-bar { cursor:pointer; transition:opacity .2s,filter .2s; }
.viz-ledger-bar.is-left { fill:#b55445; }
.viz-ledger-bar.is-right { fill:#668d8a; }
.viz-ledger-bar:hover,.viz-ledger-bar:focus,.viz-ledger-bar.is-active { opacity:1; filter:drop-shadow(0 0 7px rgba(232,180,135,.46)); outline:none; }
.viz-ledger-period { fill:var(--viz-muted); font:12px Georgia,serif; }
.viz-ledger-value { fill:var(--viz-fg); font:13px Georgia,serif; }
.viz-ledger-heading { fill:var(--viz-fg); font:600 18px var(--serif); }

.viz-slope-path { fill:none; stroke:#9b4f37; stroke-width:16; stroke-linecap:round; opacity:.72; stroke-dasharray:1400; stroke-dashoffset:1400; transition:stroke-dashoffset 1.6s ease; }
.report-reveal.is-visible .viz-slope-path { stroke-dashoffset:0; }
.viz-slope-point { fill:#e6d8bd; stroke:#9b4f37; stroke-width:6; }
.viz-slope-point.is-end { fill:#9b4f37; }
.viz-slope-year { fill:var(--viz-muted); font:15px Georgia,serif; }
.viz-slope-value { fill:var(--viz-fg); font:400 25px Georgia,serif; }
.viz-slope-ratio { fill:#9b4f37; font:400 44px Georgia,serif; }

.viz-ring { fill:none; stroke:#65979d; stroke-width:25; opacity:.5; cursor:pointer; transition:opacity .2s,stroke-width .2s,filter .2s; }
.viz-ring:hover,.viz-ring:focus,.viz-ring.is-active { opacity:1; stroke-width:31; filter:drop-shadow(0 7px 9px rgba(47,87,89,.25)); outline:none; }
.viz-spiral-path { fill:none; stroke:#9b4f37; stroke-width:8; stroke-linecap:round; opacity:.35; stroke-dasharray:11 14; animation:spiral-flow 5s linear infinite; }
@keyframes spiral-flow { to { stroke-dashoffset:-100; } }
.viz-spiral-node { cursor:pointer; outline:none; }
.viz-spiral-node circle { fill:#b26b4e; stroke:#f0dfc3; stroke-width:3; transition:transform .2s,filter .2s; transform-box:fill-box; transform-origin:center; }
.viz-spiral-node text { fill:var(--viz-fg); font:13px Georgia,serif; }
.viz-spiral-node:hover circle,.viz-spiral-node:focus circle,.viz-spiral-node.is-active circle { transform:scale(1.35); filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.viz-mission-dot { fill:#d8bf7a; stroke:#f4ead9; stroke-width:1; cursor:pointer; transform-box:fill-box; transform-origin:center; transition:transform .2s,filter .2s; }
.viz-mission-dot:hover,.viz-mission-dot:focus { transform:scale(1.8); filter:drop-shadow(0 0 7px #d8bf7a); outline:none; }

.growth-list.report-reveal { display:block; margin:0; padding:0; border:0; }
.growth-list figcaption { padding:14px 4px; color:#687473; font-size:11px; line-height:1.7; }
.drawn-chart-frame .viz-shell,.user-chart-media .viz-shell { min-height:0; }
.drawn-chart-frame .viz-stage,.user-chart-media .viz-stage { min-height:clamp(300px,34vw,520px); }
.peacekeeping-number .viz-shell { margin-top:42px; }
.peacekeeping-number .viz-stage { min-height:280px; }
.peace-development-chart > .viz-shell { margin-top:4vh; }

@media (max-width:760px), (max-height:500px) {
  .prelude-copy { left:7vw; top:8vh; width:72vw; }
  .prelude-copy h1 { font-size:clamp(32px,6vw,52px); }
  .prelude-copy > p:not(.prelude-kicker) { font-size:clamp(11px,1.7vw,13px); line-height:1.7; }
  .prelude-context { right:5vw; bottom:13vh; width:54vw; }
  .prelude-context div { min-height:88px; padding:13px; }
  .cover-enter { bottom:3vh; }
  .scene-copy { padding-left:20px; }
  .opening-copy { top:9vh; right:4.5vw; left:auto; width:min(44vw,560px); max-width:none; }
  .opening-copy h1 { font-size:clamp(34px,5.4vw,46px); }
  .opening-copy h1 span:last-child { margin-left:0; }
  .opening-copy .eyebrow::after { width:34px; }
  .opening-copy p:not(.eyebrow) { max-width:21em; margin-top:12px; font-size:clamp(11px,1.55vw,13px); line-height:1.75; }
  .scene-copy h2 { font-size:clamp(28px,9vw,48px); }
  .walk-copy,.bench-copy,.radio-copy,.commute-copy,.walk-two-copy,.gate-copy,.school-copy { left:29vw; max-width:62vw; transform:scale(.86); transform-origin:top left; }
  .parents { left:15vw; width:17vw; }
  .traveler { height:min(39vh,310px); bottom:9vh; }
  .farewell { display:none; }
  .turn-hint { left:auto; right:7vw; font-size:10px; }
  .bird-hotspot { right:13vw; top:30vh; }
  .radio-control { right:13vw; bottom:26vh; }
  .kiosk-hotspot { left:58vw; bottom:22vh; }
  .newspaper-viewport { height:78vh; width:52vw; }
  .paper-wheel-hint { font-size:10px; }
  .postwar-scroll { height:620vh; }
  .postwar-copy h2,.classroom-copy h2 { font-size:clamp(31px,10vw,52px); }
  .vertical-turn-cue { right:7vw; left:7vw; text-align:center; }
  .war-zoom-orbit { width:100vmin; opacity:.22; }
  .war-zoom-counter { right:6vw; }
  .report-cover,.child-section,.conflict-ledger-heading,.peacekeeping-section,.drawn-chart,.drawn-chart:nth-child(even),.user-chart-card,.user-chart-card:nth-child(even),.cooperation-map-story { grid-template-columns:1fr; }
  .report-section { padding:14vh 7vw; }
  .metric-grid,.conflict-ledger-notes,.radar-like { grid-template-columns:1fr; }
  .metric-card { min-height:350px; }
  .drawn-chart:nth-child(even) .drawn-chart-copy,.user-chart-card:nth-child(even) .user-chart-copy { order:0; }
  .spending-chart { padding:28px; }
  .spending-number,.bar-row { display:block; }
  .spending-ring { margin:25px auto 0; }
  .bar-row i { margin:10px 0; }
  .news-card,.news-card-light { grid-template-columns:1fr; gap:18px; padding:6vh 0; }
  .news-card span { text-align:left; }
  .viz-head { display:grid; padding:18px; }
  .viz-head small { text-align:left; }
  .viz-controls { padding:10px 18px 0; }
  .viz-stage { min-height:320px; padding:4px; }
  .viz-readout { grid-template-columns:1fr; gap:7px; padding:15px 18px; }
  .viz-tooltip { display:none; }
  .viz-axis-label { font-size:10px; }
  .viz-rose-label { font-size:11px; }
}

@media (max-width:520px) and (orientation:portrait) {
  .prelude-copy { top:7vh; width:86vw; }
  .prelude-copy h1 { font-size:clamp(33px,10vw,48px); }
  .prelude-copy > p:not(.prelude-kicker) { max-width:32em; }
  .prelude-copy .prelude-note { margin-top:14px; }
  .prelude-context { left:7vw; right:7vw; bottom:10vh; width:auto; }
  .prelude-context div { min-height:82px; padding:12px 9px; }
  .prelude-context dd { font-size:11px; }
  .cover-enter { right:7vw; bottom:3vh; }
  .opening-copy { top:10vh; right:7vw; left:7vw; width:auto; }
  .opening-copy h1 { font-size:clamp(34px,10vw,48px); }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .bird-flock.is-flying .bird { opacity:.94; transform:translate(7vw,-5vh) scale(.72); background-position:0 0; }
}