:root{color-scheme:dark;--ink:#e6dfcc;--muted:#aea994;--ground:#202a23;--accent:#dbc597;--line:#64705a55;--serif:"Noto Serif TC","Source Han Serif TC","PMingLiU",serif}
*{box-sizing:border-box}body{margin:0;background:var(--ground);color:var(--ink);font-family:system-ui,"Microsoft JhengHei",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}
.masthead{height:70px;max-width:1640px;margin:auto;padding:0 4.2vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:var(--serif);font-size:20px;letter-spacing:.15em;display:flex;align-items:center;gap:17px}.brand span{font-family:system-ui,sans-serif;font-size:9px;letter-spacing:.18em;color:var(--muted)}.back-link{font-size:12px;color:var(--muted)}.back-link span{margin-left:12px}main{max-width:1760px;margin:auto;padding:0 2.2vw}.introduction{display:flex;justify-content:space-between;align-items:center;padding:30px 2vw 25px}.eyebrow{font-size:10px;color:var(--muted);letter-spacing:.16em;margin:0 0 8px}.eyebrow span{margin-left:12px;color:#a9a189}h1{font-family:var(--serif);font-size:clamp(28px,3vw,46px);font-weight:500;letter-spacing:.15em;margin:0;line-height:1.3}.intro-copy{color:#c4bfaa;font-family:var(--serif);font-size:13px;line-height:1.9;letter-spacing:.15em;margin:0 2px 0 20px}.scroll-shell{border:1px solid #65705978;border-radius:3px;overflow:hidden;background:#ceb98e}.scroll-stage{height:clamp(380px,65vh,780px);position:relative;overflow:hidden;background:#c9b690;isolation:isolate}.scroll-stage:fullscreen{height:100vh;width:100vw}.scroll-stage canvas#painting{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.scroll-stage canvas#painting.dragging{cursor:grabbing}.loading{position:absolute;inset:0;background:#cdbb96;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#4b4c38;z-index:8}.loading p{font-size:12px;letter-spacing:.25em}.seal{font-family:var(--serif);font-size:25px;background:#8a3b2f;color:#e1c6a3;padding:7px 10px;border:1px solid #78452d;box-shadow:inset 0 0 0 2px #b87b5c}.scene-caption{position:absolute;left:28px;top:24px;display:flex;gap:15px;pointer-events:none;color:#efe3c9;text-shadow:0 1px 8px #161e1a;background:#1e2926ae;padding:12px 17px;border-radius:2px;backdrop-filter:blur(8px)}.scene-caption>span{font-family:var(--serif);font-size:34px;line-height:1.3;color:#d8c093}.scene-caption small{font-size:9px;letter-spacing:.25em;color:#c3baa2}.scene-caption p{font-family:var(--serif);letter-spacing:.12em;font-size:17px;margin:3px 0 0}.view-tools{position:absolute;right:22px;top:24px;display:flex;align-items:center;padding:4px;background:#1a2425da;border:1px solid #aeb7a650;border-radius:3px;gap:1px;color:#eee5cf;backdrop-filter:blur(10px)}.view-tools button{background:transparent;border:0;color:inherit;min-height:36px;padding:0 11px;font-size:11px;white-space:nowrap}.view-tools button:hover{background:#cbbc9730}.view-tools .square{width:34px;padding:0;font-size:20px}.view-tools button[aria-pressed=true]{color:#eac58b}.view-tools output{font-size:10px;min-width:38px;text-align:center;color:#d4c8aa}.tool-separator{width:1px;height:17px;background:#cbbc9750;margin:0 5px}#pauseIcon{font-size:14px;margin-right:6px}.explain-button{position:absolute;right:24px;bottom:22px;border:1px solid #c2c9b470;border-radius:3px;background:#263329e6;color:#e9e2ce;padding:12px 16px;font-size:11px;letter-spacing:.08em}.explain-button span{margin-left:17px;font-size:16px}.gesture-hint{position:absolute;left:26px;bottom:20px;color:#fff0d2;background:#28342bab;font-size:10px;letter-spacing:.12em;padding:7px 10px;border-radius:2px;pointer-events:none}.mobile-hint{display:none}.scene-panel{position:absolute;right:24px;bottom:76px;width:min(370px,calc(100% - 48px));background:#eee6d4;color:#3a3d30;padding:26px 27px;box-shadow:0 10px 40px #111c1a40;border-radius:3px;border:1px solid #ab9e80}.scene-panel .eyebrow{color:#786d51}h2{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:.1em;margin:8px 0 15px}.scene-panel p:not(.eyebrow){font-size:13px;line-height:1.9}.scene-panel .panel-note{font-size:10px!important;color:#777360;border-top:1px solid #b5ac9755;padding-top:12px;margin-bottom:0}.panel-close{position:absolute;right:12px;top:10px;background:none;color:#585a45;border:0;font-size:23px;line-height:1}.scroll-navigation{min-height:97px;background:#273229;padding:17px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}.chapters{display:flex;gap:6px;flex:1}.chapters button{background:none;color:#bdb7a3;border:1px solid transparent;border-radius:3px;min-height:43px;padding:0 15px;font-family:var(--serif);font-size:14px;letter-spacing:.06em;white-space:nowrap}.chapters span{font-family:system-ui,sans-serif;font-size:9px;margin-right:9px;color:#afa483}.chapters button:hover{background:#ffffff08}.chapters button[aria-current=true]{color:#f0e0b9;border-color:#9b8c5f75;background:#dbc89612}.overview{width:34%;max-width:390px;min-width:160px}#minimap{display:block;width:100%;height:43px;border:1px solid #b7a68160;cursor:crosshair;background:#c9b48f}.overview-label{display:flex;justify-content:space-between;color:#8f9983;font-size:8px;letter-spacing:.2em;padding-top:5px}.colophon{display:flex;justify-content:space-between;font-size:10px;color:#9caa91;padding:18px 2px 24px;line-height:1.7;gap:15px}.colophon p{margin:0}.colophon span{margin-left:16px;color:#7f9178}.status{position:absolute;clip-path:inset(50%);height:1px;width:1px;overflow:hidden;margin:0}
@media(max-width:760px){.masthead{height:55px;padding:0 5vw}.brand{font-size:17px}.brand span{display:none}main{padding:0 3vw}.introduction{padding:24px 1vw 20px}.intro-copy{font-size:10px;letter-spacing:.08em}.eyebrow{font-size:8px;letter-spacing:.1em}.eyebrow span{margin-left:4px}.scroll-stage{height:65vh;min-height:390px;max-height:720px}.scene-caption{left:14px;top:16px;padding:8px 10px;gap:9px}.scene-caption>span{font-size:25px}.scene-caption p{font-size:14px}.scene-caption small{font-size:8px}.view-tools{top:auto;bottom:56px;right:12px;left:12px;justify-content:center;padding:2px}.view-tools button{min-height:35px;padding:0 9px}.fullscreen-button{display:none}.explain-button{bottom:12px;right:12px;padding:9px 12px;min-height:34px}.gesture-hint{left:12px;bottom:13px;font-size:8px;padding:7px;max-width:calc(100% - 167px);line-height:1.5}.mobile-hint{display:inline}.scene-panel{right:12px;bottom:103px;width:min(370px,calc(100% - 24px));padding:22px;max-height:calc(100% - 145px);overflow:auto}.scroll-navigation{padding:12px;gap:12px;flex-direction:column}.chapters{justify-content:space-between;width:100%;gap:0}.chapters button{font-size:12px;padding:0 9px;min-height:38px}.chapters span{margin-right:5px}.overview{width:100%;max-width:none}.colophon{font-size:8px;padding-bottom:18px}.colophon span{display:block;margin:3px 0 0}.colophon p:last-child{text-align:right}.back-link{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:430px){.introduction{display:block;padding-bottom:18px}.introduction h1{white-space:nowrap}.intro-copy{margin:9px 0 0;font-size:10px;line-height:1.5}.intro-copy br{display:none}.intro-copy br:after{content:"　"}}