/* ASTILLAS DEL VACÍO — Escena ultrapanorámica continua
   La única ilustración de fondo incluye la plataforma VACÍA.
   Portada y contraportada forman un objeto 3D HTML/CSS independiente. */
:root{--archive-veil:#080618;--archive-glow:#c69dff}
html,body{min-width:0}
body.library-app{background:#080613;overflow:hidden}
.library-bg{position:fixed;inset:0;z-index:-3;opacity:1;filter:none;transform:none;animation:none;
 background:#080613 url('../assets/escenario-unico-libros.webp') center center/cover no-repeat}
.library-tint{position:fixed;inset:0;z-index:-2;pointer-events:none;animation:none;
 background:
 linear-gradient(90deg,rgba(4,3,15,.62) 0%,rgba(5,4,18,.32) 18%,transparent 31%,transparent 62%,rgba(5,3,17,.22) 70%,rgba(5,3,17,.69) 100%),
 linear-gradient(180deg,rgba(4,3,15,.42) 0%,transparent 26%,transparent 74%,rgba(4,3,15,.46) 100%)}
.library-page{height:100dvh;max-height:100dvh;min-height:530px;padding:0 clamp(16px,2vw,42px);overflow:hidden;position:relative}
.library-heading{position:relative;z-index:7;background:none;border:0;pointer-events:none}
.library-heading a{pointer-events:auto}
.heading-top{height:45px;border:0;background:transparent}
.heading-story{height:113px;min-height:0;padding:7px 12px;overflow:visible;box-shadow:none;background:none}
.heading-story::before,.heading-story::after{content:none!important;display:none!important}
.heading-story h1{font-size:clamp(38px,3.5vw,60px);text-shadow:0 3px 22px #0a0516}
.heading-ornament{margin-right:13px}
.heading-emblem{background:rgba(15,6,32,.14)}
.library-board{position:relative;flex:1;min-height:0;display:block;isolation:auto;border:0;background:none;box-shadow:none;padding:0;margin:0}
.library-board::before{display:none!important}
/* Sin columnas dibujadas: posicionamiento semántico sobre una sola escena. */
.volume-rail,.showcase,.reader-panel{position:absolute;min-width:0;min-height:0;border:0!important;box-shadow:none!important;background:transparent!important;overflow:visible}
.volume-rail{z-index:6;left:0;top:1.5%;bottom:2%;width:clamp(220px,19.5%,355px);padding:8px 8px 5px 5px;display:flex;flex-direction:column;isolation:isolate}
.volume-rail::before{content:"";position:absolute;pointer-events:none;z-index:-1;inset:-110px -55px -25px -35px;
 background:linear-gradient(90deg,rgba(3,3,13,.44) 0%,rgba(3,3,13,.23) 67%,transparent 100%)}
.rail-illustration,.theme-crimson .rail-illustration{display:none!important}
.rail-tabs{margin:0 0 14px;border-bottom:1px solid rgba(217,176,255,.15)}
.rail-tabs button{font-size:11px;min-height:37px;text-shadow:0 2px 8px #080515}
.rail-heading{border-bottom:1px solid rgba(215,177,255,.15);padding-bottom:10px}
.rail-collection{flex:0 0 auto}
.rail-collection .volume-list{max-height:none;flex:0 0 auto;gap:6px;padding-top:14px;overflow:visible}
.rail-collection .volume-choice{background:transparent!important;border:0!important;border-left:2px solid transparent!important;border-radius:2px;min-height:clamp(91px,12.5vh,130px);padding:8px 9px 8px 6px;
 transition:background .22s ease,transform .22s ease}
.rail-collection .volume-choice:hover,.rail-collection .volume-choice.is-selected{background:linear-gradient(90deg,rgba(var(--accent-rgb),.15),rgba(14,8,30,.11) 80%,transparent)!important}
.rail-collection .volume-choice.is-selected{border-left-color:var(--accent)!important}
.volume-choice.is-selected::before{display:none!important}
.volume-choice img{width:clamp(50px,3.6vw,68px);height:auto;aspect-ratio:2/3;object-fit:cover}
.volume-meta strong{font-size:clamp(19px,1.45vw,27px);text-shadow:0 3px 15px #04020e}
.volume-meta small,.volume-meta>span,.rail-heading,.rail-page-caption{filter:drop-shadow(0 2px 8px #04020f)}
.rail-pages{min-height:42px;margin-top:1px;justify-content:center}
.rail-page-button{background:rgba(13,7,30,.32);box-shadow:none;backdrop-filter:blur(3px)}
.rail-bottom{margin-top:auto;border-top:1px solid rgba(226,187,255,.16);background:none!important;padding:13px 10px 8px;text-shadow:0 3px 10px #04020f}
.rail-lore{background:rgba(9,6,24,.29);border:0;backdrop-filter:blur(5px)}
/* Showcase transparente; el libro está centrado sobre el círculo central de la imagen. */
.showcase{z-index:2;inset:0;display:block;padding:0;overflow:visible}
.showcase-top{position:absolute;top:5px;left:34%;right:29%;z-index:5;pointer-events:none;text-shadow:0 2px 9px #080313}
.book-environment,.theme-crimson .book-environment{position:absolute!important;inset:0!important;height:100%;width:100%!important;margin:0!important;border:0;background:none!important;overflow:visible;isolation:auto;display:flex;justify-content:center;align-items:center;perspective:1400px}
.book-environment::before,.theme-crimson .book-environment::before{display:none!important;content:none!important}
.scene-orb,.archive-orbit-system,.archive-particles,.showcase-orbit,.book-pedestal,.book-ground{display:none!important}
.book-stage{height:86%;width:100%;max-width:none;--book-width:clamp(190px,18vw,335px);--depth:clamp(27px,2.4vw,40px);transform:translateY(-10.8%);z-index:3;perspective:1400px;touch-action:none}
.book-object{filter:drop-shadow(15px 20px 24px rgba(1,0,8,.64));will-change:transform}
.showcase-insignia{display:none!important}
.book-controls{position:absolute;left:50%;bottom:2%;transform:translateX(-50%);width:auto;min-height:43px;z-index:5;padding:4px 13px;border-radius:7px;
 background:rgba(7,4,18,.36);backdrop-filter:blur(6px);font-size:9px;white-space:nowrap;color:#f0e2ff;text-shadow:0 2px 8px #04020c}
.book-controls button{background:rgba(25,12,54,.39);border:1px solid rgba(200,156,255,.48)}
/* Texto y botones auténticos HTML por encima del paisaje, nunca grabados en la imagen. */
.reader-panel{z-index:6;right:0;top:5%;bottom:5%;width:clamp(310px,25%,455px);padding:15px 7px 7px 18px;display:flex;flex-direction:column;isolation:isolate}
.reader-panel::before{content:"";position:absolute;inset:-100px -30px -45px -48px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(4,3,15,.47) 14%,rgba(5,4,16,.64) 44%,rgba(5,3,16,.75) 100%)}
.reader-decor{display:none!important}
.reader-top{border-bottom:0;min-height:26px;text-shadow:0 2px 10px #03020d}
.reader-panel h2{font-size:clamp(37px,2.75vw,53px);text-shadow:0 4px 18px #04010b}
.reader-tabs{border:0;border-bottom:1px solid rgba(219,181,255,.24)}
.reader-tabs button{background:none;padding:11px 3px}
.reader-content{font-size:clamp(12px,.9vw,15px);line-height:1.75;color:#f0e8f6;text-shadow:0 2px 8px rgba(3,1,12,.9)}
.reader-content .opening{font-size:clamp(25px,2.1vw,35px)}
.reader-actions{padding-top:10px;border:0}
.amazon-action{background:rgba(12,8,34,.37);backdrop-filter:blur(6px);border:1px solid rgba(var(--accent-rgb),.37);border-radius:4px}
.reader-bottom{border-top:1px solid rgba(221,180,255,.12)}
.library-footer{z-index:7;position:relative;border:0;background:none!important;height:27px;text-shadow:0 2px 8px #03020a}
/* Tablet horizontal: conservar la escena y permitir lectura sin cortes. */
@media(min-width:701px) and (max-width:1180px){
 .library-page{padding:0 14px;height:100dvh;max-height:100dvh;min-height:510px;overflow:hidden}.library-board{flex:1;min-height:0}body.library-app{overflow:hidden}
 .heading-top{height:38px}.heading-story{height:87px}.heading-story h1{font-size:44px}.heading-emblem{width:49px;height:49px}
 .library-board{display:block}.volume-rail{width:23%;top:0;bottom:1%;padding:3px 2px 2px}
 .rail-collection .volume-choice{min-height:92px;padding:5px 3px}.volume-choice img{width:44px}.volume-meta strong{font-size:19px}
 .reader-panel{width:32%;top:2%;bottom:3%;padding:7px 2px 5px 10px}
 .reader-panel h2{font-size:clamp(33px,3.7vw,48px)}.status-line{margin-bottom:9px}
 .reader-tabs button{padding:8px 2px}.reader-content{font-size:12px;line-height:1.55;padding-top:11px}
 .book-stage{--book-width:clamp(145px,20vw,250px);height:81%;transform:translateY(-7%)}
 .showcase-top{left:32%;right:36%;font-size:8px}.book-controls{bottom:2%;gap:7px;padding:2px 5px;font-size:8px}
 .book-controls button{min-width:29px;min-height:30px}.book-controls .reset-button{min-width:50px}
}
/* Teléfono/vertical: contenido legible en una sola página, sin deformar el arte ni el libro. */
@media(max-width:700px), (max-height:510px){
 body.library-app{overflow:auto}
 .library-bg{position:fixed;background-position:center top;background-size:cover}
 .library-tint{background:linear-gradient(90deg,rgba(3,2,13,.64),rgba(3,2,13,.35),rgba(3,2,13,.66)),linear-gradient(180deg,rgba(3,2,13,.5),transparent 25%,rgba(3,2,13,.46) 100%)}
 .library-page{height:auto;max-height:none;min-height:100dvh;overflow:visible;padding:0 10px}
 .library-heading{position:relative}.heading-top{height:49px}.heading-story{height:116px;padding:8px 5px}.heading-story h1{font-size:clamp(31px,6vw,42px);line-height:.95}.heading-ornament{display:none!important}
 .library-board{display:flex;flex-direction:column;min-height:0}
 .volume-rail,.showcase,.reader-panel{position:relative;inset:auto;left:auto;top:auto;bottom:auto;right:auto;width:100%;min-height:0;overflow:visible}
 .volume-rail{order:0;padding:8px 10px;min-height:0}.rail-bottom{display:none}
 .rail-collection .volume-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}.rail-collection .volume-choice{min-height:94px;padding:4px}
 .rail-collection .volume-choice img{width:45px}.volume-meta strong{font-size:18px}
 .showcase{order:1;height:490px;flex:none;overflow:visible}
 .showcase-top{top:2px;left:12px;right:12px}.book-environment{position:absolute!important;height:100%}
 .book-stage{--book-width:min(55vw,255px);height:88%;transform:translateY(-1%)}
 .book-controls{bottom:6px;left:50%}.reader-panel{order:2;padding:24px 18px 16px;min-height:420px;width:100%}
 .reader-panel::before{inset:0 -10px;background:rgba(6,4,18,.45)}
 .reader-panel h2{font-size:43px}.reader-content{max-height:none;min-height:180px;font-size:14px}
 .reader-bottom{margin-bottom:4px}.library-footer{height:auto;min-height:32px}
}
@media(max-width:420px){.book-controls{gap:4px}.book-controls span{font-size:8px;letter-spacing:0}.reader-panel{padding-inline:10px}.volume-meta strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.book-object{will-change:auto}}


/* AJUSTE EDITORIAL 2026-10-30 — Cristal tenue sin ocultar el paisaje */
.library-bg{transition:opacity .45s ease,background-image .45s ease}
body.library-app.theme-crimson .library-bg{
 background-image:url('../assets/escenario-libro-ii-sabha-rayos-aurora-4k.webp');
 background-color:#1c0616;
 background-position:center center;
 background-size:cover;
  image-rendering:auto;
}
body.theme-crimson .library-tint{background:linear-gradient(90deg,rgba(7,2,12,.50),rgba(10,3,17,.08) 27%,transparent 63%,rgba(10,3,16,.55) 100%),linear-gradient(180deg,rgba(8,3,14,.35),transparent 35%,rgba(6,2,12,.32));}
/* Paneles traslúcidos sin columnas opacas; su área sigue dejando ver la escena. */
.library-board .volume-rail,
.library-board .reader-panel{
 background:rgba(10,7,27,.40)!important;
 border:1px solid rgba(197,164,255,.24)!important;
 border-radius:14px;
 box-shadow:0 16px 42px rgba(2,1,10,.16),inset 0 1px 0 rgba(225,196,255,.065)!important;
 -webkit-backdrop-filter:blur(7px) saturate(1.08);
 backdrop-filter:blur(7px) saturate(1.08);
 overflow:hidden;
}
.library-board .volume-rail::before,.library-board .reader-panel::before{display:none!important}
.library-board .reader-panel{padding:clamp(16px,1.6vw,28px) clamp(16px,2vw,33px) 15px;}
.library-board .volume-rail{padding:clamp(13px,1.2vw,23px) clamp(10px,1.2vw,20px)}
.book-object{--book-shadow:drop-shadow(16px 21px 19px rgba(0,0,0,.7));filter:var(--book-shadow)}
.book-stage{--depth:clamp(37px,3.1vw,53px);--book-width:clamp(196px,18vw,337px);width:44%;max-width:660px;transform:translateY(-10.8%);}
.book-spine{background:linear-gradient(90deg,#080612 0%,#221234 9%,#412568 36%,#120a25 77%,#06040d 100%);box-shadow:inset -3px 0 4px rgba(0,0,0,.35)}
.book-page-right{box-shadow:inset 0 0 8px rgba(0,0,0,.3),1px 0 5px rgba(234,219,199,.22)}
.book-front{box-shadow:inset 7px 0 8px rgba(4,2,15,.50),inset -2px 0 5px rgba(255,255,255,.12)}
/* La cabecera solo tiene el archivo: no hay «EDICIÓN SELECCIONADA» ni contador superior. */
.showcase-top{display:none!important}
.library-header-actions{display:flex;align-items:center;gap:clamp(14px,2vw,33px);pointer-events:auto}
.library-sound-toggle{display:inline-flex;align-items:center;gap:9px;background:rgba(14,8,33,.38);border:1px solid rgba(201,164,255,.25);border-radius:30px;padding:7px 12px;color:#e9dafa;cursor:pointer;font:800 10px/1.25 var(--sans);letter-spacing:.11em;white-space:nowrap;transition:color .2s ease,background .2s ease}
.library-sound-toggle:hover{background:rgba(55,27,91,.45);color:#fff}
.library-sound-toggle[aria-pressed="false"]{color:#b9a2d5}
.library-sound-mark{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:20px;height:15px}
.library-sound-mark i{display:block;height:8px;width:3px;background:var(--accent);border-radius:2px;box-shadow:0 0 6px var(--accent);animation:library-sound-bars 1.2s ease-in-out infinite}
.library-sound-mark i:nth-child(2){height:14px;animation-delay:-.27s}
.library-sound-mark i:nth-child(3){height:6px;animation-delay:-.63s}
.library-sound-toggle[aria-pressed="false"] .library-sound-mark i{animation:none;height:3px;box-shadow:none}
@keyframes library-sound-bars{50%{height:4px}}
@media(min-width:701px) and (max-width:1180px){
 .book-stage{width:42%;--book-width:clamp(145px,19vw,250px);--depth:clamp(28px,3vw,40px);}
 .library-board .volume-rail{padding:9px 8px}
 .library-board .reader-panel{padding:11px 10px}
 .library-sound-toggle{padding:6px 8px;font-size:9px}
}
@media(max-width:700px), (max-height:510px){
 .book-stage{width:100%;--book-width:min(55vw,255px);--depth:clamp(27px,7vw,43px);transform:translateY(-1%)}
 .library-board .volume-rail,.library-board .reader-panel{border-radius:10px;background:rgba(9,6,23,.59)!important}
 .library-board .reader-panel{padding:18px 13px}
 .library-header-actions{gap:8px}
 .library-sound-toggle{font-size:8px;letter-spacing:.02em;padding:6px}
 .library-sound-mark{width:14px}
 .library-sound-label{max-width:80px}
}
@media(prefers-reduced-motion:reduce){.library-bg{transition:none}.library-sound-mark i{animation:none}}
/* Evitar anchura sobrante del encabezado en móviles estrechos. */
@media(max-width:460px){
 .heading-top .brand{font-size:9px;letter-spacing:.035em}
 .heading-top .exit-link{font-size:8px;letter-spacing:0}
 .library-header-actions{gap:5px}
 .library-sound-toggle{padding:6px 5px;min-width:34px}
 .library-sound-label{display:none}
}

/* === REVISION FISICA 3D + ORGANIZACION EDITORIAL (2026-10-30) ===
   En CSS 3D, 'filter' sobre el padre obliga a renderizar sus descendientes
   en un plano: por eso se veía la portada pero no el canto ni el lomo. */
.book-object{
  filter:none !important;
  transform-style:preserve-3d !important;
  -webkit-transform-style:preserve-3d;
  will-change:transform;
}
.book-stage{
  --depth:clamp(39px,3.15vw,58px);
  --book-width:clamp(180px,15vw,287px);
  width:42%;
  transform:translateY(-13%);
}
.book-front{
  box-shadow:inset 6px 0 7px rgba(2,1,10,.47),inset -2px 0 3px rgba(255,255,255,.14),
   13px 14px 22px rgba(0,0,0,.45);
}
.book-back{box-shadow:0 10px 24px rgba(0,0,0,.3)}
.book-spine{box-shadow:inset 3px 0 5px rgba(0,0,0,.45),inset -2px 0 3px rgba(255,255,255,.18)}
.book-edge-pages{box-shadow:inset 0 0 7px rgba(25,16,29,.27),0 0 2px rgba(234,220,191,.18)}
/* Amazon ocupa el antiguo pie editorial de la colección. */
.library-board .rail-bottom.rail-amazon-slot{
  display:block !important;
  flex:0 0 auto;
  margin-top:auto;
  padding:12px 0 0;
  background:linear-gradient(to bottom,transparent,rgba(6,4,20,.38));
  border-top:1px solid rgba(var(--accent-rgb),.25);
}
.rail-amazon-slot .amazon-action{
  width:100%;border-radius:6px;text-align:left;
  background:linear-gradient(105deg,rgba(var(--accent-rgb),.13),rgba(12,7,30,.38));
  padding:12px clamp(7px,1vw,14px);gap:12px;
  font-size:clamp(9px,.72vw,11px);letter-spacing:.065em;
  backdrop-filter:none;
}
.rail-amazon-slot .amazon-action small{font-size:9px;margin-top:2px}
.rail-amazon-slot .amazon-symbol{font-size:30px;line-height:1.1}
.rail-amazon-slot .action-arrow{font-size:19px}
/* Más espacio vertical para lectura tras mover el botón. */
.library-board .reader-panel{
  top:1%;bottom:1%;
  padding-bottom:clamp(16px,1.6vw,28px);
}
.reader-content{padding-bottom:7px;}
.reader-content .opening{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;
  font-style:normal;
  font-size:clamp(19px,1.45vw,26px);
  line-height:1.22;
  white-space:nowrap;
  letter-spacing:.005em;
  margin-bottom:17px;
}
/* Evitar espacios vacíos después del texto y recuadros innecesarios. */
.reader-panel .reader-actions,.reader-panel .reader-bottom{display:none!important}
@media(min-width:701px) and (max-width:1180px){
 .book-stage{width:43%;--book-width:clamp(150px,18vw,240px);--depth:clamp(31px,3vw,44px);transform:translateY(-12%)}
 .library-board .reader-panel{top:1%;bottom:1%;}
 .rail-amazon-slot .amazon-action{padding:9px 5px;gap:8px;font-size:8px;letter-spacing:.025em}
 .rail-amazon-slot .amazon-action small{font-size:8px}
 .rail-amazon-slot .amazon-symbol{font-size:25px}
 .reader-content .opening{font-size:clamp(18px,1.8vw,22px);margin-bottom:10px}
}
@media(max-width:700px), (max-height:510px){
 .book-stage{width:100%;--book-width:clamp(155px,46vw,236px);--depth:clamp(32px,7vw,47px);transform:translateY(-6%)}
 .library-board .rail-bottom.rail-amazon-slot{padding-top:8px;margin-top:8px;display:block!important}
 .rail-amazon-slot .amazon-action{font-size:11px;padding:10px 16px}
 .library-board .reader-panel{top:auto;bottom:auto;min-height:525px;}
 .reader-content{min-height:290px}
 .reader-content .opening{font-size:clamp(22px,4.7vw,28px);white-space:normal}
}
/* En móvil la ilustración se encuadra verticalmente para mantener la plataforma debajo del volumen. */
@media(max-width:700px) and (min-height:511px){
 .library-bg{background-size:auto 119%;background-position:center top;}
 .book-stage{transform:translateY(-17%)}
}
@media(min-width:701px) and (max-width:1180px){
 /* Asiento del volumen sobre la cara superior de la plataforma en tablet. */
 .book-stage{transform:translateY(-8%)}
}

/* Ajuste Libro II: mostrar la aurora roja con sus colores naturales, sin velo oscuro.
   Los rayos y los camellos ya forman parte de la ilustración. */
body.library-app.theme-crimson .library-bg{
  filter:none!important; opacity:1!important;
  background-image:url('../assets/escenario-libro-ii-sabha-rayos-aurora-4k.webp');
  background-size:cover; background-position:center center;
}
body.library-app.theme-crimson .library-tint{
  background:linear-gradient(90deg, rgba(11,2,8,.12) 0%,transparent 23%,transparent 77%,rgba(11,2,8,.14) 100%),
             linear-gradient(180deg,rgba(10,1,8,.09) 0%,transparent 17%,transparent 83%,rgba(10,1,8,.10) 100%)!important;
}
body.library-app.theme-crimson .library-board .volume-rail,
body.library-app.theme-crimson .library-board .reader-panel{
  background:rgba(18,5,17,.32)!important;
  -webkit-backdrop-filter:blur(4px) saturate(1.02);
  backdrop-filter:blur(4px) saturate(1.02);
}

/* REVISION SINOPSIS Y PRESENTACION LIBRO II — 2026-10-30
   Imagen natural, cabecera editorial y lectura sin desplazamiento horizontal. */
body.library-app.theme-crimson .library-bg{
 background-image:url('../assets/escenario-libro-ii-sabha-camellos-cercanos.webp') !important;
 opacity:1 !important;
 filter:none !important;
 background-position:center center !important;
 background-size:cover !important;
}
body.library-app.theme-crimson .library-tint{
 background:linear-gradient(90deg,rgba(7,2,8,.045),transparent 26%,transparent 75%,rgba(7,2,8,.07)) !important;
}
.library-board .reader-panel{
 overflow:hidden;
}
.library-board .reader-panel .reader-content{
 min-width:0;max-width:100%;width:100%;
 overflow-x:hidden !important;
 overflow-y:auto;
 box-sizing:border-box;
 white-space:normal;
 overflow-wrap:break-word;
 overscroll-behavior-x:contain;
}
.library-board .reader-panel .reader-content>*{
 max-width:100%;box-sizing:border-box;
 white-space:normal;
}
body.library-app.theme-crimson .reader-panel h2{
 position:relative;
 color:#fff0eb;
 font-family:'Cormorant Garamond',Georgia,serif;
 font-weight:500;
 letter-spacing:-.024em;
 line-height:1.02;
 padding:8px 0 16px;
 margin-bottom:9px;
 background:radial-gradient(ellipse at 19% 63%,rgba(250,101,106,.14),transparent 66%);
 text-shadow:0 2px 17px rgba(255,137,151,.24),0 3px 10px rgba(7,1,5,.75);
}
body.library-app.theme-crimson .reader-panel h2::after{
 content:"";position:absolute;left:0;bottom:0;
 height:1px;width:52%;
 background:linear-gradient(90deg,rgba(255,197,191,.82),rgba(243,93,107,.53),transparent);
 box-shadow:0 0 10px rgba(255,117,139,.35);
 pointer-events:none;
}
body.library-app.theme-crimson .reader-panel .reader-content{
 font-size:clamp(13px,.95vw,16px);line-height:1.68;
 padding-top:15px;
}
body.library-app.theme-crimson .reader-panel .reader-content p{
 margin-bottom:15px;
}

/* Cristal de lectura: oscurecer los paneles, NO el paisaje de fondo. */
body.library-app.theme-crimson .library-board .volume-rail,
body.library-app.theme-crimson .library-board .reader-panel{
 background:rgba(22,4,17,.59) !important;
 -webkit-backdrop-filter:blur(8px) saturate(.82);
 backdrop-filter:blur(8px) saturate(.82);
 border-color:rgba(255,169,184,.26) !important;
}