:root{
  --bg:#0e1611; --gold:#c2a46a; --gold-soft:#dcc89a; --cream:#f2efe7;
  --serif:"Cormorant Garamond", Georgia, serif; --sans:"Manrope", system-ui, sans-serif;
  --pw:400px; --ph:538px; /* set by JS */
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:radial-gradient(ellipse at 50% 35%,#21342a 0%,var(--bg) 62%,#070b08 100%);color:var(--cream);font-family:var(--sans);font-weight:300;overflow:hidden;user-select:none;-webkit-user-select:none}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px clamp(16px,3vw,40px);z-index:20}
.title{font-family:var(--serif);letter-spacing:.2em;font-size:16px;color:var(--gold);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top nav{display:flex;gap:8px;align-items:center;flex-shrink:0}
.btn{background:rgba(255,255,255,.05);border:1px solid rgba(194,164,106,.35);color:var(--gold-soft);height:38px;min-width:38px;padding:0 14px;border-radius:40px;font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:background .25s,border-color .25s,color .25s}
.btn:hover{background:rgba(194,164,106,.16);border-color:var(--gold);color:#fff}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.btn.icon{padding:0}
.btn[hidden]{display:none}

/* stage */
.stage{position:fixed;inset:0;display:grid;place-items:center;perspective:2600px;perspective-origin:50% 40%}
.tilt{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.book{position:relative;width:calc(var(--pw)*2);height:var(--ph);transform-style:preserve-3d;transition:transform 1s cubic-bezier(.65,0,.25,1)}
.book.closed-front{transform:translateX(calc(var(--pw)*-0.5))}
.book.closed-back{transform:translateX(calc(var(--pw)*0.5))}
.shadow{position:absolute;left:4%;right:4%;bottom:-6%;height:12%;background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);transform:translateZ(-60px);filter:blur(10px);transition:left 1s,right 1s}
.book.closed-front .shadow{left:52%}
.book.closed-back .shadow{right:52%}

/* page-block thickness */
.block{position:absolute;top:0;height:100%;transform-style:preserve-3d;pointer-events:none}
.block.l{right:50%;width:var(--pw)}
.block.r{left:50%;width:var(--pw)}
.block .edge{position:absolute;top:1px;bottom:1px;width:var(--t,0px);background:repeating-linear-gradient(90deg,#e9e4d8 0 1px,#cfc8b8 1px 2px);transition:width .5s}
.block.l .edge{left:0;transform-origin:left center;transform:rotateY(90deg)}
.block.r .edge{right:0;transform-origin:right center;transform:rotateY(-90deg)}
.block .bottom{position:absolute;inset:0;background:#d9d3c4;transform:translateZ(calc(var(--t,0px)*-1));box-shadow:0 30px 60px rgba(0,0,0,.45);transition:transform .5s}
.block.l .bottom{border-radius:3px 0 0 3px}.block.r .bottom{border-radius:0 3px 3px 0}
.block.empty{display:none}

/* leaves */
.leaf{position:absolute;left:50%;top:0;width:var(--pw);height:var(--ph);transform-origin:left center;transform-style:preserve-3d;cursor:pointer}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#f4f1ea}
.face img{width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;opacity:0;transition:opacity .35s}
.face img.ok{opacity:1}
.face.front{border-radius:0 3px 3px 0}
.face.back{transform:rotateY(180deg);border-radius:3px 0 0 3px}
.face .spin{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border:2px solid rgba(0,0,0,.12);border-top-color:rgba(0,0,0,.45);border-radius:50%;animation:spin .8s linear infinite}
.face img.ok + .spin{display:none}
.face.front::before,.face.back::before{content:"";position:absolute;top:0;bottom:0;width:14%;pointer-events:none;z-index:2}
.face.front::before{left:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,.06) 40%,transparent)}
.face.back::before{right:0;background:linear-gradient(270deg,rgba(0,0,0,.28),rgba(0,0,0,.06) 40%,transparent)}
.face .light{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0}
.face.front .light{background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 60%,rgba(255,255,255,.15))}
.face.back .light{background:linear-gradient(270deg,rgba(0,0,0,.55),rgba(0,0,0,.1) 60%,rgba(255,255,255,.15))}
.leaf .face.front::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;background:linear-gradient(315deg,transparent 50%,rgba(255,255,255,.85) 50%,#d6d0c2);box-shadow:-3px -3px 8px rgba(0,0,0,.25);transition:width .3s,height .3s;z-index:4}
.leaf.next:hover .face.front::after{width:46px;height:46px}

/* bottom controls */
.controls{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;z-index:20;background:rgba(10,16,12,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(194,164,106,.2);padding:8px 10px;border-radius:60px}
.controls .count{font-family:var(--serif);font-size:18px;color:var(--gold-soft);min-width:96px;text-align:center;letter-spacing:.05em;white-space:nowrap}
.controls .count i{font-style:italic;opacity:.6}
input[type=range]{-webkit-appearance:none;appearance:none;width:clamp(120px,28vw,360px);height:2px;background:rgba(220,200,154,.25);border-radius:2px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 0 0 4px rgba(194,164,106,.2)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--gold);cursor:pointer}

.arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:15;width:54px;height:54px;border-radius:50%;border:1px solid rgba(194,164,106,.35);background:rgba(10,16,12,.4);color:var(--gold-soft);cursor:pointer;display:grid;place-items:center;transition:all .25s}
.arrow:hover{background:var(--gold);color:var(--bg)}
.arrow:disabled{opacity:.2;pointer-events:none}
.arrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.4}
.arrow.prev{left:clamp(8px,2.5vw,36px)}.arrow.next{right:clamp(8px,2.5vw,36px)}

.menu{position:fixed;top:70px;right:clamp(16px,3vw,40px);z-index:25;background:rgba(10,16,12,.94);backdrop-filter:blur(12px);border:1px solid rgba(194,164,106,.25);border-radius:14px;padding:10px;min-width:240px;max-width:min(360px,90vw);max-height:70vh;overflow:auto;transform-origin:top right;transform:scale(.9) translateY(-8px);opacity:0;pointer-events:none;transition:all .25s}
.menu.open{transform:none;opacity:1;pointer-events:auto}
.menu button{display:flex;width:100%;gap:14px;align-items:baseline;justify-content:space-between;background:none;border:0;color:var(--cream);font:300 14px var(--sans);padding:10px 12px;border-radius:8px;cursor:pointer;text-align:left}
.menu button:hover{background:rgba(194,164,106,.14)}
.menu button b{font-family:var(--serif);font-style:italic;font-weight:300;color:var(--gold);font-size:16px;flex-shrink:0}

/* loader */
#loader{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;transition:opacity .8s,visibility .8s}
#loader.done{opacity:0;visibility:hidden}
#loader .in{text-align:center;color:var(--gold);padding:0 24px}
#loader .book-ico{width:64px;height:64px;margin:0 auto 22px;stroke:var(--gold);fill:none;stroke-width:1.2;animation:float 2.4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px) rotate(-3deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
#loader .t{font-family:var(--serif);letter-spacing:.25em;font-size:22px;text-transform:uppercase}
#loader .s{font-size:11px;letter-spacing:.25em;text-transform:uppercase;color:rgba(220,200,154,.6);margin-top:14px}
#loader .bar{width:200px;height:1px;background:rgba(194,164,106,.2);margin:22px auto 0;overflow:hidden}
#loader .bar i{display:block;height:100%;width:0;background:var(--gold);transition:width .25s}
#loader.err .s{color:#e8a598}

.hint{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:rgba(220,200,154,.55);z-index:10;transition:opacity .6s;white-space:nowrap}

@media (max-width:700px){
  .arrow{display:none}
  .top .btn .lbl{display:none}
  .title{font-size:12px;letter-spacing:.14em}
  .top nav{gap:5px}.top .btn{min-width:34px;height:34px}
  .controls{gap:8px;bottom:14px}
  .hint{bottom:74px}
}

/* title back-link, save note */
.title a{color:inherit;text-decoration:none;margin-right:6px;font-size:1.3em}
.savenote{position:fixed;top:72px;left:50%;transform:translateX(-50%);z-index:12;font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:rgba(220,200,154,.7);background:rgba(10,16,12,.5);border:1px solid rgba(194,164,106,.2);padding:7px 14px;border-radius:30px;white-space:nowrap;transition:opacity .8s}

/* bookshelf */
body.shelf-page{overflow:auto;user-select:auto}
.shelf{max-width:1180px;margin:0 auto;padding:110px clamp(16px,4vw,48px) 80px}
.shelf h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5vw,60px);color:var(--gold-soft);margin-bottom:40px}
.shelf__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:40px 28px}
.shelf__book{text-decoration:none;color:var(--cream);perspective:900px}
.shelf__cover{display:block;aspect-ratio:3/4;background:#1a261e;border-radius:2px 6px 6px 2px;overflow:hidden;box-shadow:-6px 0 0 -2px #0a100c inset,0 18px 40px rgba(0,0,0,.5);transform:rotateY(-14deg);transform-origin:left center;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.shelf__cover img,.shelf__cover canvas{width:100%;height:100%;object-fit:cover;display:block}
.shelf__book:hover .shelf__cover{transform:rotateY(-28deg) translateX(6px);box-shadow:0 26px 50px rgba(0,0,0,.6)}
.shelf__title{display:block;margin-top:16px;font-family:var(--serif);font-size:20px;line-height:1.2}
.shelf__empty{text-align:center;padding:12vh 0}
.shelf__empty p,.shelf__note{color:rgba(220,200,154,.7);font-size:15px}
.shelf__note{margin-bottom:24px}
.shelf code{background:rgba(255,255,255,.08);padding:2px 8px;border-radius:4px;color:var(--gold-soft)}

/* WebGL book */
#gl{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none;cursor:grab;outline:none}