:root{--ink:#292e27;--muted:#85877c;--paper:#f7f5ed;--green:#496346;--red:#d65c49}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei",sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #ce7348;outline-offset:5px}header{height:90px;border-bottom:1px solid #e2e2d7;display:flex;align-items:center;justify-content:space-between;max-width:1320px;margin:auto;padding:0 48px}.brand{color:var(--ink);text-decoration:none;font-size:20px;font-weight:750;display:flex;align-items:center;gap:12px}.brand-icon{font-size:32px}.brand small{font-size:10px;letter-spacing:2px;font-weight:500;color:#888d7f;margin-left:10px}.text-btn{background:none;border:0;font-size:13px;color:#62695b;margin-left:24px}main{max-width:1240px;padding:40px 40px 0;margin:auto}.intro{text-align:center}.eyebrow{font-size:11px;letter-spacing:3px;color:#7d826f}.eyebrow span{display:inline-block;width:7px;height:7px;background:#718166;border-radius:50%;margin-right:7px}h1{font-family:KaiTi,STKaiti,"Kaiti SC",serif;font-size:60px;letter-spacing:5px;margin:17px 0 12px;position:relative;display:inline-block}h1 span{color:var(--red);position:relative}h1 span:after{content:"";height:6px;background:#ebae86;position:absolute;bottom:-3px;left:0;right:0;border-radius:70%;transform:rotate(-3deg);opacity:.6}h1 svg{position:absolute;width:70px;right:-95px;top:25px;fill:none;stroke:#8c9677;stroke-width:2}.intro p{font-size:14px;color:#777c70}.chips{display:flex;justify-content:center;gap:23px;margin:22px 0 33px;font-size:11px;color:#7c806f}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 282px;gap:28px}.desk{min-height:540px;background-color:#ad7950;background-image:linear-gradient(90deg,#63351022,transparent 30%,#f9cd8c18 60%,#63351022),repeating-linear-gradient(1deg,transparent 0 3px,#573c2612 4px,transparent 5px 13px);border:9px solid #b78961;box-shadow:inset 0 0 65px #532c2940,0 8px 22px #3d302416;border-radius:5px;position:relative;overflow:hidden}.desk-label{font-family:KaiTi,serif;color:#ffedcf9e;position:absolute;top:22px;left:24px;font-size:14px;transform:rotate(-4deg)}.stage{height:462px;position:relative;width:100%;max-width:700px;margin:auto}.art{background-repeat:no-repeat}.envelope{position:absolute;width:270px;height:360px;left:50%;top:49px;transform:translateX(-50%) rotate(-3deg);filter:drop-shadow(5px 9px 6px #30200c66);transition:.5s}.cover{height:100%;width:100%;background-size:648px 1152px;background-position:-195px -610px;clip-path:polygon(1% 1%,96% 0,99% 98%,0 100%)}.open-btn{position:absolute;bottom:33px;left:44px;border:0;background:#f7f3dceF;color:#353b2b;border-radius:2px;padding:14px 20px;box-shadow:1px 3px 0 #30281755;font-size:14px;transform:rotate(3deg)}.open-btn span{margin-left:20px}.open-btn:hover{transform:rotate(0) translateY(-3px)}.foot{position:absolute;width:590px;height:91px;left:50%;top:393px;transform:translateX(-50%) rotate(-3deg);background-size:637px 1133px;background-position:-31px -957px;clip-path:polygon(0 12%,99% 0,100% 82%,2% 100%);filter:drop-shadow(2px 3px 3px #0005);pointer-events:none}.strip{position:absolute;top:290px;width:155px;height:58px;background:#efeadc;border:0;box-shadow:1px 4px 6px #0003;z-index:3;transition:.4s;clip-path:polygon(0 5%,99% 0,100% 90%,2% 100%);font-family:KaiTi,STKaiti,serif}.strip b{font-size:24px;font-weight:400}.strip small{display:block;font-family:sans-serif;font-size:9px;margin-top:4px;color:#8e887a}.strip.left{left:17px;transform:rotate(-9deg)}.strip.right{right:17px;transform:rotate(7deg)}.strip.flipped{top:260px;background:#fff7d7}.strip.flipped b{font-size:19px}.desk-bottom{display:flex;justify-content:space-between;padding:35px 23px 15px;color:#f5e6d0aa;font-size:10px;letter-spacing:1px}.section-kicker{font-size:11px;letter-spacing:2px;color:#7b806f;margin:3px 0 22px}ol{list-style:none;padding:0;margin:0}li{display:flex;gap:14px;padding-bottom:24px;opacity:.42}li.active,li.done{opacity:1}li i{font-style:normal;font-size:11px;border:1px solid #a3ad98;border-radius:50%;height:28px;width:28px;display:grid;place-items:center}li.active i{background:var(--green);color:white;border-color:var(--green)}li b{font-size:13px;font-weight:600}li p{font-size:11px;margin:7px 0 0;color:#7c8173}.math-paper{position:relative;margin-top:6px;padding:25px 22px 22px;background:#efedda;transform:rotate(2deg);box-shadow:2px 4px 9px #4c503414;background-image:repeating-linear-gradient(0deg,transparent 0 26px,#aaa67716 27px 28px)}.tape{position:absolute;background:#dcd8ad88;height:25px;width:80px;z-index:4;transform:rotate(-12deg)}.tape2{top:-12px;left:95px}.pencil{font-size:11px;color:#8a8767}h2{font-family:KaiTi,serif;font-size:23px;margin:14px 0 10px}.math-paper p{font-size:11px;line-height:1.9;color:#83826a}.equation{font-family:KaiTi,serif;font-size:32px;letter-spacing:3px;margin:17px 0}.equation span{color:var(--red)}form{display:flex;gap:7px}input{min-width:0;width:110px;border:1px solid #c8c7b3;background:#faf9f1;padding:9px;font-size:12px}form button{background:var(--green);color:#fff;border:0;font-size:12px;padding:8px 13px}button:disabled{cursor:default;opacity:.4}input:disabled{opacity:.5}.math-paper>small{display:block;font-size:10px;color:#999680;margin-top:13px}.restart{display:block;margin:23px auto 0;border:0;background:none;font-size:12px;color:#777e6b}.choices,.result{position:absolute;z-index:5;left:50%;top:58px;transform:translateX(-50%) rotate(-2deg);width:350px;padding:22px 18px;background:#fbf3e3;box-shadow:3px 9px 15px #0004;text-align:center;border:1px solid #ded5c4}.hand-title{font-family:KaiTi,serif;font-size:35px}.choices p,.result p{font-size:12px;color:#797665;line-height:1.8}.characters{display:flex;gap:9px;margin:20px 0}.characters button{width:33.333%;border:1px solid #cfc7b6;background:#f4e3da;padding:0 0 10px;transition:.2s;overflow:hidden}.characters button:hover{transform:translateY(-8px) rotate(3deg);border-color:var(--red)}.characters b{display:block;font-size:23px;margin:6px}.characters small{font-size:10px;color:#827468}.portrait{display:block;height:115px;background-size:480px 853px;background-repeat:no-repeat}.char-a{background-position:-86px -337px}.char-b{background-position:-175px -337px}.char-c{background-position:-239px -337px}.choice-note{font-size:10px;color:#9a8976}.result{top:90px;padding:30px 25px;min-height:270px}.result h2{font-size:36px;margin:18px 0;color:var(--green)}.result.dead h2{color:var(--red)}.result-icon{font-size:48px}.result .action{border:0;background:var(--green);color:#fff;padding:12px 22px;margin-top:14px}.result-tag{font-size:10px;letter-spacing:3px;color:#99907b}.opened .envelope{opacity:0;transform:translateX(-50%) rotate(-12deg) scale(.8);pointer-events:none}.opened .strip{top:350px}.opened .strip.flipped{top:365px}footer{display:flex;justify-content:space-between;margin:28px 0;padding:19px 0;border-top:1px solid #e0e1d6;font-size:10px;color:#949788}.heart{color:var(--red);font-size:16px;margin-left:10px}dialog{border:0;border-radius:4px;padding:32px;max-width:600px;width:90%;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#1d241cc4;backdrop-filter:blur(4px)}#closeModal{position:absolute;right:12px;top:8px;border:0;background:none;font-size:27px;color:#676d5d}dialog img{width:100%;max-height:73vh;object-fit:contain}dialog p{font-size:14px;line-height:1.9}dialog h2{font-size:29px}dialog li{opacity:1;font-size:14px;padding:8px;display:list-item}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(min-width:1400px){main{padding-top:46px}.intro{margin-bottom:10px}}@media(max-width:800px){header{height:72px;padding:0 20px}.brand small{display:none}.text-btn{margin-left:12px;font-size:11px}main{padding:30px 16px 0}h1{font-size:45px}h1 svg{display:none}.eyebrow{font-size:9px;letter-spacing:2px}.intro p{font-size:12px}.game-layout{grid-template-columns:1fr;gap:25px}.desk{min-height:520px}.stage{height:450px}.strip{width:110px}.strip.left{left:0}.strip.right{right:0}.envelope{width:250px;height:340px}.cover{background-size:600px 1067px;background-position:-180px -565px}.foot{width:480px;top:380px;height:85px;background-size:550px 978px;background-position:-26px -826px}.strip{top:310px}.choices,.result{width:290px}.portrait{height:115px}.char-a{background-position:-95px -337px}.char-b{background-position:-187px -337px}.char-c{background-position:-249px -337px}aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}.progress{padding:5px 0}.math-paper{margin-top:10px;padding:18px 14px}.math-paper h2{font-size:19px}.equation{font-size:26px}.tape2{left:50px}form{flex-wrap:wrap}input{width:100%}.restart{grid-column:1/-1;margin:0 auto}footer{gap:20px;line-height:1.8}li{gap:8px}li i{flex-shrink:0}li b{font-size:12px}li p{font-size:10px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.puzzle-clue{font-family:KaiTi,serif;font-size:19px;margin-top:15px;color:#5b614e}.equation{margin:10px 0 16px}#mathForm{display:flex;gap:6px}.math-option{flex:1;padding:10px 2px;background:#f9f7e9;border:1px solid #a8ad93;font-size:12px;color:#46543d}.math-option:not(:disabled):hover{background:#496346;color:white}.math-option:disabled{opacity:.45}
/* The artwork is redrawn as independent vector shapes, with no photo textures. */
.art{background-image:none}.cover-half{position:absolute;top:0;width:50%;height:100%;background-image:url('assets/cover.svg');background-size:200% 100%;backface-visibility:hidden;transition:transform .85s cubic-bezier(.3,.1,.2,1),filter .85s;transform-style:preserve-3d}.cover-left{left:0;background-position:left;transform-origin:left center}.cover-right{right:0;background-position:right;transform-origin:right center}.envelope{perspective:900px;transition:opacity .35s .7s;animation:envelope-arrive .75s both}.opened .envelope{opacity:0;transform:translateX(-50%) rotate(-3deg) scale(1)}.opened .cover-left{transform:rotateY(-145deg);filter:brightness(.8)}.opened .cover-right{transform:rotateY(145deg);filter:brightness(.8)}.opened .open-btn{opacity:0;transition:opacity .15s}.foot{background-image:url('assets/foot.svg');background-size:100% 100%;background-position:center;clip-path:none}.portrait{background-size:contain;background-position:center;background-repeat:no-repeat;height:150px;transform-origin:50% 90%;animation:character-sway 3s ease-in-out infinite}.char-a{background-image:url('assets/character-a.svg')}.char-b{background-image:url('assets/character-b.svg');animation-delay:-1s}.char-c{background-image:url('assets/character-c.svg');animation-delay:-2s}.characters button:hover .portrait{animation:character-hop .5s infinite alternate}.choices{animation:card-rise .65s .35s both}.characters button{animation:character-arrive .45s .65s both}.characters button:nth-child(2){animation-delay:.8s}.characters button:nth-child(3){animation-delay:.95s}.strip{transition:top .5s,transform .6s,background .4s}.strip.left.flipped{transform:translateX(-8px) rotate(-4deg) rotateX(360deg)}.strip.right.flipped{transform:translateX(8px) rotate(3deg) rotateX(360deg)}.result{top:55px;animation:result-pop .5s both;z-index:6;padding:18px 22px}.result.dead{animation:result-shake .45s both}.result-icon{height:90px;margin-top:10px}.result-icon img{height:100%;width:100%;object-fit:contain;animation:character-hop 1s ease-in-out infinite alternate}.dead .result-icon img{animation:none;transform:rotate(-12deg);filter:saturate(.5)}.result h2{font-size:29px;margin:10px 0}.result p{font-size:11px}.result .action{padding:10px 18px;margin-top:5px}.confetti{position:absolute;top:0;width:8px;height:14px;z-index:10;pointer-events:none;animation:confetti-fall 2s ease-in both}.math-paper:has(.math-option:not(:disabled)){animation:paper-awaken .55s;box-shadow:0 0 0 2px #a6ad76,3px 6px 16px #4c503420}.text-btn{transition:color .2s}.text-btn:hover{color:#c2644b}@keyframes envelope-arrive{from{opacity:0;translate:0 -35px;rotate:-5deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes card-rise{from{opacity:0;translate:0 55px;scale:.85}to{opacity:1;translate:0 0;scale:1}}@keyframes character-arrive{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}@keyframes character-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes character-hop{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-7px) rotate(4deg)}}@keyframes result-pop{from{opacity:0;scale:.75}70%{scale:1.04}to{opacity:1;scale:1}}@keyframes result-shake{0%{opacity:0;translate:-12px 0}25%{translate:10px 0}50%{translate:-6px 0}75%{translate:4px 0}100%{opacity:1;translate:0 0}}@keyframes paper-awaken{50%{transform:rotate(-3deg) scale(1.04)}}@keyframes confetti-fall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(430px) rotate(var(--spin))}}@media(max-width:800px){.portrait{background-size:contain;background-position:center;height:130px}.foot{background-size:100% 100%;background-position:center}.result{top:55px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.choices{opacity:1}.opened .envelope{display:none}}

/* Midnight paper theatre */
:root{--ink:#ede2c9;--muted:#aaad99;--paper:#101c19;--green:#465b40;--red:#bd654d}
body{background:radial-gradient(ellipse at 50% 5%,#31443a 0,#172621 35%,#0c1412 100%);color:var(--ink);min-height:100vh}
header{height:74px;border-color:#d9bf8330}.brand{color:#eee2c8}.brand-icon{color:#cba86b}.brand small,.text-btn{color:#b9b39e}.text-btn:hover{color:#efd09b}
main{max-width:1040px;padding-top:24px}.intro h1{font-size:58px;margin:5px 0;color:#f1e5c8;text-shadow:0 3px 15px #0008}.intro h1 span{color:#d27a5e}.intro h1 span:after{background:#ae593f}.intro h1 svg{stroke:#bcaa78}.intro p{color:#c2bfaa;margin:8px 0 22px}
.game-layout{display:block}.desk{min-height:535px;border:8px solid #715137;background-color:#593b2d;background-image:radial-gradient(ellipse at 50% 35%,#e4a45347,transparent 60%),linear-gradient(90deg,#1c17144f,transparent 25%,#f2c38618 65%,#1c171455),repeating-linear-gradient(1deg,transparent 0 3px,#26180e30 4px,transparent 5px 13px);box-shadow:inset 0 0 80px #100e0ac9,0 18px 50px #0009;border-radius:6px}.desk-label,.desk-bottom{color:#e3c99b}.stage{max-width:720px}.envelope{filter:drop-shadow(0 12px 18px #100b09aa)}.strip{background:#e5d5b2;color:#352a20}.strip.flipped{background:#f5e5bf}.open-btn{background:#f1e0b9;color:#35251b;font-weight:700}.choices,.result,.math-paper{color:#342c24;background-color:#eee0c1;background-image:repeating-linear-gradient(0deg,transparent 0 26px,#8a734912 27px 28px);border:1px solid #bba57d;box-shadow:0 14px 30px #120c09a6}.characters button{background:#dfd2b4}.result h2{color:#435e3e}.result.dead h2{color:#a84e3b}.result .action{background:#743e30}.math-paper{position:absolute;z-index:7;left:50%;top:67px;transform:translateX(-50%) rotate(-2deg);width:min(350px,90%);margin:0;padding:28px 24px;text-align:center}.math-paper h2{font-size:25px}.math-paper:has(.math-option:not(:disabled)){animation:card-rise .5s both;box-shadow:0 14px 30px #120c09a6}.pencil,.math-paper>small{color:#796b50}.puzzle-clue{color:#564936}.math-option{background:#f7ecd3;border-color:#bda987;color:#4c3c2d;font-weight:700}.math-option:not(:disabled):hover,.math-option:focus-visible{background:#743e30;color:#fff}.restart{color:#d7c39d;margin:0;padding:10px 14px;border:1px solid #a58a5c;border-radius:4px}.restart:hover{background:#a9844e33}footer{align-items:center;border-color:#d9bf8330;color:#b8af97;margin:14px 0;padding:12px 0}dialog{background:#efe2c5;color:#342c24}dialog .section-kicker{color:#796b50}
@media(max-width:800px){header{height:62px}main{padding-top:22px}.intro h1{font-size:43px}.intro p{margin-bottom:18px}.desk{min-height:510px}.stage{height:445px}.math-paper{top:65px}.desk-bottom{padding-top:30px}footer{margin-top:10px}.restart{font-size:12px}}

/* Layers of paper catch the light as the player explores. */
.desk{isolation:isolate;perspective:1100px}
.desk::before,.desk::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.desk::before{background:radial-gradient(ellipse at 50% 13%,#ffd48a24,transparent 53%);animation:lantern-glow 6s ease-in-out infinite alternate}
.desk::after{background-image:radial-gradient(circle,#f9d59a99 0 1px,transparent 2px),radial-gradient(circle,#f9d59a66 0 1px,transparent 2px);background-size:137px 173px,211px 191px;background-position:12px 10px,78px 90px;opacity:.25;animation:dust-drift 18s linear infinite}
.stage,.desk-label,.desk-bottom{z-index:1}.stage{transform-style:preserve-3d}.envelope{transform-style:preserve-3d}.cover-half{box-shadow:inset 0 0 18px #0003}.open-btn,.strip,.characters button,.math-option,.result .action{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
@media(hover:hover) and (pointer:fine){.envelope:not(.opened .envelope):hover{transform:translateX(-50%) rotate(-3deg) rotateX(5deg) rotateY(-6deg) translateY(-5px);filter:drop-shadow(10px 20px 16px #100b09aa)}.strip:hover{box-shadow:4px 10px 12px #0006}.math-option:not(:disabled):hover,.result .action:hover{transform:translateY(-3px);box-shadow:0 5px 9px #20130e4d}}
.choices,.result,.math-paper{transform-style:preserve-3d}.characters button{box-shadow:0 4px 8px #42291e30}.result .action:active,.math-option:not(:disabled):active{transform:translateY(1px)}
@keyframes lantern-glow{from{opacity:.5}to{opacity:1}}
@keyframes dust-drift{from{background-position:12px 10px,78px 90px}to{background-position:36px -163px,54px -101px}}
@media(prefers-reduced-motion:reduce){.desk::before,.desk::after{animation:none!important}.envelope:not(.opened .envelope):hover,.math-option:not(:disabled):hover,.result .action:hover{transform:none}.envelope:not(.opened .envelope):hover{transform:translateX(-50%) rotate(-3deg)}}