/* src/reader/book/book-motion.css */
.bf-binding,
body > main,
#bf-book-mockup .bf-reader,
#bf-book-mockup .bf-preview-toc {
  animation: none !important;
}
:is(#bf-book-mockup, .community-shell) .bf-moving-leaf {
  transform-origin: left center;
  backface-visibility: hidden;
  isolation: isolate;
  background-image: none !important;
  border: 1px solid light-dark(#b9ad94, #59616d) !important;
  box-shadow:
    inset 1px 0 14px #795a3840,
    inset -2px 0 5px #76512535,
    3px 0 0 light-dark(#d8cab0, #424a56),
    8px 8px 22px #0007 !important;
}
:is(#bf-book-mockup, .community-shell) .bf-moving-leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--bf-leaf-texture);
  background-size: var(--bf-leaf-texture-size);
  background-position: var(--bf-leaf-texture-position);
  opacity: var(--bf-leaf-texture-opacity);
  mix-blend-mode: var(--bf-leaf-blend);
  box-shadow: inset 0 0 14px #0002;
}
:is(#bf-book-mockup, .community-shell) .bf-moving-leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #0003,
      transparent 5%,
      transparent 94%,
      #fff2);
  border-right: 2px solid light-dark(#ad9b7d, #626c7a);
}
:is(#bf-book-mockup, .community-shell) .bf-moving-leaf > * {
  position: relative;
  z-index: 1;
}
:is(#bf-book-mockup, .community-shell) .bf-moving-leaf a,
:is(#bf-book-mockup, .community-shell) .bf-moving-leaf button {
  pointer-events: none;
}
.bf-toc a,
.bf-home-link,
button {
  transition:
    background-color .2s,
    color .2s,
    border-color .2s,
    box-shadow .2s;
}
@media (prefers-reduced-motion: reduce) {
  :is(#bf-book-mockup, .community-shell) .bf-moving-leaf {
    display: none;
  }
  .bf-toc a,
  .bf-home-link,
  button {
    transition: none;
  }
}
body:has(#root:empty) {
  background: #222b37;
}
html[style*=dark] body:has(#root:empty) {
  background: #101722;
}

/* src/reader/shell.css */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #f0f1f3;
  color: #272a30;
}
.reader-top {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid #e0e2e6;
  font: 14px system-ui, sans-serif;
  background: #fff;
}
.reader-top span:first-child {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -1px;
}
.reader-top span:last-child {
  color: #646b76;
}
main {
  padding: 40px 20px;
}
.reader-error {
  max-width: 720px;
  margin: auto;
  font: 18px/1.7 system-ui;
}
@media (max-width: 600px) {
  main {
    padding: 0;
  }
  .reader-top {
    padding: 0 20px;
  }
}

/* src/reader/book/mockup.css */
#bf-book-mockup {
  --bf-paper:light-dark(#f3ecdc,#292c32);
  --bf-ink:light-dark(#303746,#e8e8ee);
  --bf-muted:light-dark(#736f67,#b7b3ab);
  --bf-line:light-dark(#c7bba5,#555760);
  --bf-blue:light-dark(#386ea1,#93bde8);
  --bf-faint:light-dark(#dce3e8,#343e50);
  --bf-wear:.55;
  font:
    16px/1.6 Georgia,
    "Times New Roman",
    serif;
  color: var(--bf-ink);
  overflow-wrap: break-word;
}
#bf-book-mockup * {
  box-sizing: border-box;
}
#bf-book-mockup [hidden] {
  display: none !important;
}
#bf-book-mockup button,
#bf-book-mockup select {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
#bf-book-mockup button {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
}
#bf-book-mockup button:focus-visible,
#bf-book-mockup select:focus-visible {
  outline: 2px solid var(--bf-blue);
  outline-offset: 4px;
}
#bf-book-mockup button:disabled {
  opacity: .55;
  cursor: default;
}
#bf-book-mockup h1,
#bf-book-mockup h2,
#bf-book-mockup h3,
#bf-book-mockup p {
  margin: 0;
  font-weight: 400;
}
#bf-book-mockup h1 {
  font-size: 49px;
  line-height: 1.08;
  letter-spacing: -.035em;
}
#bf-book-mockup h2 {
  font-size: 33px;
  line-height: 1.2;
  margin: 8px 0 24px;
}
#bf-book-mockup h3 {
  font-size: 22px;
  line-height: 1.35;
  margin: 8px 0 12px;
}
#bf-book-mockup .bf-stage {
  padding: 28px 23px 35px;
  background:
    radial-gradient(
      ellipse at 50% 15%,
      light-dark(#505663, #26303c),
      light-dark(#292e39, #121923));
  border-radius: 7px;
}
#bf-book-mockup .bf-binding {
  padding: 13px 13px 18px;
  border: 1px solid #6483a270;
  border-radius: 10px 15px 16px 9px;
  background:
    repeating-linear-gradient(
      23deg,
      #ffffff03 0 1px,
      transparent 1px 4px),
    linear-gradient(
      90deg,
      #14273b,
      #304c68 2%,
      #1b3650 6%,
      #18324c 94%,
      #3c5e7b 98%,
      #203c57);
  box-shadow: 0 19px 27px #0006, 0 2px 1px #122036;
  position: relative;
}
#bf-book-mockup .bf-binding:before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid #8aa6c148;
  border-radius: 6px 12px 12px 6px;
  pointer-events: none;
}
#bf-book-mockup .bf-sheet {
  min-height: 660px;
  position: relative;
  isolation: isolate;
  background: var(--bf-paper);
  border-radius: 3px 8px 14px 4px;
  box-shadow:
    0 2px 0 #bbad95,
    0 4px 0 #e3dac6,
    0 6px 0 #a99b84,
    0 8px 0 #ddd1b9,
    0 10px 0 #b9ac98;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#bf-book-mockup .bf-sheet:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 2% 2%,
      #99683c40,
      transparent 19%),
    radial-gradient(
      ellipse at 100% 95%,
      #85521d45,
      transparent 26%),
    radial-gradient(
      ellipse at 95% 2%,
      #b18b4840,
      transparent 16%),
    repeating-linear-gradient(
      92deg,
      #633d1e08 0 1px,
      transparent 1px 5px);
  opacity: var(--bf-wear);
  box-shadow: inset 1px 0 14px #795a3840, inset -2px 0 5px #76512535;
  border-radius: inherit;
}
#bf-book-mockup .bf-sheet:after {
  content: "";
  position: absolute;
  left: calc(50% - 21px);
  top: 0;
  bottom: 0;
  width: 42px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #6c51201a 35%,
      #29201230 49%,
      #fff4 54%,
      #57442812 71%,
      transparent);
  pointer-events: none;
  z-index: 2;
}
#bf-book-mockup .bf-sheet.bf-full {
  display: block;
}
#bf-book-mockup .bf-sheet.bf-full:after {
  left: 0;
  width: 18px;
  background:
    linear-gradient(
      90deg,
      #32281920,
      transparent);
}
#bf-book-mockup .bf-page {
  padding: 25px 35px 24px;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
#bf-book-mockup .bf-page + .bf-page {
  padding-left: 39px;
}
#bf-book-mockup .bf-full > .bf-page {
  min-height: 660px;
  padding-inline: 42px;
}
#bf-book-mockup .bf-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 25px;
  border-bottom: 1px solid var(--bf-line);
  font: 12px/1.5 system-ui, sans-serif;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-home-link {
  color: var(--bf-blue);
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 5px 0;
  white-space: nowrap;
}
#bf-book-mockup .bf-kicker {
  font: 11px/1.5 system-ui, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-small {
  font: 13px/1.6 system-ui, sans-serif;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-footer {
  margin-top: auto;
  padding-top: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  color: var(--bf-muted);
  font: 12px/1.5 Georgia, serif;
}
#bf-book-mockup .bf-title-page {
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 650px;
}
#bf-book-mockup .bf-title-page h1 {
  color: var(--bf-blue);
  margin: 28px 0 22px;
}
#bf-book-mockup .bf-title-frame {
  width: 100%;
  min-height: 435px;
  padding: 32px 8px;
  border-block: 1px solid var(--bf-blue);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#bf-book-mockup .bf-title-frame:before,
#bf-book-mockup .bf-title-frame:after {
  content: "";
  position: absolute;
  left: calc(50% - 22px);
  width: 44px;
  height: 1px;
  background: var(--bf-blue);
}
#bf-book-mockup .bf-title-frame:before {
  top: 5px;
}
#bf-book-mockup .bf-title-frame:after {
  bottom: 5px;
}
#bf-book-mockup .bf-logo-space {
  height: 80px;
  width: 150px;
  display: grid;
  place-items: center;
}
#bf-book-mockup .bf-logo-space img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
#bf-book-mockup .bf-title-rule {
  width: 34px;
  height: 1px;
  background: var(--bf-blue);
  margin: 4px auto 44px;
}
#bf-book-mockup .bf-toc {
  list-style: none;
  padding: 0;
  margin: 3px 0 35px;
}
#bf-book-mockup .bf-toc li {
  border-bottom: 1px solid var(--bf-line);
}
#bf-book-mockup .bf-toc button {
  width: 100%;
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) 16px;
  gap: 12px;
  align-items: center;
  padding: 21px 0;
}
#bf-book-mockup .bf-toc button:hover,
#bf-book-mockup .bf-rows button:hover {
  color: var(--bf-blue);
}
#bf-book-mockup .bf-toc-label {
  font-size: 22px;
  line-height: 1.3;
}
#bf-book-mockup .bf-number {
  font: 12px/1.5 Georgia, serif;
  color: var(--bf-blue);
}
#bf-book-mockup .bf-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 27px;
  height: 25px;
  background:
    linear-gradient(
      135deg,
      transparent 47%,
      #b3a98e66 50%,
      light-dark(#e5d5b4, #454039) 54%,
      transparent 90%);
  pointer-events: none;
}
#bf-book-mockup .bf-index {
  display: flex;
  flex-direction: column;
  margin: 1px 0 22px;
}
#bf-book-mockup .bf-index button {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 40px;
  border-bottom: 1px solid color-mix(in srgb, var(--bf-line) 50%, transparent);
}
#bf-book-mockup .bf-index button span:first-child {
  width: 24px;
  color: var(--bf-blue);
  font-size: 12px;
}
#bf-book-mockup .bf-index button[aria-pressed=true] {
  background: var(--bf-faint);
  box-shadow: inset 3px 0 0 var(--bf-blue);
  color: var(--bf-blue);
}
#bf-book-mockup .bf-index-title {
  font: 11px/1.5 system-ui, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bf-muted);
  margin: 17px 12px 8px;
}
#bf-book-mockup .bf-rows {
  display: flex;
  flex-direction: column;
}
#bf-book-mockup .bf-rows > button {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 23px 0;
  border-bottom: 1px solid var(--bf-line);
  width: 100%;
}
#bf-book-mockup .bf-row-title {
  flex: 1;
  font-size: 20px;
  line-height: 1.4;
}
#bf-book-mockup .bf-action {
  padding: 10px 15px !important;
  border: 1px solid var(--bf-blue) !important;
  color: var(--bf-blue) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  font: 13px/1.5 system-ui, sans-serif !important;
  border-radius: 2px;
}
#bf-book-mockup .bf-action:hover {
  background: var(--bf-faint);
}
#bf-book-mockup .bf-text-button {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 9px 0 !important;
  color: var(--bf-blue) !important;
  font: 13px/1.6 system-ui, sans-serif !important;
}
#bf-book-mockup .bf-empty {
  color: var(--bf-muted);
  padding: 50px 0;
  font-style: italic;
  text-align: center;
}
#bf-book-mockup .bf-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font: 13px/1.5 system-ui, sans-serif;
}
#bf-book-mockup .bf-controls button {
  border: 1px solid var(--bf-line);
  padding: 7px 11px;
  border-radius: 2px;
  min-width: 35px;
  text-align: center;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
#bf-book-mockup .bf-controls button[aria-pressed=true] {
  background: var(--bf-faint);
  color: var(--bf-blue);
}
#bf-book-mockup .bf-controls output {
  min-width: 30px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#bf-book-mockup .bf-reader {
  width: min(100%, 650px);
  margin: 28px auto 35px;
  font-size: var(--bf-reader-size,19px);
  line-height: 1.85;
}
#bf-book-mockup .bf-reader h2 {
  font-size: 35px;
  text-align: center;
  margin: 12px 0 42px;
}
#bf-book-mockup .bf-reader .bf-kicker {
  text-align: center;
}
#bf-book-mockup .bf-reader p {
  margin: 0 0 1.25em;
  text-align: left;
}
#bf-book-mockup .bf-reader p:first-of-type:first-letter {
  float: left;
  font-size: 3.5em;
  line-height: .9;
  padding: 8px 9px 0 0;
  color: var(--bf-blue);
}
#bf-book-mockup .bf-reader-end {
  border-top: 1px solid var(--bf-line);
  padding-top: 23px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
