:root{--paper:#f7f5f0;--surface:#fffefb;--ink:#292725;--muted:#918b83;--line:#e3dfd7;--accent:#7c303a;--accent-soft:#eee3e2;--canvas:#eeece6;--shadow:0 12px 32px #29231d16;--serif:"Noto Serif SC","Songti SC","SimSun",serif;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.25}button{border:0;background:none}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:5px}button:hover:not(:disabled){color:var(--accent)}.site-header{height:93px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 4.2%;gap:24px}.brand{display:flex;gap:12px;align-items:center}.brand-mark{width:40px;height:45px;background:var(--accent);color:#fff7ed;display:grid;place-items:center;border-radius:3px 9px 3px 3px;transform:rotate(-4deg)}.brand-mark svg{width:26px;height:26px;transform:rotate(4deg);stroke-width:1.25}.brand-name{font-family:var(--serif);font-size:27px;font-weight:bold;letter-spacing:5px;line-height:1.2}.brand-name>span{display:block;font:8px/1.8 "Segoe UI",sans-serif;letter-spacing:2.2px;margin-top:4px}.header-center{display:flex;gap:9px;align-items:center;font-size:11px;letter-spacing:2px;color:var(--muted)}.status-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}.header-actions{display:flex;align-items:center;gap:22px}.edition{font-size:10px;letter-spacing:1.2px;color:var(--muted)}.edition i{font-style:normal;margin:0 12px;color:var(--line)}.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.icon-btn:hover{background:var(--accent-soft)}.reader-shell{max-width:1740px;margin:auto;padding:0 4.2%}.reader-heading{height:101px;display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;color:var(--muted)}h1{font-family:var(--serif);font-size:23px;letter-spacing:1.8px;margin:9px 0 0;font-weight:600}h1 span{color:var(--muted);margin:0 6px}.reader-tools{display:flex;align-items:center;gap:7px}.mode-switch{display:flex;border:1px solid var(--line);padding:3px;border-radius:5px;gap:2px}.mode-switch button{font-size:11px;padding:7px 16px;border-radius:3px;color:var(--muted)}.mode-switch button.selected{background:var(--ink);color:var(--paper)}.tool-divider{height:20px;width:1px;background:var(--line);margin:0 9px}.reading-area{height:calc(100dvh - 312px);min-height:430px;max-height:1020px;display:grid;grid-template-columns:88px minmax(0,1fr) 228px;gap:24px}.page-rail{display:flex;flex-direction:column;align-items:center;border:1px solid var(--line);border-radius:5px;padding:15px 0 12px}.rail-label{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9px;color:var(--muted);flex-shrink:0}.rail-label svg{width:17px;height:17px}.rail-thumbs{display:flex;flex-direction:column;gap:11px;margin:19px 0 10px;overflow:auto;scrollbar-width:none;width:100%;padding:3px 13px}.thumb{padding:3px;position:relative;border:1px solid transparent;border-radius:3px;flex-shrink:0;width:100%;transition:border-color .2s}.thumb img{display:block;width:100%;height:59px;object-fit:cover;object-position:top;border-radius:1px;filter:saturate(.6);opacity:.65}.thumb.active{border-color:var(--accent)}.thumb.active img,.thumb:hover img{opacity:1;filter:none}.thumb span{position:absolute;right:5px;bottom:4px;background:#1d181cd9;color:#fff;font-size:8px;padding:1px 4px;border-radius:2px;line-height:1.5}.rail-bottom{font-size:8px;letter-spacing:1.5px;color:var(--muted);margin-top:auto;padding-top:6px}.canvas{background:var(--canvas);border:1px solid var(--line);border-radius:5px;display:flex;flex-direction:column;position:relative;min-width:0;overflow:hidden;background-image:radial-gradient(#89827616 .6px,transparent .6px);background-size:5px 5px}.canvas-topline,.canvas-bottomline{height:40px;display:flex;justify-content:space-between;align-items:center;padding:0 22px;flex-shrink:0;font-size:8px;letter-spacing:1.6px;color:var(--muted)}.canvas-bottomline{height:41px;font-size:9px;letter-spacing:1px}.read-direction>span{margin-left:9px}.text-btn{font-size:9px;letter-spacing:.5px;display:flex;gap:7px;align-items:center;color:var(--muted);padding:5px}.text-btn svg{width:12px;height:12px}.stage{flex:1;min-height:0;position:relative;display:flex;justify-content:center;padding:0 63px;perspective:1800px;touch-action:pan-y}.book{height:100%;width:100%;display:flex;justify-content:center;gap:2px;transform-origin:left center;will-change:transform,opacity}.sheet{height:100%;max-width:100%;min-width:0;display:flex;justify-content:center;position:relative;filter:drop-shadow(0 5px 10px #30292324);cursor:zoom-in}.sheet img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.book.double .sheet{max-width:50%}.book.double .sheet:first-child:after{content:"";position:absolute;right:0;top:0;height:100%;width:15px;background:linear-gradient(to left,#0002,transparent);pointer-events:none}.page-arrow{width:37px;height:37px;background:var(--surface);border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;position:absolute;top:50%;transform:translateY(-50%);z-index:2;box-shadow:0 2px 8px #30292304;transition:background .2s,box-shadow .2s}.page-arrow:hover:not(:disabled){box-shadow:0 3px 12px #30292314;background:var(--paper)}.page-arrow.previous{left:15px}.page-arrow.next{right:15px}.page-arrow svg{width:16px;height:16px}.story-panel{padding:9px 0 0 10px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:auto;scrollbar-width:thin}.large-number{font:64px/1 var(--serif);letter-spacing:-3px;margin:22px 0 16px}.large-number>span{font:11px "Segoe UI",sans-serif;color:var(--muted);letter-spacing:1px}.story-panel h2{font:26px/1.65 var(--serif);letter-spacing:3px;margin:0}.story-panel p{font-size:11px;line-height:2.1;letter-spacing:1px;color:var(--muted);margin:14px 0}.story-rule{height:1px;background:var(--line);margin:25px 0 21px;width:100%}dl{margin:0;display:flex;flex-direction:column;gap:13px}dl>div{display:flex;justify-content:space-between;font-size:10px}dt{color:var(--muted);letter-spacing:1px}dd{margin:0;display:flex;align-items:center;gap:7px}.live-dot{height:5px;width:5px;background:#8b9b72;border-radius:50%}.next-peek{padding-top:8px}.next-peek>button{display:block;width:100%;margin-top:13px;padding:0}.peek-image{height:102px;width:100%;border-radius:3px;overflow:hidden;position:relative;background:#ccc}.peek-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#0006)}.peek-image>img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.55);transition:transform .35s}.next-peek>button:hover img{transform:scale(1.05);filter:none}.peek-badge{position:absolute;bottom:12px;left:13px;right:13px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:white;z-index:1}.peek-badge svg{height:15px}.next-peek p{font-size:9px;margin:9px 0 0}.reader-footer{display:flex;align-items:center;height:118px;gap:44px;padding-left:112px}.page-readout{width:110px;flex-shrink:0}.page-readout .eyebrow{font-size:7px;letter-spacing:1.3px}.page-readout>div{display:flex;align-items:baseline;gap:13px;margin-top:3px;font-size:12px;color:var(--muted)}.page-readout strong{font:35px var(--serif);color:var(--ink)}.page-readout>div>span:first-of-type{font-size:16px;color:#c6c0b8}.progress-section{flex:1;max-width:730px}.progress-label,.progress-ends{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:var(--muted);letter-spacing:.5px}.progress-label{margin-bottom:10px}.progress-label>span:first-child{color:var(--ink)}#saved-indicator{display:flex;align-items:center;gap:4px}#saved-indicator svg{width:11px;height:11px}input[type=range]{--progress:0%;width:100%;appearance:none;background:linear-gradient(to right,var(--accent) var(--progress),var(--line) var(--progress));height:3px;border-radius:2px;cursor:pointer;display:block;margin:0}input[type=range]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:var(--accent);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--accent)}input[type=range]::-moz-range-thumb{width:7px;height:7px;border-radius:50%;background:var(--accent);border:2px solid var(--paper)}.progress-ends{font-size:8px;margin-top:10px}.keyboard-hint{margin-left:auto;width:200px;display:flex;flex-direction:column;gap:9px;font-size:9px;color:var(--muted);padding-left:27px;border-left:1px solid var(--line)}.keyboard-hint>span{display:flex;align-items:center;gap:7px}kbd{font:9px "Segoe UI",sans-serif;border:1px solid var(--line);border-radius:3px;min-width:19px;height:18px;display:inline-grid;place-items:center;color:var(--muted);background:var(--surface)}.toast{position:fixed;bottom:30px;left:50%;transform:translate(-50%,15px);background:var(--ink);color:var(--paper);font-size:12px;padding:13px 23px;border-radius:5px;box-shadow:var(--shadow);z-index:30;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}dialog{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:30px;border-radius:8px;box-shadow:0 30px 100px #0004}dialog::backdrop{background:#171510a8;backdrop-filter:blur(5px)}.directory-dialog{width:min(800px,92vw);max-height:90dvh}.dialog-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px}.dialog-heading h2{font:24px var(--serif);margin:9px 0 0}.dialog-heading small{font:9px "Segoe UI",sans-serif;color:var(--muted);letter-spacing:2px;margin-left:15px}.directory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.directory-grid button{padding:7px;border:1px solid var(--line);border-radius:4px;text-align:left}.directory-grid img{width:100%;height:170px;object-fit:contain;background:var(--canvas);display:block}.directory-grid span{font-size:10px;display:block;margin:10px 3px 4px}.directory-grid button.active{border-color:var(--accent);color:var(--accent)}.zoom-dialog{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;padding:0;border:0;border-radius:0;background:var(--canvas);overflow:hidden}.zoom-toolbar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 25px;background:var(--paper);border-bottom:1px solid var(--line);font-size:12px;gap:20px}.zoom-toolbar>span:nth-child(2){font-size:10px;color:var(--muted);margin-left:auto}.zoom-scroll{height:calc(100% - 60px);overflow:auto;text-align:center;padding:28px}.zoom-scroll img{display:block;margin:auto;width:min(1152px,100%);height:auto;box-shadow:var(--shadow)}body.dark{--paper:#20211f;--surface:#30312e;--ink:#eeeae1;--muted:#9f9f95;--line:#3b3c37;--accent:#dfa5a7;--accent-soft:#463638;--canvas:#171917;color-scheme:dark}body.dark .brand-mark{background:#9f5660;color:#fff4e7}body.dark .canvas{background-image:radial-gradient(#ccc1 .6px,transparent .6px)}body.dark .sheet{filter:drop-shadow(0 5px 12px #0005)}
@media(min-width:1500px){.reading-area{grid-template-columns:94px minmax(0,1fr) 255px;gap:35px}.story-panel{padding-left:16px}.story-panel h2{font-size:30px}.large-number{font-size:76px}.reader-footer{padding-left:129px}.thumb img{height:70px}.rail-thumbs{gap:14px}.peek-image{height:130px}}
@media(max-height:850px) and (min-width:1000px){.site-header{height:76px}.reader-heading{height:89px}.reading-area{height:calc(100dvh - 265px);min-height:360px}.reader-footer{height:100px}.large-number{font-size:48px;margin:13px 0}.story-panel h2{font-size:22px}.story-panel p{margin:8px 0}.story-rule{margin:14px 0}dl{gap:10px}.thumb img{height:42px}.rail-thumbs{gap:8px;margin-top:13px}.peek-image{height:78px}.story-panel{gap:12px}}
@media(max-width:1100px){.reading-area{grid-template-columns:72px minmax(0,1fr) 185px;gap:18px}.rail-thumbs{padding:3px 9px}.story-panel{padding-left:0}.story-panel h2{font-size:23px}.reader-footer{padding-left:90px;gap:25px}.keyboard-hint{width:160px;padding-left:18px}.header-center{display:none}.stage{padding:0 50px}.canvas-topline,.canvas-bottomline{padding:0 17px}.page-arrow.previous{left:10px}.page-arrow.next{right:10px}.page-arrow{width:31px;height:31px}}
@media(max-width:850px){.story-panel{display:none}.reading-area{grid-template-columns:72px minmax(0,1fr)}.reader-footer{padding-left:90px}.keyboard-hint{width:140px}.site-header{height:76px}.reader-heading{height:86px}.reading-area{height:calc(100dvh - 270px);min-height:400px}.reader-footer{height:108px}.edition{font-size:9px}.reader-shell{padding:0 4%}.canvas-bottomline{font-size:8px}}
@media(max-width:560px){.site-header{height:72px;padding:0 20px}.brand-mark{height:34px;width:31px}.brand-mark svg{width:21px}.brand-name{font-size:22px;letter-spacing:4px}.brand-name>span{font-size:6px;letter-spacing:1.8px;margin-top:2px}.edition{font-size:8px;letter-spacing:.4px}.edition i{margin:0 5px}.header-actions{gap:7px}.reader-shell{padding:0 14px}.reader-heading{height:90px;gap:8px}.chapter-heading .eyebrow{font-size:7px;letter-spacing:1.4px}h1{font-size:17px;letter-spacing:.6px;margin-top:8px}h1 span{margin:0 2px}.reader-tools{gap:0}.mode-switch{padding:2px}.mode-switch button{font-size:10px;padding:6px 9px}.tool-divider{display:none}.reader-tools .icon-btn{width:29px;height:31px}.reader-tools svg{width:16px;height:16px}.reading-area{height:calc(100dvh - 268px);min-height:310px;display:block}.page-rail{display:none}.canvas{height:100%;border-radius:4px}.canvas-topline{height:30px;font-size:7px;letter-spacing:1.2px;padding:0 12px}.canvas-bottomline{height:30px;padding:0 10px}.canvas-bottomline .text-btn{font-size:7px;gap:4px}.read-direction{font-size:7px;letter-spacing:.5px}.read-direction>span{margin-left:3px}.stage{padding:0 7px}.page-arrow{width:28px;height:37px;border-radius:3px;border:0;background:#f7f5f0d4;top:50%;box-shadow:0 1px 7px #0001}.page-arrow.previous{left:3px}.page-arrow.next{right:3px}.page-arrow:disabled{opacity:0;pointer-events:none}body.dark .page-arrow{background:#30312edb}.reader-footer{height:106px;padding:0 5px;gap:24px}.page-readout{width:74px}.page-readout .eyebrow{font-size:6px;letter-spacing:.8px}.page-readout strong{font-size:29px}.page-readout>div{gap:8px;font-size:10px}.keyboard-hint{display:none}.progress-label{font-size:8px}.progress-ends{font-size:7px}.progress-label #saved-indicator{font-size:7px}.directory-dialog{padding:20px}.directory-grid{gap:10px;grid-template-columns:repeat(2,1fr)}.directory-grid img{height:160px}.zoom-toolbar{padding:0 15px;gap:10px}.zoom-toolbar>span:nth-child(2){display:none}.zoom-scroll{padding:0}.zoom-scroll img{width:200%;max-width:none}.toast{font-size:11px;bottom:25px}.brand{gap:9px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.mobile-directory{display:none}.chapter-heading{min-width:0}h1{font-size:21px;letter-spacing:1px}.reader-tools{flex-shrink:0}.chapter-heading .eyebrow>span{margin:0 5px}@media(max-width:850px){h1{font-size:17px;max-width:400px;line-height:1.6}.reader-heading{gap:14px}}@media(max-width:560px){.mobile-directory{display:inline-flex}.reader-heading{height:104px;align-items:center;gap:5px}h1{font-size:14px;letter-spacing:.3px;line-height:1.65;max-width:210px}.chapter-heading .eyebrow{font-size:6px;letter-spacing:.7px}.reading-area{height:calc(100dvh - 282px)}.reader-tools .icon-btn{width:25px}.mode-switch button{padding:6px 7px}.reader-tools{flex-wrap:wrap;justify-content:flex-end;max-width:147px}}
.series-title{font:600 20px/1.45 var(--serif);letter-spacing:2px;flex-shrink:0}.series-title>span{display:block}.author-credit{font-size:10px;color:var(--muted);letter-spacing:1px}.author-credit>span{color:var(--ink);margin-left:12px}h1{font-size:23px;max-width:none;letter-spacing:1.8px}@media(max-width:560px){.series-title{font-size:14px;letter-spacing:.6px}.site-header{height:82px;padding:0 18px;gap:10px}.author-credit{font-size:8px;white-space:nowrap;display:flex;flex-direction:column;gap:4px}.author-credit>span{margin:0;font-size:9px}.header-actions{gap:7px}.header-actions .icon-btn{width:28px}.reader-heading{height:90px}h1{font-size:17px}.reading-area{height:calc(100dvh - 278px)}}
.story-panel .info-heading{font:500 12px/1.5 "Segoe UI","Microsoft YaHei",sans-serif;letter-spacing:1px;margin:0 0 25px;padding-bottom:15px;border-bottom:1px solid var(--line)}
.motion-toggle{padding:9px 11px;border:1px solid var(--line);border-radius:4px;font-size:11px;white-space:nowrap;min-height:33px}.motion-toggle[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}.motion-toggle:hover{background:var(--accent-soft)}@media(max-width:560px){.reader-tools{max-width:226px;gap:3px}.motion-toggle{font-size:10px;padding:6px 8px;min-height:31px}.chapter-heading{flex-shrink:0}.reader-heading{gap:10px}.directory-grid{max-height:65dvh;overflow:auto}}
.reading-area{grid-template-rows:minmax(0,1fr)}.page-rail,.canvas,.story-panel{min-height:0}.rail-thumbs{min-height:0;flex:1}