:root{color-scheme:light;--ink:#40513e;--paper:#eee9dc;--serif:"Songti SC",STSong,SimSun,serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{color:var(--ink);font:16px/1.6 var(--serif);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
button,a{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button{border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:1px solid #687959;outline-offset:8px}
button:disabled{opacity:.4}
#world,.scenery,.scene,.vignette,#field,#dust,#echoes{position:fixed;inset:0}
#world{isolation:isolate}
.scenery{z-index:-3;overflow:hidden}
.scene{width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity 1.6s;pointer-events:none}
.scene.visible{opacity:1}
.vignette{z-index:-1;pointer-events:none;background:linear-gradient(0deg,#253c2829,transparent 17%,transparent 93%,#26382109)}
.returned~.vignette{background:none}
#field{z-index:1;touch-action:none;outline:none}
#dust,#echoes{z-index:2;pointer-events:none}
#dust{opacity:.7}
body[data-phase="dormant"] #dust{opacity:0}
#letters{position:fixed;z-index:3;left:50%;bottom:calc(env(safe-area-inset-bottom) + 4.7vh);transform:translateX(-50%);display:flex;align-items:center;gap:.6em;pointer-events:auto;white-space:nowrap;font-size:clamp(17px,1.65vw,23px);color:#f4eed9;text-shadow:0 1px 5px #1c382c,0 0 15px #16332980}
.letter{display:grid;place-items:center;width:1em;min-width:1em;height:1.8em;padding:0;text-align:center;background:none;color:inherit;text-shadow:inherit;cursor:grab;touch-action:manipulation}
.letter.inactive{opacity:.55;cursor:default}
.letter.selected{color:#fff8d8;text-shadow:0 1px 5px #1c382c,0 0 18px #fff2b8}
.letter.dragging{opacity:.35}
.letter.stage-break{margin-left:.55em}
.letter.arrived{animation:letter-arrives 1s ease-out}
.mobile-source-link{position:fixed;z-index:7;display:grid;place-items:center;min-width:104px;min-height:48px;padding:7px 17px;border:1px solid #f3e8c98c;border-radius:999px;background:#24382b8c;color:#fff4d2;text-decoration:none;letter-spacing:.22em;text-shadow:0 1px 5px #15291fcc,0 0 12px #fff4d244;box-shadow:0 2px 16px #13271c66;transform:translate(-50%,-50%);touch-action:manipulation;animation:source-link-arrives .7s ease-out}
.mobile-source-link:hover,.mobile-source-link:focus-visible{background:#304b38d9;color:#fff9e7;box-shadow:0 2px 20px #13271c99}
#proverb{position:fixed;z-index:35;left:50%;top:10vh;transform:translateX(-50%);max-width:90vw;margin:0;padding:12px 20px;border-radius:4px;background:#eee9dcf2;color:#40513e;box-shadow:0 3px 24px #14291c26;font:clamp(16px,2vw,20px)/1.8 var(--serif);letter-spacing:.18em;text-align:center;pointer-events:none;white-space:pre-line}
#omen{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at center,rgba(249,246,235,.94) 0%,rgba(241,238,226,.87) 52%,rgba(232,233,219,.76) 100%);backdrop-filter:blur(8px) saturate(.6);-webkit-backdrop-filter:blur(8px) saturate(.6);outline:none;cursor:pointer;touch-action:manipulation;animation:omen-arrives .5s ease}
#omen img{display:block;max-width:min(1000px,92vw);max-height:70vh;max-height:70dvh;width:auto;height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 0 #fffdf4) drop-shadow(0 0 10px #fff8e6bf) drop-shadow(0 5px 10px #293c5126)}
.hand{position:fixed;z-index:40;top:0;left:0;width:69px;height:81px;pointer-events:none;opacity:0;transition:opacity .16s;will-change:transform}
.hand.visible{opacity:1}
.hand-shape{width:69px;height:81px;overflow:visible;transform:rotate(-12deg);filter:drop-shadow(3px 6px 3px #22372a48)}
.glove{fill:#fbfaf0;stroke:#4d5c51;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.nails{fill:#e0e5d7;stroke:#788771;stroke-width:1;stroke-linejoin:round}
.back-lines{stroke:#96a08b;stroke-width:1.6;stroke-linecap:round;fill:none}
.cuff{fill:#e1e5d5;stroke:#4d5c51;stroke-width:2.5;stroke-linejoin:round}
.cuff-line{stroke:#a0aa92;stroke-width:1.5;fill:none}
.hand-open{animation:open-hand 1.5s steps(1,end) infinite}
.hand-grip{opacity:0;animation:close-hand 1.5s steps(1,end) infinite}
.hand.pressing .hand-open,.hand.grabbing .hand-open{animation:none;opacity:0}
.hand.pressing .hand-grip,.hand.grabbing .hand-grip{animation:none;opacity:1}
.hand.grabbing .hand-shape{animation:grab .24s ease-out;transform-origin:50% 70%}
.hand.pressing .hand-shape{animation:reach .85s ease-in-out infinite alternate;transform-origin:50% 70%}
.hand-halo{position:absolute;left:32px;top:25px;width:70px;height:70px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(#edddb87a,transparent 67%);opacity:var(--warmth,0);transition:opacity .12s}
.echo{position:fixed;pointer-events:none;left:0;top:0;--tone:#ead1ce}
.echo.petal{width:11px;height:6px;background:#dfb9bf;border-radius:90% 0 90% 10%;animation:petal .95s ease-out forwards}
.echo.frost{width:4px;height:17px;background:linear-gradient(transparent,#e6f8ff);box-shadow:0 0 5px #e6f8ff70;animation:frost .7s ease-out forwards}
.echo.jade{width:76px;height:76px;border:1px solid #a5d4a7;border-radius:50%;box-shadow:0 0 15px #acdba533,inset 0 0 10px #aedcb433;animation:jade .85s ease-out forwards}
#blade-trigger{position:fixed;z-index:5;bottom:calc(env(safe-area-inset-bottom) + 3.5vh);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 18px;letter-spacing:.45em;white-space:nowrap;color:#ece4cc;text-shadow:0 1px 5px #102725,0 0 12px #10272580;opacity:.9;transition:opacity .2s}
#blade-trigger:hover{opacity:1}
#blade-trigger svg{width:27px;height:27px;stroke:currentColor;stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#sword{position:fixed;top:0;left:0;z-index:40;width:68px;height:80px;opacity:0;pointer-events:none;filter:drop-shadow(2px 3px 3px #20392966)}
#sword svg{width:100%;height:100%}
#sword.visible{opacity:1}
#sword.down{filter:drop-shadow(0 0 7px #deedc2)}
#slash{position:fixed;inset:0;z-index:10;width:100%;height:100%;pointer-events:none;opacity:0;overflow:visible}
#slash path{fill:none;stroke:#fff9dd;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 5px #b9d49b)}
#slash.active{animation:slash .6s ease-out forwards}
#ending{position:fixed;z-index:6;bottom:calc(env(safe-area-inset-bottom) + 5vh);left:0;right:0;text-align:center;padding:0 20px;animation:omen-arrives 1s ease}
#ending p{font-size:clamp(17px,2vw,23px);letter-spacing:.32em;margin:0;color:#f3eedf;text-shadow:0 1px 7px #172e25,0 0 18px #172e2599}
#jade-slip{position:relative;display:inline-grid;place-items:center;margin:0 auto 8px;max-width:min(420px,82vw)}
#jade-slip img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 16px #11261e66)}
#jade-slip figcaption{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;font:clamp(20px,4.5vw,34px)/1 var(--serif);letter-spacing:.18em;color:#2f4a38;text-shadow:0 1px 0 #edf5d9,0 0 6px #e9f6d2}
#rewards{display:flex;justify-content:center;gap:30px;margin-top:15px;font-size:14px;letter-spacing:.2em}
#rewards:empty{display:none}
#rewards a{text-decoration:none;color:#f3eedf;border-bottom:1px solid #e9ce9580;padding:5px 3px;min-height:36px;text-shadow:0 1px 7px #172e25}
body[data-phase="lost"] .scenery{filter:grayscale(1) brightness(.72);transition:filter 1.6s}
body[data-phase="lost"] #ending{color:#f3eedf}
body[data-phase="lost"] #ending p{text-shadow:0 1px 7px #172e25}
.no-script{position:fixed;inset:40% 0 auto;text-align:center}
@media(hover:hover) and (pointer:fine){body.hand-active #field,body.hand-active #omen,body.sword-active #field{cursor:none}}
@media (pointer:coarse),(max-width:600px){.hand,.hand-shape{width:59px;height:70px}#letters{bottom:calc(env(safe-area-inset-bottom) + 5vh);max-width:calc(100vw - 12px);gap:clamp(4px,1.4vw,8px);font-size:clamp(24px,7vw,34px)}.letter{width:clamp(42px,13vw,58px);min-width:clamp(42px,13vw,58px);height:clamp(52px,15vw,64px);border-radius:50%;cursor:pointer;transition:background .16s,box-shadow .16s,color .16s,transform .16s}.letter.inactive{opacity:.38}.letter.selected{background:#fff8d82e;box-shadow:0 0 0 1px #fff2b88c,0 0 18px #fff2b83d;transform:translateY(-5px)}.letter.stage-break{margin-left:clamp(2px,.8vw,6px)}#proverb.mobile-two-line{width:max-content;max-width:calc(100vw - 36px);white-space:pre;font-size:clamp(18px,5vw,22px);line-height:1.75;letter-spacing:.12em}#omen img{max-width:92vw}#ending p{letter-spacing:.18em}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.hand-open{opacity:1}.hand-grip{opacity:0}.hand.pressing .hand-open{opacity:0}.hand.pressing .hand-grip{opacity:1}.hand.pressing .hand-shape{transform:rotate(-12deg) scale(.88)}.echo{display:none}#slash.active{opacity:1}}
@keyframes open-hand{0%,67%{opacity:1}68%,100%{opacity:0}}
@keyframes close-hand{0%,67%{opacity:0}68%,100%{opacity:1}}
@keyframes reach{from{transform:perspective(260px) rotateX(15deg) rotate(-12deg) scale(.94);filter:drop-shadow(2px 3px 2px #22372a48)}to{transform:perspective(260px) rotateX(37deg) rotate(-12deg) scale(.82);filter:drop-shadow(0 1px 1px #22372a48)}}
@keyframes grab{0%,100%{transform:rotate(-12deg) scale(1)}45%{transform:perspective(260px) rotateX(34deg) rotate(-12deg) scale(.8);filter:drop-shadow(0 1px 1px #22372a48)}}
@keyframes letter-arrives{from{opacity:0;transform:translateY(-17px);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes source-link-arrives{from{opacity:0;transform:translate(-50%,-50%) translateY(12px)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes omen-arrives{from{opacity:0}to{opacity:1}}
@keyframes petal{0%{opacity:.9;transform:translate(-50%,-50%) rotate(0)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn))}}
@keyframes frost{0%{opacity:.9;transform:translate(-50%,-50%) rotate(var(--turn)) scale(.3)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(1.1)}}
@keyframes jade{from{opacity:.9;transform:translate(-50%,-50%) scale(.2)}to{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}
@keyframes slash{0%{opacity:0;stroke-dasharray:0 1000}25%{opacity:1;stroke-dasharray:1000 0}100%{opacity:0;stroke-dasharray:1000 0}}