#bf-book-mockup .bf-heading {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 0 26px;
}
#bf-book-mockup .bf-heading h2 {
  margin: 0;
}
#bf-book-mockup .bf-atlas-layout {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 32px;
  flex: 1;
}
#bf-book-mockup .bf-atlas-side {
  border-right: 1px solid var(--bf-line);
  padding-right: 24px;
}
#bf-book-mockup .bf-atlas-side .bf-index button {
  padding: 12px 9px;
  font-size: 17px;
}
#bf-book-mockup .bf-continent-title {
  padding: 17px 0 21px;
  border-bottom: 1px solid var(--bf-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
#bf-book-mockup .bf-continent-title h3 {
  font-size: 30px;
  margin: 0;
}
#bf-book-mockup .bf-mark {
  color: var(--bf-blue);
  font-size: 39px;
  letter-spacing: .2em;
  line-height: 1;
}
#bf-book-mockup .bf-categories {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  margin: 12px 0 23px;
}
#bf-book-mockup .bf-categories button {
  padding: 17px 0;
  border-bottom: 1px solid var(--bf-line);
  display: flex;
  align-items: center;
  gap: 10px;
}
#bf-book-mockup .bf-categories button[aria-pressed=true] {
  color: var(--bf-blue);
  text-decoration: underline;
  text-underline-offset: 6px;
}
#bf-book-mockup .bf-categories button span {
  flex: 1;
}
#bf-book-mockup [data-continent=astralis] {
  --bf-blue:light-dark(#5b619b,#b5b8ef);
  --bf-faint:light-dark(#e1e2ee,#38394e);
}
#bf-book-mockup [data-continent=ashgrid] {
  --bf-blue:light-dark(#436c8c,#95bfd9);
  --bf-faint:light-dark(#dde4e5,#32434b);
}
#bf-book-mockup .bf-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 18px 0 25px;
}
#bf-book-mockup .bf-avatar {
  width: 74px;
  height: 86px;
  border: 1px solid var(--bf-line);
  background: var(--bf-faint);
  display: grid;
  place-items: center;
  color: var(--bf-blue);
  flex: none;
}
#bf-book-mockup .bf-profile h3 {
  margin: 0;
}
#bf-book-mockup .bf-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 32px;
  margin: 15px 0 30px;
}
#bf-book-mockup .bf-account-grid > section {
  border-top: 1px solid var(--bf-line);
  padding-top: 15px;
  min-width: 0;
}
#bf-book-mockup .bf-progress {
  margin: 15px 0 20px;
  height: 4px;
  display: flex;
  gap: 8px;
}
#bf-book-mockup .bf-progress span {
  background: var(--bf-line);
  flex: 1;
}
#bf-book-mockup .bf-progress .bf-done {
  background: var(--bf-blue);
}
#bf-book-mockup .bf-counts {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin: 20px 0;
}
#bf-book-mockup .bf-counts strong {
  display: block;
  color: var(--bf-blue);
  font-size: 28px;
  font-weight: 400;
}
#bf-book-mockup .bf-avatar-options {
  display: flex;
  gap: 10px;
  margin: 10px 0 20px;
  flex-wrap: wrap;
}
#bf-book-mockup .bf-avatar-options button {
  padding: 11px;
  border: 1px solid var(--bf-line);
  color: var(--bf-blue);
}
#bf-book-mockup .bf-avatar-options button[aria-pressed=true] {
  background: var(--bf-faint);
  border-color: var(--bf-blue);
}
#bf-book-mockup .bf-journal {
  --bf-paper:light-dark(#e5d7b9,#302c25);
  --bf-ink:light-dark(#464137,#e6dcc7);
  --bf-line:light-dark(#b7a27d,#645844);
  --bf-muted:light-dark(#766953,#bcaa8b);
  --bf-blue:light-dark(#3c6590,#9ab9da);
  --bf-wear:.95;
  padding: 21px 16px 19px;
  background:
    repeating-linear-gradient(
      34deg,
      #c5a38012 0 1px,
      transparent 1px 8px),
    linear-gradient(
      90deg,
      #332820,
      #6b5543 3%,
      #463426 8%,
      #604c3c 95%,
      #30271f);
  border-color: #9b7e58;
  border-radius: 10px 15px 23px 9px;
}
#bf-book-mockup .bf-journal:before {
  border: 1px dashed #bb997d75;
  inset: 7px;
}
#bf-book-mockup .bf-journal .bf-sheet {
  border-radius: 2px 5px 23px 4px;
  background:
    radial-gradient(
      ellipse at 88% 87%,
      #8d562632,
      transparent 24%),
    var(--bf-paper);
}
#bf-book-mockup .bf-journal .bf-sheet:before {
  background:
    radial-gradient(
      ellipse at 15% 0%,
      #674a253b,
      transparent 23%),
    radial-gradient(
      ellipse at 97% 98%,
      #79552560,
      transparent 35%),
    linear-gradient(
      117deg,
      transparent 32%,
      #68462409 32.2%,
      #fff2 32.5%,
      transparent 33%),
    linear-gradient(
      71deg,
      transparent 74%,
      #68462409 74.3%,
      #fff1 74.5%,
      transparent 75%);
  box-shadow: inset 0 0 21px #67492845;
}
#bf-book-mockup .bf-journal .bf-page {
  padding-top: 38px;
}
#bf-book-mockup .bf-hand {
  font-family:
    "Caveat",
    "Segoe Print",
    cursive;
  color: var(--bf-blue);
  transform: rotate(-4deg);
  font-size: 26px;
  line-height: 1.4;
}
#bf-book-mockup .bf-journal h2 {
  font-family:
    "Caveat",
    "Segoe Print",
    cursive;
  font-size: 44px;
  transform: rotate(-3deg);
  margin: 18px 0 33px;
  color: var(--bf-blue);
}
#bf-book-mockup .bf-ribbons {
  position: absolute;
  z-index: 4;
  right: 42px;
  top: 0;
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
#bf-book-mockup .bf-ribbons button {
  background:
    linear-gradient(
      90deg,
      #214c75,
      #447bab 47%,
      #305b83);
  color: #f1edf0;
  font: 12px/1.5 system-ui, sans-serif;
  padding: 15px 12px 24px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%);
  box-shadow: inset 3px 0 0 #97b8d340;
  min-width: 65px;
  text-align: center;
}
#bf-book-mockup .bf-ribbons button:nth-child(2) {
  background:
    linear-gradient(
      90deg,
      #635443,
      #8a7961,
      #675644);
}
#bf-book-mockup .bf-ribbons button[aria-pressed=true] {
  padding-bottom: 36px;
}
#bf-book-mockup .bf-journal .bf-top {
  min-height: 50px;
}
#bf-book-mockup .bf-journal .bf-page:nth-of-type(2) .bf-top {
  padding-right: 170px;
}
#bf-book-mockup .bf-lines {
  display: grid;
  gap: 16px;
  margin: 18px 0 26px;
  opacity: .58;
  width: 100%;
}
#bf-book-mockup .bf-lines span {
  height: 5px;
  border-radius: 50%;
  background: var(--bf-line);
}
#bf-book-mockup .bf-lines span:nth-child(3n) {
  width: 87%;
}
#bf-book-mockup .bf-lines span:last-child {
  width: 62%;
}
#bf-book-mockup .bf-journal-lines {
  transform: rotate(-1deg);
  background: repeating-linear-gradient(transparent 0 30px, color-mix(in srgb, var(--bf-line) 38%, transparent) 30px 31px);
  padding: 13px 5px 16px;
  min-height: 260px;
}
#bf-book-mockup .bf-journal-lines .bf-lines {
  gap: 26px;
  opacity: .55;
}
#bf-book-mockup .bf-paper-note {
  background: light-dark(#eee3c9, #3e392d);
  box-shadow: 2px 6px 11px #30210f22;
  border: 1px solid var(--bf-line);
  padding: 25px 22px;
  transform: rotate(3deg);
  margin: 30px 8px 22px;
  position: relative;
}
#bf-book-mockup .bf-paper-note:before {
  content: "";
  width: 85px;
  height: 25px;
  background: #b9a57662;
  position: absolute;
  top: -11px;
  left: calc(50% - 42px);
  transform: rotate(-7deg);
  border-inline: 2px dotted #ebddbd66;
}
#bf-book-mockup .bf-envelope {
  width: 225px;
  max-width: 100%;
  height: 145px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px auto 20px;
  background:
    linear-gradient(
      30deg,
      transparent 48.8%,
      #977e5140 49%,
      #977e5140 49.5%,
      transparent 50%),
    linear-gradient(
      -30deg,
      transparent 48.8%,
      #977e5140 49%,
      #977e5140 49.5%,
      transparent 50%),
    light-dark(#d6c6a2, #514937);
  border: 1px solid #a48e66 !important;
  box-shadow: 3px 7px 9px #0002;
  transform: rotate(-7deg);
  font:
    26px/1.5 "Caveat",
    "Segoe Print",
    cursive !important;
}
#bf-book-mockup .bf-envelope:hover {
  transform: rotate(-3deg);
}
#bf-book-mockup .bf-toast {
  position: absolute;
  bottom: 25px;
  right: 24px;
  z-index: 8;
  width: 320px;
  max-width: calc(100% - 48px);
  padding: 19px 21px;
  background: var(--bf-paper);
  color: var(--bf-ink);
  box-shadow: 0 10px 30px #0005;
  border-left: 4px solid var(--bf-blue);
  border-block: 1px solid var(--bf-line);
  border-right: 1px solid var(--bf-line);
}
#bf-book-mockup .bf-toast h3 {
  font-size: 20px;
}
#bf-book-mockup .bf-toast-close {
  float: right;
  padding: 0 0 12px 12px !important;
  font: 20px/1 system-ui, sans-serif !important;
}
@media (max-width: 700px) {
  #bf-book-mockup .bf-stage {
    padding: 16px 10px 26px;
  }
  #bf-book-mockup .bf-binding {
    padding: 9px 8px 15px;
  }
  #bf-book-mockup .bf-sheet {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  #bf-book-mockup .bf-sheet:after {
    display: none;
  }
  #bf-book-mockup .bf-page,
  #bf-book-mockup .bf-page + .bf-page,
  #bf-book-mockup .bf-full > .bf-page {
    padding: 23px;
    min-height: 0;
  }
  #bf-book-mockup .bf-page + .bf-page {
    border-top: 1px solid var(--bf-line);
  }
  #bf-book-mockup .bf-title-page {
    min-height: 370px;
  }
  #bf-book-mockup .bf-title-frame {
    min-height: 335px;
    padding: 20px 5px;
  }
  #bf-book-mockup h1 {
    font-size: 40px;
  }
  #bf-book-mockup h2 {
    font-size: 29px;
  }
  #bf-book-mockup .bf-logo-space {
    height: 45px;
  }
  #bf-book-mockup .bf-title-rule {
    margin-bottom: 15px;
  }
  #bf-book-mockup .bf-atlas-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  #bf-book-mockup .bf-atlas-side {
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--bf-line);
  }
  #bf-book-mockup .bf-atlas-side .bf-index {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0 13px;
  }
  #bf-book-mockup .bf-atlas-side .bf-index button {
    flex: 1;
    font-size: 15px;
  }
  #bf-book-mockup .bf-account-grid {
    grid-template-columns: 1fr;
  }
  #bf-book-mockup .bf-reader {
    margin-top: 14px;
  }
  #bf-book-mockup .bf-reader h2 {
    font-size: 29px;
  }
  #bf-book-mockup .bf-journal .bf-page:first-of-type {
    padding-top: 83px;
  }
  #bf-book-mockup .bf-journal .bf-page:nth-of-type(2) .bf-top {
    padding-right: 0;
  }
  #bf-book-mockup .bf-ribbons {
    right: 27px;
    gap: 8px;
  }
  #bf-book-mockup .bf-ribbons button {
    padding-top: 10px;
  }
  #bf-book-mockup .bf-categories {
    column-gap: 15px;
  }
  #bf-book-mockup .bf-toast {
    position: relative;
    right: auto;
    bottom: auto;
    margin: 10px auto 25px;
  }
  #bf-book-mockup .bf-top {
    gap: 10px;
  }
  #bf-book-mockup .bf-toc button {
    gap: 8px;
  }
  #bf-book-mockup .bf-toc-label {
    font-size: 20px;
  }
}
@media (pointer: coarse) {
  #bf-book-mockup button {
    min-height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #bf-book-mockup * {
    transition: none !important;
  }
}
#bf-book-mockup {
  font-family:
    "EB Garamond",
    Georgia,
    serif;
  font-size: 18px;
  --bf-paper-photo:url("./paper-XFEIVHT6.webp");
}
#bf-book-mockup h2,
#bf-book-mockup h3,
#bf-book-mockup .bf-toc-label {
  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;
  font-weight: 500;
}
#bf-book-mockup h2 {
  font-size: 39px;
}
#bf-book-mockup h1 {
  font-family: Georgia, serif;
}
#bf-book-mockup .bf-stage {
  padding: 32px 23px 38px;
  background:
    radial-gradient(
      ellipse at 40% 15%,
      light-dark(#373f49, #202832),
      light-dark(#171c23, #0e131a));
}
#bf-book-mockup .bf-binding {
  perspective: 1700px;
  border-radius: 8px 13px 16px 10px;
  box-shadow: 0 24px 28px #0007, 4px 6px 1px #08121d;
}
#bf-book-mockup .bf-sheet {
  border-radius: 3px 6px 12px 3px;
  background: var(--bf-paper);
  transition: background-color .45s ease, transform .6s ease;
}
#bf-book-mockup .bf-sheet:before {
  background-image: var(--bf-paper-photo);
  background-size: 100% 100%;
  background-position: center;
  opacity: .95;
  filter: sepia(calc(var(--bf-wear) * .22)) contrast(calc(.98 + var(--bf-wear) * .06));
  box-shadow: inset 0 0 13px #6d4e2b28;
  border-radius: inherit;
}
#bf-book-mockup .bf-sheet:after {
  width: 30px;
  left: calc(50% - 15px);
  background:
    linear-gradient(
      90deg,
      transparent,
      #34251521 40%,
      #20150d2b 50%,
      #fff3 58%,
      transparent);
}
#bf-book-mockup .bf-sheet.bf-full:before {
  background-size: 200% 100%;
  background-position: right center;
}
#bf-book-mockup .bf-sheet.bf-full:after {
  left: 0;
  width: 10px;
}
#bf-book-mockup .bf-page {
  padding-top: 34px;
  padding-bottom: 30px;
}
#bf-book-mockup .bf-toc-label {
  font-size: 27px;
}
#bf-book-mockup .bf-toc button {
  transition: transform .2s, color .2s;
}
#bf-book-mockup .bf-toc button:hover {
  transform: translateX(6px);
}
#bf-book-mockup .bf-title-frame {
  border: 0;
  min-height: 435px;
}
#bf-book-mockup .bf-title-frame:before,
#bf-book-mockup .bf-title-frame:after {
  display: none;
}
#bf-book-mockup .bf-title-page h1 {
  font-size: 45px;
}
#bf-book-mockup .bf-reader {
  font-family:
    "EB Garamond",
    Georgia,
    serif;
}
#bf-book-mockup .bf-index button {
  transition: background .22s, transform .22s;
}
#bf-book-mockup .bf-index button:hover {
  transform: translateX(3px);
}
#bf-book-mockup .bf-index .bf-part-copy {
  width: auto !important;
  flex: 1;
  color: inherit !important;
  font-size: 16px !important;
  line-height: 1.2;
}
#bf-book-mockup .bf-part-copy small {
  display: block;
  font: 11px/1.5 system-ui, sans-serif;
  color: var(--bf-muted);
  margin-top: 4px;
}
#bf-book-mockup .bf-turn-leaf {
  position: absolute;
  left: 50%;
  top: 13px;
  bottom: 18px;
  width: calc(50% - 13px);
  z-index: 20;
  background: var(--bf-paper);
  background-image: var(--bf-paper-photo);
  background-size: 200% 100%;
  background-position: right center;
  transform-origin: left center;
  backface-visibility: hidden;
  box-shadow: -5px 4px 12px #0003;
  overflow: hidden;
  pointer-events: none;
  display: block;
  border-radius: 0 4px 8px 0;
}
#bf-book-mockup .bf-turn-leaf * {
  pointer-events: none;
}
#bf-book-mockup .bf-binding[data-continent=velmora] {
  --bf-paper:light-dark(#ecdfbd,#2b2d28);
  --bf-blue:light-dark(#446a77,#bdd0c5);
  --bf-faint:light-dark(#e1dbc6,#3b4139);
  background:
    linear-gradient(
      110deg,
      #273a43,
      #516466 35%,
      #3b4954 65%,
      #272b3b);
}
#bf-book-mockup .bf-binding[data-continent=astralis] {
  --bf-paper:light-dark(#dce3f2,#171f38);
  --bf-ink:light-dark(#293450,#e4eaff);
  --bf-muted:light-dark(#5e6983,#b0bdda);
  --bf-line:light-dark(#afbcd5,#4b5b83);
  --bf-blue:light-dark(#455ba3,#c2cdfd);
  --bf-faint:light-dark(#ced9ee,#29365a);
  background:
    radial-gradient(
      ellipse at 25% 10%,
      #415b8f,
      #17274a 50%,
      #121b39);
  border-color: #798bac;
}
#bf-book-mockup .bf-binding[data-continent=ashgrid] {
  --bf-paper:light-dark(#eddbcd,#332923);
  --bf-ink:light-dark(#4a342d,#f2dfd0);
  --bf-muted:light-dark(#7b5e50,#d2b8a6);
  --bf-line:light-dark(#c7a289,#7b604e);
  --bf-blue:light-dark(#935339,#efb790);
  --bf-faint:light-dark(#dfc3ad,#4a3429);
  background:
    linear-gradient(
      130deg,
      #5f3a2d,
      #283f50 33%,
      #4c4232 67%,
      #74747b);
  border-color: #be9475;
}
#bf-book-mockup .bf-binding[data-continent] .bf-sheet:before {
  opacity: .38;
  mix-blend-mode: multiply;
}
#bf-book-mockup .bf-binding[data-continent=astralis] .bf-sheet:before {
  mix-blend-mode: luminosity;
  opacity: .22;
}
#bf-book-mockup [data-continent=velmora] .bf-continent-title {
  border-bottom: 3px double var(--bf-line);
  background:
    linear-gradient(
      110deg,
      #7c755112,
      #586e8012,
      #91725b12);
  padding: 22px 20px;
}
#bf-book-mockup [data-continent=astralis] .bf-continent-title {
  background:
    radial-gradient(
      circle at 78% 21%,
      #b4bdd640 0 1px,
      transparent 2px),
    radial-gradient(
      circle at 86% 74%,
      #b4bdd640 0 1px,
      transparent 2px),
    radial-gradient(
      circle at 70% 65%,
      #b4bdd640 0 1px,
      transparent 2px),
    linear-gradient(
      125deg,
      #3449810a,
      #6178bc30);
  border-block: 1px solid var(--bf-line);
  padding: 22px 20px;
}
#bf-book-mockup [data-continent=ashgrid] .bf-continent-title {
  border-left: 4px solid #aa6643;
  border-right: 4px solid #6a8e9c;
  border-top: 3px solid #8a805c;
  border-bottom: 3px solid #a7a2a1;
  padding: 20px;
  background: #9262440a;
}
#bf-book-mockup .bf-atlas-side {
  padding-right: 20px;
}
#bf-book-mockup .bf-continent-title h3 {
  font-size: 39px;
}
#bf-book-mockup .bf-mark {
  font-size: 47px;
}
#bf-book-mockup .bf-categories button {
  transition: background .2s, padding .2s;
}
#bf-book-mockup .bf-categories button:hover {
  background: var(--bf-faint);
  padding-left: 6px;
}
#bf-book-mockup .bf-journal .bf-sheet {
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1.4fr);
  background: var(--bf-paper);
}
#bf-book-mockup .bf-journal .bf-sheet:before {
  background-image: var(--bf-paper-photo);
  background-size: 200% 100%;
  background-position: right center;
  opacity: .72;
  mix-blend-mode: multiply;
  box-shadow: inset 0 0 16px #5c3e2150;
}
#bf-book-mockup .bf-journal .bf-sheet:after {
  left: 36.35%;
  width: 18px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #25150c3a,
      transparent);
}
#bf-book-mockup .bf-journal .bf-page {
  padding: 30px 27px;
  min-width: 0;
}
#bf-book-mockup .bf-journal .bf-page:first-of-type {
  background:
    linear-gradient(
      90deg,
      #55452c16,
      #55452c05);
  border-right: 1px solid #6a4a2430;
}
#bf-book-mockup .bf-journal .bf-page:nth-of-type(2) .bf-top {
  padding-right: 0;
}
#bf-book-mockup .bf-journal h2 {
  font-size: 36px;
  margin: 8px 0 26px;
}
#bf-book-mockup .bf-journal h3 {
  font-family:
    "Caveat",
    "Segoe Print",
    cursive;
  font-size: 35px;
  font-weight: 400;
  color: var(--bf-blue);
  transform: rotate(-2deg);
  margin: 0 0 18px;
}
#bf-book-mockup .bf-ribbons {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  margin: 0 -9px 20px 0;
}
#bf-book-mockup .bf-ribbons button {
  position: relative;
  display: block;
  min-width: 0;
  clip-path: polygon(0 0, 99% 2%, 96% 48%, 100% 97%, 0 100%);
  text-align: left;
  padding: 13px 22px 13px 15px !important;
  font:
    17px/1.3 "EB Garamond",
    Georgia,
    serif;
  transition: transform .25s, filter .25s;
  box-shadow: inset 3px 0 0 #cfdddc40;
  color: #f4e9d5;
  background:
    linear-gradient(
      90deg,
      #385a78,
      #53789a,
      #2e4c67);
}
#bf-book-mockup .bf-ribbons button:nth-child(2) {
  background:
    linear-gradient(
      90deg,
      #655165,
      #857084,
      #594556);
}
#bf-book-mockup .bf-ribbons button:nth-child(3) {
  background:
    linear-gradient(
      90deg,
      #6b664a,
      #8b8360,
      #625f45);
}
#bf-book-mockup .bf-ribbons button:nth-child(4) {
  background:
    linear-gradient(
      90deg,
      #645a43,
      #918067,
      #5e543f);
}
#bf-book-mockup .bf-ribbons button:nth-child(5) {
  background:
    linear-gradient(
      90deg,
      #535c72,
      #7c85a0,
      #4b5369);
}
#bf-book-mockup .bf-ribbons button[aria-pressed=true] {
  transform: translateX(9px);
  filter: brightness(1.16);
}
#bf-book-mockup .bf-ribbons button:hover {
  transform: translateX(6px);
}
#bf-book-mockup .bf-diary-first {
  font:
    24px/1.5 "Caveat",
    "Segoe Print",
    cursive !important;
  margin-bottom: 20px;
  padding: 6px 0 !important;
  color: var(--bf-blue) !important;
}
#bf-book-mockup .bf-paper-note {
  margin: 24px 4px 30px;
  transform: rotate(1.2deg);
  background: light-dark(#ede2c9, #393529);
  box-shadow: 3px 6px 8px #3a271f25;
}
#bf-book-mockup .bf-object-tray {
  position: relative;
  z-index: 0;
  margin: 5px 4px 0;
  padding: 20px 25px;
  background:
    linear-gradient(
      105deg,
      #493424,
      #70533c,
      #433227);
  color: #f0ddbd;
  border: 1px solid #ac8b62;
  border-radius: 3px 3px 10px 10px;
  box-shadow: inset 0 12px 20px #17100950;
}
#bf-book-mockup .bf-object-tray h3 {
  color: #f0ddbd;
  font: 27px/1.4 "Caveat", cursive;
}
#bf-book-mockup .bf-object-tray .bf-envelope {
  margin: 15px auto 20px;
  color: var(--bf-ink);
}
#bf-book-mockup .bf-object-tray .bf-paper-note {
  color: var(--bf-ink);
  max-width: 470px;
  margin: 25px auto;
}
#bf-book-mockup .bf-journal.bf-shifted .bf-sheet {
  transform: translateY(-8px) rotate(-.35deg);
  box-shadow: 3px 14px 20px #20120860;
}
#bf-book-mockup .bf-envelope {
  transition: transform .3s ease, box-shadow .3s;
}
#bf-book-mockup .bf-envelope:hover {
  transform: translateY(-4px) rotate(-3deg);
  box-shadow: 5px 12px 16px #0004;
}
#bf-book-mockup .bf-action,
#bf-book-mockup .bf-text-button {
  transition: background .2s, transform .2s;
}
#bf-book-mockup .bf-action:active {
  transform: translateY(1px);
}
@media (max-width: 700px) {
  #bf-book-mockup .bf-stage {
    padding: 20px 10px 28px;
  }
  #bf-book-mockup .bf-title-page h1 {
    font-size: 36px;
  }
  #bf-book-mockup .bf-toc-label {
    font-size: 24px;
  }
  #bf-book-mockup .bf-journal .bf-sheet {
    grid-template-columns: 1fr;
  }
  #bf-book-mockup .bf-journal .bf-sheet:after {
    display: none;
  }
  #bf-book-mockup .bf-journal .bf-page:first-of-type {
    padding-top: 25px;
  }
  #bf-book-mockup .bf-ribbons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-right: 0;
  }
  #bf-book-mockup .bf-ribbons button {
    font-size: 15px;
  }
  #bf-book-mockup .bf-ribbons button[aria-pressed=true] {
    transform: translateX(3px);
  }
  #bf-book-mockup .bf-turn-leaf {
    display: none;
  }
  #bf-book-mockup .bf-continent-title h3 {
    font-size: 33px;
  }
  #bf-book-mockup .bf-mark {
    font-size: 30px;
  }
  #bf-book-mockup .bf-object-tray {
    padding: 20px 16px;
  }
  #bf-book-mockup .bf-sheet:before {
    background-size: 200% 100%;
    background-position: right;
  }
  #bf-book-mockup .bf-journal .bf-sheet:before {
    background-size: 200% 100%;
    background-position: right;
  }
  #bf-book-mockup .bf-binding[data-continent] .bf-continent-title {
    padding: 16px 12px;
  }
}
#bf-book-mockup[data-theme=dark] .bf-sheet:before {
  opacity: .1;
  mix-blend-mode: luminosity;
}
@media (prefers-reduced-motion: reduce) {
  #bf-book-mockup *,
  #bf-book-mockup *:before,
  #bf-book-mockup *:after {
    animation: none !important;
    transition: none !important;
  }
  #bf-book-mockup .bf-turn-leaf {
    display: none;
  }
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: #161b22;
}
#bf-book-mockup .bf-source-preview {
  font: 12px/1.65 system-ui;
  color: var(--bf-muted);
  border-bottom: 1px solid var(--bf-line);
  padding: 0 0 13px;
  margin: 0 0 26px;
}
#bf-book-mockup .bf-source-preview summary {
  cursor: pointer;
  width: fit-content;
}
#bf-book-mockup .bf-source-preview label {
  display: block;
  margin-top: 12px;
}
#bf-book-mockup .bf-source-preview p {
  font: inherit;
  margin: 8px 0 0;
}
#bf-book-mockup .bf-source-preview select,
#bf-book-mockup .bf-journal-picker select {
  font: 14px/1.6 system-ui;
  background: var(--bf-paper);
  color: var(--bf-ink);
  border: 1px solid var(--bf-line);
  border-radius: 2px;
  padding: 7px;
  max-width: 100%;
}
#bf-book-mockup .bf-sample-narrator {
  display: block;
  font: 12px/1.5 system-ui;
  color: var(--bf-muted);
  margin-top: 5px;
}
#bf-book-mockup .bf-imported-copy {
  font:
    20px/1.85 "EB Garamond",
    Georgia,
    serif;
  overflow-wrap: anywhere;
}
#bf-book-mockup .bf-imported-copy p {
  margin: 0 0 1em;
  font: inherit;
}
#bf-book-mockup .bf-imported-copy h3 {
  font:
    36px/1.18 "Cormorant Garamond",
    Georgia,
    serif;
  margin: 0 0 25px;
}
#bf-book-mockup .bf-imported-copy h4 {
  font:
    27px/1.25 "Cormorant Garamond",
    Georgia,
    serif;
  color: var(--bf-blue);
  margin: 25px 0 12px;
}
#bf-book-mockup .bf-imported-copy section {
  margin: 22px 0;
}
#bf-book-mockup .atlas-continent-facts {
  display: none;
}
#bf-book-mockup .atlas-paper-note,
#bf-book-mockup .bf-imported-copy blockquote {
  border-left: 2px solid var(--bf-line);
  padding: 12px 20px;
  margin: 24px 0;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-atlas-person {
  border-bottom: 1px solid var(--bf-line);
  padding: 16px 0;
}
#bf-book-mockup .bf-atlas-person summary {
  font:
    28px/1.3 "Cormorant Garamond",
    Georgia,
    serif;
  cursor: pointer;
  color: var(--bf-blue);
}
#bf-book-mockup .bf-atlas-person[open] > summary {
  margin-bottom: 24px;
}
#bf-book-mockup .bf-map {
  margin: 25px 0;
}
#bf-book-mockup .bf-map img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--bf-line);
  box-shadow: 1px 3px 8px #0002;
}
#bf-book-mockup .bf-map figcaption {
  font: 12px/1.6 system-ui;
  color: var(--bf-muted);
  margin-top: 10px;
}
#bf-book-mockup .bf-journal-picker {
  display: flex;
  align-items: end;
  gap: 15px;
  padding-bottom: 18px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--bf-line);
  font: 12px/1.5 system-ui;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-journal-picker label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  flex: 1;
}
#bf-book-mockup .bf-journal-picker > span {
  white-space: nowrap;
  padding-bottom: 9px;
}
#bf-book-mockup .bf-journal-entry {
  min-height: 360px;
}
#bf-book-mockup .bf-journal-entry h3 {
  font:
    36px/1.2 "Caveat",
    "Segoe Print",
    cursive;
  margin: 15px 0 30px;
}
#bf-book-mockup .bf-journal-copy {
  font:
    23px/1.7 "Caveat",
    "Segoe Print",
    cursive;
  overflow-wrap: anywhere;
}
#bf-book-mockup .bf-journal-copy p {
  font: inherit;
  margin: 0 0 1em;
}
#bf-book-mockup .bf-journal-copy s,
#bf-book-mockup .bf-journal-copy del {
  text-decoration-thickness: 1.3px;
  opacity: .72;
}
#bf-book-mockup .bf-journal-copy ul,
#bf-book-mockup .bf-journal-copy ol {
  padding-left: 25px;
}
#bf-book-mockup .bf-entry-navigation,
#bf-book-mockup .bf-reader-neighbors {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 25px;
}
#bf-book-mockup .bf-entry-navigation button:disabled {
  opacity: .35;
  cursor: default;
}
#bf-book-mockup .bf-artifact {
  padding: 20px 0;
  border-bottom: 1px solid var(--bf-line);
  clear: both;
}
#bf-book-mockup .bf-artifact summary {
  font:
    29px/1.3 "Caveat",
    "Segoe Print",
    cursive;
  cursor: pointer;
  color: var(--bf-blue);
}
#bf-book-mockup .bf-artifact p,
#bf-book-mockup .bf-artifact dl {
  font:
    19px/1.7 "EB Garamond",
    Georgia,
    serif;
}
#bf-book-mockup .bf-artifact dt {
  font-weight: bold;
  margin-top: 15px;
}
#bf-book-mockup .bf-artifact dd {
  margin: 3px 0 10px;
}
#bf-book-mockup .bf-guitar {
  float: right;
  width: 40%;
  max-height: 420px;
  object-fit: contain;
  margin: 20px 0 20px 25px;
}
#bf-book-mockup .bf-artifact .bf-paper-note {
  position: relative;
  margin: 30px 5px;
  padding: 24px;
  max-width: 100%;
  transform: rotate(-.4deg);
}
#bf-book-mockup .bf-artifact .bf-paper-note h4 {
  font:
    28px/1.3 "Caveat",
    "Segoe Print",
    cursive;
  margin: 0 0 15px;
}
#bf-book-mockup .bf-locked-entry {
  padding: 24px 0;
  min-height: 220px;
}
@media (max-width: 760px) {
  #bf-book-mockup .bf-imported-copy {
    font-size: 19px;
  }
  #bf-book-mockup .bf-journal-copy {
    font-size: 22px;
  }
  #bf-book-mockup .bf-guitar {
    float: none;
    width: 100%;
    height: 260px;
    margin: 20px 0;
  }
  #bf-book-mockup .bf-reader-neighbors {
    width: 100%;
  }
}
@font-face {
  font-family: "BF Title";
  src: url("./bf-title-SSCYSSBM.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
#bf-book-mockup .bf-exlibris > span {
  font-family:
    "BF Title",
    Georgia,
    serif;
  font-size: 32px;
  line-height: 1.3;
  font-weight: 400;
}
#bf-book-mockup .bf-transfer-cover[data-kind=home] .bf-cover-title {
  font-family:
    "BF Title",
    Georgia,
    serif;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: 0;
}
html[data-book-arrival=pending] .bf-stage > .bf-binding {
  visibility: hidden;
}
html[data-theme=dark],
html[data-theme=dark] body {
  background: #0e1218;
}
#bf-book-mockup {
  font-family:
    "EB Garamond",
    Georgia,
    serif;
  --bf-paper:light-dark(#eee4cf,#252932);
  --bf-blue:light-dark(#315c83,#a4c5e6);
  --bf-ink:light-dark(#293541,#e4e7eb);
}
#bf-book-mockup a {
  color: inherit;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
#bf-book-mockup a:focus-visible {
  outline: 2px solid var(--bf-blue);
  outline-offset: 5px;
}
#bf-book-mockup .bf-stage {
  padding: clamp(18px, 4vw, 65px) clamp(12px, 4vw, 70px) 65px;
  min-height: 100vh;
  border-radius: 0;
  background:
    radial-gradient(
      ellipse at 45% 10%,
      #34414b,
      #161c23 75%);
}
#bf-book-mockup .bf-binding {
  max-width: 1180px;
  margin: auto;
  padding: 10px 12px 17px 9px;
  border: 0;
  border-radius: 5px 13px 17px 5px;
  background:
    linear-gradient(
      90deg,
      #122537,
      #35506a 3%,
      #193349 4%,
      #1d3a50 97%,
      #466078);
  box-shadow: 0 30px 45px #0008, 0 3px 3px #060d13;
}
#bf-book-mockup .bf-binding:before {
  inset: 5px;
  border: 1px solid #7797ac40;
  border-radius: 3px 9px 12px 3px;
}
#bf-book-mockup .bf-sheet {
  min-height: 720px;
  background: var(--bf-paper);
  border-radius: 2px 5px 7px 2px;
  transition: none;
  box-shadow:
    0 2px #b5aa94,
    0 4px #ddd2bc,
    0 5px #918977,
    0 7px #d8cbb2,
    0 9px #8c8371;
  gap: 0;
}
#bf-book-mockup .bf-sheet:before,
#bf-book-mockup .bf-sheet.bf-full:before,
#bf-book-mockup .bf-journal .bf-sheet:before {
  background-image: var(--bf-paper-photo);
  background-size: 600% 400%;
  background-position: 70% 50%;
  opacity: .3;
  mix-blend-mode: multiply;
  filter: grayscale(.55);
  border-radius: inherit;
  box-shadow: inset 0 0 18px #72583130;
}
#bf-book-mockup .bf-sheet:after {
  left: calc(50% - 24px);
  width: 48px;
  background:
    linear-gradient(
      90deg,
      transparent,
      #65513718 25%,
      #2e231b38 49%,
      #fff5 53%,
      #51402c14 73%,
      transparent);
}
#bf-book-mockup .bf-page {
  padding: 38px clamp(24px, 4vw, 56px) 30px;
  min-height: 720px;
  box-shadow: inset -8px 0 15px #735d3510;
}
#bf-book-mockup .bf-page + .bf-page {
  padding-left: clamp(30px, 4.5vw, 64px);
  box-shadow: inset 7px 0 13px #70522a0d;
}
#bf-book-mockup .bf-top {
  font-size: 12px;
  letter-spacing: .025em;
  border: 0;
  margin-bottom: 22px;
}
#bf-book-mockup .bf-title-frame {
  min-height: 480px;
  border: 1px solid #8aaec13d;
  padding: 55px 22px;
  outline: 1px solid #8aaec122;
  outline-offset: 7px;
}
#bf-book-mockup .bf-title-page {
  color: #d6e1e7;
  background:
    radial-gradient(
      ellipse at 55% 20%,
      #34536c33,
      transparent 70%),
    repeating-linear-gradient(
      16deg,
      #a6b6bd04 0 1px,
      transparent 1px 4px),
    #1d3549;
  box-shadow: inset -15px 0 24px #07111c70, inset 0 0 24px #0b192766;
}
#bf-book-mockup .bf-title-page h1 {
  color: #c3d6e3;
  font-size: clamp(37px, 4vw, 54px);
  text-shadow: 0 1px #fff2, 0 -1px #0008;
  letter-spacing: -.02em;
}
#bf-book-mockup .bf-title-page .bf-title-rule {
  background: #98b4c580;
}
#bf-book-mockup .bf-title-page .bf-logo-space {
  height: 90px;
}
#bf-book-mockup .bf-toc li {
  border-bottom: 0;
}
#bf-book-mockup .bf-toc a {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) 18px;
  gap: 16px;
  align-items: baseline;
  padding: 21px 0;
  width: 100%;
  border-bottom: 1px dotted color-mix(in srgb, var(--bf-line) 65%, transparent);
  transition: color .15s;
}
#bf-book-mockup .bf-toc a:hover {
  color: var(--bf-blue);
}
#bf-book-mockup .bf-toc-label {
  font-size: clamp(23px, 2.4vw, 30px);
}
#bf-book-mockup .bf-index button {
  border-bottom: 1px solid color-mix(in srgb, var(--bf-line) 40%, transparent);
  padding: 12px 9px;
  transition: color .15s;
  background: none;
  box-shadow: none;
}
#bf-book-mockup .bf-index button[aria-pressed=true] {
  background: none;
  box-shadow: none;
  color: var(--bf-blue);
  border-bottom-color: var(--bf-blue);
}
#bf-book-mockup .bf-index button span:first-child {
  flex: none;
}
#bf-book-mockup .bf-part-copy {
  font-size: 19px;
  line-height: 1.35;
}
#bf-book-mockup .bf-index-title {
  margin-left: 9px;
}
#bf-book-mockup .bf-rows > a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 23px 0;
  border-bottom: 1px solid var(--bf-line);
  width: 100%;
}
#bf-book-mockup .bf-rows > a:hover {
  color: var(--bf-blue);
}
#bf-book-mockup .bf-corner {
  display: none;
}
#bf-book-mockup .bf-sheet.bf-full:after {
  display: none;
}
#bf-book-mockup .bf-full > .bf-page {
  min-height: 700px;
  padding: 35px clamp(22px, 5vw, 68px);
}
#bf-book-mockup .bf-sheet,
#bf-book-mockup .bf-page {
  transition: none;
}
#bf-book-mockup .bf-turn-leaf {
  display: none !important;
}
#bf-book-mockup[data-view=reader] .bf-binding {
  max-width: 960px;
}
#bf-book-mockup[data-view=reader] .bf-sheet {
  box-shadow: 0 2px #aaa18e, 0 5px #d6cbb9;
}
#bf-book-mockup[data-view=atlas] .bf-stage {
  background:
    radial-gradient(
      ellipse at top,
      #334342,
      #161f25 80%);
}
#bf-book-mockup[data-view=atlas] .bf-binding {
  padding: 9px 9px 13px;
  max-width: 1240px;
  border-radius: 2px 9px 9px 2px;
}
#bf-book-mockup[data-view=atlas] .bf-sheet {
  box-shadow: 0 2px #aaa18e, 0 4px #c5c0af;
}
#bf-book-mockup[data-view=atlas] .bf-heading {
  padding-bottom: 24px;
  border-bottom: 3px double var(--bf-line);
}
#bf-book-mockup[data-view=atlas] .bf-heading h2 {
  font-size: clamp(34px, 4vw, 50px);
}
#bf-book-mockup .bf-atlas-layout {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 48px;
}
#bf-book-mockup .bf-binding[data-continent] .bf-sheet:before {
  background-size: 600% 400%;
  opacity: .2;
  mix-blend-mode: luminosity;
}
#bf-book-mockup .bf-binding[data-continent=velmora] {
  --bf-paper:light-dark(#e8e3d2,#242d2d);
  --bf-blue:light-dark(#405e68,#a1bfc8);
}
#bf-book-mockup .bf-binding[data-continent=astralis] {
  --bf-paper:light-dark(#e0e5ee,#192339);
  --bf-blue:light-dark(#495e8a,#b6c5ec);
}
#bf-book-mockup .bf-binding[data-continent=ashgrid] {
  --bf-paper:light-dark(#ebdfd1,#332922);
  --bf-blue:light-dark(#85563d,#dfbca4);
}
#bf-book-mockup .bf-continent-title {
  min-height: 150px;
}
#bf-book-mockup .bf-categories {
  margin-top: 28px;
}
#bf-book-mockup[data-view=journal] .bf-stage {
  background:
    radial-gradient(
      ellipse at 45% 0%,
      #4c4840,
      #242725 55%,
      #141a1c);
}
#bf-book-mockup .bf-journal {
  max-width: 1050px;
  --bf-paper:light-dark(#e7d9bd,#302b23);
  --bf-ink:light-dark(#433d32,#e8dfce);
  --bf-blue:light-dark(#3e617e,#a9c0d2);
  padding: 14px 14px 19px;
  background:
    repeating-linear-gradient(
      25deg,
      #d1b08f07 0 1px,
      transparent 1px 6px),
    linear-gradient(
      90deg,
      #30251d,
      #594131 3%,
      #48352a 96%,
      #78604a);
  border-radius: 5px 12px 20px 5px;
}
#bf-book-mockup .bf-journal .bf-sheet {
  grid-template-columns: .72fr 1.28fr;
  min-height: 710px;
}
#bf-book-mockup .bf-journal .bf-sheet:after {
  left: calc(36% - 16px);
  width: 32px;
}
#bf-book-mockup .bf-journal .bf-page:first-child {
  background:
    repeating-linear-gradient(
      30deg,
      #ffe5c005 0 1px,
      transparent 1px 5px),
    #47392e;
  color: #ddcdb5;
  box-shadow: inset -12px 0 18px #18120a60;
  --bf-blue:#adc4d7;
  --bf-muted:#c7b99f;
  --bf-line:#776450;
  padding: 35px 22px;
}
#bf-book-mockup .bf-journal h2 {
  font-size: 43px;
  margin: 30px 0 42px;
}
#bf-book-mockup .bf-journal .bf-page:nth-child(2) {
  padding: 40px 42px;
  min-height: 710px;
}
#bf-book-mockup .bf-ribbons {
  margin-right: -35px;
  gap: 15px;
}
#bf-book-mockup .bf-ribbons button {
  font-family:
    "Caveat",
    "Segoe Print",
    cursive;
  font-size: 23px;
  padding: 9px 17px !important;
  background:
    linear-gradient(
      90deg,
      #37536a,
      #56768c);
  box-shadow: 0 3px 5px #0004;
  transition: transform .18s ease;
}
#bf-book-mockup .bf-ribbons button:nth-child(2) {
  background:
    linear-gradient(
      90deg,
      #69523b,
      #927451);
}
#bf-book-mockup .bf-ribbons button:nth-child(3) {
  background:
    linear-gradient(
      90deg,
      #58626b,
      #7b8992);
}
#bf-book-mockup .bf-ribbons button:nth-child(4) {
  background:
    linear-gradient(
      90deg,
      #5c4442,
      #876a64);
}
#bf-book-mockup .bf-journal-lines {
  min-height: 350px;
  margin-top: 20px;
}
#bf-book-mockup .bf-journal-lines .bf-lines {
  visibility: hidden;
}
#bf-book-mockup .bf-paper-note .bf-lines span {
  height: 1px;
  opacity: .5;
}
#bf-book-mockup .bf-object-tray {
  background: #2b2620;
  border: 1px solid #766147;
  color: #eadbc4;
  --bf-paper:#e2d2b1;
  --bf-ink:#40372e;
  --bf-blue:#95b7d4;
}
#bf-book-mockup .bf-shifted .bf-sheet {
  transform: translateY(-14px) rotate(-.3deg);
}
#bf-book-mockup .bf-paper-note {
  transform: rotate(1.2deg);
}
#bf-book-mockup[data-theme=dark] .bf-sheet:before {
  opacity: .06;
  mix-blend-mode: luminosity;
}
@media (max-width: 760px) {
  #bf-book-mockup .bf-stage {
    padding: 18px 12px 35px;
  }
  #bf-book-mockup .bf-sheet {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  #bf-book-mockup .bf-sheet:after {
    display: none;
  }
  #bf-book-mockup .bf-page,
  #bf-book-mockup .bf-page + .bf-page {
    padding: 26px;
    min-height: 0;
  }
  #bf-book-mockup .bf-title-page {
    min-height: 340px;
    padding: 25px !important;
  }
  #bf-book-mockup .bf-title-frame {
    min-height: 300px;
    padding: 20px;
  }
  #bf-book-mockup .bf-title-page h1 {
    font-size: 38px;
    margin: 15px 0;
  }
  #bf-book-mockup .bf-title-rule {
    margin-bottom: 15px;
  }
  #bf-book-mockup .bf-atlas-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #bf-book-mockup .bf-atlas-side {
    border-right: 0;
    border-bottom: 1px solid var(--bf-line);
    padding: 0;
  }
  #bf-book-mockup .bf-atlas-side .bf-index {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  #bf-book-mockup .bf-atlas-side .bf-index button {
    flex: 1;
  }
  #bf-book-mockup .bf-journal .bf-sheet {
    grid-template-columns: 1fr;
  }
  #bf-book-mockup .bf-journal .bf-page:first-child {
    padding: 22px;
    min-height: 0;
  }
  #bf-book-mockup .bf-journal .bf-page:first-child .bf-top {
    margin: 0;
    padding-bottom: 0;
    min-height: 30px;
  }
  #bf-book-mockup .bf-journal h2 {
    font-size: 34px;
    margin: 18px 0 22px;
  }
  #bf-book-mockup .bf-journal .bf-page:first-child .bf-footer {
    padding-top: 8px;
  }
  #bf-book-mockup .bf-journal .bf-ribbons {
    margin-top: 14px;
    margin-bottom: 18px;
    gap: 10px;
  }
  #bf-book-mockup .bf-journal .bf-page:nth-child(2) {
    padding: 30px 25px;
    min-height: 580px;
  }
  #bf-book-mockup .bf-ribbons {
    margin-right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #bf-book-mockup .bf-ribbons button {
    font-size: 22px;
  }
  #bf-book-mockup .bf-full > .bf-page {
    min-height: 650px;
  }
  #bf-book-mockup .bf-toc a {
    gap: 10px;
    padding: 18px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  #bf-book-mockup *,
  #bf-book-mockup *:before,
  #bf-book-mockup *:after {
    transition: none !important;
    animation: none !important;
  }
}
#bf-book-mockup .bf-endpaper {
  padding: 15px 12px 18px 17px;
  min-height: 720px;
  background:
    repeating-linear-gradient(
      4deg,
      #a7b5bb09 0 1px,
      transparent 1px 4px),
    linear-gradient(
      90deg,
      #193349,
      #38526a 6%,
      #273e50 94%,
      #111f2c);
  box-shadow: inset 0 0 12px #060e18aa;
}
#bf-book-mockup .bf-pasted-paper {
  position: relative;
  flex: 1;
  min-height: 100%;
  background:
    radial-gradient(
      ellipse at 0 100%,
      #50698044,
      transparent 40%),
    radial-gradient(
      ellipse at 65% 20%,
      #d2d9e255,
      transparent 70%),
    repeating-radial-gradient(
      ellipse at 0 0,
      transparent 0 13px,
      #496b8a18 14px 15px,
      transparent 16px 25px),
    #a8b8c7;
  box-shadow:
    inset 0 0 20px #434b3760,
    inset -13px 0 23px #15243170,
    1px 1px 3px #1118;
  border-radius: 1px 0 0 3px;
}
#bf-book-mockup .bf-pasted-paper:before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bf-paper-photo) 70% 50%/600% 400%;
  opacity: .3;
  mix-blend-mode: multiply;
  pointer-events: none;
}
#bf-book-mockup .bf-pasted-paper:after {
  content: "";
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  width: 12px;
  background:
    linear-gradient(
      90deg,
      #ede9cf20,
      #34414550,
      #172a3740,
      #fff3);
  border-left: 1px solid #263c4930;
  pointer-events: none;
}
#bf-book-mockup .bf-exlibris {
  position: absolute;
  left: 20%;
  right: 22%;
  top: 28%;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-direction: column;
  padding: 23px 12px 25px;
  background: #dcdac3;
  box-shadow: 0 2px 3px #1b252640, inset 0 0 15px #8c815030;
  color: #485c66;
  font-size: 17px;
  transform: rotate(-2deg);
  border: 1px solid #656b5955;
}
#bf-book-mockup .bf-exlibris img {
  object-fit: contain;
  opacity: .8;
}
#bf-book-mockup .bf-toc-heading {
  font-size: 43px;
  line-height: 1.2;
  margin: 8px 0 30px;
}
#bf-book-mockup .bf-icon {
  display: inline-block;
  min-width: 1em;
  text-align: center;
}
#bf-book-mockup .bf-page {
  transform-origin: left center;
}
#bf-book-mockup .bf-moving-leaf {
  transform-origin: left center;
  backface-visibility: hidden;
  background-image: var(--bf-paper-photo);
  background-size: 600% 400%;
  background-position: 70% 50%;
  background-blend-mode: soft-light;
}
#bf-book-mockup .bf-moving-leaf a,
#bf-book-mockup .bf-moving-leaf button {
  pointer-events: none;
}
#bf-book-mockup .bf-toc a {
  transition: translate .25s, color .2s;
}
#bf-book-mockup .bf-toc a:hover {
  translate: 5px 0;
}
#bf-book-mockup .bf-toc a > span:last-child {
  transition: translate .25s;
}
#bf-book-mockup .bf-toc a:hover > span:last-child {
  translate: 6px 0;
}
#bf-book-mockup .bf-index button {
  transition: padding-left .25s, color .2s;
}
#bf-book-mockup .bf-index button:hover {
  padding-left: 15px;
}
#bf-book-mockup .bf-continent-tabs {
  display: flex;
  gap: 5px;
  border-bottom: 1px solid var(--bf-line);
  margin: -7px 0 30px;
  flex-wrap: wrap;
}
#bf-book-mockup .bf-continent-tabs button {
  position: relative;
  padding: 13px 25px 17px;
  border: 1px solid transparent;
  border-bottom: 0;
  min-width: 170px;
  transition: translate .25s, background .25s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
