/* css/style.css */

@font-face {
  font-family: "AT Ubuntu";
  src: url("../assets/fonts/Ubuntu/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Ubuntu";
  src: url("../assets/fonts/Ubuntu/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Ubuntu";
  src: url("../assets/fonts/Ubuntu/Ubuntu-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Noto Sans SC";
  src: url("../assets/fonts/Noto_Sans_SC/NotoSansSC-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "AT Noto Serif SC";
  src: url("../assets/fonts/Noto_Serif_SC/NotoSerifSC-VariableFont_wght.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Base Colors */

  --color-bg: #111111;
  --color-surface: #181818;
  --color-surface-soft: #202020;
  --color-border: #303030;

  --color-text: #e8e0d4;
  --color-text-muted: #a99f93;
  --color-text-soft: #7d756d;


  /* Global Layout */

  --reader-width: 760px;

  --left-sidebar-width: 260px;
  --right-sidebar-width: 320px;

  --top-bar-height: 64px;
  --bottom-bar-height: 64px;

  --reader-font-size: 20px;

  /* Global Stacking Layers */

  --z-content: 1;

  --z-local-overlay: 30;

  --z-bottom-bar: 100;
  --z-popover: 400;
  --z-utility-fullview: 200;

  --z-nexus-modal: 1200;
  --z-confirmation-modal: 1200;
  --z-nexus-token-popover: 1300;
  --z-album-lightbox: 1400;
  --z-video-modal: 1500;

  --z-global-header: 2000;

  --z-welcome-screen: 3000;

  --z-global-tooltip: 4000;

  /* Global Scrollbars */

  --scrollbar-size:
    0.46rem;

  --scrollbar-track:
    transparent;

  --scrollbar-thumb:
    rgba(125, 117, 109, 0.58);

  --scrollbar-thumb-hover:
    rgba(169, 159, 147, 0.82);

  --scrollbar-thumb-active:
    rgba(232, 224, 212, 0.74);

  /* Global Bars and Controls */

  --color-top-bar-bg:
    rgba(17, 17, 17, 0.96);

  --color-bottom-bar-bg:
    rgba(17, 17, 17, 0.92);

  --color-control-bg:
    rgba(32, 32, 32, 0.42);

  --color-control-bg-strong:
    rgba(32, 32, 32, 0.5);

  --color-control-bg-active:
    rgba(232, 224, 212, 0.08);

  --color-placeholder-border:
    rgba(232, 224, 212, 0.16);

  --color-placeholder-bg:
    rgba(17, 17, 17, 0.18);

  --color-selection-bg:
    rgba(232, 224, 212, 0.22);


  /* Reader Toolbar */

  --reader-toolbar-bg:
    rgba(24, 24, 24, 0.38);

  --reader-toolbar-border:
    rgba(232, 224, 212, 0.14);


  /* Reader Buttons */

  --reader-button-bg:
    rgba(32, 32, 32, 0.26);

  --reader-button-bg-hover:
    rgba(48, 48, 48, 0.58);

  --reader-button-border:
    rgba(232, 224, 212, 0.16);

  --reader-button-border-hover:
    rgba(232, 224, 212, 0.28);


  /* Panels and Popovers */

  --color-panel-header-bg:
    rgba(17, 17, 17, 0.34);

  --color-panel-translucent-bg:
    rgba(32, 32, 32, 0.72);

  --color-control-bg-hover:
    var(--color-surface-soft);

  --color-popover-bg:
    color-mix(
      in srgb,
      var(--color-surface) 94%,
      transparent
    );

  --color-popover-shadow:
    0 18px 50px
    rgba(0, 0, 0, 0.36);


  /* Assist Dictionary Colors */

  --color-assist-term:
    rgba(139, 177, 255, 0.7);

  --color-assist-translation:
    rgba(220, 188, 122, 0.75);

  --color-assist-annotation:
    rgba(161, 205, 166, 0.7);


  /* Font Families */

  --font-latin:
    "AT Ubuntu";

  --font-cjk-sans:
    "AT Noto Sans SC";

  --font-cjk-serif:
    "AT Noto Serif SC";

  --font-ui-cjk:
    var(--font-cjk-sans);

  --font-reader-cjk:
    var(--font-cjk-serif);


  /* Font Stacks */

  --font-sans:
    var(--font-latin),
    var(--font-ui-cjk),
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --font-serif:
    var(--font-latin),
    var(--font-reader-cjk),
    "Noto Serif SC",
    "Source Han Serif SC",
    "Songti SC",
    serif;
}

.ui-tooltip {
  position: fixed;
  z-index: var(--z-global-tooltip);
  max-width: min(16rem, calc(100vw - 1rem));
  padding: 0.38rem 0.58rem;
  border: 1px solid var(--color-border);
  border-radius: 0.38rem;
  background: var(--color-surface-soft);
  color: var(--color-text);
  box-shadow: 0 0.45rem 1.2rem rgba(0, 0, 0, 0.3);
  font-size: 0.78rem;
  line-height: 1.35;
  text-align: center;
  pointer-events: none;
  white-space: normal;
}

.ui-tooltip[hidden] {
  display: none;
}

html[data-theme="light"] {
  --color-bg: #f1ece3;
  --color-surface: #e8dfd2;
  --color-surface-soft: #ddd2c2;
  --color-border: #c8baa8;

  --color-text: #211d18;
  --color-text-muted: #5f554b;
  --color-text-soft: #8c7d6d;

  /* Global Scrollbars */

  --scrollbar-thumb:
    rgba(140, 125, 109, 0.52);

  --scrollbar-thumb-hover:
    rgba(95, 85, 75, 0.72);

  --scrollbar-thumb-active:
    rgba(33, 29, 24, 0.72);

  --color-top-bar-bg: rgba(241, 236, 227, 0.96);
  --color-bottom-bar-bg: rgba(241, 236, 227, 0.92);
  --color-control-bg: rgba(221, 210, 194, 0.56);
  --color-control-bg-strong: rgba(221, 210, 194, 0.7);
  --color-control-bg-active: rgba(33, 29, 24, 0.08);
  --color-placeholder-border: rgba(33, 29, 24, 0.16);
  --color-placeholder-bg: rgba(255, 255, 255, 0.22);
  --color-selection-bg: rgba(33, 29, 24, 0.18);

  --reader-toolbar-bg: rgba(232, 223, 210, 0.48);
  --reader-toolbar-border: rgba(33, 29, 24, 0.14);

  --reader-button-bg: rgba(221, 210, 194, 0.42);
  --reader-button-bg-hover: rgba(211, 198, 179, 0.72);
  --reader-button-border: rgba(33, 29, 24, 0.14);
  --reader-button-border-hover: rgba(33, 29, 24, 0.24);

  --color-panel-header-bg: rgba(203, 188, 166, 0.34);
  --color-panel-translucent-bg: rgba(221, 210, 194, 0.76);
  --color-control-bg-hover: rgba(211, 198, 179, 0.72);
  --color-popover-bg: color-mix(in srgb, var(--color-surface) 96%, transparent);
  --color-popover-shadow: 0 18px 46px rgba(82, 64, 42, 0.18);

  --color-assist-term: rgba(76, 101, 160, 0.58);
  --color-assist-translation: rgba(147, 106, 39, 0.58);
  --color-assist-annotation: rgba(83, 135, 91, 0.58);
}

* {
  box-sizing:
    border-box;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--scrollbar-thumb)
    var(--scrollbar-track);
}


/* =========================================================
   Global Scrollbars
   ========================================================= */

*::-webkit-scrollbar {
  width:
    var(--scrollbar-size);

  height:
    var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
  background:
    var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  min-height:
    2.5rem;

  border-radius:
    999px;

  background:
    var(--scrollbar-thumb);

  transition:
    background-color
    140ms
    ease;
}

*::-webkit-scrollbar-thumb:hover {
  background:
    var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-thumb:active {
  background:
    var(--scrollbar-thumb-active);
}

*::-webkit-scrollbar-corner {
  background:
    transparent;
}

html {
  width: 100%;
  height: 100%;

  min-height: 100%;

  overflow: hidden;

  background:
    var(--color-bg);
}

body {
  width: 100%;
  height: 100%;

  min-height: 0;

  margin: 0;

  overflow: hidden;

  background:
    var(--color-bg);

  color:
    var(--color-text);

  font-family:
    var(--font-sans);

  isolation:
    isolate;
}

button {
  font: inherit;
}

.app-shell {
  position: relative;

  width: 100%;

  height: 100vh;
  height: 100dvh;

  min-height: 0;

  padding:
    var(--top-bar-height)
    0
    var(--bottom-bar-height);

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

/* Top Bar */

.top-bar {
  position: fixed;

  top: 0;
  right: 0;
  left: 0;

  z-index:
    var(--z-global-header);

  height:
    var(--top-bar-height);

  display: grid;
  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;
  align-items: stretch;

  padding-left: 24px;

  border-bottom:
    1px solid
    var(--color-border);

  background:
    var(--color-top-bar-bg);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  user-select: none;
}

.top-bar-left {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;

  padding-right: 24px;

  -webkit-app-region: no-drag;
}

.project-title {
  position: relative;

  width: 220px;
  height: 28px;

  display: flex;
  align-items: center;

  flex: 0 0 auto;
}

.project-title-image {
  display: block;

  max-width: 100%;
  max-height: 100%;

  width: auto;
  height: auto;

  object-fit: contain;
  object-position: left center;
}

.project-title-image-light {
  display: none;
}

html[data-theme="light"]
.project-title-image-dark {
  display: none;
}

html[data-theme="light"]
.project-title-image-light {
  display: block;
}

.project-subtitle {
  margin-top: 3px;

  color:
    var(--color-text-soft);

  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.025em;

  white-space: nowrap;
}

.top-bar-user {
  grid-column: 3;
  min-width: 220px;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;

  padding:
    0
    18px
    0
    24px;

  -webkit-app-region: no-drag;
}

.top-bar-user-meta {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  line-height: 1.2;
}

.top-bar-user-name {
  max-width: 180px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--color-text);
  font-size: 13px;
  font-weight: 500;
}

.top-bar-user-login-time {
  margin-top: 4px;

  color: var(--color-text-soft);
  font-size: 11px;
  white-space: nowrap;
}

.top-bar-user-button {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  padding: 0;

  border:
    1px solid
    var(--color-border);

  border-radius: 999px;

  background:
    var(--color-control-bg);

  cursor: pointer;
}

.top-bar-user-button:hover {
  background:
    var(--color-control-bg-hover);
}

.top-bar-user-button.is-active,
.top-bar-user-button[aria-expanded="true"] {
  border-color:
    var(--color-text-soft);

  background:
    var(--color-control-bg-active);
}

.top-bar-user-button:focus-visible {
  outline:
    1px solid
    var(--color-text-soft);

  outline-offset: 2px;
}

.top-bar-user-avatar {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: inherit;

  object-fit: cover;

  --user-avatar-font-size: 28px;
}

/* Layout */

.main-layout {
  position:
    relative;

  flex:
    1 1 auto;

  min-width:
    0;

  min-height:
    0;

  display:
    grid;

  grid-template-columns:
    var(--left-sidebar-width)
    minmax(0, 1fr)
    var(--right-sidebar-width);

  overflow:
    hidden;
}

.left-sidebar,
.right-sidebar {
  position:
    relative;

  top:
    auto;

  min-width:
    0;

  min-height:
    0;

  height:
    100%;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-gutter:
    stable;

  background:
    var(--color-surface);

  border-color:
    var(--color-border);
}

.left-sidebar {
  border-right: 1px solid var(--color-border);
}

.right-sidebar {
  border-left: 1px solid var(--color-border);
}

.reader-main {
  min-width:
    0;

  min-height:
    0;

  height:
    100%;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  overscroll-behavior:
    contain;

  scrollbar-gutter:
    stable;

  padding:
    40px
    48px
    80px;
}

/* Sidebar */

.sidebar-section {
  padding: 20px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-title {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.sidebar-title-label {
  min-width: 0;
}

.sidebar-collapse-button {
  display: none;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.sidebar-menu-icon {
  width: 19px;
  height: 19px;
  display: block;
  pointer-events: none;
}

.sidebar-menu-icon-light {
  display: none;
}

html[data-theme="light"] .sidebar-menu-icon-dark {
  display: none;
}

html[data-theme="light"] .sidebar-menu-icon-light {
  display: block;
}

.mobile-assist-toggle {
  display: none;
}

.mobile-sidebar-rail {
  display: none;
}

.mobile-assist-icon {
  width: 20px;
  height: 20px;
  display: block;
  pointer-events: none;
}

.mobile-assist-icon-light {
  display: none;
}

html[data-theme="light"] .mobile-assist-icon-dark {
  display: none;
}

html[data-theme="light"] .mobile-assist-icon-light {
  display: block;
}

.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible {
  border-color: var(--color-text-soft);
  color: var(--color-text);
  background: var(--color-surface-soft);
}

/* Sidebar View Panels */

.sidebar-view-panel[hidden] {
  display: none;
}

.sidebar-placeholder {
  border: 1px dashed var(--color-placeholder-border);
  border-radius: 12px;
  padding: 12px;
  color: var(--color-text-soft);
  font-size: 13px;
  line-height: 1.6;
  background: var(--color-placeholder-bg);
}

/* Chapter Navigation */

.chapter-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chapter-nav-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-muted);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.chapter-nav-item:hover {
  background: var(--color-surface-soft);
  color: var(--color-text);
}

.chapter-nav-item.is-active {
  background: var(--color-surface-soft);
  border-color: var(--color-border);
  color: var(--color-text);
}

.chapter-nav-group {
  display: flex;
  flex-direction: column;
}

.chapter-block-nav {
  display: grid;
  grid-template-rows: 0fr;

  margin: 0 0 0 4px;

  opacity: 0;

  transition:
    grid-template-rows 240ms ease,
    margin 240ms ease,
    opacity 160ms ease;
}

.chapter-nav-group.is-expanded
.chapter-block-nav {
  grid-template-rows: 1fr;

  margin:
    4px
    0
    8px
    4px;

  opacity: 1;
}

.chapter-block-nav-inner {
  min-height: 0;

  overflow: hidden;

  padding-left: 10px;

  border-left:
    1px solid
    var(--color-border);

  display: flex;
  flex-direction: column;
  gap: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .chapter-block-nav {
    transition: none;
  }
}

.chapter-block-nav-item {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-soft);
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  display: block;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.chapter-block-nav-item:hover {
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}

.chapter-block-nav-item.is-active {
  background: var(--color-surface-soft);
  color: var(--color-text);
}

.chapter-block-nav-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}

.chapter-block-nav-row:hover {
  background: var(--color-surface-soft);
}

.chapter-block-nav-row.is-active {
  background: var(--color-surface-soft);
}

.chapter-block-nav-row .chapter-block-nav-item {
  min-width: 0;
}

.chapter-block-nav-row .chapter-block-nav-item:hover {
  background: transparent;
}

.chapter-block-nav-row:focus-within .block-star-button {
  opacity: 1;
}

.block-star-button {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
}

.chapter-block-nav-row:hover .block-star-button,
.block-star-button.is-starred {
  opacity: 1;
}

.block-star-button:hover {
  background: var(--color-control-bg-hover);
  color: var(--color-text);
}

.block-star-button.is-starred {
  color: var(--color-text);
}

.block-title-small {
  font-size: 12px;
  line-height: 1.5;
}

.chapter-number {
  font-size: 13px;
  color: var(--color-text-soft);
  text-align: center;
}

.chapter-title-small {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Reader Header */

.chapter-hero {
  max-width: var(--reader-width);
  margin: 0 auto 32px;
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.chapter-cover-frame {
  position: relative;
  width: 140px;
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.chapter-cover {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chapter-kicker {
  font-size: 12px;
  color: var(--color-text-soft);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.chapter-title {
  margin: 8px 0 4px;
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.25;
}

.chapter-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 15px;
}

/* Reader Toolbar */

.reader-toolbar {
  max-width: var(--reader-width);
  margin: 0 auto 28px;
  padding: 10px 12px;
  display: flex;
  gap: 8px;

  border: 1px solid var(--reader-toolbar-border);
  border-radius: 14px;
  background: var(--reader-toolbar-bg);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.reader-toolbar-top {
  margin-bottom: 28px;
}

.reader-toolbar-bottom {
  margin-top: 42px;
  margin-bottom: 0;
}

.reader-back-to-top {
  position:
    absolute;

  right:
    calc(
      var(--right-sidebar-width) +
      24px
    );

  bottom:
    18px;

  z-index:
    calc(
      var(--z-local-overlay) - 2
    );

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

  border:
    1px solid
    var(--color-border);

  border-radius:
    999px;

  background:
    color-mix(
      in srgb,
      var(--color-surface) 92%,
      transparent
    );

  box-shadow:
    0 8px 24px
    color-mix(
      in srgb,
      var(--color-bg) 72%,
      transparent
    );

  color:
    var(--color-text-muted);

  font:
    inherit;

  font-size:
    1rem;

  line-height:
    1;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(8px);

  cursor:
    pointer;

  transition:
    opacity 160ms ease,
    visibility 0s linear 160ms,
    transform 160ms ease,
    border-color 150ms ease,
    background-color 150ms ease,
    color 150ms ease;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}

body[data-view-mode="reader"]
.reader-back-to-top.is-visible {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    none;

  transition-delay:
    0s;
}

.reader-back-to-top:hover {
  border-color:
    var(--color-text-soft);

  background:
    var(--color-control-bg-hover);

  color:
    var(--color-text);
}

.reader-back-to-top:focus-visible {
  outline:
    1px solid
    var(--color-text-soft);

  outline-offset:
    3px;
}

.reader-star-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reader-star-icon {
  font-size: 14px;
  line-height: 1;
}

.reader-star-button.is-starred {
  background: var(--color-control-bg-active);
  color: var(--color-text);
  border-color: var(--color-border);
}

.reader-star-button.is-starred .reader-star-icon {
  color: var(--color-text);
}

/* Buttons */

.text-button {
  border: 1px solid var(--reader-button-border);
  border-radius: 999px;
  background: var(--reader-button-bg);
  color: var(--color-text-muted);
  padding: 7px 12px;
  cursor: pointer;

  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.text-button:hover {
  background: var(--reader-button-bg-hover);
  color: var(--color-text);
  border-color: var(--reader-button-border-hover);
}

.text-button:disabled,
.text-button.is-disabled {
  opacity: 0.42;
  cursor: default;
}

.text-button:disabled:hover,
.text-button.is-disabled:hover {
  background: var(--reader-button-bg);
  color: var(--color-text-muted);
  border-color: var(--reader-button-border);
}

/* Reader Content */

.reader-content {
  max-width: var(--reader-width);
  margin: 0 auto;
  font-family: var(--font-serif);
  font-size: var(--reader-font-size);
  line-height: 2.05;
  letter-spacing: 0.01em;
}

.reader-content h1 {
  margin: 56px 0 32px;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.35;
}

.reader-content h2 {
  margin: 48px 0 24px;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.45;
}

.reader-content p {
  margin: 0 0 1.35em;
}

.reader-content ::selection {
  background: var(--color-selection-bg);
}

/* Paragraph Bookmarks */

#reader-content,
.reader-block {
  overflow: visible;
}

.reader-paragraph-shell {
  --paragraph-bookmark-gutter: 3.7em;

  position: relative;
  display: block;

  /*
    把 shell 向右扩出一段区域。
    p 仍然占原来的正文宽度；
    右侧扩出来的区域专门给书签按钮 hover / click。
  */
  width: calc(100% + var(--paragraph-bookmark-gutter));
  padding-right: var(--paragraph-bookmark-gutter);
  box-sizing: border-box;
}

.reader-paragraph-shell > p {
  width: 100%;
}

.paragraph-bookmark-button {
  position: absolute;
  top: 0.2em;
  right: 0;
  z-index: 8;

  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text-soft);
  padding: 4px 8px;
  cursor: pointer;

  font-family:
    var(--font-ui-cjk),
    var(--font-reader-cjk),
    "Segoe UI Symbol",
    sans-serif;

  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;

  opacity: 0;
  transition:
    opacity 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
}

.reader-paragraph-shell:hover .paragraph-bookmark-button,
.reader-paragraph-shell:focus-within .paragraph-bookmark-button,
.reader-paragraph-shell.is-bookmarked .paragraph-bookmark-button {
  opacity: 1;
}

.paragraph-bookmark-button:hover {
  background: var(--color-control-bg-hover);
  color: var(--color-text);
  border-color: var(--color-border);
}

.paragraph-bookmark-button.is-bookmarked {
  background: var(--color-control-bg-active);
  color: var(--color-text);
  border-color: var(--color-text-soft);
}

.reader-paragraph-shell.is-scroll-target > p {
  background: var(--color-selection-bg);
  border-radius: 6px;
  transition: background-color 900ms ease;
}

/* Assist Panel */

.assist-section {
  padding: 18px;
}

.assist-header {
  position: relative;
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.assist-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-text);
}

.assist-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-text-soft);
}

.assist-tutorial-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.assist-tutorial-button:hover {
  background: var(--color-control-bg-hover);
  border-color: var(--color-border);
}

.assist-tutorial-button:active {
  transform: translateY(1px);
}

.assist-tutorial-button:focus-visible {
  outline: 2px solid var(--color-text-soft);
  outline-offset: 2px;
}

.assist-tutorial-icon {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

.assist-tutorial-icon-light {
  display: none;
}

html[data-theme="light"] .assist-tutorial-icon-dark {
  display: none;
}

html[data-theme="light"] .assist-tutorial-icon-light {
  display: block;
}

.assist-tutorial-tooltip {
  position: absolute;
  z-index: 8;
  top: 38px;
  right: 0;
  width: max-content;
  max-width: min(12rem, calc(100% - 1rem));
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border);
  border-radius: 0.65rem;
  background:
    color-mix(
      in srgb,
      var(--color-surface) 96%,
      transparent
    );
  box-shadow: var(--color-popover-shadow);
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.assist-tutorial-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.assist-tutorial-tooltip[hidden] {
  display: none;
}

.assist-card {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface-soft);
  overflow: hidden;
}

.assist-tab-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel-header-bg);
}

.assist-tab {
  --assist-top-hint: transparent;
  --assist-left-hint: transparent;
  --assist-right-hint: transparent;
  --assist-active-hint: transparent;

  border: none;
  border-right: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-soft);
  padding: 10px 8px;
  cursor: pointer;
  font-size: 13px;

  box-shadow:
    inset 0 2px 0 var(--assist-top-hint),
    inset 3px 0 0 var(--assist-left-hint),
    inset -3px 0 0 var(--assist-right-hint),
    inset 0 -2px 0 var(--assist-active-hint);
}

.assist-tab:last-child {
  border-right: none;
}

.assist-tab:hover {
  background: var(--color-control-bg-hover);
  color: var(--color-text-muted);
}

.assist-tab.is-empty {
  color: var(--color-text-soft);
  opacity: 0.42;
  cursor: default;
}

.assist-tab.is-empty:hover {
  background: transparent;
  color: var(--color-text-soft);
}

.assist-tab.is-available {
  opacity: 1;
  cursor: pointer;
}

.assist-tab.is-selected {
  color: var(--color-text);
  background: var(--color-control-bg-active);
}

.assist-tab.is-available[data-assist-tab="term"] {
  --assist-top-hint: var(--color-assist-term);
  --assist-left-hint: var(--color-assist-term);
}

.assist-tab.is-available[data-assist-tab="translation"] {
  --assist-top-hint: var(--color-assist-translation);
}

.assist-tab.is-available[data-assist-tab="annotation"] {
  --assist-top-hint: var(--color-assist-annotation);
  --assist-right-hint: var(--color-assist-annotation);
}

.assist-tab.is-selected[data-assist-tab="term"] {
  --assist-active-hint: var(--color-assist-term);
}

.assist-tab.is-selected[data-assist-tab="translation"] {
  --assist-active-hint: var(--color-assist-translation);
}

.assist-tab.is-selected[data-assist-tab="annotation"] {
  --assist-active-hint: var(--color-assist-annotation);
}

.assist-panel {
  min-height: 180px;
  max-height: 340px;
  overflow-y: auto;
  padding: 16px;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.7;

  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
}

.assist-panel.is-tutorial {
  max-height: none;
  overflow: hidden;
  padding: 10px;
}

.assist-panel.has-term {
  border-left-color: var(--color-assist-term);
}

.assist-panel.has-translation {
  border-bottom-color: var(--color-assist-translation);
}

.assist-panel.has-annotation {
  border-right-color: var(--color-assist-annotation);
}

.assist-empty-state {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.assist-tutorial-slot {
  width: min(256px, 100%);
  aspect-ratio: 1;
  align-self: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--color-control-bg);
}

.assist-tutorial-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: transparent;
}

.assist-tutorial-caption {
  padding: 0 2px 2px;
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.55;
}

.assist-tutorial-caption p {
  margin-bottom: 0.6em;
}

.assist-empty-state p {
  margin: 0 0 0.85em;
}

.assist-empty-state p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .assist-tutorial-button,
  .assist-tutorial-tooltip {
    transition: none;
  }
}

.assist-entry-title {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
}

.assist-entry-meta {
  margin: 0 0 12px;
  color: var(--color-text-soft);
  font-size: 12px;
}

.assist-entry-body {
  color: var(--color-text-muted);
}

.assist-entry-body p {
  margin: 0 0 1em;
}

.assist-entry-body p:last-child {
  margin-bottom: 0;
}

.block-keywords-section {
  margin-top: 16px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-panel-translucent-bg);
  padding: 14px;
}

.block-keywords-header {
  margin-bottom: 10px;
}

.block-keywords-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.block-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.block-keyword-chip {
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  padding: 5px 9px;
  font-size: 12px;
  cursor: pointer;
}

.block-keyword-chip:hover {
  background: var(--color-control-bg-hover);
  color: var(--color-text);
}

.block-keyword-chip.is-active {
  background: var(--color-control-bg-active);
  color: var(--color-text);
}

.block-keywords-placeholder {
  color: var(--color-text-soft);
  font-size: 13px;
  line-height: 1.6;
}

/* Runtime Reader Tokens */

.reader-token {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  text-underline-offset: 4px;

  transition:
    text-decoration-color 120ms ease,
    color 120ms ease;
}

/*
  Nexus-only：
  点击后执行收集操作，因此使用 pointer。
*/
.reader-token.nexus-token:not(.assist-token) {
  cursor: pointer;
}

/*
  Assist-only，以及 Assist + Nexus：
  点击后优先表现为辅助阅读，因此使用 help。
*/
.reader-token.assist-token {
  cursor: help;
}

.reader-token:hover,
.reader-token:focus-visible {
  text-decoration-color: currentColor;
}

.reader-token:focus-visible {
  outline:
    1px solid
    color-mix(
      in srgb,
      currentColor 38%,
      transparent
    );

  outline-offset: 3px;
  border-radius: 2px;
}

/* Bottom Bar */

.bottom-bar {
  position: fixed;

  left: 0;
  right: 0;
  bottom: 0;

  z-index:
    var(--z-bottom-bar);

  height:
    var(--bottom-bar-height);

  display: grid;
  grid-template-columns:
    minmax(180px, 1fr)
    auto
    minmax(180px, 1fr);
  align-items: center;

  padding:
    0 24px;

  border-top:
    1px solid
    var(--color-border);

  background:
    var(--color-bottom-bar-bg);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);
}

.bottom-bar-left,
.bottom-bar-right {
  min-width: 0;

  display: flex;
  align-items: center;
}

.bottom-bar-left {
  justify-content: flex-start;
}

.bottom-bar-right {
  justify-content: flex-end;
}

.bottom-main-menu {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: auto;
  max-width: none;
}

.bottom-menu-item,
.bottom-utility-button {
  border:
    1px solid
    transparent;

  border-radius:
    999px;

  background:
    var(--color-control-bg);

  color:
    var(--color-text-muted);

  cursor: pointer;

  font-size: 14px;
  line-height: 1;

  transition:
    background-color 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.bottom-menu-item {
  min-width: 72px;

  padding:
    8px
    14px;

  text-align: center;
}

.bottom-utility-button {
  min-height: 36px;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  padding:
    7px
    12px;
}

.bottom-menu-item:hover,
.bottom-utility-button:hover {
  background:
    var(--color-control-bg-hover);

  color:
    var(--color-text);
}

.bottom-menu-item.is-active,
.bottom-utility-button.is-active {
  border-color:
    var(--color-border);

  background:
    var(--color-control-bg-active);

  color:
    var(--color-text);
}

.bottom-menu-item:disabled,
.bottom-menu-item.is-disabled {
  color:
    var(--color-text-soft);

  opacity: 0.45;
  cursor: default;
}

.bottom-menu-item:disabled:hover,
.bottom-menu-item.is-disabled:hover {
  background:
    var(--color-control-bg);

  color:
    var(--color-text-soft);
}

.bottom-utility-brandmark {
  display: block;

  width: 24px;
  height: 24px;

  object-fit: contain;

  pointer-events: none;
}

.bottom-utility-label {
  display: inline-block;

  white-space: nowrap;
}

.bottom-utility-icon-stack {
  position: relative;

  width: 18px;
  height: 18px;

  flex: 0 0 auto;
}

.bottom-utility-icon {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;
}

.bottom-utility-icon-light {
  display: none;
}

html[data-theme="light"]
.bottom-utility-icon-dark {
  display: none;
}

html[data-theme="light"]
.bottom-utility-icon-light {
  display: block;
}

/* Nexus unopened collectible badge */

.bottom-menu-item-nexus {
  position: relative;
}

.bottom-menu-label {
  display: inline-block;
}

.nexus-unopened-badge {
  position: absolute;
  top: -0.4rem;
  right: -0.35rem;
  z-index: 1;

  min-width: 1.15rem;
  height: 1.15rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 0.28rem;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--color-text) 42%,
      var(--color-border)
    );

  border-radius: 999px;

  background:
    color-mix(
      in srgb,
      var(--color-text) 90%,
      var(--color-surface)
    );

  color: var(--color-bg);

  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;

  font-variant-numeric: tabular-nums;

  pointer-events: none;
  user-select: none;

  box-shadow:
    0 0.2rem 0.65rem
    rgba(0, 0, 0, 0.2);
}

