*{box-sizing:border-box} :root{font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#293a37;background:#edece5;--accent:#b15c36;--ink:#293a37;--muted:#7c8278;--line:#293a3726} body{margin:0;transition:background 1s,color 1s} body[data-era="1"]{background:#e2e9ea;--accent:#26697a;--ink:#233d48;--muted:#607783} body[data-era="2"]{background:#111f30;color:#e1ecdf;--accent:#b6f58a;--ink:#e1ecdf;--muted:#95adb1;--line:#dfeddf30} button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:5px}main{height:100svh;min-height:720px;overflow:hidden;position:relative}header{position:absolute;z-index:3;top:0;left:0;right:0;margin:30px 4%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:21px;letter-spacing:2px}.brand small{font:10px monospace;display:block;letter-spacing:3px;margin-top:4px}.brand-mark{background:var(--ink);color:#eeefe4;font:26px serif;padding:8px 10px}body[data-era="2"] .brand-mark{color:#132332}.edition{font-size:11px;letter-spacing:2px;color:var(--muted)}.edition i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin:0 13px}.quiet{border:1px solid var(--line);border-radius:30px;background:transparent;padding:11px 19px;font-size:12px}.quiet span{margin-left:18px}.quiet.active{background:var(--accent);color:#132332}.intro{position:absolute;left:5%;top:19%;z-index:2;pointer-events:none}.eyebrow{font:10px monospace;letter-spacing:2px;color:var(--accent);margin:0 0 22px}h1{font-family:"Songti SC",SimSun,serif;font-weight:500;font-size:clamp(38px,4.1vw,64px);line-height:1.28;letter-spacing:-2px;margin:0 0 24px}h1 span{color:var(--accent)}.lede{font-size:12px;color:var(--muted);line-height:1.9}.era-caption{margin-top:40px;border-left:2px solid var(--accent);padding-left:15px}.era-caption>span{font:10px monospace;letter-spacing:2px;color:var(--accent)}.era-caption strong{display:block;font-size:19px;letter-spacing:3px;margin:9px 0}.era-caption p{font-size:11px;color:var(--muted)}#viewport{position:absolute;inset:9% 0 14% 24%;touch-action:none}#viewport canvas{display:block;width:100%;height:100%}#loading{position:absolute;top:45%;left:40%;font-size:14px;color:var(--muted)}.passport{position:absolute;z-index:2;top:17%;right:4%;width:180px}.passport p{font-size:11px;letter-spacing:2px;display:flex;justify-content:space-between}.passport p span{font-family:monospace;color:var(--accent)}.stamps{display:flex;gap:14px;margin:17px 0}.stamps span{width:42px;height:42px;display:grid;place-items:center;border:1px dashed var(--line);border-radius:50%;color:var(--muted);font:20px serif;transition:all .5s}.stamps span.done{color:var(--accent);border:2px solid var(--accent);transform:rotate(-12deg)}.passport small{font-size:9px;color:var(--muted)}.interaction{position:absolute;z-index:3;left:61%;bottom:22%;transform:translateX(-50%);text-align:center}.interaction>span{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.interaction button{padding:11px 19px;border:1px solid var(--line);border-radius:24px;background:var(--ink);color:#eff3e7;font-size:12px;box-shadow:0 8px 25px #132f3420;white-space:nowrap}.interaction button:disabled{opacity:.45;cursor:default}body[data-era="2"] .interaction button{color:#132332}kbd{font-family:inherit;font-size:10px;border:1px solid currentColor;padding:2px 5px;border-radius:4px;opacity:.7;margin-right:5px}#notice{position:absolute;left:62%;top:15%;transform:translateX(-50%);border-radius:20px;padding:10px 20px;font-size:12px;background:var(--ink);color:#edece5;z-index:5;opacity:0;transition:opacity .3s;max-width:70%;text-align:center}#notice.show{opacity:1}body[data-era="2"] #notice{color:#142331}footer{position:absolute;bottom:22px;left:5%;right:5%;z-index:3}.timeline{position:relative;display:flex;gap:70px;width:max-content;margin:0 auto 25px}.timeline button{position:relative;z-index:1;border:0;background:none;display:grid;grid-template-columns:24px 60px;gap:3px 5px;text-align:left;padding:10px 15px 14px;color:var(--muted)}.timeline button>span{grid-row:span 2;font:10px monospace;padding-top:4px}.timeline button strong{font-size:16px;font-weight:500;letter-spacing:2px}.timeline button small{font-size:9px}.timeline button::after{content:"";position:absolute;left:44px;bottom:-4px;background:var(--muted);width:6px;height:6px;border-radius:50%}.timeline button.selected{color:var(--accent)}.timeline button.selected::after{background:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 12%,transparent)}.timeline-line{height:1px;background:var(--line);position:absolute;bottom:-1px;left:47px;right:60px}.controls{display:flex;justify-content:center;gap:28px;color:var(--muted);font-size:10px}.footnote{display:flex;justify-content:space-between;font-size:9px;color:var(--muted);margin:22px 0 0;letter-spacing:1px}.footnote span{font:9px monospace}.touch{display:none}.touring .intro{opacity:.35}.intro{transition:opacity .5s}@media(max-width:760px){main{min-height:700px}header{margin:20px 6%}.edition{display:none}.brand{font-size:17px}.brand-mark{font-size:21px}.quiet{font-size:11px;padding:9px 12px}.intro{top:14%;left:7%}.eyebrow{font-size:8px;margin-bottom:13px}h1{font-size:36px;margin-bottom:12px}.lede{font-size:10px}.era-caption{display:none}#viewport{inset:27% -13% 18% -13%}.passport{right:7%;top:17%;width:119px}.passport p{font-size:9px}.stamps{gap:7px}.stamps span{width:32px;height:32px;font-size:17px}.passport small{font-size:8px;line-height:1.6;display:block}.interaction{left:68%;bottom:24%}.timeline{gap:15px;margin-bottom:20px}.timeline button{grid-template-columns:17px 50px;padding:8px 10px 13px}.timeline button::after{left:30px}.timeline-line{left:33px;right:46px}.controls{display:none}.footnote{font-size:8px;gap:12px;line-height:1.8}.footnote span{font-size:8px;max-width:110px;text-align:right}.touch{display:block;position:absolute;left:7%;bottom:18%;z-index:4;text-align:center}.touch button{background:color-mix(in srgb,var(--ink) 8%,transparent);border:1px solid var(--line);width:44px;height:44px;border-radius:8px;font-size:13px;margin:2px;touch-action:none}#notice{left:50%;top:37%;font-size:10px;white-space:nowrap}.interaction button{font-size:10px;padding:10px 13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:760px){h1{font-size:30px;letter-spacing:-1px}.passport{top:17%;width:116px}.lede{max-width:195px}}