#bf-book-mockup .bf-continent-tabs button > span {
  font-size: 24px;
}
#bf-book-mockup .bf-continent-tabs small {
  font: 11px/1.5 system-ui;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-continent-tabs button[aria-pressed=true] {
  border-color: var(--bf-line);
  background: color-mix(in srgb, var(--bf-blue) 8%, transparent);
  color: var(--bf-blue);
}
#bf-book-mockup .bf-continent-tabs button[aria-pressed=true]:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 20px;
  right: 20px;
  height: 3px;
  background: var(--bf-blue);
}
#bf-book-mockup .bf-continent-tabs button:hover {
  translate: 0 -3px;
}
#bf-book-mockup .bf-atlas-layout {
  grid-template-columns: 185px minmax(0, 1fr);
  gap: 42px;
}
#bf-book-mockup .bf-atlas-side {
  padding: 12px 22px 0 0;
}
#bf-book-mockup .bf-atlas-side .bf-index {
  margin-top: 17px;
}
#bf-book-mockup .bf-atlas-side .bf-index button {
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
  padding: 13px 0;
}
#bf-book-mockup .bf-atlas-side .bf-index button span {
  width: auto;
}
#bf-book-mockup .bf-atlas-reading {
  position: relative;
  min-width: 0;
  min-height: 530px;
  padding: 22px 28px 40px;
  transform-origin: left center;
  background:
    radial-gradient(
      ellipse at 100% 0%,
      color-mix(in srgb, var(--bf-blue) 8%, transparent),
      transparent 55%);
}
#bf-book-mockup .bf-atlas-reading h3 {
  font-size: 42px;
  margin: 12px 0 20px;
  color: var(--bf-blue);
}
#bf-book-mockup .bf-atlas-rule {
  width: 65px;
  border-top: 2px solid var(--bf-blue);
  opacity: .5;
  margin-bottom: 33px;
}
#bf-book-mockup .bf-atlas-copy {
  font:
    20px/1.8 "EB Garamond",
    Georgia,
    serif;
  max-width: 75ch;
}
#bf-book-mockup .bf-atlas-ornament {
  position: absolute;
  right: 18px;
  top: 15px;
  font-size: 62px;
  color: var(--bf-blue);
  opacity: .2;
  pointer-events: none;
}
#bf-book-mockup .bf-binding[data-continent=astralis] .bf-atlas-reading {
  background-image:
    radial-gradient(
      circle at 85% 14%,
      #768bab44 0 1px,
      transparent 2px),
    radial-gradient(
      circle at 72% 25%,
      #768bab55 0 1px,
      transparent 2px),
    radial-gradient(
      circle at 95% 33%,
      #768bab44 0 2px,
      transparent 3px),
    linear-gradient(
      150deg,
      transparent 70%,
      #8495b622);
  border-right: 1px solid #64769944;
}
#bf-book-mockup .bf-binding[data-continent=ashgrid] .bf-atlas-rule {
  width: 100px;
  height: 4px;
  border: 0;
  background:
    linear-gradient(
      90deg,
      #80563e 0 24%,
      transparent 24% 26%,
      #516d85 26% 49%,
      transparent 49% 51%,
      #787b59 51% 74%,
      transparent 74% 76%,
      #a89879 76%);
}
#bf-book-mockup .bf-binding[data-continent=velmora] .bf-atlas-reading {
  border-right: 3px double #81908844;
}
#bf-book-mockup .bf-journal .bf-page:nth-child(2) {
  background:
    radial-gradient(
      ellipse 95px 90px at 87% 73%,
      transparent 66%,
      #81562920 70%,
      transparent 74%,
      #96632916 77%,
      transparent 81%),
    radial-gradient(
      ellipse at 100% 10%,
      #78512440,
      transparent 26%),
    radial-gradient(
      ellipse at 1% 93%,
      #79532242,
      transparent 25%),
    linear-gradient(
      119deg,
      transparent 67%,
      #8c6b3620 67.2%,
      #fff4 67.5%,
      transparent 68%),
    linear-gradient(
      12deg,
      transparent 34%,
      #8c6b3610 34.4%,
      #fff3 34.7%,
      transparent 35%),
    #dbc9a3;
  box-shadow: inset 16px 0 20px #49341922, inset -3px 0 14px #68451e45;
  clip-path: polygon(0 0, 97% .2%, 100% 1%, 99.6% 16%, 99.9% 27%, 99.2% 28%, 100% 43%, 99.4% 64%, 100% 82%, 98.8% 92%, 99.3% 97%, 96% 99.5%, 78% 99.2%, 55% 100%, 32% 99.3%, 8% 100%, 0 99.5%);
}
#bf-book-mockup .bf-journal .bf-page:nth-child(2):before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: var(--bf-paper-photo) 70% 50%/600% 400%;
  mix-blend-mode: multiply;
  opacity: .25;
  z-index: -1;
}
#bf-book-mockup .bf-journal .bf-page:first-child {
  background:
    linear-gradient(
      135deg,
      #c8aa7940,
      transparent 14%),
    radial-gradient(
      ellipse at 12% 78%,
      #b59b7833,
      transparent 32%),
    repeating-linear-gradient(
      34deg,
      transparent 0 35px,
      #d3b5910c 36px,
      transparent 37px 60px),
    #49392c;
  border-left: 2px solid #997b5055;
  border-bottom: 3px solid #271d18;
}
#bf-book-mockup .bf-journal .bf-page:first-child:after {
  content: "";
  position: absolute;
  right: 5px;
  top: 22px;
  bottom: 22px;
  border-left: 2px dashed #b0967055;
  pointer-events: none;
}
#bf-book-mockup .bf-journal .bf-sheet {
  box-shadow:
    0 2px #9e8964,
    -1px 5px #c5b288,
    1px 7px #827051,
    -1px 9px #b9a580,
    0 12px #6b573f;
}
#bf-book-mockup .bf-journal .bf-paper-note {
  background:
    linear-gradient(
      125deg,
      #eee1b9,
      #d5c08e);
  box-shadow: 2px 4px 5px #3b2c2040, inset 0 0 16px #8c683126;
  border-radius: 0 2px 6px 0;
}
#bf-book-mockup .bf-journal .bf-paper-note:before {
  background:
    repeating-linear-gradient(
      90deg,
      #c1a46299 0 3px,
      #b99d5d88 3px 6px);
  opacity: .8;
  transform: rotate(-4deg);
  width: 73px;
  height: 22px;
}
#bf-book-mockup .bf-journal .bf-ribbons button {
  border-top: 1px dashed #d4c19d66;
  border-bottom: 1px dashed #29271c77;
  filter: saturate(.65);
  transform: rotate(-1deg);
  text-shadow: 1px 1px #17253677;
}
#bf-book-mockup .bf-journal .bf-ribbons button:nth-child(even) {
  transform: rotate(1.3deg);
}
#bf-book-mockup .bf-journal .bf-ribbons button:hover,
#bf-book-mockup .bf-journal .bf-ribbons button[aria-pressed=true] {
  transform: translateX(9px) rotate(0);
  filter: saturate(.85);
}
#bf-book-mockup .bf-shifted .bf-sheet {
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
#bf-book-mockup .bf-chapter-progress {
  border-block: 1px solid var(--bf-line);
  margin-top: 12px;
}
#bf-book-mockup .bf-chapter-progress summary {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  cursor: pointer;
  padding: 18px 0;
  list-style: none;
  color: var(--bf-blue);
}
#bf-book-mockup .bf-chapter-progress summary::-webkit-details-marker {
  display: none;
}
#bf-book-mockup .bf-chapter-progress summary > span:last-child {
  white-space: nowrap;
  font-size: 14px;
}
#bf-book-mockup .bf-disclosure {
  display: inline-block;
  transition: rotate .2s;
  margin-left: 6px;
}
#bf-book-mockup details[open] .bf-disclosure {
  rotate: 180deg;
}
#bf-book-mockup .bf-chapter-progress .bf-rows {
  max-height: 370px;
  overflow: auto;
  scrollbar-width: thin;
  padding-right: 8px;
}
#bf-book-mockup .bf-chapter-progress .bf-rows > a {
  padding: 14px 0;
}
#bf-book-mockup[data-view=forum] .bf-binding {
  max-width: 1320px;
}
#bf-book-mockup .bf-community-heading {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  border-bottom: 3px double var(--bf-line);
  padding-bottom: 24px;
  margin-bottom: 38px;
}
#bf-book-mockup .bf-community-heading h2 {
  font-size: 43px;
  margin: 12px 0;
}
#bf-book-mockup .bf-community-heading p {
  font-size: 18px;
}
#bf-book-mockup .bf-community-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 38px;
}
#bf-book-mockup .bf-pinned-note {
  position: relative;
  padding: 26px;
  margin: 0 0 28px;
  background:
    linear-gradient(
      120deg,
      #f1e7ce,
      #e7d9b6);
  box-shadow: 1px 4px 7px #51402c26, inset 0 0 16px #94733c13;
  border: 1px solid #b29d7455;
}
#bf-book-mockup .bf-pinned-note:before {
  content: "";
  position: absolute;
  top: -9px;
  left: calc(50% - 32px);
  width: 64px;
  height: 20px;
  background: #a69e7488;
  box-shadow: 0 2px 2px #534b3330;
  transform: rotate(-3deg);
  pointer-events: none;
}
#bf-book-mockup .bf-community-layout label {
  display: block;
  font: 12px/1.5 system-ui;
  color: var(--bf-muted);
  margin: 17px 0;
}
#bf-book-mockup .bf-community-layout input,
#bf-book-mockup .bf-community-layout textarea,
#bf-book-mockup .bf-community-layout select {
  display: block;
  max-width: 100%;
  width: 100%;
  margin-top: 6px;
  padding: 9px;
  border: 1px solid #a4997d;
  background: #fff4;
  color: var(--bf-ink);
  font:
    15px/1.5 "EB Garamond",
    Georgia,
    serif;
  border-radius: 0;
}
#bf-book-mockup .bf-community-layout textarea {
  resize: vertical;
}
#bf-book-mockup .bf-community-layout input[type=file] {
  font: 11px/1.5 system-ui;
  padding: 8px 0;
  border: 0;
}
#bf-book-mockup .bf-community-layout input:focus-visible,
#bf-book-mockup .bf-community-layout textarea:focus-visible {
  outline: 2px solid var(--bf-blue);
  outline-offset: 2px;
}
#bf-book-mockup .bf-feed-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
#bf-book-mockup .bf-feed-heading h3 {
  font-size: 32px;
  margin: 4px 0;
}
#bf-book-mockup .bf-feed-heading label {
  margin: 0;
  min-width: 140px;
}
#bf-book-mockup .bf-community-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 24px 0 35px;
}
#bf-book-mockup .bf-community-filters button {
  font: 12px/1.5 system-ui;
  padding: 9px 12px;
  border: 1px solid var(--bf-line);
  transition: background .2s, translate .2s;
}
#bf-book-mockup .bf-community-filters button[aria-pressed=true] {
  background: var(--bf-blue);
  color: #f5edda;
  border-color: var(--bf-blue);
}
#bf-book-mockup .bf-community-filters button:hover {
  translate: 0 -2px;
}
#bf-book-mockup .bf-community-rules {
  font-size: 16px;
  transform: rotate(-.7deg);
}
#bf-book-mockup .bf-community-rules ul {
  padding-left: 18px;
}
#bf-book-mockup .bf-community-rules li {
  margin-bottom: 10px;
}
#bf-book-mockup .bf-local-post img {
  display: block;
  max-width: 100%;
  max-height: 450px;
  object-fit: contain;
  margin: 18px auto;
}
#bf-book-mockup .bf-post-body {
  white-space: pre-wrap;
  font-size: 19px;
}
#bf-book-mockup .bf-post-actions {
  display: flex;
  align-items: baseline;
  gap: 25px;
  border-top: 1px solid var(--bf-line);
  padding-top: 15px;
  margin-top: 25px;
}
#bf-book-mockup .bf-post-actions summary {
  cursor: pointer;
}
#bf-book-mockup .bf-post-actions button[aria-pressed=true] {
  color: var(--bf-blue);
}
#bf-book-mockup .bf-stage {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
#bf-book-mockup .bf-stage > .bf-binding {
  z-index: 1;
}
#bf-book-mockup .bf-transfer-scene {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: #161c23;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  visibility: visible;
}
#bf-book-mockup .bf-transfer-world {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#bf-book-mockup .bf-transfer-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#bf-book-mockup .bf-transfer-skip {
  position: absolute;
  bottom: 18px;
  right: 22px;
  padding: 9px 17px;
  background: #182331ee;
  border: 1px solid #69829a;
  color: #dae4ed;
  font: 12px/1.5 system-ui;
  border-radius: 3px;
  z-index: 20;
}
#bf-book-mockup .bf-transfer-book {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  perspective: 2200px;
}
#bf-book-mockup .bf-transfer-open {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  visibility: visible !important;
  pointer-events: none;
}
#bf-book-mockup .bf-transfer-base,
#bf-book-mockup .bf-transfer-lid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 50%;
  transform-origin: left center;
  border-radius: 3px 10px 12px 3px;
}
#bf-book-mockup .bf-transfer-base {
  box-shadow:
    4px 7px #9b917e,
    7px 10px #554e43,
    10px 15px 20px #0007;
}
#bf-book-mockup .bf-transfer-lid {
  transform-style: preserve-3d;
  z-index: 3;
}
#bf-book-mockup .bf-transfer-front,
#bf-book-mockup .bf-transfer-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
#bf-book-mockup .bf-transfer-back {
  transform: rotateY(180deg);
  border-radius: inherit;
  box-shadow: inset 0 0 30px #0003;
}
#bf-book-mockup .bf-transfer-cover {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  height: 100%;
  padding: 30px 25px;
  border-radius: 3px 10px 12px 3px;
  border: 2px solid #49647b;
  color: #caddeb;
  background:
    repeating-linear-gradient(
      13deg,
      #bac9d506 0 1px,
      transparent 1px 4px),
    linear-gradient(
      90deg,
      #102235,
      #28455e 5%,
      #193348 10%,
      #1e394e 97%,
      #516a7b);
  box-shadow:
    inset 0 0 0 7px #07152344,
    inset 0 0 0 10px #8ba3b22b,
    inset 0 0 30px #06152266;
  position: relative;
}
#bf-book-mockup .bf-cover-title {
  text-align: center;
  font:
    clamp(26px, 3vw, 48px)/1.2 "Cormorant Garamond",
    Georgia,
    serif;
  max-width: 85%;
}
#bf-book-mockup .bf-cover-ornament {
  font: 56px/1.2 Georgia, serif;
  opacity: .8;
}
#bf-book-mockup .bf-cover-ornament img {
  display: block;
  width: 80px;
  height: 78px;
  object-fit: contain;
}
#bf-book-mockup .bf-cover-subtitle {
  font:
    18px/1.5 "EB Garamond",
    Georgia,
    serif;
  letter-spacing: .12em;
  border-top: 1px solid #b4bdd555;
  padding-top: 18px;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal] {
  color: #d0bd9c;
  border: 2px solid #806448;
  background:
    linear-gradient(
      125deg,
      #b99c6230,
      transparent 20%),
    repeating-linear-gradient(
      33deg,
      transparent 0 29px,
      #d6b58b16 30px,
      transparent 32px 63px),
    linear-gradient(
      90deg,
      #261d17,
      #584332 9%,
      #433125 94%,
      #816344);
  box-shadow: inset 0 0 0 6px #21170e55, inset 0 0 28px #1c140b80;
  border-radius: 5px 12px 21px 4px;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal]:after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed #c0a47755;
  pointer-events: none;
  border-radius: inherit;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal] .bf-cover-title,
