:root{font-family:Arial,'Microsoft YaHei',sans-serif;color:#35463d;background:#eee9df;font-synthesis:none;--red:#a8402e;--line:#cfc9bb;--muted:#777d70}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:5px}button:hover{color:var(--red)}[hidden]{display:none!important}#app{position:relative;max-width:1600px;margin:auto;min-height:100svh;overflow:hidden}header{height:91px;padding:0 5.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin:0 3%}.brand{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;font-family:'STSong','SimSun',serif;font-size:19px;letter-spacing:.12em}.seal{background:var(--red);color:#f6e7cd;padding:7px 6px;font-family:serif;font-size:22px;line-height:1;transform:rotate(-4deg);border-radius:2px}nav{display:flex;gap:23px;align-items:center;font-size:12px}nav button{min-height:44px}.chapter{text-align:center;padding:31px 20px 0;position:relative;z-index:1;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.24em;color:#8c7159}.chapter h1{font-family:'STSong','SimSun',Georgia,serif;font-size:clamp(25px,3.1vw,41px);font-weight:400;letter-spacing:.06em;margin:13px 0 11px}.chapter p{font-size:13px;color:#777c70;margin:0;line-height:1.7}#world{position:relative;width:min(1200px,100%);margin:-27px auto -26px;isolation:isolate}#city{display:block;width:100%;height:auto;overflow:hidden;touch-action:none;user-select:none;transition:background 2s}.edge-label{position:absolute;bottom:51px;left:7%;font-size:9px;letter-spacing:.17em;color:#6c7669;pointer-events:none}.controls{display:flex;align-items:center;justify-content:space-between;gap:25px;position:relative;margin:0 8%;padding:18px 0 21px;border-top:1px solid var(--line)}.instruction{display:flex;gap:15px;align-items:center}.small-seal{border:1px solid #b9896e;color:#a84f36;font-family:serif;padding:7px;flex-shrink:0;line-height:1}#instruction{font-size:13px;margin:0;line-height:1.7}#feedback{font-size:11px;color:#936d50;min-height:17px;margin:6px 0 0;line-height:1.6}#feedback.error{color:var(--red)}.outline{font-size:11px;padding:13px 18px;border:1px solid #babaa9;white-space:nowrap;min-height:44px}#hint-panel{position:relative;margin:0 8% 15px;background:#e5dfd0;border-left:2px solid var(--red);padding:16px 45px 16px 17px;font-size:12px;line-height:1.9}#close-hint{position:absolute;right:5px;top:4px;font-size:22px;width:34px;height:34px}footer{display:flex;justify-content:space-between;align-items:center;margin:0 8%;padding:6px 0 24px;color:var(--muted);font-size:10px}.progress{display:flex;align-items:center;gap:15px}.progress span{opacity:.4;transition:opacity .5s;color:#686f5f}.progress span.active{opacity:1;color:var(--red)}.progress span.done{opacity:1}.progress i{font-family:serif;font-size:17px;font-style:normal;margin-left:6px}.progress b{width:30px;height:1px;background:#bfbfae;font-weight:normal}.footer-note{letter-spacing:.08em}.overlay{position:absolute;inset:91px 0 0;z-index:5;display:flex;justify-content:center;align-items:center;background:#eee9dfdd;backdrop-filter:blur(6px);min-height:600px}.intro-card,.ending-card{text-align:center;max-width:610px;padding:25px 30px 50px}.intro-mark{font-family:'STSong','SimSun',serif;font-size:116px;line-height:1.1;margin:19px 0 22px;color:#344439;position:relative;display:inline-block}.intro-mark span{position:absolute;font-size:28px;right:-30px;bottom:0;background:#a7402e;color:#f6e8cd;padding:8px 5px;transform:rotate(4deg)}.intro-card h2,.ending-card h2{font-family:'STSong','SimSun',Georgia,serif;font-size:31px;font-weight:400;line-height:1.6;letter-spacing:.035em;margin:0 0 15px}.intro-card p,.ending-card p{font-size:13px;color:#747b6e;line-height:2.1;margin:0 0 29px}.primary{background:#a5402e;color:#fff1da;font-size:13px;padding:17px 25px;min-width:225px;display:block;margin:auto;box-shadow:0 5px 15px #79392413}.primary:hover{background:#903823;color:#fff1da}.primary span{margin-left:40px}.intro-card small{display:block;font-size:10px;color:#8c8c7a;margin-top:19px}.intro-side{position:absolute;right:10%;top:35%;writing-mode:vertical-rl;font-family:serif;letter-spacing:.4em;line-height:2.4;color:#9d977e;font-size:13px}.end-character{font-family:'SimSun',serif;font-size:97px;color:#ab6030;line-height:1.1;margin:18px 0}.text-button{font-size:11px;display:block;margin:18px auto 0;min-height:44px}.building-caption{font-family:serif;fill:#8b8876;font-size:16px}.piece{cursor:grab;outline:none}.piece .hit{fill:transparent;stroke:transparent;stroke-width:1.5}.piece .ink{stroke:#a74330;stroke-linecap:square;stroke-linejoin:miter;transition:stroke 1s}.piece.inactive{cursor:default}.piece.inactive .ink{stroke:#48583e}.piece.active:hover .hit,.piece:focus-visible .hit,.piece.selected .hit{stroke:#b06648;fill:#d7b38a22;stroke-dasharray:3 5}.piece.selected{cursor:grabbing}.piece.active{filter:drop-shadow(0 2px 3px #9e402218)}.piece.active .ink{animation:ink-breathe 3s ease-in-out infinite}.piece.failed{animation:shake .35s ease-in-out}.window{fill:#87907b;transition:fill 2s}.night .window{fill:#506356}.complete .window{fill:#e9bd6b}.complete #city-lights,.complete #floating-petals{opacity:1!important;transition:opacity 2s}.night #night-wash rect{opacity:.44;transition:opacity 2.4s}.night #stars{opacity:.8;transition:opacity 2s}.night #moon-ripples{opacity:.8;transition:opacity 2s}.night #moon .ink{stroke:#ebd8a5}.night #sun .ink{stroke:#e0ae72}.complete .piece .ink{stroke:#f2cb83!important}.night #world{background:#63736b}.night #world-label{color:#ece3c9}.clouds{animation:cloud-drift 24s ease-in-out infinite alternate}.ripples{animation:ripple 6s ease-in-out infinite}.lantern{animation:lantern 5s ease-in-out infinite;animation-delay:var(--delay);transform-box:fill-box;transform-origin:top center}.petal{animation:float-up 6s ease-in-out infinite;animation-delay:var(--delay)}#traveller{transition:transform 1.8s cubic-bezier(.45,.05,.2,1)}.walking .traveller-body{animation:walk .3s ease-in-out infinite alternate}#guides ellipse,#guides rect{stroke:#b76644;stroke-width:2;fill:#e7c49122;stroke-dasharray:5 6;animation:ink-breathe 2s infinite}.night #guides rect,.night #guides ellipse{stroke:#ebd4a0}.night #city{border-radius:3px}.night .far-hills{opacity:.8}
@keyframes ink-breathe{50%{opacity:.7}}@keyframes shake{25%{translate:-5px}75%{translate:5px}}@keyframes ripple{50%{opacity:.25;translate:7px 0}}@keyframes cloud-drift{to{translate:25px 0}}@keyframes walk{to{translate:0 -3px;rotate:3deg}}@keyframes lantern{50%{rotate:4deg}}@keyframes float-up{0%{translate:0 30px;opacity:0}30%{opacity:.8}100%{translate:13px -170px;opacity:0}}
@media(min-width:1400px){#world{margin-top:-17px}}@media(max-width:700px){header{height:73px;padding:0 3%;margin:0 4%}.brand{font-size:15px;letter-spacing:.04em;gap:9px}.seal{font-size:19px}nav{gap:9px;font-size:10px}.chapter{padding-top:26px;min-height:158px}.chapter h1{font-size:26px;margin:12px 0}.chapter p{font-size:11px;max-width:345px;margin:auto}.eyebrow{font-size:9px}#world{margin:-9px auto 0}#city{height:390px}.edge-label{bottom:18px;left:7%;font-size:8px}.controls{margin:0 6%;padding:17px 0 13px;align-items:flex-start;gap:10px}.instruction{gap:10px;align-items:flex-start}.small-seal{display:none}#instruction{font-size:12px}#feedback{font-size:10px;min-height:32px}.outline{font-size:10px;padding:10px 11px}#hint-panel{margin:0 6% 15px;font-size:11px}footer{margin:0 6%;padding:5px 0 24px}.footer-note{display:none}.progress{gap:13px}.progress b{width:24px}.overlay{inset:73px 0 0;min-height:600px;align-items:flex-start;padding-top:53px}.intro-side{display:none}.intro-card,.ending-card{padding:10px 23px 40px}.intro-card h2,.ending-card h2{font-size:26px}.intro-card p,.ending-card p{font-size:12px}.intro-mark{font-size:103px}.intro-card small{font-size:9px}.night #city{border-radius:0}}
@media(max-width:360px){.brand{font-size:13px}nav{gap:4px}#city{height:350px}.chapter h1{font-size:23px}.outline{padding:10px 8px}.intro-card h2{font-size:23px}}
#world{margin:18px auto 0}
@media(max-width:700px){#world{margin:0 auto}.night #world{background:transparent}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}