:root{ --bar:#0a1622; --bar2:#13283b; --line:#27425a; --accent:#7FC2E8; --gold:#C9A24B; --txt:#dfeaf3; }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  body{background:#070f17;color:var(--txt);font-family:'Segoe UI',system-ui,sans-serif;overflow:hidden;display:flex;flex-direction:column;height:100vh}
  /* ambient drifting brand glow */
  body::before{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
    background:radial-gradient(40% 40% at 25% 20%,rgba(11,104,154,.32),transparent 60%),radial-gradient(45% 45% at 80% 80%,rgba(46,139,87,.18),transparent 60%);
    animation:drift 26s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate(-3%,-2%) scale(1)}to{transform:translate(3%,2%) scale(1.08)}}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

  .topbar{position:relative;z-index:30;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
          padding:11px 18px;background:linear-gradient(#0a1622,rgba(10,22,34,.55));backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:12px}
  .brand img{height:22px;width:auto;display:block}
  .brand .sep{width:1px;height:20px;background:var(--line)}
  .brand .pub{font-family:Georgia,serif;font-weight:600;letter-spacing:.06em;font-size:14px;color:#fff}
  .brand .pub b{color:var(--gold);font-weight:600}
  .tools{display:flex;gap:8px}
  .btn{display:inline-flex;align-items:center;gap:7px;background:var(--bar2);color:var(--txt);border:1px solid var(--line);border-radius:999px;
       padding:8px 15px;font:inherit;font-size:12.5px;letter-spacing:.03em;cursor:pointer;transition:background .18s,border-color .18s,transform .12s,box-shadow .18s}
  .btn:hover:not(:disabled){background:#1d3b53;border-color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.3)}
  .btn:active:not(:disabled){transform:translateY(0) scale(.97)}
  .btn:disabled{opacity:.32;cursor:default}
  .btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
  .btn:hover:not(:disabled) svg{transform:scale(1.12)}

  /* book region: flex:1 — controls live in their own rows BELOW, never overlap */
  #stage{flex:1;position:relative;z-index:10;display:flex;align-items:center;justify-content:center;padding:26px 22px 14px;min-height:0}
  /* soft surface the book rests on */
  #stage::after{content:"";position:absolute;left:50%;bottom:8px;width:min(72%,1040px);height:34px;transform:translateX(-50%);
    background:radial-gradient(50% 100% at 50% 0,rgba(0,0,0,.55),transparent 70%);filter:blur(6px);z-index:0;pointer-events:none}
  #bookwrap{position:relative;z-index:2;width:100%;height:100%;display:flex;align-items:center;justify-content:center;
            opacity:0;transform:scale(.965);transition:opacity .7s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  #bookwrap.ready{opacity:1;transform:none}
  /* touch-action:none so horizontal drag/swipe reaches the flip engine (pan-y let the
     browser hijack the gesture); cursor:grab/grabbing gives the real hand feel */
  #book{margin:0 auto;touch-action:none;cursor:grab;filter:drop-shadow(0 26px 54px rgba(0,0,0,.5))}
  #book:active{cursor:grabbing}
  #book .page{cursor:grab}
  .page{background:#fff;overflow:hidden;position:relative}
  .page::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.07),transparent 6%,transparent 94%,rgba(0,0,0,.07))}
  .page img{width:100%;height:100%;display:block;object-fit:fill;user-select:none}
  /* corner-peel affordance: a soft dog-ear on the active book's outer-bottom corner,
     teaching "grab here to turn". Fades while a flip is in progress. */
  /* corner-peel affordance — JS positions it on the real book's bottom-right corner;
     teaches "grab here to turn". pointer-events:none so it never blocks the flip. */
  #cornerHint{position:absolute;left:0;top:0;width:72px;height:72px;z-index:6;pointer-events:none;
    background:linear-gradient(135deg,transparent 48%,rgba(255,255,255,.5) 50%,rgba(201,162,75,.92) 88%);
    border-radius:0 0 4px 0;box-shadow:-4px -4px 12px rgba(0,0,0,.2) inset;
    opacity:0;transition:opacity .45s ease}
  #cornerHint.show{opacity:.92;animation:peek 2.4s ease-in-out 3}
  @keyframes peek{0%,100%{transform:translate(0,0)}45%{transform:translate(-9px,-9px)}}

  /* hint — its own slim row OUTSIDE the book area */
  .hintbar{position:relative;z-index:30;flex:none;text-align:center;font-size:11px;color:#5f7283;letter-spacing:.06em;
           padding:6px 10px 2px;background:#0a1622}
  .botbar{position:relative;z-index:30;flex:none;display:flex;align-items:center;justify-content:center;gap:16px;
          padding:11px 13px 14px;background:#0a1622;border-top:1px solid var(--line)}
  #pg{font-variant-numeric:tabular-nums;min-width:92px;text-align:center;font-size:13px;color:#9fb3c4;letter-spacing:.08em}
  .nav{width:44px;height:44px;border-radius:50%;justify-content:center;padding:0}

  /* branded loader */
  #loader{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
          background:radial-gradient(120% 90% at 50% 0%,#13283b,#070f17 70%);transition:opacity .6s ease}
  #loader.hide{opacity:0;pointer-events:none}
  #loader img{height:32px;opacity:.96;animation:pulse 2.2s ease-in-out infinite}
  @keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
  .ring{position:relative;width:56px;height:56px}
  .ring svg{width:56px;height:56px;transform:rotate(-90deg)}
  .ring .bg{stroke:#22405a;fill:none;stroke-width:4}
  .ring .fg{stroke:var(--gold);fill:none;stroke-width:4;stroke-linecap:round;transition:stroke-dashoffset .2s}
  #loadpct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#cfe0ee}
  #loadtxt{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#6d8497}

  #toc{position:fixed;inset:0 auto 0 0;width:min(86vw,360px);transform:translateX(-104%);transition:transform .3s cubic-bezier(.4,0,.2,1);
       background:#0a1622;border-right:1px solid var(--line);z-index:60;display:flex;flex-direction:column}
  #toc.on{transform:none}
  .toc-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
  .toc-head img{height:18px}
  .toc-head .x{cursor:pointer;color:#9fb3c4;font-size:18px;background:none;border:none;padding:4px 8px}
  .toc-sub{padding:10px 16px 0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
  .toc-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
  .toc-item{background:#000;border:1px solid var(--line);border-radius:5px;overflow:hidden;cursor:pointer;padding:0;position:relative;aspect-ratio:.746;transition:transform .18s,border-color .18s,box-shadow .18s}
  .toc-item img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .18s,transform .3s}
  .toc-item:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.4)} .toc-item:hover img{opacity:1;transform:scale(1.06)}
  .toc-item span{position:absolute;left:5px;bottom:4px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px #000}
  .toc-item.cur{outline:2px solid var(--gold);outline-offset:-2px}
  #scrim{position:fixed;inset:0;background:rgba(4,9,14,.62);opacity:0;visibility:hidden;transition:.3s;z-index:55}
  #scrim.on{opacity:1;visibility:visible}

  #zoom{position:fixed;inset:0;z-index:70;background:rgba(4,9,14,.97);display:none;flex-direction:column;opacity:0;transition:opacity .25s ease}
  #zoom.on{display:flex} #zoom.show{opacity:1}
  .zoom-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line)}
  .zoom-head img{height:18px;opacity:.9}
  #zoomwrap{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;gap:0;cursor:grab;padding:10px}
  #zoomwrap.drag{cursor:grabbing}
  #zoomwrap img{height:calc(100vh - 120px);max-width:none;display:block;box-shadow:0 20px 60px rgba(0,0,0,.6)}
  @media (max-width:900px){ #zoomwrap img{height:auto;width:96vw} .brand .pub{display:none} }
  @media (max-width:760px){ .btn span.lbl{display:none} .btn{padding:8px} }