#bf-book-mockup .bf-transfer-cover[data-kind=journal] .bf-cover-ornament {
  font-family:
    "Caveat",
    "Segoe Print",
    cursive;
  transform: rotate(-4deg);
}
#bf-book-mockup .bf-transfer-cover[data-kind=atlas] {
  border-width: 4px;
  background:
    repeating-linear-gradient(
      80deg,
      #d4d7c408 0 1px,
      transparent 1px 5px),
    linear-gradient(
      90deg,
      #223435,
      #465d61 8%,
      #293f46 95%,
      #718386);
  box-shadow:
    inset 0 0 0 9px #13212466,
    inset 0 0 0 12px #9caaa84d,
    inset 0 0 25px #10202788;
}
#bf-book-mockup .bf-transfer-cover[data-kind=atlas][data-continent=astralis] {
  background:
    radial-gradient(
      circle at 80% 20%,
      #b8c4f0aa 0 1px,
      transparent 2px),
    radial-gradient(
      circle at 28% 80%,
      #b8c4f077 0 2px,
      transparent 3px),
    linear-gradient(
      90deg,
      #141e35,
      #304261 8%,
      #202f4d 95%,
      #75809e);
}
#bf-book-mockup .bf-transfer-cover[data-kind=atlas][data-continent=ashgrid] {
  background:
    linear-gradient(
      120deg,
      #46332a,
      #6d5740 40%,
      #4b4336 70%,
      #384955);
}
#bf-book-mockup .bf-cover-ribbon {
  position: absolute;
  bottom: -33px;
  right: calc(20px + var(--ribbon-index)*26px);
  width: 17px;
  height: 65px;
  background: #607c90;
  transform-origin: top center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 91%, 0 100%);
  box-shadow: inset 3px 0 #fff1;
}
#bf-book-mockup .bf-cover-ribbon:nth-last-child(2) {
  background: #907956;
}
#bf-book-mockup .bf-cover-ribbon:last-child {
  background: #856966;
}
#bf-book-mockup .bf-transfer-parked {
  position: absolute;
  box-shadow: 8px 12px 25px #0008;
}
#bf-book-mockup .bf-resting-book {
  position: fixed;
  width: 258px;
  height: 340px;
  left: -222px;
  top: 120px;
  transform: rotate(-5deg);
  z-index: 0;
  pointer-events: none;
  box-shadow: 10px 12px 25px #0007;
}
#bf-book-mockup .bf-resting-book .bf-cover-title,
#bf-book-mockup .bf-resting-book .bf-transfer-cover[data-kind=home] .bf-cover-title {
  font-size: 24px;
}
@media (max-width: 760px) {
  #bf-book-mockup .bf-transfer-base,
  #bf-book-mockup .bf-transfer-lid {
    left: 0;
    width: 100%;
  }
  #bf-book-mockup .bf-transfer-open {
    max-height: 100%;
    overflow: hidden;
  }
  #bf-book-mockup .bf-transfer-skip {
    bottom: 12px;
    right: 12px;
  }
  #bf-book-mockup .bf-cover-title {
    font-size: 32px;
  }
}
#bf-book-mockup[data-theme=dark] .bf-stage {
  background:
    radial-gradient(
      ellipse at top,
      #222b36,
      #0e1218 80%);
}
#bf-book-mockup[data-theme=dark] .bf-sheet {
  box-shadow:
    0 2px #3b3d40,
    0 4px #505052,
    0 6px #2a2c30,
    0 8px #414044;
}
#bf-book-mockup[data-theme=dark] .bf-pasted-paper {
  background:
    radial-gradient(
      ellipse at 20% 10%,
      #52678222,
      transparent 60%),
    repeating-radial-gradient(
      ellipse at 0 0,
      transparent 0 13px,
      #a0bad510 14px 15px,
      transparent 16px 25px),
    #253445;
}
#bf-book-mockup[data-theme=dark] .bf-exlibris {
  background: #303a46;
  color: #c9d9e8;
  border-color: #697a8544;
  box-shadow: 0 2px 4px #0005, inset 0 0 18px #0002;
}
#bf-book-mockup[data-theme=dark] .bf-pasted-paper:before {
  opacity: .08;
}
#bf-book-mockup[data-theme=dark] .bf-journal .bf-page:first-child {
  background:
    linear-gradient(
      135deg,
      #90795422,
      transparent 15%),
    repeating-linear-gradient(
      34deg,
      transparent 0 35px,
      #cbb79708 36px,
      transparent 37px 60px),
    #28231e;
}
#bf-book-mockup[data-theme=dark] .bf-journal .bf-page:nth-child(2) {
  background:
    radial-gradient(
      ellipse 95px 90px at 87% 73%,
      transparent 66%,
      #bb9b6420 70%,
      transparent 74%),
    linear-gradient(
      119deg,
      transparent 67%,
      #b8a47812 67.2%,
      #fff1 67.5%,
      transparent 68%),
    #302b23;
  box-shadow: inset 16px 0 20px #0004, inset -3px 0 14px #0004;
}
#bf-book-mockup[data-theme=dark] .bf-journal .bf-page:nth-child(2):before {
  opacity: .08;
  mix-blend-mode: luminosity;
}
#bf-book-mockup[data-theme=dark] .bf-journal .bf-paper-note {
  background:
    linear-gradient(
      125deg,
      #40392d,
      #352f27);
  color: #e8dfce;
}
#bf-book-mockup[data-theme=dark] .bf-object-tray {
  --bf-paper:#352f27;
  --bf-ink:#e8dfce;
  --bf-line:#786b56;
  background: #1e1c19;
}
#bf-book-mockup[data-theme=dark] .bf-envelope {
  background:
    linear-gradient(
      150deg,
      #504535,
      #342e26);
  color: #e8dfce;
  border-color: #77694f;
}
#bf-book-mockup[data-theme=dark] .bf-envelope:before,
#bf-book-mockup[data-theme=dark] .bf-envelope:after {
  filter: brightness(.45);
}
#bf-book-mockup[data-theme=dark] .bf-pinned-note {
  background:
    linear-gradient(
      120deg,
      #303641,
      #252d38);
  border-color: #69778655;
  box-shadow: 1px 4px 9px #0004;
}
#bf-book-mockup[data-theme=dark] .bf-community-layout input,
#bf-book-mockup[data-theme=dark] .bf-community-layout textarea,
#bf-book-mockup[data-theme=dark] .bf-community-layout select {
  background: #19212b;
  border-color: #5a6675;
  color: #e4e7eb;
}
#bf-book-mockup[data-theme=dark] .bf-community-filters button[aria-pressed=true] {
  color: #162435;
}
#bf-book-mockup .bf-theme-controls {
  margin-left: auto;
  font-size: 11px;
}
#bf-book-mockup .bf-theme-controls button {
  padding: 5px 8px;
}
#bf-book-mockup .bf-binding[data-narrator] {
  --bf-narrator-a:light-dark(#235e98,#8abff3);
  --bf-narrator-b:light-dark(#467daf,#bbdafa);
  --bf-narrator-bed:light-dark(#d9e4ee,#243a53);
  --bf-blue:var(--bf-narrator-a);
  --bf-faint:var(--bf-narrator-bed);
}
#bf-book-mockup .bf-binding[data-narrator=ari] {
  --bf-narrator-a:light-dark(#326744,#91d7a4);
  --bf-narrator-b:light-dark(#9a3b6d,#f0a4c9);
  --bf-narrator-bed:light-dark(#e1e8d6,#263a32);
}
#bf-book-mockup .bf-binding[data-narrator=sharox] {
  --bf-narrator-a:light-dark(#a8176d,#ff6ec7);
  --bf-narrator-b:light-dark(#263865,#a1b4f5);
  --bf-narrator-bed:light-dark(#e6dce6,#171e3b);
}
#bf-book-mockup .bf-binding[data-narrator=seren] {
  --bf-narrator-a:light-dark(#266871,#84dedc);
  --bf-narrator-b:light-dark(#7c4599,#c7a0ee);
  --bf-narrator-bed:light-dark(#dbe5e5,#26313e);
}
#bf-book-mockup .bf-narrator-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0 0 30px;
}
#bf-book-mockup .bf-narrator-name {
  font:
    30px/1.3 "Cormorant Garamond",
    Georgia,
    serif;
  color: var(--bf-narrator-a);
}
#bf-book-mockup .bf-narrator-rule {
  position: relative;
  display: block;
  width: 118px;
  height: 3px;
  margin-top: 10px;
  background:
    linear-gradient(
      90deg,
      var(--bf-narrator-a) 0 48%,
      transparent 48% 52%,
      var(--bf-narrator-b) 52%);
}
#bf-book-mockup .bf-binding[data-narrator] .bf-reader h2 {
  color: var(--bf-narrator-a);
  text-decoration: underline;
  text-decoration-color: var(--bf-narrator-b);
  text-decoration-thickness: 1px;
  text-underline-offset: 12px;
}
#bf-book-mockup .bf-binding[data-narrator] .bf-reader p:first-of-type:first-letter {
  color: var(--bf-ink);
}
#bf-book-mockup .bf-binding[data-narrator] .bf-reader-end {
  border-top: 2px solid var(--bf-narrator-b);
}
#bf-book-mockup .bf-binding[data-narrator=seren] .bf-narrator-name {
  text-shadow: 2px 1px color-mix(in srgb, var(--bf-narrator-b) 60%, transparent), -2px -1px color-mix(in srgb, var(--bf-narrator-a) 30%, transparent);
}
#bf-book-mockup .bf-binding[data-narrator=seren] .bf-narrator-rule {
  clip-path: polygon(0 0, 38% 0, 38% 35%, 55% 35%, 55% 0, 100% 0, 100% 70%, 72% 70%, 72% 100%, 43% 100%, 43% 65%, 25% 65%, 25% 100%, 0 100%);
  height: 7px;
  animation: bf-signal-drift 7s ease-in-out infinite;
}
@keyframes bf-signal-drift {
  0%, 75%, 100% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(3px);
  }
  88% {
    transform: translateX(-2px);
  }
  94% {
    transform: translateX(1px);
  }
}
#bf-book-mockup .bf-narrator-demo {
  font: 12px/1.6 system-ui;
  color: var(--bf-muted);
  margin: 10px 0 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bf-line);
}
#bf-book-mockup .bf-narrator-demo summary {
  cursor: pointer;
  width: fit-content;
}
#bf-book-mockup .bf-narrator-demo label {
  display: inline-block;
  margin: 14px 10px 10px 0;
}
#bf-book-mockup .bf-narrator-demo select {
  background: var(--bf-paper);
  color: var(--bf-ink);
  padding: 6px 12px;
  border: 1px solid var(--bf-line);
}
#bf-book-mockup .bf-narrator-demo p {
  margin: 2px 0 8px;
}
@media (max-width: 900px) {
  #bf-book-mockup .bf-community-layout {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 25px;
  }
  #bf-book-mockup .bf-community-heading {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
