:root{
  --bg:#07100f;
  --bg-2:#0a1716;
  --panel:#0b2422;
  --panel-soft:#102e2b;
  --metal:#8b9390;
  --metal-dark:#4f5654;
  --text:#f4f7f5;
  --muted:#aabbb7;
  --acid:#83ff14;
  --cyan:#20d8d4;
  --line:rgba(131,255,20,.18);
  --shadow:0 24px 60px rgba(0,0,0,.35);
}

::selection {
    background: var(--page-book-color-2, var(--cyan));
    color: #fff;
}

::-moz-selection {
    background: var(--page-book-color-2, var(--cyan));
    color: #fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 20% -10%,rgba(32,216,212,.16),transparent 28%),
    radial-gradient(circle at 100% 0,rgba(131,255,20,.08),transparent 30%),
    linear-gradient(180deg,#07100f 0%,#030706 100%);
  color:var(--text);
  font-family:"News Cycle","Arial Narrow",Arial,sans-serif;
}
button,input{font:inherit}
button{cursor:pointer}
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:999;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);
  background-size:5px 5px,7px 7px;
  mix-blend-mode:overlay;
}
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px clamp(18px,4vw,48px);
  background:rgba(5,13,12,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand{display:flex;align-items:baseline;gap:12px}
.brand-kicker{
  font:800 clamp(20px,3vw,34px)/1 Orbitron,sans-serif;
  letter-spacing:-1px;
  color:#fff;
  text-shadow:3px 0 0 #000;
}
.brand-title {
    font: 700 15px / 1 Orbitron, sans-serif;
    letter-spacing: 2px;
    padding: 5px 9px 4px;

    color: #e93620;

    background:
        linear-gradient(
            180deg,
            #ffd229 0%,
            #ff9d16 28%,
            #ed3b22 58%,
            #bd1b1d 100%
        );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    border: 0;

    filter:
        drop-shadow(0 1px 0 #721313)
        drop-shadow(0 0 1px rgba(255, 169, 20, .7))
        drop-shadow(0 0 4px rgba(220, 31, 24, .45));

    box-shadow: none;
	position: relative;
	left: -15px;
	z-index: 2;
	transform: rotate(-4deg);
	transform-origin: center;
	position: relative;
	z-index: 2;
}
.ghost-btn{
  display:none;
  background:#0b1c1a;color:var(--acid);
  border:1px solid rgba(131,255,20,.35);
  border-radius:999px;padding:10px 14px;
}
.page{
  max-width:1480px;
  margin:0 auto;
  padding:26px clamp(16px,3.5vw,46px) 56px;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:24px;
}
.library{
  position:sticky;top:92px;height:calc(100vh - 118px);
  padding:18px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 26%),
    linear-gradient(180deg,#0b1817,#081110);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.library:before,.reader:before,.status-card:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 22%);
}
.library-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:14px}
.eyebrow{
  font:700 11px/1 Orbitron,sans-serif;
  letter-spacing:2px;color:var(--cyan);text-transform:uppercase
}
.library h2,.book-hero h1,.reader h2{margin:5px 0 0}
.library h2{font-size:26px}
.count{
  font:500 12px/1 Orbitron,sans-serif;color:var(--acid);
  border:1px solid rgba(131,255,20,.2);padding:6px 8px;border-radius:8px
}
.search{display:block;margin:14px 0 10px}
.search span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.search input{
  width:100%;border:1px solid rgba(255,255,255,.09);outline:none;
  background:#07100f;color:#fff;border-radius:12px;padding:11px 12px
}
.search input:focus{border-color:rgba(32,216,212,.55);box-shadow:0 0 0 3px rgba(32,216,212,.08)}
.book-list{height:calc(100% - 150px);overflow:auto;padding-right:5px}
.book-list::-webkit-scrollbar,.reader-scroll::-webkit-scrollbar{width:8px}
.book-list::-webkit-scrollbar-track,.reader-scroll::-webkit-scrollbar-track{background:#07100f;border-radius:99px}
.book-list::-webkit-scrollbar-thumb,.reader-scroll::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--acid));border-radius:99px}
.book-btn{
  width:100%;display:grid;grid-template-columns:36px 1fr;gap:8px;text-align:left;
  border:0;border-left:2px solid transparent;background:transparent;color:#d9e2df;
  padding:9px 8px;border-radius:0 10px 10px 0
}
.book-btn .num{font:700 11px/1.6 Orbitron;color:#70827e}
.book-btn:hover{background:rgba(255,255,255,.035)}
.book-btn.active{background:linear-gradient(90deg,rgba(32,216,212,.15),rgba(131,255,20,.04));border-left-color:var(--acid);color:#fff}
.book-btn.active .num{color:var(--acid)}
.book-btn:disabled{opacity:.34;cursor:not-allowed}
.library-foot{
  position:absolute;left:18px;right:18px;bottom:15px;
  padding-top:11px;border-top:1px solid rgba(255,255,255,.08);
  color:#8ea09c;font-size:12px
}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid);margin-right:7px}

.workspace{min-width:0}
.book-hero{
  min-height:190px;
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:30px clamp(24px,4vw,44px);
  border-radius:28px;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(125deg,rgba(255,255,255,.06),transparent 24%),
    repeating-linear-gradient(90deg,#777f7c 0 5px,#555c59 5px 10px,#929895 10px 15px,#616865 15px 20px);
  box-shadow:var(--shadow);
}
.book-hero:after{
  content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.52) 0 47%,rgba(0,0,0,.08) 70%,rgba(0,0,0,.22));
  pointer-events:none
}
.hero-copy,.hero-mark{position:relative;z-index:1}
.hero-copy h1{font-size:clamp(32px,4vw,52px);line-height:.95;letter-spacing:-3px;text-shadow:0 4px 0 rgba(0,0,0,.4);font-family:"Orbitron", sans-serif;}
.book-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.meta-pill{
  background:rgba(4,12,11,.75);border:1px solid rgba(255,255,255,.11);
  padding:6px 15px;border-radius:999px;color:#dfe8e5;font-size:13px
}
.hero-mark{
  align-self:flex-start;
  font:800 clamp(90px,13vw,180px)/.7 Orbitron,sans-serif;
  color:rgba(0,0,0,.25);letter-spacing:-12px
}
.workspace-grid{
  display:grid;
  grid-template-columns:210px minmax(0,1fr) 250px;
  gap:18px;
  margin-top:18px;
  align-items:start
}
.section-nav{
  position:sticky;top:92px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:#081211;
  overflow:hidden;
  box-shadow:var(--shadow)
}
.section-nav button{
  width:100%;display:grid;grid-template-columns:38px 1fr;align-items:center;
  border:0;border-bottom:1px solid rgba(255,255,255,.06);
  background:transparent;color:#cbd7d3;text-align:left;padding:13px 12px
}
.section-nav button:last-child{border-bottom:0}
.section-nav button span{font:700 15px "News Cycle";color:#5e7470}
.section-nav button:hover{background:rgba(255,255,255,.03)}
.section-nav button.active{
  background:linear-gradient(90deg,rgba(32,216,212,.16),rgba(131,255,20,.035));
  color:#fff;
  box-shadow:inset 3px 0 0 var(--acid)
}
.section-nav button.active span{color:var(--acid)}

.reader{
  position:relative;
  min-height:650px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 0 0,rgba(32,216,212,.12),transparent 28%),
    linear-gradient(180deg,#0d2c29,#08211f);
  box-shadow:var(--shadow);
}
.reader-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:24px 28px 18px;border-bottom:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.12)
}
.reader h2{font-size:clamp(30px,4vw,48px);line-height:1}
.signal{display:flex;gap:4px;align-items:end;height:28px}
.signal i{display:block;width:5px;background:var(--acid);border-radius:4px;box-shadow:0 0 10px rgba(131,255,20,.55)}
.signal i:nth-child(1){height:8px}.signal i:nth-child(2){height:14px}.signal i:nth-child(3){height:20px}.signal i:nth-child(4){height:26px}
.reader-scroll{
  height:540px;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:26px 30px 42px;
  scrollbar-gutter:stable;
}
.reader-scroll p,.reader-scroll li{
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.58;
  color:#f2f5f3
}
.reader-scroll p{margin:0 0 22px}
.reader-scroll strong,.term{color:var(--cyan)}
.reader-scroll .section-block{
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.06)
}
.stats-grid{display:grid;grid-template-columns:minmax(150px,210px) 1fr;gap:34px;align-items:start}
.cover{
  aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  background:
    linear-gradient(180deg,#8ed2e9 0 14%,#2f8fc2 14% 62%,#094876 62%);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 18px 34px rgba(0,0,0,.25)
}
.cover:before{
  content:"ANIMORPHS";display:block;margin:10px;background:#edf0ef;color:#1a1a1a;
  border:2px solid #222;text-align:center;font:700 18px Orbitron,sans-serif;padding:6px 3px
}
.cover:after{content:"The Invasion";display:block;margin-top:65%;text-align:center;font-size:22px;font-weight:bold}
.stats-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{
  min-height:110px;padding:16px;border:1px solid rgba(255,255,255,.08);border-radius:16px;
  background:rgba(0,0,0,.12)
}
.stat-label{font:700 10px Orbitron;color:#7f9691;letter-spacing:1px;margin-bottom:8px}
.stat-value{font-size:20px}
.character-card{display:grid;grid-template-columns:1fr minmax(170px,230px);gap:26px;align-items:end}
.character-silhouette{
  min-height:330px;border-radius:110px 110px 24px 24px;
  background:
    radial-gradient(circle at 50% 18%,#c68e6d 0 10%,transparent 11%),
    radial-gradient(ellipse at 50% 25%,#5c372b 0 15%,transparent 16%),
    linear-gradient(180deg,transparent 0 39%,#846039 39% 100%);
  filter:drop-shadow(0 0 18px rgba(32,216,212,.65))
}
.status-card{
  position:sticky;top:92px;overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;background:#091817;box-shadow:var(--shadow)
}
.status-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 14px;background:#050909;border-bottom:1px solid rgba(255,255,255,.07);
  color:var(--acid);font:700 11px Orbitron;letter-spacing:1px
}
.status-led{width:8px;height:8px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px var(--acid)}
.status-body{padding:18px 16px 20px;color:#eef3f1;line-height:1.5}
.status-body .status-title{font-family:"Orbitron", sans-serif;font-size:21px;margin-bottom:12px}
.status-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13px}
.status-row span:first-child{color:#849792}

@media(max-width:1180px){
  .page{grid-template-columns:240px minmax(0,1fr)}
  .workspace-grid{grid-template-columns:180px minmax(0,1fr)}
  .status-card{grid-column:1/-1;position:relative;top:auto}
  .status-body{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:10px}
  .status-body .status-title{grid-column:1/-1}
}
@media(max-width:900px){
  .ghost-btn{display:block}
  .page{display:block}
  .library{
    display:none;position:fixed;z-index:80;inset:76px 12px 12px;top:76px;height:auto;
    max-width:420px;margin-left:auto
  }
  .library.open{display:block}
  .workspace-grid{grid-template-columns:1fr}
  .section-nav{
    position:relative;top:auto;display:flex;overflow-x:auto;border-radius:16px;
  }
  .section-nav button{
    min-width:150px;display:block;text-align:center;border-bottom:0;border-right:1px solid rgba(255,255,255,.06)
  }
  .section-nav button span{display:block;margin-bottom:3px}
  .section-nav button.active{box-shadow:inset 0 -3px 0 var(--acid)}
  .status-card{grid-column:auto}
  .reader-scroll{height:auto;max-height:none;overflow:visible}
}
@media(max-width:640px){
  .topbar{padding:14px 14px}
  .brand-kicker{font-size:20px}
  .brand-title{font-size:10px;letter-spacing:2px}
  .page{padding:14px 12px 34px}
  .book-hero{min-height:154px;padding:22px}

  .hero-copy h1{
  font-size:32px;
  letter-spacing:-1px;
}

  .hero-mark{font-size:90px}
  .workspace-grid{gap:12px}
  .reader{min-height:unset;border-radius:18px}
  .reader-head{padding:20px 18px 15px}
  .reader-scroll{padding:20px 18px 28px}
  .stats-grid,.character-card{grid-template-columns:1fr}
  .cover{max-width:210px;margin:auto}
  .stats-data{grid-template-columns:1fr 1fr}
  .character-silhouette{min-height:250px;max-width:220px;width:100%;margin:auto}
  .status-body{display:block}
  
  .brand{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
  }

  .brand-title{
    left:0;
    top:0;
    margin-top:-2px;
    transform:rotate(-4deg);
  }

}

.hero {
    position: relative;
}

.hero-mark {
    position: absolute;
    bottom: -4px;
    right: 24px;
    line-height: .8;
}


.cover:after{content:attr(data-book);display:block;margin-top:65%;text-align:center;font-size:18px;font-weight:600;padding:0 8px}


/* ANIBASE — extracted SWF assets integration */

.cover-wrap{
  display:flex;
  align-items:flex-start;
  justify-content:center;
}

.book-cover{
  display:block;
  width:100%;
  max-width:210px;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 18px 34px rgba(0,0,0,.35);
}

/* Disable the old CSS fake cover if the class remains elsewhere. */
.book-cover::before,
.book-cover::after{
  content:none;
}

.narrator-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,230px);
  gap:28px;
  align-items:end;
}

.narrator-copy{
  min-width:0;
}

.narrator-visual{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.narrator-image{
  display:block;
  width:100%;
  max-width:230px;
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(32,216,212,.42));
}

@media(max-width:640px){
  .narrator-layout{
    grid-template-columns:1fr;
  }

  .narrator-image{
    max-width:200px;
    margin:0 auto;
  }
}


/* ANIBASE — UX improvements */

/* --- Dynamic book hero ----------------------------------- */

.book-hero{
  --hero-color-1:rgb(13,63,66);
  --hero-color-2:rgb(18,103,104);
  --hero-color-3:rgb(58,74,70);

  background:
    radial-gradient(circle at 82% 18%,color-mix(in srgb,var(--hero-color-2) 82%,white 8%),transparent 34%),
    linear-gradient(
      118deg,
      color-mix(in srgb,var(--hero-color-1) 76%,black 24%) 0%,
      var(--hero-color-2) 52%,
      color-mix(in srgb,var(--hero-color-3) 78%,black 22%) 100%
    );
  transition:background .45s ease;
}

.book-hero:after{
  background:
    linear-gradient(90deg,rgba(2,8,8,.68) 0%,rgba(2,8,8,.33) 45%,rgba(2,8,8,.08) 78%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.18));
}

/* --- Wider reader + right utility rail ------------------ */

.workspace-grid{
  grid-template-columns:minmax(0,1fr) 260px;
  grid-template-areas:
    "reader nav"
    "reader status";
  gap:18px;
  align-items:start;
}

.reader{
  grid-area:reader;
}

.section-nav{
  grid-area:nav;
  position:sticky;
  top:92px;
}

.status-card{
  grid-area:status;
  position:sticky;
  top:540px;
}

/* Current typography tuning kept intentionally compact. */
.reader-scroll p,
.reader-scroll li{
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.6;
}

.hero-copy h1{
  font-size:clamp(32px,4vw,52px);
  line-height:1;
  letter-spacing:-2px;
}

/* --- Real cover + interaction ---------------------------- */

.cover-button{
  appearance:none;
  position:relative;
  display:block;
  width:100%;
  max-width:210px;
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#fff;
  text-align:left;
  overflow:hidden;
  box-shadow:0 18px 34px rgba(0,0,0,.35);
}

.book-cover{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  transition:transform .25s ease,filter .25s ease;
}

.cover-button:hover .book-cover{
  transform:scale(1.025);
  filter:brightness(.78);
}

.cover-zoom{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translate(-50%,8px);
  opacity:0;
  white-space:nowrap;
  padding:8px 11px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(3,9,9,.78);
  backdrop-filter:blur(8px);
  font-size:12px;
  transition:opacity .2s ease,transform .2s ease;
}

.cover-button:hover .cover-zoom,
.cover-button:focus-visible .cover-zoom{
  opacity:1;
  transform:translate(-50%,0);
}

/* --- Lightbox -------------------------------------------- */

body.lightbox-open{
  overflow:hidden;
}

.cover-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  visibility:hidden;
  opacity:0;
  background:rgba(1,5,5,.88);
  backdrop-filter:blur(18px);
  transition:opacity .2s ease,visibility .2s ease;
}

.cover-lightbox.open{
  visibility:visible;
  opacity:1;
}

.lightbox-stage{
  max-width:min(92vw,780px);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.lightbox-image{
  display:block;
  max-width:min(88vw,720px);
  max-height:82vh;
  width:auto;
  height:auto;
  border-radius:8px;
  box-shadow:0 30px 90px rgba(0,0,0,.7);
}

.lightbox-caption{
  color:#dce7e3;
  font-size:13px;
  text-align:center;
}

.lightbox-close{
  position:fixed;
  top:20px;
  right:24px;
  width:44px;
  height:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:50%;
  background:rgba(7,15,14,.78);
  color:#fff;
  font-size:30px;
  line-height:1;
}

/* --- Narrator image -------------------------------------- */

.narrator-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(170px,230px);
  gap:28px;
  align-items:end;
}

.narrator-image{
  display:block;
  width:100%;
  max-width:230px;
  height:auto;
  margin-left:auto;
  object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(32,216,212,.42));
}

/* --- Responsive ------------------------------------------ */

@media(max-width:1180px){
  .workspace-grid{
    grid-template-columns:minmax(0,1fr) 225px;
    grid-template-areas:
      "reader nav"
      "reader status";
  }

  .status-card{
    grid-column:auto;
    position:sticky;
    top:530px;
  }

  .status-body{
    display:block;
  }

  .status-body .status-title{
    grid-column:auto;
  }
}

