:root{--bg:#120d08;--panel:#21170e;--gold:#c89b45;--cream:#f5ead3;--ink:#21180e;--muted:#b9aa91;--shadow:0 18px 60px rgba(0,0,0,.45)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top,#3a2715 0,#120d08 55%);color:var(--cream)}button,select,input{font:inherit}.hidden{display:none!important}
.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(200,155,69,.35);background:rgba(18,13,8,.88);backdrop-filter:blur(12px);position:sticky;top:0;z-index:30}.brand{display:flex;flex-direction:column;align-items:center;letter-spacing:.12em}.brand strong{font-family:Georgia,serif;color:#f3d393}.brand span{font-size:11px;color:var(--muted);letter-spacing:.18em}.iconbtn{border:1px solid rgba(200,155,69,.45);background:#24180d;color:#f3d393;border-radius:12px;width:42px;height:42px;cursor:pointer}
.library{max-width:1180px;margin:auto;padding:44px 22px 70px}.hero{text-align:center;max-width:780px;margin:0 auto 38px}.eyebrow{font-size:12px;letter-spacing:.22em;color:#e0bd76}.hero h1{font-family:Georgia,serif;font-size:clamp(34px,5vw,64px);margin:10px 0}.hero p{color:#d3c4aa;line-height:1.6}.bookgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.bookcard{border:1px solid rgba(200,155,69,.35);background:linear-gradient(145deg,#2d1f12,#18110b);color:var(--cream);border-radius:22px;padding:18px;display:flex;gap:20px;align-items:center;text-align:left;cursor:pointer;box-shadow:var(--shadow);transition:.25s}.bookcard:hover{transform:translateY(-5px);border-color:#dcb45e}.bookcard img{width:145px;max-height:205px;object-fit:contain;border-radius:7px;box-shadow:0 12px 30px rgba(0,0,0,.45)}.bookcard b{display:block;font-family:Georgia,serif;font-size:23px;line-height:1.25}.bookcard small{display:block;color:var(--muted);margin-top:10px}
.reader{min-height:calc(100vh - 66px)}.readerbar,.controls{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 12px;background:rgba(27,18,11,.92);border-bottom:1px solid rgba(200,155,69,.24)}.readerbar button,.readerbar select,.controls button,.controls select,.buttonlink{border:1px solid rgba(200,155,69,.38);background:#2c1e12;color:#f5e6c5;border-radius:10px;padding:9px 12px;text-decoration:none;cursor:pointer}.stagewrap{min-height:calc(100vh - 190px);display:flex;align-items:center;justify-content:center;position:relative;overflow:auto;padding:22px 62px}.stage{display:flex;align-items:center;justify-content:center;gap:8px;transform-origin:center;transition:transform .22s ease;perspective:1800px}.page{background:#f7f0df;box-shadow:0 18px 45px rgba(0,0,0,.5);position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.75,.2,1)}.page.turning-next{transform:rotateY(-12deg) translateX(-6px)}.page.turning-prev{transform:rotateY(12deg) translateX(6px)}.page img{display:block;max-height:calc(100vh - 235px);max-width:42vw;width:auto;height:auto;object-fit:contain}.page.single img{max-width:82vw}.page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.10),transparent 8%,transparent 92%,rgba(0,0,0,.08))}.navbtn{position:fixed;top:50%;z-index:15;width:50px;height:70px;border-radius:16px;border:1px solid rgba(200,155,69,.45);background:rgba(37,24,13,.88);color:#f7d991;font-size:42px;cursor:pointer}.navbtn.left{left:12px}.navbtn.right{right:12px}.controls{position:sticky;bottom:0;border-top:1px solid rgba(200,155,69,.24);border-bottom:0;z-index:20}.controls label{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:13px}.controls input[type=range]{width:110px}.controls #pageLabel{min-width:90px;text-align:center;color:#e3c782}
.drawer{position:fixed;top:0;right:-460px;width:min(440px,92vw);height:100vh;background:#f6f0e4;color:var(--ink);z-index:60;box-shadow:-12px 0 40px rgba(0,0,0,.45);transition:right .28s ease;display:flex;flex-direction:column}.drawer.open{right:0}.drawerhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #d7c6a5}.drawerhead h2{font-family:Georgia,serif;margin:0}.drawerhead button{border:0;background:none;font-size:34px;cursor:pointer}.drawerbody{overflow:auto;padding:14px}.thumbgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.thumb{border:1px solid #c7b184;background:white;padding:6px;border-radius:10px;cursor:pointer;color:#2b2116}.thumb img{width:100%;display:block}.thumb span{font-size:12px}.searchbox{width:100%;padding:12px;border:1px solid #bda77b;border-radius:10px}.result{display:block;width:100%;margin:9px 0;padding:10px;text-align:left;border:1px solid #d7c7a7;background:#fff;border-radius:9px;cursor:pointer}.translation{font-family:"Noto Sans Sinhala","Noto Sans Tamil",Arial,sans-serif;line-height:1.65;font-size:17px;white-space:pre-wrap}.translation .sentence{border-radius:4px}.translation .sentence.active{background:#ffe58a}.translation-note{font-size:12px;color:#715f43;background:#fff6d8;padding:9px;border-radius:8px;margin-bottom:12px}.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:50}.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#111;color:white;padding:12px 16px;border-radius:10px;z-index:80;max-width:90vw;text-align:center}
@media(max-width:760px){.bookgrid{grid-template-columns:1fr}.bookcard img{width:105px}.bookcard b{font-size:18px}.stagewrap{padding:14px 42px;min-height:calc(100vh - 224px)}.stage{gap:0}.page img{max-width:84vw;max-height:calc(100vh - 280px)}.navbtn{width:38px;height:58px;font-size:34px}.navbtn.left{left:2px}.navbtn.right{right:2px}.readerbar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.readerbar>*{flex:0 0 auto}.controls{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}.controls>*{flex:0 0 auto}.brand strong{font-size:13px}}

/* True 3D page-turn engine */
.stage{perspective:2400px;user-select:none;touch-action:pan-y;cursor:grab}
.stage:active{cursor:grabbing}
.book{position:relative;display:grid;grid-template-columns:repeat(2,max-content);gap:0;transform-style:preserve-3d;filter:drop-shadow(0 22px 34px rgba(0,0,0,.48))}
.book.single-book{display:block}
.page{box-shadow:none;backface-visibility:hidden}
.page.left{border-radius:10px 2px 2px 10px;box-shadow:inset -18px 0 26px -24px rgba(0,0,0,.9)}
.page.right{border-radius:2px 10px 10px 2px;box-shadow:inset 18px 0 26px -24px rgba(0,0,0,.9)}
.page.single{border-radius:10px}
.page.blank{background:linear-gradient(90deg,#e7dcc4,#f8f1e2);min-width:320px}
.book::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:10px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.28),rgba(255,255,255,.18),transparent);z-index:8;pointer-events:none}
.single-book::after{display:none}
.flip-leaf{position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;z-index:12;transition:transform .72s cubic-bezier(.18,.72,.18,1);will-change:transform}
.flip-leaf .page{position:absolute;inset:0;width:100%;height:100%}
.flip-leaf .page img{width:100%;height:100%;object-fit:contain}
.leaf-front{transform:rotateY(0deg);backface-visibility:hidden}
.leaf-back{transform:rotateY(180deg);backface-visibility:hidden}
.right-leaf{right:0;transform-origin:left center;transform:rotateY(0deg)}
.book.go .right-leaf{transform:rotateY(-180deg)}
.left-leaf{left:0;transform-origin:right center;transform:rotateY(0deg)}
.book.go .left-leaf{transform:rotateY(180deg)}
.mobile-leaf{inset:0;width:100%;transform-origin:left center}
.mobile-leaf.flip-prev{transform-origin:right center}
.book.go .mobile-leaf.flip-next{transform:rotateY(-180deg)}
.book.go .mobile-leaf.flip-prev{transform:rotateY(180deg)}
.flip-leaf::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .36s;background:linear-gradient(90deg,rgba(0,0,0,.42),transparent 45%)}
.book.go .flip-leaf::after{opacity:.42}
@media(max-width:760px){.book{display:block}.book::after{display:none}.flip-leaf{width:100%}}

.primary-action{background:linear-gradient(135deg,#9a6a20,#d7ab52)!important;color:#1b120b!important;font-weight:800;box-shadow:0 4px 16px rgba(215,171,82,.25)}