:root{color-scheme:light;--ink:#282c31;--muted:#7b7368;--gold:#b38e57;--gold-strong:#926c37;--line:#e7ded2;--paper:#fffefa;--canvas:#f5f1ea;--shadow:0 12px 36px rgba(43,36,29,.07)}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}button,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid #c79b57;outline-offset:3px}[hidden]{display:none!important}.reader-shell{width:min(100%,1020px);margin:auto;padding:0 clamp(14px,3vw,30px)}
.reader-header{height:74px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line)}.back-link,.home-link{font-size:13px;font-weight:700;color:#6c5c48}.back-link{display:flex;align-items:center;gap:7px}.back-link span{font-size:20px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:37px;height:37px;display:grid;place-items:center;border-radius:11px;color:#ffedcb;background:linear-gradient(145deg,#343e47,#222a32);font-weight:800}.brand>div{display:flex;flex-direction:column;gap:1px}.brand strong{font-size:15px}.brand small{font-size:10px;color:var(--muted);letter-spacing:.1em}
.reader-title{margin:22px 0 17px}.eyebrow{margin:0 0 6px;color:var(--gold-strong);font:800 10px Georgia,serif;letter-spacing:.2em}.reader-title h1{margin:0;font-size:clamp(23px,3vw,33px);line-height:1.4}.reader-title p:last-child{margin:6px 0 0;color:var(--muted);font-size:13px}.reader-status{padding:28px 15px;border:1px solid var(--line);border-radius:16px;background:var(--paper);text-align:center;color:var(--muted);font-size:13px}.reader{margin-bottom:34px;border:1px solid var(--line);border-radius:18px;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}.reader-selectors{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 19px;background:linear-gradient(115deg,#fdfaf4,#f3eadb);border-bottom:1px solid var(--line)}.reader-selectors label,.page-jump{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:var(--gold-strong)}select{width:100%;min-width:0;border:1px solid #d9c9af;border-radius:9px;background:#fffefa;color:var(--ink);padding:9px 30px 9px 11px;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 20px}.page-details{min-width:0;display:flex;flex-direction:column;gap:4px}.page-kicker{color:var(--gold-strong);font-size:10px;letter-spacing:.1em;font-weight:800}.page-details strong{font-size:16px;line-height:1.45}.page-details small{color:var(--muted);font-size:11px}.page-jump{min-width:150px;max-width:40%;flex:none}.action-bar{padding:0 20px 16px;display:flex;align-items:center;justify-content:space-between;gap:15px}.mask-actions,.zoom-actions{display:flex;align-items:center;gap:8px}.action-button{border:1px solid #d7c5a7;border-radius:9px;padding:9px 13px;background:#faf5ec;color:#665239;font-size:12px;font-weight:800}.action-button:hover,.icon-button:hover{background:#f0e4ce}.action-button.is-primary{background:linear-gradient(145deg,#3a454e,#293039);border-color:#2c3540;color:#fff2d9}.action-button.is-primary:hover{background:#46515a}.zoom-actions{color:var(--muted);font-size:11px}.icon-button{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:#faf8f3;color:#564735;font-size:20px;line-height:1}.zoom-actions output{min-width:36px;text-align:center;font-weight:700}
.image-scroller{overflow:auto;overscroll-behavior-x:contain;background:#e8e4dd;padding:14px 12px;scrollbar-color:#d5c4a8 transparent}.page-stage{position:relative;width:100%;margin:auto;background:white;box-shadow:0 10px 28px rgba(22,28,35,.14);overflow:hidden;touch-action:pan-x pan-y}.page-stage>img,.reveal-layers>img{display:block;width:100%;height:100%;object-fit:fill}.page-stage>img{position:absolute;inset:0}.reveal-layers,.mask-hotspots{position:absolute;inset:0}.reveal-layers{pointer-events:none}.reveal-layers>img{position:absolute;inset:0}.mask-hotspots>button{position:absolute;border:1px dashed rgba(142,97,47,.45);background:rgba(255,241,214,.025);padding:0;touch-action:manipulation}.mask-hotspots>button:hover,.mask-hotspots>button:focus-visible{background:rgba(216,177,106,.18);border-color:#a47531}.mask-hotspots>button.is-revealed{border-color:rgba(86,112,91,.45)}.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px}.nav-button{border:1px solid #d9c6a8;border-radius:10px;background:#faf6ef;color:#5c4c39;padding:11px 15px;font-size:13px;font-weight:800}.nav-button.is-next{background:linear-gradient(145deg,#3a454e,#293039);border-color:#2c3540;color:#fff2d9}.nav-button:disabled{cursor:not-allowed;opacity:.43}.reveal-count{text-align:center;font-size:11px;color:var(--muted)}.reader-note{margin:0;padding:0 20px 21px;font-size:11px;line-height:1.6;color:var(--muted)}footer{min-height:65px;display:flex;align-items:center;border-top:1px solid var(--line);color:#8f867b;font-size:11px}
.image-scroller{overflow:auto;overscroll-behavior-x:contain;background:#e8e4dd;padding:14px 12px;scrollbar-color:#d5c4a8 transparent}.page-stage{position:relative;width:100%;margin:auto;background:white;box-shadow:0 10px 28px rgba(22,28,35,.14);overflow:hidden;touch-action:pan-x pan-y}.page-stage>img,.reveal-layers>img{display:block;width:100%;height:100%;object-fit:fill}.page-stage>img{position:absolute;inset:0}.reveal-layers,.mask-hotspots{position:absolute;inset:0}.reveal-layers{pointer-events:none}.reveal-layers>img{position:absolute;inset:0}.mask-hotspots>button{position:absolute;border:0;border-radius:2px;background:linear-gradient(180deg,#fff0a0 0%,#ffe27a 50%,#ffeda0 100%);padding:0;touch-action:manipulation}.mask-hotspots>button:hover,.mask-hotspots>button:focus-visible{box-shadow:inset 0 0 0 2px #ab7c36}.mask-hotspots>button.is-revealed{background:transparent;box-shadow:inset 0 0 0 1px rgba(86,112,91,.22)}.image-error{margin:12px 20px;color:#9a3e36;font-size:12px}.reader-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px}.nav-button{border:1px solid #d9c6a8;border-radius:10px;background:#faf6ef;color:#5c4c39;padding:11px 15px;font-size:13px;font-weight:800}.nav-button.is-next{background:linear-gradient(145deg,#3a454e,#293039);border-color:#2c3540;color:#fff2d9}.nav-button:disabled{cursor:not-allowed;opacity:.43}.reveal-count{text-align:center;font-size:11px;color:var(--muted)}.reader-note{margin:0;padding:0 20px 21px;font-size:11px;line-height:1.6;color:var(--muted)}footer{min-height:65px;display:flex;align-items:center;border-top:1px solid var(--line);color:#8f867b;font-size:11px}
@media(max-width:620px){.reader-header{height:64px}.brand-mark{width:33px;height:33px}.brand strong{font-size:13px}.brand small{font-size:9px}.back-link,.home-link{font-size:11px}.reader-title{margin:18px 0 14px}.reader-title h1{font-size:23px}.reader-title p:last-child{font-size:11px}.reader{border-radius:13px}.reader-selectors{padding:12px;gap:8px}.reader-selectors label{font-size:10px}select{font-size:11px;padding:8px 23px 8px 8px}.page-bar{padding:13px 12px}.page-details strong{font-size:13px}.page-jump{min-width:105px}.action-bar{padding:0 12px 12px}.action-button{padding:8px 9px;font-size:11px}.mask-actions,.zoom-actions{gap:5px}.zoom-actions output{min-width:30px;font-size:10px}.icon-button{width:27px;height:27px}.image-scroller{padding:6px}.reader-nav{padding:13px 12px;gap:5px}.nav-button{padding:10px 9px;font-size:11px}.reveal-count{font-size:10px}.reader-note{padding:0 12px 16px;font-size:10px}}
.audio-bar{display:flex;align-items:center;gap:9px;padding:13px 20px;margin:0 20px 18px;border:1px solid #e5d5bb;border-radius:12px;background:#faf6ef}.audio-toggle{flex:none;border:0;border-radius:8px;padding:8px 11px;background:#34414b;color:#fff4df;font-size:11px;font-weight:800}.audio-time{font:700 10px Georgia,serif;color:#756d63}.audio-bar input[type=range]{flex:1;min-width:30px;accent-color:#a6804d}.audio-bar select{width:76px;padding:6px;font-size:11px}.audio-continuous{display:flex;align-items:center;gap:3px;white-space:nowrap;font-size:10px;color:#675b4c}.audio-continuous input{accent-color:#a6804d}.reader-note{padding-top:0}
@media(max-width:620px){.audio-bar{flex-wrap:wrap;gap:7px;padding:10px;margin:0 12px 14px}.audio-toggle{padding:8px;font-size:10px}.audio-bar input[type=range]{flex-basis:35%}.audio-bar select{width:67px}.audio-continuous{margin-left:auto}}

/* Mobile reader: reduce chrome, keep the tap targets comfortable. */
@media(max-width:620px){
  .reader-header{height:52px}
  .reader-title{margin:10px 0 9px}
  .reader-title .eyebrow,.reader-title p:last-child{display:none}
  .reader-title h1{font-size:18px;line-height:1.35}
  .reader-selectors{gap:8px;padding:9px 11px}
  .reader-selectors label{gap:3px}
  .reader-selectors select,.page-jump select{min-height:42px;font-size:12px}
  .page-bar{gap:8px;padding:10px 11px 9px}
  .page-details{gap:2px}
  .page-kicker,.page-jump-label{display:none}
  .page-details strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-details small{font-size:10px}
  .page-jump{min-width:104px;max-width:42%}
  .action-bar{gap:7px;padding:0 11px 10px}
  .mask-actions,.zoom-actions{gap:4px}
  .action-button{min-height:42px;padding:8px 9px}
  .icon-button{width:42px;height:42px}
  .reader-nav{gap:5px;padding:10px 11px}
  .nav-button{min-height:42px;padding:8px 10px}
  .reveal-count{white-space:nowrap;font-size:10px}
  .reader-note{padding:0 11px 12px;font-size:10px;line-height:1.45}
}

@media(max-width:360px){
  .reader-shell{padding:0 10px}
  .action-button{padding-inline:7px}
  .zoom-actions output{min-width:27px}
  .icon-button{width:40px;height:42px}
  .nav-button{padding-inline:7px}
}

/* Put the two mask commands beside paging, below the page image. */
.reader-nav .mask-actions{flex:1;justify-content:center}
.action-bar .reveal-count{white-space:nowrap}
@media(max-width:620px){
  .reader-nav{gap:6px}
  .reader-nav .mask-actions{gap:6px;min-width:0}
  .reader-nav .action-button{min-height:42px;padding-inline:9px}
  .reader-nav .nav-button{flex:none;display:grid;place-items:center;width:42px;min-width:42px;height:42px;padding:0;font-size:20px}
  .reader-nav .nav-word{display:none}
}
@media(max-width:360px){
  .reader-nav .action-button{padding-inline:7px}
  .reader-nav .nav-button{width:40px;min-width:40px}
}

/* The audio controls stay together, while the study image remains the main canvas. */
.audio-bar{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;align-items:center;gap:10px}
.audio-toggle{display:grid;place-items:center;width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;background:#9779d2;color:#fff;font-size:18px}
.audio-main{min-width:0;display:flex;flex-direction:column;gap:5px}
.audio-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;font-size:11px;color:#4e443e}
.audio-meta strong{white-space:nowrap}
.audio-times{white-space:nowrap;color:#8b8179;font-size:10px}
.audio-bar .audio-main input[type=range]{width:100%;min-width:0;margin:0;accent-color:#e66e8d}
.audio-continuous{min-height:36px;padding:0 9px;border:1px solid #d9c7ea;border-radius:20px;background:#fff;color:#786198;font-weight:700}
.audio-bar select{width:72px;min-height:36px;border-color:#d9c7ea;border-radius:20px;background:#fff;color:#735d90;text-align:center}

@media(max-width:620px){
  html,body{height:100%;background:#fffaf4}
  .reader-shell{width:100%;height:100vh;height:100dvh;padding:0;display:flex;flex-direction:column}
  .reader-header{position:relative;z-index:1;flex:none;height:56px;min-height:56px;padding:0 13px;border-bottom:1px solid #f0e8df;background:#fffaf4}
  .reader-header .brand{position:absolute;left:50%;transform:translateX(-50%)}
  .reader-header .brand-mark,.reader-header .brand small{display:none}
  .reader-header .brand strong{font-size:17px;white-space:nowrap}
  .reader-header .back-link{min-width:44px;height:44px;font-size:0}
  .reader-header .back-link span{font-size:27px;font-weight:400}
  .reader-header .home-link{display:grid;place-items:center;min-width:44px;height:36px;padding:0 8px;border:1px solid #eadfd4;border-radius:20px;background:#fff;font-size:11px}
  main{flex:1;min-height:0;display:flex;flex-direction:column}
  .reader-title{display:none}
  .reader-status{margin:16px 12px}
  .reader{display:flex;flex:1;min-height:0;flex-direction:column;margin:0;border:0;border-radius:0;background:#fff;box-shadow:none;overflow:hidden}
  .reader-selectors{order:1;flex:none;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:8px;padding:10px 12px;border-bottom:1px solid #f0e8df;background:#fffaf4}
  .reader-selectors label{position:relative;gap:0;font-size:0}
  .reader-selectors label::after{content:'⌄';position:absolute;right:12px;top:50%;transform:translateY(-56%);pointer-events:none;color:#866d4e;font-size:18px;font-weight:700}
  .reader-selectors select{appearance:none;-webkit-appearance:none;min-height:46px;border-radius:24px;padding:0 18px 0 7px;text-align:center;font-size:12px;font-weight:800}
  .reader-selectors label:first-child select{border-color:#f5c6ce;background:#ffe5eb;color:#854b5b}
  .reader-selectors label:last-child select{border-color:#efdd9d;background:#fff3c2;color:#6a5632}
  .image-scroller{order:2;flex:1;min-height:0;max-height:none;padding:0 4px;overflow:auto;background:#fff;-webkit-overflow-scrolling:touch}
  .page-stage{box-shadow:none}
  .image-error{order:3;flex:none;margin:4px 12px}
  .audio-bar{order:4;flex:none;display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:7px;min-height:64px;margin:0;padding:7px 9px;border:0;border-top:1px solid #eadfd4;border-radius:0;background:#fffcf8}
  .audio-toggle{width:44px;height:44px;min-width:44px;padding:0;font-size:18px}
  .audio-main{gap:4px}
  .audio-meta{gap:4px;font-size:10px}
  .audio-times{font-size:9px}
  .audio-continuous{min-height:44px;margin:0;padding:0 6px;font-size:9px}
  .audio-bar select{width:60px;min-height:44px;padding:5px 3px;font-size:10px}
  .page-bar{order:5;flex:none;min-height:38px;gap:7px;padding:3px 10px;background:#fff8ee}
  .page-details{flex-direction:row;align-items:center;gap:4px}
  .page-details .page-kicker,.page-details strong{display:none}
  .page-details small{font-size:11px;font-weight:700;white-space:nowrap;color:#77695d}
  .page-jump{min-width:0;max-width:none;flex-direction:row;align-items:center;gap:5px;white-space:nowrap}
  .page-jump .page-jump-label{display:inline;font-size:10px}
  .page-jump select{width:110px;min-height:38px;padding:3px 19px 3px 7px;border-radius:8px;font-size:10px}
  .action-bar{order:6;flex:none;min-height:40px;gap:6px;padding:1px 10px 5px;background:#fff8ee}
  .reveal-count{font-size:10px}
  .zoom-actions{gap:4px}
  .zoom-actions output{min-width:32px;font-size:10px}
  .icon-button{width:44px;height:44px;font-size:21px}
  .reader-nav{order:7;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0;padding:7px 9px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #f1e5db;background:#fffaf4}
  .reader-nav .mask-actions{display:contents}
  .reader-nav .nav-button,.reader-nav .action-button{display:flex;align-items:center;justify-content:center;gap:2px;width:100%;min-width:0;min-height:46px;height:46px;padding:2px 3px;border-radius:13px;font-size:11px;white-space:nowrap;line-height:1.2}
  .reader-nav .nav-word{display:inline}
  .reader-nav .nav-button:first-child{border-color:#e4d8f7;background:#eae0fa;color:#665389}
  .reader-nav #cover-all{border-color:#f8d6c8;background:#ffe2d6;color:#855b4f}
  .reader-nav #show-all{border-color:#cfebdc;background:#ddf2e4;color:#427458}
  .reader-nav .nav-button.is-next{border-color:#d2e6f7;background:#deedfc;color:#456a89}
  .reader-note,footer{display:none}
}

@media(max-width:360px){
  .reader-nav{gap:4px;padding-inline:6px}
  .reader-nav .nav-button,.reader-nav .action-button{font-size:10px}
  .audio-bar{gap:5px;padding-inline:6px}
  .audio-continuous{padding-inline:4px}
}

/* Keep the original unzoomed desktop image width and place progress beside the page count. */
.page-stage{max-width:760px}
.page-bar>.reveal-count{margin-left:auto}
.mobile-page-jump{display:none}

/* The mobile reader follows the compact, image-first mini-program layout. */
@media(max-width:620px){
  .reader-shell{padding-top:env(safe-area-inset-top)}
  .reader-header{display:none}
  .reader-header .brand strong{font-size:17px;letter-spacing:.03em}
  .reader-header .back-link{color:#302b30}
  .reader-header .home-link{border-color:#efe7df;background:#fffdfa;color:#766f75}
  .reader-selectors{
    gap:6px;
    padding:2px 8px;
    border-bottom:0;
    background:#fff9f3;
  }
  .reader-selectors select{
    min-height:44px;
    border-radius:24px;
    box-shadow:0 3px 10px rgba(94,70,53,.04);
    font-size:12px;
  }
  .reader-selectors label:first-child select{border-color:#f1c9d1;background:#ffe5e8;color:#77515a}
  .reader-selectors label:last-child select{border-color:#e8d99a;background:#fff3c1;color:#6e592f}
  .image-scroller{
    padding:1px 4px;
    background:#eee4d7;
    overscroll-behavior:contain;
  }
  .page-stage{max-width:none;background:#fffefb}
  .audio-bar{
    min-height:48px;
    margin:0;
    padding:2px 6px;
    border-top:1px solid #eee0d6;
    background:#fffcf8;
  }
  .audio-toggle{width:44px;height:44px;min-width:44px;box-shadow:0 2px 8px rgba(128,93,178,.2)}
  .audio-continuous{min-height:34px;border-color:#d8c9ea;background:#fffefd}
  .audio-bar select{width:59px;min-height:36px;border-color:#d8c9ea;background:#fffefd}
  .page-bar{
    min-height:36px;
    gap:6px;
    padding:2px 8px;
    background:#fffaf5;
  }
  .page-details,.page-jump{display:none}
  .mobile-page-jump{display:flex;align-items:center;gap:3px;min-width:0;white-space:nowrap;color:#786d60;font-size:13px;font-weight:700}
  .mobile-page-jump input{appearance:textfield;-moz-appearance:textfield;width:39px;height:31px;margin:0;padding:0 2px;border:1px solid #d8c5aa;border-radius:9px;background:#fffefa;color:#524638;text-align:center;font-family:inherit;font-size:15px;font-weight:800}
  .mobile-page-jump input::-webkit-inner-spin-button,.mobile-page-jump input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .mobile-page-jump button{min-width:42px;min-height:29px;margin-left:3px;padding:1px 6px;border:0;border-radius:15px;background:#f1e8db;color:#6d5c49;font-size:12px;font-weight:800}
  .page-bar>.reveal-count{margin-left:auto;white-space:nowrap;font-size:12px;color:#786d60}
  .reader-nav{
    gap:5px;
    padding:2px 8px calc(2px + env(safe-area-inset-bottom));
    border-top:0;
    background:#fffaf5;
  }
  .reader-nav .nav-button,.reader-nav .action-button{
    min-height:44px;
    height:44px;
    border-radius:15px;
    box-shadow:0 4px 10px rgba(92,69,63,.06);
    font-size:11px;
  }
  .reader-nav .nav-button:first-child{background:#eae1fa;color:#665388}
  .reader-nav #cover-all{background:#ffded5;color:#835451}
  .reader-nav #show-all{background:#dcf2e5;color:#3d7759}
  .reader-nav .nav-button.is-next{background:#dcecfb;color:#416c91}
}

@media(max-width:360px){
  .reader-selectors{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
  .page-jump .page-jump-label{display:none}
  .audio-bar{grid-template-columns:44px minmax(0,1fr) auto auto;gap:4px;padding-inline:6px}
  .audio-continuous{padding-inline:4px;font-size:8px}
  .audio-bar select{width:54px;font-size:9px}
  .reader-nav{gap:4px;padding-inline:6px}
  .reader-nav .nav-button,.reader-nav .action-button{font-size:10px}
}

.chapter-purchase-status{margin:0;padding:9px 16px;background:#fff2e7;color:#8c4b34;font-size:12px;line-height:1.5}
@media(max-width:620px){.chapter-purchase-status{order:1;flex:none;padding:8px 12px;font-size:11px}}