@media(max-width:900px){
  .workspace-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "nav"
      "reader"
      "status";
  }

  .section-nav{
    position:relative;
    top:auto;
  }

  .status-card{
    position:relative;
    top:auto;
  }
}

@media(max-width:640px){
  .hero-copy h1{
    font-size:32px;
    letter-spacing:-1px;
  }

  .cover-lightbox{
    padding:18px;
  }

  .narrator-layout{
    grid-template-columns:1fr;
  }

  .narrator-image{
    max-width:200px;
    margin:0 auto;
  }
}

/* ANIBASE — subtle navigation transitions */

/*
  Book changes:
  - title / hero moves very slightly
  - reader and right rail fade
  - hero palette keeps its existing CSS transition
*/
.book-hero,
.reader,
.section-nav,
.status-card{
  transition:
    opacity .18s ease,
    transform .18s ease,
    filter .18s ease,
    background .45s ease;
  will-change:opacity,transform;
}

.workspace.book-transition-out .book-hero{
  opacity:.58;
  transform:translateY(3px);
}

.workspace.book-transition-out .reader,
.workspace.book-transition-out .section-nav,
.workspace.book-transition-out .status-card{
  opacity:.20;
  transform:translateY(5px);
}

.workspace.book-transition-in .book-hero,
.workspace.book-transition-in .reader,
.workspace.book-transition-in .section-nav,
.workspace.book-transition-in .status-card{
  opacity:0;
  transform:translateY(5px);
}

/*
  Section changes are intentionally faster than book changes.
  Only the reader animates; the persistent navigation/status rail
  remains stable.
*/
.reader.section-transition-out{
  opacity:.30;
  transform:translateY(3px);
}

.reader.section-transition-in{
  opacity:0;
  transform:translateY(3px);
}

/*
  Cover image itself gets a short appearance animation after its
  DOM node is replaced on book change.
*/
.book-cover,
.narrator-image{
  animation:anibaseMediaIn .28s ease both;
}

@keyframes anibaseMediaIn{
  from{
    opacity:0;
    transform:scale(.985);
  }
  to{
    opacity:1;
    transform:scale(1);
  }
}

/* Respect OS accessibility settings. */
@media(prefers-reduced-motion:reduce){
  .book-hero,
  .reader,
  .section-nav,
  .status-card,
  .book-cover,
  .narrator-image{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}

/* ANIBASE — Explore Database */

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.explore-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid rgba(131,255,20,.25);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(131,255,20,.055),transparent),
    #081413;
  color:#eaf3ef;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}

.explore-btn:hover{
  border-color:rgba(131,255,20,.58);
  background:#0c201d;
  transform:translateY(-1px);
}

.explore-btn-icon{
  color:var(--acid);
  font-size:17px;
  line-height:1;
}

body.explorer-open{
  overflow:hidden;
}

.database-explorer{
  position:fixed;
  inset:0;
  z-index:950;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease,visibility .2s ease;
}

.database-explorer.open{
  visibility:visible;
  opacity:1;
}

.explorer-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,6,.82);
  backdrop-filter:blur(16px);
}

.explorer-panel{
  position:absolute;
  inset:clamp(18px,3vw,40px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:28px;
  background:
    radial-gradient(circle at 100% 0,rgba(131,255,20,.055),transparent 28%),
    radial-gradient(circle at 0 0,rgba(32,216,212,.08),transparent 32%),
    #07100f;
  box-shadow:0 40px 120px rgba(0,0,0,.65);
  transform:translateY(10px) scale(.992);
  transition:transform .22s ease;
}

.database-explorer.open .explorer-panel{
  transform:translateY(0) scale(1);
}

.explorer-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:24px clamp(20px,3vw,34px) 18px;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.explorer-header h2{
  margin:6px 0 0;
  font-size:clamp(28px,3.2vw,46px);
  line-height:1;
  letter-spacing:-1.5px;
}

.explorer-subtitle{
  margin:9px 0 0;
  color:#91a7a2;
  font-size:13px;
}

.explorer-close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:#0a1715;
  color:#fff;
  font-size:28px;
  line-height:1;
}

.explorer-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:16px clamp(20px,3vw,34px);
  border-bottom:1px solid rgba(255,255,255,.055);
}

.explorer-search{
  min-width:min(360px,38vw);
}

.explorer-search input{
  width:100%;
  outline:none;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:#040b0a;
  color:#fff;
  padding:11px 13px;
}

.explorer-search input:focus{
  border-color:rgba(32,216,212,.55);
  box-shadow:0 0 0 3px rgba(32,216,212,.07);
}

.explorer-filters{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  justify-content:flex-end;
}

.explorer-filters button{
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:6px 15px;
  background:#0a1514;
  color:#9fb0ac;
  font-size:15px;
}

.explorer-filters button:hover{
  color:#fff;
  border-color:rgba(255,255,255,.18);
}

.explorer-filters button.active{
  color:#0a120f;
  background:var(--acid);
  border-color:var(--acid);
  font-weight:700;
}

.explorer-summary{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px clamp(20px,3vw,34px) 2px;
  color:#78908a;
  font-size:11px;
  font-family:Orbitron,sans-serif;
  letter-spacing:.5px;
}

.explorer-grid{
  min-height:0;
  flex:1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(145px,1fr));
  align-content:start;
  gap:20px;
  overflow-y:auto;
  padding:18px clamp(20px,3vw,34px) 34px;
  scrollbar-gutter:stable;
}

.explorer-grid::-webkit-scrollbar{
  width:9px;
}

.explorer-grid::-webkit-scrollbar-track{
  background:#050c0b;
}

.explorer-grid::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
}

.explorer-card{
  min-width:0;
  border:0;
  padding:0;
  background:transparent;
  color:#fff;
  text-align:left;
}

.explorer-cover-wrap{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px;
  background:#091412;
  box-shadow:0 15px 30px rgba(0,0,0,.28);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.explorer-cover{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s ease,filter .25s ease;
}

.explorer-card:hover .explorer-cover-wrap{
  transform:translateY(-4px);
  border-color:rgba(131,255,20,.42);
  box-shadow:0 22px 42px rgba(0,0,0,.42);
}

.explorer-card:hover .explorer-cover{
  transform:scale(1.025);
}

.explorer-card.active .explorer-cover-wrap{
  border-color:var(--acid);
  box-shadow:0 0 0 2px rgba(131,255,20,.11),0 20px 40px rgba(0,0,0,.35);
}

.explorer-code{
  position:absolute;
  top:9px;
  left:9px;
  min-width:30px;
  padding:5px 7px;
  border-radius:7px;
  background:rgba(3,8,8,.82);
  color:var(--acid);
  font:700 10px/1 Orbitron,sans-serif;
  text-align:center;
  backdrop-filter:blur(8px);
}

.explorer-current{
  position:absolute;
  right:8px;
  bottom:8px;
  padding:5px 7px;
  border-radius:999px;
  background:var(--acid);
  color:#07100f;
  font:700 11px/1 Orbitron,sans-serif;
  text-transform:uppercase;
}

.explorer-card-copy{
  padding:10px 3px 0;
}

.explorer-series{
  color:#6f8d86;
  font:700 9px/1 Orbitron,sans-serif;
  letter-spacing:1px;
  text-transform:uppercase;
}

.explorer-title{
  margin-top:5px;
  color:#f4f7f5;
  font-weight:600;
  font-size:14px;
  line-height:1.25;
}

.explorer-narrator{
  margin-top:4px;
  color:#829690;
  font-size:11px;
}

.explorer-empty{
  grid-column:1/-1;
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#7e918c;
  text-align:center;
}

.explorer-empty-mark{
  margin-bottom:10px;
  color:var(--acid);
  font:700 38px Orbitron,sans-serif;
}

.explorer-empty strong{
  color:#eaf0ed;
  margin-bottom:5px;
}

@media(max-width:900px){
  .top-actions{
    gap:7px;
  }

  .explore-btn{
    padding:9px 11px;
  }

  .explore-btn span:last-child{
    display:none;
  }

  .explorer-panel{
    inset:10px;
    border-radius:22px;
  }

  .explorer-tools{
    align-items:stretch;
    flex-direction:column;
  }

  .explorer-search{
    min-width:0;
    width:100%;
  }

  .explorer-filters{
    justify-content:flex-start;
  }

  .explorer-grid{
    grid-template-columns:repeat(auto-fill,minmax(125px,1fr));
    gap:15px;
  }
}

@media(max-width:520px){
  .explorer-header{
    padding:18px 16px 14px;
  }

  .explorer-header h2{
    font-size:29px;
  }

  .explorer-subtitle{
    display:none;
  }

  .explorer-tools{
    padding:13px 16px;
  }

  .explorer-summary{
    padding:10px 16px 0;
  }

  .explorer-summary span:last-child{
    display:none;
  }

  .explorer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:14px 16px 24px;
  }
}

@media(prefers-reduced-motion:reduce){
  .database-explorer,
  .explorer-panel,
  .explorer-cover-wrap,
  .explorer-cover,
  .explore-btn{
    transition:none!important;
    transform:none!important;
  }
}

/* ANIBASE — Global Search */

.global-search-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid rgba(32,216,212,.25);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(32,216,212,.05),transparent),
    #081413;
  color:#eaf3ef;
  box-shadow:0 8px 24px rgba(0,0,0,.16);
  transition:border-color .2s ease,background .2s ease,transform .2s ease;
}

.global-search-btn:hover{
  border-color:rgba(32,216,212,.58);
  background:#0c201d;
  transform:translateY(-1px);
}

.global-search-icon{
  color:var(--cyan);
  font-size:18px;
  line-height:1;
}

body.global-search-open{
  overflow:hidden;
}

.global-search-panel{
  position:fixed;
  inset:0;
  z-index:980;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease,visibility .2s ease;
}

.global-search-panel.open{
  visibility:visible;
  opacity:1;
}

.global-search-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,6,.84);
  backdrop-filter:blur(16px);
}

.global-search-dialog{
  position:absolute;
  top:clamp(28px,7vh,80px);
  left:50%;
  width:min(920px,calc(100vw - 30px));
  max-height:calc(100vh - clamp(56px,14vh,160px));
  transform:translate(-50%,12px) scale(.993);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:
    radial-gradient(circle at 0 0,rgba(32,216,212,.08),transparent 28%),
    radial-gradient(circle at 100% 0,rgba(131,255,20,.04),transparent 25%),
    #07100f;
  box-shadow:0 40px 120px rgba(0,0,0,.68);
  transition:transform .22s ease;
}

.global-search-panel.open .global-search-dialog{
  transform:translate(-50%,0) scale(1);
}

.global-search-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:22px;
  padding:23px 26px 17px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.global-search-header h2{
  margin:6px 0 0;
  font-size:clamp(28px,3.1vw,43px);
  line-height:1;
  letter-spacing:-1.3px;
}

.global-search-subtitle{
  margin:8px 0 0;
  color:#8ba09b;
  font-size:13px;
}

.global-search-close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:#0a1715;
  color:#fff;
  font-size:28px;
  line-height:1;
}

.global-search-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  margin:18px 26px 9px;
}

.global-search-input-wrap input{
  width:100%;
  height:58px;
  padding:0 74px 0 48px;
  outline:none;
  border:1px solid rgba(32,216,212,.22);
  border-radius:16px;
  background:#040b0a;
  color:#fff;
  font-size:17px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}

.global-search-input-wrap input:focus{
  border-color:rgba(32,216,212,.65);
  box-shadow:0 0 0 3px rgba(32,216,212,.07);
}

.global-search-input-icon{
  position:absolute;
  left:17px;
  z-index:2;
  color:var(--cyan);
  font-size:22px;
}

.global-search-input-wrap kbd{
  position:absolute;
  right:14px;
  padding:5px 7px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:6px;
  background:#0b1514;
  color:#71847f;
  font:500 9px Orbitron,sans-serif;
}

.global-search-meta{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:0 28px 12px;
  color:#70847f;
  font-size:16px;
}

.global-search-results{
  min-height:260px;
  overflow-y:auto;
  padding:3px 18px 22px;
  scrollbar-gutter:stable;
}

.global-search-results::-webkit-scrollbar{
  width:8px;
}

.global-search-results::-webkit-scrollbar-track{
  background:#050c0b;
}

.global-search-results::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
}

.global-search-result{
  width:100%;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 28px;
  gap:15px;
  align-items:center;
  padding:13px 10px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:transparent;
  color:#fff;
  text-align:left;
  transition:background .16s ease,transform .16s ease;
}

.global-search-result:hover{
  background:
    linear-gradient(90deg,rgba(32,216,212,.08),rgba(131,255,20,.025));
  transform:translateX(2px);
}

.global-search-cover-wrap{
  width:54px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:#0a1514;
}

.global-search-cover{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.global-search-result-copy{
  min-width:0;
}

.global-search-result-topline{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
}

.global-search-book-code{
  flex:0 0 auto;
  color:var(--acid);
  font:700 9px Orbitron,sans-serif;
}

.global-search-book-title{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
  font-weight:600;
}

.global-search-section{
  margin-top:3px;
  color:var(--cyan);
  font:700 9px Orbitron,sans-serif;
  letter-spacing:.7px;
  text-transform:uppercase;
}

.global-search-snippet{
  margin-top:6px;
  color:#a8b8b4;
  font-size:12px;
  line-height:1.45;
}

.global-search-snippet mark,
.global-search-book-title mark{
  padding:0 2px;
  border-radius:3px;
  background:rgba(131,255,20,.16);
  color:#d9ffb7;
}

.global-search-arrow{
  color:#4f6862;
  font-size:20px;
  transition:color .16s ease,transform .16s ease;
}

.global-search-result:hover .global-search-arrow{
  color:var(--acid);
  transform:translateX(2px);
}

.global-search-intro,
.global-search-empty{
  min-height:290px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#748983;
}

.global-search-intro-mark,
.global-search-empty-mark{
  margin-bottom:12px;
  color:var(--cyan);
  font:700 40px Orbitron,sans-serif;
}

.global-search-intro strong,
.global-search-empty strong{
  margin-bottom:6px;
  color:#eef4f1;
  font-size:16px;
}

@media(max-width:900px){
  .global-search-btn{
    padding:9px 11px;
  }

  .global-search-btn span:last-child{
    display:none;
  }
}

@media(max-width:600px){
  .global-search-dialog{
    top:10px;
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    border-radius:20px;
  }

  .global-search-header{
    padding:18px 17px 13px;
  }

  .global-search-subtitle{
    display:none;
  }

  .global-search-input-wrap{
    margin:14px 15px 8px;
  }

  .global-search-meta{
    padding:0 17px 10px;
  }

  .global-search-meta span:last-child{
    display:none;
  }

  .global-search-results{
    padding:2px 8px 16px;
  }

  .global-search-result{
    grid-template-columns:44px minmax(0,1fr) 20px;
    gap:11px;
    padding:11px 8px;
  }

  .global-search-cover-wrap{
    width:44px;
  }

  .global-search-snippet{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
}

@media(prefers-reduced-motion:reduce){
  .global-search-panel,
  .global-search-dialog,
  .global-search-btn,
  .global-search-result,
  .global-search-arrow{
    transition:none!important;
    transform:none!important;
  }
}

/* ANIBASE — Deep links / direct URLs */

.copy-link-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:#081413;
  color:#dce7e3;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.copy-link-btn:hover{
  border-color:rgba(131,255,20,.34);
  background:#0c201d;
  transform:translateY(-1px);
}

.copy-link-icon{
  color:var(--acid);
  font-size:15px;
  line-height:1;
}

.deep-link-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:1100;
  transform:translate(-50%,12px);
  opacity:0;
  pointer-events:none;
  padding:10px 14px;
  border:1px solid rgba(131,255,20,.22);
  border-radius:999px;
  background:rgba(5,14,13,.92);
  color:#eef6f2;
  box-shadow:0 18px 50px rgba(0,0,0,.42);
  backdrop-filter:blur(12px);
  font-size:12px;
  transition:opacity .18s ease,transform .18s ease;
}

.deep-link-toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

@media(max-width:900px){
  .copy-link-btn{
    padding:9px 11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .copy-link-btn,
  .deep-link-toast{
    transition:none!important;
    transform:none!important;
  }
}

/* ANIBASE — Morph Database */

.morph-db-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid rgba(131,255,20,.2);
  border-radius:999px;
  background:#081413;
  color:#eaf3ef;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.morph-db-btn:hover{
  border-color:rgba(131,255,20,.5);
  background:#0c201d;
  transform:translateY(-1px);
}

.morph-db-icon{
  color:var(--acid);
  font-size:17px;
  line-height:1;
}

body.morph-db-open{
  overflow:hidden;
}

.morph-database-panel{
  position:fixed;
  inset:0;
  z-index:990;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease,visibility .2s ease;
}

.morph-database-panel.open{
  visibility:visible;
  opacity:1;
}

.morph-db-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,6,.84);
  backdrop-filter:blur(16px);
}

.morph-db-dialog{
  position:absolute;
  top:clamp(24px,5vh,60px);
  left:50%;
  width:min(1050px,calc(100vw - 30px));
  max-height:calc(100vh - clamp(48px,10vh,120px));
  transform:translate(-50%,12px) scale(.993);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:
    radial-gradient(circle at 100% 0,rgba(131,255,20,.055),transparent 28%),
    radial-gradient(circle at 0 0,rgba(32,216,212,.07),transparent 30%),
    #07100f;
  box-shadow:0 40px 120px rgba(0,0,0,.68);
  transition:transform .22s ease;
}

.morph-database-panel.open .morph-db-dialog{
  transform:translate(-50%,0) scale(1);
}

.morph-db-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:23px 26px 17px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.morph-db-header h2{
  margin:6px 0 0;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;
  letter-spacing:-1.3px;
}

.morph-db-subtitle{
  margin:8px 0 0;
  color:#8ba09b;
  font-size:13px;
}