@media (max-width: 760px) {
  #bf-book-mockup .bf-endpaper {
    min-height: 230px;
    padding: 12px !important;
  }
  #bf-book-mockup .bf-exlibris {
    left: 22%;
    right: 22%;
    top: 19%;
    padding: 14px;
    gap: 8px;
  }
  #bf-book-mockup .bf-pasted-paper {
    min-height: 205px;
  }
  #bf-book-mockup .bf-exlibris img {
    width: 35px;
    height: 33px;
  }
  #bf-book-mockup .bf-toc-heading {
    font-size: 37px;
  }
  #bf-book-mockup .bf-continent-tabs {
    gap: 0;
    flex-wrap: nowrap;
    margin: 0 0 22px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 3px;
  }
  #bf-book-mockup .bf-continent-tabs button {
    padding: 12px 11px;
    min-width: 0;
    flex: 1;
  }
  #bf-book-mockup .bf-continent-tabs button > span {
    font-size: 19px;
  }
  #bf-book-mockup .bf-continent-tabs small {
    display: none;
  }
  #bf-book-mockup .bf-atlas-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #bf-book-mockup .bf-atlas-side {
    padding: 0;
    border: 0;
  }
  #bf-book-mockup .bf-atlas-side .bf-index {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0;
  }
  #bf-book-mockup .bf-atlas-side .bf-index button {
    flex: none;
    padding: 6px 9px;
    font-size: 16px;
  }
  #bf-book-mockup .bf-atlas-side .bf-index button span {
    display: none;
  }
  #bf-book-mockup .bf-atlas-reading {
    padding: 20px 4px;
    min-height: 390px;
  }
  #bf-book-mockup .bf-atlas-reading h3 {
    font-size: 34px;
  }
  #bf-book-mockup .bf-atlas-copy {
    font-size: 19px;
  }
  #bf-book-mockup .bf-community-layout {
    grid-template-columns: 1fr;
  }
  #bf-book-mockup .bf-community-heading h2 {
    font-size: 35px;
  }
  #bf-book-mockup .bf-feed-heading {
    flex-wrap: wrap;
  }
  #bf-book-mockup .bf-pinned-note {
    padding: 22px;
  }
  #bf-book-mockup .bf-chapter-progress summary {
    font-size: 15px;
    gap: 8px;
  }
}
:root {
  --bf-cover-grain:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22640%22%20viewBox%3D%220%200%20480%20640%22%3E%0A%20%3Cfilter%20id%3D%22grain%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%0A%20%20%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.48%20.65%22%20numOctaves%3D%223%22%20seed%3D%2217%22%20stitchTiles%3D%22stitch%22%2F%3E%0A%20%20%3CfeColorMatrix%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%0A%20%3C%2Ffilter%3E%0A%20%3Crect%20width%3D%22480%22%20height%3D%22640%22%20filter%3D%22url(%23grain)%22%20opacity%3D%22.46%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  --bf-cover-wear:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22640%22%20viewBox%3D%220%200%20480%20640%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%3Cdefs%3E%0A%20%20%3CradialGradient%20id%3D%22rub%22%3E%3Cstop%20stop-color%3D%22%23a9997f%22%20stop-opacity%3D%22.3%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23a9997f%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22rough%22%3E%3CfeTurbulence%20baseFrequency%3D%22.09%22%20numOctaves%3D%222%22%20seed%3D%2212%22%20result%3D%22noise%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22noise%22%20scale%3D%222%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%0A%20%3C%2Fdefs%3E%0A%20%3Cg%20fill%3D%22url(%23rub)%22%3E%0A%20%20%3Cellipse%20cx%3D%22477%22%20cy%3D%22623%22%20rx%3D%2238%22%20ry%3D%2240%22%2F%3E%3Cellipse%20cx%3D%22472%22%20cy%3D%2212%22%20rx%3D%2221%22%20ry%3D%2225%22%2F%3E%3Cellipse%20cx%3D%223%22%20cy%3D%22451%22%20rx%3D%2212%22%20ry%3D%2273%22%2F%3E%0A%20%3C%2Fg%3E%0A%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c5b18d%22%20stroke-linecap%3D%22round%22%20filter%3D%22url(%23rough)%22%3E%0A%20%20%3Cpath%20opacity%3D%22.28%22%20stroke-width%3D%221.3%22%20d%3D%22M449%203Q474%202%20477%2026M478%20601L477%20621Q474%20636%20458%20636M426%20638L409%20638M4%20409L4%20448M29%203L52%203%22%2F%3E%0A%20%20%3Cpath%20opacity%3D%22.16%22%20stroke-width%3D%22.8%22%20d%3D%22M467%20617L459%20620M468%20624L453%20629M464%2014L468%2023M10%20442L13%20433%22%2F%3E%0A%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
  --bf-cover-wear-atlas:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22640%22%20viewBox%3D%220%200%20480%20640%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%3Cdefs%3E%3CradialGradient%20id%3D%22rub%22%3E%3Cstop%20stop-color%3D%22%23b0a17b%22%20stop-opacity%3D%22.33%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b0a17b%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%0A%20%3Cg%20fill%3D%22url(%23rub)%22%3E%3Cellipse%20cx%3D%22470%22%20cy%3D%22633%22%20rx%3D%2245%22%20ry%3D%2224%22%2F%3E%3Cellipse%20cx%3D%22381%22%20cy%3D%22640%22%20rx%3D%2246%22%20ry%3D%2212%22%2F%3E%3Cellipse%20cx%3D%22476%22%20cy%3D%22264%22%20rx%3D%2214%22%20ry%3D%2263%22%2F%3E%3Cellipse%20cx%3D%226%22%20cy%3D%2217%22%20rx%3D%2217%22%20ry%3D%2235%22%2F%3E%3C%2Fg%3E%0A%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b2a286%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%3Cpath%20stroke-width%3D%221.4%22%20opacity%3D%22.28%22%20d%3D%22M473%20605L475%20623Q471%20636%20454%20636L439%20637M399%20637L382%20638M477%20232L476%20246M3%2012L3%2030%22%2F%3E%0A%20%20%3Cpath%20stroke-width%3D%22.8%22%20opacity%3D%22.18%22%20d%3D%22M469%20626L460%20628M468%20616L461%20621M378%20634L363%20633M472%20269L472%20281M12%2027L11%2040%22%2F%3E%0A%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
  --bf-cover-wear-journal:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22480%22%20height%3D%22640%22%20viewBox%3D%220%200%20480%20640%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%3Cdefs%3E%0A%20%20%3CradialGradient%20id%3D%22rub%22%3E%3Cstop%20stop-color%3D%22%23b89a6c%22%20stop-opacity%3D%22.52%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23b89a6c%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%20%3Cfilter%20id%3D%22rough%22%3E%3CfeTurbulence%20baseFrequency%3D%22.075%22%20numOctaves%3D%223%22%20seed%3D%2223%22%20result%3D%22n%22%2F%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20in2%3D%22n%22%20scale%3D%223%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%2F%3E%3C%2Ffilter%3E%0A%20%3C%2Fdefs%3E%0A%20%3Cg%20fill%3D%22url(%23rub)%22%3E%3Cellipse%20cx%3D%22478%22%20cy%3D%22615%22%20rx%3D%2254%22%20ry%3D%2266%22%2F%3E%3Cellipse%20cx%3D%22466%22%20cy%3D%227%22%20rx%3D%2238%22%20ry%3D%2232%22%2F%3E%3Cellipse%20cx%3D%22475%22%20cy%3D%22356%22%20rx%3D%2232%22%20ry%3D%2271%22%2F%3E%3Cellipse%20cx%3D%2220%22%20cy%3D%22563%22%20rx%3D%2232%22%20ry%3D%22103%22%2F%3E%3Cellipse%20cx%3D%2269%22%20cy%3D%22641%22%20rx%3D%2267%22%20ry%3D%2219%22%2F%3E%3C%2Fg%3E%0A%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23c1a378%22%20stroke-linecap%3D%22round%22%20filter%3D%22url(%23rough)%22%3E%0A%20%20%3Cpath%20opacity%3D%22.42%22%20stroke-width%3D%222%22%20d%3D%22M415%203L444%204Q471%202%20476%2019L477%2029M477%20316L477%20338M479%20365L477%20385M477%20586L475%20602M474%20613Q470%20635%20449%20636L423%20637M389%20638L375%20637M12%20636L57%20637M5%20550L4%20582%22%2F%3E%0A%20%20%3Cpath%20opacity%3D%22.32%22%20stroke-width%3D%221%22%20d%3D%22M449%20596L446%20606L433%20614M456%20607L452%20618L438%20622M448%20591L439%20601M459%20333L452%20345L456%20354L448%20366M460%20351L454%20367M19%20528L25%20541L20%20549M430%2014L442%2017L451%2014L461%2024%22%2F%3E%0A%20%20%3Cpath%20opacity%3D%22.2%22%20stroke-width%3D%22.8%22%20d%3D%22M424%20572L417%20578M429%20588L422%20591M448%20325L444%20333M27%20596L39%20601M83%20625L105%20623M451%2040L446%2045%22%2F%3E%0A%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A");
}
#bf-book-mockup .bf-transfer-cover {
  isolation: isolate;
  border-color: #63727a;
  border-width: 1px;
  border-radius: 5px 15px 19px 5px;
  background:
    radial-gradient(
      ellipse at 67% 42%,
      #4b68782e,
      transparent 65%),
    linear-gradient(
      90deg,
      #111e2a,
      #304353 4%,
      #162b3c 8%,
      #203b50 40%,
      #1b3243 94%,
      #53616a);
  box-shadow:
    inset 2px 0 2px #c4bd9860,
    inset -2px -3px 4px #0a1118,
    inset 0 0 0 7px #06132140,
    inset 0 0 0 9px #aaa38640,
    inset 0 0 30px #08121b80,
    1px 2px 1px #b4a58b55;
}
#bf-book-mockup .bf-transfer-cover:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--bf-cover-grain);
  background-size: 100% 100%;
  opacity: .4;
  mix-blend-mode: soft-light;
  z-index: 0;
}
#bf-book-mockup .bf-transfer-cover:after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--bf-cover-wear);
  background-size: 100% 100%;
  opacity: .8;
  z-index: 2;
  box-shadow: inset -1px 0 2px #e2cfa920;
}
#bf-book-mockup .bf-cover-title,
#bf-book-mockup .bf-cover-ornament,
#bf-book-mockup .bf-cover-subtitle {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 1px #07121b, 0 -1px #bcd0d522;
}
#bf-book-mockup .bf-cover-title {
  color: #bac9ce;
}
#bf-book-mockup .bf-cover-spine {
  position: absolute;
  left: 2%;
  width: 5%;
  top: 1%;
  bottom: 1%;
  border-radius: 4px;
  pointer-events: none;
  border-right: 1px solid #080d1480;
  background:
    linear-gradient(
      90deg,
      #0003,
      #d9c5a224 25%,
      #0005 68%,
      #d3c4a51c 83%,
      #0004);
  box-shadow: 2px 0 2px #0004;
  z-index: 1;
}
#bf-book-mockup .bf-cover-spine:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 13%,
      #b6a07c44 13.2%,
      #0005 14%,
      transparent 14.5%,
      transparent 30%,
      #b6a07c44 30.2%,
      #0005 31%,
      transparent 31.5%,
      transparent 72%,
      #b6a07c44 72.2%,
      #0005 73%,
      transparent 73.5%,
      transparent 88%,
      #b6a07c44 88.2%,
      #0005 89%,
      transparent 89.5%);
}
#bf-book-mockup .bf-transfer-cover[data-kind=atlas] {
  border-width: 2px;
  border-color: #807a61;
  box-shadow:
    inset 2px 0 2px #cbbd9160,
    inset -3px -4px 6px #0a1719,
    inset 0 0 0 8px #13212466,
    inset 0 0 0 10px #b7aa7955,
    inset 0 0 32px #0c1b2588;
}
#bf-book-mockup .bf-transfer-cover[data-kind=atlas] {
  --bf-cover-wear:var(--bf-cover-wear-atlas);
}
#bf-book-mockup .bf-transfer-cover[data-kind=atlas]:after {
  opacity: .8;
}
#bf-book-mockup .bf-transfer-cover[data-kind=atlas] .bf-cover-ornament {
  font-size: 34px;
  opacity: .6;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal] {
  --bf-cover-wear:var(--bf-cover-wear-journal);
  border: 2px solid #6b5237;
  border-radius: 7px 23px 32px 6px;
  color: #bcaa88;
  background:
    radial-gradient(
      ellipse at 84% 87%,
      #ac86574d,
      transparent 32%),
    radial-gradient(
      ellipse at 78% 22%,
      #95724f38,
      transparent 36%),
    radial-gradient(
      ellipse at 26% 62%,
      #0c08067d,
      transparent 45%),
    radial-gradient(
      ellipse at 90% 52%,
      #9a754238,
      transparent 16%),
    linear-gradient(
      92deg,
      #241b15,
      #665039 5%,
      #32241b 11%,
      #4c3828 54%,
      #39291f 90%,
      #866744);
  box-shadow:
    inset 3px 1px 3px #b79a6a88,
    inset -3px -4px 4px #1b100c,
    inset 0 0 0 7px #20150d66,
    inset 0 0 35px #160e0999,
    1px 3px 1px #8f7555;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal]:before {
  opacity: .72;
  background-size: 100% 100%;
  mix-blend-mode: soft-light;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal]:after {
  inset: 0;
  border: 0;
  opacity: 1;
  background-image: var(--bf-cover-wear);
  box-shadow: inset -3px -3px 8px #c5a16c20, inset 2px 0 6px #ab895430;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal] .bf-cover-title {
  color: #c7b594;
  opacity: .85;
  text-shadow: 0 1px #1c130d;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal] .bf-cover-ornament {
  position: absolute;
  right: 13%;
  bottom: 13%;
  font-size: 32px;
  opacity: .45;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal] .bf-cover-spine {
  width: 5%;
  left: 1%;
  background:
    linear-gradient(
      90deg,
      #211911,
      #81705433,
      #20171088);
  border-right: 1px dashed #ab8d6033;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal] .bf-cover-spine:after {
  display: none;
}
#bf-book-mockup .bf-cover-repair {
  position: absolute;
  z-index: 1;
  left: 1.5%;
  bottom: 7%;
  width: 11%;
  height: 9%;
  transform: rotate(-2deg);
  background: var(--bf-cover-grain), #4f412e;
  border: 1px solid #76604377;
  box-shadow: 1px 1px 2px #100b0866, inset 0 0 9px #272014aa;
  clip-path: polygon(2% 3%, 97% 0, 100% 24%, 97% 61%, 100% 97%, 65% 98%, 1% 100%, 3% 49%);
}
#bf-book-mockup .bf-cover-repair:after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed #a68e6255;
}
#bf-book-mockup .bf-transfer-cover[data-kind=journal] .bf-cover-ribbon {
  filter: saturate(.6);
  background-image: var(--bf-cover-grain);
  clip-path: polygon(0 0, 100% 0, 94% 73%, 100% 92%, 79% 96%, 65% 88%, 47% 98%, 32% 90%, 8% 100%, 3% 81%);
}
#bf-book-mockup .bf-binding:before {
  background-image: var(--bf-cover-wear);
  background-size: 100% 100%;
  pointer-events: none;
  mask-image:
    linear-gradient(
      90deg,
      #000 0 12px,
      transparent 17px calc(100% - 17px),
      #000 calc(100% - 12px)),
    linear-gradient(
      #000 0 10px,
      transparent 16px calc(100% - 16px),
      #000 calc(100% - 10px));
}
#bf-book-mockup .bf-journal {
  --bf-cover-wear:var(--bf-cover-wear-journal);
}
body[data-page=atlas] #bf-book-mockup .bf-stage > .bf-binding {
  --bf-cover-wear:var(--bf-cover-wear-atlas);
}
#bf-book-mockup .bf-journal .bf-page:first-child:after {
  inset: 0;
  border: 0;
  border-radius: 3px 0 0 7px;
  background: var(--bf-cover-grain) 0 0/100% 100%;
  opacity: .2;
  pointer-events: none;
}
#bf-book-mockup[data-theme=dark] .bf-journal .bf-page:first-child:after {
  opacity: .25;
}
#bf-book-mockup .bf-atlas-ornament {
  font-size: 34px;
  opacity: .12;
  right: 24px;
  top: 24px;
}