.nexus-unopened-badge[hidden] {
  display: none;
}

/* Scene Background */

:root {
  --reader-bg-strength: 0.42;
  --reader-bg-opacity: calc(0.10 + var(--reader-bg-strength) * 0.58);
  --reader-bg-veil-opacity: calc(0.34 - var(--reader-bg-strength) * 0.26);
  --reader-bg-transition: 900ms ease;
}

html[data-theme="light"] {
  --reader-bg-opacity: calc(0.10 + var(--reader-bg-strength) * 0.52);
  --reader-bg-veil-opacity: calc(0.50 - var(--reader-bg-strength) * 0.34);
}

.reader-scene-bg {
  position: fixed;
  inset: 0;

  z-index: -1;

  pointer-events: none;
  overflow: hidden;

  background:
    var(--color-bg);
}

.reader-scene-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(17, 17, 17, calc(var(--reader-bg-veil-opacity) * 0.20)) 0%,
      rgba(17, 17, 17, calc(var(--reader-bg-veil-opacity) * 0.58)) 72%,
      rgba(17, 17, 17, calc(var(--reader-bg-veil-opacity) * 1.00)) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(17, 17, 17, calc(var(--reader-bg-veil-opacity) * 0.42)),
      rgba(17, 17, 17, calc(var(--reader-bg-veil-opacity) * 0.88))
    );
}

