@font-face{font-family:PhagsBook;src:url('assets/fonts/BabelStonePhagspaBook_v2.ttf') format('truetype');font-display:block}
@font-face{font-family:SourceHanSerif;src:url('assets/fonts/SourceHanSerifSC-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:block}
.letter-unit.han.translated-han .glyph,dialog .translated-han,.inherited-gloss.translated-han{font-family:SourceHanSerif,serif;font-weight:400}
:root{color-scheme:light;--paper:#f4efe4;--ink:#5d5a57;--red:#a86c5d}*{box-sizing:border-box}html,body{margin:0;background:var(--paper);color:var(--ink);scrollbar-width:none}body{font:15px/1.9 'Microsoft YaHei',sans-serif}body::-webkit-scrollbar{display:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:5px}#stage{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:var(--paper)}#painting,#flat-painting{position:absolute;inset:0;width:100%;height:100%;z-index:0}#flat-painting img{position:absolute;transform:translateX(-50%);object-fit:contain;object-position:center bottom}#flat-painting{display:none}#scroll-space{height:2500vh;pointer-events:none}.interior{position:absolute;inset:0;pointer-events:none;opacity:0;z-index:2;background:var(--paper);mask-image:radial-gradient(ellipse 85% 90% at 50% 50%,black 45%,transparent 100%)}.interior img{width:100%;height:100%;object-fit:cover;transform-origin:50% 50%}#portal{position:absolute;left:58%;top:5%;height:92%;width:46%;transform:translateX(-50%);transform-origin:50% 73%;pointer-events:none;opacity:0;z-index:3}#portal img{width:100%;height:100%;object-fit:contain}#inscription{position:absolute;left:29%;top:8%;width:42%;height:84%;opacity:0;z-index:4;pointer-events:none;mask-image:radial-gradient(ellipse 64% 67% at 50% 50%,black 54%,transparent 100%)}#inscription img{width:100%;height:100%;object-fit:contain}#letters{position:absolute;inset:0;z-index:5;pointer-events:none}.letter-unit{position:absolute;left:0;top:0;margin:0;padding:0;background:none;border:0;line-height:1;color:var(--ink);pointer-events:auto;touch-action:none;user-select:none;transform-origin:center;will-change:transform,opacity}.letter-unit .glyph{display:block;writing-mode:vertical-lr;text-orientation:mixed;font-family:PhagsBook;white-space:pre;letter-spacing:normal}.letter-unit.han .glyph{font-family:SimSun,'Songti SC',serif;writing-mode:horizontal-tb;line-height:1.08}.letter-unit:focus-visible{outline:1px solid var(--red);outline-offset:4px}.paper{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.045;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");background-size:240px 240px}#read{position:absolute;right:3%;bottom:4%;z-index:8;width:44px;height:44px;background:none;border:0;padding:8px;opacity:.65}#read svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.1}#read[hidden]{display:none}#loading{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:var(--paper)}#loading span{width:28px;height:2px;background:var(--red)}#loading[hidden]{display:none}#error{position:absolute;left:25%;right:25%;top:40%;z-index:25;padding:26px;background:#faf7ef;border:1px solid #d4c9b8}#error[hidden]{display:none}#error button{background:none;border:1px solid #d4c9b8;padding:8px 18px}#fallback-notice{position:absolute;bottom:4%;left:4%;font-size:12px;z-index:10}#fallback-notice[hidden]{display:none}
dialog{position:fixed;inset:0 0 0 auto;margin:0;width:550px;height:100dvh;max-height:100dvh;max-width:85vw;border:0;border-left:1px solid #d4c9b8;padding:28px 35px 50px;background:#f8f4eb;color:var(--ink);overflow:auto}dialog::backdrop{background:#f4efe466;backdrop-filter:blur(2px)}dialog header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d4c9b8;margin-bottom:30px}dialog header h1{font:24px/1.5 SimSun,serif;font-weight:400}dialog button{background:none;border:0;padding:10px}dialog h2,dialog h3{font-family:SimSun,serif;font-weight:400}dialog h2{font-size:25px;margin-top:36px}dialog p{font-size:14px;line-height:1.95}dialog a{color:#925c46}dialog figure{margin:25px 0}dialog img{width:100%;height:auto}dialog figcaption{font-size:12px;color:#81796e}dialog .reading-phags{font:35px/1 PhagsBook;writing-mode:vertical-lr;text-orientation:mixed;white-space:pre;margin:20px 0}dialog .note{font-size:12px;color:#81796e}dialog .setting{display:flex;align-items:center;gap:12px;border-bottom:1px solid #ded4c6;padding:15px 0}dialog .setting input{accent-color:var(--red)}@media(prefers-reduced-motion:reduce){.letter-unit{will-change:auto}}
#inscription{display:grid;place-items:center;mask-image:none}#inscription img{width:100%;height:auto;max-height:100%;object-fit:contain;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,black 58%,transparent 100%)}
.inherited-gloss{position:absolute;left:0;top:0;pointer-events:none;font-family:SimSun,serif;line-height:1;color:var(--red);opacity:0}
#discovery{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;display:grid;place-items:center;mask-image:radial-gradient(circle var(--reveal-radius,150px) at var(--reveal-x,50%) var(--reveal-y,40%),black 28%,transparent 100%)}
#discovery img{width:auto;height:auto;max-width:76%;max-height:84%;object-fit:contain;mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,black 60%,transparent 100%)}
dialog header{position:sticky;top:-28px;z-index:2;padding-top:14px;background:#f8f4eb}
dialog section{scroll-margin-top:95px}
/* A fixed painting must not become a programmatically scrollable ancestor
   when a letter or the reader-return button receives focus. */
#stage{overflow:clip}
#city-words{position:absolute;inset:0;z-index:4;pointer-events:none}
.city-word{position:absolute;font-family:SourceHanSerif,serif;font-weight:400;writing-mode:vertical-rl;text-orientation:upright;line-height:1.35;letter-spacing:.12em;color:#5d5a57;transform:translateX(-50%);white-space:nowrap;opacity:0}
#inscription img{mask-image:linear-gradient(to right,transparent,black 17%,black 83%,transparent),linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);mask-composite:intersect}
#scroll-space{height:1000vh}
#inscription{left:19%;top:2%;width:62%;height:96%}
#guide{position:absolute;left:3.2%;top:6%;z-index:8;width:294px;padding:20px 22px 18px;background:#f7f2e9e8;border:1px solid #d9cdbc;box-shadow:0 8px 32px #5d5a5712;backdrop-filter:blur(4px)}
#guide h2{font:22px/1.45 SourceHanSerif,serif;font-weight:400;margin:0 0 12px}
#guide p{font:13px/1.7 SourceHanSerif,serif;margin:7px 0;color:#69645c}
#guide-start{margin-top:14px;padding:4px 13px;border:1px solid #aaa092;background:transparent;font:13px/1.8 SourceHanSerif,serif}
#guide-close{position:absolute;top:7px;right:8px;width:28px;height:28px;padding:0;border:0;background:none;font:20px/1 serif;color:#82796d}
#guide-toggle{position:absolute;left:3%;bottom:4%;z-index:8;width:36px;height:36px;border:1px solid #c5baaa;border-radius:50%;background:#f4efe4b8;font:18px/1 Georgia,serif;color:#777066;opacity:.72}
#guide[hidden],#guide-toggle[hidden]{display:none}
#stage{cursor:pointer}#guide{cursor:auto}.letter-unit{cursor:grab}.letter-unit:active{cursor:grabbing}
#story{position:absolute;z-index:7;left:3.2%;bottom:5.2%;width:min(370px,30vw);padding:18px 28px 17px 0;pointer-events:none;background:linear-gradient(90deg,#f4efe4f0 0%,#f4efe4c4 72%,transparent 100%);font-family:SourceHanSerif,serif;color:#514c47;text-shadow:0 1px 2px #f4efe4}
#story-index{display:block;font:12px/1.4 Georgia,serif;letter-spacing:.18em;color:#8d7d6e}
#story-title{font:normal clamp(25px,2.15vw,36px)/1.35 SourceHanSerif,serif;margin:8px 0 10px;letter-spacing:.08em}
#story-line{font:clamp(14px,1.08vw,17px)/1.85 SourceHanSerif,serif;margin:0;max-width:18em}
#story-action{font:12px/1.65 SourceHanSerif,serif;color:#9a6e5d;margin:17px 0 0;letter-spacing:.04em}
#story-ending{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;pointer-events:auto}
#story-ending[hidden]{display:none}
#story-ending button{padding:4px 0;background:none;border:0;border-bottom:1px solid #ad8773;font:13px/1.8 SourceHanSerif,serif}
#story.is-ending{bottom:18%;width:min(440px,34vw)}
#story.is-ending #story-title{font-size:clamp(29px,2.6vw,43px)}
@media(max-width:1100px){#story{width:36vw}#story.is-ending{width:42vw}}
#story.enter{animation:story-arrive .65s ease-out both}
@keyframes story-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#story.enter{animation:none}}
#previous-chapter{position:absolute;right:3.1%;top:5.4%;z-index:8;padding:5px 0;background:none;border:0;border-bottom:1px solid #a99b8d;color:#716a62;font:13px/1.7 SourceHanSerif,serif;letter-spacing:.08em}
#previous-chapter span{margin-left:7px}
#previous-chapter[hidden]{display:none}