.bookpluging-reader{
  --bp-ui-border: color-mix(in srgb, var(--bp-text, #f4f1e8) 14%, var(--bp-bg, #0c0c0f));
  --bp-ui-surface: color-mix(in srgb, var(--bp-sidebar-bg, #14141a) 70%, var(--bp-bg, #0c0c0f));
  display:flex;
  flex-direction:column;
  border:none;
  border-radius:0;
  overflow:hidden;
  background: var(--bp-bg, #0c0c0f);
  max-width:100%;
  width:100%;
  color: var(--bp-text, #f4f1e8);
  min-height: clamp(680px, 96vh, 1400px);
  position:relative;
  isolation: isolate;
  contain: layout style;
  -webkit-tap-highlight-color: transparent;
}

.bookpluging-reader__backdrop{
  display:block;
  appearance:none;
  -webkit-appearance:none;
  position:fixed;
  inset:0;
  z-index:100000;
  background: rgba(0,0,0,.55) !important;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  font-size:0;
  line-height:0;
  color:transparent;
  opacity:0;
  visibility:hidden;
  transition: opacity .22s ease, visibility .22s ease;
  outline: none !important;
  box-shadow: none !important;
}
.bookpluging-reader__backdrop:hover,
.bookpluging-reader__backdrop:active,
.bookpluging-reader__backdrop:focus,
.bookpluging-reader__backdrop:focus-visible{
  background: rgba(0,0,0,.6) !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.bookpluging-reader.is-toc-open .bookpluging-reader__backdrop{
  opacity:1;
  visibility:visible;
}

.bookpluging-reader__sidebar{
  position:fixed;
  top:0;
  right:0;
  left:auto;
  width:min(320px, 90vw);
  height:100dvh;
  max-height:100dvh;
  z-index:100010;
  margin:0;
  padding:14px;
  background: var(--bp-sidebar-bg, #14141a);
  overflow:auto;
  border-inline-start:1px solid var(--bp-ui-border);
  box-shadow: -8px 0 32px rgba(0,0,0,.35);
  transform: translateX(105%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}

.bookpluging-reader.is-toc-open .bookpluging-reader__sidebar{
  transform: translateX(0);
}

.bookpluging-reader__sidebarHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--bp-ui-border);
}

.bookpluging-reader__sidebarTitle{
  font-weight:700;
  font-size:15px;
  line-height:1.3;
  color: var(--bp-accent, #c9ab4c);
}

.bookpluging-reader__tocDismiss{
  border:1px solid var(--bp-ui-border);
  background: color-mix(in srgb, var(--bp-accent, #c9ab4c) 12%, transparent);
  color: inherit;
  width:38px;
  height:38px;
  border-radius:10px;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.bookpluging-reader__search{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--bp-ui-border);
  border-radius:10px;
  margin-bottom:12px;
  background: color-mix(in srgb, var(--bp-bg, #0c0c0f) 55%, var(--bp-sidebar-bg, #14141a));
  color: inherit;
  font:inherit;
}
.bookpluging-reader__search::placeholder{
  color: var(--bp-muted, rgba(244, 241, 232, .55));
}

.bookpluging-reader__toc{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.bookpluging-reader__tocItem{
  width:100%;
  text-align:right;
  padding:11px 12px;
  border:1px solid var(--bp-ui-border);
  border-radius:11px;
  background: var(--bp-ui-surface);
  cursor:pointer;
  font:inherit;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.bookpluging-reader__tocItem:hover{
  border-color: color-mix(in srgb, var(--bp-accent, #c9ab4c) 45%, var(--bp-ui-border));
  background: color-mix(in srgb, var(--bp-accent, #c9ab4c) 8%, var(--bp-ui-surface));
}
.bookpluging-reader__tocItem.is-active{
  border-color: var(--bp-accent, #c9ab4c);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--bp-accent, #c9ab4c) 55%, transparent);
  background: color-mix(in srgb, var(--bp-accent, #c9ab4c) 14%, var(--bp-ui-surface));
}

.bookpluging-reader__main{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  flex:1 1 auto;
  height:100%;
  background-color: var(--bp-bg) !important;
}
.bookpluging-reader__main:hover{
  background-color: var(--bp-bg) !important;
}

.bookpluging-reader__toolbar{
  flex:0 0 auto;
  background: var(--bp-bg, #0c0c0f);
}

.bookpluging-reader__toolbar--top{
  display:grid;
  grid-template-columns: 44px 1fr 44px;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--bp-ui-border);
}

.bookpluging-reader__toolbarPad{
  width:44px;
  height:40px;
}

.bookpluging-reader__tocToggle{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:44px;
  height:40px;
  padding:0;
  border:1px solid var(--bp-ui-border);
  border-radius:11px;
  background: color-mix(in srgb, var(--bp-accent, #c9ab4c) 14%, var(--bp-ui-surface));
  color: var(--bp-accent, #c9ab4c);
  cursor:pointer;
}

.bookpluging-reader__tocToggle-bars{
  display:block;
  width:20px;
  height:2px;
  background: currentColor;
  border-radius:1px;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
}

.bookpluging-reader__current{
  font-size:14px;
  font-weight:600;
  color: var(--bp-accent, #c9ab4c);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  min-width:0;
}

.bookpluging-reader__frameWrap{
  position:relative;
  flex:1 1 auto;
  min-height: clamp(620px, 82vh, 1280px);
  display:flex;
  flex-direction:column;
  background-color: var(--bp-bg, #0c0c0f) !important;
}
.bookpluging-reader__frameWrap:hover{
  background-color: var(--bp-bg) !important;
}

.bookpluging-reader__fabStack{
  position:absolute;
  inset-inline-start: 12px;
  bottom: 96px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:3;
  pointer-events:none;
}

.bookpluging-reader__fab{
  pointer-events:auto;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--bp-ui-border);
  background: color-mix(in srgb, var(--bp-bg, #0c0c0f) 82%, var(--bp-sidebar-bg));
  color: var(--bp-accent, #c9ab4c);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  padding:0;
}
.bookpluging-reader__fab:hover{
  border-color: color-mix(in srgb, var(--bp-accent, #c9ab4c) 50%, var(--bp-ui-border));
}

.bookpluging-reader__nav{
  border:1px solid var(--bp-ui-border);
  border-radius:10px;
  padding:8px 14px;
  background: var(--bp-ui-surface);
  cursor:pointer;
  font:inherit;
  color: inherit;
  white-space:nowrap;
}
.bookpluging-reader__nav:hover:not(:disabled){
  border-color: color-mix(in srgb, var(--bp-accent, #c9ab4c) 45%, var(--bp-ui-border));
}
.bookpluging-reader__nav:disabled{
  opacity:0.38;
  cursor:not-allowed;
}

.bookpluging-reader__endChapter{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid var(--bp-ui-border);
  background: color-mix(in srgb, var(--bp-bg) 88%, var(--bp-sidebar-bg));
}

.bookpluging-reader__endChapter[hidden]{
  display:none !important;
}

.bookpluging-reader__frame{
  width:100%;
  flex:1 1 auto;
  min-height:clamp(620px, 84vh, 1320px);
  height:100%;
  border:0;
  background-color: var(--bp-bg, #0c0c0f) !important;
}
.bookpluging-reader__frame:hover{
  background-color: var(--bp-bg) !important;
}

@media (max-width: 900px){
  .bookpluging-reader{
    height: min(100dvh, 100vh) !important;
    max-height: 100dvh;
    min-height: min(100dvh, 100vh);
  }

  .bookpluging-reader__frameWrap{
    min-height: min(60dvh, 76vh);
  }

  .bookpluging-reader__frame{
    min-height: min(70dvh, 88vh);
  }
}