.morph-db-close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:#0a1715;
  color:#fff;
  font-size:28px;
  line-height:1;
}

.morph-db-tools{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:16px 26px;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.morph-db-search{
  flex:0 0 min(320px,34vw);
}

.morph-db-search input{
  width:100%;
  outline:none;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:#040b0a;
  color:#fff;
  padding:11px 13px;
}

.morph-db-search input:focus{
  border-color:rgba(131,255,20,.5);
  box-shadow:0 0 0 3px rgba(131,255,20,.055);
}

.morph-db-filters{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:7px;
}

.morph-db-filters button{
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  padding:6px 15px;
  background:#0a1514;
  color:#9fb0ac;
  font-size:15px;
}

.morph-db-filters button.active{
  color:#07100f;
  background:var(--acid);
  border-color:var(--acid);
  font-weight:700;
}

.morph-db-summary{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 28px 6px;
  color:#70847f;
  font-size:11px;
  font-family:Orbitron,sans-serif;
}

.morph-db-results{
  min-height:280px;
  overflow-y:auto;
  padding:0 18px 24px;
  scrollbar-gutter:stable;
}

.morph-db-results::-webkit-scrollbar{
  width:8px;
}

.morph-db-results::-webkit-scrollbar-track{
  background:#050c0b;
}

.morph-db-results::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
}

.morph-db-result{
  width:100%;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 28px;
  gap:14px;
  align-items:center;
  padding:13px 10px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:transparent;
  color:#fff;
  text-align:left;
  transition:background .16s ease,transform .16s ease;
}

.morph-db-result:hover{
  background:
    linear-gradient(90deg,rgba(131,255,20,.07),rgba(32,216,212,.025));
  transform:translateX(2px);
}

.morph-db-cover-wrap{
  width:52px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:#0a1514;
}

.morph-db-cover{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.morph-db-copy{
  min-width:0;
}

.morph-db-topline{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:8px;
}

.morph-db-character{
  color:var(--acid);
  font:700 11px Orbitron,sans-serif;
  text-transform:uppercase;
}

.morph-db-book{
  color:#708984;
  font-size:13px;
}

.morph-db-text{
  margin-top:6px;
  color:#c2ceca;
  font-size:15px;
  line-height:1.48;
}

.morph-db-text mark{
  padding:0 2px;
  border-radius:3px;
  background:rgba(131,255,20,.16);
  color:#dcffbc;
}

.morph-db-arrow{
  color:#516963;
  font-size:20px;
}

.morph-db-result:hover .morph-db-arrow{
  color:var(--acid);
}

.morph-db-empty{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#748983;
}

.morph-db-empty-mark{
  margin-bottom:12px;
  color:var(--acid);
  font:700 38px Orbitron,sans-serif;
}

.morph-db-empty strong{
  margin-bottom:6px;
  color:#eef4f1;
}

@media(max-width:900px){
  .morph-db-btn{
    padding:9px 11px;
  }

  .morph-db-btn span:last-child{
    display:none;
  }

  .morph-db-tools{
    flex-direction:column;
    align-items:stretch;
  }

  .morph-db-search{
    flex-basis:auto;
    width:100%;
  }

  .morph-db-filters{
    justify-content:flex-start;
  }
}

@media(max-width:600px){
  .morph-db-dialog{
    top:10px;
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    border-radius:20px;
  }

  .morph-db-header{
    padding:18px 17px 13px;
  }

  .morph-db-subtitle{
    display:none;
  }

  .morph-db-tools{
    padding:13px 15px;
  }

  .morph-db-summary{
    padding:9px 17px 5px;
  }

  .morph-db-summary span:last-child{
    display:none;
  }

  .morph-db-results{
    padding:0 8px 16px;
  }

  .morph-db-result{
    grid-template-columns:44px minmax(0,1fr) 20px;
    gap:10px;
    padding:11px 8px;
  }

  .morph-db-cover-wrap{
    width:44px;
  }
}

@media(prefers-reduced-motion:reduce){
  .morph-database-panel,
  .morph-db-dialog,
  .morph-db-btn,
  .morph-db-result{
    transition:none!important;
    transform:none!important;
  }
}

/* ANIBASE — Character Database */

.character-db-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid rgba(32,216,212,.18);
  border-radius:999px;
  background:#081413;
  color:#eaf3ef;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.character-db-btn:hover{
  border-color:rgba(32,216,212,.52);
  background:#0c201d;
  transform:translateY(-1px);
}

.character-db-icon{
  color:var(--cyan);
  font-size:17px;
  line-height:1;
}

body.character-db-open{
  overflow:hidden;
}

.character-database-panel{
  position:fixed;
  inset:0;
  z-index:995;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease,visibility .2s ease;
}

.character-database-panel.open{
  visibility:visible;
  opacity:1;
}

.character-db-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,6,.84);
  backdrop-filter:blur(16px);
}

.character-db-dialog{
  position:absolute;
  top:clamp(24px,5vh,60px);
  left:50%;
  width:min(1050px,calc(100vw - 30px));
  max-height:calc(100vh - clamp(48px,10vh,120px));
  transform:translate(-50%,12px) scale(.993);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:
    radial-gradient(circle at 0 0,rgba(32,216,212,.075),transparent 29%),
    radial-gradient(circle at 100% 0,rgba(131,255,20,.04),transparent 26%),
    #07100f;
  box-shadow:0 40px 120px rgba(0,0,0,.68);
  transition:transform .22s ease;
}

.character-database-panel.open .character-db-dialog{
  transform:translate(-50%,0) scale(1);
}

.character-db-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:23px 26px 17px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.character-db-header h2{
  margin:6px 0 0;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;
  letter-spacing:-1.3px;
}

.character-db-subtitle{
  margin:8px 0 0;
  color:#8ba09b;
  font-size:13px;
}

.character-db-close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:#0a1715;
  color:#fff;
  font-size:28px;
  line-height:1;
}

.character-db-tools{
  padding:16px 26px;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.character-db-search{
  display:block;
  width:min(430px,100%);
}

.character-db-search input{
  width:100%;
  outline:none;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:#040b0a;
  color:#fff;
  padding:11px 13px;
}

.character-db-search input:focus{
  border-color:rgba(32,216,212,.5);
  box-shadow:0 0 0 3px rgba(32,216,212,.055);
}

.character-db-summary{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 28px 6px;
  color:#70847f;
  font-size:11px;
  font-family:Orbitron,sans-serif;
}

.character-db-results{
  min-height:280px;
  overflow-y:auto;
  padding:0 18px 24px;
  scrollbar-gutter:stable;
}

.character-db-results::-webkit-scrollbar{
  width:8px;
}

.character-db-results::-webkit-scrollbar-track{
  background:#050c0b;
}

.character-db-results::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
}

.character-db-result{
  width:100%;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 28px;
  gap:14px;
  align-items:center;
  padding:13px 10px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:transparent;
  color:#fff;
  text-align:left;
  transition:background .16s ease,transform .16s ease;
}

.character-db-result:hover{
  background:
    linear-gradient(90deg,rgba(32,216,212,.075),rgba(131,255,20,.02));
  transform:translateX(2px);
}

.character-db-cover-wrap{
  width:52px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:#0a1514;
}

.character-db-cover{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.character-db-copy{
  min-width:0;
}

.character-db-topline{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
}

.character-db-book-code{
  color:var(--acid);
  font:700 9px Orbitron,sans-serif;
}

.character-db-book-title{
  color:#eef4f1;
  font-size:16px;
  font-weight:600;
}

.character-db-section{
  margin-top:3px;
  color:var(--cyan);
  font:700 11px Orbitron,sans-serif;
  letter-spacing:.7px;
}

.character-db-text{
  margin-top:7px;
  color:#c2ceca;
  font-size:15px;
  line-height:1.5;
}

.character-db-text mark{
  padding:0 2px;
  border-radius:3px;
  background:rgba(32,216,212,.16);
  color:#bffaf7;
}

.character-db-arrow{
  color:#516963;
  font-size:20px;
}

.character-db-result:hover .character-db-arrow{
  color:var(--cyan);
}

.character-db-empty{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#748983;
}

.character-db-empty-mark{
  margin-bottom:12px;
  color:var(--cyan);
  font:700 38px Orbitron,sans-serif;
}

.character-db-empty strong{
  margin-bottom:6px;
  color:#eef4f1;
}

@media(max-width:900px){
  .character-db-btn{
    padding:9px 11px;
  }

  .character-db-btn span:last-child{
    display:none;
  }
}

@media(max-width:600px){
  .character-db-dialog{
    top:10px;
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    border-radius:20px;
  }

  .character-db-header{
    padding:18px 17px 13px;
  }

  .character-db-subtitle{
    display:none;
  }

  .character-db-tools{
    padding:13px 15px;
  }

  .character-db-summary{
    padding:9px 17px 5px;
  }

  .character-db-summary span:last-child{
    display:none;
  }

  .character-db-results{
    padding:0 8px 16px;
  }

  .character-db-result{
    grid-template-columns:44px minmax(0,1fr) 20px;
    gap:10px;
    padding:11px 8px;
  }

  .character-db-cover-wrap{
    width:44px;
  }
}

@media(prefers-reduced-motion:reduce){
  .character-database-panel,
  .character-db-dialog,
  .character-db-btn,
  .character-db-result{
    transition:none!important;
    transform:none!important;
  }
}

/* ANIBASE — Alien Database */

.alien-db-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid rgba(131,255,20,.18);
  border-radius:999px;
  background:#081413;
  color:#eaf3ef;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.alien-db-btn:hover{
  border-color:rgba(131,255,20,.5);
  background:#0c201d;
  transform:translateY(-1px);
}

.alien-db-icon{
  color:var(--acid);
  font-size:16px;
  line-height:1;
}

body.alien-db-open{
  overflow:hidden;
}

.alien-database-panel{
  position:fixed;
  inset:0;
  z-index:996;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease,visibility .2s ease;
}

.alien-database-panel.open{
  visibility:visible;
  opacity:1;
}

.alien-db-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,6,.84);
  backdrop-filter:blur(16px);
}

.alien-db-dialog{
  position:absolute;
  top:clamp(24px,5vh,60px);
  left:50%;
  width:min(1050px,calc(100vw - 30px));
  max-height:calc(100vh - clamp(48px,10vh,120px));
  transform:translate(-50%,12px) scale(.993);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:
    radial-gradient(circle at 100% 0,rgba(131,255,20,.06),transparent 30%),
    radial-gradient(circle at 0 0,rgba(32,216,212,.055),transparent 28%),
    #07100f;
  box-shadow:0 40px 120px rgba(0,0,0,.68);
  transition:transform .22s ease;
}

.alien-database-panel.open .alien-db-dialog{
  transform:translate(-50%,0) scale(1);
}

.alien-db-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:23px 26px 17px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.alien-db-header h2{
  margin:6px 0 0;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;
  letter-spacing:-1.3px;
}

.alien-db-subtitle{
  margin:8px 0 0;
  color:#8ba09b;
  font-size:13px;
}

.alien-db-close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:#0a1715;
  color:#fff;
  font-size:28px;
  line-height:1;
}

.alien-db-tools{
  padding:16px 26px;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.alien-db-search{
  display:block;
  width:min(430px,100%);
}

.alien-db-search input{
  width:100%;
  outline:none;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:#040b0a;
  color:#fff;
  padding:11px 13px;
}

.alien-db-search input:focus{
  border-color:rgba(131,255,20,.5);
  box-shadow:0 0 0 3px rgba(131,255,20,.055);
}

.alien-db-summary{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 28px 6px;
  color:#70847f;
  font-size:11px;
  font-family:Orbitron,sans-serif;
}

.alien-db-results{
  min-height:280px;
  overflow-y:auto;
  padding:0 18px 24px;
  scrollbar-gutter:stable;
}

.alien-db-results::-webkit-scrollbar{
  width:8px;
}

.alien-db-results::-webkit-scrollbar-track{
  background:#050c0b;
}

.alien-db-results::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
}

.alien-db-result{
  width:100%;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 28px;
  gap:14px;
  align-items:center;
  padding:13px 10px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:transparent;
  color:#fff;
  text-align:left;
  transition:background .16s ease,transform .16s ease;
}

.alien-db-result:hover{
  background:
    linear-gradient(90deg,rgba(131,255,20,.07),rgba(32,216,212,.02));
  transform:translateX(2px);
}

.alien-db-cover-wrap{
  width:52px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:#0a1514;
}

.alien-db-cover{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.alien-db-copy{
  min-width:0;
}

.alien-db-topline{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
}

.alien-db-book-code{
  color:var(--cyan);
  font:700 9px Orbitron,sans-serif;
}

.alien-db-book-title{
  color:#eef4f1;
  font-size:16px;
  font-weight:600;
}

.alien-db-section{
  margin-top:3px;
  color:var(--acid);
  font:700 11px Orbitron,sans-serif;
  letter-spacing:.7px;
}

.alien-db-text{
  margin-top:7px;
  color:#c2ceca;
  font-size:15px;
  line-height:1.5;
}

.alien-db-text mark{
  padding:0 2px;
  border-radius:3px;
  background:rgba(131,255,20,.16);
  color:#dcffbc;
}

.alien-db-arrow{
  color:#516963;
  font-size:20px;
}

.alien-db-result:hover .alien-db-arrow{
  color:var(--acid);
}

.alien-db-empty{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#748983;
}

.alien-db-empty-mark{
  margin-bottom:12px;
  color:var(--acid);
  font:700 38px Orbitron,sans-serif;
}

.alien-db-empty strong{
  margin-bottom:6px;
  color:#eef4f1;
}

@media(max-width:900px){
  .alien-db-btn{
    padding:9px 11px;
  }

  .alien-db-btn span:last-child{
    display:none;
  }
}

@media(max-width:600px){
  .alien-db-dialog{
    top:10px;
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    border-radius:20px;
  }

  .alien-db-header{
    padding:18px 17px 13px;
  }

  .alien-db-subtitle{
    display:none;
  }

  .alien-db-tools{
    padding:13px 15px;
  }

  .alien-db-summary{
    padding:9px 17px 5px;
  }

  .alien-db-summary span:last-child{
    display:none;
  }

  .alien-db-results{
    padding:0 8px 16px;
  }

  .alien-db-result{
    grid-template-columns:44px minmax(0,1fr) 20px;
    gap:10px;
    padding:11px 8px;
  }

  .alien-db-cover-wrap{
    width:44px;
  }
}

@media(prefers-reduced-motion:reduce){
  .alien-database-panel,
  .alien-db-dialog,
  .alien-db-btn,
  .alien-db-result{
    transition:none!important;
    transform:none!important;
  }
}

/* ANIBASE — Glossary / New Words Database */

.glossary-db-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:9px 14px;
  border:1px solid rgba(32,216,212,.18);
  border-radius:999px;
  background:#081413;
  color:#eaf3ef;
  box-shadow:0 8px 24px rgba(0,0,0,.14);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}

.glossary-db-btn:hover{
  border-color:rgba(32,216,212,.5);
  background:#0c201d;
  transform:translateY(-1px);
}

.glossary-db-icon{
  color:var(--cyan);
  font-size:17px;
  line-height:1;
}

body.glossary-db-open{
  overflow:hidden;
}

.glossary-database-panel{
  position:fixed;
  inset:0;
  z-index:997;
  visibility:hidden;
  opacity:0;
  transition:opacity .2s ease,visibility .2s ease;
}

.glossary-database-panel.open{
  visibility:visible;
  opacity:1;
}

.glossary-db-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,6,.84);
  backdrop-filter:blur(16px);
}

.glossary-db-dialog{
  position:absolute;
  top:clamp(24px,5vh,60px);
  left:50%;
  width:min(1050px,calc(100vw - 30px));
  max-height:calc(100vh - clamp(48px,10vh,120px));
  transform:translate(-50%,12px) scale(.993);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:26px;
  background:
    radial-gradient(circle at 0 0,rgba(32,216,212,.07),transparent 29%),
    radial-gradient(circle at 100% 0,rgba(131,255,20,.035),transparent 25%),
    #07100f;
  box-shadow:0 40px 120px rgba(0,0,0,.68);
  transition:transform .22s ease;
}

.glossary-database-panel.open .glossary-db-dialog{
  transform:translate(-50%,0) scale(1);
}

.glossary-db-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:24px;
  padding:23px 26px 17px;
  border-bottom:1px solid rgba(255,255,255,.065);
}

.glossary-db-header h2{
  margin:6px 0 0;
  font-size:clamp(28px,3.2vw,44px);
  line-height:1;
  letter-spacing:-1.3px;
}

.glossary-db-subtitle{
  margin:8px 0 0;
  color:#8ba09b;
  font-size:13px;
}

.glossary-db-close{
  flex:0 0 auto;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:#0a1715;
  color:#fff;
  font-size:28px;
  line-height:1;
}

.glossary-db-tools{
  padding:16px 26px;
  border-bottom:1px solid rgba(255,255,255,.055);
}

.glossary-db-search{
  display:block;
  width:min(430px,100%);
}

.glossary-db-search input{
  width:100%;
  outline:none;
  border:1px solid rgba(255,255,255,.1);
  border-radius:13px;
  background:#040b0a;
  color:#fff;
  padding:11px 13px;
}

.glossary-db-search input:focus{
  border-color:rgba(32,216,212,.5);
  box-shadow:0 0 0 3px rgba(32,216,212,.055);
}

.glossary-db-summary{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:11px 28px 6px;
  color:#70847f;
  font-size:11px;
  font-family:Orbitron,sans-serif;
}

.glossary-db-results{
  min-height:280px;
  overflow-y:auto;
  padding:0 18px 24px;
  scrollbar-gutter:stable;
}

.glossary-db-results::-webkit-scrollbar{
  width:8px;
}

.glossary-db-results::-webkit-scrollbar-track{
  background:#050c0b;
}

