/* AI Promy ebook experience — now nested inside the site's public header/footer,
   so the page scrolls normally instead of trapping the viewport. The in-page
   Fullscreen button still calls the browser Fullscreen API on #ebook-experience
   only, so the true full-bleed reader is unaffected by any of this. */
.ebook-studio-body { background:#03050b !important; }
.ebook-studio-body #wpadminbar { position:fixed; }
/* Keep any stray WordPress theme chrome out of this page — but NOT our own
   AIPromy public header (.aph) / footer (.aipf), which we want visible. */
body.ebook-studio-body #masthead,
body.ebook-studio-body #colophon,
body.ebook-studio-body .site-header,
body.ebook-studio-body .site-footer { display:none !important; }
.es-stage, .es-stage * { box-sizing:border-box; }
.es-stage { --purple:#8c45ff; --line:rgba(181,190,255,.13); --muted:#a9adbc; position:relative; min-height:100vh; display:grid; grid-template-columns:214px minmax(0,1fr); background:radial-gradient(circle at 52% 43%,#111b35 0,#070a14 42%,#02040a 100%); color:#f6f4fb; font-family:var(--es-font-body); overflow:hidden; }
.es-stage:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 24%,transparent 75%,rgba(0,0,0,.28)),radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.34)); z-index:0; }
/* True Fullscreen API mode (Fullscreen button): the stage becomes its own
   viewport, exactly like before — header/footer are outside it so they're
   simply not shown while this is active. */
.es-stage:fullscreen,
.es-stage:-webkit-full-screen { min-height:100vh; height:100vh; }