html[data-theme="light"] .reader-scene-bg::after {
  background:
    radial-gradient(
      circle at center,
      rgba(241, 236, 227, calc(var(--reader-bg-veil-opacity) * 0.30)) 0%,
      rgba(241, 236, 227, calc(var(--reader-bg-veil-opacity) * 0.72)) 72%,
      rgba(241, 236, 227, calc(var(--reader-bg-veil-opacity) * 1.00)) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(241, 236, 227, calc(var(--reader-bg-veil-opacity) * 0.45)),
      rgba(241, 236, 227, calc(var(--reader-bg-veil-opacity) * 0.82))
    );
}

.reader-scene-bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.01);
  filter:
    saturate(calc(0.72 + var(--reader-bg-strength) * 0.34))
    contrast(calc(0.82 + var(--reader-bg-strength) * 0.22))
    brightness(calc(0.76 + var(--reader-bg-strength) * 0.28));
  transition: opacity var(--reader-bg-transition);
  will-change: opacity;
}

html[data-theme="light"] .reader-scene-bg-layer {
  filter:
    saturate(calc(0.62 + var(--reader-bg-strength) * 0.30))
    contrast(calc(0.72 + var(--reader-bg-strength) * 0.20))
    brightness(calc(0.94 + var(--reader-bg-strength) * 0.18));
}