.glossary-db-results::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
}

.glossary-db-result{
  width:100%;
  display:grid;
  grid-template-columns:52px minmax(0,1fr) 28px;
  gap:14px;
  align-items:center;
  padding:13px 10px;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:transparent;
  color:#fff;
  text-align:left;
  transition:background .16s ease,transform .16s ease;
}

.glossary-db-result:hover{
  background:
    linear-gradient(90deg,rgba(32,216,212,.07),rgba(131,255,20,.02));
  transform:translateX(2px);
}

.glossary-db-cover-wrap{
  width:52px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;
  background:#0a1514;
}

.glossary-db-cover{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.glossary-db-copy{
  min-width:0;
}

.glossary-db-topline{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
}

.glossary-db-book-code{
  color:var(--acid);
  font:700 9px Orbitron,sans-serif;
}

.glossary-db-book-title{
  color:#eef4f1;
  font-size:16px;
  font-weight:600;
}

.glossary-db-section{
  margin-top:3px;
  color:var(--cyan);
  font:700 11px Orbitron,sans-serif;
  letter-spacing:.7px;
}

.glossary-db-text{
  margin-top:7px;
  color:#c2ceca;
  font-size:15px;
  line-height:1.5;
}

.glossary-db-text mark{
  padding:0 2px;
  border-radius:3px;
  background:rgba(32,216,212,.16);
  color:#c0fbf8;
}

.glossary-db-arrow{
  color:#516963;
  font-size:20px;
}

.glossary-db-result:hover .glossary-db-arrow{
  color:var(--cyan);
}

.glossary-db-empty{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#748983;
}

.glossary-db-empty-mark{
  margin-bottom:12px;
  color:var(--cyan);
  font:700 38px Orbitron,sans-serif;
}

.glossary-db-empty strong{
  margin-bottom:6px;
  color:#eef4f1;
}

@media(max-width:900px){
  .glossary-db-btn{
    padding:9px 11px;
  }

  .glossary-db-btn span:last-child{
    display:none;
  }
}

@media(max-width:600px){
  .glossary-db-dialog{
    top:10px;
    width:calc(100vw - 20px);
    max-height:calc(100vh - 20px);
    border-radius:20px;
  }

  .glossary-db-header{
    padding:18px 17px 13px;
  }

  .glossary-db-subtitle{
    display:none;
  }

  .glossary-db-tools{
    padding:13px 15px;
  }

  .glossary-db-summary{
    padding:9px 17px 5px;
  }

  .glossary-db-summary span:last-child{
    display:none;
  }

  .glossary-db-results{
    padding:0 8px 16px;
  }

  .glossary-db-result{
    grid-template-columns:44px minmax(0,1fr) 20px;
    gap:10px;
    padding:11px 8px;
  }

  .glossary-db-cover-wrap{
    width:44px;
  }
}

@media(prefers-reduced-motion:reduce){
  .glossary-database-panel,
  .glossary-db-dialog,
  .glossary-db-btn,
  .glossary-db-result{
    transition:none!important;
    transform:none!important;
  }
}

/* ANIBASE — ambient page palette + subtle grid background */

:root{
  --page-book-color-1:#0d3f42;
  --page-book-color-2:#126768;
  --page-book-color-3:#3a4a46;
  --ambient-grid:rgba(255,255,255,.026);
}

/*
  The body now inherits the current book palette.
  Opacity is intentionally very low so the page remains dark and readable.
*/
body{
  position:relative;
  isolation:isolate;

  background:
    /* tiny technical grid */
    linear-gradient(var(--ambient-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--ambient-grid) 1px,transparent 1px),

    /* book-specific ambient light */
    radial-gradient(
      circle at 14% 8%,
      color-mix(in srgb,var(--page-book-color-1) 32%,transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb,var(--page-book-color-2) 24%,transparent),
      transparent 30%
    ),
    radial-gradient(
      circle at 54% 100%,
      color-mix(in srgb,var(--page-book-color-3) 15%,transparent),
      transparent 38%
    ),

    /* permanent dark foundation */
    linear-gradient(180deg,#07100f 0%,#030706 100%);

  background-size:
    34px 34px,
    34px 34px,
    auto,
    auto,
    auto,
    auto;

  background-position:
    0 0,
    0 0,
    center,
    center,
    center,
    center;

  transition:background .55s ease;
}

/*
  Adds a larger secondary technical grid without making the background busy.
  This is separate from the existing .noise texture.
*/
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;

  background:
    linear-gradient(rgba(32,216,212,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,216,212,.022) 1px,transparent 1px);

  background-size:136px 136px;
  opacity:.55;
}

/*
  Very soft color haze behind the application.
  It follows the selected cover colors.
*/
body::after{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-3;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 22% 22%,
      color-mix(in srgb,var(--page-book-color-1) 14%,transparent),
      transparent 32%
    ),
    radial-gradient(
      circle at 80% 18%,
      color-mix(in srgb,var(--page-book-color-2) 9%,transparent),
      transparent 30%
    );

  filter:blur(34px);
  opacity:.8;
  transition:background .55s ease;
}

/*
  Slightly more transparent page surfaces let the ambient color show through,
  without altering the current layout or card hierarchy.
*/
.library,
.section-nav,
.status-card{
  backdrop-filter:blur(10px);
}

.library{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 26%),
    rgba(8,17,16,.91);
}

.section-nav{
  background:rgba(8,18,17,.92);
}

.status-card{
  background:rgba(9,24,23,.92);
}

/*
  Keep the main reader visually stable and more opaque than the side panels.
*/
.reader{
  background:
    radial-gradient(
      circle at 0 0,
      color-mix(in srgb,var(--page-book-color-2) 10%,transparent),
      transparent 30%
    ),
    linear-gradient(180deg,rgba(13,44,41,.96),rgba(8,33,31,.97));
}

/*
  The top bar receives only a very faint trace of the current palette.
*/
.topbar{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--page-book-color-1) 7%,rgba(5,13,12,.92)),
      rgba(5,13,12,.92) 45%,
      color-mix(in srgb,var(--page-book-color-2) 5%,rgba(5,13,12,.92))
    );
  transition:background .55s ease;
}

/* Reduce grid density and visual noise on small screens. */
@media(max-width:640px){
  body{
    background-size:
      28px 28px,
      28px 28px,
      auto,
      auto,
      auto,
      auto;
  }

  body::before{
    background-size:112px 112px;
    opacity:.4;
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  body,
  body::after,
  .topbar{
    transition:none!important;
  }
}

/* =========================================================
   MERGED SOURCE: grid-sci-fi.css
   ========================================================= */

/* =========================================================
   ANIBASE — Optional 90s Sci‑Fi Grid Variant
   This file is intentionally standalone and reversible.
   Load it AFTER styles.css.
   ========================================================= */

/*
  Base grid remains visible, but gains:
  - larger structural cells
  - occasional stronger guide lines
  - subtle cyan/green technical markers
  - a faint central scan-grid feel
*/

body{
  background:
    /* fine grid */
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px),

    /* medium technical grid */
    linear-gradient(rgba(32,216,212,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,216,212,.028) 1px,transparent 1px),

    /* book-specific ambient light */
    radial-gradient(
      circle at 14% 8%,
      color-mix(in srgb,var(--page-book-color-1) 32%,transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at 88% 12%,
      color-mix(in srgb,var(--page-book-color-2) 24%,transparent),
      transparent 30%
    ),
    radial-gradient(
      circle at 54% 100%,
      color-mix(in srgb,var(--page-book-color-3) 15%,transparent),
      transparent 38%
    ),

    linear-gradient(180deg,#07100f 0%,#030706 100%);

  background-size:
    34px 34px,
    34px 34px,
    136px 136px,
    136px 136px,
    auto,
    auto,
    auto,
    auto;

  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    center,
    center,
    center,
    center;
}

/*
  Structural guide lines:
  these are deliberately sparse so the page does not look like graph paper.
*/
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;

  background:
    /* stronger vertical guides */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent calc(272px - 1px),
      rgba(131,255,20,.035) calc(272px - 1px),
      rgba(131,255,20,.035) 272px
    ),

    /* stronger horizontal guides */
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent calc(272px - 1px),
      rgba(32,216,212,.032) calc(272px - 1px),
      rgba(32,216,212,.032) 272px
    );

  opacity:.8;
}

/*
  Technical markers / interrupted lines.
  The gradients create short corner-like segments rather than full lines.
*/
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;

  background:
    /* upper-left marker */
    linear-gradient(90deg,rgba(32,216,212,.12) 0 64px,transparent 64px) 42px 82px / 140px 1px no-repeat,
    linear-gradient(rgba(32,216,212,.12) 0 36px,transparent 36px) 42px 82px / 1px 90px no-repeat,

    /* lower-right marker */
    linear-gradient(90deg,transparent 0 54px,rgba(131,255,20,.10) 54px 120px) calc(100% - 162px) calc(100% - 90px) / 120px 1px no-repeat,
    linear-gradient(transparent 0 28px,rgba(131,255,20,.10) 28px 68px) calc(100% - 42px) calc(100% - 158px) / 1px 68px no-repeat,

    /* subtle ambient color haze */
    radial-gradient(
      circle at 22% 22%,
      color-mix(in srgb,var(--page-book-color-1) 25%,transparent),
      transparent 32%
    ),
    radial-gradient(
      circle at 80% 18%,
      color-mix(in srgb,var(--page-book-color-2) 17%,transparent),
      transparent 30%
    );

  filter:blur(.15px);
  opacity:.9;
}

/*
  Optional tiny "scanline" effect on the page atmosphere only.
  Kept extremely faint.
*/
.noise{
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px);
  background-size:4px 4px,7px 7px;
}

@media(max-width:640px){
  body{
    background-size:
      28px 28px,
      28px 28px,
      112px 112px,
      112px 112px,
      auto,
      auto,
      auto,
      auto;
  }

  body::before{
    opacity:.55;
  }

  body::after{
    opacity:.65;
  }
}

/* =========================================================
   MERGED SOURCE: continuous-book.css
   ========================================================= */

/* =========================================================
   ANIBASE — Continuous book file / anchor navigation
   Load AFTER styles.css and grid-sci-fi.css
   ========================================================= */

:root{
  --reader-book-color-1:var(--page-book-color-1);
  --reader-book-color-2:var(--page-book-color-2);
  --reader-book-color-3:var(--page-book-color-3);
}

/* Main 2-column content + utility rail */
.workspace-grid{
  grid-template-columns:minmax(0,1fr) 250px;
  grid-template-areas:
    "reader nav"
    "reader status";
  gap:18px;
  align-items:start;
}

/* Continuous reader: no internal scroller anymore */
.reader{
  grid-area:reader;
  min-height:0;
  overflow:visible;

  background:
    radial-gradient(
      circle at 12% 0%,
      color-mix(in srgb,var(--page-book-color-1) 58%,transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at 92% 18%,
      color-mix(in srgb,var(--page-book-color-2) 43%,transparent),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--page-book-color-1) 56%,#07100f 44%) 0%,
      color-mix(in srgb,var(--page-book-color-2) 42%,#07100f 58%) 50%,
      color-mix(in srgb,var(--page-book-color-3) 48%,#050b0a 52%) 100%
    );
  transition:background .55s ease,opacity .18s ease,transform .18s ease;
}

.reader::before{
  background:
    linear-gradient(135deg,rgba(255,255,255,.035),transparent 22%),
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px);
  background-size:auto,34px 34px,34px 34px;
  border-radius:inherit;
}

/* The old one-section heading is no longer needed. */
.reader-head{
  display:none;
}

.reader-scroll{
  height:auto;
  max-height:none;
  overflow:visible;
  padding:0;
  scrollbar-gutter:auto;
}

/* Individual sections become the visual hierarchy inside one long file. */
.book-section{
  position:relative;
  padding:clamp(27px,3.3vw,44px) clamp(22px,3.6vw,42px);
  scroll-margin-top:98px;
}

.book-section + .book-section{
  border-top:1px solid rgba(255,255,255,.09);
}

.book-section + .book-section::before{
  content:"";
  position:absolute;
  top:-1px;
  left:clamp(22px,3.6vw,42px);
  width:72px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  opacity:.9;
}

.book-section-header{
  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:24px;
}

.book-section-icon{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--cyan) 26%,transparent);
  border-radius:50%;
  color:var(--cyan);
  background:rgba(3,11,10,.25);
  box-shadow:inset 0 0 22px rgba(32,216,212,.035);
}

.book-section-icon svg{
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.book-section-kicker{
  margin-bottom:5px;
  color:color-mix(in srgb,var(--cyan) 72%,#b9cbc6 28%);
  font:700 10px/1 "News Cycle",sans-serif;
  letter-spacing:1.8px;
  text-transform:uppercase;
}

.book-section h2{
  margin:0;
  font-size:clamp(25px,2.8vw,38px);
  line-height:1.04;
  letter-spacing:-1px;
}

.book-section-content{
  position:relative;
  z-index:1;
}

.book-section-content p,
.book-section-content li{
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.65;
  color:#f2f5f3;
}

.book-section-content p{
  margin:0 0 22px;
}

.book-section-content p:last-child{
  margin-bottom:0;
}

/* The right rail becomes a table of contents. */
.section-nav{
  grid-area:nav;
  position:sticky;
  top:92px;
  overflow:hidden;
  background:rgba(8,18,17,.90);
  backdrop-filter:blur(13px);
}

.section-nav button{
  grid-template-columns:34px minmax(0,1fr);
  gap:7px;
  padding:9px 12px;
  min-height:48px;
}

.section-nav-icon{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#708681;
  transition:color .18s ease,background .18s ease;
}

.section-nav-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.section-nav-label{
  min-width:0;
  color:inherit;
  font-size:12px;
  line-height:1.22;
}

.section-nav button:hover .section-nav-icon{
  color:var(--cyan);
}

.section-nav button.active{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--page-book-color-2) 28%,rgba(32,216,212,.10)),
      rgba(131,255,20,.025)
    );
  box-shadow:inset 3px 0 0 var(--acid);
}

.section-nav button.active .section-nav-icon{
  color:var(--acid);
  background:rgba(131,255,20,.075);
}

.section-nav button.active .section-nav-label{
  color:#fff;
}

/* Status remains immediately below the sticky contents rail. */
.status-card{
  grid-area:status;
  position:sticky;
  top:520px;
}

/* Vital Stats — icon-led information cards */
.stats-grid{
  grid-template-columns:minmax(155px,220px) minmax(0,1fr);
  gap:clamp(24px,3.5vw,40px);
}

.stats-data{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.stat{
  min-height:112px;
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:15px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.042),rgba(0,0,0,.11));
  border-color:rgba(255,255,255,.10);
}

.stat-icon{
  flex:0 0 36px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(3,12,11,.32);
  color:var(--cyan);
  border:1px solid rgba(32,216,212,.14);
}

.stat-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.stat-copy{
  min-width:0;
}

.stat-label{
  margin:1px 0 8px;
  font-size:9px;
}

.stat-value{
  font-size:clamp(12px,1.4vw,15px);
  line-height:1.35;
}

/* Narrator image gets a little more breathing room in continuous mode. */
.narrator-layout{
  align-items:center;
}

.narrator-image{
  max-height:330px;
}

/* Book transition no longer hides a separate section tab panel. */
.reader.section-transition-out,
.reader.section-transition-in{
  opacity:1;
  transform:none;
}

/* Mobile / tablet */
@media(max-width:1180px){
  .workspace-grid{
    grid-template-columns:minmax(0,1fr) 220px;
    grid-template-areas:
      "reader nav"
      "reader status";
  }

  .status-card{
    grid-column:auto;
    position:sticky;
    top:500px;
  }
}

@media(max-width:900px){
  .workspace-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "nav"
      "reader"
      "status";
  }

  .section-nav{
    position:sticky;
    top: 135px;
    z-index:20;
    display:flex;
    overflow-x:auto;
    border-radius:14px;
  }

  .section-nav button{
    min-width:128px;
    display:grid;
    grid-template-columns:28px 1fr;
    text-align:left;
    border-right:1px solid rgba(255,255,255,.055);
    border-bottom:0;
  }

  .section-nav button.active{
    box-shadow:inset 0 -3px 0 var(--acid);
  }

  .section-nav-icon{
    width:27px;
    height:27px;
  }

  .status-card{
    position:relative;
    top:auto;
  }

  .book-section{
    scroll-margin-top:135px;
  }
}

@media(max-width:640px){
  .book-section{
    padding:25px 18px 30px;
  }

  .book-section + .book-section::before{
    left:18px;
  }

  .book-section-header{
    gap:12px;
    margin-bottom:20px;
  }

  .book-section-icon{
    flex-basis:39px;
    width:39px;
    height:39px;
  }

  .stats-grid{
    grid-template-columns:1fr;
  }

  .cover-button{
    max-width:190px;
  }

  .stats-data{
    grid-template-columns:1fr 1fr;
  }

  .stat{
    min-height:104px;
    flex-direction:column;
    gap:9px;
  }

  .stat-icon{
    width:32px;
    height:32px;
    flex-basis:32px;
  }

  .narrator-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:430px){
  .stats-data{
    grid-template-columns:1fr;
  }

  .stat{
    flex-direction:row;
    min-height:0;
  }

  .section-nav button{
    min-width:115px;
  }

  .section-nav-label{
    font-size:11px;
  }
}

@media(prefers-reduced-motion:reduce){
  .reader,
  .section-nav-icon{
    transition:none!important;
  }

  html{
    scroll-behavior:auto;
  }
}

/* =========================================================
   MERGED SOURCE: v4-refinements.css
   ========================================================= */

/* =========================================================
   ANIBASE — V4 refinement patch
   Load AFTER continuous-book.css
   ========================================================= */

/* 1. Central reader: same family of colors as the hero, but restrained.
   We deliberately use translucency rather than a tall full-strength gradient,
   so the section height no longer exaggerates the palette. */