/* src/reader/book/reader-volume.css */
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) {
  --bf-paper:light-dark(#eee4cf,#252a31);
  --bf-volume-fold:50%;
  --bf-volume-shadow:light-dark(#5e41274d,#0009);
  --bf-volume-edge:light-dark(#c8b897,#42464e);
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-stage {
  padding: 34px 28px 52px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-binding {
  max-width: 1320px;
  padding: 15px 20px 25px 24px;
  border-radius: 8px 13px 16px 6px;
  box-shadow:
    0 25px 45px #0009,
    0 6px 0 #0b1928,
    inset 3px 0 5px #688aad50;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-sheet {
  min-height: calc(100vh - 130px);
  border-radius: 2px 5px 11px 2px;
  box-shadow:
    1px 2px 0 var(--bf-volume-edge),
    3px 4px 0 light-dark(#e0d3b7, #55585e),
    2px 6px 0 var(--bf-volume-edge),
    4px 8px 0 light-dark(#d9c9aa, #383e47),
    3px 11px 0 var(--bf-volume-edge),
    0 15px 15px #0005;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-sheet:before {
  opacity: var(--bf-volume-texture,.3);
  background-size: 600% 400%;
  background-position: 70% 50%;
  box-shadow: inset 0 0 24px light-dark(#74512b26, #0004), inset -4px 0 9px light-dark(#79552e26, #0004);
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-sheet:after {
  display: block;
  left: calc(var(--bf-volume-fold) - 24px);
  width: 48px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--bf-volume-shadow) 43%,
      light-dark(#38271770, #000a) 50%,
      light-dark(#fff5, #a2aeb91a) 54%,
      light-dark(#8a6e3426, #0004) 67%,
      transparent);
  z-index: 0;
  border-radius: 0;
  pointer-events: none;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-full > .bf-page {
  padding: 28px 50px 30px;
  min-height: calc(100vh - 130px);
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-top {
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--bf-blue) 40%, transparent);
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-footer {
  border-top: 1px solid color-mix(in srgb, var(--bf-blue) 25%, transparent);
  margin-top: 42px;
  padding-top: 20px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-preview-toc {
  margin: 22px 0 0;
  max-width: none;
  min-height: 420px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 90px;
  min-height: 300px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index .bf-index {
  border: 0;
  padding: 0;
  align-items: stretch;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index-title {
  max-width: 38%;
  align-items: flex-start;
  margin-bottom: 34px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index-title h1 {
  font:
    500 34px/1.2 "BF Reading",
    Georgia,
    serif;
  letter-spacing: -.02em;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-index button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bf-line);
  box-shadow: none;
  padding: 16px 6px;
  font:
    20px/1.5 "BF Reading",
    Georgia,
    serif;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-index button[aria-pressed=true] {
  border: 0;
  border-bottom: 2px solid var(--bf-blue);
  color: var(--bf-blue);
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-rows button {
  background: light-dark(#ffffff26, #ffffff04);
  box-shadow: none;
  border: 0;
  border-block: 1px solid var(--bf-line);
  padding: 22px 12px;
  border-radius: 0;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index > section > h2 {
  font:
    500 30px/1.3 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-blue);
  margin-bottom: 26px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 90px;
  row-gap: 20px;
  align-content: start;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > .bf-top {
  grid-column: 1/-1;
  margin-bottom: 10px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-profile {
  grid-column: 1;
  grid-row: 2;
  margin: 20px 0;
  align-items: flex-start;
  gap: 20px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-avatar {
  border-radius: 3px;
  box-shadow: 2px 3px 0 var(--bf-volume-edge), 0 5px 12px #0002;
  transform: rotate(-2deg);
  flex-shrink: 0;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-profile h1 {
  font-size: 36px;
  overflow-wrap: anywhere;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-stats {
  grid-column: 1;
  grid-row: 3;
  grid-template-columns: 1fr;
  gap: 0;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-stats section {
  border: 0;
  border-bottom: 1px solid var(--bf-line);
  padding: 16px 0;
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 15px;
  align-items: center;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-stats strong {
  font:
    600 25px/1.3 "BF Reading",
    Georgia,
    serif;
  margin: 0;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > section:nth-of-type(1):not(.bf-access) {
  grid-column: 2;
  grid-row: 2;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > section:nth-of-type(2) {
  grid-column: 2;
  grid-row: 3;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-actions {
  grid-column: 1;
  grid-row: 4;
  margin: 8px 0;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > p {
  grid-column: 1;
  grid-row: 5;
  color: var(--bf-muted);
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > .bf-footer {
  grid-column: 1/-1;
  margin-top: 15px;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > h1,
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > .bf-access,
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > [role=alert] {
  grid-column: 1/-1;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account h2 {
  font:
    500 30px/1.3 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-blue);
  margin: 20px 0;
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account details {
  border: 0;
  border-block: 1px solid var(--bf-line);
  background: light-dark(#ffffff20, #ffffff03);
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account summary {
  font:
    500 22px/1.5 "BF Reading",
    Georgia,
    serif;
  padding: 18px 8px;
}
#bf-book-mockup:has(.bf-reader) {
  --bf-volume-fold:25px;
}
#bf-book-mockup:has(.bf-reader) .bf-full > .bf-page {
  padding-inline: 60px 46px;
}
#bf-book-mockup:has(.bf-reader) .bf-sheet:after {
  left: 0;
  width: 35px;
  background:
    linear-gradient(
      90deg,
      light-dark(#35271870, #000a),
      var(--bf-volume-shadow) 35%,
      transparent);
}
#bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-reader {
  padding-bottom: 20px;
}
@media (max-width: 900px) {
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-profile {
    flex-direction: column;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-stats section {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index,
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account {
    column-gap: 60px;
  }
}
@media (max-width: 700px) {
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-stage {
    padding: 14px 8px 30px;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-binding {
    padding: 8px 9px 17px 12px;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-full > .bf-page {
    padding: 20px 20px 24px 26px;
    min-height: calc(100vh - 80px);
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-sheet:after {
    left: 0;
    width: 16px;
    background:
      linear-gradient(
        90deg,
        var(--bf-volume-shadow),
        transparent);
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index-title {
    max-width: none;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index {
    grid-template-columns: 1fr;
    gap: 26px;
    min-height: 0;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-book-index .bf-index {
    border-bottom: 1px solid var(--bf-line);
    padding-bottom: 16px;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-profile {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 8px 0;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-stats section {
    grid-template-columns: 110px 1fr;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account-actions {
    order: 0;
  }
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-account > .bf-footer {
    margin-top: auto;
  }
}
#bf-book-mockup[data-theme=dark]:has(.bf-reader, .bf-preview-toc, .bf-account) {
  --bf-volume-texture:.06;
}
#bf-book-mockup:has(.bf-reader) .bf-sheet:before {
  background-size: 600% 400%;
  background-position: 70% 50%;
}
@media (max-width: 700px) {
  #bf-book-mockup:has(.bf-reader, .bf-preview-toc, .bf-account) .bf-sheet:before {
    background-size: 600% 400%;
    background-position: 70% 50%;
  }
}
#bf-book-mockup:has(.bf-reader) .bf-sheet:before {
  opacity: .12;
}
#bf-book-mockup[data-theme=dark]:has(.bf-reader) .bf-sheet:before {
  opacity: .045;
}
#bf-book-mockup:has(.bf-preview-toc) .bf-index .bf-part-copy {
  font: inherit;
}
#bf-book-mockup:has(.bf-spread) .bf-spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  background: none;
  align-items: stretch;
}
#bf-book-mockup:has(.bf-spread) .bf-spread:before {
  background: none !important;
  box-shadow: none;
  opacity: 0;
}
#bf-book-mockup:has(.bf-spread) .bf-spread:after {
  left: calc(50% - 18px);
  width: 36px;
  z-index: 3;
  background:
    linear-gradient(
      90deg,
      transparent,
      light-dark(#63421c35, #0006) 35%,
      light-dark(#37271870, #000b) 49%,
      light-dark(#fff4, #bdc8d81a) 54%,
      transparent);
  pointer-events: none;
}
#bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page {
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: none;
  min-height: 690px;
  margin: 0;
  padding: 26px 38px 28px;
  gap: 0;
  background-color: var(--bf-paper);
  isolation: isolate;
  position: relative;
  border-radius: 4px 0 0 5px;
  box-shadow: inset 0 0 18px light-dark(#79562b15, #0003);
}
#bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page:last-child {
  padding-left: 42px;
  border-radius: 0 5px 10px 0;
}
#bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--bf-paper-photo);
  background-size: 600% 400%;
  background-position: 70% 50%;
  opacity: .3;
  mix-blend-mode: multiply;
  border-radius: inherit;
}
#bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page:last-child:before {
  background-position: 70% 50%;
}
#bf-book-mockup[data-theme=dark]:has(.bf-spread) .bf-spread > .bf-page:before {
  opacity: .06;
  mix-blend-mode: luminosity;
}
#bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page > * {
  min-width: 0;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-top {
  min-height: 70px;
  padding: 0 0 20px;
  margin: 0 0 32px;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  flex-wrap: wrap;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-top > .bf-small {
  position: static;
  transform: none;
  font:
    16px/1.5 "BF Reading",
    Georgia,
    serif;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-controls {
  margin-left: auto;
  width: auto;
  gap: 8px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-footer {
  margin-top: auto;
  padding-top: 25px;
  border-top: 0;
  gap: 14px;
  flex-wrap: wrap;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-footer span {
  font:
    14px/1.5 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-muted);
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-book-index-title {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread h1 {
  font:
    500 38px/1.2 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-blue);
  margin: 0;
}
#bf-book-mockup:has(.bf-spread) .bf-spread h2 {
  font:
    500 30px/1.3 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-blue);
  margin: 0 0 28px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-leaf-subtitle {
  font-size: 23px;
  color: var(--bf-muted);
  margin-bottom: 16px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-index {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 38px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-index button {
  padding: 15px 6px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  font:
    22px/1.5 "BF Reading",
    Georgia,
    serif;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bf-line);
  box-shadow: none;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-index button[aria-pressed=true] {
  color: var(--bf-blue);
  border-bottom: 2px solid var(--bf-blue);
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-part-copy {
  font: inherit;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-rows button {
  grid-template-columns: 90px minmax(0, 1fr) 20px;
  font:
    22px/1.4 "BF Reading",
    Georgia,
    serif;
  margin-bottom: 16px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-number {
  font:
    15px/1.4 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-muted);
}
#bf-book-mockup:has(.bf-spread) .bf-leaf-note {
  font:
    16px/1.7 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-muted);
  margin: 30px 0;
}
#bf-book-mockup:has(.bf-spread) .bf-leaf-intro {
  font:
    22px/1.7 "BF Reading",
    Georgia,
    serif;
  margin: 28px 0;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-profile {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0 0 30px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0 0 30px;
  gap: 0;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats section {
  grid-template-columns: 130px minmax(0, 1fr);
  padding: 19px 0;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats strong {
  font-size: 24px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-actions {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 35px;
  gap: 10px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account > section {
  margin: 0 0 32px;
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-account > .bf-access {
  padding: 0;
  margin: 0 0 28px;
  max-width: none;
}
@media (max-width: 850px) {
  #bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page {
    padding-inline: 24px;
  }
  #bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page:last-child {
    padding-left: 28px;
  }
  #bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats section {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  #bf-book-mockup:has(.bf-spread) .bf-spread h1 {
    font-size: 32px;
  }
  #bf-book-mockup:has(.bf-spread) .bf-spread .bf-book-index-title {
    flex-wrap: wrap;
  }
}
@media (max-width: 700px) {
  #bf-book-mockup:has(.bf-spread) .bf-spread {
    grid-template-columns: 1fr;
    gap: 12px;
    background: transparent;
    box-shadow: none;
  }
  #bf-book-mockup:has(.bf-spread) .bf-spread:after {
    display: none;
  }
  #bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page,
  #bf-book-mockup:has(.bf-spread) .bf-spread > .bf-page:last-child {
    padding: 22px 24px;
    min-height: 420px;
    border-radius: 3px 6px 9px 3px;
    border: 0;
    box-shadow: 0 2px var(--bf-volume-edge), 0 5px light-dark(#dac9a8, #353b44);
  }
  #bf-book-mockup:has(.bf-spread) .bf-spread .bf-top {
    margin-bottom: 26px;
  }
  #bf-book-mockup:has(.bf-spread) .bf-spread .bf-account-stats section {
    grid-template-columns: 115px minmax(0, 1fr);
  }
}
#bf-book-mockup:has(.bf-spread) .bf-spread .bf-index .bf-part-copy {
  font:
    22px/1.5 "BF Reading",
    Georgia,
    serif !important;
}
#bf-book-mockup .bf-sheet.bf-full:before,
#bf-book-mockup .bf-sheet.bf-spread > .bf-page:before {
  background-size: 600% 400% !important;
  background-position: 70% 50% !important;
}
#bf-book-mockup .bf-profile-preview {
  min-width: 0;
}
#bf-book-mockup .bf-profile-preview > .bf-account-avatar {
  flex-shrink: 0;
}
#bf-book-mockup .bf-profile-preview > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  #bf-book-mockup .bf-profile-preview {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  #bf-book-mockup .bf-profile-preview > span:last-child {
    max-width: 100%;
  }
}

/* src/reader/book/book.css */
body[data-book-theme] {
  background: #222b37;
}
body[data-book-theme=dark] {
  background: #101722;
}
#bf-book-mockup {
  min-height: 100vh;
  color-scheme: light;
}
#bf-book-mockup[data-theme=dark] {
  color-scheme: dark;
}
#bf-book-mockup .bf-stage {
  min-height: 100vh;
  border-radius: 0;
}
#bf-book-mockup .bf-binding {
  max-width: 1180px;
  margin: auto;
}
#bf-book-mockup .bf-reader .reader-paper {
  background: transparent;
  color: var(--bf-ink);
  padding: 0;
  max-width: none;
  min-height: 0;
  box-shadow: none;
}
#bf-book-mockup .reader-eyebrow {
  display: none;
}
#bf-book-mockup .reader-number {
  margin: 0 0 20px;
  text-align: center;
  color: var(--bf-muted);
  font: 12px/1.6 system-ui;
}
#bf-book-mockup .reader-paper h1 {
  font: 400 35px/1.25 Georgia, serif;
  text-align: center;
  margin: 0 0 30px;
  color: var(--bf-narrator-a,var(--bf-blue));
}
#bf-book-mockup .reader-divider {
  margin: 0 auto 35px;
  background:
    linear-gradient(
      90deg,
      var(--bf-narrator-a,var(--bf-blue)),
      var(--bf-narrator-b,var(--bf-blue)));
}
#bf-book-mockup .reader-prose {
  font: inherit;
  color: var(--bf-ink);
}
#bf-book-mockup .reader-prose h2,
#bf-book-mockup .reader-prose h3 {
  color: var(--bf-blue);
  text-align: left;
  margin: 1.5em 0 .6em;
}
#bf-book-mockup .reader-prose blockquote {
  color: var(--bf-muted);
  border-color: var(--bf-line);
}
#bf-book-mockup .reader-prose a {
  color: var(--bf-blue);
}
#bf-book-mockup .reader-prose pre {
  background: var(--bf-faint);
  color: var(--bf-ink);
}
#bf-book-mockup .reader-chronology {
  font: 14px/1.6 system-ui;
  color: var(--bf-muted);
  text-align: center;
  margin-bottom: 25px;
}
#bf-book-mockup .bf-preview-toc {
  width: min(100%, 740px);
  margin: 40px auto;
}
#bf-book-mockup .bf-preview-toc h1 {
  font-family:
    "BF Title",
    Georgia,
    serif;
  color: var(--bf-blue);
  margin: 20px 0 35px;
}
#bf-book-mockup .bf-preview-toc p {
  margin-top: 25px;
}
#bf-book-mockup .bf-reader,
#bf-book-mockup .bf-preview-toc {
  animation: bf-live-page-in .55s ease both;
}
@keyframes bf-live-page-in {
  from {
    opacity: 0;
    transform: perspective(1200px) rotateY(-3deg) translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #bf-book-mockup *,
  #bf-book-mockup *:before,
  #bf-book-mockup *:after {
    animation: none !important;
    transition: none !important;
  }
}
#bf-book-mockup .bf-sheet {
  padding: 0;
}
#bf-book-mockup .bf-preview-toc {
  width: 100%;
  max-width: 1000px;
}
#bf-book-mockup .bf-book-index-title {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
#bf-book-mockup .bf-book-index-title h1 {
  margin: 0;
  font-size: 40px;
}
#bf-book-mockup .bf-book-index {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
  gap: 45px;
}
#bf-book-mockup .bf-book-index .bf-index {
  border-right: 1px solid var(--bf-line);
  padding-right: 25px;
}
#bf-book-mockup .bf-row-title small {
  display: block;
  color: var(--bf-muted);
  font: 12px/1.5 system-ui;
  margin-top: 6px;
}
#bf-book-mockup .bf-rows button[aria-current=page] {
  color: var(--bf-blue);
}
@media (max-width: 700px) {
  #bf-book-mockup .bf-book-index {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  #bf-book-mockup .bf-book-index .bf-index {
    border-right: 0;
    border-bottom: 1px solid var(--bf-line);
    padding: 0 0 20px;
  }
}
.live-read-error {
  padding: 18px;
  background: #fff0d8;
  color: #392718;
  font: 16px/1.6 system-ui;
}
.live-read-error button {
  margin-left: 15px;
}
@font-face {
  font-family: "BF Reading";
  src: url("./eb-garamond-6LVRHJHF.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}
#bf-book-mockup .bf-reader {
  width: 100%;
  max-width: none;
  font-family:
    "BF Reading",
    Georgia,
    serif;
  line-height: 1.75;
}
#bf-book-mockup .bf-reader .reader-prose {
  font-family:
    "BF Reading",
    Georgia,
    serif;
}
#bf-book-mockup .bf-reader p:first-of-type:first-letter {
  float: none;
  font-size: inherit;
  line-height: inherit;
  padding: 0;
  color: inherit;
}
#bf-book-mockup {
  --bf-tile-bg:#edf2f8;
  --bf-tile-ink:#263b53;
  --bf-tile-border:#879caf;
}
#bf-book-mockup[data-theme=dark] {
  --bf-tile-bg:#233348;
  --bf-tile-ink:#eef5ff;
  --bf-tile-border:#66809c;
}
#bf-book-mockup button,
#bf-book-mockup .bf-home-link,
#bf-book-mockup .bf-read-progress a {
  font-size: 16px;
  line-height: 1.4;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--bf-tile-border);
  border-radius: 8px;
  background: var(--bf-tile-bg);
  color: var(--bf-tile-ink);
  text-decoration: none;
  box-shadow: 0 2px 3px #00000012;
}
#bf-book-mockup button:hover:not(:disabled),
#bf-book-mockup a.bf-home-link:hover {
  filter: brightness(.94);
  border-color: var(--bf-blue);
}
#bf-book-mockup button:focus-visible,
#bf-book-mockup a:focus-visible {
  outline: 3px solid var(--bf-blue);
  outline-offset: 3px;
}
#bf-book-mockup button:disabled {
  opacity: 1;
  color: var(--bf-tile-ink);
  box-shadow: none;
  cursor: default;
}
#bf-book-mockup button[aria-pressed=true] {
  border: 2px solid var(--bf-blue);
  font-weight: 700;
}
#bf-book-mockup .bf-small,
#bf-book-mockup .bf-footer span,
#bf-book-mockup .reader-number,
#bf-book-mockup .reader-chronology,
#bf-book-mockup .bf-narrator-name,
#bf-book-mockup .bf-row-title small,
#bf-book-mockup .bf-controls output {
  display: inline-block;
  font: 500 15px/1.5 system-ui;
  color: var(--bf-tile-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  opacity: 1;
  letter-spacing: normal;
}
#bf-book-mockup .bf-row-title small {
  display: table;
  margin-top: 8px;
}
#bf-book-mockup .bf-top,
#bf-book-mockup .bf-controls,
#bf-book-mockup .bf-reader-end {
  gap: 10px;
  flex-wrap: wrap;
}
#bf-book-mockup .bf-controls output {
  min-width: 36px;
  text-align: center;
}
#bf-book-mockup .bf-rows button {
  width: 100%;
  margin-bottom: 10px;
  text-align: left;
}
#bf-book-mockup .bf-index button {
  margin-bottom: 8px;
}
#bf-book-mockup .bf-read-progress {
  margin: 28px 0;
}
#bf-book-mockup .bf-read-progress p {
  font: 16px/1.7 system-ui;
}
@media (max-width: 700px) {
  #bf-book-mockup .bf-top {
    align-items: flex-start;
  }
  #bf-book-mockup .bf-controls {
    width: 100%;
  }
  #bf-book-mockup .bf-footer {
    gap: 8px;
    flex-wrap: wrap;
  }
}
#bf-book-mockup button,
#bf-book-mockup .bf-home-link,
#bf-book-mockup .bf-read-progress a {
  border-radius: 1px;
}
#bf-book-mockup .bf-top {
  position: relative;
  justify-content: flex-start;
}
#bf-book-mockup .bf-top > .bf-small {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
#bf-book-mockup .bf-top > .bf-controls {
  margin-left: auto;
}
#bf-book-mockup .bf-reader .reader-number {
  display: none;
}
#bf-book-mockup .bf-reader-end button {
  font-size: 19px;
  min-height: 56px;
  padding: 14px 24px;
}
#bf-book-mockup .bf-read-progress button,
#bf-book-mockup .bf-read-progress a {
  font-size: 22px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 8px 0;
  min-height: 48px;
  color: var(--bf-tile-ink);
}
#bf-book-mockup .bf-read-progress button:hover:not(:disabled) {
  filter: none;
  text-decoration: underline;
  text-underline-offset: 5px;
}
@media (max-width: 1000px) {
  #bf-book-mockup .bf-top {
    padding-top: 40px;
  }
  #bf-book-mockup .bf-top > .bf-small {
    top: 0;
    transform: translateX(-50%);
  }
  #bf-book-mockup .bf-top > .bf-controls {
    margin-left: 0;
  }
  #bf-book-mockup .bf-reader-end button {
    flex: 1;
    min-width: 180px;
  }
}
#bf-book-mockup .bf-reader-end button {
  font: 19px/1.4 system-ui, sans-serif !important;
  padding: 14px 24px !important;
}
#bf-book-mockup .bf-read-progress button {
  font: 22px/1.5 system-ui, sans-serif !important;
  padding: 8px 0 !important;
}
#bf-book-mockup .bf-reader .bf-narrator-name {
  font:
    600 30px/1.3 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-narrator-a,var(--bf-blue));
}
.bf-unlock-notices {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  max-width: min(400px, calc(100vw - 32px));
  max-height: 65vh;
  overflow: auto;
  padding: 20px;
  border: 1px solid #7093b5;
  border-radius: 2px;
  background: #edf2f8;
  color: #263b53;
  box-shadow: 0 8px 28px #0004;
  font: 16px/1.5 system-ui;
  animation: bf-live-page-in .35s ease both;
}
body[data-book-theme=dark] .bf-unlock-notices {
  background: #233348;
  color: #eef5ff;
}
.bf-unlock-notices ul {
  padding-left: 20px;
}
.bf-unlock-notices button {
  font: 16px/1.4 system-ui;
  padding: 10px 16px;
  border: 1px solid #7093b5;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .bf-unlock-notices {
    animation: none;
  }
}
.bf-read-end-marker {
  display: block;
  width: 100%;
  height: 1px;
}
.bf-demo-banner {
  padding: 18px 24px;
  background: #dce9f6;
  color: #203951;
  font: 16px/1.5 system-ui;
}
.bf-demo-banner p {
  margin: 8px 0;
}
.bf-demo-banner a {
  color: #235e98;
}
.bf-access {
  max-width: 720px;
  margin: 40px auto;
  padding: 24px;
}
.bf-access form {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}
.bf-access label {
  display: grid;
  gap: 8px;
  font: 18px/1.5 system-ui;
}
.bf-access input,
.bf-access textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid var(--bf-line);
  background: light-dark(#fffaf0, #202731);
  color: inherit;
  font: 18px/1.5 system-ui;
}
.bf-access form button {
  justify-self: start;
}
.bf-access button[disabled] {
  opacity: .6;
}
@keyframes bf-page-turn-in {
  from {
    opacity: 0;
    transform: perspective(1800px) rotateY(-9deg) translateX(28px);
    filter: brightness(.86);
  }
  to {
    opacity: 1;
    transform: perspective(1800px) rotateY(0) translateX(0);
    filter: brightness(1);
  }
}
#bf-book-mockup .bf-reader,
#bf-book-mockup .bf-preview-toc {
  transform-origin: left center;
  animation: bf-page-turn-in .65s cubic-bezier(.2, .65, .2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  #bf-book-mockup .bf-reader,
  #bf-book-mockup .bf-preview-toc {
    animation: none;
  }
}

