.ekt-root{
  --ink-0:#100e0b; --ink-1:#1c1813;
  --gold:#c79a4e; --gold-soft:#e0c084;
  --paper:#f4efe4; --cream:#ece3d2; --mute:#8d8474;
  --line:rgba(199,154,78,.28);
  --shadow:0 30px 70px -20px rgba(0,0,0,.75), 0 10px 30px -15px rgba(0,0,0,.6);
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  position:relative; width:100%; min-height:320px;
  border-radius:12px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 18%, #2a241c 0%, var(--ink-1) 42%, var(--ink-0) 100%);
  color:var(--cream); font-family:var(--ui);
  user-select:none; -webkit-user-select:none;
}
.ekt-root *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}

.ekt-reader{position:absolute; inset:0; display:flex; flex-direction:column; padding:12px clamp(8px,2.4vw,30px)}

.ekt-topbar{display:flex; align-items:center; gap:14px; flex:0 0 auto; padding:4px 2px 12px}
.ekt-brand{font-family:var(--display); font-size:clamp(14px,1.7vw,18px); letter-spacing:.02em; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ekt-eyebrow{display:none; font-family:var(--ui); font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-bottom:3px; font-weight:600}
.ekt-spacer{flex:1}
.ekt-iconbtn{appearance:none; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--cream); width:38px; height:38px; border-radius:10px; cursor:pointer; display:grid; place-items:center; transition:.22s ease}
.ekt-iconbtn:hover{border-color:var(--gold); color:var(--gold-soft); background:rgba(199,154,78,.08)}
.ekt-iconbtn svg{width:17px;height:17px}

.ekt-stage{flex:1 1 auto; position:relative; display:flex; align-items:center; justify-content:center; perspective:2600px; min-height:0}
.ekt-stage.zoomed{overflow:auto; align-items:safe center; justify-content:safe center}
.ekt-zlabel{font:600 12px var(--ui); color:var(--cream); min-width:46px; text-align:center; cursor:pointer; opacity:.9}
.ekt-zlabel:hover{color:var(--gold-soft)}
.ekt-book{position:relative; height:100%; max-height:100%; filter:drop-shadow(0 24px 44px rgba(0,0,0,.5))}

.ekt-spread{position:relative; height:100%; display:flex; align-items:stretch; border-radius:4px; overflow:hidden; box-shadow:var(--shadow)}
.ekt-page,.ekt-leaf-face{background:var(--paper) center/cover no-repeat}
.ekt-page{position:relative; height:100%}
.ekt-spread.double::after{content:""; position:absolute; top:0; bottom:0; left:50%; width:46px; transform:translateX(-50%); pointer-events:none; z-index:5;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.16) 38%, rgba(0,0,0,.30) 50%, rgba(0,0,0,.16) 62%, rgba(0,0,0,0) 100%)}
.ekt-edge-l{box-shadow:inset 7px 0 16px -10px rgba(0,0,0,.4)}
.ekt-edge-r{box-shadow:inset -7px 0 16px -10px rgba(0,0,0,.4)}

.ekt-leaf{position:absolute; top:0; height:100%; transform-style:preserve-3d; z-index:10; transition:transform .68s cubic-bezier(.4,.05,.2,1); will-change:transform}
.ekt-leaf-face{position:absolute; inset:0; height:100%; width:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden}
.ekt-leaf-face.back{transform:rotateY(180deg)}
.ekt-leaf-face::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .68s ease}
.ekt-leaf.turning .ekt-leaf-face::after{opacity:1}
.ekt-leaf-face.front::after{background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.22))}
.ekt-leaf-face.back::after{background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0))}

.ekt-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:30; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:rgba(16,14,11,.55); backdrop-filter:blur(4px); color:var(--cream); display:grid; place-items:center; cursor:pointer; transition:.22s ease; opacity:.85}
.ekt-nav:hover{border-color:var(--gold); color:var(--gold-soft); opacity:1}
.ekt-nav:disabled{opacity:.18; cursor:default}
.ekt-nav.prev{left:max(4px,.8vw)} .ekt-nav.next{right:max(4px,.8vw)}
.ekt-nav svg{width:19px;height:19px}

.ekt-footer{flex:0 0 auto; padding:12px 4px 2px; display:flex; flex-direction:column; gap:9px}
.ekt-progress{position:relative; height:3px; border-radius:3px; cursor:pointer; background:rgba(255,255,255,.08)}
.ekt-fill{position:absolute; left:0; top:0; bottom:0; border-radius:3px; background:linear-gradient(90deg,var(--gold),var(--gold-soft)); width:0%; transition:width .4s ease}
.ekt-knob{position:absolute; top:50%; transform:translate(-50%,-50%); width:11px;height:11px;border-radius:50%; background:var(--gold-soft); box-shadow:0 0 0 4px rgba(199,154,78,.18); left:0; transition:left .4s ease}
.ekt-pageinfo{display:flex; align-items:center; justify-content:center; gap:9px; font-size:12px; color:var(--mute); letter-spacing:.04em}
.ekt-pageinfo b{color:var(--cream); font-weight:600; font-variant-numeric:tabular-nums}

.ekt-overlay{position:absolute; inset:0; z-index:60; display:grid; place-items:center; background:radial-gradient(60% 60% at 50% 45%, rgba(28,24,19,.6), rgba(16,14,11,.92)); backdrop-filter:blur(2px); transition:opacity .5s ease}
.ekt-overlay.hide{opacity:0; pointer-events:none}
.ekt-loader{text-align:center}
.ekt-ring{width:44px;height:44px;margin:0 auto 16px; border-radius:50%; border:2px solid rgba(199,154,78,.18); border-top-color:var(--gold); animation:ekt-spin 1s linear infinite}
@keyframes ekt-spin{to{transform:rotate(360deg)}}
.ekt-loader p{margin:0; font-family:var(--display); font-size:15px; color:var(--cream); letter-spacing:.04em}
.ekt-loader span{display:block; margin-top:6px; font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--gold)}
.ekt-errbox{max-width:360px; text-align:center; padding:0 24px}
.ekt-errbox h3{font-family:var(--display); color:var(--cream); margin:0 0 8px; font-size:18px}
.ekt-errbox p{color:var(--mute); font-size:13px; line-height:1.6; margin:0}
.ekt-errbox code{color:var(--gold-soft); background:rgba(199,154,78,.1); padding:1px 6px; border-radius:5px}

@media (max-width:760px){ .ekt-reader{padding:10px} .ekt-nav{width:38px;height:38px} .ekt-mode{display:none} }
@media (prefers-reduced-motion:reduce){ .ekt-leaf{transition:none} }