.reader-scene-bg-layer.is-active {
  opacity: var(--scene-bg-opacity, var(--reader-bg-opacity));
}

/* Responsive Temporary Fallback */

@media (max-width: 1100px) {
  .main-layout {
    grid-template-columns:
      220px
      minmax(0, 1fr);
  }

  .right-sidebar {
    display: none;
  }

  .reader-back-to-top {
    right:
      24px;
  }

  .bottom-bar {
    grid-template-columns:
      minmax(132px, 1fr)
      auto
      minmax(132px, 1fr);
  }

  .bottom-utility-label {
    display: none;
  }
}

@media (max-width: 860px) {
  .project-subtitle {
    display: none;
  }

  .bottom-bar {
    grid-template-columns:
      auto
      minmax(0, 1fr)
      auto;

    gap: 8px;

    padding:
      0 12px;
  }

  .bottom-main-menu {
    min-width: 0;

    justify-content: flex-start;

    overflow-x: auto;
    overscroll-behavior-x: contain;

    padding-block:
      7px
      3px;

    scrollbar-width: none;
  }

  .bottom-main-menu::-webkit-scrollbar {
    display: none;
  }

  .bottom-utility-button {
    width: 38px;
    min-height: 38px;

    justify-content: center;

    padding: 0;
  }
}