.reader{
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb,var(--page-book-color-1) 18%,rgba(5,13,12,.88)) 0%,
      color-mix(in srgb,var(--page-book-color-2) 14%,rgba(5,13,12,.90)) 52%,
      color-mix(in srgb,var(--page-book-color-3) 12%,rgba(4,10,9,.92)) 100%
    );
  backdrop-filter:blur(12px);
}

/* A very faint local glow keeps the connection to the hero palette
   without making the content panel flashy. */
.reader::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(
      circle at 16% 0%,
      color-mix(in srgb,var(--page-book-color-1) 10%,transparent),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 12%,
      color-mix(in srgb,var(--page-book-color-2) 7%,transparent),
      transparent 28%
    );
  opacity:.8;
}

/* Keep actual content above reader texture layers. */
.reader-scroll{
  position:relative;
  z-index:1;
}

/* 2. Right-hand table of contents:
   match Status Report item typography. */
.section-nav-label{
  font-family:"News Cycle",system-ui,sans-serif;
  font-size:13px;
  font-weight:400;
  line-height:1.3;
  letter-spacing:0;
}

/* Avoid the icon making the row feel visually heavier than Status Report. */
.section-nav button{
  min-height:46px;
}

/* 3. Central section headings use the characteristic Anibase display face. */
.book-section h2{
  font-family:"Orbitron",system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(20px,2.35vw,30px);
  line-height:1.08;
  letter-spacing:-.45px;
}

/* Slightly reduce the kicker so Orbitron heading remains the visual focus. */
.book-section-kicker{
  opacity:.78;
}

/* Keep section icons crisp over the now calmer reader background. */
.book-section-icon{
  background:rgba(3,11,10,.34);
}

/* Mobile keeps the same hierarchy. */
@media(max-width:640px){
  .book-section h2{
    font-size:22px;
    letter-spacing:-.25px;
  }

  .section-nav-label{
    font-size:13px;
  }
}

/* =========================================================
   ANIBASE — Dynamic accent colors from current book cover
   ========================================================= */

/*
 * Petits intertitres :
 * ANIBASE ENTRY, NEW MORPHS, NEW CHARACTERS, etc.
 *
 * On conserve majoritairement la couleur de la couverture,
 * mais on ajoute du blanc pour garantir la lisibilité.
 */
.book-section-kicker{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 68%,
        white 32%
    );
}


/*
 * Pictogrammes des 8 grandes sections.
 * Plus vibrants que les textes.
 */
.book-section-icon{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 82%,
        white 18%
    );

    /* Contour fixe, indépendant de la couverture */
    border: 1px solid rgba(255,255,255,.10);

    background: color-mix(
        in srgb,
        var(--page-book-color-1) 18%,
        rgba(3,11,10,.40)
    );

    filter: drop-shadow(
        0 0 8px
        color-mix(
            in srgb,
            var(--page-book-color-2) 45%,
            transparent
        )
    );
}


/*
 * Labels de Vital Stats :
 * BOOK / LENGTH / RELEASED / COVER ART
 */
.stat-label{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 65%,
        white 35%
    );
}


/*
 * Pictogrammes de Vital Stats.
 */
.stat-icon{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 82%,
        white 18%
    );

    border: 1px solid rgba(255,255,255,.10);

    background: rgba(0,0,0,.12);

    filter: drop-shadow(
        0 0 7px
        color-mix(
            in srgb,
            var(--page-book-color-2) 40%,
            transparent
        )
    );
}


/*
 * On utilise subtilement les trois couleurs de la couverture
 * pour éviter que les 4 blocs Vital Stats soient monochromes.
 */

.stat:nth-child(1) .stat-label,
.stat:nth-child(1) .stat-icon{
    color: color-mix(
        in srgb,
        var(--page-book-color-1) 65%,
        white 35%
    );
}

.stat:nth-child(2) .stat-label,
.stat:nth-child(2) .stat-icon{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 70%,
        white 30%
    );
}

.stat:nth-child(3) .stat-label,
.stat:nth-child(3) .stat-icon{
    color: color-mix(
        in srgb,
        var(--page-book-color-3) 62%,
        white 38%
    );
}

.stat:nth-child(4) .stat-label,
.stat:nth-child(4) .stat-icon{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 65%,
        white 35%
    );
}

/* =========================================================
   ANIBASE — Dynamic right navigation highlight
   ========================================================= */

/*
 * Bouton actif :
 * la couleur néon est calculée depuis la palette du livre.
 */
.section-nav button.active{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 72%,
        white 28%
    );

    border-color: color-mix(
        in srgb,
        var(--page-book-color-2) 65%,
        white 10%
    );

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--page-book-color-1) 30%,
                rgba(3,11,10,.75)
            ),
            color-mix(
                in srgb,
                var(--page-book-color-2) 16%,
                rgba(3,11,10,.55)
            )
        );

    box-shadow:
        inset 3px 0 0
        color-mix(
            in srgb,
            var(--page-book-color-2) 80%,
            white 20%
        ),

        0 0 18px
        color-mix(
            in srgb,
            var(--page-book-color-2) 22%,
            transparent
        );
}


/*
 * L'icône du bouton actif est encore légèrement plus lumineuse.
 */
.section-nav button.active .section-nav-icon{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 78%,
        white 22%
    );

    filter:
        drop-shadow(
            0 0 6px
            color-mix(
                in srgb,
                var(--page-book-color-2) 60%,
                transparent
            )
        );
}


/*
 * Le texte actif reprend la même teinte,
 * mais avec un peu plus de blanc pour rester lisible.
 */
.section-nav button.active .section-nav-label{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 65%,
        white 35%
    );
}


/*
 * Hover des boutons non actifs :
 * très léger rappel de la palette du livre.
 */
.section-nav button:not(.active):hover{
    color: color-mix(
        in srgb,
        var(--page-book-color-2) 55%,
        white 45%
    );

    background:
        color-mix(
            in srgb,
            var(--page-book-color-1) 12%,
            rgba(255,255,255,.025)
        );

    border-color:
        color-mix(
            in srgb,
            var(--page-book-color-2) 28%,
            rgba(255,255,255,.08)
        );
}

/* =========================================================
   ANIBASE — deterministic section anchor positioning
   ========================================================= */

/*
 * Anchor positioning is now calculated in app.js using the actual sticky
 * topbar height. Disable legacy scroll-margin offsets so the browser does
 * not add a second vertical offset.
 */
.book-section{
  scroll-margin-top:0 !important;
}

@media(max-width:900px){
  .book-section{
    scroll-margin-top:0 !important;
  }
}


/* Meta pills — transparentes + couleur dynamique du livre */
.meta-pill{
    background:
        color-mix(
            in srgb,
            var(--page-book-color-1) 18%,
            rgba(5, 12, 11, .55)
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--page-book-color-2) 22%,
            rgba(255,255,255,.08)
        );

    color: rgba(238, 246, 243, .82);

    backdrop-filter: blur(8px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 4px 14px rgba(0,0,0,.08);
}

/* =========================================================
   ANIBASE — top navigation refinement + dynamic accents
   Applied on the user's latest styles.css
   ========================================================= */

/* Dynamic separator between continuous book sections */
.book-section + .book-section::before{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--page-book-color-2) 82%,white 18%),
      color-mix(in srgb,var(--page-book-color-1) 44%,transparent),
      transparent
    );
  box-shadow:
    0 0 10px
    color-mix(in srgb,var(--page-book-color-2) 35%,transparent);
  opacity:1;
}

/* Unified top navigation */
.top-actions{
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

:is(
  .explore-btn,
  .global-search-btn,
  .morph-db-btn,
  .character-db-btn,
  .alien-db-btn,
  .glossary-db-btn,
  .copy-link-btn
){
  min-height:38px;
  padding:6px 12px 8px 12px;
  gap:7px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
    rgba(5,15,14,.58);
  color:rgba(239,246,243,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 5px 16px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  font-size:16px;
  font-weight:500;
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

:is(
  .explore-btn,
  .global-search-btn,
  .morph-db-btn,
  .character-db-btn,
  .alien-db-btn,
  .glossary-db-btn,
  .copy-link-btn
):hover{
  color:#fff;
  border-color:
    color-mix(in srgb,var(--page-book-color-2) 46%,rgba(255,255,255,.14));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--page-book-color-2) 10%,rgba(255,255,255,.035)),
      rgba(5,15,14,.66)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 16px color-mix(in srgb,var(--page-book-color-2) 12%,transparent);
  transform:translateY(-1px);
}

:is(
  .explore-btn-icon,
  .global-search-icon,
  .morph-db-icon,
  .character-db-icon,
  .alien-db-icon,
  .glossary-db-icon,
  .copy-link-icon
){
  color:color-mix(in srgb,var(--page-book-color-2) 72%,white 28%);
}

/* Compact icon-only copy-link control */
.copy-link-btn{
  width:38px;
  padding:0;
  justify-content:center;
}

.copy-link-icon{
  display:grid;
  place-items:center;
}

.copy-link-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.explore-btn,
.global-search-btn,
.morph-db-btn,
.character-db-btn,
.alien-db-btn,
.glossary-db-btn{
  border-color:rgba(255,255,255,.10);
}

/* Calm, subtly book-tinted top bar */
.topbar{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--page-book-color-1) 7%,rgba(5,13,12,.91)),
      rgba(5,13,12,.91) 44%,
      color-mix(in srgb,var(--page-book-color-2) 5%,rgba(5,13,12,.91))
    );
}

@media(max-width:900px){
  :is(
    .explore-btn,
    .global-search-btn,
    .morph-db-btn,
    .character-db-btn,
    .alien-db-btn,
    .glossary-db-btn
  ){
    width:38px;
    padding:0;
    justify-content:center;
  }
}


/* =========================================================
   ANIBASE — 2026-08-21 corrections v2
   ========================================================= */

/* Brand is clickable but visually unchanged. */
.brand{
  cursor:pointer;
  user-select:none;
}
.brand:focus-visible{
  outline:2px solid color-mix(in srgb,var(--cyan) 70%,white 30%);
  outline-offset:7px;
  border-radius:4px;
}

/* Slightly brighter inactive right-column labels. */
.section-nav button:not(.active) .section-nav-label{
  color:#91a6a1;
}
.section-nav button:not(.active):hover .section-nav-label{
  color:#c6d6d2;
}

/*
 * Main window scrollbar.
 * IMPORTANT: the existing .book-list scrollbar rules above are untouched.
 * These values deliberately mirror the ORIGINAL left-column scrollbar.
 */
html::-webkit-scrollbar{
  width:8px;
}
html::-webkit-scrollbar-track{
  background:#07100f;
  border-radius:99px;
}
html::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
}
/* =========================================================
   ANIBASE — Library order selector
   ========================================================= */

/* The library becomes a vertical layout so the new order control can sit
   above the scrollable list without changing the list scrollbar itself. */
.library{
  display:flex;
  flex-direction:column;
}

.library-head,
.search,
.book-sort{
  flex:0 0 auto;
}

.book-list{
  flex:1 1 auto;
  min-height:0;
  height:auto;
}

/* The old bottom "Numerical order" footer is no longer used. */
.library-foot{
  display:none;
}

.book-sort{
  position:relative;
  z-index:12;
  margin:2px 0 10px;
}

.book-sort-trigger{
  width:100%;
  min-height:48px;
  display:grid;
  grid-template-columns:auto 1fr 20px;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent),
    #07100f;
  color:#e6efec;
  text-align:left;
  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}

.book-sort-trigger:hover,
.book-sort.open .book-sort-trigger{
  border-color:color-mix(in srgb,var(--cyan) 48%,transparent);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),transparent),
    #091513;
}

.book-sort.open .book-sort-trigger{
  box-shadow:0 0 0 3px rgba(32,216,212,.06);
}

.book-sort-caption{
  font:700 9px/1 Orbitron,sans-serif;
  letter-spacing:1.25px;
  color:#6f8580;
}

.book-sort-label{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:14px;
  font-weight:700;
  color:#c9d7d3;
}

.book-sort-chevron{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:var(--acid);
  transition:transform .16s ease;
}

.book-sort-chevron svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.book-sort.open .book-sort-chevron{
  transform:rotate(180deg);
}

.book-sort-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:30;
  padding:6px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:13px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),transparent 28%),
    #050b0a;
  box-shadow:
    0 18px 38px rgba(0,0,0,.50),
    0 0 0 1px rgba(0,0,0,.28);
}

.book-sort-menu[hidden]{
  display:none;
}

.book-sort-menu button{
  width:100%;
  position:relative;
  display:block;
  border:0;
  border-radius:8px;
  padding:9px 10px 9px 24px;
  background:transparent;
  color:#9eafaa;
  text-align:left;
  font-size:14px;
  font-weight:700;
}

.book-sort-menu button::before{
  content:"";
  position:absolute;
  left:9px;
  top:50%;
  width:6px;
  height:6px;
  border-radius:50%;
  background:transparent;
  transform:translateY(-50%);
}

.book-sort-menu button:hover,
.book-sort-menu button:focus-visible{
  outline:none;
  background:rgba(255,255,255,.045);
  color:#ecf3f1;
}

.book-sort-menu button.active{
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--cyan) 13%,transparent),
      color-mix(in srgb,var(--acid) 4%,transparent)
    );
  color:var(--acid);
}

.book-sort-menu button.active::before{
  background:var(--acid);
  box-shadow:0 0 9px color-mix(in srgb,var(--acid) 68%,transparent);
}

@media(max-width:900px){
  .book-sort-menu{
    max-height:min(280px,45vh);
    overflow:auto;
  }
}

/* =========================================================
   ANIBASE — refined cover gallery + lightbox
   ========================================================= */

.cover-button{
  cursor:default;
  isolation:isolate;
}

.book-cover{
  transition:
    transform .42s cubic-bezier(.22,.8,.22,1),
    filter .42s ease;
}

.cover-button::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 42%,rgba(0,0,0,.08),rgba(0,0,0,.42) 72%),
    rgba(0,0,0,.18);
  opacity:0;
  transition:opacity .32s ease;
}

.cover-button:hover .book-cover,
.cover-button:focus-within .book-cover{
  transform:scale(1.035);
  filter:brightness(.53) saturate(.86);
}

.cover-button:hover::after,
.cover-button:focus-within::after{
  opacity:1;
}

/* Old single View cover pill is superseded by the gallery actions. */
.cover-zoom{
  display:none !important;
}

.cover-actions{
  position:absolute;
  z-index:2;
  top:50%;
  left:50%;
  width:min(82%,168px);
  display:flex;
  flex-direction:column;
  gap:7px;
  transform:translate(-50%,-44%);
  opacity:0;
  pointer-events:none;
  transition:
    opacity .25s ease,
    transform .32s cubic-bezier(.22,.8,.22,1);
}

.cover-button:hover .cover-actions,
.cover-button:focus-within .cover-actions{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,-50%);
}

.cover-action{
  width:100%;
  min-height:34px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  padding:7px 11px;
  background:rgba(3,9,9,.76);
  color:#eaf2ef;
  box-shadow:
    0 7px 20px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease;
}

.cover-action[hidden]{
  display:none !important;
}

.cover-action:hover,
.cover-action:focus-visible{
  outline:none;
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--acid) 52%,rgba(255,255,255,.2));
  background:rgba(5,15,13,.92);
  color:var(--acid);
}

/* --- Refined lightbox ------------------------------------ */

.cover-lightbox{
  padding:clamp(18px,4vw,48px);
  background:rgba(1,5,5,.10);
  backdrop-filter:blur(0);
  -webkit-backdrop-filter:blur(0);
  transition:
    opacity .30s ease,
    visibility .30s ease,
    background .38s ease,
    backdrop-filter .38s ease;
}

.cover-lightbox.open{
  background:rgba(1,5,5,.90);
  backdrop-filter:blur(20px) saturate(.78);
  -webkit-backdrop-filter:blur(20px) saturate(.78);
}

