/* V2: clear labels, restrained guidance and continuous scene transitions. */
:root{--ink:#35413f;--muted:#626d68;--blue:#41758a}
button:focus-visible,canvas:focus-visible{outline:2px solid #41758a;outline-offset:4px}
nav button{color:#67756e;font-size:13px}nav button[aria-current="step"]{color:#285f73}.tiny{color:#65746e}
body[data-scene="cover"] #header,body[data-scene="ending"] #header{opacity:0;visibility:hidden;pointer-events:none}
.cover{position:absolute;inset:0;animation:none}.cover-logo,.cover h1,.cover-en,.cover #start,.cover-foot{opacity:0;transform:translateY(9px);transition:opacity 1s ease,transform 1.3s var(--ease)}
.cover.arrival-ready .cover-logo,.cover.arrival-ready h1,.cover.arrival-ready .cover-en,.cover.arrival-ready #start,.cover.arrival-ready .cover-foot{opacity:1;transform:translateY(0)}.cover.arrival-ready #start{transition-delay:.22s}.cover-en,.cover-foot{color:#697b73}#arrival-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;transition:opacity .8s}#skip-arrival{position:absolute;top:4vh;right:5vw;z-index:4}.cover.arrival-ready #skip-arrival{display:none}.cover.arrival-ready #arrival-canvas{opacity:0}
#experience{transition:opacity 1s}.scene-stage{top:11vh;bottom:12vh}.story h1{font-size:clamp(30px,3.05vw,48px)}.chapter{font-size:11px;color:#667970}.story p{font-size:13px;line-height:2.05;color:#626d68;letter-spacing:.7px}.text-action{color:#386e82;gap:12px;letter-spacing:2px}.arrow{color:#608c95}.click-hint{font-family:"PingFang SC","Microsoft YaHei",sans-serif;font-size:11px;letter-spacing:1px;color:#466e7b;animation:invitation 3.2s ease-in-out infinite}.cue:before,.cue:after{animation-duration:3.2s}.cue:after{animation-delay:1.6s}.action-note{font-size:11px!important;color:#67756e!important}.story.busy .text-action,.story.busy .action-note{visibility:hidden;opacity:1}.story.busy:after{content:"自动展示中";display:block;color:#63766d;font-size:11px;letter-spacing:2px;margin-top:22px}
#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}#leaders path{fill:none;stroke:#7b9490;stroke-width:.8;opacity:.72}#leaders circle{fill:#588997;stroke:var(--paper);stroke-width:2}
.hotspot{justify-content:flex-start;gap:8px;padding:10px 9px;min-height:44px;transform:translateY(-50%);color:#3f514e;font-size:13px;letter-spacing:.4px;background:rgba(245,244,239,.95);border-radius:4px;box-shadow:0 0 12px 5px #f5f4efe6;transition:background .3s,color .3s}.hotspot:before{display:none}.hotspot:hover,.hotspot:focus-visible{background:#edf1ec;color:#265e73}.hotspot .spot{flex:none;background:#718e85;box-shadow:0 0 0 4px #e4ebe6}.hotspot .tap-label{font-size:10px;letter-spacing:1px;color:#4c7480;margin-left:2px;animation:invitation 3.2s ease-in-out infinite}.hotspot.active .spot{background:#3c7d91}.hotspot.active .spot:after{animation-duration:3.2s}.hotspot.open .spot{background:#477a8a}.hotspot.open .tap-label{animation:none;color:#63756c}.hotspot[aria-pressed="true"]{color:#405451}
#selected-part{margin-top:25px;padding-top:18px;border-top:1px solid #cbd4cd}.part-status{font-size:10px;letter-spacing:2px;color:#64776d}#selected-part h2{font-size:18px;font-weight:400;letter-spacing:1px;margin:11px 0 7px}#selected-part p{font-size:12px}
.playback-top,.playback-bottom{font-size:11px;color:#5e7167}.playback-top button{font-size:12px}.playback-bottom{font-size:10px}#timeline{height:22px}#timeline::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,#648f98 var(--progress,0%),#ccd5cd var(--progress,0%))}#timeline::-webkit-slider-thumb{width:14px;height:14px;border:2px solid #557e8c;margin-top:-5.5px}.qualitative{font-size:10px;color:#66766b;letter-spacing:1px}
.scene-tools{bottom:5vh;gap:13px;flex-wrap:wrap;max-width:80vw}.scene-tools button{font-size:12px;letter-spacing:1px;padding:11px 16px;border:1px solid #99ada5;border-radius:3px;color:#416c77;background:#f5f4efd9;transition:background .3s,box-shadow .3s}.scene-tools button:hover{background:#e9efea;box-shadow:0 3px 12px #718e7b12}.scene-tools button:disabled{color:#6e7d74;border-color:#c5d0c8;background:transparent;opacity:1}.scene-tools small{font-size:10px;color:#617269;flex-basis:100%;letter-spacing:.5px;margin-top:0}
#orbit-hint{top:48%;bottom:auto;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.8px;color:#354f52;pointer-events:none;padding:12px 17px;background:#f5f4efe8;border-radius:4px;box-shadow:0 0 24px #f5f4ef;transition:opacity .7s}#orbit-hint>span{animation-duration:2.6s}#orbit-hint small{font-size:10px;color:#53685f;margin-top:5px}body[data-scene="explore"] .scene-stage{left:28vw;right:2.5vw}body[data-scene="explore"] .story{top:19vh;width:23vw}
#micro{z-index:4;background:transparent}.micro-copy{max-width:26vw}.micro-copy p{font-size:13px;color:#5c6e66}.micro-steps button{font-size:12px;color:#68796d}.micro-steps button.active{color:#2d6379;border-bottom:1px solid #7195a0}.micro-legend{font-size:11px;color:#607067}.micro-note{font-size:10px;color:#6a796d}.dye-dot{background:#397fa4}.gel-swatch{display:inline-flex;align-items:center;gap:8px;margin-top:13px;color:#4d6a70;font-size:11px;letter-spacing:1px}.gel-swatch i{width:16px;height:12px;border-radius:50%;background:#3c799f;box-shadow:inset 1px 2px 3px #ffffff55}body[data-scene="micro"] #experience .story,body[data-scene="micro"] #experience .ground-shadow{visibility:hidden}
#ending{z-index:10}.ending-brand{transition:opacity 1.35s ease,transform 1.5s var(--ease);transform:translate(-50%,-50%) scale(.92)}.ending-brand.reveal{transform:translate(-50%,-50%) scale(1)}.slogan{transition:transform 1.5s var(--ease)}.slogan.dissolving .slogan-letter{opacity:0}#ending-particles{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}body[data-scene="ending"] #experience .story,body[data-scene="ending"] #scene-tools,body[data-scene="ending"] #hotspots,body[data-scene="ending"] #orbit-hint{visibility:hidden}body[data-scene="ending"] .scene-stage{left:28vw;right:2.5vw}
#transition{transition:opacity .22s}.transitioning #transition{opacity:.96}
@keyframes invitation{0%,100%{opacity:.68;text-shadow:none}48%{opacity:1;text-shadow:0 0 9px #77adbc77}}
@media(min-width:1600px){.hotspot{font-size:14px}}
@media(max-width:1000px){nav{gap:18px}nav button{font-size:12px;letter-spacing:1px}.story{left:5vw;width:25vw;top:24vh}.story h1{font-size:32px;letter-spacing:2px}.story p{font-size:12px}.text-action{font-size:20px;gap:9px;letter-spacing:1px}.scene-stage{left:29vw;right:1vw;top:14vh;bottom:16vh}.hotspot{font-size:11px;padding:10px 6px;gap:6px}.hotspot .tap-label{font-size:9px}.scene-tools{left:5vw;gap:9px}.scene-tools button{padding:10px 12px}#selected-part{margin-top:19px}#selected-part p{font-size:11px}}
@media(max-width:600px){nav{max-width:77%;gap:5px 15px}nav button{font-size:11px;padding:7px 0}.cover-foot{font-size:10px;letter-spacing:1px}.story,body[data-scene="explore"] .story{left:7vw;top:14vh;width:86vw;max-width:none}.chapter{font-size:10px}.story h1{font-size:29px;letter-spacing:2px}.story p{font-size:11px;line-height:1.85;max-width:31em}.story .text-action{font-size:18px;margin-top:12px;padding:8px 0}.action-note{display:block;font-size:10px!important;margin-top:3px!important}.story.busy:after{margin-top:15px;font-size:10px}.scene-stage,body[data-scene="gel"] .scene-stage{top:37vh;bottom:14vh;left:0;right:0}.hotspot{font-size:10px;padding:10px 5px;gap:5px;min-height:44px;box-shadow:0 0 9px 2px #f5f4efe6}.hotspot .tap-label{font-size:8px;letter-spacing:0}.hotspot .spot{width:6px;height:6px}#leaders path{opacity:.5}#part-index{top:13px;right:0}.playback-top,.playback-bottom{font-size:10px}.qualitative{bottom:13vh;font-size:9px}.scene-tools{bottom:3vh;left:7vw;right:7vw;max-width:none;justify-content:space-between;gap:6px}.scene-tools button{font-size:11px;padding:10px 11px;letter-spacing:0}.scene-tools small{font-size:9px;line-height:1.6}body[data-scene="explore"] .scene-stage{left:0;right:0;top:37vh;bottom:16vh}body[data-scene="explore"] .story h1{font-size:28px}#selected-part{margin-top:10px;padding-top:9px;border:0}#selected-part .part-status{display:none}#selected-part h2{font-size:14px;display:inline;margin:0 9px 0 0}#selected-part p{display:inline;font-size:10px;line-height:1.7}#orbit-hint{font-size:11px;padding:8px 10px}#orbit-hint small{font-size:9px}.micro-copy{max-width:86vw}.micro-copy p{font-size:11px;margin:0}.gel-swatch{font-size:10px;margin-top:9px}.micro-legend{top:36vh;font-size:10px}.micro-steps button{font-size:11px}.micro-note{font-size:9px;bottom:2.4vh;max-width:80vw}.ending-brand{width:125vw;height:105vh}}
@media(max-height:600px) and (min-width:601px){#header{top:15px}.story{top:22vh}.story h1{font-size:29px;margin:14px 0}.story p{font-size:11px}.text-action{font-size:18px;margin-top:15px}.scene-stage{top:12vh;bottom:18vh}.scene-tools{bottom:3vh}}
@media(prefers-reduced-motion:reduce){.click-hint,.tap-label{animation:none;opacity:1}}
@media(max-width:600px){body[data-scene="ending"] .scene-stage{left:0;right:0;top:37vh;bottom:16vh}.hotspot{font-size:11px}.hotspot .tap-label{font-size:9px}}
/* A water-drop impact precedes the full-colour mark. The settled image holds for 3 s. */
#ending-reveal,#ending-logo-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#ending-reveal{z-index:0}#ending-logo-particles{z-index:1}.ending-brand{transition:opacity 2.5s ease,transform 2.5s var(--ease);transform:translate(-50%,calc(-50% + 18px)) scale(.96)}.ending-brand.reveal{transform:translate(-50%,-50%) scale(1)}.ending-brand.dissolving{visibility:hidden}.slogan{transition-duration:2.2s}
/* V3: identity is visible from arrival; the final mark and name reveal as one unit. */
html,body{height:100dvh}.cover-identity{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(9px);transition:opacity 1s ease,transform 1.3s var(--ease)}.cover .cover-logo,.cover h1,.cover .cover-en{opacity:1;transform:none;transition:none}.cover.arrival-ready .cover-identity{opacity:1;transform:none}.arrival-brand{position:absolute;left:5vw;top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:0;z-index:3;transition:opacity .6s ease;pointer-events:none}.arrival-brand img{width:80px;height:80px;object-fit:contain;margin-right:-7px;}.arrival-brand span{font-family:"Songti SC",STSong,serif;font-size:28px;letter-spacing:4px;color:#35413f}.cover.arrival-ready .arrival-brand{opacity:0;visibility:hidden}#skip-arrival{min-height:44px;top:max(20px,env(safe-area-inset-top))}
@media(max-width:600px){.arrival-brand{left:4vw;top:max(10px,env(safe-area-inset-top))}.arrival-brand img{width:68px;height:68px;margin-right:-4px}.arrival-brand span{font-size:25px;letter-spacing:3px}.cover-foot{bottom:max(5vh,calc(env(safe-area-inset-bottom) + 14px))}#skip-arrival{top:max(16px,env(safe-area-inset-top));right:6vw}#timeline{height:36px}.cover .text-action{min-height:48px}}
@media(max-height:500px){.cover-logo{width:125px;height:125px;margin-bottom:-12px}.cover h1{font-size:38px}.cover-en{margin-top:8px}.cover .text-action{margin-top:20px}.cover-foot{bottom:4vh;font-size:9px}.arrival-brand img{width:58px;height:58px}.arrival-brand span{font-size:24px}}
#skip-ending{min-height:44px;padding:12px 8px;color:#526d65;bottom:max(3vh,calc(env(safe-area-inset-bottom) + 8px))}
@media(max-width:600px){#header{gap:10px}.brand{gap:5px;font-size:19px}.brand-mark{display:block;width:20px;height:33px}.brand-mark img{width:52px;height:52px;left:-15px;top:-8px}nav{max-width:75%;gap:4px 12px}nav button{font-size:11px;letter-spacing:.5px}}
/* Free observation keeps the apparatus dominant and descriptions short. */
body[data-scene="explore"] .story{width:18vw;top:18vh}body[data-scene="explore"] .chapter,body[data-scene="explore"] .tap-label,body[data-scene="explore"] .part-status,body[data-scene="explore"] .scene-tools small{display:none}body[data-scene="explore"] #selected-part{border:0;padding-top:0;margin-top:18px}body[data-scene="explore"] #selected-part h2{font-size:17px;margin:8px 0}body[data-scene="explore"] #orbit-hint{padding:7px 10px;font-size:11px}body[data-scene="explore"] #orbit-hint small{display:none}body[data-scene="explore"] #orbit-hint>span{font-size:18px}body[data-scene="explore"] .scene-stage,body[data-scene="ending"] .scene-stage{left:23vw;right:1vw;top:11vh;bottom:10vh}
@media(max-width:600px){body[data-scene="explore"] .story{left:7vw;top:12vh;width:86vw}body[data-scene="explore"] .story h1{margin:0 0 10px;font-size:27px}body[data-scene="explore"] #selected-part{margin-top:8px}body[data-scene="explore"] #selected-part h2{font-size:13px;margin:0 8px 0 0}body[data-scene="explore"] #selected-part p{font-size:10px}body[data-scene="explore"] .scene-stage,body[data-scene="ending"] .scene-stage{left:0;right:0;top:25vh;bottom:11vh}body[data-scene="explore"] .scene-tools{bottom:max(3vh,calc(env(safe-area-inset-bottom) + 10px))}}
/* V4: no external-file masks, no white navigation overlay, no whole-art opacity dissolve. */
.cover-logo,.brand-mark img,.ending-brand img,.arrival-brand img{-webkit-mask-image:none!important;mask-image:none!important}
.slogan-letter{background-image:var(--slogan-image)}
#ending{background:transparent}.ending-paper{position:absolute;inset:0;z-index:0;background:var(--paper);pointer-events:none}
.transitioning #transition{opacity:0!important}