* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
        html, body { height:100%; }
        body { margin:0; font-family:'Hanuman', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
               background:var(--mk-gray-950-15); color:var(--mk-gray-900-16); overflow:hidden; }

        .reader { display:flex; flex-direction:column; height:100dvh; }

        /* ---- top bar ---- */
        .rbar { flex:0 0 auto; display:flex; align-items:center; gap:10px; color:var(--mk-white);
                background:linear-gradient(135deg,var(--mk-blue-500-2),var(--mk-indigo-500));
                padding:calc(8px + env(safe-area-inset-top)) 12px 8px; box-shadow:0 4px 16px rgba(0,0,0,.3); z-index:5; }
        .rbar .btn { width:38px; height:38px; min-width:38px; border:0; background:rgba(255,255,255,.16); color:var(--mk-white);
                     border-radius:11px; font-size:19px; display:flex; align-items:center; justify-content:center;
                     cursor:pointer; text-decoration:none; }
        .rbar .btn:active { background:rgba(255,255,255,.3); }
        .rbar .ttl { flex:1; min-width:0; font-size:15px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        /* thin progress line under the top bar */
        .rline { flex:0 0 auto; height:3px; background:var(--mk-gray-900-12); }
        .rline > span { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--mk-indigo-500),var(--mk-indigo-300)); transition:width .2s ease; }

        /* ---- vertical page scroller ---- */
        .stage { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
                 scroll-snap-type:y proximity; scroll-behavior:smooth;
                 background:radial-gradient(circle at 50% 0,var(--mk-gray-900-17),var(--mk-gray-950-15)); }
        .page { scroll-snap-align:start; scroll-snap-stop:always; min-height:100%;
                padding:20px 16px; display:flex;
                content-visibility:auto; contain-intrinsic-size:auto 700px; }
        .page + .page { padding-top:6px; }

        /* paper sheet holding the content */
        .sheet { width:100%; max-width:680px; margin:0 auto; min-height:100%;
                 background:linear-gradient(180deg,var(--mk-gray-50-5),var(--mk-orange-100-21));
                 border:1px solid var(--mk-orange-300-28); border-radius:16px;
                 box-shadow:0 16px 40px rgba(0,0,0,.42); padding:24px 22px 30px;
                 display:flex; flex-direction:column; }

        /* article page */
        .art-chip { display:inline-block; align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.03em;
                    text-transform:uppercase; color:var(--mk-indigo-500); background:var(--mk-indigo-50-4); border-radius:999px; padding:4px 11px; margin-bottom:12px; }
        .art-title { margin:0 0 16px; font-size:22px; font-weight:800; color:var(--mk-orange-900-2); line-height:1.4;
                     padding-bottom:12px; border-bottom:1px dashed var(--mk-orange-300-7); }
        .art-body { font-size:16px; line-height:1.95; color:var(--mk-gray-900-18); overflow-wrap: break-word; }
        .art-body p, .art-body li { font-size:16px; }
        .art-body img { max-width:100% !important; height:auto !important; display:block; margin:12px auto; border-radius:8px; }
        .art-body h1,.art-body h2,.art-body h3,.art-body h4 { color:var(--mk-orange-900-3); font-weight:800; line-height:1.4; }
        .art-body table { max-width:100%; border-collapse:collapse; }
        .art-body td, .art-body th { border:1px solid var(--mk-orange-400-15); padding:6px 9px; }
        .art-body a { color:var(--mk-blue-500-2); }
        /* small page footer so each sheet reads like a real book page */
        .art-foot { margin-top:auto; padding-top:16px; text-align:center; color:var(--mk-gray-500-19); font-size:12px; font-weight:700;
                    letter-spacing:.04em; }

        /* cover / title page */
        .cover { width:100%; display:flex; align-items:center; justify-content:center; }
        .cover img { max-width:100%; max-height:82dvh; object-fit:contain; border-radius:12px; box-shadow:0 22px 50px rgba(0,0,0,.55); }
        .cover .ph { text-align:center; color:var(--mk-white); padding:30px; }
        .cover .ph .bk { font-size:64px; margin-bottom:20px; }
        .cover .ph h2 { margin:0 0 8px; font-size:28px; font-weight:800; line-height:1.5; }
        .cover .ph .fmt { font-size:13px; opacity:.75; }
        .cover .ph .back { font-size:13px; letter-spacing:.3em; text-transform:uppercase; opacity:.7; }
        .scroll-hint { position:absolute; left:0; right:0; bottom:84px; text-align:center; color:var(--mk-indigo-200-4); font-size:12px;
                       font-weight:700; animation:bob 1.6s ease-in-out infinite; }
        @keyframes bob { 0%,100%{ transform:translateY(0); opacity:.75; } 50%{ transform:translateY(5px); opacity:1; } }

        .empty-page { width:100%; display:flex; align-items:center; justify-content:center; color:var(--mk-gray-400-17);
                      text-align:center; font-size:15px; }

        /* ---- bottom bar ---- */
        .rnav { flex:0 0 auto; display:flex; align-items:center; gap:12px;
                padding:8px 14px calc(8px + env(safe-area-inset-bottom));
                background:var(--mk-gray-950-20); border-top:1px solid var(--mk-gray-900-19); }
        .rnav button { border:0; background:var(--mk-gray-900-12); color:var(--mk-orange-100-22); width:42px; height:42px; min-width:42px;
                       border-radius:12px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
        .rnav button:active { background:var(--mk-gray-800-11); }
        .rnav button:disabled { opacity:.35; }
        .rcount { flex:1; text-align:center; font-size:13px; font-weight:800; color:var(--mk-gray-400-18); }

        /* ---- TOC bottom sheet ---- */
        .toc-ov { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.55); display:none; align-items:flex-end; }
        .toc-ov.open { display:flex; }
        .toc-sheet { width:100%; max-height:72vh; background:var(--mk-white); border-radius:20px 20px 0 0; overflow:hidden;
                     display:flex; flex-direction:column; transform:translateY(100%); transition:transform .25s ease; }
        .toc-ov.open .toc-sheet { transform:translateY(0); }
        .toc-head { padding:14px 16px; font-weight:800; color:var(--mk-blue-950); border-bottom:1px solid var(--mk-blue-100);
                    display:flex; align-items:center; gap:8px; }
        .toc-head .toc-title { flex:0 0 auto; }
        .toc-head .toc-gap { flex:1 1 auto; min-width:8px; }
        .toc-head button { border:0; background:var(--mk-blue-100-2); width:32px; height:32px; border-radius:10px; font-size:16px; cursor:pointer; }

        /* ---- share buttons, sitting right after the "Contents" label ---- */
        .toc-share { flex:0 1 auto; display:flex; gap:8px; min-width:0; }
        .toc-share .sbtn { flex:0 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; gap:5px;
                           width:auto; height:34px; padding:0 12px; border:0; border-radius:10px; cursor:pointer;
                           font-family:inherit; font-size:12px; font-weight:800; color:var(--mk-white); line-height:1.2;
                           white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
        .toc-share .sbtn .si { font-size:13px; }
        .toc-share .sbtn.off { background:linear-gradient(135deg,var(--mk-cyan-600-3),var(--mk-cyan-700-2)); }
        .toc-share .sbtn.on  { background:linear-gradient(135deg,var(--mk-indigo-500),var(--mk-blue-500-2)); }
        .toc-share .sbtn:active { filter:brightness(.92); }
        .toc-share .sbtn[disabled] { opacity:.6; cursor:default; }

        .toc-note { display:none; padding:8px 16px; font-size:12px; font-weight:700; color:var(--mk-slate-700); background:var(--mk-blue-50);
                    border-bottom:1px solid var(--mk-blue-100); }
        .toc-note.show { display:block; }
        .toc-note.err { color:var(--mk-rose-700); background:var(--mk-rose-50); }
        .toc-list { overflow-y:auto; padding:8px 10px calc(16px + env(safe-area-inset-bottom)); }
        .toc-chapter { padding:12px 12px 4px; font-size:13px; font-weight:800; color:var(--mk-blue-500-2); }
        .toc-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent;
                    padding:11px 12px 11px 22px; border-radius:12px; cursor:pointer; font-family:inherit; font-size:14px; color:var(--mk-slate-800); }
        .toc-item:active { background:var(--mk-indigo-50); }
        .toc-item.current { background:var(--mk-indigo-100); color:var(--mk-blue-500-2); font-weight:700; }
        .toc-item .tno { font-size:11px; font-weight:800; color:var(--mk-indigo-500); min-width:34px; }
        .toc-item .ttx { flex:1; line-height:1.4; overflow-wrap: break-word; }
        .toc-item .tpg { font-size:11px; color:var(--mk-slate-400); font-weight:700; }

        /* ---- Book style: the same pages as a book whose pages curl as they turn ----
           A wide screen opens the book (two pages, the spine in the middle); a phone
           shows one page. Built by the script from copies of the .page sections, which
           stay where they are for the scroll style. */
        .book { position:absolute; inset:0; display:none; align-items:center; justify-content:center;
                background:radial-gradient(circle at 50% 30%,#3b2f25,#14100c 70%); }
        body.mode-book .book { display:flex; }
        body.mode-book .stage { overflow:hidden; position:relative; scroll-snap-type:none; }
        .book-in { position:relative; }
        .book-in::after { content:''; position:absolute; left:6px; right:6px; bottom:-14px; height:18px;
                          background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%); }
        /* Pages turned by StPageFlip (public_shared/vendor/page-flip, MIT): the page curls
           from the corner and bends as it turns, with light and shadow moving across it, and
           a corner can be dragged with the mouse or a finger (owner, 2026-10-30: "not like a
           robot"). Each .pf-page is one page of the book. */
        .pf-page { background:linear-gradient(180deg,#fffdf7,#f6efe1); overflow:hidden; }
        .pf-page.--left  { box-shadow:inset -18px 0 24px -16px rgba(70,45,10,.35); }
        .pf-page.--right { box-shadow:inset 18px 0 24px -16px rgba(70,45,10,.35); }
        .pf-page > .page { position:absolute; inset:0; min-height:0; padding:0; display:block; overflow:hidden;
                           content-visibility:visible; scroll-snap-align:none; }
        .pf-page .sheet { max-width:none; min-height:100%; border:0; border-radius:0; box-shadow:none; background:transparent;
                          padding:34px 34px 26px; }
        .pf-page .cover { height:100%; background:#1f2937; }
        .pf-page .cover img { width:100%; height:100%; max-height:none; object-fit:cover; border-radius:0; box-shadow:none; }
        .pf-page .scroll-hint { display:none; }
        .pf-page .empty-page { height:100%; }
        /* The book is cut into real pages (owner, 2026-10-30): an article longer than one
           page flows on to the next, the way a printed book does, instead of scrolling
           inside its page. Each page is the article laid out in columns one page wide
           (.cols) and shifted to its column; the book fills the screen, phone included. */
        body.mode-book .stage > .page { display:none; }
        .vpage { position:absolute; inset:0; overflow:hidden; }
        body.mode-book .book { background:#f6efe1; }
        /* the top bar and the page buttons float over the book, no band of their own
           (owner, 2026-10-30): the pages take the whole screen, top to bottom */
        /* the same floating buttons in the scroll style too (owner, 2026-10-30) */
        .reader { position:relative; }
        .rbar, .rline, .rnav { position:absolute; left:0; right:0; z-index:950; pointer-events:none; }
        .rbar { top:0; background:transparent; box-shadow:none; justify-content:flex-end; }
        .rbar .ttl { visibility:hidden; }
        .rline { top:0; height:3px; background:transparent; }
        .rnav { bottom:0; background:transparent; border:0; box-shadow:none; justify-content:center;
                               padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
        .rbar > *, .rnav > * { pointer-events:auto; }
        .rbar .btn, .rnav button { background:rgba(20,16,12,.55); color:#fff;
                               backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(0,0,0,.25); }
        .rcount { flex:0 0 auto; background:rgba(20,16,12,.55); color:#fff; border-radius:999px; padding:6px 14px;
                               backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
        .stage { flex:1 1 auto; height:100%; }
        .stage { height:100%; }
        .page { padding-top:58px; } .page + .page { padding-top:6px; }
        .page:last-child { padding-bottom:76px; }
        .pf-page > .page, .pf-page > .page + .page { padding-top:0; padding-bottom:0; }
        body.mode-book #sndBtn { display:flex !important; }
        body.mode-book .book-in::after { display:none; }
        .cols { position:absolute; left:0; top:0; column-fill:auto; overflow:visible; }
        .cols img { max-height:var(--bk-img-max, 60vh) !important; width:auto !important; object-fit:contain; break-inside:avoid; }
        .cols table, .cols pre, .cols figure { break-inside:avoid; max-width:100%; }
        .cols .art-title { margin-top:0; }
        .bk-measure { position:absolute; left:0; top:0; visibility:hidden; pointer-events:none; overflow:hidden; }
        @media (max-width:600px) { .pf-page .sheet { padding:22px 18px 18px; } }