.cover-lightbox.closing{
  opacity:0;
  background:rgba(1,5,5,.35);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.lightbox-shell{
  position:relative;
  width:min(96vw,1060px);
  height:min(92vh,900px);
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 64px;
  align-items:center;
  gap:18px;
  opacity:0;
  transform:translateY(16px) scale(.985);
  transition:
    opacity .32s ease,
    transform .48s cubic-bezier(.18,.82,.22,1);
}

.cover-lightbox.settled .lightbox-shell{
  opacity:1;
  transform:translateY(0) scale(1);
}

.cover-lightbox.closing .lightbox-shell{
  opacity:0;
  transform:translateY(10px) scale(.99);
  transition-duration:.24s;
}

.lightbox-stage{
  width:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  height:100%;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto auto;
  align-items:center;
  justify-items:center;
  gap:13px;
}

.lightbox-image-frame{
  position:relative;
  min-width:0;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  overflow:visible;
}

.lightbox-image{
  max-width:min(78vw,760px);
  max-height:min(78vh,780px);
  border-radius:7px;
  opacity:0;
  transform:translateY(14px) scale(.965);
  filter:blur(4px);
  box-shadow:
    0 34px 100px rgba(0,0,0,.76),
    0 0 0 1px rgba(255,255,255,.10);
  transition:
    opacity .36s ease,
    transform .52s cubic-bezier(.18,.82,.22,1),
    filter .42s ease;
  will-change:transform,opacity,filter;
}

.lightbox-image-frame.image-ready .lightbox-image{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

.lightbox-image-frame.slide-from-right .lightbox-image{
  transform:translate3d(26px,0,0) scale(.985);
}

.lightbox-image-frame.slide-from-left .lightbox-image{
  transform:translate3d(-26px,0,0) scale(.985);
}

.lightbox-image-frame.slide-from-right.image-ready .lightbox-image,
.lightbox-image-frame.slide-from-left.image-ready .lightbox-image{
  transform:translate3d(0,0,0) scale(1);
}

.lightbox-loading{
  position:absolute;
  left:50%;
  top:50%;
  width:30px;
  height:30px;
  margin:-15px 0 0 -15px;
  border:2px solid rgba(255,255,255,.10);
  border-top-color:var(--acid);
  border-radius:50%;
  opacity:0;
  animation:coverGallerySpin .8s linear infinite;
  transition:opacity .18s ease;
}

.lightbox-image-frame.loading .lightbox-loading{
  opacity:.8;
}

@keyframes coverGallerySpin{
  to{transform:rotate(360deg)}
}

.lightbox-meta{
  min-height:38px;
  text-align:center;
  opacity:0;
  transform:translateY(6px);
  transition:
    opacity .30s .08s ease,
    transform .34s .08s ease;
}

.cover-lightbox.settled .lightbox-meta{
  opacity:1;
  transform:translateY(0);
}

.lightbox-caption{
  color:#dce7e3;
  font-size:13px;
  line-height:1.3;
}

.lightbox-type{
  margin-top:4px;
  color:var(--acid);
  font:700 9px/1.2 Orbitron,sans-serif;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.lightbox-nav,
.lightbox-close{
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(7,15,14,.64);
  color:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible,
.lightbox-close:hover,
.lightbox-close:focus-visible{
  outline:none;
  color:var(--acid);
  border-color:color-mix(in srgb,var(--acid) 46%,transparent);
  background:rgba(7,15,14,.88);
}

.lightbox-nav{
  position:relative;
  width:52px;
  height:52px;
  justify-self:center;
  border-radius:50%;
}

.lightbox-nav:hover{
  transform:scale(1.06);
}

.lightbox-nav[hidden]{
  display:none !important;
}

.lightbox-nav svg,
.lightbox-close svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.lightbox-close{
  position:absolute;
  z-index:4;
  top:0;
  right:0;
  width:42px;
  height:42px;
  border-radius:50%;
  font-size:0;
}

.lightbox-dots{
  min-height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.lightbox-dots[hidden]{
  display:none !important;
}

.lightbox-dots button{
  appearance:none;
  width:6px;
  height:6px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.26);
  cursor:pointer;
  transition:
    width .20s ease,
    border-radius .20s ease,
    background .20s ease,
    box-shadow .20s ease;
}

.lightbox-dots button.active{
  width:20px;
  border-radius:999px;
  background:var(--acid);
  box-shadow:0 0 12px color-mix(in srgb,var(--acid) 48%,transparent);
}

.cover-lightbox.single-image .lightbox-shell{
  grid-template-columns:1fr;
}

.cover-lightbox.single-image .lightbox-stage{
  grid-column:1;
}

/* Respect users who request reduced motion. */
@media(prefers-reduced-motion:reduce){
  .cover-lightbox,
  .lightbox-shell,
  .lightbox-image,
  .lightbox-meta,
  .cover-actions,
  .book-cover{
    transition-duration:.01ms !important;
  }

  .lightbox-loading{
    animation:none;
  }
}

@media(max-width:720px){
  .lightbox-shell{
    width:100%;
    height:min(94vh,900px);
    grid-template-columns:42px minmax(0,1fr) 42px;
    gap:6px;
  }

  .lightbox-nav{
    width:38px;
    height:38px;
  }

  .lightbox-nav svg{
    width:18px;
    height:18px;
  }

  .lightbox-close{
    top:-2px;
    right:-2px;
  }

  .lightbox-image{
    max-width:min(76vw,720px);
    max-height:78vh;
  }

  .cover-actions{
    width:min(86%,170px);
  }
}

/* =========================================================
   ANIBASE — Stats / Overview
   ========================================================= */

.stats-overview-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
    rgba(5,15,14,.58);
  color:rgba(239,246,243,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 5px 16px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  font-size:14px;
  font-weight:500;
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.stats-overview-btn:hover{
  color:#fff;
  border-color:color-mix(in srgb,var(--page-book-color-2) 46%,rgba(255,255,255,.14));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--page-book-color-2) 10%,rgba(255,255,255,.035)),
      rgba(5,15,14,.66)
    );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 16px color-mix(in srgb,var(--page-book-color-2) 12%,transparent);
  transform:translateY(-1px);
}

.stats-overview-icon{
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  color:color-mix(in srgb,var(--page-book-color-2) 72%,white 28%);
}

.stats-overview-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

body.stats-overview-open{overflow:hidden}

.stats-overview{
  position:fixed;
  inset:0;
  z-index:990;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,34px);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease;
}

.stats-overview.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.stats-overview-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,6,5,.86);
  backdrop-filter:blur(18px) saturate(.78);
  -webkit-backdrop-filter:blur(18px) saturate(.78);
}

.stats-overview-shell{
  position:relative;
  z-index:1;
  width:min(1200px,96vw);
  max-height:min(92vh,1020px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  background:
    radial-gradient(circle at 15% 0%,color-mix(in srgb,var(--page-book-color-2) 8%,transparent),transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.028),transparent 18%),
    #07100f;
  box-shadow:
    0 38px 120px rgba(0,0,0,.72),
    inset 0 1px 0 rgba(255,255,255,.035);
  opacity:0;
  transform:translateY(14px) scale(.99);
  transition:opacity .28s ease,transform .38s cubic-bezier(.18,.82,.22,1);
}

.stats-overview.open .stats-overview-shell{
  opacity:1;
  transform:translateY(0) scale(1);
}

.stats-overview-header{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:22px 24px 19px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(3,10,9,.48);
}

.stats-overview-header h2{
  margin:3px 0 5px;
  font:700 clamp(21px,2.4vw,30px)/1.1 Orbitron,sans-serif;
  color:#eef5f2;
}

.stats-overview-header p{
  margin:0;
  color:#81948f;
  font-size:14px;
}

.stats-overview-close{
  flex:0 0 auto;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:#a9b8b4;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}

.stats-overview-close:hover,
.stats-overview-close:focus-visible{
  outline:none;
  color:var(--acid);
  border-color:color-mix(in srgb,var(--acid) 42%,transparent);
  background:rgba(255,255,255,.045);
}

.stats-overview-close svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.stats-overview-content{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:24px;
}

.stats-overview-content::-webkit-scrollbar{width:8px}
.stats-overview-content::-webkit-scrollbar-track{background:#07100f;border-radius:99px}
.stats-overview-content::-webkit-scrollbar-thumb{background:linear-gradient(var(--cyan),var(--acid));border-radius:99px}

/* Stats readability pass: +2px on the compact dashboard typography. */
.stats-overview .eyebrow{font-size:13px}

.stats-overview-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:20px;
  padding:0 2px;
}

.stats-overview-intro h3,
.stats-section-divider h3{
  margin:4px 0 7px;
  font:700 clamp(18px,2vw,24px)/1.15 Orbitron,sans-serif;
  color:#edf5f2;
}

.stats-overview-intro p,
.stats-section-divider p{
  max-width:650px;
  margin:0;
  color:#82958f;
  font-size:16px;
  line-height:1.55;
}

.stats-overview-period{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  color:#9aaca7;
  font-size:14px;
  white-space:nowrap;
}

.stats-overview-period i{
  width:30px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--acid));
  opacity:.7;
}

.stats-section-divider{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px;
  margin:30px 2px 14px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
}

.stats-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px;
}

.stats-kpi-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.stats-kpi-grid-compact{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}

.stats-kpi{
  min-width:0;
  padding:17px 18px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--page-book-color-1) 8%,transparent),transparent 52%),
    rgba(255,255,255,.018);
}

.stats-kpi-label{
  display:block;
  margin-bottom:9px;
  color:color-mix(in srgb,var(--page-book-color-2) 66%,white 34%);
  font:700 11px/1 Orbitron,sans-serif;
  letter-spacing:1.4px;
}

.stats-kpi strong{
  display:block;
  color:#eff6f3;
  font:700 clamp(25px,3vw,36px)/1 Orbitron,sans-serif;
  letter-spacing:-1px;
}

.stats-kpi small{
  display:block;
  margin-top:7px;
  color:#72857f;
  font-size:14px;
  line-height:1.35;
}

.stats-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.stats-panel{
  min-width:0;
  padding:18px;
  border:1px solid rgba(255,255,255,.075);
  border-radius:15px;
  background:rgba(255,255,255,.015);
}

.stats-panel-wide{grid-column:1 / -1}

.stats-panel > header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.stats-panel h3{
  margin:4px 0 0;
  color:#dce7e3;
  font:700 17px/1.2 Orbitron,sans-serif;
}

.stats-panel-note{
  color:#667a74;
  font-size:13px;
  white-space:nowrap;
}

.stats-bars{display:grid;gap:12px}

.stats-bars-scroll,
.stats-bars-tall{
  max-height:360px;
  overflow:auto;
  padding-right:7px;
}

.stats-bars-tall{max-height:430px}

.stats-bars-scroll::-webkit-scrollbar,
.stats-bars-tall::-webkit-scrollbar{width:5px}

.stats-bars-scroll::-webkit-scrollbar-thumb,
.stats-bars-tall::-webkit-scrollbar-thumb{
  border-radius:99px;
  background:rgba(255,255,255,.13);
}

.stats-bar-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:5px;
  color:#aebdb8;
  font-size:14px;
}

.stats-bar-value{
  flex:0 0 auto;
  color:#e3ece9;
  font-weight:700;
}

.stats-bar-percent{
  margin-left:6px;
  color:#62756f;
  font-size:12px;
  font-weight:500;
}

.stats-bar-track{
  height:6px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.045);
}

.stats-bar-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb,var(--page-book-color-1) 78%,var(--cyan) 22%),
      color-mix(in srgb,var(--page-book-color-2) 62%,var(--acid) 38%)
    );
  box-shadow:0 0 10px color-mix(in srgb,var(--page-book-color-2) 20%,transparent);
}

/* Donut charts */
.stats-donut-layout{
  display:grid;
  grid-template-columns:minmax(150px,210px) minmax(0,1fr);
  align-items:center;
  gap:20px;
}

.stats-donut{
  width:min(190px,100%);
  aspect-ratio:1;
  margin:auto;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:conic-gradient(var(--stats-donut));
  box-shadow:
    0 0 32px color-mix(in srgb,var(--page-book-color-2) 9%,transparent),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

.stats-donut-hole{
  width:58%;
  aspect-ratio:1;
  display:grid;
  place-content:center;
  text-align:center;
  border-radius:50%;
  background:
    radial-gradient(circle at 45% 35%,rgba(255,255,255,.045),transparent 55%),
    #091311;
  box-shadow:0 0 0 1px rgba(255,255,255,.055);
}

.stats-donut-hole strong{
  color:#f0f6f4;
  font:700 clamp(23px,3vw,34px)/1 Orbitron,sans-serif;
}

.stats-donut-hole span{
  margin-top:5px;
  color:#687c75;
  font:700 10px/1 Orbitron,sans-serif;
  letter-spacing:1.3px;
}

.stats-donut-legend{
  min-width:0;
  display:grid;
  gap:6px;
  max-height:250px;
  overflow:auto;
  padding-right:4px;
}

.stats-donut-legend-row{
  min-width:0;
  display:grid;
  grid-template-columns:8px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  color:#9eafaa;
  font-size:13px;
}

.stats-donut-legend-row i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--legend-color);
  box-shadow:0 0 8px color-mix(in srgb,var(--legend-color) 45%,transparent);
}

.stats-donut-legend-row span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.stats-donut-legend-row strong{
  color:#dfe8e5;
  font-size:13px;
}

.stats-donut-legend-row small{
  width:30px;
  color:#62756f;
  font-size:11px;
  text-align:right;
}

/* Vertical column charts */
.stats-column-scroll{
  overflow-x:auto;
  padding-bottom:4px;
}

.stats-column-chart{
  height:235px;
  min-width:max(100%,calc(var(--stats-columns) * 64px));
  display:grid;
  grid-template-columns:repeat(var(--stats-columns),minmax(50px,1fr));
  align-items:end;
  gap:8px;
  padding-top:12px;
}

.stats-column-item{
  height:100%;
  min-width:0;
  display:grid;
  grid-template-rows:18px minmax(0,1fr) 34px;
  justify-items:center;
  align-items:end;
  gap:5px;
}

.stats-column-value{
  color:#82948f;
  font-size:12px;
}

.stats-column-track{
  width:min(30px,70%);
  height:100%;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-radius:7px 7px 3px 3px;
  background:rgba(255,255,255,.025);
}

.stats-column-track i{
  width:100%;
  min-height:4px;
  border-radius:7px 7px 3px 3px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--page-book-color-2) 58%,var(--acid) 42%),
      color-mix(in srgb,var(--page-book-color-1) 78%,#07100f 22%)
    );
  box-shadow:0 -6px 18px color-mix(in srgb,var(--page-book-color-2) 14%,transparent);
}

.stats-column-label{
  max-width:70px;
  overflow:hidden;
  color:#70837d;
  font-size:11px;
  line-height:1.15;
  text-align:center;
  text-overflow:ellipsis;
}

/* Book-by-book alien introduction timeline */
.stats-book-timeline-wrap{min-width:0}

.stats-book-timeline-note{
  margin-bottom:8px;
  color:#62756f;
  font-size:12px;
}

.stats-book-timeline{
  height:255px;
  display:grid;
  grid-template-columns:repeat(var(--stats-book-columns),minmax(22px,1fr));
  align-items:end;
  gap:3px;
  overflow-x:auto;
  padding:8px 2px 6px;
}

.stats-book-timeline-item{
  height:100%;
  min-width:22px;
  display:grid;
  grid-template-rows:16px minmax(0,1fr) 25px;
  align-items:end;
  justify-items:center;
  gap:3px;
}

.stats-book-timeline-item > span{
  color:#536761;
  font-size:10px;
}

.stats-book-timeline-item > div{
  width:65%;
  height:100%;
  display:flex;
  align-items:flex-end;
  border-radius:4px 4px 2px 2px;
  background:rgba(255,255,255,.018);
}

.stats-book-timeline-item > div i{
  width:100%;
  min-height:2px;
  border-radius:4px 4px 2px 2px;
  background:rgba(255,255,255,.06);
}

.stats-book-timeline-item.has-value > div i{
  background:linear-gradient(
    180deg,
    color-mix(in srgb,var(--page-book-color-2) 58%,var(--acid) 42%),
    color-mix(in srgb,var(--page-book-color-1) 78%,#07100f 22%)
  );
  box-shadow:0 -4px 13px color-mix(in srgb,var(--page-book-color-2) 12%,transparent);
}

.stats-book-timeline-item small{
  max-width:34px;
  color:#536761;
  font-size:9px;
  line-height:1;
  text-align:center;
  transform:rotate(-45deg);
  transform-origin:center;
}

.stats-records{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.stats-records article{
  min-width:0;
  padding:15px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(255,255,255,.018);
}

.stats-records span{
  display:block;
  color:#6f827c;
  font:700 10px/1 Orbitron,sans-serif;
  letter-spacing:1.2px;
}

.stats-records strong{
  display:block;
  margin:8px 0 6px;
  color:#e8f0ed;
  font:700 19px/1.1 Orbitron,sans-serif;
}

.stats-records small{
  display:block;
  color:#7d908a;
  font-size:13px;
  line-height:1.45;
}

.stats-empty{
  padding:28px 12px;
  color:#61736d;
  text-align:center;
}

.stats-method-note{
  margin:20px 2px 2px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
  color:#536761;
  font-size:12px;
  line-height:1.55;
}

@media(max-width:1050px){
  .stats-kpi-grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stats-donut-layout{grid-template-columns:160px minmax(0,1fr)}
}

@media(max-width:900px){
  .stats-overview-btn{
    width:38px;
    padding:0;
  }

  .stats-overview-btn > span:last-child{display:none}
  .stats-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-kpi-grid-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats-dashboard-grid{grid-template-columns:1fr}
  .stats-panel-wide{grid-column:auto}

  .stats-overview-intro,
  .stats-section-divider{
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
  }
}

@media(max-width:650px){
  .stats-donut-layout{
    grid-template-columns:1fr;
  }

  .stats-donut{
    width:170px;
  }

  .stats-donut-legend{
    max-height:none;
  }
}

@media(max-width:560px){
  .stats-overview{padding:0}

  .stats-overview-shell{
    width:100%;
    max-height:100vh;
    height:100vh;
    border-radius:0;
  }

  .stats-overview-header,
  .stats-overview-content{
    padding-left:16px;
    padding-right:16px;
  }

  .stats-kpi-grid,
  .stats-kpi-grid-five,
  .stats-kpi-grid-compact,
  .stats-records{
    grid-template-columns:1fr 1fr;
  }

  .stats-kpi{padding:14px}
  .stats-overview-period{white-space:normal}
}

@media(prefers-reduced-motion:reduce){
  .stats-overview,
  .stats-overview-shell,
  .stats-overview-btn{
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   ANIBASE — Wikipedia Morphs
   ========================================================= */

.wiki-morph-term{
  position:relative;
  cursor:pointer;
  color:color-mix(in srgb,var(--page-book-color-2) 62%,white 38%);
  text-decoration-line:underline;
  text-decoration-style:solid;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--page-book-color-2) 40%,transparent);
  transition:
    color .18s ease,
    text-decoration-color .18s ease,
    filter .18s ease;
}

.wiki-morph-term::after{
  content:"W";
  display:inline-grid;
  place-items:center;
  width:14px;
  height:14px;
  margin-left:5px;
  border:1px solid color-mix(in srgb,var(--page-book-color-2) 35%,rgba(255,255,255,.10));
  border-radius:50%;
  color:#879a94;
  font:700 7px/1 Georgia,serif;
  vertical-align:2px;
  opacity:.72;
  transition:
    color .18s ease,
    border-color .18s ease,
    opacity .18s ease,
    transform .18s ease;
}

.wiki-morph-term:hover,
.wiki-morph-term:focus-visible{
  outline:none;
  color:color-mix(in srgb,var(--page-book-color-2) 72%,white 28%);
  text-decoration-color:color-mix(in srgb,var(--page-book-color-2) 75%,transparent);
  filter:brightness(1.12);
}

.wiki-morph-term:hover::after,
.wiki-morph-term:focus-visible::after{
  color:var(--acid);
  border-color:color-mix(in srgb,var(--acid) 48%,transparent);
  opacity:1;
  transform:translateY(-1px);
}

body.wiki-morph-open{
  overflow:hidden;
}

.wiki-morph-lightbox{
  position:fixed;
  inset:0;
  z-index:1100;
  display:grid;
  place-items:center;
  padding:clamp(14px,4vw,42px);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:
    opacity .26s ease,
    visibility .26s ease;
}

.wiki-morph-lightbox.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.wiki-morph-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,5,5,.90);
  backdrop-filter:blur(20px) saturate(.76);
  -webkit-backdrop-filter:blur(20px) saturate(.76);
}