@media (max-width: 760px) {
  .main-layout {
    position: relative;

    grid-template-columns:
      48px
      minmax(0, 1fr);
  }

  .reader-back-to-top {
    right:
      14px;

    bottom:
      14px;
  }

  .left-sidebar {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: var(--z-local-overlay);

    width: 260px;
    height: 100%;

    background: var(--color-surface);

    overflow-x: hidden;
    overflow-y: auto;

    transform: translateX(0);

    box-shadow:
      12px 0 28px
      rgba(0, 0, 0, 0.2);

    transition:
      transform 240ms ease,
      box-shadow 240ms ease,
      border-color 240ms ease;
  }

  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .left-sidebar {
    transform: translateX(-212px);
    box-shadow: none;
    pointer-events: none;
  }

  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .mobile-sidebar-rail {
    position: absolute;
    inset: 0 auto 0 0;
    z-index:
      calc(
        var(--z-local-overlay) + 1
      );

    width: 48px;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    padding: 8px;

    border-right:
      1px solid
      var(--color-border);

    background:
      var(--color-surface);

    pointer-events: none;
  }

  .mobile-sidebar-rail
  > button {
    pointer-events: auto;
  }

  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .mobile-assist-toggle {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
  }

  body.is-mobile-assist-open
  .mobile-assist-toggle {
    border-color: var(--color-text-soft);
    background: var(--color-control-bg-active);
  }

  .mobile-assist-toggle:focus-visible {
    outline: 2px solid var(--color-text-soft);
    outline-offset: 2px;
  }

  body[data-view-mode="reader"] .right-sidebar {
    position: fixed;
    top: var(--top-bar-height);
    right: 0;
    bottom: auto;
    left: 48px;
    z-index: calc(var(--z-local-overlay) - 1);

    width: auto;
    height:
      max(
        150px,
        calc(
          33dvh -
          var(--top-bar-height)
        )
      );

    display: block;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
    border-left: 0;
    background: var(--color-surface);
    box-shadow:
      0 12px 28px
      rgba(0, 0, 0, 0.24);

    transform: translateY(calc(-100% - 2px));
    visibility: hidden;
    pointer-events: none;

    transition:
      transform 260ms ease,
      visibility 0s linear 260ms;
  }

  body[data-view-mode="reader"].is-mobile-assist-open
  .right-sidebar {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;

    transition:
      transform 260ms ease,
      visibility 0s;
  }

  .right-sidebar .assist-section {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows:
      minmax(0, 1fr);
    padding: 8px;
    overflow: hidden;
  }

  .right-sidebar .assist-header {
    display: none;
  }

  .right-sidebar .assist-card {
    min-height: 0;
    display: grid;
    grid-template-rows:
      auto
      minmax(0, 1fr);
  }

  .right-sidebar .assist-tab {
    padding: 7px 6px;
    font-size: 12px;
  }

  .right-sidebar .assist-panel,
  .right-sidebar .assist-panel.is-tutorial {
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 9px 10px;
  }

  .right-sidebar .assist-tutorial-slot {
    width: min(116px, 42%);
  }

  .right-sidebar .assist-tutorial-caption {
    font-size: 11px;
    line-height: 1.45;
  }

  .right-sidebar .block-keywords-section {
    display: none;
  }

  .left-sidebar .sidebar-section {
    width: 260px;
    min-height: 100%;
    transition:
      padding 240ms ease;
  }

  .chapter-block-nav-row {
    grid-template-columns:
      minmax(0, 1fr)
      36px;
  }

  .block-star-button {
    width: 32px;
    height: 32px;

    opacity: 1;
  }

  .sidebar-title-label,
  .chapter-nav,
  .album-chapter-nav {
    transition:
      opacity 160ms ease,
      transform 240ms ease;
  }

  .sidebar-collapse-button {
    display: flex;
  }

  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .left-sidebar
  .sidebar-collapse-button {
    display: none;
  }

  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .left-sidebar
  .sidebar-section {
    padding-inline: 8px;
  }

  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .sidebar-title {
    justify-content: flex-end;
  }

  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .sidebar-title-label {
    position: absolute;
    opacity: 0;
    transform: translateX(-18px);
    pointer-events: none;
  }

  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .chapter-nav,
  body[data-view-mode="reader"].is-left-sidebar-collapsed
  .album-chapter-nav {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-28px);
    pointer-events: none;
  }

  .top-bar {
    padding-left: 16px;
  }

  .top-bar-user-login-time {
    display: none;
  }

  .project-title {
    width: 188px;
    height: 24px;
  }

  .reader-main {
    grid-column: 2;

    padding:
      28px
      20px
      calc(
        64px +
        var(--bottom-bar-height)
      );
  }

  @media (prefers-reduced-motion: reduce) {
    body[data-view-mode="reader"] .right-sidebar {
      transition: none;
    }
  }

  .bottom-menu-item {
    flex: 0 0 auto;

    min-width: 64px;

    padding:
      7px
      12px;

    font-size: 13px;
  }

  .utility-fullview-header {
    min-height: 68px;

    padding:
      14px
      18px;
  }

  .utility-fullview-title {
    font-size: 22px;
  }

  .utility-fullview-content {
    padding:
      24px
      20px
      40px;
  }

  .chapter-hero {
    grid-template-columns:
      88px
      minmax(0, 1fr);

    gap: 16px;
  }

  .chapter-cover-frame {
    width: 88px;
  }

  .chapter-title {
    font-size: 26px;
  }

  .reader-content {
    font-size:
      calc(
        var(--reader-font-size) -
        2px
      );

    line-height: 1.95;
  }

  .nexus-unopened-badge {
    top: 0;
    right: 0;
    z-index: 2;

    transform:
      translate(32%, -28%);

    min-width: 1.05rem;
    height: 1.05rem;

    padding-inline: 0.24rem;

    font-size: 0.62rem;
  }
}

@media (max-width: 420px) {
  .reader-toolbar {
    display: grid;
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1.16fr)
      minmax(0, 1fr);

    gap: 4px;
    padding: 6px;
    border-radius: 11px;
  }

  .reader-toolbar .text-button {
    min-width: 0;
    padding:
      6px
      3px;

    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .reader-star-button {
    justify-content: center;
    gap: 3px;
  }

  .reader-star-icon {
    font-size: 12px;
  }

  .bottom-bar {
    grid-template-columns:
      32px
      minmax(0, 1fr)
      32px;

    gap: 4px;
    padding:
      0
      6px;
  }

  .bottom-main-menu {
    width: 100%;
    display: grid;
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap: 2px;
    overflow: visible;
    padding-block:
      7px
      3px;
  }

  .bottom-menu-item {
    width: 100%;
    min-width: 0;
    padding:
      6px
      2px;

    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .bottom-utility-button {
    width: 32px;
    min-height: 32px;
  }

  .bottom-utility-brandmark,
  .bottom-utility-icon-stack {
    width: 22px;
    height: 22px;
  }
}