@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap";:root{color-scheme:dark;--green: #062d22;--green-deep: #031e17;--gold: #d8b35a;--gold-bright: #f1d58a;--cream: #f4ead0;--muted: #bdb8a3;font-family:Montserrat,sans-serif;color:var(--cream);background:var(--green-deep);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%;width:100%}body{min-height:100dvh;background:var(--green-deep)}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}.hidden{display:none!important}.cover{isolation:isolate;position:relative;display:grid;place-items:center;min-height:100dvh;overflow:hidden;padding:clamp(28px,5vw,68px) 24px;background:radial-gradient(ellipse at 50% 36%,rgba(23,91,62,.54),transparent 48%),radial-gradient(ellipse at 10% 90%,rgba(169,111,39,.16),transparent 30%),radial-gradient(ellipse at 94% 84%,rgba(169,111,39,.13),transparent 28%),linear-gradient(145deg,#062e23,#031e17 55%,#052b20);transition:opacity .28s ease,transform .28s ease}.cover:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;opacity:.33;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");pointer-events:none}.cover:after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 28%,transparent 66%,rgba(0,0,0,.22));pointer-events:none}.cover-frame{position:absolute;inset:clamp(12px,2.4vw,32px);border:1px solid rgba(216,179,90,.58);pointer-events:none}.cover-frame:before,.cover-frame:after{content:"✧";position:absolute;color:var(--gold);font:clamp(24px,3.2vw,42px)/1 Georgia,serif}.cover-frame:before{top:-2px;left:-2px}.cover-frame:after{right:-2px;bottom:-2px;transform:rotate(180deg)}.botanical{position:absolute;z-index:-1;top:7%;color:#d8b35aad;font:clamp(130px,26vw,380px)/.9 Georgia,serif;pointer-events:none}.botanical-left{left:-8%;transform:rotate(-35deg)}.botanical-right{right:-8%;transform:scaleX(-1) rotate(-35deg)}.cover-content{width:min(100%,760px);text-align:center;padding:20px 0;animation:reveal .9s cubic-bezier(.2,.8,.2,1) both}.brand-mark{position:relative;display:grid;justify-items:center}.brand-flourish{color:var(--gold);font-size:clamp(28px,4vw,48px);margin-bottom:10px}.brand-mark h1{margin:0;color:var(--cream);font:600 clamp(68px,13vw,150px)/.8 "Cormorant Garamond",Georgia,serif;letter-spacing:.045em;text-shadow:0 3px 0 rgba(0,0,0,.24)}.brand-mark p{margin:22px 0 0;color:var(--gold-bright);font-size:clamp(10px,1.7vw,16px);font-weight:600;letter-spacing:clamp(.22em,1vw,.55em)}.brand-rule{width:96px;height:1px;margin-top:30px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}.cover-kicker{margin:clamp(26px,5vh,50px) 0 10px;color:var(--gold-bright);font:italic clamp(22px,3.6vw,33px) "Cormorant Garamond",Georgia,serif}.cover-description{margin:0 auto;color:#f4ead0b8;font-size:clamp(11px,1.5vw,14px);letter-spacing:.04em}.open-menu{display:inline-flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,40px);min-width:min(300px,82vw);min-height:64px;margin-top:clamp(35px,7vh,66px);padding:14px 26px 14px 34px;border:1px solid var(--gold-bright);border-radius:4px;background:linear-gradient(135deg,#0b3c2c,#041f17);box-shadow:inset 0 0 0 3px #d8b35a1f,0 10px 34px #00000047;color:var(--gold-bright);font-size:12px;font-weight:600;letter-spacing:.24em;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.open-menu:hover{transform:translateY(-3px);background:linear-gradient(135deg,#12523b,#06291e);box-shadow:inset 0 0 0 3px #d8b35a2e,0 14px 38px #00000057}.open-menu:active{transform:translateY(0)}.open-menu .arrow{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(241,213,138,.65);border-radius:50%;font:28px/1 Georgia,serif;letter-spacing:0}.cover-foot{margin:clamp(42px,8vh,80px) 0 0;color:#d8b35ac2;font-size:9px;letter-spacing:.36em}.cover.leaving{opacity:0;transform:scale(1.018);pointer-events:none}@keyframes reveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.reader{min-height:100dvh;background:radial-gradient(ellipse at top,#103a2e 0,#071b15 62%)}.reader-header{display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:12px clamp(16px,3vw,38px);border-bottom:1px solid rgba(216,179,90,.23);background:#031610b8}.wordmark{display:grid;justify-items:start;gap:2px;padding:0;border:0;background:none;cursor:pointer}.wordmark span{font:600 27px Cormorant Garamond,Georgia,serif;letter-spacing:.13em}.wordmark small{color:var(--gold);font-size:8px;letter-spacing:.22em}.header-actions{display:flex;gap:8px}.tool-button{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;border:1px solid rgba(216,179,90,.25);border-radius:4px;background:#041b14db;color:var(--cream);font-size:20px;cursor:pointer;transition:border-color .18s,background .18s}.tool-button:hover,.tool-button.selected{border-color:var(--gold);background:#d8b35a1a}.tool-button:disabled{opacity:.35;cursor:not-allowed}.reader-body{display:flex;min-height:calc(100dvh - 72px)}.thumb-panel{flex:0 0 142px;width:142px;padding:20px 12px;border-right:1px solid rgba(216,179,90,.18);background:#010f0b47;transition:margin-left .22s,opacity .22s}.thumb-panel.collapsed{margin-left:-142px;opacity:0;pointer-events:none}.panel-title{margin:0 0 14px 3px;color:var(--gold);font-size:9px;font-weight:600;letter-spacing:.24em}.thumb-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 7px;max-height:calc(100dvh - 132px);overflow:auto}.thumb{display:grid;justify-items:center;gap:5px;min-width:0;padding:4px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}.thumb canvas,.thumb img{display:block;width:100%;height:auto;max-height:120px;object-fit:contain;border-radius:1px;background:#eee}.extra-image-page{align-items:center;justify-content:center;background:#f7f2e9}.extra-image-page img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.thumb:hover{border-color:#d8b35a80}.thumb.active{border-color:var(--gold-bright);color:var(--gold-bright);background:#d8b35a14}.book-column{display:flex;flex:1;min-width:0;flex-direction:column;align-items:center;padding:20px clamp(8px,2vw,30px) 16px;overflow:hidden}.book-stage{display:none;position:relative;align-items:center;justify-content:center;width:100%;min-width:0;min-height:300px;flex:1;overflow:auto}.book-stage.ready{display:flex}.book-stage-inner{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:100%}.flipbook{flex:0 0 auto;margin:0 auto;transition:transform .18s ease}.pdf-page{display:flex;align-items:stretch;justify-content:center;overflow:hidden;border-radius:5px;background:#f7f2e9}.canvas-page{width:100%;height:100%}.pdf-page canvas{display:block;width:100%;height:100%;object-fit:contain}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:55vh;color:var(--muted);text-align:center;padding:28px}.loading h2{color:var(--cream);font:500 30px Cormorant Garamond,Georgia,serif}.loading p{max-width:420px;font-size:12px;line-height:1.7}.spinner{width:28px;height:28px;border:2px solid rgba(216,179,90,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ca8b74;border-radius:50%;color:#ca8b74;font-size:22px}.retry-button{border:1px solid var(--gold);background:none;padding:10px 18px;color:var(--gold-bright);cursor:pointer}.reader-toolbar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;width:min(100%,820px);margin-top:16px;padding:10px;border:1px solid rgba(216,179,90,.2);border-radius:6px;background:#01120dd1}.page-count,.zoom-label{min-width:52px;color:var(--muted);font-size:11px;text-align:center;font-variant-numeric:tabular-nums}.toolbar-divider{width:1px;height:22px;margin:0 3px;background:#d8b35a3d}.toast{position:fixed;z-index:20;left:50%;bottom:24px;max-width:calc(100vw - 32px);padding:12px 18px;border:1px solid rgba(216,179,90,.4);border-radius:5px;background:#062b20;color:var(--cream);font-size:12px;opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%)}.reader:fullscreen{overflow:auto;background:#061b14}.reader:fullscreen .reader-body{min-height:calc(100dvh - 72px)}@media (max-width:700px){.cover{padding:24px 20px;min-height:100svh}.cover-frame{top:10px;right:10px;bottom:10px;left:10px}.botanical{top:13%;font-size:170px;opacity:.75}.botanical-left{left:-21%}.botanical-right{right:-21%}.brand-mark h1{font-size:clamp(64px,19vw,100px)}.brand-mark p{letter-spacing:.22em;font-size:10px}.cover-kicker{margin-top:40px}.open-menu{margin-top:44px;min-height:60px}.cover-foot{margin-top:54px}.reader-header{min-height:62px;padding:10px 14px}.wordmark span{font-size:23px}.reader-body{min-height:calc(100dvh - 62px)}.thumb-panel{flex-basis:95px;width:95px;padding:14px 7px}.thumb-panel.collapsed{margin-left:-95px}.thumb-list{grid-template-columns:1fr 1fr;gap:7px 4px;max-height:calc(100dvh - 112px)}.book-column{padding:12px 8px}.book-stage{min-height:45vh}.reader-toolbar{gap:5px;margin-top:10px;padding:8px 5px}.reader-toolbar .tool-button{min-width:32px;height:34px;padding:0 7px;font-size:18px}.page-count{min-width:42px;font-size:10px}.zoom-label{min-width:38px;font-size:10px}.toolbar-divider{margin:0 1px}}@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.progress-wrap{width:min(320px,78vw);margin-top:10px}.progress-track{height:4px;overflow:hidden;border-radius:99px;background:#d8b35a2e}.progress-bar{width:0;height:100%;background:var(--gold-bright);transition:width .22s ease}.progress-meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;color:var(--muted);font-size:10px}.progress-meta strong{color:var(--gold-bright)}.loading-message{margin-bottom:12px}.cache-info{max-width:340px;margin:12px auto 0;color:#f4ead09e;font-size:10px;line-height:1.65;text-align:center}.cache-info:before{content:"↻";display:inline-block;margin-right:6px;color:var(--gold)}.page-placeholder,.thumb-placeholder{display:block;width:100%;height:100%;min-height:80px;background:linear-gradient(110deg,#eee8da 8%,#f7f2e9 18%,#eee8da 33%);background-size:200% 100%;animation:placeholder-shimmer 1.4s linear infinite}.thumb-placeholder{min-height:108px;border-radius:1px}.render-error:after{content:"Halaman belum dapat ditampilkan";display:grid;place-items:center;height:100%;padding:12px;color:#725f45;font-size:11px;text-align:center}@keyframes placeholder-shimmer{to{background-position-x:-200%}}@media (prefers-reduced-motion:reduce){.page-placeholder,.thumb-placeholder{animation:none}}.category-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:min(100%,820px);margin-top:10px}.category-button{min-height:36px;padding:0 15px;border:1px solid rgba(216,179,90,.32);border-radius:4px;background:#041b14b8;color:var(--cream);font-size:11px;cursor:pointer;transition:background .18s,border-color .18s}.category-button:hover,.category-button:focus-visible{border-color:var(--gold-bright);background:#d8b35a1f}.site-footer{padding:4px 16px 16px;color:#f4ead07a;font-size:10px;letter-spacing:.035em;text-align:center}.site-footer span{color:var(--gold);padding:0 2px}.site-footer a{color:#d8b35ac7;text-decoration:none;transition:color .18s ease}.site-footer a:hover,.site-footer a:focus-visible{color:var(--gold-bright);text-decoration:underline}@media (max-width:700px){.site-footer{padding:3px 12px max(12px,env(safe-area-inset-bottom));font-size:9px}}