.wiki-morph-dialog{
  position:relative;
  z-index:1;
  width:min(900px,94vw);
  max-height:min(88vh,820px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.105);
  border-radius:19px;
  background:
    radial-gradient(
      circle at 18% 0%,
      color-mix(in srgb,var(--page-book-color-2) 9%,transparent),
      transparent 32%
    ),
    linear-gradient(180deg,rgba(255,255,255,.028),transparent 18%),
    #07100f;
  box-shadow:
    0 38px 120px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.035);
  opacity:0;
  transform:translateY(14px) scale(.985);
  transition:
    opacity .30s ease,
    transform .42s cubic-bezier(.18,.82,.22,1);
}

.wiki-morph-lightbox.open .wiki-morph-dialog{
  opacity:1;
  transform:translateY(0) scale(1);
}

.wiki-morph-header{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:20px 22px 17px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(3,10,9,.46);
}

.wiki-morph-header h2{
  margin:4px 0 0;
  color:#edf5f2;
  font:700 clamp(19px,2.5vw,27px)/1.1 Orbitron,sans-serif;
}

.wiki-morph-close{
  flex:0 0 auto;
  width:39px;
  height:39px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:#a5b5b0;
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease;
}

.wiki-morph-close:hover,
.wiki-morph-close:focus-visible{
  outline:none;
  color:var(--acid);
  border-color:color-mix(in srgb,var(--acid) 42%,transparent);
  background:rgba(255,255,255,.045);
}

.wiki-morph-close svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.wiki-morph-content{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:22px;
}

.wiki-morph-content::-webkit-scrollbar{
  width:8px;
}

.wiki-morph-content::-webkit-scrollbar-track{
  background:#07100f;
  border-radius:99px;
}

.wiki-morph-content::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
}

.wiki-morph-card{
  display:grid;
  grid-template-columns:minmax(210px,34%) minmax(0,1fr);
  gap:25px;
  align-items:start;
}

.wiki-morph-image{
  min-height:280px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-radius:15px;
  background:rgba(255,255,255,.018);
  box-shadow:0 20px 50px rgba(0,0,0,.24);
}

.wiki-morph-image img{
  display:block;
  width:100%;
  height:100%;
  min-height:280px;
  max-height:470px;
  object-fit:cover;
}

.wiki-morph-image-empty span{
  color:rgba(255,255,255,.10);
  font:700 88px/1 Georgia,serif;
}

.wiki-morph-copy{
  min-width:0;
  padding:6px 3px;
}

.wiki-morph-source{
  margin-bottom:7px;
  color:color-mix(in srgb,var(--page-book-color-2) 68%,white 32%);
  font:700 9px/1 Orbitron,sans-serif;
  letter-spacing:1.4px;
}

.wiki-morph-copy h3{
  margin:0 0 5px;
  color:#eef5f2;
  font:700 clamp(23px,3.5vw,36px)/1.08 Orbitron,sans-serif;
  letter-spacing:-.7px;
}

.wiki-morph-description{
  margin:0 0 18px;
  color:#839791;
  font-size:13px;
  font-style:italic;
}

.wiki-morph-extract{
  margin:0;
  color:#c3d0cc;
  font-size:16px;
  line-height:1.67;
}

.wiki-morph-read,
.wiki-morph-empty a{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  padding:9px 12px;
  border:1px solid color-mix(in srgb,var(--page-book-color-2) 34%,rgba(255,255,255,.08));
  border-radius:999px;
  background:color-mix(in srgb,var(--page-book-color-1) 10%,rgba(255,255,255,.018));
  color:color-mix(in srgb,var(--page-book-color-2) 68%,white 32%);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.wiki-morph-read:hover,
.wiki-morph-empty a:hover{
  color:var(--acid);
  border-color:color-mix(in srgb,var(--acid) 46%,transparent);
  background:rgba(255,255,255,.035);
  transform:translateY(-1px);
}

.wiki-morph-attribution{
  margin:16px 0 0;
  color:#52665f;
  font-size:10px;
  line-height:1.45;
}

.wiki-morph-loading,
.wiki-morph-empty{
  min-height:340px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.wiki-morph-loading strong{
  margin-top:18px;
  color:#e6efec;
  font:700 18px/1.2 Orbitron,sans-serif;
}

.wiki-morph-loading > span:last-child{
  margin-top:7px;
  color:#70847e;
  font-size:12px;
}

.wiki-morph-spinner{
  width:34px;
  height:34px;
  border:2px solid rgba(255,255,255,.08);
  border-top-color:var(--acid);
  border-radius:50%;
  animation:wikiMorphSpin .8s linear infinite;
}

@keyframes wikiMorphSpin{
  to{transform:rotate(360deg)}
}

.wiki-morph-empty-mark{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  margin-bottom:15px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:50%;
  color:color-mix(in srgb,var(--page-book-color-2) 58%,white 42%);
  font:700 22px/1 Georgia,serif;
}

.wiki-morph-empty h3{
  margin:0 0 8px;
  color:#dce7e3;
  font:700 18px/1.2 Orbitron,sans-serif;
}

.wiki-morph-empty p{
  max-width:540px;
  margin:0;
  color:#7f928c;
  font-size:14px;
  line-height:1.55;
}

@media(max-width:700px){
  .wiki-morph-lightbox{
    padding:0;
  }

  .wiki-morph-dialog{
    width:100%;
    height:100vh;
    max-height:100vh;
    border-radius:0;
  }

  .wiki-morph-card{
    grid-template-columns:1fr;
  }

  .wiki-morph-image{
    min-height:200px;
    max-height:300px;
  }

  .wiki-morph-image img{
    min-height:200px;
    max-height:300px;
  }
}

@media(prefers-reduced-motion:reduce){
  .wiki-morph-lightbox,
  .wiki-morph-dialog,
  .wiki-morph-term,
  .wiki-morph-spinner{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}

/* =========================================================
   ANIBASE — Classified profiles / official ship schematics
   ========================================================= */

.narrator-profile-action{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.065);
}

.narrator-profile-action[hidden]{display:none!important}

.archive-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:9px 13px;
  border:1px solid color-mix(in srgb,var(--page-book-color-2) 34%,rgba(255,255,255,.10));
  border-radius:11px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
    rgba(3,12,11,.54);
  color:#dce8e4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  transition:transform .18s ease,border-color .18s ease,color .18s ease,background .18s ease;
}

.archive-cta:hover,
.archive-cta:focus-visible{
  outline:none;
  transform:translateY(-1px);
  color:#fff;
  border-color:color-mix(in srgb,var(--page-book-color-2) 55%,rgba(255,255,255,.12));
  background:color-mix(in srgb,var(--page-book-color-1) 12%,rgba(3,12,11,.62));
}

.archive-cta-icon{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:4px 6px 3px;
  border:1px solid rgba(255,91,91,.42);
  border-radius:4px;
  color:#ff7777;
  font:700 8px/1 Orbitron,sans-serif;
  letter-spacing:1px;
  transform:rotate(-2deg);
}

.schematic-term{
  cursor:pointer;
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  text-decoration-color:color-mix(in srgb,var(--page-book-color-2) 48%,transparent);
}

.schematic-term::after{
  content:"SCHEMATIC";
  display:inline-flex;
  margin-left:7px;
  padding:3px 5px 2px;
  border:1px solid color-mix(in srgb,var(--acid) 32%,transparent);
  border-radius:4px;
  color:color-mix(in srgb,var(--acid) 68%,white 32%);
  font:700 9px/1 Orbitron,sans-serif;
  letter-spacing:.7px;
  vertical-align:2px;
  opacity:.72;
}

.schematic-term:hover::after,
.schematic-term:focus-visible::after{opacity:1}

body.archive-lightbox-open{overflow:hidden}

.archive-lightbox{
  position:fixed;
  inset:0;
  z-index:1120;
  display:grid;
  place-items:center;
  padding:clamp(12px,3vw,34px);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}

.archive-lightbox.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.archive-lightbox-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,5,5,.91);
  backdrop-filter:blur(18px) saturate(.78);
  -webkit-backdrop-filter:blur(18px) saturate(.78);
}

.archive-lightbox-shell{
  position:relative;
  z-index:1;
  width:min(1050px,95vw);
  max-height:92vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.105);
  border-radius:19px;
  background:
    radial-gradient(circle at 16% 0%,color-mix(in srgb,var(--page-book-color-2) 8%,transparent),transparent 31%),
    #07100f;
  box-shadow:0 38px 120px rgba(0,0,0,.76),inset 0 1px 0 rgba(255,255,255,.035);
  transform:translateY(12px) scale(.99);
  transition:transform .34s cubic-bezier(.18,.82,.22,1);
}

.archive-lightbox.open .archive-lightbox-shell{transform:translateY(0) scale(1)}

.archive-lightbox-header{
  flex:0 0 auto;
  padding:17px 58px 15px 20px;
  border-bottom:1px solid rgba(255,255,255,.075);
  background:rgba(3,10,9,.45);
}

.archive-lightbox-header h2{
  margin:4px 0 0;
  color:#eef5f2;
  font:700 clamp(18px,2.4vw,27px)/1.1 Orbitron,sans-serif;
}

.archive-lightbox-close{
  position:absolute;
  z-index:3;
  top:13px;
  right:14px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:rgba(255,255,255,.025);
  color:#a7b6b2;
}

.archive-lightbox-close:hover,
.archive-lightbox-close:focus-visible{
  outline:none;
  color:var(--acid);
  border-color:color-mix(in srgb,var(--acid) 42%,transparent);
}

.archive-lightbox-close svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.archive-lightbox-stage{
  position:relative;
  min-height:240px;
  flex:1 1 auto;
  display:grid;
  place-items:center;
  overflow:auto;
  padding:18px;
}

.archive-lightbox-image{
  display:block;
  max-width:100%;
  max-height:calc(92vh - 105px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:5px;
  opacity:0;
  transform:translateY(8px) scale(.992);
  transition:opacity .24s ease,transform .32s cubic-bezier(.18,.82,.22,1);
}

.archive-lightbox-stage.image-ready .archive-lightbox-image{
  opacity:1;
  transform:none;
}

.archive-lightbox-loading{
  position:absolute;
  width:32px;
  height:32px;
  border:2px solid rgba(255,255,255,.08);
  border-top-color:var(--acid);
  border-radius:50%;
  opacity:0;
  animation:archiveSpin .8s linear infinite;
}

.archive-lightbox-stage.loading .archive-lightbox-loading{opacity:1}

@keyframes archiveSpin{to{transform:rotate(360deg)}}

@media(max-width:640px){
  .archive-lightbox{padding:0}
  .archive-lightbox-shell{width:100%;height:100vh;max-height:100vh;border-radius:0}
  .archive-lightbox-image{max-height:calc(100vh - 100px)}
}


/* =========================================================
   ANIBASE — About / disclaimer
   ========================================================= */

body.site-info-open{ overflow:hidden; }

.site-info-btn{
  width:38px;
  min-height:38px;
  padding:0;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:11px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)),
    rgba(5,15,14,.58);
  color:color-mix(in srgb,var(--page-book-color-2) 72%,white 28%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 5px 16px rgba(0,0,0,.10);
  backdrop-filter:blur(10px);
  transition:color .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease,transform .18s ease;
}

