:root{color-scheme:dark;font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#100f0e;color:#eee8df;font-synthesis:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
*{box-sizing:border-box}body{margin:0}button,select{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer;touch-action:manipulation;padding:12px 18px}button:hover{color:#fff}button:disabled{cursor:wait;opacity:.5}button:focus-visible,select:focus-visible{outline:2px solid #e4c99b;outline-offset:5px}button,select{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
#app{position:relative;min-height:100svh;overflow:hidden;background:#080808}#book-screen{min-height:100svh;display:grid;place-content:center;background:radial-gradient(ellipse at center,#0000 20%,#0007),url("/assets/desk.webp") center/cover no-repeat;padding:32px 20px}.book-hint{text-align:center;letter-spacing:.45em;font-family:serif;font-size:15px;color:#b1a393;margin-top:28px}
#book{position:relative;padding:0;display:block;width:min(72vw,500px);aspect-ratio:1;perspective:1500px;perspective-origin:45% 38%;}#book:disabled{opacity:1}#pages{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;clip-path:inset(6% 17% 7% round 2%)}
/* Crop the photographic cover away from its tabletop before rotating it. */
.book-lid{position:absolute;inset:6% 17% 7%;transform-origin:0 50%;transform-style:preserve-3d}.book-face{position:absolute;inset:0;overflow:hidden;border-radius:2% 3% 3% 2%;backface-visibility:hidden}.book-front img{position:absolute;width:151.515%;height:114.943%;max-width:none;left:-25.758%;top:-6.897%}.book-inside{transform:rotateY(180deg);border:3px solid #75644a;background:#bbac8e url('/assets/book-pages.webp') center/220% 150%;box-shadow:inset -14px 0 22px #37281750,inset 1px 0 2px #e3d2af}.book-front:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0005,transparent 12%,transparent 65%,#fff1);opacity:0}
#app[data-phase="opening"] #book-screen{position:absolute;inset:0;z-index:2;animation:book-away 1.85s both;pointer-events:none}#app[data-phase="opening"] #book{animation:book-settle 1.55s cubic-bezier(.22,.61,.36,1) both}#app[data-phase="opening"] .book-lid{animation:cover-open 1.55s cubic-bezier(.32,.04,.24,1) both}#app[data-phase="opening"] .book-front:after{animation:cover-light 1.55s both}#app[data-phase="opening"] .book-hint{opacity:0;transition:opacity .2s}#app[data-phase="opening"] #story header,#app[data-phase="opening"] #dialogue{visibility:hidden}
@keyframes cover-open{0%{transform:rotateY(0deg)}12%{transform:rotateY(-5deg)}68%{transform:rotateY(-142deg)}88%{transform:rotateY(-164deg)}100%{transform:rotateY(-160deg)}}
@keyframes book-settle{0%{transform:translate(0,0) rotate(0)}18%{transform:translate(0,-4px) rotate(-.5deg)}75%{transform:translate(7%,-6px) rotate(-1deg)}100%{transform:translate(7%,-3px) rotate(-.7deg)}}
@keyframes cover-light{0%,100%{opacity:0}35%,70%{opacity:1}}
@keyframes book-away{0%,72%{opacity:1}100%{opacity:0}}
@keyframes book-settle-mobile{0%{transform:translate(0,0) scale(1)}18%{transform:translate(0,-4px) scale(.98) rotate(-.5deg)}75%{transform:translate(14%,-6px) scale(.7) rotate(-1deg)}100%{transform:translate(14%,-3px) scale(.7) rotate(-.7deg)}}
@media(max-width:600px){#app[data-phase="opening"] #book{animation-name:book-settle-mobile}}
#story{height:100svh;min-height:520px;position:relative;opacity:1;transition:opacity 1s}.scene-frame{position:absolute;inset:0;display:grid;place-items:center;background:#151512}.scene-frame img{width:100%;height:100%;object-fit:contain}#story:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0004,transparent 25%,transparent 46%,#080808c9 76%,#080808 100%)}header{position:absolute;z-index:1;top:0;left:0;right:0;padding:calc(22px + env(safe-area-inset-top)) 4vw;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#d2ccbf;text-shadow:0 1px 8px #000}nav{display:flex}nav button{font-size:13px}#scene-label{letter-spacing:.16em}
#dialogue{position:absolute;z-index:1;bottom:max(5vh,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(820px,86%);cursor:pointer;padding:22px 0 4px}#speaker{font-family:serif;letter-spacing:.2em;color:#d3bfa1;font-size:16px;margin:0 0 17px}#text{font-family:"Songti SC",SimSun,serif;font-size:23px;line-height:1.95;letter-spacing:.05em;min-height:4em;margin:0 0 12px;text-shadow:0 2px 10px #000}#next{display:block;margin-left:auto;color:#b9b1a3;font-size:13px;letter-spacing:.1em}#next span{padding-left:16px}#app[data-phase="fading"] #story{opacity:0;pointer-events:none}
#credits,#start-screen{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080808}#credits p{font-family:serif;letter-spacing:.16em;line-height:2;font-size:clamp(19px,2vw,26px);margin:12px;opacity:0}#credits p.visible{animation:appear 1.2s both}#credits.leaving{animation:disappear 1s both}#credits-next{margin-top:35px;font-size:14px;color:#b9b1a3}#start{font-family:serif;font-size:23px;letter-spacing:.5em;padding:25px 35px;animation:appear 1.5s both}
#loading{position:fixed;z-index:5;bottom:15px;left:50%;transform:translateX(-50%);background:#1b1814f5;border:1px solid #776951;padding:12px 22px;width:max-content;max-width:90vw;text-align:center;font-size:14px}#loading p{margin:5px}#retry{text-decoration:underline}dialog{background:#211f1b;color:#e9e2d5;border:1px solid #5e5648;padding:28px 32px;width:min(540px,90vw);max-height:82svh;line-height:1.9}dialog::backdrop{background:#000b}dialog h1{font-family:serif;font-weight:400;font-size:23px;letter-spacing:.12em;margin-top:0}dialog button{border-bottom:1px solid #736653}dialog form{margin-top:20px;text-align:right}select{background:#302c26;border:1px solid #655b4b;padding:10px;margin-left:28px}.muted{color:#a9a092;font-size:13px}#history-list{padding-left:24px;font-family:serif}#history-list li{margin-bottom:18px}#history-list b{display:block;font-family:sans-serif;font-size:13px;color:#c9b592;font-weight:400}#ending p{font-family:serif;font-size:20px}.ending-actions{display:flex;gap:20px;justify-content:flex-end}
@keyframes appear{from{opacity:0}to{opacity:1}}@keyframes disappear{to{opacity:0}}
@media(max-width:600px){#story{min-height:560px}.scene-frame{inset:13vh 0 auto;height:auto;aspect-ratio:3/2}.scene-frame img{height:100%;object-fit:contain}#story:after{background:linear-gradient(transparent 35%,#08080820 45%,#080808 63%)}header{padding:18px 14px;font-size:11px}#scene-label{letter-spacing:.04em}nav button{padding:12px 10px}#dialogue{bottom:max(6vh,env(safe-area-inset-bottom));width:86%}#text{font-size:20px;min-height:6em;line-height:1.9}#speaker{font-size:15px}#book{width:min(86vw,480px)}dialog{padding:24px}#credits p{font-size:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}#credits p.visible{opacity:1}}