/* Sidebar */
.es-reader-sidebar { position:relative; z-index:1; display:flex; min-height:100vh; flex-direction:column; padding:18px 10px 14px; border-right:1px solid var(--line); background:linear-gradient(180deg,rgba(8,12,24,.98),rgba(5,8,16,.91)); }
.es-reader-brand { display:flex; align-items:center; gap:10px; padding:6px 8px 18px; color:#fff; text-decoration:none; }
.es-reader-mark { display:grid; place-items:center; width:32px; height:32px; color:#aa72ff; font-size:34px; line-height:1; transform:rotate(90deg); }
.es-reader-brand strong { display:block; font-size:15px; letter-spacing:-.5px; }.es-reader-brand small { display:block; margin-top:2px; font-size:8px; color:#b9b8c6; white-space:nowrap; }
.es-reader-nav { display:grid; gap:2px; }.es-reader-nav-link { display:flex; gap:10px; align-items:center; padding:9px 10px; border:1px solid transparent; border-radius:9px; color:#d8d8e2; text-decoration:none; font-size:13px; font-weight:500; transition:.2s ease; }.es-reader-nav-link span { color:#aaa8b9; font-size:18px; width:20px; text-align:center; }.es-reader-nav-link:hover,.es-reader-nav-link.es-nav-active { background:linear-gradient(100deg,rgba(109,49,214,.57),rgba(44,18,95,.57)); border-color:rgba(151,83,255,.64); color:#fff; box-shadow:0 10px 25px rgba(67,21,154,.23); }.es-reader-nav-link.es-nav-active span { color:#c6a0ff; }
.es-reader-sidebar-footer { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:0; }
.es-reader-music { margin-top:auto; padding:18px 13px; border:1px solid var(--line); border-radius:13px; background:rgba(5,7,15,.59); }.es-reader-music-disabled { opacity:.48; }.es-reader-music-title { display:grid; grid-template-columns:25px 1fr; column-gap:7px; align-items:center; font-size:18px; color:#a65cff; }.es-reader-music-title strong { font-size:11px; color:#f3f0fb; }.es-reader-music-title small { grid-column:2; margin-top:-6px; font-size:9px; color:#a5a4b2; }.es-reader-music-controls { display:flex; justify-content:space-around; align-items:center; margin:17px 0 12px; }.es-reader-music-controls button { border:0; color:#b9b4c6; background:transparent; cursor:pointer; }.es-reader-music-controls button:disabled { opacity:.6; }.es-reader-ambient-toggle { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--purple)!important; border-radius:50%; color:#fff!important; font-size:15px; box-shadow:0 0 20px rgba(129,57,255,.25); }.es-reader-music-wave { height:16px; display:flex; align-items:center; gap:1px; overflow:hidden; }.es-reader-music-wave i { display:block; flex:1 0 2px; height:30%; border-radius:2px; background:#7150ab; animation:es-wave 1s ease-in-out infinite alternate; }.es-reader-music-wave i:nth-child(3n){height:100%;animation-delay:.4s}.es-reader-music-wave i:nth-child(4n){height:58%;animation-delay:.2s}@keyframes es-wave{to{transform:scaleY(.4);opacity:.4}}

/* Main header + tab navigation */
.es-reader-main { position:relative; z-index:1; min-width:0; padding:18px 30px 102px 22px; }.es-reader-header { display:grid; grid-template-columns:1fr minmax(260px,1.4fr) 1fr; align-items:center; min-height:48px; gap:15px; }.es-reader-back { color:#ddd7eb; text-decoration:none; font-size:14px; }.es-reader-back:first-letter { color:#b678ff; }.es-reader-title { margin:0; font:400 clamp(22px,2vw,31px)/1.1 var(--es-font-display); text-align:center; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.es-reader-header-controls { display:flex; justify-content:flex-end; gap:10px; }.es-reader-header-controls button { display:flex; align-items:center; justify-content:center; gap:10px; min-width:102px; height:46px; border:1px solid var(--line); border-radius:10px; color:#eee9fa; background:rgba(7,8,20,.7); font-size:13px; cursor:pointer; }.es-reader-header-controls button:hover,.es-control-active { border-color:rgba(162,93,255,.7)!important; background:rgba(93,38,183,.2)!important; }.es-reader-header-controls button:disabled { opacity:.4; cursor:not-allowed; }
.es-reader-tabs { display:flex; gap:9px; overflow-x:auto; margin:15px 0 12px; padding:0 8px 5px; scrollbar-width:thin; }.es-reader-tab { flex:0 0 auto; display:flex; align-items:center; gap:11px; width:148px; min-height:56px; padding:8px 11px; border:1px solid var(--line); border-radius:10px; background:rgba(7,10,20,.76); color:#f4f1fb; font:13px/1.2 var(--es-font-body); text-align:left; cursor:pointer; transition:.2s ease; }.es-reader-tab:hover { border-color:rgba(178,132,255,.6); }.es-reader-tab-num { display:grid; flex:0 0 35px; place-items:center; width:35px; height:35px; border:1px solid rgba(255,255,255,.3); border-radius:50%; color:#dddce7; font-size:14px; }.es-reader-tab.es-active { background:linear-gradient(100deg,#6131bc,#241046); border-color:#7e45e4; box-shadow:0 8px 25px rgba(101,43,202,.27); }.es-reader-tab.es-active .es-reader-tab-num { background:#7740e4; border-color:#c4a5ff; color:white; }

/* Three-part cinematic body */
.es-reader-content { display:grid; grid-template-columns:minmax(205px,22%) minmax(380px,1fr) minmax(210px,24%); min-height:min(74vh,745px); gap:0; border:1px solid rgba(160,171,255,.08); border-radius:18px; overflow:hidden; background:rgba(4,7,15,.66); box-shadow:0 25px 75px rgba(0,0,0,.34); }.es-reader-point-text { padding:38px 22px 20px; border-right:1px solid rgba(255,255,255,.055); background:linear-gradient(145deg,rgba(6,9,19,.94),rgba(10,12,24,.79)); }.es-reader-point-num { display:block; color:#a867ff; font:400 45px/1 var(--es-font-display); }.es-reader-point-title { margin:13px 0 21px; color:#fff; font:400 clamp(28px,2.5vw,39px)/1.08 var(--es-font-display); }.es-reader-point-statement { margin:0; color:#e2e0e9; font-size:15px; line-height:1.72; white-space:pre-line; }.es-reader-point-statement:first-letter { }.es-reader-point-desc { margin-top:18px; color:#bfc0cd; font-size:14px; line-height:1.75; }.es-reader-takeaway { display:flex; gap:11px; margin-top:35px; padding:21px 16px; border:1px solid var(--line); border-radius:13px; background:linear-gradient(145deg,rgba(16,19,33,.87),rgba(7,9,17,.79)); }.es-reader-takeaway>span { color:#a664ff; }.es-reader-takeaway strong { font-size:14px; font-weight:500; }.es-reader-takeaway p { margin:19px 0 0; color:#e7e4ee; font-size:14px; line-height:1.65; }
.es-reader-point-image { position:relative; min-width:0; min-height:520px; overflow:hidden; background:radial-gradient(circle at center,#283350,#070a13 66%); cursor:crosshair; isolation:isolate; }
/* ============================================================
   Scene Engine layers — generic, data-driven. Every scene is built
   from up to 6 of these (.es-scene-l-image / -sprite / -particles /
   -light), stacked by type. The engine sets --lx/--ly (pointer/touch
   parallax, weighted per layer by --depth) and --duration (per-layer
   timing) as inline custom properties; this file only defines how a
   layer of each *type* behaves, never anything ebook-specific.
   ============================================================ */
.es-scene-frame { position:absolute; inset:0; }
.es-scene-frame-enter { opacity:0; }
.es-scene-frame-enter-active { opacity:1; transition:opacity var(--t-duration,520ms) ease; }
.es-scene-frame-exit { opacity:0; transition:opacity var(--t-duration,520ms) ease; }
.es-scene-l { position:absolute; will-change:transform; pointer-events:none; transform:translate(var(--lx,0px),var(--ly,0px)); }
.es-scene-l-image { inset:-6%; z-index:1; background:center/cover no-repeat; filter:saturate(1.05) brightness(1.1) contrast(1.04); transition:filter 1.2s ease; }
.es-scene-l-sprite { inset:auto 0 0; z-index:4; display:flex; align-items:flex-end; justify-content:center; }
.es-scene-l-sprite img { display:block; max-width:100%; max-height:100%; object-fit:contain; pointer-events:none; }
.es-scene-l-particles { inset:0; z-index:2; overflow:hidden; }
.es-scene-l-particles:before { content:""; position:absolute; inset:-10%; background:linear-gradient(105deg,transparent 15%,rgba(255,239,198,.16) 45%,transparent 70%); mix-blend-mode:screen; animation:es-ambient-sweep 14s linear infinite; }
.es-scene-l-particles i { position:absolute; width:7px; height:7px; border-radius:50%; background:rgba(255,241,190,.7); box-shadow:0 0 12px rgba(255,225,144,.8); animation-name:es-particle-drift; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.es-scene-l-light { inset:0; z-index:3; background:linear-gradient(112deg,rgba(255,211,132,.17),transparent 35%,rgba(4,9,17,.25) 82%); mix-blend-mode:screen; opacity:.7; transition:opacity 1s ease; }
/* Per-layer camera-style animation, timed from --duration (set by the
   engine from scene.timing / per-layer config). These compose with the
   live --lx/--ly parallax rather than replacing it. */
.es-scene-anim-kenBurns { animation:es-cam-kenburns var(--duration,16000ms) ease-in-out infinite alternate; }
.es-scene-anim-drift { animation:es-cam-drift calc(var(--duration,16000ms) * .5) ease-in-out infinite alternate; }
.es-scene-anim-breathe { animation:es-cam-breathe var(--duration,5600ms) ease-in-out infinite; }
.es-scene-anim-float { animation:es-cam-drift calc(var(--duration,16000ms) * .4) ease-in-out infinite alternate; }
.es-scene-anim-static { animation:none; }
@keyframes es-cam-kenburns { 0%{ transform:translate(var(--lx,0px),var(--ly,0px)) scale(1.04); } 100%{ transform:translate(calc(var(--lx,0px) + 1.4%),calc(var(--ly,0px) - 1%)) scale(1.12); } }
@keyframes es-cam-drift { 0%,100%{ transform:translate(var(--lx,0px),var(--ly,0px)); } 50%{ transform:translate(calc(var(--lx,0px) + 6px),var(--ly,0px)); } }
@keyframes es-cam-breathe { 0%,100%{ transform:translate(var(--lx,0px),var(--ly,0px)) scale(1); } 50%{ transform:translate(var(--lx,0px),calc(var(--ly,0px) - 3px)) scale(1.012); } }
@keyframes es-ambient-sweep { to{ transform:translateX(28%); } }
@keyframes es-particle-drift { 50%{ transform:translate(30px,-45px); opacity:.2; } }
.es-scene-l-particles i:nth-child(6n+1){left:12%;top:58%;animation-delay:-1s}.es-scene-l-particles i:nth-child(6n+2){left:29%;top:26%;animation-delay:-3s}.es-scene-l-particles i:nth-child(6n+3){left:73%;top:39%;animation-delay:-5s}.es-scene-l-particles i:nth-child(6n+4){left:85%;top:70%;animation-delay:-2s}.es-scene-l-particles i:nth-child(6n+5){left:51%;top:15%;animation-delay:-4s}.es-scene-l-particles i:nth-child(6n){left:63%;top:82%;animation-delay:-6s}
.es-scene-hotspot{position:absolute;z-index:6;width:28px;height:28px;transform:translate(-50%,-50%);border:0;background:transparent;cursor:pointer;opacity:.6;transition:opacity .25s ease,transform .25s ease}.es-scene-hotspot:after{content:"✦";position:absolute;inset:0;color:rgba(255,235,171,.86);font-size:18px;text-shadow:0 0 12px rgba(255,213,122,.95);animation:es-dust-twinkle 2.2s ease-in-out infinite}.es-scene-hotspot:hover,.es-scene-hotspot.es-discovered{opacity:1;transform:translate(-50%,-50%) scale(1.35)}.es-scene-message{position:absolute;z-index:7;left:50%;bottom:9%;max-width:78%;padding:11px 17px;border-left:2px solid #e7bf6b;background:rgba(5,10,15,.55);color:#fff8e4;font:400 18px/1.25 var(--es-font-display);text-align:center;transform:translate(-50%,12px);opacity:0;transition:.5s ease;pointer-events:none;backdrop-filter:blur(5px)}.es-scene-message.es-message-visible{transform:translate(-50%,0);opacity:1}.es-scene-instruction{position:absolute;z-index:5;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.65);font-size:11px;letter-spacing:.12em;text-transform:uppercase;transition:opacity .5s}.es-scene-awake .es-scene-l-image{filter:saturate(1.18) brightness(1.19)}.es-scene-awake .es-scene-l-light{opacity:1}.es-scene-awake .es-scene-instruction{opacity:0}@keyframes es-dust-twinkle{50%{transform:translateY(-4px) scale(1.25);opacity:.45}}
@media (prefers-reduced-motion:reduce) { .es-scene-anim-kenBurns,.es-scene-anim-drift,.es-scene-anim-breathe,.es-scene-anim-float,.es-scene-l-particles i,.es-scene-l-particles:before { animation:none; } }
.es-reader-image-wrap { position:relative; min-width:0; height:100%; }
.es-reader-image-wrap .es-reader-point-image { height:100%; }
/* Related ebooks — sits beside the cinematic image on desktop/tablet as a
   floating card, and collapses to a horizontal scroll strip on mobile. */
.es-related-ebooks { z-index:8; }
.es-related-ebooks h3 { margin:0 0 10px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#c8a6ff; font-weight:600; }
.es-related-list { display:flex; flex-direction:column; gap:8px; }
.es-related-card { display:flex; align-items:center; gap:10px; padding:6px; border-radius:10px; color:#f1eef8; text-decoration:none; transition:background .2s ease; }
.es-related-card:hover { background:rgba(255,255,255,.08); }
.es-related-card img { flex:0 0 auto; width:38px; height:52px; border-radius:6px; object-fit:cover; background:#161a2c; }
.es-related-card-title { font-size:12px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.es-reader-example { align-self:center; margin:0 18px; padding:23px 17px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,rgba(8,11,22,.94),rgba(10,13,23,.7)); box-shadow:0 20px 45px rgba(0,0,0,.25); }.es-reader-example h3 { margin:0 0 20px; color:#c896ff; font-size:16px; font-weight:400; }.es-reader-example h3:first-letter { color:#a765ff; }.es-reader-example img { width:100%; max-height:205px; border-radius:11px; object-fit:cover; }.es-example-caption { margin:18px 2px; color:#dedce6; font-size:14px; line-height:1.75; }.es-reader-example blockquote { margin:25px 0 2px; padding:23px 5px 0 28px; border-top:1px solid rgba(255,255,255,.14); color:#e5e0ec; font-size:14px; line-height:1.7; position:relative; }.es-reader-example blockquote:before { content:"“"; position:absolute; left:1px; top:18px; color:#a568ff; font-size:34px; }.es-reader-example a { color:#b87bff; font-size:13px; text-decoration:none; }.es-visual-empty { display:grid; place-items:center; align-content:center; height:100%; color:#aaaabd; text-align:center; }.es-visual-empty span { color:#a565ff; font-size:40px; }.es-diagram-matrix { display:grid; grid-template-columns:1fr 1fr; gap:2px; height:100%; background:#0a0d18; }.es-diagram-matrix section,.es-diagram-scale section { padding:24px; background:rgba(103,54,181,.18); }.es-diagram-matrix p,.es-diagram-scale p { color:#c6c5d0; line-height:1.6; }.es-diagram-scale { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:15px; height:100%; padding:25px; }.es-diagram-scale>b { display:grid; place-items:center; width:90px; height:90px; border:1px solid #a765ff; border-radius:50%; color:#dfc9ff; font-size:12px; text-align:center; }

/* Playback bar */
.es-reader-audiobar { position:fixed; z-index:4; left:238px; right:30px; bottom:18px; display:flex; align-items:center; gap:18px; min-height:64px; padding:10px 18px; border:1px solid var(--line); border-radius:14px; background:rgba(8,10,21,.92); box-shadow:0 16px 35px rgba(0,0,0,.32); backdrop-filter:blur(12px); }.es-audiobar-counter{color:#ddd9e5;font-size:13px;white-space:nowrap}.es-audiobar-line{height:1px;flex:1;background:linear-gradient(90deg,rgba(174,131,255,.65),rgba(150,145,183,.2))}.es-audiobar-next,.es-audiobar-previous{padding:12px 15px;border:1px solid rgba(147,99,232,.56);border-radius:9px;background:rgba(78,35,153,.22);color:#f1ecfb;font-size:13px;cursor:pointer}.es-audiobar-next{min-width:177px;background:linear-gradient(120deg,#4d1ca7,#6f38d1);border-color:#7740de}.es-audiobar-previous:disabled{opacity:.33;cursor:not-allowed}.es-audiobar-next span{margin-left:5px}
.es-scene-changing .es-reader-point-text,.es-scene-changing .es-reader-point-image,.es-scene-changing .es-reader-example { animation:es-scene-in .48s ease both; }.es-scene-changing .es-reader-point-image{animation-delay:.06s}.es-scene-changing .es-reader-example{animation-delay:.12s}@keyframes es-scene-in{from{opacity:0;transform:translateY(11px) scale(.99)}to{opacity:1;transform:none}}

@media (max-width:1200px){.es-reader-content{grid-template-columns:minmax(200px,30%) minmax(400px,1fr)}.es-reader-example{grid-column:1/-1;margin:18px;display:grid;grid-template-columns:1fr 180px 1.4fr;gap:16px;align-items:center}.es-reader-example h3{margin:0}.es-reader-example img{grid-column:2}.es-reader-example .es-example-caption{margin:0}.es-reader-example blockquote{display:none}.es-reader-header-controls button{min-width:auto;padding:0 10px}.es-reader-header-controls button span{display:none}}
@media (max-width:800px){.es-stage{display:block;overflow:visible}.es-reader-sidebar{min-height:0;padding:9px 14px;flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line)}.es-reader-brand{padding:4px}.es-reader-brand small,.es-reader-nav-link span,.es-reader-music{display:none}.es-reader-nav{display:flex;gap:3px}.es-reader-nav-link{padding:9px;font-size:12px}.es-reader-sidebar-footer{margin-top:0;margin-left:auto;padding-top:0;border-top:0}.es-reader-playall{width:auto;padding:9px 12px;border-radius:12px}.es-playall-sub,.es-playall-status{display:none}.es-playall-icon{flex-basis:30px;width:30px;height:30px}.es-reader-main{padding:12px 12px 105px}.es-reader-header{grid-template-columns:1fr auto}.es-reader-title{order:3;grid-column:1/-1;font-size:23px;text-align:left}.es-reader-header-controls{gap:5px}.es-reader-header-controls button{width:38px;min-width:38px;font-size:17px}.es-reader-header-controls button span{display:none}.es-reader-tabs{margin:9px 0}.es-reader-tab{width:135px;min-height:50px}.es-reader-content{display:block;min-height:0}.es-reader-point-text{border-right:0;padding:26px 19px}.es-reader-image-wrap{height:auto}.es-reader-point-image{min-height:58vw;aspect-ratio:1.35}.es-reader-example{margin:16px;display:block}.es-reader-example h3{margin-bottom:15px}.es-reader-example img{max-height:260px}.es-reader-audiobar{left:10px;right:10px;bottom:9px;gap:9px;min-height:55px;padding:7px 10px}.es-audiobar-counter,.es-audiobar-previous span,.es-audiobar-next span{display:none}.es-audiobar-next{min-width:70px;padding:10px 8px}.es-audiobar-previous{padding:10px 8px}.es-reader-takeaway{margin-top:20px}
	/* Related ebooks becomes a horizontal scroll strip under the image — no room to float it on a phone screen. */
	.es-related-ebooks{position:static;margin:14px 0 0;padding:0 2px}
	.es-related-ebooks h3{padding:0 2px}
	.es-related-list{flex-direction:row;overflow-x:auto;gap:10px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
	.es-related-card{flex:0 0 96px;flex-direction:column;align-items:flex-start;gap:6px;padding:4px}
	.es-related-card img{width:100%;height:96px}
	.es-related-card-title{-webkit-line-clamp:2}
	.es-related-card-cta{display:none}
}
/* Tablet portrait: keep the floating panel but make it narrower so the image still breathes. */
@media (min-width:801px) and (max-width:1024px){.es-related-ebooks{width:140px;padding:10px}.es-related-card-title{font-size:11px}}
@media (prefers-reduced-motion:reduce){.es-stage *{animation:none!important;transition:none!important}}

/* ============================================================
   Sidebar — premium refresh (glow accent, icon nav, active rail)
   ============================================================ */
.es-reader-sidebar { position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(13,16,32,.98),rgba(4,6,13,.97)); }
.es-reader-sidebar:before { content:""; position:absolute; top:-40px; left:-30px; width:230px; height:230px; background:radial-gradient(circle,rgba(140,69,255,.22),transparent 70%); pointer-events:none; z-index:0; }
.es-reader-brand { position:relative; z-index:1; }
.es-reader-mark { background:linear-gradient(135deg,rgba(140,69,255,.28),rgba(140,69,255,.05)); border:1px solid rgba(180,140,255,.4); border-radius:11px; box-shadow:0 0 22px rgba(140,69,255,.3); }
.es-reader-brand strong { background:linear-gradient(90deg,#fff,#d3bcff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.es-reader-nav { position:relative; z-index:1; }
.es-reader-nav-link { position:relative; overflow:hidden; gap:10px; transition:background .22s ease,border-color .22s ease,transform .18s ease,color .18s ease; }
.es-reader-nav-link:before { content:""; position:absolute; left:0; top:50%; width:3px; height:0; background:linear-gradient(180deg,#d3bcff,#8c45ff); border-radius:0 4px 4px 0; transform:translateY(-50%); transition:height .25s ease; }
.es-reader-nav-link:hover { transform:translateX(3px); color:#fff; }
.es-reader-nav-link:hover:before,
.es-reader-nav-link.es-nav-active:before { height:62%; }
.es-reader-nav-icon { flex:0 0 17px; width:17px; height:17px; color:#aaa8b9; transition:color .2s ease,transform .2s ease; }
.es-reader-nav-link:hover .es-reader-nav-icon,
.es-reader-nav-link.es-nav-active .es-reader-nav-icon { color:#c9a8ff; transform:scale(1.08); }
.es-reader-playall:before { display:none; }

/* ============================================================
   Play Summary — premium card control in the sidebar footer.
   Circular play glyph + title/subtitle + a live "Ready/Active"
   status row with a waveform, matching the cinematic control look.
   ============================================================ */
.es-reader-playall {
	display:flex; align-items:center; gap:12px; width:100%;
	padding:14px;
	border-radius:16px 16px 0 0;
	background:linear-gradient(155deg,rgba(124,58,237,.16),rgba(20,10,40,.55));
	border:1px solid rgba(180,140,255,.4);
	border-bottom:none;
	color:#f2ecff; text-align:left;
	cursor:pointer;
	box-shadow:0 -2px 0 rgba(255,255,255,.02) inset;
	transition:background .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.es-reader-playall:hover { background:linear-gradient(155deg,rgba(124,58,237,.26),rgba(20,10,40,.65)); border-color:rgba(203,171,255,.6); }
.es-reader-playall:active { transform:scale(.99); }
.es-playall-icon { position:relative; display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 6px 18px rgba(140,69,255,.4); transition:transform .25s ease,box-shadow .3s ease; }
.es-reader-playall:hover .es-playall-icon { transform:scale(1.05); box-shadow:0 8px 22px rgba(140,69,255,.55); }
.es-playall-play-glyph { width:14px; height:14px; color:#7c3aed; margin-left:2px; transition:opacity .25s ease,transform .25s ease; }
.es-playall-bars { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3px; opacity:0; transform:scale(.6); transition:opacity .25s ease,transform .25s ease; }
.es-playall-bars i { width:3px; height:55%; border-radius:1px; background:#7c3aed; animation:es-playall-eq 1s ease-in-out infinite; }
.es-playall-bars i:nth-child(1) { animation-delay:-.7s; }
.es-playall-bars i:nth-child(2) { animation-delay:-.35s; }
.es-playall-bars i:nth-child(3) { animation-delay:-.1s; }
@keyframes es-playall-eq { 0%,100%{transform:scaleY(.35)} 50%{transform:scaleY(1)} }
.es-reader-playall.es-playing .es-playall-play-glyph { opacity:0; transform:scale(.6); }
.es-reader-playall.es-playing .es-playall-bars { opacity:1; transform:scale(1); }
.es-playall-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.es-playall-title { font-size:12.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#fff; white-space:nowrap; }
.es-playall-sub { font-size:10px; line-height:1.32; color:#b9b0d1; font-weight:400; text-transform:none; letter-spacing:0; }
.es-playall-status {
	display:flex; align-items:center; gap:7px;
	padding:9px 14px;
	border-radius:0 0 16px 16px;
	background:rgba(6,8,16,.7);
	border:1px solid rgba(180,140,255,.4); border-top:1px solid rgba(255,255,255,.06);
}
.es-playall-dot { flex:0 0 7px; width:7px; height:7px; border-radius:50%; background:#6b7280; transition:background .3s ease,box-shadow .3s ease; }
.es-playall-status.es-playall-active .es-playall-dot { background:#34d399; box-shadow:0 0 8px rgba(52,211,153,.85); animation:es-status-dot-pulse 1.6s ease-in-out infinite; }
@keyframes es-status-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.es-playall-status-label { font-size:11px; font-weight:600; color:#9c98ac; }
.es-playall-status.es-playall-active .es-playall-status-label { color:#e2e0ec; }
.es-playall-wave { display:flex; align-items:center; gap:2px; height:14px; margin-left:auto; opacity:.35; transition:opacity .3s ease; }
.es-playall-wave i { display:block; width:2px; border-radius:1px; background:#8c45ff; height:30%; }
.es-playall-status.es-playall-active .es-playall-wave { opacity:1; }
.es-playall-status.es-playall-active .es-playall-wave i { animation:es-wave 1s ease-in-out infinite alternate; }
.es-playall-wave i:nth-child(1){animation-delay:0s}.es-playall-wave i:nth-child(2){animation-delay:.15s}.es-playall-wave i:nth-child(3){animation-delay:.3s}.es-playall-wave i:nth-child(4){animation-delay:.1s}.es-playall-wave i:nth-child(5){animation-delay:.25s}
@media (prefers-reduced-motion:reduce) { .es-playall-bars i,.es-playall-dot,.es-playall-wave i { animation:none!important; } }

/* ============================================================
   Cinematic image — vignette for legibility + a nicer scene hint
   ============================================================ */
.es-reader-point-image:after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(180deg,transparent 52%,rgba(3,5,11,.72) 100%),linear-gradient(90deg,rgba(3,5,11,.35),transparent 18%,transparent 82%,rgba(3,5,11,.28)); }
/* ============================================================
   Move Through The Scene — a floating glass invitation over the
   artwork: cursor glyph, title, subtitle, and a gentle arrow cue.
   Bigger and more legible than a passive caption, but still reads
   as part of the scene, not a page control.
   ============================================================ */
.es-scene-instruction {
	display:flex; flex-direction:column; align-items:center; gap:4px;
	padding:18px 34px 16px;
	border-radius:26px;
	background:rgba(10,8,22,.58);
	border:1px solid rgba(255,255,255,.16);
	backdrop-filter:blur(10px);
	box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
	cursor:grab;
	transition:background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease,opacity .5s ease;
}
.es-scene-cursor-icon { width:20px; height:20px; margin-bottom:4px; color:#fff; opacity:.9; animation:es-cursor-drift 2.6s ease-in-out infinite; }
@keyframes es-cursor-drift { 0%,100%{transform:translate(0,0)} 50%{transform:translate(3px,2px)} }
.es-scene-instruction-title { font:600 15px/1.2 var(--es-font-display); letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.es-scene-instruction-sub { font-size:12px; color:rgba(255,255,255,.6); text-transform:none; letter-spacing:normal; }
.es-scene-arrow-row { display:flex; align-items:center; gap:16px; margin-top:6px; font-size:13px; color:rgba(255,255,255,.4); letter-spacing:.1em; }
.es-scene-arrow-row span:first-child { animation:es-arrow-left 2s ease-in-out infinite; }
.es-scene-arrow-row span:last-child { animation:es-arrow-right 2s ease-in-out infinite; }
@keyframes es-arrow-left { 0%,100%{opacity:.35;transform:translateX(0)} 50%{opacity:.9;transform:translateX(-3px)} }
@keyframes es-arrow-right { 0%,100%{opacity:.35;transform:translateX(0)} 50%{opacity:.9;transform:translateX(3px)} }
/* Diamond sparkles flank the pill, echoing the scene's ambient dust. */
.es-scene-instruction:before,.es-scene-instruction:after { content:"◆"; position:absolute; top:50%; font-size:10px; color:rgba(201,168,255,.75); transform:translateY(-50%); animation:es-dust-twinkle 2.2s ease-in-out infinite; }
.es-scene-instruction:before { left:-26px; }
.es-scene-instruction:after { right:-26px; animation-delay:-1.1s; }
.es-reader-point-image:hover .es-scene-instruction { background:rgba(18,10,38,.68); border-color:rgba(201,168,255,.5); transform:translateX(-50%) translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.46); }
.es-scene-instruction:active,.es-scene-touching .es-scene-instruction { cursor:grabbing; transform:translateX(-50%) translateY(-1px) scale(.98); }
@media (prefers-reduced-motion:reduce) { .es-scene-cursor-icon,.es-scene-arrow-row span,.es-scene-instruction:before,.es-scene-instruction:after { animation:none; } }
@media (max-width:800px) {
	.es-scene-instruction { padding:13px 22px 12px; border-radius:20px; }
	.es-scene-instruction-title { font-size:12.5px; }
	.es-scene-instruction-sub { font-size:10.5px; }
	.es-scene-instruction:before,.es-scene-instruction:after { display:none; }
}

/* ============================================================
   Related ebooks — "hook the reader" card design
   ============================================================ */
.es-related-ebooks { background:linear-gradient(165deg,rgba(24,15,44,.78),rgba(6,8,16,.8)); border:1px solid rgba(180,140,255,.24); box-shadow:0 20px 48px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.05); border-radius:16px; }
.es-related-ebooks h3 { display:flex; align-items:center; gap:7px; padding-bottom:11px; margin-bottom:13px; border-bottom:1px solid rgba(255,255,255,.09); }
.es-related-ebooks h3:before { content:"✦"; color:#c9a8ff; font-size:11px; }
.es-related-card { border:1px solid transparent; border-radius:11px; }
.es-related-card:hover { background:rgba(140,69,255,.14); border-color:rgba(180,140,255,.4); transform:translateX(2px); }
.es-related-card img { border-radius:7px; box-shadow:0 8px 16px rgba(0,0,0,.42); transition:transform .25s ease; }
.es-related-card:hover img { transform:scale(1.07); }
.es-related-card-info { display:flex; flex-direction:column; gap:4px; min-width:0; }
.es-related-card-title { font-size:12px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s ease; }
.es-related-card:hover .es-related-card-title { color:#f1e7ff; }
.es-related-card-cta { font-size:10px; letter-spacing:.04em; color:#a373ff; opacity:0; transform:translateY(-2px); transition:opacity .2s ease,transform .2s ease; }
.es-related-card:hover .es-related-card-cta { opacity:1; transform:none; }

/* Strict cinematic layout correction: quiet chrome, maximum scene. */
@media (min-width:801px){
	/* Fills the space below the site header instead of hijacking the whole
	   viewport, so the public header stays visible and the footer is reachable
	   by scrolling. (True Fullscreen mode, triggered by the Fullscreen button,
	   still goes edge-to-edge via the browser's Fullscreen API — see .es-stage:fullscreen above.) */
	#ebook-experience.es-stage{position:relative;width:100%;max-width:none;height:calc(100vh - 64px);min-height:calc(100vh - 64px);margin:0;display:block;overflow:hidden}
	.es-reader-sidebar{position:absolute;inset:0 auto 0 0;width:214px;height:100%;min-height:0;z-index:10;padding-top:18px}
	.es-reader-main{position:absolute;inset:0 0 0 214px;width:auto;height:100%;min-height:0;padding:14px 24px 62px 18px;display:grid;grid-template-rows:44px 49px minmax(0,1fr);gap:7px}
	.es-reader-header{min-height:44px}.es-reader-title{font-size:22px}.es-reader-header-controls button{height:36px;min-width:86px;font-size:11px}
	.es-reader-tabs{height:49px;margin:0;padding:0 2px 3px;gap:7px;align-items:center}.es-reader-tab{width:112px;min-height:42px;height:42px;padding:5px 8px;gap:7px;font-size:11px;white-space:nowrap;overflow:hidden}.es-reader-tab>span:last-child{overflow:hidden;text-overflow:ellipsis}.es-reader-tab-num{flex-basis:28px;width:28px;height:28px;font-size:10px}
	.es-reader-content{min-height:0;height:100%;grid-template-columns:minmax(165px,18%) minmax(0,1fr) minmax(170px,20%);border-radius:13px}.es-reader-point-text{padding:25px 17px}.es-reader-point-num{font-size:35px}.es-reader-point-title{margin:8px 0 14px;font-size:clamp(23px,2vw,32px)}.es-reader-point-statement{font-size:13px;line-height:1.58}.es-reader-divider{margin:17px 0 14px}.es-reader-point-desc{font-size:12px;line-height:1.62}.es-reader-point-image{min-height:0;height:100%}
	.es-reader-example{margin:12px;padding:17px 13px;border-radius:12px}.es-reader-example h3{margin-bottom:13px;font-size:12px}.es-reader-example img{max-height:150px}.es-example-caption{margin:13px 1px;font-size:12px;line-height:1.58}.es-reader-example blockquote{margin-top:14px;padding-top:14px;font-size:12px;line-height:1.5}
	.es-reader-audiobar{position:absolute;left:232px;right:24px;bottom:10px;min-height:38px;height:38px;padding:0 10px;border:0;border-top:1px solid var(--line);border-radius:0;background:rgba(3,5,11,.72);box-shadow:none;backdrop-filter:none}.es-audiobar-next,.es-audiobar-previous{padding:4px 7px;border:0;background:transparent;color:#d5cee4;font-size:12px}.es-audiobar-next{min-width:0}.es-audiobar-next:hover,.es-audiobar-previous:hover{color:#ba8aff;background:transparent}.es-audiobar-line{background:rgba(181,190,255,.13)}
	/* Related ebooks floats over the right edge of the cinematic image. */
	.es-related-ebooks{position:absolute;top:14px;right:14px;bottom:14px;width:170px;display:flex;flex-direction:column;padding:14px;border-radius:14px;background:rgba(8,10,20,.62);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);overflow-y:auto}
}
/* ==========================================================================
   Emotion — tints the point's visual to match its mood. Purely additive:
   points with no emotion set render exactly as before.
   ========================================================================== */
.es-reader-point-image[class*="es-emotion-"]:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:overlay;opacity:.55;background:radial-gradient(ellipse at 50% 30%,var(--es-emotion-color,transparent),transparent 68%)}
.es-emotion-fear{--es-emotion-color:#8b0000}
.es-emotion-mystery{--es-emotion-color:#6b21a8}
.es-emotion-hope{--es-emotion-color:#f5b942}
.es-emotion-love{--es-emotion-color:#d9376e}
.es-emotion-sadness{--es-emotion-color:#3b6ea5}
.es-emotion-motivation{--es-emotion-color:#e07b1a}
.es-emotion-curiosity{--es-emotion-color:#22b3d8}
.es-emotion-excitement{--es-emotion-color:#e63946}
.es-emotion-curiosity:before,.es-emotion-excitement:before{animation:es-emotion-pulse 4.5s ease-in-out infinite}
@keyframes es-emotion-pulse{0%,100%{opacity:.4}50%{opacity:.7}}
@media (prefers-reduced-motion: reduce){.es-emotion-curiosity:before,.es-emotion-excitement:before{animation:none}}

/* ==========================================================================
   Teaser Level — how much of the visual is "revealed" before purchase.
   light = normal (default, unchanged). moderate/revealing progressively
   blur + desaturate the image and add a small badge nudging toward the book.
   ========================================================================== */
.es-teaser-moderate .es-scene-l{filter:blur(2px) saturate(.85)}
.es-teaser-revealing .es-scene-l{filter:blur(6px) saturate(.6) brightness(.8)}
.es-teaser-moderate:after,.es-teaser-revealing:after{content:"◐ Teaser";position:absolute;z-index:5;top:14px;left:14px;padding:6px 12px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.03em;color:#fff;background:rgba(8,10,20,.72);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);pointer-events:none}
.es-teaser-revealing:after{content:"🔒 Full detail in the book"}

/* ==========================================================================
   Header "Get the Book" button — was collected in admin but never actually
   rendered anywhere before.
   ========================================================================== */
.es-reader-buy-header{display:flex;align-items:center;justify-content:center;gap:8px;min-width:150px;height:46px;padding:0 16px;border-radius:10px;color:#0c0a14;background:linear-gradient(135deg,#c9a8ff,#a765ff);font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 8px 22px rgba(167,101,255,.35)}
.es-reader-buy-header:hover{filter:brightness(1.08)}

/* ==========================================================================
   Inline purchase CTA — shown after a point when the admin checks "Show
   purchase CTA right after this point".
   ========================================================================== */
.es-inline-cta-card{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px;padding:18px;border-radius:14px;background:linear-gradient(145deg,rgba(93,38,183,.28),rgba(16,19,33,.87));border:1px solid rgba(180,140,255,.3)}
.es-inline-cta-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.es-inline-cta-copy strong{color:#fff;font-size:14px;font-weight:600}
.es-inline-cta-copy span{color:#d8d2e8;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.es-inline-cta-btn{flex-shrink:0;padding:10px 16px;border-radius:9px;background:linear-gradient(135deg,#c9a8ff,#a765ff);color:#0c0a14;font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.es-inline-cta-btn:hover{filter:brightness(1.08)}
@media (max-width:800px){.es-reader-buy-header span{display:none}.es-reader-buy-header{min-width:38px;padding:0 10px}.es-inline-cta-card{flex-direction:column;align-items:stretch;text-align:center}}

/* ==========================================================================
   Story Beats — the caption line for whichever beat is currently showing.
   Sits inside the same scene frame that crossfades beat-to-beat, so the
   caption fades with it automatically (no separate transition needed).
   ========================================================================== */
.es-beat-caption{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);max-width:82%;z-index:4;padding:10px 20px;border-radius:10px;background:rgba(6,7,14,.62);backdrop-filter:blur(8px);color:#f3f0ff;font-size:14.5px;line-height:1.45;text-align:center;letter-spacing:.01em;border:1px solid rgba(255,255,255,.08);animation:es-beat-caption-in .45s ease both}
@keyframes es-beat-caption-in{from{opacity:0;transform:translateX(-50%) translateY(6px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@media (prefers-reduced-motion: reduce){.es-beat-caption{animation:none}}
@media (max-width:800px){.es-beat-caption{font-size:13px;bottom:16px;padding:8px 14px;}}

/* ==========================================================================
   Text Beats — kind-specific treatment for the single caption element so
   Hook / Explanation / Example / Formula each read as a distinct "moment"
   over the same continuously-animating background image.
   ========================================================================== */
.es-beat-kind-hook{left:50%;bottom:auto;top:50%;transform:translate(-50%,-50%);max-width:78%;font:400 clamp(26px,3.4vw,44px)/1.18 var(--es-font-display);padding:0;background:none;backdrop-filter:none;border:0;text-shadow:0 4px 30px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.8);animation:es-beat-hook-in .55s cubic-bezier(.2,.8,.3,1.1) both}
@keyframes es-beat-hook-in{from{opacity:0;transform:translate(-50%,-50%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.es-beat-kind-explain,.es-beat-kind-example{font-size:15px;}
.es-beat-kind-formula{bottom:30px;max-width:88%;padding:14px 26px;border:1px solid rgba(199,161,255,.4);background:linear-gradient(135deg,rgba(93,38,183,.35),rgba(6,7,14,.72));font-weight:600;letter-spacing:.01em;position:relative;overflow:hidden}
.es-beat-kind-formula:before{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#c9a8ff,#a765ff);animation:es-beat-formula-draw 1s .25s ease forwards}
@keyframes es-beat-formula-draw{to{width:100%}}
@media (prefers-reduced-motion: reduce){.es-beat-kind-hook{animation:none}.es-beat-kind-formula:before{animation:none;width:100%}}
@media (max-width:800px){.es-beat-kind-hook{font-size:clamp(22px,5.5vw,30px);max-width:88%}}