.site-info-btn:hover{
  color:#fff;
  border-color:color-mix(in srgb,var(--page-book-color-2) 46%,rgba(255,255,255,.14));
  background:linear-gradient(180deg,color-mix(in srgb,var(--page-book-color-2) 10%,rgba(255,255,255,.035)),rgba(5,15,14,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 0 16px color-mix(in srgb,var(--page-book-color-2) 12%,transparent);
  transform:translateY(-1px);
}

.site-info-icon{
  display:block;
  font:700 16px/1 Orbitron,sans-serif;
  text-transform:lowercase;
}

.site-info-modal{
  position:fixed;
  inset:0;
  z-index:1300;
  display:grid;
  place-items:center;
  padding:24px;
  visibility:hidden;
  opacity:0;
  transition:opacity .22s ease,visibility .22s ease;
}

.site-info-modal.open{ visibility:visible; opacity:1; }

.site-info-backdrop{
  position:absolute;
  inset:0;
  background:rgba(1,5,5,.88);
  backdrop-filter:blur(18px);
}

.site-info-dialog{
  position:relative;
  width:min(620px,calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  padding:42px 46px 40px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0,color-mix(in srgb,var(--page-book-color-2) 13%,transparent),transparent 38%),
    linear-gradient(180deg,#0b201e,#071311);
  box-shadow:0 32px 100px rgba(0,0,0,.68);
  text-align:center;
  transform:translateY(10px) scale(.985);
  transition:transform .22s ease;
}

.site-info-modal.open .site-info-dialog{ transform:translateY(0) scale(1); }

.site-info-close{
  position:absolute;
  top:15px;
  right:15px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
  background:rgba(3,10,9,.58);
  color:#dce7e3;
}
.site-info-close:hover{ color:#fff; border-color:rgba(131,255,20,.28); }
.site-info-close svg{ width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }

.site-info-mark{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border:1px solid color-mix(in srgb,var(--page-book-color-2) 42%,rgba(255,255,255,.12));
  border-radius:50%;
  color:color-mix(in srgb,var(--page-book-color-2) 74%,white 26%);
  font:700 20px/1 Orbitron,sans-serif;
  box-shadow:0 0 24px color-mix(in srgb,var(--page-book-color-2) 12%,transparent);
}

.site-info-dialog h2{
  margin:7px 0 5px;
  color:#fff;
  font:700 clamp(28px,5vw,40px)/1 Orbitron,sans-serif;
  letter-spacing:-1px;
}
.site-info-version{ color:#829691;font:600 10px/1 Orbitron,sans-serif;letter-spacing:2px; }
.site-info-rule{ width:54px;height:1px;margin:24px auto;background:linear-gradient(90deg,transparent,var(--page-book-color-2),transparent); }
.site-info-disclaimer{ margin:0 auto 16px;max-width:510px;color:#cbd8d4;font-size:15px;line-height:1.68; }
.site-info-disclaimer:last-child{ margin-bottom:0; }
.site-info-disclaimer strong{ color:#fff; }
.site-info-disclaimer em{ color:#eef5f2; }

@media(max-width:640px){
  .site-info-modal{ padding:12px; }
  .site-info-dialog{ width:100%;max-height:calc(100vh - 24px);padding:38px 24px 30px;border-radius:20px; }
  .site-info-disclaimer{ font-size:14px;line-height:1.6; }
}

@media(prefers-reduced-motion:reduce){
  .site-info-btn,.site-info-modal,.site-info-dialog{ transition:none!important;transform:none!important; }
}

/* ---------- Stats final readability + scrollbar pass ---------- */
/* Final readability pass: +1 px again, and substantially brighter copy. */
.stats-overview .eyebrow{font-size:15px;color:#e6eeeb}
.stats-overview-intro p,
.stats-section-divider p{font-size:18px;color:#dde7e3}
.stats-overview-period{font-size:16px;color:#e1e9e6}
.stats-kpi-label{font-size:13px;color:#f0f5f3}
.stats-kpi small{font-size:16px;color:#d8e2de}
.stats-panel-note{font-size:15px;color:#d5dfdb}
.stats-bar-head{font-size:16px;color:#edf3f1}
.stats-bar-value{color:#fff}
.stats-bar-percent{font-size:14px;color:#cdd9d5}
.stats-donut-hole span{font-size:12px;color:#d4dfdb}
.stats-donut-legend-row{font-size:15px;color:#e5ece9}
.stats-donut-legend-row strong{font-size:15px;color:#fff}
.stats-donut-legend-row small{font-size:13px;color:#cbd6d2}
.stats-column-value{font-size:14px;color:#e2eae7}
.stats-column-label{font-size:13px;color:#dce5e1}
.stats-book-timeline-note{font-size:14px;color:#d6e0dc}
.stats-book-timeline-item > span{font-size:12px;color:#cbd7d3}
.stats-book-timeline-item small{font-size:11px;color:#cbd7d3}
.stats-records span{font-size:12px;color:#d7e1dd}
.stats-records strong{color:#fff}
.stats-records small{font-size:15px;color:#dce5e1}
.stats-empty{color:#d4dfdb}
.stats-method-note{font-size:14px;color:#cbd7d3}

/* Same cyan → acid scrollbar on every Stats scroll container. */
.stats-overview-content,
.stats-bars-scroll,
.stats-bars-tall,
.stats-donut-legend,
.stats-column-scroll,
.stats-book-timeline{
}

.stats-overview-content::-webkit-scrollbar,
.stats-bars-scroll::-webkit-scrollbar,
.stats-bars-tall::-webkit-scrollbar,
.stats-donut-legend::-webkit-scrollbar,
.stats-column-scroll::-webkit-scrollbar,
.stats-book-timeline::-webkit-scrollbar{
  width:8px;
  height:8px;
}

.stats-overview-content::-webkit-scrollbar-track,
.stats-bars-scroll::-webkit-scrollbar-track,
.stats-bars-tall::-webkit-scrollbar-track,
.stats-donut-legend::-webkit-scrollbar-track,
.stats-column-scroll::-webkit-scrollbar-track,
.stats-book-timeline::-webkit-scrollbar-track{
  background:#07100f;
  border-radius:99px;
}

.stats-overview-content::-webkit-scrollbar-thumb,
.stats-bars-scroll::-webkit-scrollbar-thumb,
.stats-bars-tall::-webkit-scrollbar-thumb,
.stats-donut-legend::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--cyan),var(--acid));
  border-radius:99px;
  border:1px solid #07100f;
}

.stats-column-scroll::-webkit-scrollbar-thumb,
.stats-book-timeline::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--cyan),var(--acid));
  border-radius:99px;
  border:1px solid #07100f;
}

/* Make sure the scrollbars are visually separated from chart content. */
.stats-bars-scroll,
.stats-bars-tall,
.stats-donut-legend{scrollbar-gutter:stable}
.stats-column-scroll,
.stats-book-timeline{padding-bottom:10px}


/* =========================================================
   ANIBASE — final modal/readability polish
   ========================================================= */

/* Stats: soften the previous near-white copy while keeping the larger sizing. */
.stats-overview .eyebrow{color:#d4dfdb}
.stats-overview-intro p,
.stats-section-divider p{color:#cfdad6}
.stats-overview-period{color:#d2dcd8}
.stats-kpi-label{color:#dbe4e1}
.stats-kpi small{color:#cbd6d2}
.stats-panel-note{color:#c8d3cf}
.stats-bar-head{color:#d9e2df}
.stats-bar-value{color:#eef3f1}
.stats-bar-percent{color:#c4d0cc}
.stats-donut-hole span{color:#cad5d1}
.stats-donut-legend-row{color:#d5dfdc}
.stats-donut-legend-row strong{color:#edf3f0}
.stats-donut-legend-row small{color:#c4cfcb}
.stats-column-value{color:#d6dfdc}
.stats-column-label{color:#cdd8d4}
.stats-book-timeline-note{color:#cbd6d2}
.stats-book-timeline-item > span,
.stats-book-timeline-item small{color:#c2cfca}
.stats-records span{color:#cbd6d2}
.stats-records strong{color:#edf3f0}
.stats-records small{color:#cdd8d4}
.stats-empty{color:#cad5d1}
.stats-method-note{color:#c2cfca}

/* Increase body/copy text in the other modal databases to match Stats readability. */
.explorer-subtitle,
.morph-db-subtitle,
.character-db-subtitle,
.alien-db-subtitle,
.glossary-db-subtitle,
.wiki-morph-content,
.archive-lightbox-header,
.lightbox-meta{
  font-size:16px;
}

.explorer-summary,
.morph-db-summary,
.character-db-summary,
.alien-db-summary,
.glossary-db-summary{
  font-size:13px;
}

.morph-db-result,
.character-db-result,
.alien-db-result,
.glossary-db-result{
  font-size:16px;
}

.lightbox-caption{font-size:15px}
.lightbox-type{font-size:11px}

/* One scrollbar language everywhere: dark track + cyan→acid thumb. */
.stats-overview-content,
.stats-bars-scroll,
.stats-bars-tall,
.stats-donut-legend,
.stats-column-scroll,
.stats-book-timeline,
.explorer-results,
.morph-db-results,
.character-db-results,
.alien-db-results,
.glossary-db-results,
.wiki-morph-content,
.archive-lightbox-stage,
.site-info-dialog{
}

.stats-overview-content::-webkit-scrollbar,
.stats-bars-scroll::-webkit-scrollbar,
.stats-bars-tall::-webkit-scrollbar,
.stats-donut-legend::-webkit-scrollbar,
.stats-column-scroll::-webkit-scrollbar,
.stats-book-timeline::-webkit-scrollbar,
.explorer-results::-webkit-scrollbar,
.morph-db-results::-webkit-scrollbar,
.character-db-results::-webkit-scrollbar,
.alien-db-results::-webkit-scrollbar,
.glossary-db-results::-webkit-scrollbar,
.wiki-morph-content::-webkit-scrollbar,
.archive-lightbox-stage::-webkit-scrollbar,
.site-info-dialog::-webkit-scrollbar{
  width:8px !important;
  height:8px !important;
}

.stats-overview-content::-webkit-scrollbar-track,
.stats-bars-scroll::-webkit-scrollbar-track,
.stats-bars-tall::-webkit-scrollbar-track,
.stats-donut-legend::-webkit-scrollbar-track,
.stats-column-scroll::-webkit-scrollbar-track,
.stats-book-timeline::-webkit-scrollbar-track,
.explorer-results::-webkit-scrollbar-track,
.morph-db-results::-webkit-scrollbar-track,
.character-db-results::-webkit-scrollbar-track,
.alien-db-results::-webkit-scrollbar-track,
.glossary-db-results::-webkit-scrollbar-track,
.wiki-morph-content::-webkit-scrollbar-track,
.archive-lightbox-stage::-webkit-scrollbar-track,
.site-info-dialog::-webkit-scrollbar-track{
  background:#07100f !important;
  border-radius:99px !important;
}

.stats-overview-content::-webkit-scrollbar-thumb,
.stats-bars-scroll::-webkit-scrollbar-thumb,
.stats-bars-tall::-webkit-scrollbar-thumb,
.stats-donut-legend::-webkit-scrollbar-thumb,
.explorer-results::-webkit-scrollbar-thumb,
.morph-db-results::-webkit-scrollbar-thumb,
.character-db-results::-webkit-scrollbar-thumb,
.alien-db-results::-webkit-scrollbar-thumb,
.glossary-db-results::-webkit-scrollbar-thumb,
.wiki-morph-content::-webkit-scrollbar-thumb,
.archive-lightbox-stage::-webkit-scrollbar-thumb,
.site-info-dialog::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--cyan) 0%,var(--acid) 100%) !important;
  background-color:var(--cyan) !important;
  border-radius:99px !important;
  border:1px solid #07100f !important;
}

.stats-column-scroll::-webkit-scrollbar-thumb,
.stats-book-timeline::-webkit-scrollbar-thumb{
  background:linear-gradient(90deg,var(--cyan) 0%,var(--acid) 100%) !important;
  background-color:var(--cyan) !important;
  border-radius:99px !important;
  border:1px solid #07100f !important;
}

/* Normalize close buttons to the Stats / About geometry and center their glyphs. */
.lightbox-close,
.archive-lightbox-close,
.wiki-morph-close,
.explorer-close,
.morph-db-close,
.character-db-close,
.alien-db-close,
.glossary-db-close{
  width:38px;
  height:38px;
  min-width:38px;
  min-height:38px;
  padding:0;
  display:grid;
  place-items:center;
  line-height:0;
  text-align:center;
  border-radius:50%;
}

.lightbox-close svg,
.archive-lightbox-close svg,
.wiki-morph-close svg,
.explorer-close svg,
.morph-db-close svg,
.character-db-close svg,
.alien-db-close svg,
.glossary-db-close svg{
  display:block;
  margin:auto;
  width:17px;
  height:17px;
}

/* Database close controls that use a literal multiplication sign rather than SVG. */
.explorer-close,
.morph-db-close,
.character-db-close,
.alien-db-close,
.glossary-db-close{
  font-size:25px;
  line-height:1;
  padding-bottom:2px;
}


/* =========================================================
   ANIBASE — definitive modal controls + scrollbar gradient
   This block intentionally comes LAST so older component rules
   cannot override it.
   ========================================================= */

/* Use a visible two-colour thumb rather than a mostly-cyan soft gradient. */
.stats-overview-content,
.stats-bars-scroll,
.stats-bars-tall,
.stats-donut-legend,
.stats-column-scroll,
.stats-book-timeline,
.explorer-grid,
.global-search-results,
.morph-db-results,
.character-db-results,
.alien-db-results,
.glossary-db-results,
.wiki-morph-content,
.archive-lightbox-stage,
.site-info-dialog{
  /* Firefox only supports solid scrollbar colours; use the midpoint there. */
}

.stats-overview-content::-webkit-scrollbar,
.stats-bars-scroll::-webkit-scrollbar,
.stats-bars-tall::-webkit-scrollbar,
.stats-donut-legend::-webkit-scrollbar,
.stats-column-scroll::-webkit-scrollbar,
.stats-book-timeline::-webkit-scrollbar,
.explorer-grid::-webkit-scrollbar,
.global-search-results::-webkit-scrollbar,
.morph-db-results::-webkit-scrollbar,
.character-db-results::-webkit-scrollbar,
.alien-db-results::-webkit-scrollbar,
.glossary-db-results::-webkit-scrollbar,
.wiki-morph-content::-webkit-scrollbar,
.archive-lightbox-stage::-webkit-scrollbar,
.site-info-dialog::-webkit-scrollbar{
  width:9px !important;
  height:9px !important;
}

.stats-overview-content::-webkit-scrollbar-track,
.stats-bars-scroll::-webkit-scrollbar-track,
.stats-bars-tall::-webkit-scrollbar-track,
.stats-donut-legend::-webkit-scrollbar-track,
.stats-column-scroll::-webkit-scrollbar-track,
.stats-book-timeline::-webkit-scrollbar-track,
.explorer-grid::-webkit-scrollbar-track,
.global-search-results::-webkit-scrollbar-track,
.morph-db-results::-webkit-scrollbar-track,
.character-db-results::-webkit-scrollbar-track,
.alien-db-results::-webkit-scrollbar-track,
.glossary-db-results::-webkit-scrollbar-track,
.wiki-morph-content::-webkit-scrollbar-track,
.archive-lightbox-stage::-webkit-scrollbar-track,
.site-info-dialog::-webkit-scrollbar-track{
  background:#07100f !important;
  border-radius:99px !important;
}

/* Vertical scroll areas: cyan on top, acid green on bottom with a crisp blend. */
.stats-overview-content::-webkit-scrollbar-thumb,
.stats-bars-scroll::-webkit-scrollbar-thumb,
.stats-bars-tall::-webkit-scrollbar-thumb,
.stats-donut-legend::-webkit-scrollbar-thumb,
.explorer-grid::-webkit-scrollbar-thumb,
.global-search-results::-webkit-scrollbar-thumb,
.morph-db-results::-webkit-scrollbar-thumb,
.character-db-results::-webkit-scrollbar-thumb,
.alien-db-results::-webkit-scrollbar-thumb,
.glossary-db-results::-webkit-scrollbar-thumb,
.wiki-morph-content::-webkit-scrollbar-thumb,
.archive-lightbox-stage::-webkit-scrollbar-thumb,
.site-info-dialog::-webkit-scrollbar-thumb{
  background-image:linear-gradient(180deg,#20d8d4 0%,#20d8d4 35%,#83ff14 65%,#83ff14 100%) !important;
  background-color:#20d8d4 !important;
  border:1px solid #07100f !important;
  border-radius:99px !important;
}

/* Horizontal chart scroll areas: left-to-right cyan → acid. */
.stats-column-scroll::-webkit-scrollbar-thumb,
.stats-book-timeline::-webkit-scrollbar-thumb{
  background-image:linear-gradient(90deg,#20d8d4 0%,#20d8d4 35%,#83ff14 65%,#83ff14 100%) !important;
  background-color:#20d8d4 !important;
  border:1px solid #07100f !important;
  border-radius:99px !important;
}

/* All modal close controls now use the exact same geometry and SVG treatment. */
.stats-overview-close,
.site-info-close,
.lightbox-close,
.archive-lightbox-close,
.wiki-morph-close,
.explorer-close,
.global-search-close,
.morph-db-close,
.character-db-close,
.alien-db-close,
.glossary-db-close{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  min-height:40px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  line-height:0 !important;
  text-align:center !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.025) !important;
  color:#a9b8b4 !important;
  font-size:0 !important;
  transition:color .18s ease,border-color .18s ease,background .18s ease !important;
}

.stats-overview-close:hover,
.stats-overview-close:focus-visible,
.site-info-close:hover,
.site-info-close:focus-visible,
.lightbox-close:hover,
.lightbox-close:focus-visible,
.archive-lightbox-close:hover,
.archive-lightbox-close:focus-visible,
.wiki-morph-close:hover,
.wiki-morph-close:focus-visible,
.explorer-close:hover,
.explorer-close:focus-visible,
.global-search-close:hover,
.global-search-close:focus-visible,
.morph-db-close:hover,
.morph-db-close:focus-visible,
.character-db-close:hover,
.character-db-close:focus-visible,
.alien-db-close:hover,
.alien-db-close:focus-visible,
.glossary-db-close:hover,
.glossary-db-close:focus-visible{
  outline:none !important;
  color:var(--acid) !important;
  border-color:color-mix(in srgb,var(--acid) 42%,transparent) !important;
  background:rgba(255,255,255,.045) !important;
}

.stats-overview-close svg,
.site-info-close svg,
.lightbox-close svg,
.archive-lightbox-close svg,
.wiki-morph-close svg,
.explorer-close svg,
.global-search-close svg,
.morph-db-close svg,
.character-db-close svg,
.alien-db-close svg,
.glossary-db-close svg{
  display:block !important;
  width:19px !important;
  height:19px !important;
  margin:0 !important;
  padding:0 !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  transform:none !important;
}


/* =========================================================
   ANIBASE — definitive overlay scrollbar styling
   ========================================================= */

/* Do not add scrollbar-width / scrollbar-color here: keep the
   WebKit scrollbar rules in control on Chromium. */
:is(
  .stats-overview,
  .database-explorer,
  .global-search-panel,
  .morph-database-panel,
  .character-database-panel,
  .alien-database-panel,
  .glossary-database-panel,
  .wiki-morph-lightbox,
  .archive-lightbox,
  .site-info-modal
) *::-webkit-scrollbar {
  width:8px !important;
  height:8px !important;
}

:is(
  .stats-overview,
  .database-explorer,
  .global-search-panel,
  .morph-database-panel,
  .character-database-panel,
  .alien-database-panel,
  .glossary-database-panel,
  .wiki-morph-lightbox,
  .archive-lightbox,
  .site-info-modal
) *::-webkit-scrollbar-track {
  background:#07100f !important;
  border-radius:99px !important;
}

:is(
  .stats-overview,
  .database-explorer,
  .global-search-panel,
  .morph-database-panel,
  .character-database-panel,
  .alien-database-panel,
  .glossary-database-panel,
  .wiki-morph-lightbox,
  .archive-lightbox,
  .site-info-modal
) *::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#20d8d4 0%,#20d8d4 30%,#83ff14 70%,#83ff14 100%) !important;
  border:1px solid #07100f !important;
  border-radius:99px !important;
}

.stats-column-scroll::-webkit-scrollbar-thumb,
.stats-book-timeline::-webkit-scrollbar-thumb,
.stats-year-chart::-webkit-scrollbar-thumb {
  background:linear-gradient(90deg,#20d8d4 0%,#20d8d4 30%,#83ff14 70%,#83ff14 100%) !important;
}

html::-webkit-scrollbar-thumb,
.book-list::-webkit-scrollbar-thumb,
.reader-scroll::-webkit-scrollbar-thumb {
  background:linear-gradient(180deg,#20d8d4 0%,#83ff14 100%) !important;
  border-radius:99px !important;
}

.stats-overview .stats-kpi-label,
.stats-overview .eyebrow {
  color: var(--cyan);
}

/* =========================================================
   ANIBASE — Cover quote in book hero
   ========================================================= */

.book-quote{
  max-width:min(760px,82vw);
  margin:12px 0 0;
  padding:0;
  border:0;
  color:rgba(244,247,245,.86);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.45;
  font-style:normal;
  text-wrap:balance;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
}

.book-quote[hidden]{
  display:none;
}

.book-quote + .book-meta{
  margin-top:14px;
}

@media(max-width:640px){
  .book-quote{
    max-width:100%;
    margin-top:10px;
    font-size:15px;
    line-height:1.4;
  }
}

/* =========================================================
   ANIBASE — Manual schematic links
   Inline links added explicitly in data.js. The SCHEMATIC
   badge remains exclusive to automatic New Words terms.
   ========================================================= */

.manual-schematic-link{
  cursor:pointer;
  /*color:color-mix(in srgb,var(--page-book-color-2) 62%,white 38%);*/
  text-decoration-line:underline;
  text-decoration-style:solid;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
      text-decoration-color:
color-mix(in srgb, var(--page-book-color-2) 72%, white 28%);
  transition:
    color .18s ease,
    text-decoration-color .18s ease,
    filter .18s ease;
}

.manual-schematic-link:hover,
.manual-schematic-link:focus-visible{
  outline:none;
  color:color-mix(in srgb,var(--page-book-color-2) 72%,white 28%);
  text-decoration-color:color-mix(in srgb,var(--page-book-color-2) 75%,transparent);
  filter:brightness(1.12);
}

@media (max-width: 900px) {

  body.library-open {
    overflow: hidden;
  }

  .library {
    display: none;
    position: fixed;
    z-index: 80;

    top: 76px;
    right: 12px;
    bottom: 12px;
    left: 12px;

    width: auto;
    max-width: 420px;
    height: auto;
    max-height: calc(100dvh - 88px);

    margin-left: auto;
    overflow: hidden;
  }

  .library.open {
    display: flex;
  }

  .library .book-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  #libraryToggle[aria-expanded="true"] {
    border-color: rgba(131,255,20,.42);
    color: var(--acid);
    background: #0c201d;
  }
}

@media (max-width: 520px) {

  .library {
    right: 8px;
    bottom: 8px;
    left: 8px;

    max-width: none;
    border-radius: 18px;
  }
}