/* src/reader/account.css */
.bf-account h1 {
  font:
    600 36px/1.3 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-blue);
}
.bf-account h2 {
  font-size: 26px;
  margin: 30px 0 16px;
}
.bf-account-profile {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 40px 0;
}
.bf-account-avatar {
  width: 90px;
  height: 90px;
  object-fit: cover;
  display: grid;
  place-items: center;
  border: 1px solid var(--bf-line);
  border-radius: 50%;
  font: 40px Georgia;
  background: var(--bf-faint);
  color: var(--bf-blue);
}
.bf-account-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.bf-account-stats section {
  padding: 20px;
  border: 1px solid var(--bf-line);
}
.bf-account-stats strong {
  display: block;
  font-size: 24px;
  color: var(--bf-blue);
  margin-bottom: 8px;
}
.bf-account-stats span,
.bf-account-list {
  font: 16px/1.6 system-ui;
}
.bf-account details {
  margin: 12px 0;
  border: 1px solid var(--bf-line);
}
.bf-account summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  cursor: pointer;
  font: 18px/1.5 system-ui;
  color: var(--bf-ink);
}
.bf-account summary:before {
  content: "\203a";
  color: var(--bf-blue);
}
.bf-account details[open] summary:before {
  content: "\2304";
}
.bf-account summary span {
  margin-left: auto;
}
.bf-account-list {
  list-style: none;
  padding: 0 18px;
  margin: 0;
}
.bf-account-list a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bf-line);
  color: var(--bf-blue);
  text-decoration: none;
}
.bf-account-list a:hover {
  text-decoration: underline;
}
.bf-account-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 36px 0;
}
.bf-account p {
  font: 17px/1.7 system-ui;
}
.bf-account-avatar + div h1 {
  margin: 8px 0;
}
.bf-account summary:focus-visible {
  outline: 3px solid var(--bf-blue);
  outline-offset: 2px;
}
@media (max-width: 700px) {
  .bf-account-stats {
    grid-template-columns: 1fr;
  }
  .bf-account-list a {
    flex-direction: column;
    gap: 4px;
  }
}

/* src/reader/social.css */
#bf-book-mockup .bf-profile-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0;
  font: 17px/1.5 system-ui;
}
#bf-book-mockup .bf-profile-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--bf-ink);
}
#bf-book-mockup .bf-profile-form input,
#bf-book-mockup .bf-profile-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--bf-line);
  border-radius: 3px;
  background: var(--bf-faint);
  color: var(--bf-ink);
  font: inherit;
  resize: vertical;
}
#bf-book-mockup .bf-profile-form input:focus-visible,
#bf-book-mockup .bf-profile-form textarea:focus-visible {
  outline: 2px solid var(--bf-blue);
  outline-offset: 2px;
}
#bf-book-mockup .bf-profile-form small {
  font: 14px/1.6 system-ui;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-profile-form button {
  align-self: flex-start;
  padding: 12px 18px;
}
#bf-book-mockup .bf-profile-preview {
  display: flex;
  gap: 22px;
  align-items: center;
  font: 26px "BF Reading", Georgia;
}
#bf-book-mockup .bf-social-stage {
  padding: 30px;
  max-width: 1400px;
  margin: auto;
}
#bf-book-mockup .bf-social-shell {
  background: var(--bf-paper);
  border: 1px solid var(--bf-line);
  border-radius: 8px;
  box-shadow: 0 12px 40px #0004;
  padding: 28px;
  color: var(--bf-ink);
  font: 17px/1.6 system-ui;
}
#bf-book-mockup .bf-social-top {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  border-bottom: 1px solid var(--bf-line);
  padding-bottom: 22px;
  flex-wrap: wrap;
}
#bf-book-mockup .bf-social-top h1 {
  font: 32px "BF Reading", Georgia;
  color: var(--bf-blue);
  margin: 0;
}
#bf-book-mockup .bf-social-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 34px;
  margin-top: 28px;
}
#bf-book-mockup .bf-social-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#bf-book-mockup .bf-social-shell a {
  color: var(--bf-blue);
  text-underline-offset: 4px;
}
#bf-book-mockup .bf-social-sidebar nav a {
  padding: 12px;
  background: var(--bf-faint);
  border: 1px solid var(--bf-line);
  text-decoration: none;
}
#bf-book-mockup .bf-person {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
  margin: 12px 0;
}
#bf-book-mockup .bf-person span {
  overflow-wrap: anywhere;
}
#bf-book-mockup .bf-person small {
  display: block;
  font-size: 13px;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-social-avatar {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1px solid var(--bf-line);
  object-fit: cover;
  background: var(--bf-faint);
  color: var(--bf-blue);
  display: grid;
  place-items: center;
  font: 25px Georgia;
}
#bf-book-mockup .bf-social-profile {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--bf-line);
  padding-bottom: 24px;
}
#bf-book-mockup .bf-social-profile > .bf-social-avatar {
  width: 100px;
  height: 100px;
  font-size: 40px;
}
#bf-book-mockup .bf-social-profile h2 {
  margin: 0;
  color: var(--bf-blue);
  font: 32px "BF Reading", Georgia;
}
#bf-book-mockup .bf-social-post {
  padding: 24px 0;
  border-top: 1px solid var(--bf-line);
}
#bf-book-mockup .bf-social-post header,
#bf-book-mockup .bf-comment header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
#bf-book-mockup .bf-social-post time,
#bf-book-mockup .bf-comment time {
  font-size: 13px;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-social-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 17px/1.7 system-ui;
}
#bf-book-mockup .bf-comment {
  border-left: 2px solid var(--bf-line);
  padding: 0 0 16px 20px;
  margin: 18px 0;
}
#bf-book-mockup .bf-post-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#bf-book-mockup .bf-post-actions button {
  font-size: 14px;
  padding: 6px 12px;
}
#bf-book-mockup .bf-social-shell [role=alert] {
  color: var(--bf-ink);
  border: 1px solid var(--bf-blue);
  padding: 16px;
}
@media (max-width: 750px) {
  #bf-book-mockup .bf-social-stage {
    padding: 10px;
  }
  #bf-book-mockup .bf-social-shell {
    padding: 18px;
  }
  #bf-book-mockup .bf-social-layout {
    grid-template-columns: 1fr;
  }
  #bf-book-mockup .bf-social-sidebar nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #bf-book-mockup .bf-social-profile {
    flex-direction: column;
  }
}
#bf-book-mockup .bf-social-stage {
  max-width: none;
  padding: 34px 28px 52px;
}
#bf-book-mockup .bf-social-stage > .bf-binding {
  max-width: 1320px;
  margin: auto;
}
#bf-book-mockup .bf-social-sheet {
  min-height: calc(100vh - 130px);
}
#bf-book-mockup .bf-social-sheet:before {
  background-image: url("./paper-XFEIVHT6.webp");
  background-size: cover;
  background-position: center;
  opacity: .3;
  mix-blend-mode: multiply;
}
#bf-book-mockup[data-theme=dark] .bf-social-sheet:before {
  opacity: .08;
  mix-blend-mode: screen;
}
#bf-book-mockup .bf-social-shell {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 28px 42px;
  color: var(--bf-ink);
  font:
    18px/1.65 "BF Reading",
    Georgia,
    serif;
}
#bf-book-mockup .bf-social-top h1 {
  font:
    400 clamp(27px, 2.6vw, 38px)/1.2 "BF Reading",
    Georgia,
    serif;
  max-width: 540px;
}
#bf-book-mockup .bf-social-layout {
  grid-template-columns: minmax(190px, 235px) minmax(0, 1fr);
  gap: 36px;
}
#bf-book-mockup .bf-social-sidebar {
  border-right: 1px solid var(--bf-line);
  padding-right: 28px;
  min-width: 0;
}
#bf-book-mockup .bf-social-sidebar h2 {
  font:
    26px/1.3 "BF Reading",
    Georgia,
    serif;
  margin: 28px 0 14px;
  color: var(--bf-blue);
}
#bf-book-mockup .bf-social-sidebar nav a {
  font: 16px/1.5 system-ui;
  min-height: 44px;
  border-radius: 1px;
  background: transparent;
}
#bf-book-mockup .bf-social-sidebar nav a[aria-current=page] {
  background: var(--bf-faint);
  border-left: 3px solid var(--bf-blue);
  font-weight: 600;
}
#bf-book-mockup .bf-social-sidebar nav a:hover {
  background: var(--bf-faint);
}
#bf-book-mockup .bf-social-wall {
  min-width: 0;
}
#bf-book-mockup .bf-social-wall > h2 {
  font:
    32px/1.25 "BF Reading",
    Georgia,
    serif;
  color: var(--bf-blue);
  margin-top: 28px;
}
#bf-book-mockup .bf-social-body {
  font:
    20px/1.7 "BF Reading",
    Georgia,
    serif;
}
#bf-book-mockup .bf-social-post {
  padding: 28px 0;
}
#bf-book-mockup .bf-social-post h3 {
  margin-top: 24px;
}
#bf-book-mockup .bf-post-actions {
  margin-top: 16px;
}
#bf-book-mockup .bf-post-actions button {
  font: 16px/1.4 system-ui;
  min-height: 44px;
  padding: 10px 14px;
}
#bf-book-mockup .bf-profile-form small {
  font-size: 15px;
}
#bf-book-mockup .bf-social-footer {
  margin-top: 36px;
  border-top: 1px solid var(--bf-line);
}
@media (max-width: 850px) {
  #bf-book-mockup .bf-social-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 24px;
  }
  #bf-book-mockup .bf-social-shell {
    padding: 24px;
  }
  #bf-book-mockup .bf-social-sidebar {
    padding-right: 18px;
  }
}
@media (max-width: 750px) {
  #bf-book-mockup .bf-social-stage {
    padding: 14px 10px 30px;
  }
  #bf-book-mockup .bf-social-layout {
    grid-template-columns: 1fr;
  }
  #bf-book-mockup .bf-social-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--bf-line);
    padding: 0 0 24px;
  }
  #bf-book-mockup .bf-social-shell {
    padding: 20px 18px;
  }
  #bf-book-mockup .bf-social-sidebar nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #bf-book-mockup .bf-social-top {
    gap: 16px;
  }
  #bf-book-mockup .bf-social-top .bf-controls {
    display: flex;
    gap: 8px;
  }
  #bf-book-mockup .bf-social-profile {
    flex-direction: row;
    gap: 16px;
  }
  #bf-book-mockup .bf-social-profile > .bf-social-avatar {
    width: 72px;
    height: 72px;
  }
  #bf-book-mockup .bf-social-profile h2 {
    overflow-wrap: anywhere;
  }
}
#bf-book-mockup .bf-profile-preview {
  min-width: 0;
}
#bf-book-mockup .bf-profile-preview > .bf-account-avatar {
  flex-shrink: 0;
}
#bf-book-mockup .bf-profile-preview > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 700px) {
  #bf-book-mockup .bf-profile-preview {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  #bf-book-mockup .bf-profile-preview > span:last-child {
    max-width: 100%;
  }
}

