:root{--ink: #2c2c2c;--paper: #f5f0e8;--faint: #b5a990;--glow: #d4c5a9}*{margin:0;padding:0;box-sizing:border-box}html{scrollbar-width:none}#attribution{font-size:.65rem;color:var(--faint);opacity:.4;text-align:center;padding:.5rem;line-height:1.6}#attribution a{color:inherit;text-decoration:underline;text-underline-offset:2px}html::-webkit-scrollbar{display:none}body{font-family:"Noto Serif TC",Songti TC,serif;background:var(--paper);color:var(--ink);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;gap:2rem;overflow:hidden}#nav{display:flex;align-items:center;gap:1.25rem;opacity:.35;transition:opacity .6s ease;z-index:10}#nav:hover,#nav:focus-within{opacity:1}#nav button{background:none;border:none;font-family:inherit;font-size:.9rem;color:var(--faint);cursor:pointer;padding:.25rem .5rem;transition:color .4s ease,opacity .4s ease;line-height:1}#nav button:disabled{opacity:.2;cursor:default}#nav button:not(:disabled):hover{color:var(--ink)}#nav-indicator{font-size:.8rem;color:var(--faint);letter-spacing:.2em;min-width:4em;text-align:center}#app{width:100%;overflow-x:auto;position:relative;transition:opacity .6s cubic-bezier(.4,0,.2,1);scrollbar-width:none}#app::-webkit-scrollbar{display:none}.chapter{display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:center;gap:1rem;padding:2rem 1.5rem;width:max-content;min-width:100%}.chapter.slide-enter-next{transform:translate(60px);opacity:0}.chapter.slide-enter-prev{transform:translate(-60px);opacity:0}.chapter.slide-enter-active{transform:translate(0);opacity:1;transition:transform .7s cubic-bezier(.6,0,.1,1),opacity .5s cubic-bezier(.4,0,.3,1)}.chapter.slide-exit-next{transform:translate(-60px);opacity:0;transition:transform .5s cubic-bezier(.6,0,.8,1),opacity .35s cubic-bezier(.4,0,1,1);position:absolute;top:0;left:0;right:0}.chapter.slide-exit-prev{transform:translate(60px);opacity:0;transition:transform .5s cubic-bezier(.6,0,.8,1),opacity .35s cubic-bezier(.4,0,1,1);position:absolute;top:0;left:0;right:0}.chapter-number{font-size:.75rem;color:var(--faint);letter-spacing:.2em;opacity:.6;writing-mode:vertical-rl;margin-right:.5rem;padding-top:.25rem;align-self:flex-start}.line{display:flex;flex-direction:column;align-items:center}.char{font-size:1.75rem;padding:.15rem .1rem;cursor:pointer;-webkit-user-select:none;user-select:none;background:none;border:none;font-family:inherit;color:inherit;line-height:1.2;transition:transform 1s cubic-bezier(.7,0,.3,1),color .8s cubic-bezier(.7,0,.3,1)}.char:hover{color:var(--faint)}.char:focus-visible{outline:2px solid var(--faint);outline-offset:2px;border-radius:2px}.char:focus:not(:focus-visible){outline:none}.char.active{color:var(--ink);transform:scale(1.6);transition:transform 1.2s cubic-bezier(.6,0,.1,1),color .8s cubic-bezier(.7,0,.3,1)}.unfold.shudder{animation:shudder .5s cubic-bezier(.4,0,.6,1)}.char.active.shudder{animation:char-shudder .5s cubic-bezier(.4,0,.6,1)}@keyframes shudder{0%{transform:translate(0)}15%{transform:translate(-2px)}35%{transform:translate(1.5px)}55%{transform:translate(-.8px)}75%{transform:translate(.3px)}to{transform:translate(0)}}@keyframes char-shudder{0%{transform:scale(1.6) translate(0)}15%{transform:scale(1.6) translate(-2px)}35%{transform:scale(1.6) translate(1.5px)}55%{transform:scale(1.6) translate(-.8px)}75%{transform:scale(1.6) translate(.3px)}to{transform:scale(1.6) translate(0)}}.char.yield-near{transform:translateY(calc(var(--yield-dir, 0) * 10px));transition:transform 1.1s cubic-bezier(.6,.05,.2,1),color .8s cubic-bezier(.7,0,.3,1)}.char.yield-far{transform:translateY(calc(var(--yield-dir, 0) * 5px));transition:transform 1.8s cubic-bezier(.6,.05,.15,1),color .8s cubic-bezier(.7,0,.3,1)}#unfold-panel{position:fixed;inset:0;width:100vw;height:100dvh;display:flex;align-items:center;justify-content:center;background:var(--paper);transform:translateY(8vh);opacity:0;pointer-events:none;z-index:20;transition:transform 1.2s cubic-bezier(.4,0,.08,1),opacity .8s cubic-bezier(.4,0,.3,1)}#unfold-panel.open{transform:translateY(0);opacity:1;pointer-events:auto}#unfold-panel.settling{transform:translateY(8vh);opacity:0;pointer-events:none;transition:transform .7s cubic-bezier(.5,0,.7,1),opacity .5s cubic-bezier(.4,0,1,1)}#unfold-panel.shudder{animation:shudder .5s cubic-bezier(.4,0,.6,1)}.unfold-inner{text-align:center;padding:.5rem .75rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;width:12rem}.unfold-char{font-size:2.5rem;font-family:"Noto Serif TC",Songti TC,serif;color:var(--ink);display:block;margin-bottom:.1rem;transition:opacity 1.6s cubic-bezier(.5,0,.2,1) .2s}#unfold-panel .unfold-char{opacity:0}#unfold-panel.open .unfold-char{opacity:.2}.unfold-pinyin{font-size:.95rem;font-family:system-ui,-apple-system,sans-serif;color:var(--faint);letter-spacing:.05em;transition:opacity 1.2s cubic-bezier(.5,0,.2,1) .3s}.unfold-etym{font-size:.8rem;font-family:system-ui,-apple-system,sans-serif;color:var(--faint);letter-spacing:.02em;transition:opacity 1.4s cubic-bezier(.5,0,.2,1) .5s}.unfold-def{font-size:.85rem;font-family:system-ui,-apple-system,sans-serif;color:var(--ink);line-height:1.6;max-width:11rem;transition:opacity 1.6s cubic-bezier(.5,0,.2,1) .7s}#unfold-panel .unfold-pinyin,#unfold-panel .unfold-etym,#unfold-panel .unfold-def{opacity:0}#unfold-panel.open .unfold-pinyin{opacity:1}#unfold-panel.open .unfold-etym{opacity:.7}#unfold-panel.open .unfold-def{opacity:.5}.unfold-def--unknown{font-style:italic;opacity:.35!important;font-size:.8rem}body.encounter-active #app{opacity:.1;pointer-events:none;transition:opacity .6s cubic-bezier(.4,0,.2,1)}body.encounter-active #nav{opacity:.08;pointer-events:none;transition:opacity .4s cubic-bezier(.4,0,.2,1)}.unfold-inner{width:min(20rem,85vw);padding:1.5rem 1rem;gap:.5rem}.unfold-char{font-size:4rem;margin-bottom:.5rem}#unfold-panel.open .unfold-char{opacity:.15}.unfold-pinyin{font-size:1.1rem}.unfold-etym{font-size:.85rem}.unfold-def{max-width:min(18rem,80vw);font-size:.95rem;line-height:1.7}#unfold-panel:after{content:"";position:absolute;bottom:2.5rem;left:50%;transform:translate(-50%);width:2rem;height:2px;background:var(--faint);opacity:0;border-radius:1px}#unfold-panel.open:after{opacity:.25;transition:opacity 1.6s cubic-bezier(.5,0,.2,1) .9s}@media(max-width:640px){body{padding:1.25rem .5rem;gap:1.25rem}#nav{gap:.75rem}#nav button{font-size:.8rem;padding:.2rem .4rem}#nav-indicator{font-size:.7rem}.chapter{padding:1.25rem .75rem;gap:.6rem}.chapter-number{font-size:.6rem;margin-right:.25rem}.char{font-size:1.5rem;padding:.12rem .08rem}}