@font-face{font-family:HJ Serif;src:url(../fonts/serif-400.woff2)format("woff2");font-weight:400;font-display:block}@font-face{font-family:HJ Serif;src:url(../fonts/serif-600.woff2)format("woff2");font-weight:600;font-display:block}@font-face{font-family:HJ Hand;src:url(../fonts/wenkai.woff2)format("woff2");font-display:block}:root{--ink:#2f2420;--ink-soft:#6b5545;--paper:#f4ecdc;--page:#efe5cf;--veil:#e2d0af;--red:#c0412b;--shadow:#6e6278;--light:#fbf4e8;--tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.018 0.11' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.33 0 0 0 0 0.22 1.1 0 0 0 -0.72'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.3 0 0 0 0 0.22 1.3 0 0 0 -0.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E")}html,body{-webkit-user-select:none;user-select:none;background:#2b2427;height:100%;margin:0;overflow:hidden}#stage{background:#2b2427;position:absolute;overflow:hidden}#gl{width:100%;height:100%;display:block;position:absolute;inset:0}#ui{transform-origin:0 0;pointer-events:none;width:1920px;height:1080px;color:var(--ink);font-family:HJ Serif,serif;position:absolute;top:0;left:0}#ui .hit{pointer-events:auto}.paper-tex{background-image:var(--tex);background-size:360px 360px}.tcy{text-combine-upright:all}.up{text-orientation:upright}.seal{background:var(--red);color:#f6ecdc;letter-spacing:normal;filter:url(#seal-rough);box-shadow:inset 0 0 0 3px #f6ecdcd9, inset 0 0 0 7px var(--red);border-radius:10%;flex:none;justify-content:center;align-items:center;font-weight:600;display:inline-flex}.seal span{line-height:1;display:block}.seal.two span{writing-mode:vertical-rl;letter-spacing:.08em}.wash{background:linear-gradient(90deg,#f4ecdcf0 0%,#f4ecdcd1 20%,#f4ecdc6b 40%,#f4ecdc00 62%);position:absolute;inset:0}.choose{position:absolute;inset:0}#ui:not([data-mode=choose]) .choose{display:none}.choose .head{margin-left:var(--bleed,0px);flex-direction:row-reverse;align-items:flex-start;gap:40px;padding-top:128px;transition:opacity .45s;display:flex;position:absolute;top:0;bottom:0;left:170px}.head .tcol{flex-direction:column;align-items:center;gap:30px;display:flex}.head .t{writing-mode:vertical-rl;letter-spacing:.12em;font-size:116px;font-weight:600;line-height:1}.head .s{writing-mode:vertical-rl;letter-spacing:.24em;color:var(--ink-soft);white-space:nowrap;margin-top:150px;font-family:HJ Hand,serif;font-size:34px}.choose .head .t{letter-spacing:.18em;font-size:108px}.choose .head .kuan{flex-direction:column;align-items:center;gap:26px;margin-top:110px;display:flex}.choose .head .s{letter-spacing:.26em;margin-top:0;font-size:30px}.choose .head .seal{width:44px;height:84px;font-size:28px}.choose.leaving .head{opacity:0}.scrolls{margin-left:var(--bleed,0px);align-items:flex-start;gap:44px;display:flex;position:absolute;top:96px;left:520px}.scroll{cursor:pointer;width:290px;padding-top:46px;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s;position:relative}[data-mode=choose] .scroll{animation:1s cubic-bezier(.2,.8,.2,1) both hang;animation-delay:calc(.15s + var(--i) * 90ms)}@keyframes hang{0%{opacity:0;transform:translateY(-26px)}}.scrolls:hover .scroll:not(:hover){opacity:.58;filter:saturate(.7)}.scroll:hover{transform:translateY(-6px)}.scroll.soon{cursor:default;opacity:.5}.scroll .cord{height:46px;position:absolute;top:0;left:-5px;right:-5px}.scroll .cord svg{width:100%;height:100%;overflow:visible}.scroll .cord path{fill:none;stroke:#5b4636;stroke-width:1.6px}.scroll .cord circle{fill:#7a5a40}.scroll .rod{background:linear-gradient(#8a5d3e 0%,#5a3925 55%,#3c2519 100%);border-radius:8px;position:relative;box-shadow:0 3px 6px #1e14104d}.scroll .rod.top{height:13px;margin:0 -10px}.scroll .rod.bottom{border-radius:10px;height:20px;margin:0 -4px}.scroll .rod.bottom i{background:linear-gradient(90deg,#cdbd9b,#f2e8d2 45%,#b9a77f);border-radius:5px;width:15px;height:28px;position:absolute;top:-4px;box-shadow:0 2px 4px #1e141059}.scroll .rod.bottom i:first-child{left:-13px}.scroll .rod.bottom i:last-child{right:-13px}.scroll .mount{background:linear-gradient(#d6cbad,#cdc1a1);padding:18px 14px 20px;box-shadow:0 22px 44px #281c1e4d,inset 0 0 0 1px #5a46322e}.scroll .paper{background-color:var(--paper);height:560px;transition:height .8s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #5a46322e,inset 0 0 26px #9678501f}.scroll:not(.soon):hover .paper,.scroll.picked .paper{height:800px}.scroll .upper{height:560px;position:relative}.scroll .title{flex-direction:column;align-items:center;gap:22px;display:flex;position:absolute;top:42px;right:24px}.scroll .name{writing-mode:vertical-rl;letter-spacing:.14em;font-size:58px;font-weight:600;line-height:1}.scroll .title .seal{width:50px;height:50px;font-size:32px}.scroll .blurb{writing-mode:vertical-rl;letter-spacing:.1em;height:410px;color:var(--ink-soft);font-size:22px;line-height:1.9;position:absolute;top:54px;right:116px}.scroll .dur{writing-mode:vertical-rl;letter-spacing:.22em;white-space:nowrap;color:var(--ink-soft);font-family:HJ Hand,serif;font-size:21px;position:absolute;bottom:24px;left:22px}.scroll .lower{opacity:0;height:240px;transition:opacity .4s;position:absolute;top:560px;left:0;right:0}.scroll:not(.soon):hover .lower,.scroll.picked .lower{opacity:1;transition-delay:.15s}.scroll .lower .rule{border-top:1px solid #2f242052;border-bottom:1px solid #2f242052;height:3px;margin:0 20px}.scroll .pic{width:178px;height:151px;position:absolute;top:30px;left:8px}.scroll .quote{writing-mode:vertical-rl;letter-spacing:.06em;height:176px;color:var(--ink-soft);font-size:17px;line-height:1.55;position:absolute;top:22px;right:14px}.scroll .steps{justify-content:center;gap:5px;display:flex;position:absolute;bottom:18px;left:0;right:0}.scroll .steps .seal{width:27px;height:27px;box-shadow:inset 0 0 0 1.5px #f6ecdcd9, inset 0 0 0 3px var(--red);opacity:0;font-size:17px;transform:scale(1.7)rotate(-8deg)}.scroll:not(.soon):hover .steps .seal,.scroll.picked .steps .seal{animation:.26s cubic-bezier(.3,0,.4,1) both stamp;animation-delay:calc(.75s + var(--k) * .11s)}@keyframes stamp{0%{opacity:0;transform:scale(1.7)rotate(-8deg)}to{opacity:1;transform:scale(1)rotate(-2deg)}}.art{filter:url(#brush);width:100%;height:100%;overflow:visible}.art path{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1px;fill-opacity:0;transition:stroke-dashoffset 10ms,fill-opacity 10ms}.art path.soft{stroke:#7d6553}.art path.red{stroke:var(--red)}.art path.f-paper{fill:#f6efe1}.art path.f-back{fill:#e6d9bf}.scroll:not(.soon):hover .art path,.scroll.picked .art path{stroke-dashoffset:0;fill-opacity:1;transition:stroke-dashoffset .75s ease-out calc(.3s + var(--d)), fill-opacity .35s ease calc(.5s + var(--d))}.scroll.picked .title .seal{animation:.4s cubic-bezier(.3,0,.4,1) restamp}@keyframes restamp{45%{transform:scale(1.35)rotate(-6deg)}}.choose.leaving .scroll:not(.picked){opacity:0;transition:opacity .4s,transform .4s;transform:translateY(12px)}.cover{transition:opacity .6s;position:absolute;inset:0}.cover.hide{opacity:0}#ui[data-mode=choose] .cover{display:none}.cover .head{flex-direction:row-reverse;gap:36px;width:380px;display:flex;position:absolute;top:112px;left:150px}.cover .head .t{font-size:128px}.cover .head .seal{width:72px;height:72px;font-size:46px}.cover .head .s{margin-top:170px;font-size:38px}.cover .go{border:2px solid var(--red);outline-offset:5px;color:var(--red);letter-spacing:.5em;cursor:pointer;background:#f4ecdcb8;outline:1px solid #c0412b8c;align-items:center;gap:20px;padding:14px 44px 14px 36px;font-size:34px;font-weight:600;transition:background .25s,color .25s;display:flex;position:absolute;top:862px;left:156px}.cover .go:hover{background:var(--red);color:var(--paper)}.cover .go i{border-top:12px solid #0000;border-bottom:12px solid #0000;border-left:18px solid;width:0;height:0}.cover .tip{letter-spacing:.06em;color:var(--ink-soft);opacity:.75;font-family:HJ Hand,serif;font-size:24px;position:absolute;bottom:52px;left:156px}.cover .others{letter-spacing:.08em;color:var(--ink-soft);cursor:pointer;font-family:HJ Hand,serif;font-size:26px;position:absolute;top:44px;left:60px}.cover .others:hover{color:var(--ink);text-underline-offset:8px;text-decoration:underline}.card{opacity:0;align-items:center;display:flex;position:absolute;top:0;bottom:0;left:200px}.card .slip{background-color:var(--paper);box-shadow:inset 0 0 0 6px var(--paper), inset 0 0 0 7px #3b2a2238, 0 18px 44px #281c1e33;border:1px solid #3b2a2261;flex-direction:row-reverse;align-items:flex-start;gap:30px;padding:56px 48px 54px 46px;display:flex}.card .head{flex-direction:column;align-items:center;gap:20px;display:flex}.card .num{writing-mode:vertical-rl;letter-spacing:.24em;color:var(--red);font-size:30px;font-weight:600}.card .title{writing-mode:vertical-rl;letter-spacing:.1em;font-size:94px;font-weight:600;line-height:1}.card b{font-weight:inherit;color:#0000;-webkit-text-stroke:1px transparent;display:inline-block}.card .seal{opacity:0;width:78px;height:78px;font-size:50px}.card .brush{background:linear-gradient(180deg, #2f2420f2 0%, var(--ink) 12%, #2f2420e0 64%, #2f242000 100%);filter:url(#dry-brush);transform-origin:50% 0;border-radius:6px 6px 40% 40%;align-self:stretch;width:11px;margin:4px 0;transform:scaleY(0)}.card .phrase{writing-mode:vertical-rl;letter-spacing:.14em;max-height:560px;font-size:40px;line-height:1.65}.tag{letter-spacing:.16em;color:var(--ink);opacity:0;background-color:#f4ecdced;align-items:center;gap:18px;padding:9px 30px 9px 9px;font-size:40px;font-weight:600;transition:opacity .6s;display:flex;position:absolute;top:38px;left:44px;box-shadow:0 6px 18px #281c1e38,inset 0 0 0 1px #3b2a2238}.tag .seal{width:68px;height:68px;font-size:44px}.caption{text-align:center;letter-spacing:.08em;color:#fff9ef;text-shadow:0 2px 16px #22181abf,0 0 3px #22181a99;opacity:0;font-family:HJ Hand,serif;font-size:46px;position:absolute;bottom:132px;left:0;right:0}.book{perspective:1800px;visibility:hidden;position:absolute;top:92px;right:52px}.leaf{background-color:var(--page);transform-origin:100%;border-radius:3px 6px 6px 3px;padding:42px 24px 30px;position:relative;box-shadow:0 20px 50px #281c1e5c,inset -12px 0 16px #785a3c29,inset 0 0 40px #96785024}.frame{box-shadow:inset 0 0 0 3.4px var(--page), inset 0 0 0 4.6px #2f2420b3;border:2.6px solid #2f2420d6;flex-direction:row-reverse;padding:7px;display:flex}.cols{writing-mode:vertical-rl;letter-spacing:4px;background:repeating-linear-gradient(270deg,#0000 0 55px,#2f242047 55px 56px) 100% 0;height:648px;font-size:32px;line-height:56px}.ch{color:#0000;-webkit-text-stroke:.9px #be46326b;display:inline-block;position:relative}.ch.inked{color:var(--ink);-webkit-text-stroke:0 transparent}.ch.ring:after{content:"";border:1.6px solid var(--red);width:7px;height:7px;opacity:var(--c);transform:scale(var(--c));border-radius:50%;margin-top:-6px;position:absolute;top:50%;right:3px}.cols .src{letter-spacing:2px;color:var(--ink-soft);padding-top:64px;font-size:21px}.kou{border-right:1px solid #2f242099;flex-direction:column;align-items:center;width:44px;margin-right:7px;padding-top:34px;display:flex}.kou .kt{writing-mode:vertical-rl;text-align:center;letter-spacing:.3em;width:32px;color:var(--red);box-shadow:inset 0 0 0 2.2px var(--page), inset 0 0 0 3.2px #c0412b8c;background:#c0412b0f;border:1.2px solid #c0412bd9;padding:12px 0 9px;font-size:21px;font-weight:600;line-height:32px}.endbook .kou .kt{width:34px;font-size:23px;line-height:34px}.leaf .shade{border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(270deg,#281c180d,#281c1899);position:absolute;inset:0}.end{align-items:center;gap:84px;padding-bottom:30px;padding-left:190px;display:flex;position:absolute;inset:0}.endbook{perspective:2000px;visibility:hidden}.endbook .leaf{padding:46px 28px 34px}.endbook .cols{letter-spacing:4px;background:repeating-linear-gradient(270deg,#0000 0 59px,#2f242047 59px 60px);height:684px;font-size:34px;line-height:60px}.endbook .cols .src{font-size:22px}.endbook .seal{opacity:0;width:80px;height:80px;font-size:52px;position:absolute;bottom:54px;left:78px}.end .side{color:var(--light);text-shadow:0 2px 14px #281c1e8c;opacity:0;flex-direction:column;align-items:flex-start;gap:30px;display:flex}.end .side .t{letter-spacing:.16em;margin-bottom:10px;font-size:92px;font-weight:600}.end .btn{outline-offset:5px;letter-spacing:.2em;cursor:pointer;pointer-events:none;text-shadow:none;border:1.5px solid #fbf4e8e0;outline:1px solid #fbf4e873;padding:12px 40px;font-family:HJ Hand,serif;font-size:32px;transition:background .25s,color .25s}.end .btn:hover{color:var(--ink);background:#fbf4e8f0}.ctrl{height:108px;color:var(--light);background:linear-gradient(#241a1c00,#241a1c99);align-items:center;gap:28px;padding:0 56px;font-size:24px;transition:opacity .5s;display:flex;position:absolute;bottom:0;left:0;right:0}.ctrl.idle{opacity:0;pointer-events:none}.ctrl .home{letter-spacing:.14em;cursor:pointer;white-space:nowrap;border:1px solid #fbf4e88c;padding:5px 16px;font-family:HJ Hand,serif;font-size:22px;transition:background .2s}.ctrl .home:hover{background:#fbf4e829}.ctrl .b{cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;transition:background .2s;display:flex}.ctrl .b:hover{background:#fbf4e829}.ctrl .bar{cursor:pointer;flex:1;height:50px;position:relative}.ctrl .bar .track{background:#fbf4e84d;height:2px;position:absolute;top:24px;left:0;right:0}.ctrl .bar .fill{background:#d9583e;height:3px;position:absolute;top:23.5px;left:0}.ctrl .bar .tick{background:#fbf4e8cc;border-radius:50%;width:6px;height:6px;margin-left:-3px;position:absolute;top:22px}.ctrl .bar .lab{letter-spacing:.1em;white-space:nowrap;opacity:.8;font-family:HJ Hand,serif;font-size:20px;position:absolute;top:-14px;transform:translate(-2px)}.ctrl .bar .knob{background:var(--red);border:2px solid var(--light);border-radius:2px;width:12px;height:12px;margin-left:-8px;position:absolute;top:18px;transform:rotate(45deg);box-shadow:0 1px 6px #00000059}.ctrl .time{font-variant-numeric:tabular-nums;letter-spacing:.04em;opacity:.9;min-width:150px}.ctrl .speed{text-align:center;cursor:pointer;border:3px double #fbf4e899;min-width:56px;padding:2px 8px;font-size:22px}.ctrl svg{fill:currentColor;width:26px;height:26px}.fps{color:#fff;text-shadow:0 1px 3px #000;white-space:pre;font:18px/1.3 ui-monospace,monospace;position:absolute;top:16px;right:20px}.curtain{background-color:var(--veil);pointer-events:auto;display:none;position:absolute;inset:0}.curtain .tex{background-image:var(--tex);background-size:360px 360px;position:absolute;inset:0}