/* src/reader/links.css */
.bf-links-content h1 {
  font:
    400 42px/1.2 "BF Title",
    Georgia,
    serif;
  color: var(--bf-blue);
  margin: 42px 0 16px;
}
.bf-links-intro {
  max-width: 650px;
  font-size: 19px;
  line-height: 1.7;
  color: var(--bf-muted);
}
.bf-links-group {
  margin-top: 38px;
}
.bf-links-group h2 {
  font: 400 28px/1.3 Georgia, serif;
  border-bottom: 1px solid var(--bf-line);
  padding-bottom: 12px;
}
.bf-links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.bf-link-card {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 104px;
  padding: 18px 22px;
  border: 1px solid var(--bf-line);
  border-radius: 5px;
  background: var(--bf-faint);
  color: var(--bf-ink);
  text-decoration: none;
  box-shadow: 0 3px 5px #0000000a;
  transition:
    transform .2s,
    box-shadow .2s,
    border-color .2s;
}
.bf-link-card:hover {
  transform: translateY(-3px);
  border-color: var(--bf-blue);
  box-shadow: 0 7px 15px #0002;
}
.bf-link-card:focus-visible {
  outline: 3px solid var(--bf-blue);
  outline-offset: 4px;
}
.bf-link-card[style] {
  border-left: 3px solid var(--link-color);
}
.bf-link-card[style] .bf-link-icon {
  color: var(--bf-ink);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--link-color) 24%, transparent),
      color-mix(in srgb, var(--link-color2) 24%, transparent));
  box-shadow: inset 0 0 0 1px var(--link-color2);
  border-radius: 4px;
}
.bf-link-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--bf-blue);
}
.bf-link-card strong {
  display: block;
  font: 600 19px/1.4 system-ui;
}
.bf-link-card small {
  display: block;
  margin-top: 5px;
  font: 15px/1.5 system-ui;
  color: var(--bf-muted);
}
.bf-link-arrow {
  margin-left: auto;
  font-size: 23px;
  color: var(--bf-blue);
}
.bf-links-empty {
  margin: 50px 0;
  color: var(--bf-muted);
}
@media (max-width: 650px) {
  .bf-links-grid {
    grid-template-columns: 1fr;
  }
  .bf-links-content h1 {
    font-size: 32px;
  }
  .bf-link-card {
    padding: 16px;
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bf-link-card {
    transition: none;
  }
  .bf-link-card:hover {
    transform: none;
  }
}

/* src/reader/reading-state.css */
#bf-book-mockup .bf-resume-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--bf-line);
  background: var(--bf-faint);
  min-width: 0;
  overflow-wrap: anywhere;
  font: 16px/1.5 system-ui;
}
#bf-book-mockup .bf-resume-card > span,
#bf-book-mockup .bf-resume-card small {
  font-size: 14px;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-resume-card strong {
  color: var(--bf-ink);
  font-size: 18px;
}
#bf-book-mockup .bf-resume-card a {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--bf-blue);
  text-decoration: none;
}
#bf-book-mockup .bf-reading-tools {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  margin: 0 0 22px;
  font: 14px/1.5 system-ui;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-reading-tools button,
#bf-book-mockup .bf-reading-tools a {
  min-height: 40px;
  padding: 6px 0;
  color: var(--bf-blue);
  background: none;
  border: 0;
  text-decoration: underline;
  font: inherit;
  cursor: pointer;
}
#bf-book-mockup .bf-reading-notice {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 16px;
  background: var(--bf-paper);
  color: var(--bf-ink);
  border: 1px solid var(--bf-line);
  box-shadow: 0 4px 20px #0002;
  font: 14px/1.5 system-ui;
}
#bf-book-mockup .bf-reading-notice button {
  min-height: 40px;
  min-width: 40px;
  padding: 4px 8px;
  flex-shrink: 0;
  background: var(--bf-tile-bg);
  color: var(--bf-tile-ink);
  border: 1px solid var(--bf-tile-border);
  cursor: pointer;
  font: inherit;
}
#bf-book-mockup .bf-reading-notice button:disabled {
  display: none;
}
#bf-book-mockup .bf-bookmark-list {
  padding: 0;
}
#bf-book-mockup .bf-bookmark-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--bf-line);
}
#bf-book-mockup .bf-bookmark-list a {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  flex-direction: column;
  gap: 4px;
  border: 0;
}
#bf-book-mockup .bf-bookmark-list small {
  font-size: 13px;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-bookmark-list button {
  font: 14px/1.4 system-ui;
  min-height: 44px;
  padding: 8px 12px;
  background: var(--bf-tile-bg);
  color: var(--bf-tile-ink);
  border: 1px solid var(--bf-tile-border);
  cursor: pointer;
}
#bf-book-mockup .bf-bookmark-hint {
  font-size: 14px !important;
  color: var(--bf-muted);
}
#bf-book-mockup .bf-account-profile > div {
  min-width: 0;
  overflow-wrap: anywhere;
}
#bf-book-mockup .bf-account-profile > .bf-account-avatar {
  flex-shrink: 0;
}
#bf-book-mockup .bf-resume-card a:focus-visible,
#bf-book-mockup .bf-reading-tools :is(button, a):focus-visible,
#bf-book-mockup .bf-bookmark-list :is(button, a):focus-visible {
  outline: 2px solid var(--bf-blue);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  #bf-book-mockup .bf-account-profile {
    flex-wrap: wrap;
  }
  #bf-book-mockup .bf-reading-tools {
    gap: 6px 16px;
  }
  #bf-book-mockup .bf-reading-tools > span {
    font-size: 12px;
  }
  #bf-book-mockup .bf-reading-notice {
    bottom: calc(12px + env(safe-area-inset-bottom));
    padding: 6px 10px;
    gap: 8px;
  }
}

/* src/reader/book/mobile-reader.css */
#bf-book-mockup .bf-mobile-reader-panel,
#bf-book-mockup .bf-mobile-reader-trigger {
  display: none;
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  #bf-book-mockup[data-reader-mode=text] {
    min-height: 100svh;
    background: var(--bf-paper);
  }
  #bf-book-mockup[data-reader-mode=text] .bf-stage {
    padding: 0 !important;
    background: var(--bf-paper) !important;
    min-height: 100svh;
    overflow: visible;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-stage > .bf-binding {
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    max-width: none !important;
    width: 100%;
    box-shadow: none !important;
    background: var(--bf-paper) !important;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-binding:before,
  #bf-book-mockup[data-reader-mode=text] .bf-sheet:before,
  #bf-book-mockup[data-reader-mode=text] .bf-sheet:after,
  #bf-book-mockup[data-reader-mode=text] .bf-corner {
    display: none !important;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-sheet.bf-full {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100svh;
    background: var(--bf-paper);
  }
  #bf-book-mockup[data-reader-mode=text] .bf-full > .bf-page {
    padding: calc(104px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
    min-height: 100svh;
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-page > .bf-top,
  #bf-book-mockup[data-reader-mode=text] .bf-reader-end {
    display: none !important;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-reader {
    animation: none !important;
    transform: none !important;
    padding-bottom: 0;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-reader .bf-narrator-name {
    font-size: 20px;
    margin-top: 4px;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-narrator-identity {
    margin: 0 0 24px;
  }
  #bf-book-mockup[data-reader-mode=text] .reader-paper h1 {
    font-size: 29px;
    line-height: 1.25;
    margin-bottom: 22px;
  }
  #bf-book-mockup[data-reader-mode=text] .reader-divider {
    margin-bottom: 26px;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-read-progress button {
    font: 15px/1.5 system-ui !important;
    padding: 8px 10px !important;
    min-height: 40px;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-mobile-reader-panel {
    display: block;
    position: fixed;
    inset: 0 0 auto;
    z-index: 110;
    padding: calc(6px + env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    background: var(--bf-paper);
    color: var(--bf-ink);
    border-bottom: 1px solid var(--bf-line);
    box-shadow: 0 4px 16px #0002;
    transition: transform .18s ease, opacity .18s ease;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-mobile-reader-panel[data-open=false] {
    transform: translateY(-110%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  #bf-book-mockup .bf-mobile-reader-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }
  #bf-book-mockup .bf-mobile-reader-row + .bf-mobile-reader-row {
    margin-top: 4px;
  }
  #bf-book-mockup .bf-mobile-reader-panel button,
  #bf-book-mockup .bf-mobile-reader-panel a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 40px;
    min-height: 40px;
    padding: 6px 9px !important;
    font: 13px/1.2 system-ui !important;
    border: 1px solid var(--bf-tile-border);
    border-radius: 4px;
    background: var(--bf-tile-bg);
    color: var(--bf-tile-ink);
    box-shadow: none;
    white-space: nowrap;
    text-decoration: none;
  }
  #bf-book-mockup .bf-mobile-reader-panel button:disabled {
    opacity: .42;
    cursor: default;
  }
  #bf-book-mockup .bf-mobile-reader-panel .bf-mobile-reader-icon {
    font-size: 23px !important;
  }
  #bf-book-mockup .bf-mobile-reader-panel output {
    font: 13px/1.3 system-ui;
    min-width: 22px;
    text-align: center;
  }
  #bf-book-mockup .bf-mobile-reader-panel .bf-mobile-reader-position {
    min-width: 0;
    flex: 1;
    font: 11px/1.4 system-ui;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #bf-book-mockup .bf-mobile-reader-gap {
    flex: 1;
    min-width: 0;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-mobile-reader-trigger {
    display: block;
    position: fixed;
    top: 8px;
    left: 8px;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    z-index: 111;
  }
  #bf-book-mockup[data-reader-mode=text] .bf-mobile-reader-trigger:focus-visible {
    width: auto;
    height: auto;
    clip-path: none;
    padding: 8px 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #bf-book-mockup .bf-mobile-reader-panel {
    transition: none;
  }
}

/* src/shared/reader.css */
.reader-paper {
  max-width: 740px;
  margin: 0 auto;
  padding: 56px 54px 80px;
  color: #25272b;
  background: #fff;
  min-height: 100%;
  box-sizing: border-box;
}
.reader-eyebrow {
  font: 600 12px/1.5 system-ui, sans-serif;
  letter-spacing: .14em;
  color: #61656e;
}
.reader-eyebrow span {
  padding: 0 12px;
  color: #b6bac2;
}
.reader-number {
  font: 500 14px/1.5 system-ui, sans-serif;
  color: #757a84;
  margin: 42px 0 12px;
}
.reader-paper h1 {
  font: 500 clamp(28px, 3vw, 38px)/1.22 Georgia, serif;
  margin: 0 0 26px;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.reader-divider {
  width: 44px;
  height: 2px;
  background: #858b96;
  margin-bottom: 34px;
}
.reader-prose {
  font:
    19px/1.9 Georgia,
    "Times New Roman",
    serif;
  overflow-wrap: anywhere;
}
.reader-prose p {
  margin: 0 0 1.35em;
}
.reader-prose h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 1.8em 0 .8em;
}
.reader-prose h3 {
  font-size: 22px;
}
.reader-prose a {
  color: #3658aa;
  text-underline-offset: 4px;
}
.reader-prose blockquote {
  margin: 1.5em 0;
  border-left: 2px solid #aab1bd;
  padding-left: 24px;
  color: #5b616c;
}
.reader-prose pre {
  white-space: pre-wrap;
  background: #f2f3f5;
  padding: 16px;
  font-size: 15px;
}
.reader-prose code {
  font-size: .85em;
}
.reader-unsupported {
  font: 14px/1.5 system-ui;
  color: #656b77;
}
@media (max-width: 600px) {
  .reader-paper {
    padding: 32px 24px 50px;
  }
  .reader-prose {
    font-size: 18px;
  }
  .reader-number {
    margin-top: 28px;
  }
}
.reader-paper[data-narrator=shary] {
  --narrator-accent:#3673ad;
  --narrator-second:#77b4dc;
}
.reader-paper[data-narrator=ari] {
  --narrator-accent:#48745b;
  --narrator-second:#cd85a6;
}
.reader-paper[data-narrator=sharox] {
  --narrator-accent:#c32982;
  --narrator-second:#303c7c;
}
.reader-paper[data-narrator=seren] {
  --narrator-accent:#247e86;
  --narrator-second:#8b5eb5;
}
.reader-paper[data-narrator] h1,
.reader-paper[data-narrator] .reader-number {
  color: var(--narrator-accent,#757a84);
}
.reader-paper[data-narrator] .reader-divider {
  background:
    linear-gradient(
      90deg,
      var(--narrator-accent,#858b96),
      var(--narrator-second,#858b96));
}

/* src/shared/entry-reader.css */
.public-entry {
  max-width: 820px;
  margin: 0 auto;
  padding: 42px 48px;
  color: #272b33;
  background: #fff;
  overflow-wrap: anywhere;
  font: 18px/1.85 Georgia, serif;
}
.entry-kind {
  font: 14px/1.5 "Segoe UI", sans-serif;
  color: #626c7a;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.public-entry h1 {
  font-size: 34px;
  line-height: 1.3;
  margin: 12px 0 28px;
}
.public-entry h2 {
  font-size: 25px;
  line-height: 1.4;
  margin: 0 0 16px;
}
.public-entry section {
  border-top: 1px solid #e0e4ea;
  margin-top: 30px;
  padding-top: 28px;
}
.entry-prose p {
  margin: 0 0 1.2em;
}
.entry-prose a {
  color: #345b91;
}
.entry-prose pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.unlock-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  width: min(370px, calc(100vw - 32px));
  max-height: 50vh;
  overflow: auto;
  background: #292d35;
  color: #eef2f9;
  border: 1px solid #65718a;
  border-radius: 10px;
  box-shadow: 0 12px 45px #0006;
  padding: 20px 24px;
  font: 16px/1.5 "Segoe UI", sans-serif;
}
.unlock-toast > strong {
  font-size: 18px;
  color: #c5d9ff;
}
.unlock-toast > button {
  float: right;
  padding: 0 5px;
  min-width: 30px;
  min-height: 30px;
  background: transparent;
  border: 0;
  color: #d5ddec;
  font-size: 25px;
  cursor: pointer;
}
.unlock-toast ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.unlock-toast li + li {
  margin-top: 12px;
}
.unlock-toast small {
  display: block;
  font-size: 14px;
  color: #b3bdcf;
}
@media (max-width: 650px) {
  .public-entry {
    padding: 28px 22px;
  }
  .public-entry h1 {
    font-size: 29px;
  }
  .unlock-toast {
    right: 16px;
    bottom: 16px;
  }
}

/* src/reader/trial.css */
.trial-controls {
  display: flex;
  align-items: end;
  gap: 18px;
  max-width: 1320px;
  margin: 24px auto 0;
  padding: 0 24px;
  font: 15px/1.5 system-ui, sans-serif;
}
.trial-controls label {
  flex: 1;
  max-width: 650px;
}
.trial-controls select {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #bfc6d1;
  border-radius: 6px;
  background: #fff;
  color: #29313e;
  font: 16px/1.5 system-ui, sans-serif;
}
.trial-controls button,
.mark-read button {
  padding: 11px 18px;
  border: 1px solid #465e80;
  border-radius: 6px;
  background: #314c74;
  color: #fff;
  font: 16px/1.5 system-ui, sans-serif;
  cursor: pointer;
}
.trial-controls button:disabled,
.mark-read button:disabled {
  opacity: .55;
  cursor: default;
}
.reader-trial-layout {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 28px;
  padding: 28px 24px 60px;
}
.reader-trial-layout > section {
  min-width: 0;
}
.reader-trial-layout .reader-paper {
  padding: 35px;
  min-height: 0;
}
.mark-read {
  padding: 20px;
  background: #fff;
  border-top: 1px solid #e0e4ea;
  text-align: right;
}
.trial-entries {
  min-width: 0;
}
.trial-entries > h2 {
  font: 600 19px/1.5 system-ui, sans-serif;
  margin: 0 0 16px;
  color: #414c5d;
}
.trial-entries > p {
  font: 16px/1.8 system-ui, sans-serif;
  color: #626c7a;
  padding: 24px;
  background: #fff;
}
.trial-entries .public-entry {
  padding: 28px;
  font-size: 17px;
}
.trial-entries .public-entry h1 {
  font-size: 27px;
}
.trial-entries .public-entry h2 {
  font-size: 22px;
}
.trial-error {
  color: #8b2739;
  background: #fff0f2;
  padding: 16px 24px;
  margin: 24px;
  font: 16px/1.7 system-ui, sans-serif;
}
.trial-controls button:focus-visible,
.trial-controls select:focus-visible,
.mark-read button:focus-visible {
  outline: 3px solid #497abc;
  outline-offset: 3px;
}
@media (max-width: 950px) {
  .reader-trial-layout {
    grid-template-columns: 1fr;
  }
  .trial-controls {
    flex-wrap: wrap;
  }
}