:root{--paper:#fbf9f9;--ink:#1b1c1c;--muted:#666969;--line:#d5d6d5;--dark:#121313;--serif:'Playfair Display',Georgia,serif;--sans:Inter,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font-family:var(--sans);overscroll-behavior:none}.sidebar{position:fixed;inset:0 auto 0 0;width:248px;border-right:1px solid var(--line);background:#f5f3f3;padding:27px 20px 22px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.12em}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.22em;margin-top:4px}.brand-mark{display:grid;place-items:center;width:31px;height:31px;background:var(--ink);color:white;font-family:var(--serif);font-size:15px;letter-spacing:0}.sidebar-label,.eyebrow{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--muted)}.sidebar-label{margin:54px 12px 13px}.sidebar nav{display:grid;gap:4px}.chapter-link{display:flex;gap:10px;padding:10px 12px;color:var(--muted);font-size:12px;text-decoration:none;border-radius:3px;line-height:1.35}.chapter-link:hover,.chapter-link.active{background:var(--ink);color:#fff}.chapter-num{width:22px;flex:none;font-variant-numeric:tabular-nums;color:inherit}.sidebar-foot{margin-top:auto;color:var(--muted);font-size:10px;line-height:1.7;padding:0 12px}.sidebar-foot span{opacity:.7}.app-shell{margin-left:248px;min-height:100vh}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:sticky;top:0;background:rgba(251,249,249,.94);backdrop-filter:blur(10px);z-index:5}.wordmark{font-size:11px;letter-spacing:.13em;font-weight:700;color:var(--ink);text-decoration:none}.top-actions{display:flex;align-items:center;gap:12px}.icon-btn{border:0;background:transparent;color:var(--ink);font:inherit;cursor:pointer;font-size:18px;padding:8px}.buy-btn,.outline-btn{border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;padding:9px 13px;border-radius:3px;font-size:11px;font-weight:600;letter-spacing:.02em}.reader-wrap{max-width:1320px;margin:0 auto;padding:54px 4vw 24px}.reader-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:25px}.reader-head h1{font:700 clamp(27px,3vw,42px)/1.1 var(--serif);margin:0;letter-spacing:-.025em}.byline{font-size:12px;color:var(--muted);margin:12px 0 0}.reader-controls{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px}.control-btn{border:1px solid var(--line);background:transparent;color:var(--ink);width:34px;height:30px;cursor:pointer}.progress-row{display:flex;align-items:center;gap:13px;color:var(--muted);font-size:10px;margin-bottom:18px}.progress{height:2px;background:var(--line);flex:1}.progress i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s}.book-stage{position:relative;display:flex;align-items:center;justify-content:center;background:#eee;min-height:760px;padding:34px 66px;overflow:hidden}.pages{display:flex;align-items:stretch;justify-content:center;max-width:1080px;width:100%;transform-origin:center top;user-select:none}.pages.page-turn-next{animation:pageTurnNext .42s ease both}.pages.page-turn-prev{animation:pageTurnPrev .42s ease both}.page{display:block;width:50%;height:auto;background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.12);object-fit:contain}.page.single{width:min(100%,650px)}.page-nav{position:absolute;top:50%;transform:translateY(-50%);width:39px;height:68px;border:0;background:rgba(255,255,255,.7);font:400 42px/1 Georgia;color:var(--ink);cursor:pointer;z-index:2}.page-nav:hover{background:var(--ink);color:white}.page-nav:disabled{opacity:.25;cursor:default}.page-nav.prev{left:8px}.page-nav.next{right:8px}.reader-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;color:var(--muted);font-size:11px}.reader-footer p{margin:0;text-align:center;max-width:430px}.outline-btn{background:transparent;color:var(--ink);white-space:nowrap}.site-footer{border-top:1px solid var(--line);padding:25px 5vw;color:var(--muted);font-size:10px}.mobile-only{display:none}.dark{--paper:#181919;--ink:#e9e7e4;--muted:#aaa9a5;--line:#3a3b3a}.dark .sidebar,.dark .topbar{background:#202121}.dark .book-stage{background:#101111}.dark .page{box-shadow:0 14px 30px rgba(0,0,0,.4)}
@keyframes pageTurnNext{0%{opacity:.35;transform:scaleX(.97) translateX(18px);transform-origin:right center}100%{opacity:1;transform:scaleX(1) translateX(0);transform-origin:right center}}
@keyframes pageTurnPrev{0%{opacity:.35;transform:scaleX(.97) translateX(-18px);transform-origin:left center}100%{opacity:1;transform:scaleX(1) translateX(0);transform-origin:left center}}
@media(max-width:820px){.sidebar{transform:translateX(-100%);transition:transform .2s;width:285px;box-shadow:12px 0 40px transparent}.sidebar.open{transform:translateX(0);box-shadow:12px 0 40px rgba(0,0,0,.15)}.app-shell{margin-left:0}.mobile-only{display:inline-block}.topbar{padding:0 20px}.wordmark{font-size:10px}.buy-btn{padding:8px 9px}.reader-wrap{padding:34px 16px 14px}.reader-head{align-items:start;gap:20px}.reader-head h1{font-size:29px}.reader-controls{padding-top:8px}.book-stage{min-height:430px;padding:20px 34px}.pages{max-width:620px}.page{width:50%}.page-nav{width:30px;height:55px;font-size:34px}.page-nav.prev{left:2px}.page-nav.next{right:2px}.reader-footer{align-items:stretch;flex-direction:column;text-align:center}.reader-footer .outline-btn{align-self:center}.site-footer{text-align:center}.sidebar-label{margin-top:42px}}
@media(max-width:560px){.top-actions{gap:4px}.top-actions .icon-btn{display:none}.reader-head{display:block}.reader-controls{justify-content:flex-end;margin-top:18px}.progress-row{gap:8px}.book-stage{min-height:340px;padding:14px 28px}.pages{width:100%}.page:nth-child(2){display:none}.page.single{width:100%}}

/* Reader spread and page-turn overrides */
.pages{perspective:1800px;position:relative;min-height:1px}
.spread{display:flex;align-items:stretch;justify-content:center;width:100%}
.spread:first-child{position:absolute;inset:0;z-index:1}
.spread:last-child{position:relative;z-index:2}
.pages.page-turn-next .spread:first-child{animation:spreadOutNext .62s cubic-bezier(.2,.7,.2,1) both;transform-origin:right center}
.pages.page-turn-next .spread:last-child{animation:spreadInNext .62s cubic-bezier(.2,.7,.2,1) both;transform-origin:left center}
.pages.page-turn-prev .spread:first-child{animation:spreadOutPrev .62s cubic-bezier(.2,.7,.2,1) both;transform-origin:left center}
.pages.page-turn-prev .spread:last-child{animation:spreadInPrev .62s cubic-bezier(.2,.7,.2,1) both;transform-origin:right center}
@keyframes spreadOutNext{0%{opacity:1;transform:rotateY(0)}100%{opacity:0;transform:rotateY(-92deg)}}
@keyframes spreadInNext{0%{opacity:0;transform:rotateY(12deg)}100%{opacity:1;transform:rotateY(0)}}
@keyframes spreadOutPrev{0%{opacity:1;transform:rotateY(0)}100%{opacity:0;transform:rotateY(92deg)}}
@keyframes spreadInPrev{0%{opacity:0;transform:rotateY(-12deg)}100%{opacity:1;transform:rotateY(0)}}
@media(max-width:560px){.spread .page:nth-child(2){display:none}.spread .page.single{width:100%}}

/* Physical book-style turn: one leaf rotates from the binding. */
.pages.page-turn-next .spread:first-child,
.pages.page-turn-prev .spread:first-child{animation:oldSpreadFade .68s ease both;z-index:3;transform:none}
.pages.page-turn-next .spread:last-child,
.pages.page-turn-prev .spread:last-child{animation:none;opacity:1;z-index:1}
.pages.page-turn-next .spread:first-child .page:nth-child(2){position:relative;z-index:4;transform-origin:left center;animation:leafNext .9s cubic-bezier(.25,.7,.2,1) both;box-shadow:-18px 8px 28px rgba(0,0,0,.24)}
.pages.page-turn-prev .spread:first-child .page:first-child:not(.single){position:relative;z-index:4;transform-origin:right center;animation:leafPrev .9s cubic-bezier(.25,.7,.2,1) both;box-shadow:18px 8px 28px rgba(0,0,0,.24)}
.pages.page-turn-next .spread:first-child .page.single{position:relative;z-index:4;transform-origin:left center;animation:coverOpen .9s cubic-bezier(.25,.7,.2,1) both;box-shadow:-18px 8px 28px rgba(0,0,0,.24)}
@keyframes oldSpreadFade{0%,70%{opacity:1}100%{opacity:0}}
/* Every sheet has a blank white reverse side, so text never appears upside down. */
.page{position:relative;transform-style:preserve-3d;isolation:isolate;overflow:visible}
.page>img{display:block;width:100%;height:auto;object-fit:contain;backface-visibility:hidden}
.page-back{position:absolute;inset:0;display:none;background:#fff;border-left:1px solid rgba(0,0,0,.06);transform:rotateY(180deg);backface-visibility:visible;box-shadow:inset 10px 0 18px rgba(0,0,0,.06);pointer-events:none}
.pages.page-turn-next .spread:first-child .page:nth-child(2) .page-back,
.pages.page-turn-prev .spread:first-child .page:first-child:not(.single) .page-back,
.pages.page-turn-next .spread:first-child .page.single .page-back{display:block}
.dark .page-back{background:#f7f7f5}
@keyframes leafNext{0%{transform:rotateY(0) scaleX(1);filter:brightness(1)}38%{transform:rotateY(-72deg) scaleX(.99);filter:brightness(.78)}68%{transform:rotateY(-135deg) scaleX(.985);filter:brightness(.88)}100%{transform:rotateY(-180deg) scaleX(1);filter:brightness(.96)}}
@keyframes leafPrev{0%{transform:rotateY(0) scaleX(1);filter:brightness(1)}38%{transform:rotateY(72deg) scaleX(.99);filter:brightness(.78)}68%{transform:rotateY(135deg) scaleX(.985);filter:brightness(.88)}100%{transform:rotateY(180deg) scaleX(1);filter:brightness(.96)}}
@keyframes coverOpen{0%{transform:rotateY(0) scaleX(1);filter:brightness(1)}38%{transform:rotateY(-72deg) scaleX(.99);filter:brightness(.76)}68%{transform:rotateY(-135deg) scaleX(.985);filter:brightness(.88)}100%{transform:rotateY(-180deg) scaleX(1);filter:brightness(.96)}}

/* v6: the book frame stays still; PageFlip animates one physical sheet. */
.pages{display:block;position:relative;max-width:1080px;width:100%;height:min(735px,calc(100vh - 220px));min-height:560px;overflow:visible;transform-origin:center top;user-select:none;animation:none!important}
.pages canvas{display:block;margin:auto;box-shadow:0 14px 30px rgba(0,0,0,.12)}
.dark .pages canvas{box-shadow:0 14px 30px rgba(0,0,0,.4)}
@media(max-width:820px){.pages{height:390px;min-height:390px}.book-stage{min-height:500px}}
@media(max-width:560px){.pages{height:330px;min-height:330px}.book-stage{min-height:370px}}

/* v7: the cover is a single sheet; the page-flip engine starts at pages 2–3. */
.pages{opacity:0;pointer-events:none;transition:opacity .08s linear}
.pages.is-visible{opacity:1;pointer-events:auto}
.cover-sheet{position:absolute;z-index:4;top:34px;left:50%;width:min(520px,calc(100% - 132px));height:min(735px,calc(100% - 68px));transform:translateX(-50%) var(--reader-zoom,scale(1));transform-origin:center top;background:#fff;box-shadow:0 14px 30px rgba(0,0,0,.12);overflow:hidden}
.cover-sheet img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}
.cover-sheet.is-open{visibility:hidden;pointer-events:none}
.cover-sheet.cover-opening{animation:coverSheetOpen .85s cubic-bezier(.2,.72,.2,1) both;transform-origin:left center}
@keyframes coverSheetOpen{0%{transform:translateX(-50%) var(--reader-zoom,scale(1)) rotateY(0);filter:brightness(1)}38%{transform:translateX(-50%) var(--reader-zoom,scale(1)) rotateY(-72deg);filter:brightness(.78)}70%{transform:translateX(-50%) var(--reader-zoom,scale(1)) rotateY(-145deg);filter:brightness(.9)}100%{transform:translateX(-50%) var(--reader-zoom,scale(1)) rotateY(-180deg);filter:brightness(.98);visibility:hidden}}
.dark .cover-sheet{box-shadow:0 14px 30px rgba(0,0,0,.4)}
@media(max-width:820px){.cover-sheet{top:20px;width:calc(100% - 68px);height:calc(100% - 40px)}}
@media(max-width:560px){.cover-sheet{top:14px;width:calc(100% - 56px);height:calc(100% - 28px)}}

/* Keep the expanded table of contents usable on small screens and short desktops. */
.sidebar nav{overflow-y:auto;min-height:0;padding-right:3px}

/* Mobile reader: one comfortable page per screen, with navigation kept reachable. */
@media(max-width:820px){
  .sidebar.open + .app-shell::before{content:"";position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:9}
  .topbar{height:58px;padding:0 14px}
  .wordmark{max-width:calc(100vw - 170px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .reader-wrap{padding:24px 12px 10px}
  .reader-head{margin-bottom:16px}
  .reader-head h1{font-size:clamp(24px,6vw,31px)}
  .byline{margin-top:7px}
  .reader-controls{gap:7px}
  .book-stage{min-height:0;height:calc(100svh - 214px);max-height:760px;padding:12px 30px 14px;background:#e9e8e7}
  .pages{height:100%;min-height:0;max-width:100%;width:100%;display:block}
  .pages canvas{height:100%!important;width:auto!important;max-width:100%;margin:auto}
  .cover-sheet{top:12px;height:calc(100% - 26px);width:auto;aspect-ratio:499 / 709}
  .page-nav{background:rgba(255,255,255,.86);box-shadow:0 3px 12px rgba(0,0,0,.1)}
  .reader-footer{padding:15px 0 8px;gap:10px}
  .site-footer{padding:18px 20px}
}
.byline .read-count{font-weight:700;color:var(--ink);margin-left:4px}
@media(max-width:560px){
  .top-actions .buy-btn{font-size:10px;padding:8px 8px}
  .reader-wrap{padding-top:18px}
  .reader-head{display:flex;align-items:start;gap:8px}
  .reader-head h1{font-size:24px}
  .reader-controls{padding-top:0;margin-top:0;flex:none}
  .reader-controls .control-btn{width:29px;height:28px}
  .progress-row{margin-bottom:10px;font-size:9px}
  .book-stage{height:calc(100svh - 196px);min-height:390px;padding:10px 28px 12px}
  .page-nav{width:27px;height:52px;font-size:31px}
  .page-nav.prev{left:1px}.page-nav.next{right:1px}
  .cover-sheet{top:10px;height:calc(100% - 22px)}
}
/* Ide Jongkok brand mark */
.logo-mark{overflow:hidden;border-radius:50%}
.logo-mark img{display:block;width:100%;height:100%;object-fit:cover}
/* Reader header/sidebar uses a quieter mark than the Library landing page. */
body[data-reader] .sidebar .brand-mark{width:22px;height:22px;min-width:22px;max-width:22px;flex:0 0 22px;font-size:11px}