@font-face {
  font-family: "Rhythm Wordmark";
  src: url("assets/fonts/dm-serif-text-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("assets/fonts/dm-sans-italic-variable.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: "DM Serif Display";
  src: url("assets/fonts/dm-serif-display-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --ink: #161616;
  --muted: #6d6a64;
  --paper: #f7f4ec;
  --reader-surface: var(--paper);
  --panel: #fffdf7;
  --line: #ddd4c3;
  --accent: #c94a3f;
  --accent-dark: #8f2d28;
  --reader-anchor: rgba(183, 61, 52, 0.78);
  --title-red: rgba(125, 47, 42, 0.68);
  --speed-fill: rgba(196, 74, 64, 0.88);
  --speed-track: rgba(206, 205, 199, 0.86);
  --progress-fill-soft: rgba(62, 135, 123, 0.88);
  --progress-track-soft: rgba(219, 211, 197, 0.86);
  --green: #24745a;
  --blue: #284f7a;
  --teal: #2d756b;
  --shadow: 0 20px 60px rgba(40, 36, 28, 0.12);
  --ui-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --heading-font: "DM Serif Display", Georgia, serif;
  --reading-font: var(--ui-font);
  --dialogue-word-color: rgb(82, 55, 45);
  --screen-pad-top: max(14px, env(safe-area-inset-top));
  --screen-pad-right: max(16px, env(safe-area-inset-right));
  --screen-pad-bottom: max(16px, env(safe-area-inset-bottom));
  --screen-pad-left: max(16px, env(safe-area-inset-left));
  --top-control-size: 48px;
  --top-icon-size: 25px;
  --top-corner-inset: clamp(4px, 1.25vw, 8px);
  --bottom-control-size: 42px;
  --play-control-size: 60px;
  --empty-reader-top: clamp(285px, 43.5dvh, 390px);
  --play-button-rest-bg:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 1), rgba(255, 254, 250, 0.99) 48%, rgba(238, 230, 216, 0.92) 100%);
  --play-button-rest-shadow:
    0 17px 26px rgba(45, 38, 28, 0.21),
    0 5px 9px rgba(45, 38, 28, 0.09),
    inset 0 2px 2px rgba(255, 255, 255, 1),
    inset 0 -5px 9px rgba(105, 82, 55, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  --progress-height: 4.5px;
  --progress-meta-size: clamp(0.76rem, 2.25vw, 0.9rem);
  --menu-icon-size: 62px;
  --menu-row-min-height: 94px;
  --ui-press-scale: 0.965;
  --motion-fast: 150ms cubic-bezier(0.2, 0.78, 0.26, 1);
  --motion-standard: 180ms ease;
  --focus-width: min(620px, 100%);
  --context-gap: 18px;
  --context-font-size: clamp(0.88rem, 1.35vw, 1.06rem);
  --ebook-font-size: clamp(1.14rem, 4.25vw, 1.48rem);
}

/* Unified Discover hub: one home entry for books, articles, research, and the daily topic. */

.home-discover-launch:focus-visible,
.discover-close:focus-visible,
.discover-topic-button:focus-visible,
.discover-source-card:focus-visible {
  outline: 2px solid rgba(182, 59, 53, 0.7);
  outline-offset: 3px;
}

.discover-panel {
  --discover-page: #efeae1;
  --discover-sheet: #f9f6f0;
  --discover-surface: #fffdf9;
  --discover-surface-soft: #f1ebe2;
  --discover-text: #201d19;
  --discover-muted: #6f665b;
  --discover-line: rgba(72, 59, 44, 0.14);
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  background: var(--discover-page);
}

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

.discover-sheet {
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(circle at 82% 0%, rgba(182, 59, 53, 0.075), transparent 28%),
    linear-gradient(180deg, var(--discover-sheet), var(--discover-page));
  color: var(--discover-text);
  scrollbar-gutter: stable;
}

.discover-sheet:focus {
  outline: none;
}

.discover-header {
  position: relative;
  width: min(790px, 100%);
  min-height: 108px;
  margin: 0 auto;
  padding:
    max(22px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    18px
    max(22px, env(safe-area-inset-left));
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;
}

.discover-close {
  position: relative;
  inset: auto;
  width: 42px;
  height: 42px;
  margin: 0;
  border: 1px solid var(--discover-line);
  border-radius: 50%;
  background: var(--discover-surface);
  color: var(--discover-text);
  box-shadow: 0 8px 20px rgba(65, 49, 31, 0.08);
}

.discover-header-copy {
  min-width: 0;
  grid-column: 2;
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.discover-header-copy p {
  margin: 0;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.62rem;
  font-weight: 740;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-header-copy h2 {
  margin: 0;
  font-family: var(--reading-font);
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  font-weight: 560;
  letter-spacing: -0.025em;
}

.discover-content {
  width: min(790px, 100%);
  margin: 0 auto;
  padding:
    4px
    max(18px, env(safe-area-inset-right))
    max(46px, calc(env(safe-area-inset-bottom) + 30px))
    max(18px, env(safe-area-inset-left));
  display: grid;
  gap: clamp(34px, 6vw, 54px);
}

.discover-topic-card {
  position: relative;
  min-height: 310px;
  border: 1px solid color-mix(in srgb, var(--topic-color, #2f6f69) 20%, var(--discover-line));
  border-radius: 32px;
  display: grid;
  grid-template-columns: minmax(210px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  background: var(--discover-surface);
  box-shadow:
    0 24px 52px rgba(68, 50, 31, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.discover-topic-art {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 33% 36%, rgba(255, 255, 255, 0.34), transparent 24%),
    linear-gradient(155deg, color-mix(in srgb, var(--topic-color, #2f6f69) 83%, #efe2c9), color-mix(in srgb, var(--topic-color, #2f6f69) 73%, #171512));
  color: #fff9eb;
}

.discover-topic-art::before,
.discover-topic-art::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  content: "";
}

.discover-topic-art::before {
  width: 230px;
  height: 230px;
  right: -92px;
  bottom: -66px;
}

.discover-topic-art::after {
  width: 150px;
  height: 150px;
  right: -52px;
  bottom: -30px;
}

.discover-topic-date {
  position: absolute;
  top: 22px;
  left: 22px;
  font-family: var(--ui-font);
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-topic-watermark {
  position: absolute;
  right: -0.03em;
  bottom: -0.22em;
  color: rgba(255, 255, 255, 0.1);
  font-family: var(--reading-font);
  font-size: 17rem;
  font-weight: 650;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

.discover-topic-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 94px;
  height: 94px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transform: translate(-50%, -48%);
}

.discover-topic-glyph svg {
  width: 48px;
  height: 48px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.discover-topic-line {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
}

.discover-topic-line::before {
  display: block;
  width: 34%;
  height: 3px;
  background: #fff9eb;
  content: "";
  transform: translateY(-1px);
}

.discover-topic-copy {
  min-width: 0;
  padding: clamp(26px, 4.5vw, 42px);
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 12px;
}

.discover-topic-kicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  margin: 0;
  color: color-mix(in srgb, var(--topic-color, #2f6f69) 88%, #171512);
  font-family: var(--ui-font);
  font-size: 0.65rem;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-topic-kicker span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--topic-color, #2f6f69);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--topic-color, #2f6f69) 12%, transparent);
}

.discover-topic-copy h3 {
  max-width: 13ch;
  margin: 0;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.discover-topic-copy > p:not(.discover-topic-kicker) {
  max-width: 33em;
  margin: 0;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.96rem;
  line-height: 1.42;
}

.discover-topic-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.discover-topic-formats span {
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--topic-color, #2f6f69) 17%, var(--discover-line));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--topic-color, #2f6f69) 6%, var(--discover-surface));
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.66rem;
  font-weight: 680;
}

.discover-topic-button {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  padding: 0 16px;
  border: 0;
  border-radius: 15px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12px;
  gap: 12px;
  align-items: center;
  background: color-mix(in srgb, var(--topic-color, #2f6f69) 90%, #151412);
  color: #fff9eb;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--topic-color, #2f6f69) 22%, transparent);
  text-align: left;
  cursor: pointer;
}

.discover-topic-button strong {
  overflow: hidden;
  font-family: var(--ui-font);
  font-size: 0.82rem;
  font-weight: 740;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-topic-button .menu-chevron {
  width: 8px;
  height: 8px;
  border-color: currentColor;
}

.discover-sources {
  display: grid;
  gap: 18px;
}

.discover-section-heading {
  display: flex;
  gap: 18px;
  align-items: end;
  justify-content: space-between;
}

.discover-section-heading > div {
  display: grid;
  gap: 5px;
}

.discover-section-heading p,
.discover-section-heading h3 {
  margin: 0;
}

.discover-section-heading p {
  color: #b13e37;
  font-family: var(--ui-font);
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-section-heading h3 {
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(1.4rem, 3.8vw, 1.9rem);
  font-weight: 540;
  letter-spacing: -0.025em;
}

.discover-section-heading > span {
  flex: 0 0 auto;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 670;
}

.discover-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.discover-source-card {
  --source-accent: #a94a40;
  position: relative;
  min-width: 0;
  min-height: 246px;
  padding: 18px;
  border: 1px solid var(--discover-line);
  border-radius: 22px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 15px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--source-accent) 13%, transparent), transparent 34%),
    var(--discover-surface);
  color: var(--discover-text);
  box-shadow: 0 12px 28px rgba(65, 49, 31, 0.075);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.discover-source-card.is-articles {
  --source-accent: #9a6a45;
}

.discover-source-card.is-research {
  --source-accent: #3f766b;
}

.discover-source-card::after {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--source-accent);
  border-right: 1.5px solid var(--source-accent);
  content: "";
  transform: rotate(45deg);
}

.discover-source-number {
  justify-self: end;
  color: color-mix(in srgb, var(--source-accent) 58%, var(--discover-muted));
  font-family: var(--ui-font);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.14em;
}

.discover-source-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--source-accent) 11%, var(--discover-surface-soft));
  color: var(--source-accent);
}

.discover-source-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.discover-source-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.discover-source-copy strong {
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: 1.35rem;
  font-weight: 570;
  letter-spacing: -0.025em;
}

.discover-source-copy small {
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.82rem;
  line-height: 1.38;
}

.discover-source-copy > span {
  margin-top: 4px;
  padding-right: 20px;
  color: color-mix(in srgb, var(--source-accent) 82%, var(--discover-text));
  font-family: var(--ui-font);
  font-size: 0.62rem;
  font-weight: 720;
  line-height: 1.35;
}

.discover-source-copy i {
  display: none;
}

body:has(.discover-panel:not([hidden])) .home-bottom-nav {
  display: none !important;
}

html.theme-dark .discover-panel,
body.theme-dark .discover-panel {
  --discover-page: #171511;
  --discover-sheet: #1e1b17;
  --discover-surface: #28241f;
  --discover-surface-soft: #332e27;
  --discover-text: #f6eddf;
  --discover-muted: #bfb3a3;
  --discover-line: rgba(239, 221, 193, 0.13);
}

html.theme-dark .discover-sheet,
body.theme-dark .discover-sheet {
  background:
    radial-gradient(circle at 82% 0%, rgba(213, 90, 76, 0.1), transparent 28%),
    linear-gradient(180deg, var(--discover-sheet), var(--discover-page));
}

html.theme-dark .discover-topic-card,
body.theme-dark .discover-topic-card,
html.theme-dark .discover-source-card,
body.theme-dark .discover-source-card {
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.24);
}

html.theme-dark .discover-topic-formats span,
body.theme-dark .discover-topic-formats span {
  color: rgba(222, 209, 190, 0.78);
}

@media (hover: hover) and (pointer: fine) {
  .home-discover-launch,
  .discover-source-card,
  .discover-topic-button {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }

  .discover-source-card:hover {
    border-color: color-mix(in srgb, var(--source-accent) 32%, var(--discover-line));
    transform: translateY(-3px);
  }

  .discover-topic-button:hover {
    transform: translateY(-1px);
  }
}

@media (max-width: 680px) {

  .discover-header {
    min-height: 94px;
    padding-top: max(17px, env(safe-area-inset-top));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .discover-content {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .discover-topic-card {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 26px;
  }

  .discover-topic-art {
    min-height: 158px;
  }

  .discover-topic-glyph {
    width: 78px;
    height: 78px;
  }

  .discover-topic-glyph svg {
    width: 40px;
    height: 40px;
  }

  .discover-topic-watermark {
    right: 0.02em;
    bottom: -0.3em;
    font-size: 12rem;
  }

  .discover-topic-copy {
    padding: 24px 22px 22px;
  }

  .discover-topic-copy h3 {
    max-width: 15ch;
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  .discover-source-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .discover-source-card {
    min-height: 0;
    padding: 16px;
    grid-template-columns: 50px minmax(0, 1fr) 14px;
    grid-template-rows: auto;
    gap: 14px;
    align-items: center;
    border-radius: 18px;
  }

  .discover-source-number {
    position: absolute;
    top: 14px;
    right: 15px;
  }

  .discover-source-icon {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  .discover-source-copy {
    grid-column: 2;
    padding-right: 8px;
  }

  .discover-source-copy small {
    font-size: 0.79rem;
  }

  .discover-source-copy > span {
    padding-right: 0;
  }

  .discover-source-card::after {
    position: static;
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }
}

@media (max-width: 430px) {

  .discover-section-heading {
    align-items: start;
  }

  .discover-section-heading > span {
    padding-top: 4px;
  }
}

/* Compact reading appearance: match the original mockup and keep every control in one view. */
.font-size-popover,
body.ebook-mode .reader-panel #fontSizePopover {
  width: min(310px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 22px !important;
}

.font-size-popover[hidden],
body:not(.ebook-mode) .reader-panel .controls > #fontSizePopover[hidden],
body.ebook-mode .reader-panel #fontSizePopover[hidden] {
  display: none !important;
}

.reader-appearance-heading {
  min-height: 48px;
  gap: 9px;
  padding: 11px 15px 10px;
}

.reader-appearance-heading > span {
  font-size: 1.02rem;
  font-weight: 590;
}

.reader-appearance-heading > small {
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.reader-appearance-scroll {
  display: grid;
  align-content: start;
  padding: 0 15px 14px;
  overflow: visible !important;
}

.reader-appearance-size-scale {
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1px 2px 0;
}

.reader-appearance-size-scale::before,
.reader-appearance-size-scale::after {
  top: 11px;
}

.reader-appearance-size-scale::before {
  left: 10px;
  right: 10px;
}

.reader-appearance-size-scale::after {
  left: 10px;
}

.reader-appearance-size .reader-appearance-size-stop,
.reader-appearance-size .reader-appearance-size-stop:is(:hover, :focus, :focus-visible, :active) {
  flex: 0 0 20px;
  width: 20px !important;
  min-width: 20px !important;
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.reader-appearance-size-stop::after {
  width: 5px;
  height: 5px;
}

.reader-appearance-size-stop.is-active::after {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.reader-appearance-dialogue-colours {
  gap: 7px;
  padding: 10px 2px 8px;
}

.reader-appearance-dialogue-colours .dialogue-color-options {
  gap: 5px 3px;
}

.reader-appearance-dialogue-colours .dialogue-color-option,
.reader-appearance-dialogue-colours .dialogue-color-option:is(:hover, :focus, :focus-visible, :active) {
  min-height: 40px;
  padding: 3px 1px;
  gap: 3px;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.reader-appearance-dialogue-colours .dialogue-color-dot {
  width: 18px;
  height: 18px;
}

.reader-appearance-dialogue-colours .dialogue-color-option span:last-child {
  font-size: 0.53rem;
}

@media (max-height: 700px) {
  .reader-appearance-heading {
    min-height: 44px;
    padding-block: 9px;
  }

  .reader-appearance-dialogue-colours {
    padding-block: 8px 6px;
  }

  }

@media (prefers-reduced-motion: reduce) {
  .home-discover-launch,
  .discover-source-card,
  .discover-topic-button {
    transition: none !important;
  }
}

/* Locked rhythm. wordmark: shared geometry for splash and Home. */

.home-wordmark.is-logo-handoff-target {
  visibility: hidden !important;
}

/* Keep the splash on normal opaque layers so WebKit never exposes the page beneath it. */
.onboarding-overlay[data-step="intro"],
html.theme-dark .onboarding-overlay[data-step="intro"],
body.theme-dark .onboarding-overlay[data-step="intro"] {
  background: #020202 !important;
}

.rhythm-intro-stage,
html.theme-dark .rhythm-intro-stage,
body.theme-dark .rhythm-intro-stage,
html:not(.theme-dark) body:not(.theme-dark) .rhythm-intro-stage {
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.018) 0, transparent 32%),
    radial-gradient(circle at 78% 12%, rgba(195, 91, 81, 0.012) 0, transparent 24%),
    #020202 !important;
}

.rhythm-intro-stage::before {
  display: none !important;
}

.rhythm-intro-stage::after {
  z-index: 0 !important;
  opacity: 1 !important;
  transition: none !important;
}

/* Give the selected display-serif y enough room to finish its descender. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero .home-subtitle {
  margin-top: 16px !important;
}

/* Keep the added runtime controls reachable above the reader transport on short viewports. */
#fontSizePopover.font-size-popover {
  max-height: min(60dvh, 460px) !important;
  overflow: hidden !important;
}

#fontSizePopover .reader-appearance-scroll {
  min-height: 0;
  max-height: calc(min(60dvh, 460px) - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* Discovery original-source catalogue: a quiet archive route inside Browse. */
.discover-original-sources-route {
  border-color: color-mix(in srgb, var(--discover-green) 42%, var(--discover-line)) !important;
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--discover-green) 12%, transparent), transparent 68%),
    color-mix(in srgb, var(--discover-green) 7%, var(--discover-surface)) !important;
  color: var(--discover-text) !important;
}

.discover-original-sources-route i {
  margin-left: 0.28rem;
  color: var(--discover-green);
  font-style: normal;
}

.discover-browse-catalogue.is-originals {
  --original-source-accent: color-mix(in srgb, var(--discover-green) 78%, #a890cf);
}

.discover-browse-catalogue.is-originals .discover-gutenberg-compact-head > div p,
.discover-browse-catalogue.is-originals .discover-gutenberg-results-head > div p {
  color: var(--original-source-accent);
}

.discover-browse-catalogue.is-originals .discover-live-source-menu {
  border-color: color-mix(in srgb, var(--original-source-accent) 42%, var(--discover-line));
  background: color-mix(in srgb, var(--original-source-accent) 8%, var(--discover-surface));
}

.discover-browse-catalogue.is-originals .discover-live-source-menu i {
  color: var(--original-source-accent);
}

.discover-browse-grid.is-originals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.72rem;
}

.discover-browse-card.is-original-source {
  --item-accent: var(--original-source-accent);
  min-height: 12.4rem;
  padding: 0;
  border-radius: 1.15rem;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--item-accent) 8%, transparent), transparent 48%),
    var(--discover-surface);
}

.discover-browse-card.is-original-source .discover-browse-art,
.discover-browse-card.is-original-source .discover-browse-art img {
  width: 100%;
  height: 100%;
  min-height: 12.4rem;
  border-radius: 0;
  object-fit: cover;
}

.discover-browse-card.is-original-source .discover-browse-art > span {
  font-size: 2.5rem;
}

.discover-browse-card.is-original-source .discover-browse-copy {
  align-self: stretch;
  align-content: center;
  gap: 0.34rem;
  padding: 1rem 2.6rem 1rem 1rem;
}

.discover-browse-card.is-original-source .discover-browse-copy > span {
  color: var(--item-accent);
}

.discover-browse-card.is-original-source .discover-browse-copy strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(1.08rem, 2.2vw, 1.34rem);
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-browse-card.is-original-source .discover-browse-copy small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-browse-card.is-original-source .discover-browse-copy p {
  -webkit-line-clamp: 3;
}

.discover-browse-card.is-original-source > .discover-card-arrow {
  right: 1rem;
}

.discover-panel :is(.discover-original-sources-route, .discover-browse-card.is-original-source):active {
  transform: none !important;
  filter: none !important;
}

@media (max-width: 720px) {
  .discover-browse-grid.is-originals {
    grid-template-columns: minmax(0, 1fr);
  }

  .discover-browse-card.is-original-source {
    min-height: 10.6rem;
    grid-template-columns: 6.1rem minmax(0, 1fr);
  }

  .discover-browse-card.is-original-source .discover-browse-art,
  .discover-browse-card.is-original-source .discover-browse-art img {
    min-height: 10.6rem;
  }
}

html:not(.theme-dark) body:not(.theme-dark) .discover-browse-card.is-original-source {
  border-color: color-mix(in srgb, var(--discover-green) 22%, var(--discover-line)) !important;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--discover-green) 9%, transparent), transparent 48%),
    rgba(250, 247, 241, 0.92) !important;
}

/* Topic surfaces are navigable content, not pressable chrome. */
:is(.discover-topics-view, .topic-discovery-panel) button:is(:active, .is-tactile-press) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  opacity: 1 !important;
}

html.theme-dark {
  color-scheme: dark;
  --ink: #eee8dc;
  --muted: #b7ad9f;
  --paper: #191714;
  --reader-surface: #191714;
  --panel: #25211c;
  --line: rgba(225, 212, 190, 0.24);
  --accent: #d36458;
  --accent-dark: #e78d82;
  --reader-anchor: #d97269;
  --title-red: #d97269;
  --speed-fill: rgba(211, 91, 82, 0.94);
  --speed-track: rgba(111, 104, 94, 0.62);
  --progress-fill-soft: rgba(94, 157, 143, 0.9);
  --progress-track-soft: rgba(94, 85, 76, 0.68);
  --green: #66a994;
  --blue: #86a9ce;
  --teal: #73b5a8;
  --shadow: 0 22px 66px rgba(0, 0, 0, 0.42);
  --play-button-rest-bg:
    radial-gradient(circle at 50% 20%, rgba(61, 55, 48, 0.96), rgba(37, 33, 29, 0.98) 54%, rgba(28, 25, 22, 0.98) 100%);
  --play-button-rest-shadow:
    0 18px 34px rgba(0, 0, 0, 0.36),
    0 5px 9px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 244, 226, 0.13),
    inset 0 -5px 9px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 244, 226, 0.06);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

button,
.controls,
.progress-track,
.reader-panel,
.focus-stage,
.word-display,
.context-line,
.context-focus-row,
.context-token,
.ebook-reader,
.ebook-page,
.ebook-word {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui-font);
  touch-action: manipulation;
}

html.is-mobile-landscape,
html.is-mobile-landscape body {
  overflow: hidden;
  background: var(--reader-surface);
}

html.is-mobile-landscape .app-shell,
html.is-mobile-landscape .input-panel,
html.is-mobile-landscape .chapter-panel,
html.is-mobile-landscape .onboarding-overlay {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.is-mobile-landscape body::before,
html.is-mobile-landscape body::after {
  position: fixed;
  left: 50%;
  z-index: 1000;
  width: min(82vw, 360px);
  color: rgba(22, 22, 22, 0.86);
  text-align: center;
  transform: translateX(-50%);
}

html.is-mobile-landscape body::before {
  content: "Portrait only";
  top: 36%;
  font-family: var(--ui-font);
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 690;
}

html.is-mobile-landscape body::after {
  content: "Rotate your phone upright to keep the reading point stable.";
  top: calc(36% + 48px);
  color: rgba(91, 87, 80, 0.72);
  font-size: clamp(0.88rem, 2.6vw, 1rem);
  line-height: 1.35;
}

html.onboarding-primed body {
  background: var(--paper);
}

html.onboarding-primed .app-shell {
  opacity: 0;
  transform: scale(0.992);
}

html.onboarding-revealing .app-shell {
  animation: app-shell-onboarding-reveal 520ms cubic-bezier(0.2, 0.78, 0.26, 1) both;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon-sprite symbol {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

body.reader-size-0 {
  --reader-font-size: clamp(2.3rem, 9vw, 4rem);
  --context-focus-font-size: clamp(1.1rem, 2.4vw, 2rem);
}

body.reader-size-1 {
  --reader-font-size: clamp(2.8rem, 11vw, 4.8rem);
  --context-focus-font-size: clamp(1.35rem, 3vw, 2.5rem);
}

body.reader-size-2 {
  --reader-font-size: clamp(3.2rem, 13vw, 5.6rem);
  --context-focus-font-size: clamp(1.6rem, 3.7vw, 3.1rem);
}

body.reader-size-3 {
  --reader-font-size: clamp(3.7rem, 15vw, 6.5rem);
  --context-focus-font-size: clamp(2rem, 4.6vw, 3.8rem);
}

body,
body.reader-size-4 {
  --reader-font-size: clamp(4.2rem, 17vw, 7.8rem);
  --context-focus-font-size: clamp(2.55rem, 6.5vw, 5.5rem);
}

body.reader-size-5 {
  --reader-font-size: clamp(4.8rem, 19vw, 9rem);
  --context-focus-font-size: clamp(2.9rem, 7.6vw, 6.4rem);
}

body.reader-size-6 {
  --reader-font-size: clamp(5.2rem, 21vw, 10.2rem);
  --context-focus-font-size: clamp(3.25rem, 8.6vw, 7.2rem);
}

body.reader-size-7 {
  --reader-font-size: clamp(5.6rem, 23vw, 11.4rem);
  --context-focus-font-size: clamp(3.6rem, 9.6vw, 8rem);
}

button,
textarea,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}

.app-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  display: block;
  padding: 0;
}

.reader-panel {
  min-height: 100dvh;
  padding:
    var(--screen-pad-top)
    var(--screen-pad-right)
    var(--screen-pad-bottom)
    var(--screen-pad-left);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(10px, 2vh, 18px);
  background: var(--paper);
}

body.ebook-mode .reader-panel {
  pointer-events: none;
}

.input-panel {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  min-height: 100dvh;
  padding:
    max(18px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overflow: auto;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.8), transparent 36%),
    linear-gradient(150deg, rgba(250, 246, 238, 0.98), rgba(239, 231, 217, 0.96));
  color: var(--ink);
}

.input-panel.is-open {
  display: block;
}

.input-panel.is-settings-screen {
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.72), transparent 38%),
    linear-gradient(180deg, rgba(250, 246, 238, 0.98), rgba(242, 235, 223, 0.98));
}

.input-panel.is-settings-screen .menu-card {
  width: min(560px, 100%);
  padding-top: max(22px, env(safe-area-inset-top));
}

.input-panel.is-settings-screen .menu-close {
  display: none;
}

.input-panel.is-menu-subview .menu-close {
  display: none;
}

.top-bar {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: var(--top-control-size);
  transition:
    opacity 380ms cubic-bezier(0.22, 0.72, 0.22, 1),
    filter 380ms cubic-bezier(0.22, 0.72, 0.22, 1);
}

.brand-block {
  --chapter-title-y-offset: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 0;
  width: min(58vw, 380px);
  max-width: calc(100% - 144px);
  display: grid;
  gap: 2px;
  justify-items: center;
  overflow: hidden;
  color: rgba(22, 22, 22, 0.58);
  text-align: center;
  transform: translate(-50%, calc(-50% + var(--chapter-title-y-offset)));
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.brand-block span {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--ui-font);
  font-size: clamp(0.8rem, 2.8vw, 0.94rem);
  font-style: normal;
  font-weight: 690;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body:not(.has-loaded-text) .brand-block span,
body:not(.has-loaded-text) .ebook-title-block span {
  color: rgba(38, 34, 29, 0.72);
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif;
  font-size: clamp(1.08rem, 4.05vw, 1.34rem);
  font-style: normal;
  font-weight: 560;
  letter-spacing: 0.015em;
  text-transform: none;
}

.rithim-wordmark {
  font-family: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 560;
  letter-spacing: 0.015em;
}

body:not(.has-loaded-text) .brand-block .rithim-red-i,
body:not(.has-loaded-text) .ebook-title-block .rithim-red-i,
.rithim-wordmark .rithim-red-i,
.rithim-red-i {
  color: rgba(184, 74, 64, 0.86);
}

.brand-block small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(91, 87, 80, 0.56);
  font-family: var(--reading-font);
  font-size: clamp(0.75rem, 2.35vw, 0.86rem);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-actions,
.ebook-actions {
  position: relative;
  z-index: 2;
  grid-column: 3;
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.95rem;
}

.top-icon-button,
.top-mode-button {
  position: relative;
  z-index: 2;
  width: var(--top-control-size);
  min-width: var(--top-control-size);
  height: var(--top-control-size);
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.82), rgba(237, 229, 216, 0.62));
  color: rgba(22, 22, 22, 0.56);
  box-shadow:
    0 10px 20px rgba(45, 38, 28, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.96),
    inset 0 -1px 2px rgba(129, 108, 82, 0.08);
  transition:
    background var(--motion-standard),
    color var(--motion-standard),
    opacity var(--motion-standard),
    box-shadow var(--motion-standard),
    transform var(--motion-standard);
}

.top-icon-button::before,
.top-mode-button::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.top-bar > .top-icon-button,
.ebook-top-bar > .top-icon-button {
  margin-inline-start: var(--top-corner-inset);
  color: rgba(69, 64, 58, 0.58);
}

.top-actions .pdf-page-button,
.ebook-actions .pdf-page-button {
  margin-inline-end: 0;
}

.pdf-page-symbol {
  position: relative;
  width: 18px;
  height: 22px;
  border: 1.8px solid currentColor;
  border-radius: 4px 4px 5px 5px;
}

.pdf-page-symbol::before {
  content: "";
  position: absolute;
  right: -1.8px;
  top: -1.8px;
  width: 7px;
  height: 7px;
  border-left: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  border-radius: 0 3px 0 2px;
  background: rgba(244, 237, 225, 0.96);
}

.pdf-page-symbol::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 9px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 5px 0 currentColor;
  opacity: 0.72;
}

.top-icon-button:hover,
.top-mode-button:hover {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.92), rgba(235, 226, 212, 0.74));
}

.focus-stage {
  position: relative;
  min-height: 390px;
  display: grid;
  place-items: center;
  outline: 0;
  touch-action: none;
  caret-color: transparent;
  overflow: hidden;
  padding-block: 0;
}

.reader-panel.is-playing:not(:has(.word-display.has-context)) .top-bar,
.reader-panel.is-context-release-dimming .top-bar,
.reader-panel.is-context-release-dimming .bottom-dock {
  opacity: 0.42;
}

.reader-panel.is-playing.is-adjusting-speed:not(:has(.word-display.has-context)) .bottom-dock,
.reader-panel.is-context-release-dimming.is-adjusting-speed .bottom-dock,
.reader-panel.is-adjusting-speed .bottom-dock {
  opacity: 1;
}

.focus-stage:focus-visible {
  box-shadow: none;
}

body.is-coaching-context-open .focus-stage::after {
  content: "";
  position: absolute;
  inset: clamp(8px, 2.2vw, 14px);
  z-index: 9;
  border: 2px solid rgba(168, 57, 51, 0.66);
  border-radius: 30px;
  box-shadow:
    0 0 0 1px rgba(255, 253, 247, 0.9),
    0 0 0 8px rgba(168, 57, 51, 0.07),
    0 12px 36px rgba(168, 57, 51, 0.1);
  opacity: 0;
  pointer-events: none;
  animation: context-tap-perimeter 1320ms cubic-bezier(0.22, 0.72, 0.22, 1) infinite both;
}

.context-hint {
  position: absolute;
  top: clamp(10px, 2.6vh, 24px);
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 7px;
  max-width: min(88%, 320px);
  padding: 5px 11px 5px 5px;
  border-radius: 999px;
  background: rgba(223, 216, 203, 0.42);
  color: rgba(22, 22, 22, 0.52);
  font-size: clamp(0.68rem, 2.35vw, 0.8rem);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.reader-panel.is-playing .context-hint,
.focus-stage:has(.word-display.has-context) .context-hint {
  opacity: 0;
}

.context-hint-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: rgba(232, 223, 207, 0.86);
  color: rgba(22, 22, 22, 0.58);
  flex: 0 0 auto;
}

.tap-symbol {
  position: relative;
  width: 12px;
  height: 15px;
  display: block;
  border: 2px solid currentColor;
  border-radius: 7px 7px 5px 5px;
}

.tap-symbol::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2px;
  width: 2px;
  height: 6px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
}

.word-display {
  position: relative;
  z-index: 1;
  width: var(--focus-width);
  min-width: 0;
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--reading-font);
  font-size: var(--reader-font-size);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
  overflow-wrap: normal;
  white-space: nowrap;
  word-break: keep-all;
}

.word-pivot {
  position: relative;
}

.word-display.has-context {
  width: min(760px, 100%);
  min-width: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3px, 0.55vh, 8px);
  align-items: center;
  justify-content: center;
  justify-items: center;
  overflow: visible;
  --context-column-width: min(560px, calc(100vw - 44px), 100%);
  /* Page Mode may pair a book serif with the Speed Mode sans; every Page Mode
   * rule that reads --reading-font picks up the page face from here. */
  --reading-font: var(--page-reading-font);
}

.word-display.has-chapter-title {
  width: min(620px, 100%);
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  white-space: normal;
}

.speed-chapter-card {
  width: min(100%, 560px);
  min-width: 0;
  display: grid;
  gap: clamp(8px, 1.4vh, 14px);
  justify-items: center;
  padding-inline: clamp(16px, 6vw, 42px);
  color: rgba(22, 22, 22, 0.82);
  text-align: center;
}

.speed-chapter-card span {
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: clamp(0.72rem, 2.6vw, 0.92rem);
  font-weight: 760;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.speed-chapter-card strong {
  display: block;
  max-width: min(100%, 12ch);
  color: var(--ink);
  font-family: var(--reading-font);
  font-size: clamp(2.1rem, 11vw, 5.5rem);
  font-weight: 400;
  line-height: 1.02;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.speed-chapter-card.is-long-title strong {
  max-width: min(100%, 14ch);
  font-size: clamp(1.95rem, 9.4vw, 4.7rem);
  line-height: 1.04;
}

.speed-chapter-card.is-very-long-title strong {
  max-width: min(100%, 16ch);
  font-size: clamp(1.72rem, 8.2vw, 3.9rem);
  line-height: 1.06;
}

.speed-chapter-card small {
  color: rgba(109, 106, 100, 0.62);
  font-family: var(--ui-font);
  font-size: clamp(0.72rem, 2.5vw, 0.86rem);
  font-weight: 600;
}

.word-display.has-context.is-context-exiting {
  filter: none;
  pointer-events: none;
}

.word-display.has-context::before,
.word-display.has-context::after {
  content: none;
  position: absolute;
  left: 50%;
  z-index: 2;
  width: var(--context-column-width);
  height: 34px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.word-display.has-context::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(217, 53, 44, 0.14), transparent);
}

.word-display.has-context::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(217, 53, 44, 0.14), transparent);
}

.word-display.has-context.context-edge-prev::before,
.word-display.has-context.context-edge-next::after {
  opacity: 1;
}

.word-display.has-context.context-edge-prev.context-edge-push::before {
  transform: translate(-50%, 5px);
}

.word-display.has-context.context-edge-next.context-edge-push::after {
  transform: translate(-50%, -5px);
}

.context-line {
  --context-line-opacity: 0.58;
  --context-line-y: 0px;
  width: var(--context-column-width);
  min-height: 1.16em;
  flex: 0 1 auto;
  display: block;
  position: relative;
  box-sizing: border-box;
  padding-inline: 12px;
  overflow-x: visible;
  overflow-y: hidden;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--context-font-size);
  font-weight: 480;
  line-height: 1.18;
  text-align: left;
  opacity: var(--context-line-opacity);
  transform: translate3d(0, var(--context-line-y), 0);
  will-change: transform, opacity;
  transition:
    background-color 170ms ease,
    box-shadow 170ms ease,
    opacity 220ms cubic-bezier(0.22, 0.72, 0.22, 1),
    transform 360ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.context-line.is-empty {
  visibility: hidden;
}

.context-line.is-paragraph-start:not(:first-child) {
  margin-top: clamp(8px, 1.05vh, 14px);
}

.context-line.is-epub-align-center {
  text-align: center;
}

.context-line.is-epub-align-right {
  text-align: right;
}

.context-line.is-epub-stage-direction {
  font-style: italic;
}

.context-line.is-epub-speaker,
.context-line.is-epub-small-caps {
  font-variant-caps: small-caps;
  letter-spacing: 0.035em;
}

.context-line.is-epub-heading-1,
.context-line.is-epub-heading-2,
.context-line.is-epub-heading-3,
.context-line.is-epub-heading-4,
.context-line.is-epub-heading-5,
.context-line.is-epub-heading-6 {
  font-family: var(--ui-font);
  font-weight: 620;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.context-line.is-epub-italic,
.context-token.is-epub-italic {
  font-style: italic;
}

.context-line.is-epub-bold,
.context-token.is-epub-bold {
  font-weight: 620;
}

.context-token.is-epub-small-caps {
  font-variant-caps: small-caps;
  letter-spacing: 0.035em;
}

.context-line.is-current-line {
  --context-line-opacity: 0.98;
  isolation: isolate;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

.context-line.is-current-line::before,
.context-sentence-card.is-current-sentence-card::before {
  content: "";
  position: absolute;
  inset: -0.2em -0.34em;
  border-radius: 0.58em;
  pointer-events: none;
  background: rgba(246, 239, 228, 0.46);
  box-shadow:
    inset 0 0 0 1px rgba(201, 74, 63, 0.045),
    0 7px 18px rgba(108, 82, 48, 0.024);
}

.context-line.is-near-line {
  --context-line-opacity: 0.9;
  color: var(--ink);
}

.context-line.is-near-line.is-previous-line {
  --context-line-opacity: 0.97;
}

.context-line.is-near-line.is-next-line {
  --context-line-opacity: 0.88;
}

.context-line.is-mid-line {
  --context-line-opacity: 0.78;
  color: var(--ink);
}

.context-line.is-mid-line.is-previous-line {
  --context-line-opacity: 0.86;
}

.context-line.is-mid-line.is-next-line {
  --context-line-opacity: 0.74;
}

.context-line.is-far-line {
  --context-line-opacity: 0.58;
  color: var(--ink);
}

.context-line.is-far-line.is-previous-line {
  --context-line-opacity: 0.7;
}

.context-line.is-far-line.is-next-line {
  --context-line-opacity: 0.58;
}

.context-line.is-near-line.is-recent-previous-line {
  --context-line-opacity: 1;
}

.context-line.is-mid-line.is-recent-previous-line {
  --context-line-opacity: 0.96;
}

.context-line.is-far-line.is-recent-previous-line {
  --context-line-opacity: 0.88;
}

.word-display.has-context.has-context-sentence-scroll {
  justify-content: center;
  align-items: stretch;
  overflow: visible;
  position: relative;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  touch-action: pan-y;
}

.focus-stage:has(.word-display.has-context-sentence-scroll) {
  touch-action: pan-y;
}

.context-sentence-scroll {
  width: min(640px, calc(100vw - 28px), calc(100% - 8px));
  min-width: 0;
  height: 100%;
  max-height: 100%;
  margin-inline: auto;
  padding: clamp(18px, 5vh, 42px) clamp(16px, 4vw, 24px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.2vh, 20px);
  overflow-x: visible;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  white-space: normal;
}

.context-sentence-scroll.is-programmatic-scroll {
  -webkit-overflow-scrolling: auto;
  scroll-behavior: auto;
}

.context-sentence-scroll::-webkit-scrollbar {
  display: none;
}

.context-sentence-boundary {
  --boundary-pull-progress: 0;
  --boundary-pull-offset: 0px;
  --boundary-opacity: 0;
  width: 100%;
  min-height: 56px;
  margin: 0.12em auto;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(153, 62, 55, 0.86);
  cursor: ns-resize;
  opacity: var(--boundary-opacity);
  text-align: center;
  touch-action: none;
  transform: translate3d(0, var(--boundary-pull-offset), 0);
  transition:
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.context-sentence-boundary.is-prev-boundary {
  margin-bottom: 0.18em;
}

.context-sentence-boundary.is-next-boundary {
  margin-top: 0.18em;
}

.context-sentence-boundary.is-pulling {
  opacity: var(--boundary-opacity);
}

.context-sentence-boundary-dots {
  min-width: 58px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(255, 253, 247, 0.58);
  background: color-mix(in srgb, var(--reader-bg) 74%, transparent);
  box-shadow:
    inset 0 0 0 1px rgba(153, 126, 94, 0.11),
    0 10px 28px rgba(69, 58, 43, 0.08);
  transform: scale(calc(0.86 + var(--boundary-pull-progress) * 0.1));
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.context-sentence-boundary-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  display: block;
  background: currentColor;
  opacity: 0.2;
  transform: scale(0.72);
  transition:
    opacity 140ms ease,
    transform 160ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.context-sentence-boundary[data-pull-dots="1"] .context-sentence-boundary-dot:nth-child(-n + 1),
.context-sentence-boundary[data-pull-dots="2"] .context-sentence-boundary-dot:nth-child(-n + 2),
.context-sentence-boundary[data-pull-dots="3"] .context-sentence-boundary-dot:nth-child(-n + 3) {
  opacity: 0.95;
  transform: scale(1);
}

.context-sentence-boundary.is-armed .context-sentence-boundary-dots {
  background: rgba(201, 74, 63, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(201, 74, 63, 0.18),
    0 12px 30px rgba(103, 48, 43, 0.11);
}

html.theme-dark .context-sentence-boundary-dots,
body.theme-dark .context-sentence-boundary-dots {
  background: rgba(34, 31, 27, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(232, 219, 195, 0.08),
    0 10px 28px rgba(0, 0, 0, 0.22);
}

html.theme-dark .context-sentence-boundary.is-armed .context-sentence-boundary-dots,
body.theme-dark .context-sentence-boundary.is-armed .context-sentence-boundary-dots {
  background: rgba(201, 74, 63, 0.16);
  box-shadow:
    inset 0 0 0 1px rgba(232, 119, 106, 0.18),
    0 12px 30px rgba(0, 0, 0, 0.28);
}

.context-sentence-card {
  --context-line-opacity: 0.54;
  --context-line-y: 0px;
  --context-sentence-scale: 1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  position: relative;
  align-self: stretch;
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 0.18em 0.22em;
  border-radius: 0.55em;
  color: var(--ink);
  font-size: var(--context-font-size);
  font-weight: 470;
  line-height: 1.32;
  text-align: left;
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  opacity: var(--context-line-opacity);
  transform: translate3d(0, var(--context-line-y), 0) scale(var(--context-sentence-scale));
  transform-origin: center center;
  will-change: transform, opacity;
  touch-action: pan-y;
  transition:
    background-color 145ms ease,
    box-shadow 145ms ease,
    opacity 150ms cubic-bezier(0.2, 0.74, 0.22, 1),
    transform 175ms cubic-bezier(0.16, 1, 0.3, 1);
}

.context-sentence-card.is-current-sentence-card {
  --context-line-opacity: 0.99;
  --context-sentence-scale: 1.035;
  isolation: isolate;
  background: transparent;
  box-shadow: none;
  z-index: 1;
}

.context-sentence-card.is-near-sentence-card {
  --context-line-opacity: 0.84;
}

.context-sentence-card.is-near-sentence-card.is-previous-sentence-card {
  --context-line-opacity: 0.94;
}

.context-sentence-card.is-near-sentence-card.is-next-sentence-card {
  --context-line-opacity: 0.78;
}

.context-sentence-card.is-mid-sentence-card {
  --context-line-opacity: 0.66;
}

.context-sentence-card.is-mid-sentence-card.is-previous-sentence-card {
  --context-line-opacity: 0.78;
}

.context-sentence-card.is-mid-sentence-card.is-next-sentence-card {
  --context-line-opacity: 0.58;
}

.context-sentence-card.is-far-sentence-card {
  --context-line-opacity: 0.45;
}

.context-sentence-card.is-far-sentence-card.is-previous-sentence-card {
  --context-line-opacity: 0.58;
}

.context-sentence-card.is-far-sentence-card.is-next-sentence-card {
  --context-line-opacity: 0.42;
}

.context-sentence-card.is-near-sentence-card.is-recent-previous-sentence-card {
  --context-line-opacity: 0.96;
}

.context-sentence-card.is-mid-sentence-card.is-recent-previous-sentence-card {
  --context-line-opacity: 0.88;
}

.context-sentence-card.is-far-sentence-card.is-recent-previous-sentence-card {
  --context-line-opacity: 0.82;
}

.context-sentence-card.is-epub-align-center {
  text-align: center;
}

.context-sentence-card.is-epub-align-right {
  text-align: right;
}

.context-sentence-card.is-epub-stage-direction {
  font-style: italic;
}

.context-sentence-card.is-epub-speaker,
.context-sentence-card.is-epub-small-caps {
  font-variant-caps: small-caps;
  letter-spacing: 0.035em;
}

.context-sentence-card.is-epub-heading-1,
.context-sentence-card.is-epub-heading-2,
.context-sentence-card.is-epub-heading-3,
.context-sentence-card.is-epub-heading-4,
.context-sentence-card.is-epub-heading-5,
.context-sentence-card.is-epub-heading-6 {
  font-family: var(--ui-font);
  font-weight: 620;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}

.context-sentence-card.is-epub-italic {
  font-style: italic;
}

.context-sentence-card.is-epub-bold {
  font-weight: 620;
}

body.is-book-performance-mode .context-sentence-card {
  will-change: auto;
  transition:
    background-color 130ms ease,
    box-shadow 130ms ease,
    opacity 135ms cubic-bezier(0.2, 0.74, 0.22, 1),
    transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.is-book-massive-performance-mode .context-sentence-card {
  transition:
    background-color 115ms ease,
    box-shadow 115ms ease,
    opacity 120ms cubic-bezier(0.2, 0.74, 0.22, 1),
    transform 125ms cubic-bezier(0.16, 1, 0.3, 1);
}

.context-sentence-card .context-token {
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
  touch-action: pan-y;
  vertical-align: baseline;
}

#contextButton {
  touch-action: none;
}

.context-token {
  position: relative;
  border: 0;
  background: transparent;
  color: inherit;
  display: inline-block;
  max-width: 100%;
  min-height: 0;
  padding: 0.025em 0.15em;
  border-radius: 0.28em;
  font: inherit;
  touch-action: manipulation;
  cursor: pointer;
  transition:
    background-color 140ms ease,
    box-shadow 190ms ease,
    color 120ms ease,
    opacity 200ms cubic-bezier(0.22, 0.72, 0.22, 1),
    text-shadow 180ms ease;
}

.context-token:hover,
.context-token:focus-visible {
  background: transparent;
  color: inherit;
  outline: 0;
}

.context-token-pivot {
  color: inherit;
}

.context-token.is-current .context-token-pivot {
  color: var(--reader-anchor);
}

.context-token.is-near {
  color: inherit;
}

.context-token.is-current-sentence {
  font-weight: inherit;
  color: inherit;
  opacity: 1;
  text-shadow: none;
}

.context-token.is-current {
  background: rgba(255, 231, 148, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(217, 53, 44, 0.18),
    0 0 0 3px rgba(255, 224, 132, 0.12),
    0 5px 14px rgba(217, 53, 44, 0.08);
  color: var(--ink);
  text-shadow: 0.012em 0 0 rgba(22, 22, 22, 0.42);
}

.context-selection-glider {
  position: fixed;
  display: block;
  pointer-events: none;
  border-radius: 0.28em;
  background: rgba(255, 231, 148, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(217, 53, 44, 0.18),
    0 0 0 3px rgba(255, 224, 132, 0.12),
    0 5px 14px rgba(217, 53, 44, 0.08);
  transform-origin: 0 0;
  will-change: transform, opacity;
  z-index: 42;
}

.context-selection-pulse {
  position: absolute;
  display: block;
  pointer-events: none;
  border-radius: 0.42em;
  border: 1px solid rgba(217, 53, 44, 0.24);
  background: rgba(255, 224, 132, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(217, 53, 44, 0.1),
    0 0 0 3px rgba(255, 224, 132, 0.12),
    0 7px 18px rgba(217, 53, 44, 0.1);
  transform-origin: center center;
  will-change: transform, opacity;
  animation: contextLandingRipple 720ms ease-out both;
  z-index: 43;
}

.word-display.has-context.is-context-highlight-gliding .context-token.is-current {
  background: transparent;
  box-shadow: none;
}

.word-display.has-context.is-context-zoom-entry-prep {
  opacity: 0;
}

.word-display.has-context.is-context-zooming {
  will-change: transform, opacity;
}

.word-display.has-context.is-context-zoom-original-hidden {
  opacity: 0 !important;
}

.context-zoom-viewport {
  position: fixed;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
  contain: layout style paint;
}

.context-zoom-surface {
  position: absolute !important;
  z-index: 1;
  box-sizing: border-box;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}

.context-zoom-surface.is-context-zoom-copy-entering,
.context-zoom-surface.is-context-zoom-copy-exiting {
  overflow: hidden;
}

@keyframes contextZoomLineReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--context-zoom-line-offset, 2px), 0) scale(var(--context-sentence-scale, 1));
  }

  100% {
    opacity: var(--context-line-opacity);
    transform: translate3d(0, var(--context-line-y), 0) scale(var(--context-sentence-scale, 1));
  }
}

@keyframes contextZoomLineDismiss {
  0% {
    opacity: var(--context-line-opacity);
    transform: translate3d(0, var(--context-line-y), 0) scale(var(--context-sentence-scale, 1));
  }

  100% {
    opacity: 0;
    transform: translate3d(0, var(--context-zoom-line-offset, 1px), 0) scale(var(--context-sentence-scale, 1));
  }
}

@keyframes contextZoomTokenReveal {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes contextZoomTokenDismiss {
  0% {
    opacity: 1;
  }

  42% {
    opacity: 0.24;
  }

  100% {
    opacity: 0;
  }
}

.context-zoom-surface.is-context-zoom-copy-entering .context-line:not(.is-current-line),
.context-zoom-surface.is-context-zoom-copy-entering .context-sentence-card:not(.is-current-sentence-card) {
  animation: contextZoomLineReveal var(--context-zoom-line-duration, 270ms) cubic-bezier(0.2, 0.72, 0.22, 1) both;
  animation-delay: var(--context-zoom-line-delay, 40ms);
}

.context-zoom-surface.is-context-zoom-copy-entering .context-token:not(.is-current) {
  animation: contextZoomTokenReveal var(--context-word-reveal-duration, var(--context-zoom-target-token-duration, 230ms)) cubic-bezier(0.22, 0.72, 0.22, 1) both;
  animation-delay: var(--context-word-reveal-delay, var(--context-zoom-target-token-delay, 320ms));
}

.context-zoom-surface.is-context-zoom-copy-entering .context-token.is-current {
  opacity: 1 !important;
  filter: none !important;
}

.context-zoom-surface.is-context-zoom-copy-exiting .context-line:not(.is-current-line),
.context-zoom-surface.is-context-zoom-copy-exiting .context-sentence-card:not(.is-current-sentence-card) {
  opacity: 0;
  animation: none;
  transition: none;
}

.context-zoom-surface.is-context-zoom-copy-exiting .context-line.is-current-line,
.context-zoom-surface.is-context-zoom-copy-exiting .context-sentence-card.is-current-sentence-card {
  opacity: 1;
  filter: none;
}

.context-zoom-surface.is-context-zoom-copy-exiting .context-line.is-current-line .context-token,
.context-zoom-surface.is-context-zoom-copy-exiting .context-sentence-card.is-current-sentence-card .context-token {
  opacity: 1;
  filter: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.context-zoom-surface.is-context-zoom-copy-exiting .context-line.is-current-line .context-token:not(.is-current),
.context-zoom-surface.is-context-zoom-copy-exiting .context-sentence-card.is-current-sentence-card .context-token:not(.is-current) {
  opacity: 0;
  animation: none;
  transition: none;
}

.context-zoom-surface.is-context-zoom-copy-exiting .context-token.is-current,
.context-zoom-surface.is-context-zoom-copy-exiting .context-line.is-current-line,
.context-zoom-surface.is-context-zoom-copy-exiting .context-sentence-card.is-current-sentence-card {
  background: transparent;
  box-shadow: none;
}

.context-zoom-surface.is-context-zoom-speed-arrived .context-token.is-current {
  opacity: 0;
  transition: none;
}

.word-display.has-context.is-context-zoom-exiting .context-line:not(.is-current-line),
.word-display.has-context.is-context-zoom-exiting .context-sentence-card:not(.is-current-sentence-card) {
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.22, 0.72, 0.22, 1);
}

.word-display.has-context.is-context-zoom-exiting .context-token:not(.is-current) {
  opacity: 0;
  transition: opacity 145ms cubic-bezier(0.22, 0.72, 0.22, 1);
}

.word-display.has-context.is-context-zoom-exiting .context-token.is-current,
.word-display.has-context.is-context-zoom-exiting .context-line.is-current-line,
.word-display.has-context.is-context-zoom-exiting .context-sentence-card.is-current-sentence-card {
  background: transparent;
  box-shadow: none;
}

.word-display.has-context.is-context-selection-updating .context-line {
  transition:
    opacity 140ms cubic-bezier(0.22, 0.72, 0.22, 1),
    transform 240ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.word-display.has-context.is-context-selection-updating .context-sentence-card {
  transition:
    background-color 135ms ease,
    box-shadow 135ms ease,
    opacity 140ms cubic-bezier(0.2, 0.74, 0.22, 1),
    transform 165ms cubic-bezier(0.16, 1, 0.3, 1);
}

.word-display.has-context.is-context-selection-updating .context-token {
  transition:
    color 80ms ease,
    opacity 140ms cubic-bezier(0.22, 0.72, 0.22, 1),
    text-shadow 80ms ease;
}

.word-display.has-context.is-context-entry-prep .context-token.is-current,
.word-display.has-context.is-context-entering .context-token.is-current,
.word-display.has-context.is-context-exiting .context-token.is-current {
  background: transparent;
  box-shadow: none;
  color: transparent;
  opacity: 0;
  text-shadow: none;
  transition: none;
}

.word-display.has-context.is-context-entry-prep .context-token.is-current .context-token-pivot,
.word-display.has-context.is-context-entering .context-token.is-current .context-token-pivot,
.word-display.has-context.is-context-exiting .context-token.is-current .context-token-pivot {
  color: transparent;
}

.word-display.has-context.is-context-entry-prep .context-line.is-current-line,
.word-display.has-context.is-context-entering .context-line.is-current-line,
.word-display.has-context.is-context-exiting .context-line.is-current-line {
  background: transparent;
  box-shadow: none;
}

.word-display.has-context.is-context-entry-prep .context-sentence-card.is-current-sentence-card,
.word-display.has-context.is-context-entering .context-sentence-card.is-current-sentence-card,
.word-display.has-context.is-context-exiting .context-sentence-card.is-current-sentence-card {
  background: transparent;
  box-shadow: none;
}

.word-display.has-context.has-context-sentence-scroll.is-context-entry-prep .context-sentence-card {
  opacity: 0;
  transform: translate3d(0, calc(var(--context-entry-y, 4px) + var(--context-line-y)), 0) scale(var(--context-sentence-scale));
}

.word-display.has-context.is-context-revealing .context-line:not(.is-current-line) {
  animation: contextLineBloom var(--context-line-reveal-duration, 300ms) cubic-bezier(0.2, 0.72, 0.22, 1) both;
  animation-delay: var(--context-line-reveal-delay, 35ms);
}

.word-display.has-context.is-context-revealing .context-sentence-card:not(.is-current-sentence-card) {
  animation: contextLineBloom var(--context-line-reveal-duration, 250ms) cubic-bezier(0.2, 0.72, 0.22, 1) both;
  animation-delay: var(--context-line-reveal-delay, 30ms);
}

.word-display.has-context.is-context-revealing .context-line.is-current-line,
.word-display.has-context.is-context-revealing .context-sentence-card.is-current-sentence-card {
  animation: contextCurrentSentenceBloom 190ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
  animation-delay: 0ms;
}

.word-display.has-context.is-context-revealing .context-token:not(.is-current) {
  animation: none;
}

.word-display.has-context.is-context-revealing .context-token.is-current-sentence:not(.is-current) {
  animation-delay: var(--context-word-reveal-delay, 0ms);
}

.word-display.has-context.is-context-drifting .context-token.is-current {
  box-shadow:
    inset 0 0 0 1px rgba(217, 53, 44, 0.16),
    0 0 0 4px rgba(255, 224, 132, 0.11),
    0 7px 16px rgba(217, 53, 44, 0.08);
}

.word-display.has-context.is-context-exiting .context-line {
  opacity: 0;
  animation: none;
  transition: none;
}

.word-display.has-context.has-context-sentence-scroll.is-context-exiting .context-sentence-card {
  opacity: 0;
  animation: none;
  transition: none;
}

.word-display.has-context.is-context-exiting .context-token:not(.is-current) {
  opacity: 0;
  animation: none;
  transition: none;
}

body.is-book-performance-mode .word-display.has-context.is-context-exiting .context-line,
body.is-book-performance-mode .word-display.has-context.has-context-sentence-scroll.is-context-exiting .context-sentence-card,
body.is-book-performance-mode .word-display.has-context.is-context-exiting .context-token:not(.is-current) {
  animation-duration: 90ms;
  animation-delay: 0ms;
}

body.is-book-massive-performance-mode .word-display.has-context.is-context-exiting .context-line,
body.is-book-massive-performance-mode .word-display.has-context.has-context-sentence-scroll.is-context-exiting .context-sentence-card,
body.is-book-massive-performance-mode .word-display.has-context.is-context-exiting .context-token:not(.is-current) {
  animation-duration: 80ms;
  animation-delay: 0ms;
}

.word-display.has-context.is-context-landing .context-token:not(.is-current) {
  opacity: 1;
}

.word-display.has-context.is-context-landing .context-token.is-current-sentence {
  opacity: 1;
}

.word-display.has-context.is-context-landing .context-token.is-current {
  animation: contextLandingGlow 720ms ease-out both;
}

.word-display.has-context.is-context-landing .context-token.is-current::after {
  content: "";
  position: absolute;
  inset: -0.16em -0.22em;
  z-index: -1;
  border-radius: 0.42em;
  border: 1px solid rgba(217, 53, 44, 0.24);
  background: rgba(255, 224, 132, 0.2);
  pointer-events: none;
  animation: contextLandingRipple 720ms ease-out both;
}

.word-display.has-context.has-context-sentence-scroll.is-context-landing .context-token.is-current::after {
  content: none;
}

.context-token.is-distance-current {
  color: inherit;
}

.context-token.is-distance-1 {
  color: inherit;
}

.context-token.is-distance-2 {
  color: inherit;
}

.context-token.is-distance-3 {
  color: inherit;
}

.context-token.is-distance-far {
  color: inherit;
}

.context-token.is-current-sentence {
  color: inherit;
  opacity: 1;
}

.context-token.is-dialogue {
  color: var(--dialogue-word-color, rgb(82, 55, 45));
}

.context-flight-word {
  position: fixed;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  border-radius: 0;
  font-family: var(--reading-font);
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform, opacity, color;
}

.context-flight-word.is-pdf-source-flight-rhythm {
  z-index: 154;
}

.context-flight-word.is-pdf-source-entry-flight {
  z-index: 154;
}

.context-flight-word.is-pdf-camera-focus-plane {
  z-index: 154;
  transform: none;
  will-change: opacity;
}

.context-flight-word.is-context-zoom-focus-word {
  z-index: 35;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.context-flight-word.is-context-zoom-landing-word {
  z-index: 36;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.word-display.is-pdf-source-handoff {
  opacity: 0;
}

.focus-word {
  grid-column: 1 / -1;
  justify-self: center;
  display: inline-block;
  min-width: max-content;
  white-space: nowrap;
  transform: translateX(var(--focus-word-shift, 0px));
  will-change: transform;
}

.focus-word .word-left,
.focus-word .word-pivot,
.focus-word .word-right {
  display: inline;
}

.focus-word .word-pivot {
  margin-right: var(--focus-pivot-right-gap, 0px);
}

/* Paused Speed context stays aligned with the focal word. */
.focus-word .speed-scrub-context {
  position: absolute;
  top: 0;
  display: flex;
  width: max-content;
  /* Clip only the horizontal run. Font ascenders/descenders can paint outside
     the tight Speed line box without losing their baseline alignment. */
  overflow: visible;
  clip-path: inset(-1em 0);
  font: inherit;
  letter-spacing: inherit;
  color: var(--ink);
  opacity: 0.28;
  white-space: pre;
  pointer-events: none;
  user-select: none;
}

.focus-word .speed-scrub-context.is-before {
  right: 100%;
  max-width: max(0px, calc(50vw - 50% + var(--focus-word-shift, 0px)));
  /* Anchor the full unbroken text run, including its final space, against the
     focal word. Block text alignment can expose the wrong end when clipped. */
  justify-content: flex-end;
}

.focus-word .speed-scrub-context.is-after {
  left: 100%;
  max-width: max(0px, calc(50vw - 50% - var(--focus-word-shift, 0px)));
  justify-content: flex-start;
}

@keyframes speedScrubContextReveal {
  from { opacity: 0; }
  to { opacity: 0.28; }
}

.focus-word .speed-scrub-context.is-appearing {
  animation: speedScrubContextReveal 260ms cubic-bezier(0.22, 0, 0.24, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .focus-word .speed-scrub-context.is-appearing {
    animation: none;
  }
}

.focus-word.is-epub-italic,
.focus-word .word-left.is-epub-italic,
.focus-word .word-pivot.is-epub-italic,
.focus-word .word-right.is-epub-italic {
  font-style: italic;
}

.focus-word.is-dialogue {
  color: var(--dialogue-word-color, rgb(82, 55, 45));
}

.focus-word.is-dialogue .word-pivot {
  color: var(--reader-anchor);
}

@keyframes contextLineBloom {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--context-entry-y, 4px) + var(--context-line-y)), 0) scale(var(--context-sentence-scale, 1));
  }

  12% {
    opacity: 0;
    transform: translate3d(0, calc(var(--context-entry-y-soft, 1px) + var(--context-line-y)), 0) scale(var(--context-sentence-scale, 1));
  }

  42% {
    transform: translate3d(0, var(--context-line-y), 0) scale(var(--context-sentence-scale, 1));
  }

  100% {
    opacity: var(--context-line-opacity);
    transform: translate3d(0, var(--context-line-y), 0) scale(var(--context-sentence-scale, 1));
  }
}

@keyframes contextCurrentSentenceBloom {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(var(--context-entry-y-soft, 1px) + var(--context-line-y)), 0) scale(1);
  }

  38% {
    opacity: 0.72;
  }

  100% {
    opacity: var(--context-line-opacity);
    transform: translate3d(0, var(--context-line-y), 0) scale(var(--context-sentence-scale, 1));
  }
}

@keyframes contextTokenBloom {
  0%,
  12% {
    opacity: 0;
  }

  62% {
    opacity: 0.82;
  }

  100% {
    opacity: 1;
  }
}

@keyframes contextLineNarrow {
  0% {
    opacity: var(--context-line-opacity);
    transform: translate3d(0, var(--context-line-y), 0) scale(var(--context-sentence-scale, 1));
  }

  58% {
    transform: translate3d(0, var(--context-line-y-settle), 0) scale(var(--context-sentence-scale, 1));
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes contextTokenNarrow {
  0% {
    opacity: 1;
  }

  38% {
    opacity: 0.25;
  }

  100% {
    opacity: 0;
  }
}

@keyframes contextLandingGlow {
  0% {
    background: rgba(255, 224, 132, 0.62);
    box-shadow:
      inset 0 0 0 1px rgba(217, 53, 44, 0.18),
      0 0 0 0 rgba(217, 53, 44, 0.18),
      0 10px 24px rgba(217, 53, 44, 0.14);
  }

  60% {
    background: rgba(255, 216, 96, 0.56);
    box-shadow:
      inset 0 0 0 1.5px rgba(217, 53, 44, 0.22),
      0 0 0 7px rgba(217, 53, 44, 0),
      0 7px 18px rgba(217, 53, 44, 0.1);
  }

  100% {
    background: rgba(255, 216, 96, 0.48);
    box-shadow:
      inset 0 0 0 1.5px rgba(217, 53, 44, 0.2),
      0 0 0 3px rgba(255, 224, 132, 0.2),
      0 7px 18px rgba(217, 53, 44, 0.12);
  }
}

@keyframes contextLandingRipple {
  0% {
    opacity: 0.95;
    transform: scale(0.86);
  }

  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes context-tap-perimeter {
  0% {
    opacity: 0;
    transform: scale(0.985);
  }

  18% {
    opacity: 1;
    transform: scale(1);
  }

  58% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: scale(1.012);
  }
}

.word-left {
  min-width: 0;
  overflow: visible;
  text-align: right;
  white-space: nowrap;
}

.word-pivot {
  min-width: 0;
  color: var(--reader-anchor);
  text-align: center;
  white-space: nowrap;
}

.word-right {
  min-width: 0;
  overflow: visible;
  text-align: left;
  white-space: nowrap;
}

.empty-reader-state {
  --empty-reader-gap: clamp(17px, 2.25vh, 24px);
  --empty-reader-title-line: clamp(30px, 7vw, 41px);
  position: fixed;
  top: var(--empty-reader-top);
  left: 50%;
  z-index: 5;
  grid-column: 1 / -1;
  width: min(380px, calc(100vw - var(--screen-pad-left) - var(--screen-pad-right) - 30px));
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: var(--empty-reader-gap);
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: normal;
  text-align: center;
  text-rendering: auto;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  transform: translate(-50%, -50%);
}

.empty-reader-title {
  margin: 0;
  color: rgba(22, 22, 22, 0.86);
  font-family: var(--reading-font);
  font-size: clamp(1.62rem, 6.7vw, 2.28rem);
  font-weight: 470;
  line-height: 1.06;
  letter-spacing: 0;
  white-space: normal;
}

.empty-reader-actions {
  width: min(340px, calc(100vw - 40px));
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  gap: clamp(10px, 3vw, 14px);
}

.empty-reader-action {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.82);
  color: rgba(22, 22, 22, 0.78);
  font-family: var(--ui-font);
  font-size: clamp(0.92rem, 2.65vw, 1rem);
  font-weight: 660;
  box-shadow:
    0 12px 26px rgba(40, 36, 28, 0.1),
    inset 0 0 0 1px rgba(221, 212, 195, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.empty-reader-action.is-primary {
  background: rgba(22, 22, 22, 0.84);
  color: rgba(255, 253, 247, 0.96);
  box-shadow:
    0 14px 28px rgba(40, 36, 28, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.progress-wrap {
  display: grid;
  gap: 8px;
  padding-block: 2px 0;
  touch-action: none;
}

.bottom-dock {
  position: relative;
  z-index: 40;
  display: grid;
  gap: 9px;
  padding-top: 8px;
  padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 32px));
  border-top: 1px solid rgba(216, 204, 186, 0.66);
  transition:
    opacity 380ms cubic-bezier(0.22, 0.72, 0.22, 1),
    filter 380ms cubic-bezier(0.22, 0.72, 0.22, 1);
}

.progress-track {
  height: var(--progress-height);
  overflow: hidden;
  border-radius: 999px;
  background: var(--progress-track-soft);
  cursor: pointer;
  touch-action: none;
}

.progress-track.is-scrubbing {
  outline: 3px solid rgba(62, 135, 123, 0.18);
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: var(--progress-fill-soft);
  transition: width 120ms linear;
}

.progress-track.is-scrubbing .progress-fill {
  transition: none;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(91, 87, 80, 0.72);
  font-family: var(--ui-font);
  font-size: var(--progress-meta-size);
  font-weight: 450;
  letter-spacing: 0.01em;
}

.controls,
.input-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.input-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

.input-actions button {
  min-width: 0;
  min-height: 36px;
  padding-inline: 6px;
  font-size: clamp(0.68rem, 2.35vw, 0.78rem);
  white-space: nowrap;
}

.controls {
  width: min(560px, 100%);
  max-width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  justify-self: center;
  flex-wrap: nowrap;
}

.transport-controls {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: clamp(226px, 56vw, 258px);
  gap: 16px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.22) 42%, transparent 64%),
    linear-gradient(180deg, rgba(248, 244, 236, 0.94), rgba(223, 214, 199, 0.82));
  box-shadow:
    0 18px 34px rgba(43, 36, 27, 0.17),
    0 2px 4px rgba(255, 255, 255, 0.92),
    inset 0 1px 2px rgba(255, 255, 255, 0.96),
    inset 0 -3px 8px rgba(103, 83, 58, 0.12);
  backdrop-filter: blur(14px);
}

body.has-source-link.has-pdf-page-navigation .transport-controls {
  width: clamp(206px, 52vw, 246px);
}

.controls > .text-size-button {
  grid-column: 1;
  justify-self: start;
}

.controls > .bottom-mode-button,
.controls > .pdf-source-toggle-button,
.controls > .bottom-right-actions {
  grid-column: 3;
  justify-self: end;
}

.bottom-right-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: var(--bottom-control-size);
}

.bottom-right-actions .bottom-mode-button[hidden] {
  display: none;
}

.text-size-button {
  width: var(--bottom-control-size);
  min-width: var(--bottom-control-size);
  min-height: var(--bottom-control-size);
  padding-inline: 0;
  gap: 2px;
  border-radius: 50%;
  aspect-ratio: 1;
  touch-action: none;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), rgba(241, 235, 224, 0.9) 48%, rgba(221, 211, 196, 0.86) 100%);
  color: rgba(67, 63, 57, 0.94);
  box-shadow:
    0 8px 15px rgba(40, 36, 28, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(129, 108, 82, 0.11);
}

.bottom-mode-button {
  width: var(--bottom-control-size);
  min-width: var(--bottom-control-size);
  min-height: var(--bottom-control-size);
  height: var(--bottom-control-size);
  padding-inline: 0;
  background: #ffffff;
  color: rgba(10, 10, 10, 0.72);
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  box-shadow:
    0 12px 28px rgba(40, 36, 28, 0.14),
    inset 0 1px 1px rgba(255, 255, 255, 1),
    inset 0 0 0 999px rgba(255, 255, 255, 0.58);
}

.character-legend-button {
  color: rgba(45, 44, 39, 0.78);
}

.character-legend-symbol {
  width: 23px;
  height: 23px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  transform: rotate(-6deg);
}

.character-legend-symbol span {
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    0 1px 2px rgba(40, 36, 28, 0.12);
}

.character-legend-symbol span:nth-child(1) {
  background: rgb(142, 54, 45);
}

.character-legend-symbol span:nth-child(2) {
  background: rgb(36, 86, 147);
}

.character-legend-symbol span:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  width: 10px;
  background: rgb(38, 100, 92);
}

.pdf-source-toggle-button {
  width: var(--bottom-control-size);
  min-width: var(--bottom-control-size);
  min-height: var(--bottom-control-size);
  height: var(--bottom-control-size);
  padding-inline: 0;
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), rgba(241, 235, 224, 0.9) 48%, rgba(221, 211, 196, 0.86) 100%);
  color: rgba(67, 63, 57, 0.9);
  box-shadow:
    0 8px 15px rgba(40, 36, 28, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(129, 108, 82, 0.11);
}

.pdf-source-toggle-button.is-open,
.pdf-source-toggle-button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 50% 82%, rgba(255, 253, 247, 0.3), transparent 38%),
    linear-gradient(180deg, rgba(217, 202, 181, 0.88), rgba(190, 176, 154, 0.88));
  color: rgba(38, 34, 30, 0.94);
  transform: translateY(1px) scale(var(--ui-press-scale));
  box-shadow:
    0 4px 10px rgba(40, 36, 28, 0.1),
    inset 0 3px 7px rgba(80, 63, 43, 0.14),
    inset 0 -1px 1px rgba(255, 255, 255, 0.64);
}

.source-link-symbol {
  width: 22px;
  height: 22px;
  stroke-width: 1.78;
}

.source-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.source-link-button[hidden] {
  display: none;
}

.top-actions #ebookModeButton,
.ebook-actions #ebookSpeedModeButton {
  color: rgba(69, 64, 58, 0.68);
}

#ebookModeButton,
#ebookSpeedModeButton {
  --mode-switch-opacity: 0.84;
  --mode-switch-width: 1.68;
}

body.ebook-mode #ebookModeButton,
body.ebook-mode #ebookSpeedModeButton {
  --mode-switch-opacity: 0.9;
  --mode-switch-width: 1.82;
}

.mode-switch-symbol {
  width: 26.5px;
  height: 26.5px;
  color: currentColor;
}

.mode-switch-symbol path {
  transition:
    opacity 190ms ease,
    stroke-width 190ms ease;
}

body.ebook-mode #ebookSpeedModeButton {
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.82), rgba(237, 229, 216, 0.62));
  color: rgba(69, 64, 58, 0.68);
  box-shadow:
    0 10px 20px rgba(45, 38, 28, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.96),
    inset 0 -1px 2px rgba(129, 108, 82, 0.08);
}

.font-size-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1;
  color: currentColor;
  transform: translateX(1px);
}

.primary-button,
.ghost-button,
.icon-button,
.file-picker span {
  min-height: 44px;
  border-radius: 8px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition:
    transform 120ms ease,
    background-color 120ms ease,
    box-shadow 120ms ease,
    filter 120ms ease;
}

.primary-button {
  background: transparent;
  color: var(--ink);
  min-width: 66px;
}

.play-control-button {
  width: var(--play-control-size);
  min-width: var(--play-control-size);
  min-height: var(--play-control-size);
  position: relative;
  overflow: hidden;
  background: var(--play-button-rest-bg);
  color: rgba(10, 10, 10, 0.96);
  box-shadow: var(--play-button-rest-shadow);
}

.play-control-button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(111, 91, 64, 0.1), transparent 56%);
  pointer-events: none;
}

.play-control-button .control-symbol {
  position: relative;
  z-index: 1;
}

.play-control-button:hover,
.play-control-button:focus,
.play-control-button:focus-visible,
.play-control-button:active {
  background: var(--play-button-rest-bg);
  box-shadow: var(--play-button-rest-shadow);
  filter: none;
  transform: none;
  outline: none;
}

.play-control-button.is-paused {
  background:
    radial-gradient(circle at 50% 32%, rgba(238, 230, 217, 0.98), rgba(248, 243, 233, 0.94) 64%, rgba(222, 211, 194, 0.9) 100%);
  box-shadow:
    0 8px 16px rgba(45, 38, 28, 0.13),
    inset 0 5px 12px rgba(77, 60, 39, 0.18),
    inset 0 -1px 2px rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(170, 145, 111, 0.12);
  transform: translateY(2px) scale(0.986);
}

.play-control-button.is-paused:hover,
.play-control-button.is-paused:focus,
.play-control-button.is-paused:focus-visible,
.play-control-button.is-paused:active {
  background:
    radial-gradient(circle at 50% 32%, rgba(238, 230, 217, 0.98), rgba(248, 243, 233, 0.94) 64%, rgba(222, 211, 194, 0.9) 100%);
  box-shadow:
    0 8px 16px rgba(45, 38, 28, 0.13),
    inset 0 5px 12px rgba(77, 60, 39, 0.18),
    inset 0 -1px 2px rgba(255, 255, 255, 0.72),
    inset 0 0 0 1px rgba(170, 145, 111, 0.12);
  filter: none;
  transform: translateY(2px) scale(0.986);
  outline: none;
}

.play-control-button {
  border-radius: 50%;
  aspect-ratio: 1;
  min-height: var(--play-control-size);
  padding: 0;
}

#textPanelButton {
  border-radius: 50%;
  aspect-ratio: 1;
  min-height: var(--top-control-size);
  padding: 0;
}

#playButton {
  min-height: var(--play-control-size);
  pointer-events: auto !important;
  touch-action: none;
}

#textSizeButton {
  border-radius: 50%;
  aspect-ratio: 1;
  min-height: var(--bottom-control-size);
  padding: 0;
}

.text-size-button {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), rgba(241, 235, 224, 0.9) 48%, rgba(221, 211, 196, 0.86) 100%);
  color: rgba(67, 63, 57, 0.94);
}

.text-size-button.is-open {
  background:
    radial-gradient(circle at 50% 18%, rgba(238, 231, 219, 0.96), rgba(225, 215, 199, 0.9) 54%, rgba(209, 196, 177, 0.86) 100%);
  color: rgba(37, 34, 30, 0.92);
  box-shadow:
    0 5px 13px rgba(40, 36, 28, 0.1),
    inset 0 3px 7px rgba(80, 63, 43, 0.13),
    inset 0 -1px 1px rgba(255, 255, 255, 0.7);
}

.font-size-popover {
  position: absolute;
  left: 0;
  right: auto;
  bottom: calc(100% + 10px);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  width: min(312px, calc(100vw - 32px));
  max-height: min(68dvh, 560px);
  overflow-y: auto;
  padding: 8px;
  border-radius: 22px;
  background: rgba(255, 255, 252, 0.94);
  box-shadow:
    0 16px 38px rgba(40, 36, 28, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
}

.font-size-section {
  display: grid;
  gap: 6px;
}

.font-size-theme-toggle {
  width: 100%;
  min-height: 38px;
  padding: 5px 6px;
  border: 0;
  border-radius: 16px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 7px;
  background: rgba(239, 233, 222, 0.62);
  color: rgba(45, 40, 34, 0.82);
  box-shadow: inset 0 0 0 1px rgba(131, 108, 80, 0.06);
}

/* Experimental speaker controls keep a neutral tap response. */
.dialogue-joint-setting button:active {
  transform: none !important;
}

.theme-toggle-dialogue {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: rgba(190, 74, 65, 0.14);
  color: rgba(153, 55, 48, 0.82);
  font-family: var(--reading-font);
  font-size: 1.1rem;
  font-weight: 740;
  line-height: 1;
  padding-top: 2px;
}

.theme-toggle-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  text-align: left;
}

.theme-toggle-copy strong {
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 680;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-toggle-copy small {
  color: rgba(91, 87, 80, 0.72);
  font-size: 0.62rem;
  font-weight: 560;
}

.theme-toggle-switch {
  position: relative;
  width: 32px;
  height: 19px;
  border-radius: 999px;
  background: rgba(196, 188, 174, 0.78);
  box-shadow: inset 0 1px 3px rgba(56, 46, 34, 0.18);
}

.theme-toggle-switch span {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.96);
  box-shadow: 0 1px 3px rgba(52, 43, 32, 0.18);
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.font-size-theme-toggle.is-active {
  background: rgba(199, 76, 66, 0.13);
  color: rgba(143, 45, 40, 0.94);
}

.font-size-theme-toggle.is-active .theme-toggle-switch {
  background: rgba(190, 74, 65, 0.82);
}

.font-size-theme-toggle.is-active .theme-toggle-switch span {
  transform: translateX(13px);
}

.dialogue-color-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.dialogue-color-option {
  min-height: 36px;
  padding: 5px 6px;
  border-radius: 14px;
  display: grid;
  justify-items: center;
  gap: 3px;
  background: rgba(239, 233, 222, 0.62);
  color: rgba(45, 40, 34, 0.74);
  box-shadow: inset 0 0 0 1px rgba(131, 108, 80, 0.06);
}

.dialogue-color-dot {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--dialogue-option-color);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.54),
    0 1px 4px rgba(45, 38, 28, 0.16);
}

.dialogue-color-option span:last-child {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.56rem;
  font-weight: 680;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialogue-color-option.is-active {
  background: rgba(199, 76, 66, 0.13);
  color: rgba(143, 45, 40, 0.94);
}

.dialogue-color-option.is-active .dialogue-color-dot {
  box-shadow:
    inset 0 0 0 2px rgba(255, 253, 247, 0.86),
    0 0 0 2px rgba(143, 45, 40, 0.72),
    0 3px 9px rgba(45, 38, 28, 0.18);
}

html.theme-dark body,
html.theme-dark .app-shell,
html.theme-dark .reader-panel,
html.theme-dark .focus-stage,
html.theme-dark .ebook-reader,
html.theme-dark .ebook-page {
  background: var(--reader-surface);
  color: var(--ink);
}

html.theme-dark .brand-block {
  color: rgba(238, 232, 220, 0.72);
}

html.theme-dark body:not(.has-loaded-text) .brand-block span,
html.theme-dark body:not(.has-loaded-text) .ebook-title-block span {
  color: rgba(238, 232, 220, 0.82);
}

html.theme-dark .brand-block small,
html.theme-dark .progress-meta,
html.theme-dark .ebook-bottom-bar,
html.theme-dark .chapter-card small,
html.theme-dark .collection-meta,
html.theme-dark .collection-copy small,
html.theme-dark .library-feature-copy small,
html.theme-dark .gutenberg-copy small,
html.theme-dark .gutenberg-copy em {
  color: rgba(211, 201, 187, 0.72);
}

.round-side-button {
  width: var(--bottom-control-size);
  min-width: var(--bottom-control-size);
  min-height: var(--bottom-control-size);
  border-radius: 50%;
  padding: 0;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), rgba(241, 235, 224, 0.9) 48%, rgba(221, 211, 196, 0.86) 100%);
  color: rgba(67, 63, 57, 0.94);
  line-height: 1;
  box-shadow:
    0 8px 15px rgba(40, 36, 28, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(129, 108, 82, 0.11);
}

.icon-control {
  gap: 0;
}

.play-symbol,
.book-symbol,
.upload-symbol,
.chapter-symbol,
.speed-reader-symbol,
.mode-switch-symbol,
.sliders-symbol,
.home-symbol {
  width: var(--top-icon-size);
  height: var(--top-icon-size);
  display: inline-block;
  position: relative;
  color: currentColor;
}

.top-icon-button .home-symbol {
  width: 25px;
  height: 25px;
  stroke-width: 1.42;
}

.ui-symbol {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.control-symbol {
  width: 22px;
  height: 22px;
  display: block;
  color: currentColor;
  pointer-events: none;
}

.arrow-symbol {
  width: 21px;
  height: 21px;
  stroke-width: 2.7;
}

.play-control-button .play-symbol {
  width: 29px;
  height: 29px;
}

.play-control-button .pause-icon {
  display: none;
  stroke-width: 2.9;
}

.play-control-button.is-paused .play-icon {
  display: none;
}

.play-control-button.is-paused .pause-icon {
  display: block;
}

.ui-symbol::before,
.ui-symbol::after {
  content: none !important;
  display: none !important;
}

.ghost-button,
.icon-button {
  background: #eee6d8;
  color: var(--ink);
}

.ghost-button.round-side-button {
  background: rgba(234, 228, 217, 0.86);
  color: rgba(67, 63, 57, 0.94);
}

.ghost-button.text-size-button,
.ghost-button.text-size-button:hover,
.ghost-button.text-size-button:focus,
.ghost-button.text-size-button:focus-visible {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), rgba(241, 235, 224, 0.9) 48%, rgba(221, 211, 196, 0.86) 100%);
  color: rgba(67, 63, 57, 0.94);
  filter: none;
  box-shadow:
    0 8px 15px rgba(40, 36, 28, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(129, 108, 82, 0.11);
}

.ghost-button.text-size-button.is-open,
.ghost-button.text-size-button:active {
  background:
    radial-gradient(circle at 50% 18%, rgba(238, 231, 219, 0.96), rgba(225, 215, 199, 0.9) 54%, rgba(209, 196, 177, 0.86) 100%);
  color: rgba(37, 34, 30, 0.92);
  box-shadow:
    0 5px 13px rgba(40, 36, 28, 0.1),
    inset 0 3px 7px rgba(80, 63, 43, 0.13),
    inset 0 -1px 1px rgba(255, 255, 255, 0.7);
}

.ghost-button.is-active,
.ghost-button.is-scrubbing,
.text-size-button.is-scrubbing {
  background: var(--accent);
  color: #fffdf7;
}

#contextButton.is-active {
  background: #f4ddd8;
  color: var(--accent-dark);
  box-shadow: inset 0 0 0 2px rgba(217, 53, 44, 0.8);
}

#contextButton.is-scrubbing {
  background: var(--accent);
  color: #fffdf7;
  box-shadow: none;
}

.context-button-hidden {
  display: none;
}

.primary-button:hover,
.ghost-button:hover,
.icon-button:hover,
.file-picker:hover span {
  filter: brightness(0.95);
}

.round-side-button,
.round-side-button:hover,
.round-side-button:focus,
.round-side-button:focus-visible,
.round-side-button:active,
.ghost-button.round-side-button,
.ghost-button.round-side-button:hover,
.ghost-button.round-side-button:focus,
.ghost-button.round-side-button:focus-visible,
.ghost-button.round-side-button:active {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), rgba(241, 235, 224, 0.9) 48%, rgba(221, 211, 196, 0.86) 100%);
  color: rgba(67, 63, 57, 0.94);
  filter: none;
  outline: none;
  transform: none;
  box-shadow:
    0 8px 15px rgba(40, 36, 28, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(129, 108, 82, 0.11);
}

.ghost-button.bottom-mode-button,
.ghost-button.bottom-mode-button:hover,
.ghost-button.bottom-mode-button:focus,
.ghost-button.bottom-mode-button:focus-visible,
.ghost-button.bottom-mode-button:active,
.ghost-button.pdf-source-toggle-button,
.ghost-button.pdf-source-toggle-button:hover,
.ghost-button.pdf-source-toggle-button:focus,
.ghost-button.pdf-source-toggle-button:focus-visible,
.ghost-button.pdf-source-toggle-button:active {
  width: var(--bottom-control-size);
  min-width: var(--bottom-control-size);
  min-height: var(--bottom-control-size);
  height: var(--bottom-control-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), rgba(241, 235, 224, 0.9) 48%, rgba(221, 211, 196, 0.86) 100%);
  color: rgba(67, 63, 57, 0.94);
  filter: none;
  box-shadow:
    0 8px 15px rgba(40, 36, 28, 0.1),
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 0 -3px 6px rgba(129, 108, 82, 0.11);
}

.ghost-button.pdf-source-toggle-button.is-open,
.ghost-button.pdf-source-toggle-button[aria-pressed="true"] {
  background:
    radial-gradient(circle at 50% 82%, rgba(255, 253, 247, 0.3), transparent 38%),
    linear-gradient(180deg, rgba(217, 202, 181, 0.88), rgba(190, 176, 154, 0.88));
  color: rgba(38, 34, 30, 0.94);
  box-shadow:
    0 4px 10px rgba(40, 36, 28, 0.1),
    inset 0 3px 7px rgba(80, 63, 43, 0.14),
    inset 0 -1px 1px rgba(255, 255, 255, 0.64);
}

.slider-row {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  align-items: center;
  gap: 12px;
  color: rgba(91, 87, 80, 0.82);
  font-family: var(--reading-font);
  font-size: clamp(0.92rem, 2.55vw, 1.16rem);
  font-weight: 500;
}

.speed-control {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) max-content;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 36px;
  background: transparent;
  accent-color: var(--speed-fill);
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--speed-fill) 0 var(--speed-percent, 25%), var(--speed-track) var(--speed-percent, 25%) 100%);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  height: 20px;
  margin-top: -8px;
  border: 1px solid rgba(180, 174, 162, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.96);
  box-shadow:
    0 4px 12px rgba(40, 36, 28, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--speed-track);
}

input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--speed-fill);
}

input[type="range"]::-moz-range-thumb {
  width: 32px;
  height: 20px;
  border: 1px solid rgba(180, 174, 162, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.96);
  box-shadow:
    0 4px 12px rgba(40, 36, 28, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

#wpmSlider {
  min-height: 46px;
  margin-block: -8px;
}

output {
  color: rgba(22, 22, 22, 0.86);
  min-width: 84px;
  text-align: right;
  font-family: var(--ui-font);
  font-size: clamp(0.92rem, 2.55vw, 1.16rem);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.control-helper {
  display: none;
  margin: -2px 0 0;
  color: rgba(109, 106, 100, 0.72);
  font-size: clamp(0.72rem, 2.5vw, 0.84rem);
  text-align: center;
}

.menu-card {
  position: relative;
  width: min(470px, 100%);
  min-height: calc(100dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
  margin-inline: auto;
  padding: clamp(58px, 8.4vh, 88px) clamp(20px, 5.4vw, 32px) max(28px, env(safe-area-inset-bottom));
  display: grid;
  align-content: start;
  gap: clamp(16px, 2.2vh, 24px);
}

.menu-main {
  display: grid;
  gap: clamp(20px, 2.8vh, 30px);
}

.menu-close {
  position: fixed;
  top: var(--screen-pad-top);
  left: calc(var(--screen-pad-left) + var(--top-corner-inset));
  z-index: 2;
  width: var(--top-control-size);
  min-width: var(--top-control-size);
  height: var(--top-control-size);
  min-height: var(--top-control-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 253, 247, 0.72);
  color: rgba(22, 22, 22, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.38),
    0 10px 26px rgba(40, 36, 28, 0.08);
}

.menu-close span,
.menu-close span::after {
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.menu-close span {
  position: relative;
  display: block;
  transform: rotate(45deg);
}

.menu-close span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: rotate(90deg);
}

.menu-chevron {
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(91, 87, 80, 0.66);
  border-right: 2px solid rgba(91, 87, 80, 0.66);
  transform: rotate(45deg);
}

.paste-editor {
  padding: 12px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(221, 212, 195, 0.64);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.68);
  box-shadow:
    0 12px 26px rgba(40, 36, 28, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.paste-editor[hidden] {
  display: none;
}

.collection-view,
.gutenberg-view,
.settings-view,
.stats-view,
.help-view {
  display: grid;
  gap: 18px;
}

.collection-view[hidden],
.gutenberg-view[hidden],
.settings-view[hidden],
.stats-view[hidden],
.help-view[hidden] {
  display: none;
}

.collection-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.collection-header h2 {
  margin: 0;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  font-size: clamp(1.12rem, 4.2vw, 1.35rem);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-header p {
  margin: 3px 0 0;
  color: rgba(91, 87, 80, 0.72);
  font-size: 0.9rem;
}

.collection-back {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 253, 247, 0.72);
  color: rgba(22, 22, 22, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.38),
    0 10px 24px rgba(40, 36, 28, 0.07);
}

.collection-back::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(2px) rotate(45deg);
}

.collection-list {
  display: grid;
  gap: 10px;
}

.collection-item {
  width: 100%;
  min-height: 86px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(221, 212, 195, 0.68);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.72);
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(40, 36, 28, 0.06);
}

.collection-open {
  min-width: 0;
  min-height: 70px;
  padding: 2px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  background: transparent;
  color: inherit;
  text-align: left;
}

.collection-cover {
  width: 56px;
  height: 66px;
  overflow: hidden;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(81, 135, 125, 0.84), rgba(37, 92, 83, 0.92));
  color: rgba(255, 253, 247, 0.92);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.6rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.collection-cover.has-image {
  background: rgba(229, 222, 210, 0.78);
}

.collection-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.collection-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.collection-copy strong {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 620;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collection-copy small,
.collection-meta,
.collection-empty {
  color: rgba(91, 87, 80, 0.74);
  font-size: 0.82rem;
}

.collection-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(219, 211, 197, 0.8);
}

.collection-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(62, 135, 123, 0.88);
}

.collection-meta {
  align-self: end;
  padding-bottom: 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.collection-delete {
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(238, 232, 221, 0.72);
  color: rgba(142, 91, 74, 0.82);
}

.collection-delete span {
  position: relative;
  width: 16px;
  height: 17px;
  display: block;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 3px 3px;
}

.collection-delete span::before,
.collection-delete span::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.collection-delete span::before {
  left: -2px;
  right: -2px;
  top: -5px;
  height: 2px;
  border-radius: 999px;
}

.collection-delete span::after {
  left: 5px;
  top: -8px;
  width: 6px;
  height: 2px;
  border-radius: 999px;
}

.collection-empty {
  margin: 12px 0 0;
  padding: 22px;
  border: 1px dashed rgba(151, 141, 123, 0.42);
  border-radius: 14px;
  text-align: center;
}

.settings-stack {
  display: grid;
  gap: 24px;
  padding-bottom: 4px;
}

.settings-group {
  display: grid;
  gap: 8px;
}

.stats-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(238, 232, 221, 0.56);
  box-shadow: inset 0 0 0 1px rgba(221, 212, 195, 0.44);
}

.stats-tab {
  min-width: 0;
  min-height: 36px;
  padding: 0 4px;
  position: relative;
  background: transparent;
  color: rgba(91, 87, 80, 0.76);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 560;
  text-align: center;
}

.stats-tab::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
  transition:
    background 160ms ease,
    opacity 160ms ease;
}

.stats-tab.is-active {
  color: rgba(22, 22, 22, 0.9);
  background: rgba(255, 253, 247, 0.86);
  box-shadow:
    0 6px 14px rgba(40, 36, 28, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.stats-tab.is-active::after {
  background: transparent;
}

.stats-stack {
  display: grid;
  gap: 12px;
  padding-bottom: 4px;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  transition:
    opacity 520ms ease,
    visibility 520ms ease;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  animation: onboarding-arrive 520ms ease both;
}

.onboarding-overlay[hidden] {
  display: none;
}

.onboarding-overlay.is-leaving {
  opacity: 0;
  visibility: hidden;
}

.rhythm-intro-stage {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.98), rgba(247, 244, 236, 1) 62%, rgba(241, 235, 224, 0.9)),
    var(--paper);
}

.rhythm-intro-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(247, 244, 236, 0.92) 0%, rgba(247, 244, 236, 0) 24%),
    linear-gradient(180deg, rgba(247, 244, 236, 0) 72%, rgba(239, 232, 219, 0.44) 100%);
}

.rhythm-intro-brand {
  position: absolute;
  top: 43.5%;
  left: 50%;
  z-index: 2;
  width: min(520px, calc(100vw - 48px));
  padding-inline: max(16px, env(safe-area-inset-left));
  color: rgba(31, 27, 23, 0.94);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    opacity 460ms ease,
    transform 560ms cubic-bezier(0.2, 0.78, 0.26, 1);
}

.onboarding-overlay.is-leaving .rhythm-intro-brand,
.onboarding-overlay[data-step="cards"] .rhythm-intro-brand {
  opacity: 0;
  transform: translate(-50%, calc(-50% - 18px));
}

.onboarding-overlay[data-step="cards"] {
  cursor: default;
  touch-action: pan-y;
}

.onboarding-overlay[data-step="cards"] .rhythm-intro-stage {
  pointer-events: none;
}

.rhythm-intro-hint {
  margin: clamp(30px, 6vh, 44px) 0 0;
  color: rgba(91, 87, 80, 0.48);
  font-family: var(--ui-font);
  font-size: clamp(0.68rem, 3vw, 0.76rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  animation: rhythmIntroHintPulse 2400ms ease-in-out infinite;
}

@keyframes rhythmIntroHintPulse {
  0%,
  100% {
    opacity: 0.48;
    transform: translateY(0);
  }

  50% {
    opacity: 0.92;
    transform: translateY(-2px);
  }
}

.onboarding-deck {
  position: absolute;
  inset: 0;
  z-index: 4;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  padding: max(58px, env(safe-area-inset-top)) var(--screen-pad-right) max(26px, env(safe-area-inset-bottom)) var(--screen-pad-left);
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 253, 247, 0.92), rgba(247, 244, 236, 0) 52%),
    var(--paper);
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 520ms ease,
    transform 580ms cubic-bezier(0.2, 0.78, 0.26, 1);
  pointer-events: none;
}

.onboarding-overlay[data-step="cards"] .onboarding-deck {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.onboarding-track {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 100%;
  transform: translate3d(calc(var(--onboarding-index, 0) * -100%), 0, 0);
  transition: transform 420ms cubic-bezier(0.2, 0.78, 0.26, 1);
}

.onboarding-card {
  box-sizing: border-box;
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-rows: minmax(230px, 0.9fr) minmax(clamp(186px, 25vh, 238px), auto);
  justify-items: center;
  gap: clamp(24px, 5vh, 42px);
  min-width: 0;
  padding: 8px 0 clamp(36px, 5.4vh, 58px);
}

.onboarding-visual {
  position: relative;
  align-self: end;
  display: grid;
  place-items: center;
  width: min(430px, 100%);
  min-height: clamp(220px, 42vh, 360px);
}

.onboarding-copy {
  align-self: end;
  width: min(390px, 100%);
  max-width: 100%;
  min-height: clamp(186px, 25vh, 238px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  transform: translateY(0);
  transition: opacity 220ms ease;
}

.onboarding-copy.is-transitioning {
  opacity: 0;
  transform: translateY(0);
}

.onboarding-kicker {
  margin: 0 0 10px;
  color: rgba(125, 47, 42, 0.72);
  font-family: var(--ui-font);
  font-size: 0.76rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-copy h2 {
  margin: 0;
  color: rgba(31, 27, 23, 0.94);
  font-family: var(--reading-font);
  font-size: clamp(2.15rem, 9.6vw, 3.25rem);
  font-weight: 430;
  line-height: 1.05;
  letter-spacing: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.onboarding-copy p:last-child {
  margin: 15px 0 0;
  color: rgba(91, 87, 80, 0.72);
  font-family: var(--reading-font);
  font-size: clamp(1.02rem, 4vw, 1.18rem);
  font-weight: 430;
  line-height: 1.42;
}

[data-demo-context-copy] h2 {
  min-height: 2.1em;
}

[data-demo-context-copy] [data-demo-context-body] {
  min-height: 2.84em;
}

.onboarding-reader-demo {
  align-content: center;
  justify-items: center;
}

.onboarding-demo-frame {
  position: relative;
  box-sizing: border-box;
  width: min(390px, 100%);
  height: clamp(230px, 36vh, 320px);
  min-height: clamp(230px, 36vh, 320px);
  display: grid;
  place-items: center;
  padding: clamp(18px, 5vw, 28px);
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.84), rgba(255, 253, 247, 0.62) 54%, rgba(242, 236, 224, 0.52)),
    rgba(255, 253, 247, 0.62);
  box-shadow:
    0 24px 52px rgba(45, 38, 28, 0.1),
    inset 0 0 0 1px rgba(221, 212, 195, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  color: var(--ink);
  overflow: hidden;
}

button.onboarding-demo-frame,
.onboarding-demo-frame[role="button"] {
  font: inherit;
  cursor: pointer;
}

button.onboarding-demo-frame:focus,
.onboarding-demo-frame[role="button"]:focus,
.onboarding-demo-play:focus,
.onboarding-demo-mode-button:focus,
.onboarding-next:focus,
.onboarding-skip:focus,
.onboarding-dots button:focus {
  outline: none;
}

button.onboarding-demo-frame:focus-visible,
.onboarding-demo-frame[role="button"]:focus-visible,
.onboarding-demo-play:focus-visible,
.onboarding-demo-mode-button:focus-visible,
.onboarding-next:focus-visible,
.onboarding-skip:focus-visible,
.onboarding-dots button:focus-visible {
  box-shadow:
    0 0 0 3px rgba(255, 253, 247, 0.72),
    0 0 0 5px rgba(125, 47, 42, 0.26),
    0 18px 34px rgba(45, 38, 28, 0.12);
}

.onboarding-demo-word.word-display {
  --reader-font-size: clamp(3.2rem, 15vw, 5.6rem);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: min(330px, 100%);
  min-height: 1.2em;
  height: auto;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: stretch;
  font-family: var(--reading-font);
  font-size: var(--reader-font-size);
  line-height: 1;
  white-space: nowrap;
  translate: -50% -50%;
}

.onboarding-demo-word .word-pivot,
.onboarding-demo-context .context-token.is-current .context-token-pivot {
  color: var(--reader-anchor);
}

.onboarding-demo-play {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 4vh, 30px);
  z-index: 8;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.98), rgba(238, 230, 216, 0.9));
  color: rgba(31, 27, 23, 0.82);
  box-shadow:
    0 16px 30px rgba(45, 38, 28, 0.13),
    inset 0 0 0 1px rgba(221, 212, 195, 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  transform: translateX(-50%);
  isolation: isolate;
  pointer-events: auto;
}

.onboarding-demo-play::after,
.onboarding-demo-mode-button::after {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(198, 103, 59, 0.34);
  background: rgba(211, 126, 74, 0.13);
  opacity: 0;
  transform: scale(0.86);
  pointer-events: none;
}

.onboarding-card[data-demo-card="focus"].is-active .onboarding-demo-play::after {
  animation: onboardingSoftPulse 1500ms ease-out 520ms 2;
}

.onboarding-demo-play span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid currentColor;
}

.onboarding-demo-play.is-playing span {
  width: 13px;
  height: 15px;
  margin-left: 0;
  border: 0;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

.onboarding-demo-context.word-display {
  --context-font-size: clamp(1.08rem, 4.45vw, 1.55rem);
  --context-column-width: min(340px, calc(100vw - 86px));
  position: absolute;
  inset: clamp(20px, 5vw, 30px);
  z-index: 1;
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.9vh, 8px);
  align-items: center;
  justify-content: center;
  font-family: var(--reading-font);
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.965);
  pointer-events: none;
  transition:
    opacity 250ms ease,
    transform 320ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.onboarding-demo-frame.is-context-open .onboarding-demo-context {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.onboarding-demo-frame.is-context-closing .onboarding-demo-context {
  opacity: 1;
  transform: scale(1);
  pointer-events: none;
}

.onboarding-demo-frame.is-context-open .onboarding-demo-word[data-demo-context-focus] {
  opacity: 0;
  transform: translateY(-3px) scale(0.94);
  pointer-events: none;
}

.onboarding-demo-context .context-line {
  width: var(--context-column-width);
  padding-inline: 4px;
  font-size: var(--context-font-size);
}

.onboarding-demo-context .context-token {
  font-family: var(--reading-font);
  cursor: pointer;
}

.onboarding-demo-context button.context-token {
  border: 0;
  background: transparent;
  text-align: left;
}

.onboarding-demo-context .context-token.is-current {
  background: rgba(255, 231, 148, 0.5);
  box-shadow:
    inset 0 0 0 1px rgba(217, 53, 44, 0.18),
    0 0 0 3px rgba(255, 224, 132, 0.12),
    0 5px 14px rgba(217, 53, 44, 0.08);
}

.onboarding-demo-context-note {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 3vw, 18px);
  z-index: 4;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.72);
  color: rgba(91, 87, 80, 0.72);
  font-family: var(--ui-font);
  font-size: 0.66rem;
  font-weight: 680;
  letter-spacing: 0.03em;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1px rgba(221, 212, 195, 0.48),
    0 8px 18px rgba(45, 38, 28, 0.06);
  pointer-events: none;
  transform: translateX(-50%);
}

.onboarding-demo-frame.has-return-word .onboarding-demo-context-note {
  opacity: 0;
}

.onboarding-demo-return-word {
  margin: 0;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  pointer-events: none;
}

.onboarding-demo-frame.has-return-word .onboarding-demo-context {
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

.onboarding-demo-frame.has-return-word .onboarding-demo-word[data-demo-context-focus] {
  opacity: 0;
  pointer-events: none;
}

.onboarding-demo-frame.has-return-word .onboarding-demo-return-word {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity 260ms ease,
    transform 360ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.onboarding-demo-mode-top {
  position: absolute;
  top: clamp(13px, 3.4vw, 20px);
  left: clamp(14px, 4vw, 22px);
  right: clamp(12px, 3.6vw, 20px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px);
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.onboarding-demo-frame.is-mode-tutorial .onboarding-demo-mode-top {
  opacity: 1;
  transform: translateY(0);
}

.onboarding-demo-mode-top span {
  min-height: 32px;
  padding: 8px 13px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 253, 247, 0.72);
  color: rgba(31, 27, 23, 0.78);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 740;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow:
    inset 0 0 0 1px rgba(221, 212, 195, 0.42),
    0 8px 18px rgba(45, 38, 28, 0.055);
}

.onboarding-demo-mode-button {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(91, 87, 80, 0.66);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.98), rgba(238, 230, 216, 0.9));
  box-shadow:
    0 15px 28px rgba(45, 38, 28, 0.11),
    inset 0 0 0 1px rgba(221, 212, 195, 0.54),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
  isolation: isolate;
  -webkit-appearance: none;
  appearance: none;
}

.onboarding-demo-mode-button svg {
  width: 25px;
  height: 25px;
  display: block;
  stroke: currentColor;
  fill: currentColor;
  transform: translate(1.25px, 1px);
}

.onboarding-demo-mode-button.is-attention-pulse::after {
  animation: onboardingSoftPulse 1500ms ease-out 1;
}

.onboarding-demo-frame.is-focus-preview .onboarding-demo-mode-button {
  --mode-switch-opacity: 0.84;
  --mode-switch-width: 1.68;
}

.onboarding-demo-frame.is-book-preview .onboarding-demo-mode-button {
  --mode-switch-opacity: 0.9;
  --mode-switch-width: 1.82;
}

.onboarding-demo-ebook-page {
  position: absolute;
  inset: clamp(58px, 12vw, 72px) clamp(24px, 6vw, 36px) clamp(52px, 10vw, 64px);
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 0;
  color: rgba(31, 27, 23, 0.82);
  font-family: var(--reading-font);
  font-size: clamp(1.02rem, 4vw, 1.22rem);
  font-weight: 430;
  line-height: 1.36;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(0.985);
  transition:
    opacity 240ms ease,
    transform 320ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.onboarding-demo-ebook-page p {
  margin: 0;
}

.onboarding-demo-ebook-word {
  border-radius: 0.32em;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.onboarding-demo-ebook-word:hover,
.onboarding-demo-ebook-word:focus-visible {
  background: rgba(255, 231, 148, 0.28);
  outline: 0;
}

.onboarding-demo-frame.is-book-preview .onboarding-demo-return-word {
  opacity: 0;
  transform: translateY(-4px) scale(0.96);
  pointer-events: none;
}

.onboarding-demo-frame.is-book-preview .onboarding-demo-ebook-page {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.onboarding-demo-ebook-note {
  bottom: clamp(12px, 3vw, 18px);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.2, 0.78, 0.24, 1);
}

.onboarding-demo-frame.is-mode-tutorial .onboarding-demo-ebook-note {
  opacity: 1;
  transform: translate(-50%, 0);
}

.onboarding-demo-frame.is-book-preview .onboarding-demo-ebook-note {
  opacity: 1;
}

@keyframes onboardingSoftPulse {
  0% {
    opacity: 0;
    transform: scale(0.86);
  }

  28% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.62);
  }
}

.onboarding-demo-library-frame {
  align-content: center;
  justify-items: stretch;
  gap: 12px;
}

.onboarding-demo-library-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(255, 253, 247, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(221, 212, 195, 0.42),
    0 10px 22px rgba(45, 38, 28, 0.055);
}

.onboarding-demo-library-row span {
  color: rgba(125, 47, 42, 0.72);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.onboarding-demo-library-row strong {
  overflow: hidden;
  color: rgba(31, 27, 23, 0.84);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.8vw, 1.16rem);
  font-weight: 430;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-controls {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) auto minmax(96px, 1fr);
  align-items: center;
  gap: 14px;
  max-width: 520px;
  width: 100%;
  margin: 0 auto;
}

.onboarding-skip,
.onboarding-next {
  border: 0;
  min-height: 46px;
  font-family: var(--ui-font);
  font-size: 0.9rem;
  font-weight: 680;
}

.onboarding-skip {
  justify-self: start;
  padding: 0 8px;
  color: rgba(91, 87, 80, 0.7);
  background: transparent;
}

.onboarding-next {
  justify-self: end;
  min-width: 108px;
  padding: 0 18px;
  border-radius: 999px;
  color: rgba(255, 253, 247, 0.96);
  background: rgba(31, 27, 23, 0.92);
  box-shadow: 0 14px 28px rgba(45, 38, 28, 0.16);
}

.onboarding-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.onboarding-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(195, 91, 81, 0.18);
  transition:
    width 180ms ease,
    background 180ms ease;
}

.onboarding-dots button.is-active {
  width: 20px;
  background: rgba(195, 91, 81, 0.9);
}

.rithim-inline {
  color: inherit;
  font-size: 1.02em;
  white-space: nowrap;
}

/* First-use coaching popups */
.coach-layer {
  position: fixed;
  inset: 0;
  z-index: 75;
  pointer-events: none;
  opacity: 1;
  transition: none;
}

.coach-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(45, 38, 29, 0.035), rgba(30, 25, 19, 0.14)),
    rgba(34, 29, 23, 0.09);
  backdrop-filter: blur(0.7px);
  pointer-events: auto;
}

.coach-layer[data-tip="play"]::before {
  backdrop-filter: none;
  pointer-events: none;
}

.coach-layer[data-tip="play"] {
  z-index: 82;
}

.coach-layer[data-tip="context-open"]::before {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.coach-layer[data-tip="context-use"]::before {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.coach-layer[data-tip="context-resume"]::before {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.coach-layer[data-tip="ebook-switch"]::before {
  background: rgba(34, 29, 23, 0.045);
  backdrop-filter: blur(0.25px);
  pointer-events: none;
}

.coach-layer[data-tip="ebook-arrived"]::before {
  background: rgba(34, 29, 23, 0.045);
  backdrop-filter: blur(0.25px);
  pointer-events: none;
}

.coach-layer[data-tip="context-open"],
.coach-layer[data-tip="context-use"],
.coach-layer[data-tip="context-resume"] {
  z-index: 82;
}

body:has(.coach-layer[data-tip="context-open"].is-visible) .focus-stage {
  position: relative;
  z-index: 76;
}

body.is-coaching-context-open .focus-stage {
  position: relative;
  z-index: 76;
}

body.is-coaching-context-use .focus-stage {
  position: relative;
  z-index: 76;
}

body.is-coaching-context-resume .focus-stage {
  position: relative;
  z-index: 76;
}

body.is-coaching-ebook-switch #ebookModeButton {
  position: relative;
  z-index: 76;
  opacity: 1;
  color: rgba(32, 30, 27, 0.9);
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.96), rgba(247, 241, 231, 0.9) 56%, rgba(229, 218, 203, 0.82) 100%);
  box-shadow:
    0 13px 28px rgba(40, 36, 28, 0.13),
    inset 0 2px 2px rgba(255, 255, 255, 0.94),
    inset 0 -2px 5px rgba(129, 108, 82, 0.08);
  filter: none;
  animation: coachModeButtonPulse 1180ms ease-in-out infinite;
}

body.is-coaching-ebook-switch #ebookModeButton::after {
  content: none;
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.62);
  box-shadow:
    0 14px 34px rgba(54, 42, 28, 0.16),
    0 0 0 1px rgba(168, 143, 115, 0.18);
  z-index: -1;
}

body.is-coaching-play .transport-controls {
  position: relative;
  z-index: 83;
}

body.is-coaching-play .bottom-dock > :not(.controls),
body.is-coaching-play .text-size-button,
body.is-coaching-play .round-side-button,
body.is-coaching-play .control-helper {
  filter: blur(1.2px);
  opacity: 0.55;
}

body.is-coaching-play #playButton {
  filter: none;
  opacity: 1;
  animation: coachPlayButtonPulse 1180ms ease-in-out infinite;
  box-shadow:
    0 16px 34px rgba(40, 36, 28, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

@keyframes coachPlayButtonPulse {
  0%,
  100% {
    box-shadow:
      var(--play-button-rest-shadow),
      0 0 0 0 rgba(196, 70, 60, 0);
  }
  46% {
    box-shadow:
      var(--play-button-rest-shadow),
      0 0 0 4px rgba(196, 70, 60, 0.16),
      0 0 0 10px rgba(196, 70, 60, 0.07);
  }
}

@keyframes coachModeButtonPulse {
  0%,
  100% {
    box-shadow:
      0 13px 28px rgba(40, 36, 28, 0.13),
      inset 0 2px 2px rgba(255, 255, 255, 0.94),
      inset 0 -2px 5px rgba(129, 108, 82, 0.08),
      0 0 0 0 rgba(196, 70, 60, 0);
  }
  46% {
    box-shadow:
      0 13px 28px rgba(40, 36, 28, 0.13),
      inset 0 2px 2px rgba(255, 255, 255, 0.94),
      inset 0 -2px 5px rgba(129, 108, 82, 0.08),
      0 0 0 4px rgba(196, 70, 60, 0.15),
      0 0 0 10px rgba(196, 70, 60, 0.06);
  }
}

.coach-layer[hidden] {
  display: none;
}

.coach-layer.is-visible {
  opacity: 1;
}

.coach-card {
  position: absolute;
  width: min(350px, calc(100vw - 48px));
  min-height: 166px;
  padding: 27px 54px 34px 28px;
  border: 1px solid rgba(156, 134, 108, 0.11);
  border-radius: 24px;
  background: #fffdf7 !important;
  color: rgba(30, 28, 25, 0.9);
  box-shadow:
    0 26px 72px rgba(54, 42, 28, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: none;
  pointer-events: auto;
  transform: translateY(6px) scale(0.985);
  isolation: isolate;
  transition: transform 220ms cubic-bezier(0.2, 0.78, 0.26, 1);
}

.coach-layer[data-tip="context-use"] .coach-card,
.coach-layer[data-tip="context-resume"] .coach-card {
  width: min(318px, calc(100vw - 32px));
  min-height: 0;
  padding: 16px 48px 34px 18px;
  border-radius: 19px;
  background: #fffdf7;
  box-shadow:
    0 16px 42px rgba(54, 42, 28, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: none;
}

.coach-layer[data-tip="context-use"] .coach-symbol,
.coach-layer[data-tip="context-resume"] .coach-symbol {
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}

.coach-layer[data-tip="context-use"] .coach-card strong,
.coach-layer[data-tip="context-resume"] .coach-card strong {
  margin-bottom: 5px;
  font-size: clamp(0.98rem, 3.7vw, 1.12rem);
}

.coach-layer[data-tip="context-use"] .coach-card span,
.coach-layer[data-tip="context-resume"] .coach-card span {
  font-size: clamp(0.84rem, 3.1vw, 0.94rem);
  line-height: 1.36;
}

.coach-layer.is-visible .coach-card {
  transform: translateY(0) scale(1);
}

.coach-card strong,
.coach-card span {
  display: block;
}

.coach-card strong {
  margin-bottom: 9px;
  font-size: clamp(1.08rem, 4.2vw, 1.34rem);
  font-weight: 780;
  letter-spacing: 0.01em;
}

.coach-card span {
  color: rgba(80, 74, 65, 0.78);
  font-size: clamp(0.92rem, 3.4vw, 1.02rem);
  font-weight: 520;
  line-height: 1.45;
}

.coach-step {
  position: absolute;
  left: 28px;
  bottom: 16px;
  color: rgba(101, 94, 82, 0.5);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 650;
  letter-spacing: 0.08em;
}

.coach-dismiss {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(238, 232, 220, 0.82);
}

.coach-dismiss::before,
.coach-dismiss::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.7px;
  border-radius: 999px;
  background: rgba(75, 71, 65, 0.58);
}

.coach-dismiss::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.coach-dismiss::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.coach-card-play {
  left: 50%;
  transform-origin: 50% 100%;
  bottom: calc(env(safe-area-inset-bottom) + clamp(226px, 25vh, 260px));
  translate: -50% 0;
}

.coach-card-context-open {
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  width: min(318px, calc(100vw - 56px));
  min-height: 0;
  padding: 18px 50px 36px 20px;
  translate: -50% 0;
}

.coach-card-context {
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 112px);
  translate: -50% 0;
}

.coach-card-ebook {
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 136px);
  translate: -50% 0;
}

.coach-card-ebook-switch {
  right: 22px;
  top: calc(env(safe-area-inset-top) + 86px);
}

.coach-symbol {
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(235, 225, 208, 0.74);
  color: rgba(125, 47, 42, 0.75);
}

.coach-symbol-book .book-symbol {
  width: 22px;
  height: 22px;
}

.coach-symbol-mode .mode-switch-symbol {
  width: 24px;
  height: 24px;
}

.coach-symbol-play span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid currentColor;
}

.coach-symbol-tap {
  position: relative;
}

.coach-symbol-tap::before {
  content: "";
  width: 17px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 9px 9px 11px 11px;
  transform: translateY(2px);
}

.coach-symbol-tap span {
  position: absolute;
  top: 10px;
  left: 20px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.5;
}

.coach-symbol.is-pulsing span {
  animation: coachTapPulse 1250ms ease-in-out infinite;
}

@keyframes coachTapPulse {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.72);
  }
  45% {
    opacity: 0.72;
    transform: scale(1.45);
  }
}

@keyframes rhythmIntroLinger {
  0%,
  100% {
    color: rgba(125, 47, 42, 0.64);
    transform: translateY(0);
  }
  16%,
  30% {
    color: rgba(125, 47, 42, 0.9);
    transform: translateY(-1px);
  }
}

@keyframes onboarding-arrive {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes app-shell-onboarding-reveal {
  from {
    opacity: 0;
    transform: scale(0.992);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

.ebook-reader {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(7px, 1.45vh, 14px);
  padding:
    var(--screen-pad-top)
    var(--screen-pad-right)
    var(--screen-pad-bottom)
    var(--screen-pad-left);
  background: var(--reader-surface);
  color: var(--ink);
  touch-action: none;
  overflow: hidden;
}

.ebook-reader[hidden] {
  display: none;
}

.ebook-top-bar {
  position: relative;
  z-index: 66;
  display: grid;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: var(--top-control-size);
}

.ebook-title-block {
  --chapter-title-y-offset: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  min-width: 0;
  width: min(58vw, 380px);
  max-width: calc(100% - 144px);
  display: grid;
  gap: 2px;
  justify-items: center;
  color: rgba(22, 22, 22, 0.58);
  text-align: center;
  transform: translate(-50%, calc(-50% + var(--chapter-title-y-offset)));
}

.ebook-title-block span {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--ui-font);
  font-size: clamp(0.8rem, 2.8vw, 0.94rem);
  font-style: normal;
  font-weight: 690;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ebook-title-block small {
  max-width: 100%;
  overflow: hidden;
  color: rgba(91, 87, 80, 0.56);
  font-family: var(--reading-font);
  font-size: clamp(0.75rem, 2.35vw, 0.86rem);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ebook-page-shell {
  position: relative;
  min-height: 0;
  display: grid;
  align-items: stretch;
  justify-items: center;
  width: 100%;
  overflow: hidden;
}

.ebook-page {
  width: min(640px, 100%);
  height: 100%;
  min-height: 0;
  padding:
    clamp(16px, 2.8vh, 30px)
    clamp(20px, 7.4vw, 50px)
    clamp(8px, 1.35vh, 16px);
  overflow: hidden;
  font-family: var(--reading-font);
  font-size: var(--ebook-font-size);
  line-height: var(--reader-line-height, 1.58);
  color: rgba(22, 22, 22, 0.92);
  text-align: left;
  text-rendering: optimizeLegibility;
}

.ebook-page.is-entering-next {
  animation: ebook-page-enter-next var(--motion-fast) both;
}

.ebook-page.is-entering-prev {
  animation: ebook-page-enter-prev var(--motion-fast) both;
}

@keyframes ebook-page-enter-next {
  from {
    opacity: 0.72;
    transform: translate3d(12px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ebook-page-enter-prev {
  from {
    opacity: 0.72;
    transform: translate3d(-12px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ebook-page-exit-next {
  0% {
    opacity: 1;
    transform: translateX(-50%);
  }

  58% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateX(calc(-50% - 18px));
  }
}

@keyframes ebook-page-exit-prev {
  0% {
    opacity: 1;
    transform: translateX(-50%);
  }

  58% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateX(calc(-50% + 18px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .rhythm-intro-emphasis,
  .rhythm-intro-hint {
    animation: none;
  }

  .word-display.has-context.is-context-revealing .context-line,
  .word-display.has-context.is-context-revealing .context-sentence-card,
  .word-display.has-context.is-context-revealing .context-token:not(.is-current),
  .word-display.has-context.is-context-exiting .context-line,
  .word-display.has-context.is-context-exiting .context-sentence-card,
  .word-display.has-context.is-context-exiting .context-token:not(.is-current),
  .ebook-page.is-entering-next,
  .ebook-page.is-entering-prev,
  .ebook-page-ghost.is-exiting-next,
  .ebook-page-ghost.is-exiting-prev,
  .onboarding-card[data-demo-card="focus"].is-active .onboarding-demo-play::after,
  .onboarding-demo-mode-button.is-attention-pulse::after {
    animation: none !important;
  }
}

.ebook-measure-page {
  position: fixed;
  top: 0;
  left: -10000px;
  min-height: 0;
  visibility: hidden;
  pointer-events: none;
  contain: layout style paint;
}

.ebook-page-title {
  margin: clamp(4px, 1vh, 10px) 0 clamp(20px, 3.8vh, 34px);
  color: var(--ink);
  font-family: var(--reading-font);
  font-size: clamp(1.28rem, 5.6vw, 2.05rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
}

.ebook-page-title.is-letter-title {
  margin-bottom: clamp(10px, 2vh, 18px);
  color: var(--ink);
  font-size: clamp(1.05rem, 4.6vw, 1.54rem);
  font-style: italic;
  font-weight: 500;
}

.ebook-page-title.is-epub-front-title {
  margin: clamp(12px, 3vh, 34px) 0 clamp(22px, 4vh, 48px);
  color: var(--ink);
  font-family: var(--ui-font);
  font-size: clamp(1.05rem, 4.4vw, 1.55rem);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ebook-paragraph {
  margin: 0 0 0.78em;
}

.ebook-paragraph:last-child {
  margin-bottom: 0;
}

.ebook-paragraph.is-letter-title,
.ebook-paragraph.is-letter-recipient,
.ebook-paragraph.is-letter-date {
  text-align: center;
}

.ebook-paragraph.is-letter-title {
  margin: 0.15em 0 0.62em;
  color: var(--ink);
  font-size: 0.94em;
  font-style: italic;
  font-weight: 600;
}

.ebook-paragraph.is-letter-recipient {
  margin: 0 0 0.7em;
  color: rgba(74, 68, 60, 0.72);
  font-size: 0.86em;
  font-style: italic;
  line-height: 1.45;
}

.ebook-paragraph.is-letter-date {
  margin: 0 0 1.05em;
  color: rgba(118, 105, 91, 0.72);
  font-size: 0.82em;
  line-height: 1.4;
}

.ebook-paragraph.is-epub-align-center {
  text-align: center;
}

.ebook-paragraph.is-epub-align-right {
  text-align: right;
}

.ebook-paragraph.is-epub-align-justify {
  text-align: justify;
}

.ebook-paragraph.is-epub-blockquote {
  margin: 0.2em clamp(12px, 5vw, 42px) 1em;
  color: rgba(57, 52, 45, 0.78);
  font-size: 0.94em;
  font-style: italic;
  line-height: 1.52;
}

.ebook-paragraph.is-epub-verse {
  /*
   * Publisher margins describe the verse block's existing offset, so stacking
   * them on top of the reader indent can push poems beyond a narrow page.
   * Preserve whichever block offset is larger, add only true line indentation,
   * and leave a useful measure for unusually indented source lines.
   */
  --epub-verse-indent: min(
    calc(
      max(clamp(24px, 8vw, 68px), var(--epub-publisher-margin-left, 0em)) +
      var(--epub-source-indent, 0em)
    ),
    30%
  );
  margin: 0.12em 0 0.58em var(--epub-verse-indent);
  color: rgba(46, 42, 36, 0.86);
  font-size: 0.94em;
  line-height: 1.36;
  text-align: left;
}

.ebook-paragraph.is-epub-drama {
  margin: 0 0 0.22em;
  color: rgba(42, 39, 34, 0.88);
  font-size: 0.96em;
  line-height: 1.46;
  text-align: left;
}

.ebook-paragraph.is-epub-speaker {
  margin: 0.72em 0 0.12em;
  color: rgba(35, 33, 30, 0.9);
  font-family: var(--ui-font);
  font-size: 0.9em;
  font-weight: 660;
  letter-spacing: 0.04em;
  line-height: 1.28;
  text-transform: uppercase;
}

.ebook-paragraph.is-epub-stage-direction {
  margin: 0.72em clamp(14px, 5.2vw, 44px) 0.9em;
  color: rgba(50, 46, 41, 0.86);
  font-size: 0.94em;
  font-style: italic;
  line-height: 1.45;
  text-align: center;
}

.ebook-paragraph.is-epub-list-item {
  position: relative;
  margin: 0 0 0.48em;
  padding-inline-start: calc(1.55em + var(--epub-list-level, 0) * 1.15em);
}

.ebook-paragraph.is-epub-list-item::before {
  content: attr(data-list-marker);
  position: absolute;
  inset-inline-start: calc(var(--epub-list-level, 0) * 1.15em);
  width: 1.15em;
  color: rgba(113, 89, 77, 0.78);
  font-family: var(--ui-font);
  font-size: 0.82em;
  font-weight: 650;
  text-align: end;
}

.ebook-paragraph.is-epub-table-header,
.ebook-paragraph.is-epub-table-row {
  margin: 0;
  padding: 0.52em 0.7em;
  border-bottom: 1px solid rgba(102, 91, 77, 0.16);
  font-family: var(--ui-font);
  font-size: 0.78em;
  line-height: 1.42;
}

.ebook-paragraph.is-epub-table-header {
  border-radius: 8px 8px 0 0;
  background: rgba(103, 91, 75, 0.08);
  font-weight: 700;
}

.ebook-paragraph.is-epub-code {
  margin: 0.34em 0 0.72em;
  padding: 0.65em 0.76em 0.65em calc(0.76em + var(--epub-source-indent, 0em));
  border: 1px solid rgba(89, 83, 75, 0.14);
  border-radius: 8px;
  background: rgba(94, 88, 80, 0.055);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.76em;
  line-height: 1.45;
}

.ebook-paragraph.is-epub-aside,
.ebook-paragraph.is-epub-diagram,
.ebook-paragraph.is-epub-equation {
  margin: 0.4em 0 0.92em;
  padding: 0.72em 0.85em;
  border-inline-start: 3px solid rgba(91, 112, 143, 0.42);
  border-radius: 0 8px 8px 0;
  background: rgba(91, 112, 143, 0.06);
  color: rgba(54, 51, 47, 0.82);
  font-size: 0.88em;
  line-height: 1.48;
}

.ebook-paragraph.is-epub-line-fragment {
  margin: 0 0 0.06em;
  line-height: 1.32;
}

.ebook-paragraph.is-epub-verse.is-epub-line-fragment {
  margin-left: var(--epub-verse-indent);
  margin-bottom: 0;
  line-height: 1.31;
}

.ebook-paragraph.is-epub-line-fragment + .ebook-paragraph.is-epub-line-fragment {
  margin-top: -0.04em;
}

.ebook-paragraph.has-epub-break-before {
  margin-top: clamp(28px, 6vh, 76px);
}

.ebook-paragraph.is-epub-verse.has-epub-break-before {
  margin-top: 0.82em;
}

.ebook-paragraph.has-epub-break-after {
  margin-bottom: clamp(24px, 5vh, 66px);
}

.ebook-paragraph.is-epub-heading-1,
.ebook-paragraph.is-epub-heading-2,
.ebook-paragraph.is-epub-heading-3,
.ebook-paragraph.is-epub-heading-4,
.ebook-paragraph.is-epub-heading-5,
.ebook-paragraph.is-epub-heading-6 {
  color: var(--ink);
  font-family: var(--ui-font);
  font-weight: 600;
  letter-spacing: 0.075em;
  line-height: 1.34;
  text-align: center;
  text-transform: uppercase;
}

.ebook-paragraph.is-epub-heading-1 {
  margin: clamp(20px, 4.8vh, 56px) 0 clamp(18px, 4vh, 44px);
  font-size: 1.18em;
}

.ebook-paragraph.is-epub-heading-2 {
  margin: clamp(18px, 4vh, 46px) 0 clamp(14px, 3vh, 34px);
  color: var(--ink);
  font-size: 1.12em;
  font-weight: 680;
}

.ebook-paragraph.is-epub-heading-3,
.ebook-paragraph.is-epub-heading-4,
.ebook-paragraph.is-epub-heading-5,
.ebook-paragraph.is-epub-heading-6 {
  margin: clamp(12px, 3vh, 34px) 0 clamp(10px, 2.4vh, 26px);
  color: var(--ink);
  font-size: 1em;
  font-weight: 680;
  letter-spacing: 0.035em;
}

.ebook-paragraph.is-epub-italic {
  font-style: italic;
}

.ebook-paragraph.is-epub-bold {
  font-weight: 600;
}

.ebook-paragraph.is-epub-small-caps {
  font-variant-caps: small-caps;
  letter-spacing: 0.035em;
}

.ebook-illustration {
  min-height: 0;
  margin: clamp(10px, 2.1vh, 22px) 0 clamp(12px, 2.4vh, 26px);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  page-break-inside: avoid;
  break-inside: avoid;
}

.ebook-illustration-button {
  max-width: min(100%, 430px);
  padding: 0;
  border: 0;
  border-radius: 4px;
  display: block;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  touch-action: manipulation;
  transform: translateY(0) scale(1);
  transition: transform 150ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

.ebook-illustration img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: min(30vh, 300px);
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 22px rgba(45, 36, 25, 0.09);
  transition: box-shadow 150ms cubic-bezier(0.2, 0.72, 0.24, 1);
}

.ebook-illustration-button:focus-visible {
  outline: 3px solid rgba(95, 143, 129, 0.28);
  outline-offset: 6px;
}

.ebook-illustration[style*="--ebook-illustration-ratio"] img {
  aspect-ratio: var(--ebook-illustration-ratio);
}

.ebook-illustration figcaption {
  max-width: 38ch;
  color: rgba(91, 82, 70, 0.68);
  font-family: var(--ui-font);
  font-size: 0.66em;
  line-height: 1.36;
  text-align: center;
}

.ebook-paragraph.is-epub-image-caption {
  max-width: 42ch;
  margin: -0.34em auto 1.05em;
  color: rgba(91, 82, 70, 0.68);
  font-family: var(--ui-font);
  font-size: 0.66em;
  font-style: italic;
  line-height: 1.36;
  text-align: center;
}

.ebook-illustration + .ebook-paragraph.is-epub-image-caption {
  margin-top: -0.62em;
}

.ebook-paragraph.is-epub-image-caption + .ebook-paragraph {
  margin-top: 1.05em;
}

.ebook-word {
  position: relative;
  border-radius: 0.24em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition:
    background 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
  white-space: nowrap;
}

.ebook-word.is-epub-italic {
  font-style: italic;
}

.ebook-word.is-epub-bold {
  font-weight: 600;
}

.ebook-word.is-epub-small-caps {
  font-variant-caps: small-caps;
  letter-spacing: 0.025em;
}

.ebook-word.is-epub-code,
.context-token.is-epub-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
}

.ebook-word.is-epub-superscript,
.context-token.is-epub-superscript {
  position: relative;
  top: -0.38em;
  font-size: 0.72em;
}

.ebook-word.is-epub-subscript,
.context-token.is-epub-subscript {
  position: relative;
  top: 0.22em;
  font-size: 0.72em;
}

.ebook-word.is-dialogue {
  color: var(--dialogue-word-color, rgb(82, 55, 45));
}

/* Dialogue colour alone marks speech; generic (unnamed) dialogue and inner
 * thought carry no underline so the page reads as clean book text. */
.context-token.is-internal-thought,
.ebook-word.is-internal-thought {
  font-style: italic;
}

.ebook-word.is-current {
  color: var(--reader-anchor);
  background: rgba(217, 53, 44, 0.085);
  box-shadow:
    0 0 0 0.13em rgba(217, 53, 44, 0.07),
    inset 0 -0.07em 0 rgba(217, 53, 44, 0.28);
  font-weight: inherit;
}

.ebook-word.is-current::after {
  content: "";
  position: absolute;
  left: 0.08em;
  right: 0.08em;
  bottom: -0.08em;
  height: 0.045em;
  border-radius: 999px;
  background: rgba(217, 53, 44, 0.16);
  pointer-events: none;
}

.book-note-marker {
  margin: 0 0.08em 0 0.12em;
  padding: 0.04em 0.28em 0.03em;
  border: 1px solid rgba(199, 67, 58, 0.22);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: super;
  background: rgba(199, 67, 58, 0.075);
  color: rgba(157, 55, 48, 0.82);
  font-family: var(--ui-font);
  font-size: 0.5em;
  font-weight: 720;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}

.book-note-marker.is-context-note {
  margin-left: 0.04em;
  padding-inline: 0.22em;
  border-color: rgba(199, 67, 58, 0.18);
  background: rgba(199, 67, 58, 0.06);
  color: rgba(142, 55, 49, 0.72);
  font-size: 0.34em;
  transform: translateY(-0.22em);
}

.book-note-marker:active {
  border-color: rgba(199, 67, 58, 0.34);
  background: rgba(199, 67, 58, 0.12);
  color: rgba(132, 45, 39, 0.92);
}

.pdf-source-marker {
  margin: 0 0.24em 0.08em 0;
  padding: 0.12em 0.44em 0.1em;
  border: 1px solid rgba(91, 128, 115, 0.24);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: 0.14em;
  background: rgba(91, 128, 115, 0.075);
  color: rgba(78, 103, 94, 0.78);
  font-family: var(--ui-font);
  font-size: 0.43em;
  font-weight: 680;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}

.pdf-source-marker.is-context-source {
  margin-right: 0.18em;
  padding-inline: 0.34em;
  border-color: rgba(91, 128, 115, 0.18);
  background: rgba(91, 128, 115, 0.055);
  color: rgba(78, 103, 94, 0.66);
  font-size: 0.32em;
  transform: translateY(-0.18em);
}

.pdf-source-marker:active {
  border-color: rgba(91, 128, 115, 0.34);
  background: rgba(91, 128, 115, 0.12);
  color: rgba(61, 91, 80, 0.92);
}

.ebook-bottom-bar {
  position: relative;
  width: min(640px, 100%);
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: rgba(91, 87, 80, 0.72);
  padding: 0 clamp(10px, 3vw, 22px) 1px;
}

.ebook-bottom-bar:has(.ebook-bottom-actions .bottom-mode-button:not([hidden])) {
  padding-right: calc(clamp(10px, 3vw, 22px) + (var(--bottom-control-size) * 2) + 20px);
}

.ebook-bottom-actions {
  position: absolute;
  right: clamp(10px, 3vw, 22px);
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  transform: translateY(-50%);
}

.ebook-bottom-actions .bottom-mode-button[hidden] {
  display: none;
}

.ebook-pdf-toggle-button {
  position: static;
  right: auto;
  top: auto;
  z-index: auto;
  transform: none;
}

.ebook-pdf-toggle-button.is-open,
.ebook-pdf-toggle-button[aria-pressed="true"] {
  transform: translateY(1px) scale(var(--ui-press-scale));
}

.ebook-progress-row {
  order: 2;
  display: flex;
  justify-content: flex-start;
  gap: 12px;
  font-family: var(--ui-font);
  font-size: var(--progress-meta-size);
  font-weight: 450;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.ebook-progress-track {
  order: 1;
  position: relative;
  height: 18px;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
}

.ebook-progress-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--progress-height);
  border-radius: inherit;
  background: var(--progress-track-soft);
  transform: translateY(-50%);
}

.ebook-progress-fill {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0%;
  height: var(--progress-height);
  border-radius: inherit;
  background: var(--progress-fill-soft);
  pointer-events: none;
  transform: translateY(-50%);
  transition: width 120ms linear;
}

.ebook-progress-track:focus-visible::before {
  box-shadow: 0 0 0 5px rgba(95, 143, 129, 0.14);
}

.ebook-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding:
    max(26px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(246, 242, 234, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--ink);
}

.ebook-image-viewer[hidden] {
  display: none;
}

.ebook-image-viewer-frame {
  width: min(100%, 760px);
  max-height: 86vh;
  margin: 0;
  display: grid;
  gap: 14px;
  justify-items: center;
}

.ebook-image-viewer-frame img {
  display: block;
  max-width: 100%;
  max-height: min(78vh, 860px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 22px 52px rgba(45, 36, 25, 0.18);
}

.ebook-image-viewer-frame figcaption {
  max-width: 52ch;
  color: rgba(76, 68, 58, 0.72);
  font-family: var(--ui-font);
  font-size: 0.88rem;
  line-height: 1.45;
  text-align: center;
}

.ebook-image-viewer-close {
  position: fixed;
  top: max(18px, calc(env(safe-area-inset-top) + 10px));
  left: max(18px, calc(env(safe-area-inset-left) + 12px));
  width: var(--top-control-size);
  height: var(--top-control-size);
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.74);
  color: rgba(45, 42, 37, 0.64);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.5),
    0 14px 34px rgba(40, 36, 28, 0.1);
  cursor: pointer;
}

.ebook-image-viewer-close::before,
.ebook-image-viewer-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.ebook-image-viewer-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ebook-image-viewer-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ebook-image-viewer-close:focus-visible {
  outline: 3px solid rgba(95, 143, 129, 0.2);
  outline-offset: 4px;
}

.ebook-page.is-empty {
  display: grid;
  place-items: center;
  padding: 0 clamp(22px, 8vw, 48px);
}

.chapter-panel {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: var(--ink);
  touch-action: none;
}

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

.pdf-page-panel {
  position: fixed;
  inset: 0;
  z-index: 135;
  display: grid;
  place-items: end center;
  padding:
    0 max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(28, 24, 18, 0.16);
  color: var(--ink);
}

.pdf-page-panel[hidden] {
  display: none;
}

.pdf-page-sheet {
  position: relative;
  width: min(430px, 100%);
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px auto;
  gap: 12px;
  align-items: end;
  border: 1px solid rgba(222, 214, 201, 0.62);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% -16%, rgba(255, 255, 255, 0.84), transparent 48%),
    rgba(249, 244, 235, 0.98);
  box-shadow:
    0 24px 70px rgba(40, 34, 25, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.pdf-page-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.7);
  color: rgba(91, 87, 80, 0.62);
}

.pdf-page-close::before,
.pdf-page-close::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 13px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
}

.pdf-page-close::before {
  transform: rotate(45deg);
}

.pdf-page-close::after {
  transform: rotate(-45deg);
}

.pdf-page-copy {
  min-width: 0;
  padding-right: 18px;
}

.pdf-page-copy p {
  margin: 0 0 4px;
  font-family: var(--serif-font);
  font-size: 1.28rem;
  font-weight: 640;
}

.pdf-page-copy small,
.pdf-page-status {
  color: rgba(91, 87, 80, 0.68);
  font-family: var(--ui-font);
  font-size: 0.82rem;
  line-height: 1.28;
}

.pdf-page-input-wrap {
  display: grid;
  gap: 5px;
  color: rgba(91, 87, 80, 0.66);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.pdf-page-input-wrap input {
  width: 100%;
  height: 42px;
  border: 1px solid rgba(221, 212, 195, 0.84);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.82);
  color: var(--ink);
  font: 680 1rem var(--ui-font);
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 2px rgba(40, 34, 25, 0.05);
}

.pdf-page-submit {
  height: 42px;
  min-width: 52px;
  border: 0;
  border-radius: 999px;
  background: rgba(168, 83, 75, 0.9);
  color: #fffaf5;
  font: 720 0.9rem var(--ui-font);
  box-shadow: 0 10px 22px rgba(168, 83, 75, 0.18);
}

.pdf-page-status {
  grid-column: 1 / -1;
  min-height: 1em;
  margin: -4px 0 0;
}

.chapter-sheet {
  width: 100%;
  height: calc(100dvh - max(156px, calc(env(safe-area-inset-top) + 126px)));
  max-height: 700px;
  padding:
    18px max(18px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 16px;
  overflow: hidden;
  border: 1px solid rgba(222, 214, 201, 0.54);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 28px 28px 0 0;
  background:
    radial-gradient(circle at 50% -4%, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(180deg, rgba(250, 246, 238, 0.99), rgba(241, 234, 221, 0.99));
  box-shadow:
    0 -18px 54px rgba(40, 34, 25, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  touch-action: pan-y;
}

.chapter-menu-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.chapter-menu-header > [hidden] {
  display: block !important;
  visibility: hidden;
  pointer-events: none;
}

.chapter-menu-header h2 {
  margin: 0;
  color: rgba(45, 39, 31, 0.84);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  font-size: clamp(0.94rem, 2.75vw, 1.06rem);
  font-weight: 720;
  letter-spacing: 0.01em;
  text-align: center;
}

.chapter-close-button span,
.chapter-close-button span::after {
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.chapter-close-button span {
  position: relative;
  display: block;
  transform: rotate(45deg);
}

.chapter-close-button span::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: rotate(90deg);
}

.chapter-book-cover {
  width: 56px;
  height: 76px;
  overflow: hidden;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(112, 151, 139, 0.94), rgba(221, 209, 188, 0.96));
  color: rgba(255, 253, 247, 0.96);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.68rem;
  box-shadow:
    0 10px 22px rgba(40, 36, 28, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.chapter-book-cover.has-image {
  background: rgba(238, 232, 221, 0.7);
}

.chapter-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chapter-book-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.chapter-book-copy strong {
  overflow: hidden;
  color: rgba(32, 28, 23, 0.9);
  font-family: var(--ui-font);
  font-size: clamp(1.08rem, 3.9vw, 1.3rem);
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-book-copy small {
  color: rgba(91, 82, 70, 0.66);
  font-size: 0.86rem;
  font-weight: 470;
}

.chapter-list {
  display: grid;
  gap: 0;
  overflow: auto;
  padding: 0;
  border: 1px solid rgba(214, 204, 187, 0.48);
  border-radius: 20px;
  background: rgba(255, 252, 244, 0.66);
  box-shadow:
    0 14px 30px rgba(40, 34, 25, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  scrollbar-width: none;
}

.chapter-list::-webkit-scrollbar {
  display: none;
}

.chapter-option {
  min-height: 64px;
  border: 0;
  border-bottom: 1px solid rgba(219, 209, 192, 0.34);
  border-radius: 0;
  padding: 11px 12px 11px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 12px;
  align-items: center;
  background: rgba(255, 253, 248, 0.22);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  text-align: left;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.chapter-option:first-child {
  border-radius: 17px 17px 0 0;
}

.chapter-option:last-child {
  border-bottom: 0;
  border-radius: 0 0 17px 17px;
}

.chapter-option:only-child {
  border-radius: 17px;
}

.chapter-option.is-current {
  background: rgba(217, 53, 44, 0.085);
  box-shadow:
    inset 3px 0 0 rgba(217, 53, 44, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.chapter-option-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.chapter-option-copy strong {
  overflow: hidden;
  color: rgba(22, 22, 22, 0.86);
  font-family: var(--ui-font);
  font-size: 0.92rem;
  font-weight: 620;
  letter-spacing: 0.002em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-option-copy small {
  color: rgba(91, 87, 80, 0.62);
  font-size: 0.74rem;
  font-weight: 480;
}

.chapter-option-status {
  width: 21px;
  height: 21px;
  justify-self: end;
  border: 1.5px solid rgba(151, 141, 123, 0.28);
  border-radius: 50%;
}

@media (hover: none), (pointer: coarse) {
  #prevButton:hover,
  #nextButton:hover,
  #prevButton:focus,
  #nextButton:focus,
  #prevButton:focus-visible,
  #nextButton:focus-visible {
    background:
      radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82), rgba(241, 235, 224, 0.9) 48%, rgba(221, 211, 196, 0.86) 100%) !important;
    color: rgba(67, 63, 57, 0.94) !important;
    filter: none !important;
    outline: none !important;
    transform: none !important;
    box-shadow:
      0 8px 15px rgba(40, 36, 28, 0.1),
      inset 0 2px 2px rgba(255, 255, 255, 0.9),
      inset 0 -3px 6px rgba(129, 108, 82, 0.11) !important;
  }
}

.chapter-option.is-complete .chapter-option-status {
  border-color: rgba(62, 135, 123, 0.52);
  background: rgba(62, 135, 123, 0.08);
}

.chapter-option.is-complete .chapter-option-status::before {
  content: "";
  display: block;
  width: 9px;
  height: 5px;
  margin: 5px auto 0;
  border-left: 2px solid rgba(62, 135, 123, 0.82);
  border-bottom: 2px solid rgba(62, 135, 123, 0.82);
  transform: rotate(-45deg);
}

.chapter-option.is-current .chapter-option-status {
  position: relative;
  border-color: transparent;
  background: transparent;
}

.chapter-option.is-current .chapter-option-status::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(217, 53, 44, 0.82);
  box-shadow: 0 0 0 4px rgba(217, 53, 44, 0.08);
  transform: translate(-50%, -50%);
}

.chapter-sheet {
  --MODAL_PADDING_X: 24px;
  --TIMELINE_X: 8px;
  --CONTENT_X: 46px;
  --ROW_HEIGHT: 56px;
  --HEADER_COVER_SIZE: 52px;
  --CURRENT_ROW_RADIUS: 8px;
  --TIMELINE_COLUMN_WIDTH: 46px;
  --CHEVRON_COLUMN_WIDTH: 32px;
  --CHEVRON_GUTTER: 12px;
  position: relative;
  height: calc(100dvh - max(150px, calc(env(safe-area-inset-top) + 116px)));
  max-height: 780px;
  padding:
    26px max(var(--MODAL_PADDING_X), env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(var(--MODAL_PADDING_X), env(safe-area-inset-left));
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 0;
  border: 1px solid rgba(232, 224, 211, 0.72);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(180deg, rgba(250, 247, 240, 0.995), rgba(243, 236, 224, 0.995));
  box-shadow:
    0 -22px 58px rgba(40, 34, 25, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.chapter-sheet::before {
  content: none;
  position: absolute;
  top: 13px;
  left: 50%;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: rgba(178, 165, 145, 0.26);
  transform: translateX(-50%);
}

.chapter-menu-header {
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  gap: 12px;
  margin: 0 0 0;
}

.chapter-menu-header h2 {
  color: rgba(22, 22, 22, 0.92);
  font-family: var(--reading-font);
  font-size: clamp(1.44rem, 5vw, 1.74rem);
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.08;
}

.chapter-book-cover {
  width: var(--HEADER_COVER_SIZE);
  height: calc(var(--HEADER_COVER_SIZE) * 1.42);
  margin-left: 0;
  border-radius: 8px;
  font-size: clamp(1.12rem, 3.7vw, 1.46rem);
  box-shadow:
    0 13px 26px rgba(40, 36, 28, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.chapter-book-copy {
  gap: 7px;
}

.chapter-book-copy strong {
  color: rgba(22, 22, 22, 0.91);
  font-size: clamp(1.08rem, 4vw, 1.34rem);
  font-weight: 650;
  line-height: 1.14;
  transform: translateY(-2px);
}

.chapter-book-copy small {
  color: rgba(91, 87, 80, 0.68);
  font-family: var(--ui-font);
  font-size: clamp(0.64rem, 2vw, 0.74rem);
  font-weight: 500;
  letter-spacing: 0.005em;
}

.chapter-list {
  position: relative;
  gap: 0;
  margin-top: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: auto;
}

.chapter-list::before {
  content: none;
}

.chapter-option {
  --chapter-line-tone: rgba(215, 205, 188, 0.48);
  --chapter-line-width: 1.5px;
  --chapter-line-offset: 0.75px;
  --chapter-line-paint:
    linear-gradient(to bottom, var(--chapter-line-tone), var(--chapter-line-tone));
  position: relative;
  z-index: 1;
  height: var(--ROW_HEIGHT);
  min-height: var(--ROW_HEIGHT);
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 0;
  display: grid;
  grid-template-columns:
    var(--TIMELINE_COLUMN_WIDTH)
    minmax(0, 1fr)
    var(--CHEVRON_COLUMN_WIDTH)
    var(--CHEVRON_GUTTER);
  column-gap: 0;
  row-gap: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  overflow: visible;
  cursor: pointer;
  transition: none;
  -webkit-tap-highlight-color: transparent;
}

.chapter-option:active,
.chapter-option:focus,
.chapter-option:focus-visible {
  transform: none;
  outline: 0;
  box-shadow: none;
}

.chapter-option:first-child,
.chapter-option:last-child,
.chapter-option:only-child {
  border-radius: 0;
}

.chapter-option:first-child {
  --chapter-line-paint:
    linear-gradient(to bottom, transparent 0%, var(--chapter-line-tone) 20%, var(--chapter-line-tone) 100%);
}

.chapter-option:last-child {
  --chapter-line-paint:
    linear-gradient(to bottom, var(--chapter-line-tone) 0%, var(--chapter-line-tone) 80%, transparent 100%);
}

.chapter-option:only-child {
  --chapter-line-paint:
    linear-gradient(to bottom, transparent 0%, var(--chapter-line-tone) 22%, var(--chapter-line-tone) 78%, transparent 100%);
}

.chapter-option::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  left: calc(var(--CONTENT_X) - 16px);
  z-index: 0;
  border-radius: var(--CURRENT_ROW_RADIUS);
  background: transparent;
  pointer-events: none;
  transition: none;
}

.chapter-option::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--TIMELINE_X) - var(--chapter-line-offset));
  z-index: 1;
  width: var(--chapter-line-width);
  border-radius: 999px;
  background: var(--chapter-line-paint);
  pointer-events: none;
}

.chapter-option:not(:last-child) {
  background:
    linear-gradient(rgba(215, 205, 188, 0.46), rgba(215, 205, 188, 0.46))
      left calc(var(--CONTENT_X) - 8px) bottom / calc(100% - var(--CONTENT_X) - 16px) 1px no-repeat;
}

.chapter-option.is-current::before {
  background: rgba(198, 58, 54, 0.075);
}

.chapter-option.is-current {
  --chapter-line-width: 1.7px;
  --chapter-line-offset: 0.85px;
  --chapter-line-paint:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(198, 58, 54, 0.14) 8%,
      rgba(198, 58, 54, 0.62) 28%,
      rgba(198, 58, 54, 0.62) 72%,
      rgba(198, 58, 54, 0.14) 92%,
      transparent 100%
    );
  background: transparent;
  box-shadow: none;
}

.chapter-option.is-current::after {
  box-shadow:
    0 0 10px rgba(198, 58, 54, 0.26),
    0 0 18px rgba(198, 58, 54, 0.12);
}

.chapter-option.is-current:not(:last-child) {
  background:
    linear-gradient(rgba(215, 205, 188, 0.46), rgba(215, 205, 188, 0.46))
      left calc(var(--CONTENT_X) - 8px) bottom / calc(100% - var(--CONTENT_X) - 16px) 1px no-repeat;
}

.chapter-option.is-current .chapter-option-chevron {
  color: rgba(188, 49, 41, 0.92);
}

.chapter-option-copy {
  position: relative;
  z-index: 1;
  grid-column: 2;
  min-width: 0;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 0 0 0 0;
}

.chapter-option-copy strong {
  overflow: hidden;
  color: rgba(28, 27, 25, 0.8);
  font-family: var(--reading-font);
  font-size: clamp(0.91rem, 3.08vw, 1.02rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.003em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-option-copy small {
  color: rgba(91, 87, 80, 0.56);
  font-family: var(--ui-font);
  font-size: clamp(0.62rem, 2vw, 0.72rem);
  font-weight: 500;
  letter-spacing: 0.005em;
}

.chapter-option-status {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: start;
  width: 12px;
  height: 12px;
  margin-left: calc(var(--TIMELINE_X) - 6px);
  border: 1.25px solid rgba(215, 205, 188, 0.54);
  border-radius: 50%;
  background: rgba(248, 244, 235, 0.99);
  box-shadow: none;
}

.chapter-option-status::before,
.chapter-option-status::after {
  content: none;
}

.chapter-option-status::before {
  bottom: calc(100% + 4px);
}

.chapter-option-status::after {
  top: calc(100% + 4px);
}

.chapter-option.is-complete .chapter-option-status::before,
.chapter-option.is-current .chapter-option-status::before {
  content: none;
}

.chapter-option.is-complete .chapter-option-status::after,
.chapter-option.is-current .chapter-option-status::after {
  content: none;
}

.chapter-option:first-child .chapter-option-status::before,
.chapter-option:last-child .chapter-option-status::after {
  display: none;
}

.chapter-status-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
}

.chapter-option.is-complete .chapter-option-status {
  width: 14px;
  height: 14px;
  margin-left: calc(var(--TIMELINE_X) - 7px);
  border-width: 1.6px;
  border-color: rgba(62, 135, 123, 0.72);
  background: rgba(248, 244, 235, 0.99);
}

.chapter-option.is-complete .chapter-status-mark::before {
  content: "✓";
  color: rgba(62, 135, 123, 0.9);
  font-family: var(--ui-font);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(0.7px);
}

.chapter-option.is-current .chapter-option-status {
  width: 14px;
  height: 14px;
  margin-left: calc(var(--TIMELINE_X) - 7px);
  border-width: 1.6px;
  border-color: rgba(188, 54, 48, 0.3);
  background: rgba(248, 244, 235, 0.99);
}

.chapter-option.is-current .chapter-status-mark::before {
  content: "";
  width: 7px;
  height: 6px;
  border-radius: 50%;
  background: rgba(188, 54, 48, 0.86);
  box-shadow:
    0 0 0 3px rgba(188, 54, 48, 0.07);
}

.chapter-option-chevron {
  position: relative;
  z-index: 1;
  grid-column: 3;
  align-self: center;
  justify-self: center;
  color: rgba(91, 87, 80, 0.42);
  font-family: var(--ui-font);
  font-size: 0.98rem;
  font-weight: 340;
  line-height: 1;
  pointer-events: none;
}

#fileStatus {
  color: var(--muted);
  font-size: 0.92rem;
}

.menu-status-cancel {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(168, 83, 75, 0.12);
  color: #9a473f;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 650;
  cursor: pointer;
}

.reader-toast {
  position: fixed;
  left: 50%;
  bottom: max(120px, calc(env(safe-area-inset-bottom, 0px) + 102px));
  z-index: 260;
  max-width: min(360px, calc(100vw - 40px));
  padding: 10px 14px;
  border: 1px solid rgba(105, 88, 65, 0.13);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 250, 241, 0.62)),
    rgba(255, 253, 247, 0.92);
  box-shadow:
    0 18px 42px rgba(67, 52, 31, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  color: rgba(43, 35, 26, 0.92);
  font-family: var(--ui-font);
  font-size: 0.86rem;
  font-weight: 660;
  line-height: 1.25;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-50%, 8px, 0) scale(0.98);
  transition:
    opacity 180ms ease,
    transform 200ms cubic-bezier(0.2, 0.82, 0.22, 1);
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
}

.reader-toast.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

.reader-toast[hidden] {
  display: none !important;
}

body:has(#inputPanel.is-open) .reader-toast {
  bottom: max(94px, calc(env(safe-area-inset-bottom, 0px) + 86px));
}

body.ebook-mode .reader-toast {
  bottom: max(92px, calc(env(safe-area-inset-bottom, 0px) + 76px));
}

html.theme-dark .reader-toast,
body.theme-dark .reader-toast {
  border-color: rgba(235, 213, 178, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 239, 205, 0.09), rgba(255, 239, 205, 0.035)),
    rgba(34, 29, 23, 0.92);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 239, 205, 0.08);
  color: rgba(246, 236, 220, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .reader-toast {
    transition: none;
  }
}

@media (max-width: 520px) {
  .reader-toast {
    bottom: max(112px, calc(env(safe-area-inset-bottom, 0px) + 96px));
    max-width: calc(100vw - 28px);
    font-size: 0.84rem;
  }

  body:has(#inputPanel.is-open) .reader-toast {
    bottom: max(88px, calc(env(safe-area-inset-bottom, 0px) + 82px));
  }
}

/* Contents v7: mockup-informed navigation hierarchy and colour semantics. */
.chapter-panel {
  --contents-coral: #ef7468;
  --contents-teal: #78c9c0;
  --contents-ivory: #eee8de;
  --contents-muted: #a9a39c;
  --contents-hairline: rgba(113, 108, 101, 0.16);
}

.chapter-panel .chapter-screen-heading h2 span {
  color: var(--contents-coral) !important;
}

.chapter-panel .chapter-screen-heading::after {
  width: 42px !important;
  height: 2px !important;
  margin-top: 13px !important;
  background: linear-gradient(90deg, var(--contents-coral) 0 72%, var(--contents-teal) 72% 100%) !important;
  opacity: 0.9 !important;
}

.chapter-panel .chapter-tools,
.chapter-panel .chapter-search,
.chapter-panel .chapter-index {
  width: min(100%, var(--contents-column-width)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  box-sizing: border-box !important;
}

.chapter-panel .chapter-tools {
  position: relative;
  top: auto;
  z-index: 1;
  min-height: 52px;
  margin-bottom: 13px !important;
  padding: 0 15px 0 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(104, 96, 85, 0.13);
  border-radius: 17px;
  background: rgba(246, 242, 234, 0.91);
  box-shadow: 0 10px 26px rgba(45, 39, 31, 0.055);
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

.chapter-panel .chapter-tools-summary {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--contents-teal) 70%, #3d3934);
  font-family: var(--reading-font);
  font-size: clamp(0.88rem, 2.6vw, 1rem);
  font-weight: 560;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-panel .chapter-search-toggle {
  min-height: 44px;
  padding: 0 2px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent !important;
  color: color-mix(in srgb, var(--contents-teal) 80%, #34312d);
  box-shadow: none !important;
  font-family: var(--reading-font);
  font-size: clamp(0.84rem, 2.5vw, 0.96rem);
  font-weight: 520;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.chapter-panel .chapter-search-toggle:is(:active, .is-tactile-press) {
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-search-toggle .chapter-search-icon {
  width: 19px !important;
  height: 19px !important;
}

.chapter-panel .chapter-search[hidden] {
  display: none !important;
}

.chapter-panel .chapter-search {
  min-height: 48px !important;
  margin-top: 0 !important;
  margin-bottom: 13px !important;
  padding: 0 7px 0 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  border: 1px solid rgba(104, 96, 85, 0.13) !important;
  border-radius: 16px !important;
  background: rgba(246, 242, 234, 0.82) !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-search-field {
  min-width: 0;
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.chapter-panel .chapter-search-clear {
  min-height: 38px;
  padding: 0 8px;
  border: 0;
  background: transparent !important;
  color: var(--contents-coral);
  box-shadow: none !important;
  font-family: var(--ui-font);
  font-size: 0.7rem;
  font-weight: 700;
}

.chapter-panel .chapter-index {
  overflow: hidden;
  border: 1px solid rgba(104, 96, 85, 0.13);
  border-radius: 18px;
  background: rgba(248, 244, 237, 0.38);
  box-shadow: 0 16px 36px rgba(45, 39, 31, 0.035);
}

.chapter-panel .chapter-index .chapter-list-heading {
  min-height: 42px;
  margin: 0 !important;
  padding: 0 20px 0 17px !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(104, 96, 85, 0.11) !important;
}

.chapter-panel .chapter-index .chapter-list-heading span,
.chapter-panel .chapter-index .chapter-list-heading small {
  color: rgba(73, 68, 62, 0.63) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.59rem, 1.75vw, 0.67rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.chapter-panel .chapter-index .chapter-list {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 14px 5px !important;
  box-sizing: border-box !important;
}

.chapter-panel .chapter-index .chapter-option-card {
  min-height: var(--chapter-row-height) !important;
  margin: 0 !important;
  padding: 5px 3px !important;
  grid-template-columns: 28px minmax(0, 1fr) auto 10px !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-index .chapter-option-card::after {
  right: 0 !important;
  left: 38px !important;
  background: linear-gradient(90deg, rgba(104, 96, 85, 0.12), rgba(104, 96, 85, 0.035)) !important;
}

.chapter-panel .chapter-index .chapter-option-number {
  width: 28px !important;
  padding: 0 0 0 2px !important;
  color: color-mix(in srgb, var(--contents-teal) 64%, #5b5650) !important;
}

.chapter-panel .chapter-index .chapter-option-copy strong {
  color: #34312d !important;
  font-size: clamp(0.96rem, 2.9vw, 1.1rem) !important;
}

.chapter-panel .chapter-index .chapter-option-page {
  padding: 0 !important;
  color: rgba(75, 70, 64, 0.62) !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(0.7rem, 2.1vw, 0.82rem) !important;
  font-weight: 470 !important;
  letter-spacing: 0 !important;
}

.chapter-panel .chapter-index .chapter-option-chevron {
  color: rgba(75, 70, 64, 0.62) !important;
  font-size: 1.08rem !important;
  opacity: 0.72 !important;
}

.chapter-panel .chapter-index .chapter-option.is-current .chapter-option-card {
  min-height: calc(var(--chapter-row-height) - 6px) !important;
  margin: 3px -7px !important;
  padding: 5px 10px !important;
  border: 1px solid color-mix(in srgb, var(--contents-teal) 12%, transparent) !important;
  border-radius: 13px !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--contents-teal) 13%, transparent), color-mix(in srgb, var(--contents-teal) 5%, transparent)) !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-index .chapter-option.is-current .chapter-option-card::after {
  content: none !important;
}

.chapter-panel .chapter-index .chapter-option.is-current :is(.chapter-option-number, .chapter-option-copy strong, .chapter-option-page, .chapter-option-chevron) {
  color: color-mix(in srgb, var(--contents-teal) 84%, #2e302e) !important;
}

.chapter-panel .chapter-index .chapter-option.is-search-result .chapter-option-card {
  grid-template-columns: minmax(0, 1fr) 10px !important;
  padding: 10px 4px !important;
}

html.theme-dark body .chapter-panel,
body.theme-dark .chapter-panel,
html.theme-dark body .chapter-panel .chapter-sheet,
body.theme-dark .chapter-panel .chapter-sheet {
  background:
    radial-gradient(circle at 12% 10%, rgba(239, 116, 104, 0.035), transparent 30%),
    radial-gradient(circle at 86% 26%, rgba(120, 201, 192, 0.035), transparent 34%),
    linear-gradient(180deg, #101317, #0d1013 72%, #0b0e11) !important;
}

html.theme-dark body .chapter-panel .chapter-tools,
body.theme-dark .chapter-panel .chapter-tools {
  border-color: rgba(196, 203, 201, 0.12) !important;
  background: rgba(22, 26, 30, 0.88) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}

html.theme-dark body .chapter-panel .chapter-tools-summary,
body.theme-dark .chapter-panel .chapter-tools-summary,
html.theme-dark body .chapter-panel .chapter-search-toggle,
body.theme-dark .chapter-panel .chapter-search-toggle {
  color: var(--contents-teal) !important;
}

html.theme-dark body .chapter-panel .chapter-search,
body.theme-dark .chapter-panel .chapter-search {
  border-color: rgba(196, 203, 201, 0.12) !important;
  background: rgba(22, 26, 30, 0.86) !important;
}

/* Reader popup graphite consolidation: keep every small reader surface legible in dark mode. */
html.theme-dark .memory-panel,
body.theme-dark .memory-panel,
html.theme-dark .book-note-panel,
body.theme-dark .book-note-panel,
html.theme-dark .pdf-page-panel,
body.theme-dark .pdf-page-panel {
  background: rgba(3, 4, 6, 0.58);
}

html.theme-dark .memory-sheet,
body.theme-dark .memory-sheet,
html.theme-dark .book-note-sheet,
body.theme-dark .book-note-sheet,
html.theme-dark .pdf-page-sheet,
body.theme-dark .pdf-page-sheet,
html.theme-dark .font-size-popover,
body.theme-dark .font-size-popover,
html.theme-dark .ebook-page-shuttle-card,
body.theme-dark .ebook-page-shuttle-card {
  color-scheme: dark;
  border-color: rgba(225, 230, 237, 0.12) !important;
  background:
    radial-gradient(circle at 91% 0%, rgba(213, 91, 75, 0.09), transparent 34%),
    radial-gradient(circle at 6% -4%, rgba(91, 153, 141, 0.075), transparent 38%),
    linear-gradient(155deg, rgba(31, 32, 37, 0.995), rgba(18, 19, 23, 0.995)) !important;
  color: rgba(245, 241, 234, 0.94);
  box-shadow:
    0 32px 82px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(248, 244, 236, 0.055) !important;
  scrollbar-color: rgba(231, 133, 114, 0.42) rgba(255, 255, 255, 0.045);
}

html.theme-dark .memory-close,
body.theme-dark .memory-close,
html.theme-dark .book-note-close,
body.theme-dark .book-note-close,
html.theme-dark .pdf-page-close,
body.theme-dark .pdf-page-close {
  border: 1px solid rgba(225, 230, 237, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(231, 234, 239, 0.72);
}

html.theme-dark .memory-header h2,
body.theme-dark .memory-header h2,
html.theme-dark .book-note-header h2,
body.theme-dark .book-note-header h2,
html.theme-dark .book-note-text,
body.theme-dark .book-note-text,
html.theme-dark .pdf-page-copy p,
body.theme-dark .pdf-page-copy p {
  color: rgba(247, 244, 238, 0.95);
}

html.theme-dark .memory-header small,
body.theme-dark .memory-header small,
html.theme-dark .memory-empty,
body.theme-dark .memory-empty,
html.theme-dark .memory-jump small,
body.theme-dark .memory-jump small,
html.theme-dark .memory-jump em,
body.theme-dark .memory-jump em,
html.theme-dark .memory-note-form label,
body.theme-dark .memory-note-form label,
html.theme-dark .book-note-header small,
body.theme-dark .book-note-header small,
html.theme-dark .pdf-page-copy small,
body.theme-dark .pdf-page-copy small,
html.theme-dark .pdf-page-status,
body.theme-dark .pdf-page-status,
html.theme-dark .pdf-page-input-wrap,
body.theme-dark .pdf-page-input-wrap {
  color: rgba(195, 199, 207, 0.72);
}

html.theme-dark .memory-actions button,
body.theme-dark .memory-actions button,
html.theme-dark .memory-tabs button,
body.theme-dark .memory-tabs button,
html.theme-dark .memory-note-actions button,
body.theme-dark .memory-note-actions button,
html.theme-dark .memory-item-actions button,
body.theme-dark .memory-item-actions button,
html.theme-dark .memory-empty,
body.theme-dark .memory-empty,
html.theme-dark .memory-item,
body.theme-dark .memory-item {
  border-color: rgba(225, 230, 237, 0.105);
  background: rgba(255, 255, 255, 0.052);
}

html.theme-dark .memory-actions button,
body.theme-dark .memory-actions button,
html.theme-dark .memory-tabs button,
body.theme-dark .memory-tabs button,
html.theme-dark .memory-note-actions button,
body.theme-dark .memory-note-actions button,
html.theme-dark .memory-item-actions button,
body.theme-dark .memory-item-actions button {
  color: rgba(225, 228, 234, 0.84);
}

html.theme-dark .memory-action-primary,
body.theme-dark .memory-action-primary,
html.theme-dark .memory-tabs button.is-active,
body.theme-dark .memory-tabs button.is-active {
  border-color: rgba(231, 112, 94, 0.3);
  background: rgba(213, 78, 62, 0.13);
  color: rgba(255, 167, 148, 0.96);
}

html.theme-dark .memory-kicker,
body.theme-dark .memory-kicker,
html.theme-dark .book-note-kicker,
body.theme-dark .book-note-kicker,
html.theme-dark .memory-status,
body.theme-dark .memory-status,
html.theme-dark .memory-jump span,
body.theme-dark .memory-jump span {
  color: rgba(245, 139, 119, 0.94);
}

html.theme-dark .memory-status[data-state="error"],
body.theme-dark .memory-status[data-state="error"] {
  color: rgba(255, 152, 137, 0.98);
}

html.theme-dark .memory-jump strong,
body.theme-dark .memory-jump strong {
  color: rgba(243, 240, 234, 0.92);
}

html.theme-dark .memory-note-form textarea,
body.theme-dark .memory-note-form textarea,
html.theme-dark .pdf-page-input-wrap input,
body.theme-dark .pdf-page-input-wrap input {
  border-color: rgba(225, 230, 237, 0.13);
  background: rgba(8, 10, 13, 0.44);
  color: rgba(247, 244, 238, 0.94);
  caret-color: rgba(245, 139, 119, 0.98);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.26);
}

html.theme-dark .memory-note-form textarea::placeholder,
body.theme-dark .memory-note-form textarea::placeholder,
html.theme-dark .pdf-page-input-wrap input::placeholder,
body.theme-dark .pdf-page-input-wrap input::placeholder {
  color: rgba(195, 199, 207, 0.48);
}

html.theme-dark .memory-note-form textarea:focus,
body.theme-dark .memory-note-form textarea:focus,
html.theme-dark .pdf-page-input-wrap input:focus,
body.theme-dark .pdf-page-input-wrap input:focus {
  border-color: rgba(231, 112, 94, 0.42);
  outline: 2px solid rgba(231, 112, 94, 0.22);
  outline-offset: 2px;
}

html.theme-dark .book-note-return,
body.theme-dark .book-note-return {
  border-color: rgba(231, 112, 94, 0.3);
  background: rgba(213, 78, 62, 0.13);
  color: rgba(255, 171, 152, 0.96);
}

html.theme-dark .pdf-page-submit,
body.theme-dark .pdf-page-submit {
  background: rgba(211, 87, 70, 0.94);
  color: rgba(255, 250, 246, 0.98);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

html.theme-dark .reader-appearance-heading,
html.theme-dark .reader-appearance-size,
html.theme-dark .reader-appearance-font,
html.theme-dark .reader-appearance-options,
body.theme-dark .reader-appearance-heading,
body.theme-dark .reader-appearance-size,
body.theme-dark .reader-appearance-font,
body.theme-dark .reader-appearance-options {
  border-color: rgba(225, 230, 237, 0.105);
}

/* Footnote links need to read as interactive even when the reading page is nearly black. */
.book-note-marker {
  padding: 0.07em 0.32em 0.055em;
  border-color: rgba(199, 67, 58, 0.32);
  background: rgba(199, 67, 58, 0.11);
  color: rgba(151, 45, 38, 0.96);
  font-size: 0.54em;
  font-weight: 760;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.book-note-marker.is-context-note {
  padding-inline: 0.26em;
  border-color: rgba(199, 67, 58, 0.28);
  background: rgba(199, 67, 58, 0.095);
  color: rgba(145, 45, 38, 0.92);
  font-size: 0.4em;
}

.book-note-marker:focus-visible {
  outline: 2px solid rgba(199, 67, 58, 0.42);
  outline-offset: 2px;
}

.book-note-marker:active {
  border-color: rgba(199, 67, 58, 0.4);
  background: rgba(199, 67, 58, 0.14);
  color: rgba(132, 38, 32, 0.98);
  transform: none;
}

html.theme-dark .book-note-marker,
body.theme-dark .book-note-marker {
  border-color: rgba(245, 139, 119, 0.46);
  background: rgba(213, 78, 62, 0.18);
  color: rgba(255, 190, 173, 0.99);
  box-shadow: inset 0 1px 0 rgba(255, 231, 224, 0.08);
}

html.theme-dark .book-note-marker.is-context-note,
body.theme-dark .book-note-marker.is-context-note {
  border-color: rgba(245, 139, 119, 0.42);
  background: rgba(213, 78, 62, 0.17);
  color: rgba(255, 194, 178, 0.99);
}

html.theme-dark .book-note-marker:focus-visible,
body.theme-dark .book-note-marker:focus-visible {
  outline-color: rgba(255, 177, 158, 0.68);
}

html.theme-dark .book-note-marker:active,
body.theme-dark .book-note-marker:active {
  border-color: rgba(255, 169, 149, 0.56);
  background: rgba(223, 88, 70, 0.23);
  color: rgba(255, 211, 199, 1);
}

html.theme-dark body .chapter-panel .chapter-index,
body.theme-dark .chapter-panel .chapter-index {
  border-color: rgba(196, 203, 201, 0.1) !important;
  background: rgba(17, 21, 24, 0.62) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.16) !important;
}

html.theme-dark body .chapter-panel .chapter-index .chapter-list-heading,
body.theme-dark .chapter-panel .chapter-index .chapter-list-heading {
  border-bottom-color: rgba(196, 203, 201, 0.09) !important;
}

html.theme-dark body .chapter-panel .chapter-index .chapter-list-heading span,
html.theme-dark body .chapter-panel .chapter-index .chapter-list-heading small,
body.theme-dark .chapter-panel .chapter-index .chapter-list-heading span,
body.theme-dark .chapter-panel .chapter-index .chapter-list-heading small {
  color: rgba(192, 187, 180, 0.67) !important;
}

html.theme-dark body .chapter-panel .chapter-index .chapter-option-card::after,
body.theme-dark .chapter-panel .chapter-index .chapter-option-card::after {
  background: linear-gradient(90deg, rgba(215, 219, 216, 0.09), rgba(215, 219, 216, 0.02)) !important;
}

html.theme-dark body .chapter-panel .chapter-index .chapter-option-copy strong,
body.theme-dark .chapter-panel .chapter-index .chapter-option-copy strong {
  color: var(--contents-ivory) !important;
}

html.theme-dark body .chapter-panel .chapter-index .chapter-option-page,
html.theme-dark body .chapter-panel .chapter-index .chapter-option-chevron,
body.theme-dark .chapter-panel .chapter-index .chapter-option-page,
body.theme-dark .chapter-panel .chapter-index .chapter-option-chevron {
  color: rgba(190, 185, 178, 0.68) !important;
}

html.theme-dark body .chapter-panel .chapter-index .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-panel .chapter-index .chapter-option.is-current .chapter-option-card {
  border-color: rgba(120, 201, 192, 0.12) !important;
  background: linear-gradient(90deg, rgba(69, 135, 127, 0.2), rgba(69, 135, 127, 0.08)) !important;
}

html.theme-dark body .chapter-panel .chapter-index .chapter-option.is-current :is(.chapter-option-number, .chapter-option-copy strong, .chapter-option-page, .chapter-option-chevron),
body.theme-dark .chapter-panel .chapter-index .chapter-option.is-current :is(.chapter-option-number, .chapter-option-copy strong, .chapter-option-page, .chapter-option-chevron) {
  color: var(--contents-teal) !important;
}

@media (max-width: 520px) {
  .chapter-panel .chapter-tools {
    min-height: 50px;
    padding-inline: 14px;
  }

  .chapter-panel .chapter-index .chapter-list {
    padding-inline: 12px !important;
  }

  .chapter-panel .chapter-index .chapter-option-card {
    grid-template-columns: 26px minmax(0, 1fr) auto 9px !important;
    gap: 8px !important;
  }

  .chapter-panel .chapter-index .chapter-option-page {
    font-size: 0.69rem !important;
  }
}

/* Discovery browse and curation completion */
.discover-view-intro.is-gutenberg {
  padding-bottom: clamp(50px, 8vw, 80px);
}

.discover-gutenberg-browser {
  display: grid;
  gap: 14px;
}

.discover-browse-catalogue {
  display: grid;
  gap: 14px;
}

.discover-catalogue-shell {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.discover-browse-section.is-catalogue {
  display: grid;
  gap: 14px;
}

.discover-browse-catalogue .discover-gutenberg-results-head {
  margin-top: 2px;
}

.discover-browse-catalogue .discover-gutenberg-results-head span {
  max-width: 52rem;
  white-space: normal;
}

.discover-gutenberg-compact-head {
  min-height: 74px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.discover-gutenberg-compact-head > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.discover-gutenberg-compact-head p,
.discover-gutenberg-compact-head h1,
.discover-gutenberg-compact-head span {
  margin: 0;
}

.discover-gutenberg-compact-head p {
  color: var(--discover-coral);
  font: 760 0.58rem/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-gutenberg-compact-head h1 {
  font-family: var(--reading-font);
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.discover-gutenberg-compact-head span {
  color: var(--discover-muted);
  font: 600 0.64rem/1.35 var(--ui-font);
}

.discover-gutenberg-compact-head nav {
  padding: 3px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  display: flex;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--discover-surface) 86%, transparent);
}

.discover-gutenberg-compact-head nav button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--discover-muted);
  font: 700 0.59rem/1 var(--ui-font);
}

.discover-gutenberg-compact-head nav button.is-active {
  background: var(--discover-text);
  color: var(--discover-surface);
}

.discover-gutenberg-search {
  position: relative;
  min-height: 54px;
  border: 1px solid var(--discover-line);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 17px;
  background: color-mix(in srgb, var(--discover-surface) 92%, transparent);
  box-shadow: 0 12px 32px rgba(35, 29, 47, 0.055);
}

.discover-gutenberg-chip-rail {
  width: calc(100% + max(18px, env(safe-area-inset-right)));
  margin: 0 calc(-1 * max(18px, env(safe-area-inset-right))) 0 0;
  padding: 1px max(18px, env(safe-area-inset-right)) 4px 0;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  touch-action: pan-x pan-y !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.discover-gutenberg-chip-rail::-webkit-scrollbar {
  display: none;
}

.discover-gutenberg-chip-rail button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--discover-surface) 88%, transparent);
  color: var(--discover-muted);
  font: 700 0.61rem/1 var(--ui-font);
  white-space: nowrap;
  touch-action: pan-x pan-y;
  scroll-snap-align: start;
}

body:has(.discover-panel:not([hidden])) .discover-panel .discover-sheet {
  touch-action: pan-x pan-y !important;
}

button[data-scroll-surface="horizontal"],
button[data-scroll-surface="horizontal"] * {
  touch-action: pan-x pan-y !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Scroll containers own the gesture even when the initial hit lands on a card or control. */
[data-scroll-container="horizontal"],
[data-scroll-container="horizontal"] * {
  touch-action: pan-x pan-y !important;
}

[data-scroll-container="vertical"],
[data-scroll-container="vertical"] * {
  touch-action: pan-y !important;
}

.discover-gutenberg-chip-rail button.is-active {
  border-color: color-mix(in srgb, var(--discover-coral) 48%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 9%, var(--discover-surface));
  color: var(--discover-text);
}

.discover-gutenberg-chip-rail .discover-live-source-menu {
  border-color: color-mix(in srgb, var(--discover-coral) 34%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 7%, var(--discover-surface));
  color: var(--discover-text);
}

.discover-live-source-menu i {
  margin-left: 3px;
  color: var(--discover-coral);
  font-style: normal;
}

.discover-live-source-status {
  min-height: 38px;
  margin: 0;
  padding: 7px 10px 7px 12px;
  border: 1px solid color-mix(in srgb, var(--discover-amber) 24%, var(--discover-line));
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--discover-amber) 6%, var(--discover-surface));
  color: var(--discover-muted);
  font: 620 0.62rem/1.35 var(--ui-font);
}

.discover-live-source-status > span {
  width: 8px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: discover-live-source-spin 0.8s linear infinite;
}

.discover-live-source-status strong {
  min-width: 0;
  font: inherit;
}

.discover-live-source-status button {
  min-height: 28px;
  margin-left: auto;
  padding: 0 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 720 0.58rem/1 var(--ui-font);
}

@keyframes discover-live-source-spin {
  to { transform: rotate(360deg); }
}

.discover-live-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.discover-live-source-grid > button {
  min-width: 0;
  min-height: 92px;
  padding: 12px;
  border: 1px solid var(--discover-line);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  background: var(--discover-surface-soft);
  color: var(--discover-text);
  text-align: left;
  touch-action: pan-y;
}

.discover-live-source-grid > button.is-active {
  border-color: color-mix(in srgb, var(--discover-coral) 50%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 8%, var(--discover-surface));
}

.discover-live-source-grid > button > span:first-child {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--discover-coral) 9%, var(--discover-surface));
  color: var(--discover-coral);
}

.discover-live-source-grid svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.discover-live-source-grid > button > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.discover-live-source-grid strong {
  overflow: hidden;
  font-family: var(--reading-font);
  font-size: 1rem;
  font-weight: 570;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-live-source-grid small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-muted);
  font: 600 0.58rem/1.28 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-live-source-grid em {
  color: var(--discover-coral);
  font: 720 0.52rem/1.2 var(--ui-font);
  font-style: normal;
}

.discover-gutenberg-directory {
  position: fixed;
  inset: 0;
  z-index: 460;
  display: grid;
  align-items: end;
}

.discover-gutenberg-directory-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(8, 8, 14, 0.58);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.discover-gutenberg-directory-sheet {
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  max-height: min(76dvh, 720px);
  margin: 0 auto;
  padding: 22px 22px max(28px, calc(env(safe-area-inset-bottom) + 20px));
  border: 1px solid var(--discover-line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  display: grid;
  gap: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--discover-surface);
  box-shadow: 0 -28px 80px rgba(4, 4, 10, 0.32);
}

.discover-gutenberg-directory-sheet > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.discover-gutenberg-directory-sheet > header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.discover-gutenberg-directory-sheet p,
.discover-gutenberg-directory-sheet h2,
.discover-gutenberg-directory-sheet header span {
  margin: 0;
}

.discover-gutenberg-directory-sheet header p {
  color: var(--discover-coral);
  font: 760 0.58rem/1 var(--ui-font);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.discover-gutenberg-directory-sheet header h2 {
  font-family: var(--reading-font);
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 530;
  line-height: 1;
}

.discover-gutenberg-directory-sheet header span {
  color: var(--discover-muted);
  font: 600 0.68rem/1.4 var(--ui-font);
}

.discover-gutenberg-directory-sheet header > button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--discover-line);
  border-radius: 50%;
  flex: 0 0 38px;
  background: var(--discover-surface-soft);
  color: var(--discover-muted);
  font-size: 1.2rem;
}

.discover-gutenberg-search > span {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1.7px solid var(--discover-muted);
  border-radius: 50%;
}

.discover-gutenberg-search > span::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 7px;
  height: 1.7px;
  border-radius: 2px;
  background: var(--discover-muted);
  transform: rotate(45deg);
}

.discover-gutenberg-search input {
  min-width: 0;
  height: 52px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--discover-text);
  font-family: var(--ui-font);
  font-size: 0.78rem;
}

.discover-gutenberg-search input::placeholder {
  color: color-mix(in srgb, var(--discover-muted) 72%, transparent);
}

.discover-gutenberg-search button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: var(--discover-surface-soft);
  color: var(--discover-muted);
  font-size: 1.05rem;
}

.discover-gutenberg-tabs {
  min-height: 46px;
  padding: 4px;
  border: 1px solid var(--discover-line);
  border-radius: 15px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: color-mix(in srgb, var(--discover-surface) 86%, transparent);
}

.discover-gutenberg-tabs button {
  min-width: 0;
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.66rem;
  font-weight: 720;
}

.discover-gutenberg-tabs button.is-active {
  background: var(--discover-text);
  color: var(--discover-surface);
  box-shadow: 0 6px 18px rgba(30, 25, 42, 0.12);
}

.discover-gutenberg-shelf-head {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.discover-gutenberg-shelf-head > strong {
  font-family: var(--reading-font);
  font-size: 1.02rem;
  font-weight: 570;
}

.discover-gutenberg-shelf-head > button {
  min-height: 32px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--discover-coral) 8%, transparent);
  color: var(--discover-coral);
  font: 720 0.61rem/1 var(--ui-font);
}

.discover-gutenberg-shelves {
  width: calc(100% + max(18px, env(safe-area-inset-right)));
  margin: 0 calc(-1 * max(18px, env(safe-area-inset-right))) 0 0;
  padding: 1px max(18px, env(safe-area-inset-right)) 7px 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(168px, 23%);
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.discover-gutenberg-shelves::-webkit-scrollbar {
  display: none;
}

.discover-gutenberg-shelves > button {
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--discover-line);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 3px 10px;
  align-content: center;
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--discover-surface) 88%, transparent);
  color: var(--discover-text);
  text-align: left;
  touch-action: pan-x pan-y;
}

.discover-gutenberg-shelves > button:active,
.discover-gutenberg-book-main:active,
.discover-gutenberg-add:active {
  transform: none !important;
}

.discover-gutenberg-shelves > button.is-active {
  border-color: color-mix(in srgb, var(--discover-coral) 50%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 8%, var(--discover-surface));
}

.discover-gutenberg-shelves > button > span {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--discover-coral) 10%, var(--discover-surface-soft));
  color: var(--discover-coral);
}

.discover-gutenberg-shelves svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.discover-gutenberg-shelves strong {
  overflow: hidden;
  align-self: end;
  font-family: var(--reading-font);
  font-size: 1.02rem;
  font-weight: 570;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-gutenberg-shelves small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.59rem;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-gutenberg-all-categories {
  padding: 14px;
  border: 1px solid var(--discover-line);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  background: color-mix(in srgb, var(--discover-surface) 82%, transparent);
}

.discover-gutenberg-all-categories > button {
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  touch-action: pan-y;
}

.discover-gutenberg-all-categories > button.is-active {
  border-color: color-mix(in srgb, var(--discover-coral) 46%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 7%, var(--discover-surface));
}

.discover-gutenberg-all-categories > button > span:first-child {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--discover-coral) 9%, var(--discover-surface-soft));
  color: var(--discover-coral);
}

.discover-gutenberg-all-categories svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.discover-gutenberg-all-categories > button > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.discover-gutenberg-all-categories strong,
.discover-gutenberg-all-categories small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-gutenberg-all-categories strong {
  font-family: var(--reading-font);
  font-size: 0.88rem;
  font-weight: 570;
}

.discover-gutenberg-all-categories small {
  color: var(--discover-muted);
  font: 600 0.54rem/1.25 var(--ui-font);
}

.discover-gutenberg-results-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.discover-gutenberg-results-head > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.discover-gutenberg-results-head p,
.discover-gutenberg-results-head h2,
.discover-gutenberg-results-head span {
  margin: 0;
}

.discover-gutenberg-results-head p {
  color: var(--discover-coral);
  font: 760 0.6rem/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-gutenberg-results-head h2 {
  overflow: hidden;
  font-family: var(--reading-font);
  font-size: clamp(1.65rem, 4vw, 2.35rem);
  font-weight: 530;
  line-height: 1.02;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-gutenberg-results-head span {
  color: var(--discover-muted);
  font: 620 0.62rem/1.3 var(--ui-font);
}

.discover-gutenberg-results-head > button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  flex: 0 0 auto;
  background: var(--discover-surface);
  color: var(--discover-muted);
  font: 700 0.62rem/1 var(--ui-font);
}

.discover-gutenberg-results-head > button i {
  margin-left: 4px;
  font-style: normal;
}

.discover-research-sort {
  min-width: 112px;
  min-height: 38px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  position: relative;
  flex: 0 0 auto;
  overflow: hidden;
  background: var(--discover-surface);
  color: var(--discover-muted);
}

.discover-research-sort select {
  width: 100%;
  height: 38px;
  padding: 0 30px 0 13px;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: 700 0.62rem/1 var(--ui-font);
  outline: none;
}

.discover-research-sort:focus-within {
  border-color: color-mix(in srgb, var(--discover-coral) 64%, var(--discover-line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--discover-coral) 12%, transparent);
}

.discover-research-sort > i {
  position: absolute;
  top: 50%;
  right: 12px;
  pointer-events: none;
  font-style: normal;
  transform: translateY(-54%);
}

.discover-gutenberg-grid,
.discover-gutenberg-loading {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.discover-gutenberg-book {
  position: relative;
  min-width: 0;
  min-height: 306px;
  border: 1px solid var(--discover-line);
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--discover-coral) 7%, transparent), transparent 38%),
    var(--discover-surface);
  box-shadow: 0 12px 28px rgba(34, 28, 50, 0.05);
}

.discover-gutenberg-book-main {
  width: 100%;
  min-height: 100%;
  padding: 11px 10px 52px;
  border: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  background: transparent;
  color: var(--discover-text);
  text-align: center;
  touch-action: pan-y;
}

.discover-gutenberg-cover,
.discover-gutenberg-cover img {
  width: 112px;
  height: 160px;
  border-radius: 4px 8px 8px 4px;
}

.discover-gutenberg-cover {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--discover-coral) 12%, var(--discover-surface-soft));
  color: var(--discover-coral);
  box-shadow: 0 10px 22px rgba(32, 25, 41, 0.13);
}

.discover-gutenberg-cover > span {
  font-family: var(--reading-font);
  font-size: 2.8rem;
}

.discover-gutenberg-cover img {
  object-fit: cover;
}

.discover-gutenberg-book-copy {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 5px;
}

.discover-gutenberg-book-copy > strong {
  font-family: var(--reading-font);
  font-size: 1.02rem;
  font-weight: 570;
  letter-spacing: -0.02em;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.discover-gutenberg-book-copy > small {
  color: var(--discover-muted);
  font: 620 0.62rem/1.3 var(--ui-font);
  overflow-wrap: anywhere;
}

.discover-gutenberg-book-copy > span {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.discover-gutenberg-book-copy i {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--discover-surface-soft);
  color: var(--discover-muted);
  font: 650 0.5rem/1 var(--ui-font);
  font-style: normal;
}

.discover-gutenberg-add {
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: 12px;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--discover-coral) 28%, var(--discover-line));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: color-mix(in srgb, var(--discover-coral) 9%, var(--discover-surface));
  color: var(--discover-coral);
  font-family: var(--ui-font);
}

.discover-gutenberg-add > span {
  font-size: 1rem;
  font-weight: 400;
}

.discover-gutenberg-add strong {
  font-size: 0.62rem;
  font-weight: 760;
}

.discover-gutenberg-add.is-in-library {
  border-color: color-mix(in srgb, var(--discover-green) 30%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-green) 9%, var(--discover-surface));
  color: var(--discover-green);
}

.discover-gutenberg-add.is-loading > span {
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: discover-gutenberg-download-spin 0.75s linear infinite;
}

.discover-gutenberg-add.has-error {
  border-color: color-mix(in srgb, var(--discover-coral-strong) 48%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral-strong) 10%, var(--discover-surface));
  color: var(--discover-coral-strong);
}

@keyframes discover-gutenberg-download-spin {
  to { transform: rotate(360deg); }
}

.discover-gutenberg-add:disabled,
.discover-gutenberg-book.is-unavailable {
  opacity: 0.58;
}

.discover-gutenberg-notice {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--discover-amber) 28%, var(--discover-line));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--discover-amber) 8%, var(--discover-surface));
  color: var(--discover-muted);
  font: 620 0.66rem/1.4 var(--ui-font);
}

.discover-gutenberg-notice button {
  min-height: 30px;
  padding: 0 11px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 720 0.6rem/1 var(--ui-font);
}

.discover-gutenberg-more {
  width: min(260px, 100%);
  min-height: 44px;
  margin: 2px auto 0;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  background: var(--discover-text);
  color: var(--discover-surface);
  font: 720 0.68rem/1 var(--ui-font);
}

.discover-gutenberg-credit {
  max-width: 42rem;
  margin: 2px auto 0;
  color: var(--discover-muted);
  font: 560 0.58rem/1.45 var(--ui-font);
  text-align: center;
}

.discover-gutenberg-loading > span {
  min-height: 322px;
  padding: 16px;
  border: 1px solid var(--discover-line);
  border-radius: 20px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 12px;
  background: var(--discover-surface);
}

.discover-gutenberg-loading i,
.discover-gutenberg-loading b,
.discover-gutenberg-loading small {
  display: block;
  border-radius: 8px;
  background: linear-gradient(100deg, var(--discover-surface-soft) 20%, color-mix(in srgb, var(--discover-surface) 75%, white) 42%, var(--discover-surface-soft) 64%);
  background-size: 220% 100%;
  animation: discover-gutenberg-shimmer 1.25s linear infinite;
}

.discover-gutenberg-loading i {
  width: 106px;
  height: 150px;
}

.discover-gutenberg-loading b {
  width: 88%;
  height: 18px;
}

.discover-gutenberg-loading small {
  width: 62%;
  height: 10px;
}

@keyframes discover-gutenberg-shimmer {
  to { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .discover-gutenberg-loading i,
  .discover-gutenberg-loading b,
  .discover-gutenberg-loading small {
    animation: none;
  }

  .discover-live-source-status > span {
    animation: none;
  }
}

@media (max-width: 760px) {
  .discover-gutenberg-shelves {
    grid-auto-columns: minmax(154px, 44vw);
  }

  .discover-gutenberg-grid,
  .discover-gutenberg-loading {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .discover-gutenberg-all-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  .discover-gutenberg-book,
  .discover-gutenberg-loading > span {
    min-height: 250px;
  }

  .discover-gutenberg-cover,
  .discover-gutenberg-cover img,
  .discover-gutenberg-loading i {
    width: 86px;
    height: 124px;
  }
}

/* Topics density calibration from the phone layout. */
.discover-panel .discover-tabs,
html.theme-dark .discover-panel .discover-tabs,
body.theme-dark .discover-panel .discover-tabs,
.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs {
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs {
  margin-bottom: 8px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-content {
  gap: 12px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-view {
  gap: 18px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro {
  gap: 4px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro h1 {
  font-size: clamp(2.55rem, 6.4vw, 4.35rem) !important;
  line-height: 0.92 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choices {
  gap: 7px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choices > header {
  min-height: 34px;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choices > header > button {
  min-height: 34px;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-grid {
  gap: 9px 12px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
  min-height: 124px !important;
  padding: 13px 10px 11px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark {
  top: 11px !important;
  right: 9px !important;
  width: 35px !important;
  height: 35px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark svg {
  width: 25px !important;
  height: 25px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
  width: 100%;
  max-width: none !important;
  padding-right: 2px;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: clamp(1.13rem, 2.7vw, 1.55rem) !important;
  line-height: 1 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-shelves {
  gap: 24px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-shelf {
  gap: 8px !important;
}

@media (max-width: 760px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header {
    min-height: 88px !important;
    padding-bottom: 4px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs {
    min-height: 43px !important;
    margin-bottom: 6px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs button {
    min-height: 42px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-view {
    gap: 16px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.15rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro > span {
    font-size: 0.77rem !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
    min-height: 118px !important;
    padding: 12px 9px 10px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
    font-size: clamp(1.02rem, 4vw, 1.24rem) !important;
  }
}

@media (max-width: 470px) {
  .discover-view-intro.is-gutenberg {
    padding-bottom: 48px;
  }

  .discover-gutenberg-browser,
  .discover-browse-catalogue,
  .discover-catalogue-shell {
    gap: 12px;
  }

  .discover-gutenberg-compact-head {
    min-height: 60px;
    align-items: center;
    gap: 10px;
  }

  .discover-gutenberg-compact-head h1 {
    font-size: 2rem;
  }

  .discover-gutenberg-compact-head span {
    font-size: 0.58rem;
  }

  .discover-gutenberg-compact-head nav button {
    min-height: 30px;
    padding-inline: 8px;
    font-size: 0.54rem;
  }

  .discover-gutenberg-directory-sheet {
    max-height: 78dvh;
    padding: 18px 14px max(24px, calc(env(safe-area-inset-bottom) + 16px));
    border-radius: 24px 24px 0 0;
  }

  .discover-live-source-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .discover-gutenberg-search {
    min-height: 50px;
    border-radius: 16px;
  }

  .discover-gutenberg-search input {
    height: 48px;
    font-size: 0.72rem;
  }

  .discover-gutenberg-tabs button {
    font-size: 0.61rem;
  }

  .discover-gutenberg-shelves > button {
    min-height: 98px;
    padding: 12px;
  }

  .discover-gutenberg-results-head {
    align-items: center;
  }

  .discover-gutenberg-results-head h2 {
    font-size: 1.5rem;
  }

  .discover-gutenberg-results-head > button {
    max-width: 42%;
    padding-inline: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .discover-research-sort {
    max-width: 42%;
  }

  .discover-research-sort select {
    padding-inline: 10px 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .discover-gutenberg-book,
  .discover-gutenberg-loading > span {
    min-height: 228px;
    border-radius: 15px;
  }

  .discover-gutenberg-book-main {
    padding: 7px 5px 41px;
    gap: 5px;
  }

  .discover-gutenberg-cover,
  .discover-gutenberg-cover img,
  .discover-gutenberg-loading i {
    width: 78px;
    height: 114px;
  }

  .discover-gutenberg-book-copy > strong {
    font-size: clamp(0.76rem, 3.3vw, 0.9rem);
    line-height: 1.05;
  }

  .discover-gutenberg-book-copy > small {
    font-size: 0.52rem;
    line-height: 1.2;
  }

  .discover-gutenberg-add {
    right: 7px;
    bottom: 7px;
    left: 7px;
    min-height: 29px;
  }
}

.discover-browse-filters {
  width: calc(100% + max(18px, env(safe-area-inset-left)) + max(18px, env(safe-area-inset-right)));
  margin: 18px 0 2px calc(-1 * max(18px, env(safe-area-inset-left)));
  padding: 0 max(18px, env(safe-area-inset-right)) 5px max(18px, env(safe-area-inset-left));
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.discover-browse-filters::-webkit-scrollbar {
  display: none;
}

.discover-browse-filters button {
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  flex: 0 0 auto;
  scroll-snap-align: start;
  background: color-mix(in srgb, var(--discover-surface) 88%, transparent);
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.67rem;
  font-weight: 700;
  white-space: nowrap;
  touch-action: pan-x pan-y;
}

.discover-browse-filters button.is-active {
  border-color: color-mix(in srgb, var(--discover-coral) 54%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 10%, var(--discover-surface));
  color: var(--discover-text);
}

.discover-browse-description {
  max-width: 46rem;
  margin: -13px 0 20px;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.84rem;
  line-height: 1.45;
}

.discover-empty-state,
.discover-search-empty {
  box-sizing: border-box;
  padding: 28px;
  border: 1px dashed var(--discover-line);
  border-radius: 20px;
  display: grid;
  justify-items: start;
  gap: 8px;
  background: color-mix(in srgb, var(--discover-surface) 80%, transparent);
  color: var(--discover-muted);
}

.discover-browse-grid > .discover-empty-state {
  grid-column: 1 / -1;
}

.discover-empty-state strong,
.discover-search-empty > strong {
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: 1.18rem;
  font-weight: 560;
}

.discover-empty-state span,
.discover-search-empty > span {
  font-family: var(--ui-font);
  font-size: 0.72rem;
  line-height: 1.45;
}

.discover-empty-state button {
  min-height: 38px;
  margin-top: 7px;
  padding: 0 15px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  background: var(--discover-text);
  color: var(--discover-surface);
  font: 700 0.66rem/1 var(--ui-font);
}

.discover-search-empty {
  gap: 10px;
}

.discover-search-empty .discover-topic-rail {
  width: 100%;
  margin-top: 12px;
}

.topic-live-status button {
  min-height: 28px;
  margin-left: auto;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 700 0.6rem/1 var(--ui-font);
}

@media (max-width: 470px) {
  .discover-browse-filters {
    margin-top: 14px;
  }

  .discover-browse-filters button {
    min-height: 36px;
    padding-inline: 13px;
    font-size: 0.64rem;
  }

  .discover-browse-description {
    margin-bottom: 16px;
    font-size: 0.78rem;
  }

  .discover-empty-state,
  .discover-search-empty {
    padding: 22px;
  }
}

.global-load-indicator {
  --load-progress: 0%;
  --load-bottom-offset: 18px;
  position: fixed;
  right: calc(env(safe-area-inset-right, 0px) + 16px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--load-bottom-offset));
  z-index: 1300;
  width: min(276px, calc(100vw - 32px));
  min-height: 48px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(96, 78, 56, 0.14);
  border-radius: 16px;
  padding: 10px 12px 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.32)),
    rgba(255, 250, 241, 0.92);
  box-shadow:
    0 18px 44px rgba(67, 52, 31, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: rgba(43, 35, 26, 0.92);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.98);
  pointer-events: none;
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  backdrop-filter: blur(18px) saturate(1.08);
  transition:
    opacity 260ms ease,
    transform 300ms cubic-bezier(0.2, 0.82, 0.22, 1);
}

body:has(#inputPanel.is-open):not(:has(.book-details-panel:not([hidden]))):not(:has(.topic-discovery-panel:not([hidden]))):not(.ebook-mode) .global-load-indicator {
  --load-bottom-offset: 94px;
}

.global-load-indicator[hidden] {
  display: none;
}

.global-load-indicator::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(190, 52, 44, 0.92) 0 var(--load-progress),
      rgba(218, 211, 198, 0.72) var(--load-progress) 100%
    );
}

.global-load-indicator::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 7px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.82), transparent);
  opacity: 0.55;
  transform: translateX(-120%);
  animation: globalLoadSweep 1500ms ease-in-out infinite;
}

.global-load-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
}

.global-load-mark {
  display: inline-flex;
  align-items: baseline;
  color: rgba(43, 35, 26, 0.78);
  font: 400 1.18rem/0.8 "Rhythm Wordmark", Georgia, serif;
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: -0.08em;
  text-rendering: geometricPrecision;
  transition:
    opacity 160ms ease,
    transform 180ms ease;
  -webkit-font-smoothing: antialiased;
}

.global-load-core::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 12px;
  border: solid rgba(62, 127, 112, 0.92);
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: translateY(-1px) rotate(45deg) scale(0.72);
  transition:
    opacity 160ms ease,
    transform 180ms cubic-bezier(0.2, 0.82, 0.22, 1);
}

.global-load-indicator.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.global-load-indicator.is-complete .global-load-mark {
  opacity: 0;
  transform: translateY(2px) scale(0.88);
}

.global-load-indicator.is-complete .global-load-core::after {
  opacity: 1;
  transform: translateY(-1px) rotate(45deg) scale(1);
}

.global-load-label,
.global-load-value {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-family: var(--ui-font);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-load-label {
  font-size: 0.8rem;
  font-weight: 600;
}

.global-load-value {
  justify-self: end;
  border-radius: 999px;
  padding: 0.22rem 0.4rem;
  background: rgba(190, 52, 44, 0.1);
  color: rgba(150, 43, 37, 0.96);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 820;
}

.global-load-cancel {
  min-height: 28px;
  border: 1px solid rgba(150, 43, 37, 0.2);
  border-radius: 999px;
  padding: 0.25rem 0.52rem;
  background: rgba(190, 52, 44, 0.08);
  color: rgba(134, 38, 33, 0.96);
  font: 760 0.7rem/1 var(--ui-font);
  cursor: pointer;
}

.global-load-indicator.is-cancellable {
  width: min(284px, calc(100vw - 32px));
  pointer-events: auto;
}

.global-load-cancel:focus-visible {
  outline: 2px solid rgba(190, 52, 44, 0.46);
  outline-offset: 2px;
}

html.theme-dark .global-load-indicator,
body.theme-dark .global-load-indicator {
  border-color: rgba(235, 213, 178, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 239, 205, 0.08), rgba(255, 239, 205, 0.03)),
    rgba(34, 29, 23, 0.92);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 239, 205, 0.08);
  color: rgba(246, 236, 220, 0.94);
}

html.theme-dark .global-load-indicator::before,
body.theme-dark .global-load-indicator::before {
  background:
    linear-gradient(
      90deg,
      rgba(223, 89, 68, 0.96) 0 var(--load-progress),
      rgba(98, 82, 60, 0.68) var(--load-progress) 100%
    );
}

html.theme-dark .global-load-value,
body.theme-dark .global-load-value {
  background: rgba(223, 89, 68, 0.14);
  color: rgba(247, 127, 104, 0.98);
}

html.theme-dark .global-load-cancel,
body.theme-dark .global-load-cancel {
  border-color: rgba(247, 127, 104, 0.22);
  background: rgba(247, 127, 104, 0.08);
  color: rgba(247, 160, 143, 0.94);
}

/* The loading toast uses the book-shaped R mark in the theme ink. */
.global-load-mark-symbol {
  display: block;
  width: 24px;
  height: auto;
  fill: currentColor;
  transform-origin: 50% 80%;
  animation: globalLoadMarkBeat 1180ms cubic-bezier(0.22, 0.74, 0.24, 1) infinite;
}

.global-load-indicator.is-complete .global-load-mark-symbol {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .global-load-mark-symbol {
    animation: none;
  }
}

@keyframes globalLoadMarkBeat {
  0%,
  18%,
  62%,
  100% {
    transform: translateY(0);
  }

  34% {
    transform: translateY(-3px);
  }

  46% {
    transform: translateY(0.5px);
  }
}

@keyframes globalLoadSweep {
  48%,
  100% {
    transform: translateX(120%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .global-load-indicator {
    animation: none;
    transition: none;
  }

  .global-load-mark,
  .global-load-mark-h,
  .global-load-core::after {
    animation: none;
    transition: none;
  }

  .global-load-indicator::after {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 520px) {
  .global-load-indicator {
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    width: min(268px, calc(100vw - 20px));
  }

  body:has(#inputPanel.is-open):not(:has(.book-details-panel:not([hidden]))):not(:has(.topic-discovery-panel:not([hidden]))):not(.ebook-mode) .global-load-indicator {
    --load-bottom-offset: 90px;
  }
}

textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fffaf0;
  color: var(--ink);
  line-height: 1.5;
}

textarea:focus {
  outline: 3px solid rgba(40, 79, 122, 0.22);
  border-color: var(--blue);
}

.paste-editor textarea {
  min-height: min(30dvh, 260px);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.76);
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .reader-panel {
    min-height: 590px;
  }

  textarea {
    min-height: 280px;
  }
}

@media (max-width: 560px) {
  :root {
    --screen-pad-top: max(12px, env(safe-area-inset-top));
    --screen-pad-right: max(12px, env(safe-area-inset-right));
    --screen-pad-bottom: max(12px, env(safe-area-inset-bottom));
    --screen-pad-left: max(12px, env(safe-area-inset-left));
    --menu-icon-size: 52px;
    --menu-row-min-height: 82px;
    --context-gap: 10px;
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .app-shell {
    width: 100%;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    gap: 12px;
    display: block;
    overflow: hidden;
  }

  .reader-panel {
    height: 100dvh;
    min-height: 0;
    padding:
      var(--screen-pad-top)
      var(--screen-pad-right)
      var(--screen-pad-bottom)
      var(--screen-pad-left);
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 8px;
    overflow: hidden;
  }

  .ebook-reader {
    padding:
      var(--screen-pad-top)
      var(--screen-pad-right)
      max(46px, calc(env(safe-area-inset-bottom) + 30px))
      var(--screen-pad-left);
  }

  .input-panel {
    position: fixed;
    inset: 0;
    z-index: 70;
    max-height: none;
    min-height: 100dvh;
    display: none;
    padding:
      max(18px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    overflow: auto;
  }

  .chapter-panel {
    inset: 0;
    padding: 0;
  }

  .chapter-sheet {
    width: 100%;
    height: calc(100dvh - max(150px, calc(env(safe-area-inset-top) + 116px)));
    max-height: none;
    padding:
      20px max(var(--MODAL_PADDING_X), env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(var(--MODAL_PADDING_X), env(safe-area-inset-left));
    border-radius: 32px 32px 0 0;
    gap: 0;
  }

  .input-panel.is-open {
    display: block;
  }

  .menu-card {
    min-height: calc(100dvh - max(18px, env(safe-area-inset-top)) - max(18px, env(safe-area-inset-bottom)));
    padding-top: clamp(54px, 7.8vh, 82px);
    gap: clamp(12px, 1.8vh, 18px);
  }

  .menu-main {
    gap: clamp(16px, 2.25vh, 22px);
  }

  .paste-editor textarea {
    min-height: min(28dvh, 240px);
  }

  .top-bar,
  .ebook-top-bar {
    gap: 8px;
    display: grid;
    grid-template-columns: var(--top-control-size) minmax(0, 1fr) auto;
    align-items: center;
  }

  .eyebrow {
    margin-bottom: 4px;
    font-size: 0.7rem;
  }

  h1 {
    font-size: clamp(0.68rem, 2.45vw, 0.86rem);
  }

  .top-actions,
  .ebook-actions {
    font-size: 0.78rem;
    gap: 2px;
    align-items: center;
  }

  .brand-block,
  .ebook-title-block {
    width: min(58vw, 260px);
    max-width: calc(100% - 144px);
  }

  .focus-stage {
    min-height: 0;
    border-block-end: 0;
    padding-block: 0;
  }

  .bottom-dock {
    gap: 7px;
    padding-top: 7px;
    padding-bottom: max(46px, calc(env(safe-area-inset-bottom) + 30px));
  }

  .controls {
    width: min(390px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .transport-controls {
    width: clamp(224px, 58vw, 252px);
    gap: 14px;
    padding: 8px 10px;
  }

  .controls .ghost-button {
    padding-inline: 0;
  }

  .text-size-button {
    width: var(--bottom-control-size);
    min-width: var(--bottom-control-size);
    min-height: var(--bottom-control-size);
  }

  .play-control-button {
    width: var(--play-control-size);
    min-width: var(--play-control-size);
    min-height: var(--play-control-size);
  }

  .round-side-button {
    width: var(--bottom-control-size);
    min-width: var(--bottom-control-size);
    min-height: var(--bottom-control-size);
  }

  .bottom-mode-button {
    width: var(--bottom-control-size);
    min-width: var(--bottom-control-size);
    padding-inline: 0;
  }

  #textPanelButton {
    width: var(--top-control-size);
    min-width: var(--top-control-size);
  }

  #contextButton {
    display: none;
  }

  .slider-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
  }

  .speed-control {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
  }

  input[type="range"] {
    min-height: 34px;
  }

  .word-display.has-context {
    min-height: 100%;
    gap: clamp(2px, 0.36vh, 4px);
    --context-column-width: min(100%, calc(100vw - 32px));
  }

  .context-line {
    padding-inline: 4px;
    min-height: 1.14em;
  }

  .context-token {
    font-size: inherit;
    min-height: 0;
  }

  .progress-wrap {
    gap: 7px;
  }

  .progress-track {
    height: var(--progress-height);
  }

  .progress-meta {
    font-size: var(--progress-meta-size);
  }

  output {
    min-width: 72px;
    text-align: right;
  }

  .word-display {
    width: 100%;
  }
}

@media (max-width: 390px) {
  :root {
    --top-control-size: 42px;
    --top-icon-size: 23px;
    --bottom-control-size: 40px;
    --play-control-size: 54px;
    --progress-meta-size: clamp(0.72rem, 2.45vw, 0.82rem);
    --menu-icon-size: 48px;
    --menu-row-min-height: 78px;
  }

  .top-bar,
  .ebook-top-bar {
    gap: 6px;
  }

  .brand-block,
  .ebook-title-block {
    width: min(58vw, 224px);
    max-width: calc(100% - 132px);
  }

  body:not(.has-loaded-text) .brand-block span,
  body:not(.has-loaded-text) .ebook-title-block span {
    font-size: clamp(1rem, 4vw, 1.22rem);
    letter-spacing: 0.012em;
  }

  .speed-control {
    gap: 8px;
  }

  output {
    min-width: 68px;
    font-size: 0.84rem;
  }

  .menu-card {
    padding-inline: 18px;
  }

  .progress-meta,
  .ebook-progress-row {
    gap: 8px;
  }

  .ebook-page.is-empty {
    padding-inline: clamp(18px, 6vw, 24px);
  }

  .empty-reader-state {
    --empty-reader-title-line: clamp(28px, 6.7vw, 36px);
    width: min(330px, calc(100vw - var(--screen-pad-left) - var(--screen-pad-right) - 28px));
    gap: clamp(14px, 1.9vh, 18px);
  }

  .empty-reader-actions {
    width: min(296px, 100%);
    gap: 8px;
  }

  .empty-reader-action {
    min-height: 46px;
    padding-inline: 12px;
    font-size: 0.88rem;
  }
}

@media (max-width: 360px) {
  :root {
    --menu-icon-size: 44px;
    --menu-row-min-height: 74px;
  }

  .menu-card {
    padding-inline: 16px;
  }

  .controls {
    gap: 8px;
  }

  .transport-controls {
    width: clamp(176px, 55vw, 188px);
    gap: 14px;
    padding: 5px 7px;
  }

  body.has-source-link.has-pdf-page-navigation .transport-controls {
    width: clamp(176px, 50vw, 204px);
  }

  .round-side-button {
    width: 38px;
    min-width: 38px;
    min-height: 38px;
    font-size: 1.62rem;
  }

  .play-control-button {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
  }

  .text-size-button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
  }

  .bottom-mode-button,
  .pdf-source-toggle-button {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    height: 40px;
  }

  .font-size-popover {
    gap: 4px;
    padding: 6px;
  }

  .slider-row {
    gap: 9px;
    font-size: 0.88rem;
  }

  .speed-control {
    gap: 9px;
  }

  output {
    min-width: 64px;
    font-size: 0.8rem;
  }
}

@media (max-height: 700px) and (max-width: 560px) {
  .reader-panel {
    gap: 6px;
  }

  .bottom-dock {
    gap: 5px;
    padding-top: 5px;
    padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px));
  }

  .progress-wrap {
    gap: 5px;
  }

  .transport-controls {
    padding-block: 4px;
  }

  .pdf-source-actions {
    bottom: max(32px, calc(env(safe-area-inset-bottom) + 20px));
  }

  .menu-card {
    padding-top: clamp(42px, 6.4vh, 58px);
    gap: 11px;
  }

  .menu-main {
    gap: 14px;
  }

  .ebook-reader {
    gap: 7px;
    padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 8px));
  }

  .ebook-page {
    padding:
      clamp(12px, 2.2vh, 20px)
      clamp(18px, 6vw, 34px)
      clamp(12px, 2.2vh, 20px);
    line-height: 1.52;
  }

  .ebook-bottom-bar {
    gap: 4px;
  }

  .coach-card-play {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom) + 198px);
  }

  .coach-card-context-open {
    bottom: calc(env(safe-area-inset-bottom) + 74px);
  }
}

/* Settings landing redesign */
.menu-card {
  padding:
    clamp(72px, 9.4vh, 104px)
    clamp(28px, 7.6vw, 38px)
    max(28px, env(safe-area-inset-bottom));
}

.menu-main {
  gap: clamp(22px, 3vh, 32px);
  padding-bottom: 12px;
}

/* Settings landing second pass: tighter, opaque, line-icon system */
.input-panel {
  background: var(--paper);
}

.menu-card {
  width: min(430px, 100%);
  padding:
    clamp(66px, 8.1vh, 88px)
    clamp(24px, 6.4vw, 32px)
    max(24px, env(safe-area-inset-bottom));
}

.menu-main {
  gap: clamp(18px, 2.35vh, 25px);
}

@media (max-height: 760px) and (max-width: 560px) {
  .menu-card {
    padding-top: clamp(56px, 7vh, 70px);
  }

  }

/* Settings landing third pass: wider tiles and refined line icons */
.menu-card {
  width: min(540px, 100%);
  padding:
    clamp(64px, 7.8vh, 84px)
    clamp(12px, 3.6vw, 18px)
    max(24px, env(safe-area-inset-bottom));
}

.menu-main {
  gap: clamp(17px, 2.2vh, 23px);
}

@media (max-width: 390px) {
  .menu-card {
    padding-inline: clamp(16px, 4.5vw, 22px);
  }

  }

/* Settings landing fourth pass: inline SVG icons */

/* Settings hero abstract accent */

/* Settings calm editorial pass */
.input-panel {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 42%),
    var(--paper);
}

.menu-card {
  width: min(520px, 100%);
  padding:
    clamp(72px, 8.5vh, 92px)
    clamp(18px, 5vw, 28px)
    max(30px, env(safe-area-inset-bottom));
}

.menu-main {
  gap: clamp(24px, 3.2vh, 34px);
}

.brand-red-letter {
  color: var(--accent);
}

.menu-chevron {
  opacity: 0.44;
}

@media (max-height: 760px) and (max-width: 560px) {
  .menu-card {
    padding-top: clamp(62px, 7.5vh, 78px);
  }

  .menu-main {
    gap: 20px;
  }
}

/* Reading Stats dashboard */
.stats-view .collection-header {
  align-items: end;
  margin-bottom: 2px;
}

.stats-view .collection-header h2 {
  font-family: var(--reading-font);
  font-size: clamp(2rem, 7.4vw, 2.7rem);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: 0;
  overflow: visible;
  padding-bottom: 2px;
}

.stats-view .collection-header p {
  margin-top: 8px;
  max-width: 26ch;
  color: rgba(87, 82, 74, 0.72);
  font-family: var(--reading-font);
  font-size: clamp(0.98rem, 3.4vw, 1.12rem);
  line-height: 1.28;
}

.stats-stack {
  gap: 14px;
}

/* Stats icon tightening */

/* Stats presentation refinement */
.stats-stack {
  gap: 10px;
}

@media (max-width: 560px) {
  .stats-view .collection-header h2 {
    font-size: clamp(1.86rem, 8vw, 2.34rem);
  }

  }

/* Stats concept-density pass */
.stats-view .collection-header {
  margin-bottom: 0;
}

.stats-view .collection-back {
  align-self: start;
  margin-top: 0;
}

.stats-view .collection-header h2 {
  font-size: clamp(1.84rem, 6.7vw, 2.42rem);
  line-height: 1.04;
}

.stats-view .collection-header p {
  margin-top: 5px;
  max-width: 30ch;
  font-size: clamp(0.88rem, 3vw, 1.02rem);
  line-height: 1.22;
}

.stats-stack {
  gap: 10px;
}

@media (max-width: 560px) {
  .stats-view .collection-header h2 {
    font-size: clamp(2.08rem, 10vw, 2.72rem);
  }

  }

/* Stats final polish: calmer title, period charts, cleaner icons */
.stats-view .collection-header h2 {
  font-size: clamp(1.74rem, 6.4vw, 2.18rem);
  font-weight: 500;
  line-height: 1.09;
}

.stats-view .collection-header p {
  max-width: 28ch;
  color: rgba(87, 82, 74, 0.66);
  font-size: clamp(0.86rem, 2.9vw, 0.98rem);
}

@media (max-width: 560px) {
  .stats-view .collection-header h2 {
    font-size: clamp(1.9rem, 8.1vw, 2.26rem);
  }
}

/* Settings premium polish: restrained tactile refinement */
.input-panel {
  background:
    radial-gradient(circle at 50% -8%, rgba(255, 255, 255, 0.72), transparent 42%),
    linear-gradient(
      180deg,
      rgba(248, 245, 238, 0.99) 0%,
      rgba(246, 242, 234, 0.99) 48%,
      rgba(241, 236, 226, 0.99) 100%
    );
}

.input-panel .menu-close {
  color: rgba(45, 42, 38, 0.48);
  background: rgba(255, 253, 247, 0.68);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.3),
    0 9px 20px rgba(40, 36, 28, 0.052);
}

.input-panel .menu-close span,
.input-panel .menu-close span::after {
  height: 1.75px;
  opacity: 0.82;
}

body.settings-background-subtle-material .input-panel,
.input-panel.settings-background-subtle-material {
  background-color: rgb(243, 237, 226);
  background-image:
    linear-gradient(
      180deg,
      rgba(252, 248, 241, 0.36) 0%,
      rgba(244, 237, 226, 0.18) 48%,
      rgba(236, 229, 216, 0.24) 100%
    ),
    url("assets/backgrounds/settings-subtle-material.png");
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

body.settings-background-subtle-material .input-panel .menu-card,
.input-panel.settings-background-subtle-material .menu-card {
  background: transparent;
}

/* Settings icon sizing nudge */

/* Optional flat icon trial */

body.focus-background-subtle-material .reader-panel,
body.ebook-background-subtle-material .ebook-reader {
  background-color: rgb(247, 244, 236);
  background-image:
    linear-gradient(
      180deg,
      rgba(252, 248, 241, 0.5) 0%,
      rgba(247, 244, 236, 0.22) 48%,
      rgba(238, 231, 218, 0.28) 100%
    ),
    url("assets/backgrounds/settings-subtle-material.png");
  background-position: center top, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
}

/* Settings menu icons from supplied artwork batch */

/* Settings icon alignment: keep every menu icon on one optical grid. */

/* Final optical alignment for the settings rows. Some supplied icon PNGs have
   larger canvases than others, so pin the row grid and compensate per asset. */

/* Chapters full-page card redesign */
.chapter-panel {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.72), transparent 44%),
    linear-gradient(180deg, rgba(250, 247, 240, 0.99), rgba(244, 237, 225, 0.99));
  touch-action: none;
}

.chapter-sheet {
  --chapter-page-pad-x: clamp(22px, 6vw, 42px);
  --chapter-rail-x: clamp(18px, 4.8vw, 28px);
  --chapter-card-gap: clamp(42px, 10vw, 58px);
  --chapter-row-height: 76px;
  width: 100%;
  height: 100dvh;
  max-height: none;
  padding:
    max(22px, calc(env(safe-area-inset-top) + 14px))
    max(var(--chapter-page-pad-x), env(safe-area-inset-right))
    max(16px, calc(env(safe-area-inset-bottom) + 14px))
    max(var(--chapter-page-pad-x), env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: clamp(18px, 3.2vh, 30px);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  touch-action: pan-y;
}

.chapter-menu-header {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: clamp(14px, 4vw, 26px);
  margin: 0;
}

.chapter-menu-header > [hidden] {
  display: grid !important;
  visibility: visible;
  pointer-events: auto;
}

.chapter-close-button span,
.chapter-close-button span::after {
  width: 22px;
  height: 2px;
  opacity: 0.76;
}

.chapter-book-cover {
  width: 44px;
  height: 62px;
  margin: 0;
  border-radius: 5px;
  font-size: 1rem;
  box-shadow:
    0 8px 16px rgba(40, 36, 28, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.chapter-book-copy {
  gap: 7px;
}

.chapter-book-copy strong {
  color: rgba(26, 24, 21, 0.92);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.8vw, 1.28rem);
  font-weight: 580;
  line-height: 1.06;
  transform: none;
}

.chapter-book-copy small {
  color: rgba(91, 87, 80, 0.64);
  font-family: var(--reading-font);
  font-size: clamp(0.78rem, 2.7vw, 0.98rem);
  font-weight: 440;
}

.chapter-screen-heading {
  padding-left: clamp(6px, 1.8vw, 16px);
}

.chapter-screen-heading h2 {
  margin: 0;
  color: rgba(18, 18, 17, 0.92);
  font-family: var(--reading-font);
  font-size: clamp(2.65rem, 11.2vw, 4.1rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.chapter-screen-heading h2 span {
  color: var(--accent);
}

.chapter-screen-heading p {
  margin: 16px 0 0;
  color: rgba(91, 87, 80, 0.64);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.8vw, 1.36rem);
  font-weight: 430;
}

.chapter-list {
  position: relative;
  display: grid;
  align-content: start;
  gap: 12px;
  margin: 0 calc(var(--chapter-page-pad-x) * -0.18) 0 0;
  padding: 2px 4px 18px 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-width: none;
}

.chapter-list::-webkit-scrollbar {
  display: none;
}

.chapter-option {
  --chapter-line-tone: rgba(195, 184, 166, 0.34);
  position: relative;
  z-index: 1;
  min-height: var(--chapter-row-height);
  height: var(--chapter-row-height);
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: var(--chapter-card-gap) minmax(0, 1fr);
  gap: 0;
  overflow: visible;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}

.chapter-option:active,
.chapter-option:focus,
.chapter-option:focus-visible {
  transform: none;
  outline: 0;
  box-shadow: none !important;
}

.chapter-option:first-child,
.chapter-option:last-child,
.chapter-option:only-child {
  border-radius: 0;
}

.chapter-option::before {
  content: "";
  position: absolute;
  top: -12px;
  bottom: -12px;
  left: calc(var(--chapter-rail-x) - 0.5px);
  z-index: 0;
  width: 1px;
  border-radius: 999px;
  background: var(--chapter-line-tone);
  pointer-events: none;
}

.chapter-option:first-child::before {
  top: 50%;
}

.chapter-option:last-child::before {
  bottom: 50%;
}

.chapter-option:only-child::before {
  content: none;
}

.chapter-option::after {
  content: none;
}

.chapter-option-status {
  position: relative;
  z-index: 2;
  grid-column: 1;
  align-self: center;
  justify-self: start;
  width: 17px;
  height: 17px;
  margin-left: calc(var(--chapter-rail-x) - 8.5px);
  border: 1.5px solid rgba(196, 185, 168, 0.48);
  border-radius: 50%;
  background: rgba(250, 247, 240, 0.98);
  box-shadow: 0 0 0 4px rgba(250, 247, 240, 0.72);
}

.chapter-status-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
}

.chapter-option.is-complete .chapter-option-status {
  border-color: rgba(62, 135, 123, 0.5);
  background: rgba(250, 247, 240, 0.98);
}

.chapter-option.is-complete .chapter-status-mark::before {
  content: "✓";
  color: rgba(62, 135, 123, 0.82);
  font-family: var(--ui-font);
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  transform: translateY(0.5px);
}

.chapter-option.is-current .chapter-option-status {
  border-color: rgba(200, 68, 60, 0.28);
  background: rgba(250, 247, 240, 0.98);
  box-shadow:
    0 0 0 4px rgba(250, 247, 240, 0.76),
    0 0 18px rgba(198, 58, 54, 0.18);
}

.chapter-option.is-current .chapter-status-mark::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(198, 58, 54, 0.86);
}

.chapter-option-card {
  position: relative;
  z-index: 1;
  grid-column: 2;
  min-width: 0;
  min-height: var(--chapter-row-height);
  padding: 0 clamp(16px, 4vw, 22px);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 22px;
  gap: clamp(14px, 3.4vw, 22px);
  align-items: center;
  border: 1px solid rgba(232, 224, 211, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.8), transparent 40%),
    rgba(255, 253, 248, 0.68);
  box-shadow:
    0 10px 24px rgba(40, 34, 25, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.chapter-option-number {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.62), transparent 44%),
    rgba(239, 233, 222, 0.66);
  color: rgba(31, 29, 26, 0.86);
  font-family: var(--reading-font);
  font-size: clamp(1.05rem, 4vw, 1.36rem);
  font-weight: 540;
  line-height: 1;
}

.chapter-option-copy {
  position: relative;
  z-index: 1;
  grid-column: auto;
  min-width: 0;
  align-self: center;
  display: grid;
  gap: 8px;
  padding: 0;
}

.chapter-option-copy strong {
  overflow: hidden;
  color: rgba(24, 23, 21, 0.9);
  font-family: var(--reading-font);
  font-size: clamp(1.02rem, 4.1vw, 1.34rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chapter-option-copy small {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(91, 87, 80, 0.64);
  font-family: var(--reading-font);
  font-size: clamp(0.78rem, 2.9vw, 0.98rem);
  font-weight: 440;
  letter-spacing: 0;
}

.chapter-option-chevron {
  position: relative;
  z-index: 1;
  grid-column: auto;
  align-self: center;
  justify-self: end;
  color: rgba(91, 87, 80, 0.44);
  font-family: var(--ui-font);
  font-size: 1.55rem;
  font-weight: 280;
  line-height: 1;
  pointer-events: none;
}

.chapter-option.is-current .chapter-option-card {
  border-color: rgba(198, 58, 54, 0.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.62), transparent 44%),
    linear-gradient(90deg, rgba(198, 58, 54, 0.12), rgba(198, 58, 54, 0.055));
  box-shadow:
    0 12px 26px rgba(126, 42, 36, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.chapter-option.is-current .chapter-option-number {
  background:
    radial-gradient(circle at 42% 22%, rgba(255, 255, 255, 0.22), transparent 38%),
    linear-gradient(145deg, rgba(215, 69, 62, 0.94), rgba(182, 49, 44, 0.94));
  color: rgba(255, 253, 247, 0.96);
  box-shadow: 0 8px 18px rgba(198, 58, 54, 0.2);
}

.chapter-option.is-current .chapter-option-copy strong,
.chapter-option.is-current .chapter-option-chevron {
  color: rgba(177, 45, 40, 0.94);
}

@media (max-width: 390px), (max-height: 760px) {
  .chapter-sheet {
    --chapter-page-pad-x: clamp(18px, 5vw, 28px);
    --chapter-card-gap: 46px;
    --chapter-row-height: 68px;
    gap: 16px;
    padding-top: max(18px, calc(env(safe-area-inset-top) + 10px));
  }

  .chapter-menu-header {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
  }

  .chapter-book-cover {
    width: 38px;
    height: 54px;
  }

  .chapter-screen-heading h2 {
    font-size: clamp(2.22rem, 10vw, 3rem);
  }

  .chapter-screen-heading p {
    margin-top: 10px;
  }

  .chapter-option-card {
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    gap: 13px;
    border-radius: 16px;
    padding-inline: 14px;
  }

  .chapter-option-number {
    width: 36px;
    height: 36px;
  }

}

/* Chapters second draft: align the header with reader modes and tighten cards */
.chapter-sheet {
  --chapter-page-pad-x: clamp(20px, 5.2vw, 38px);
  --chapter-rail-x: clamp(15px, 4vw, 24px);
  --chapter-card-gap: clamp(38px, 8.8vw, 50px);
  --chapter-row-height: 64px;
  padding:
    var(--screen-pad-top)
    max(var(--chapter-page-pad-x), env(safe-area-inset-right))
    max(14px, calc(env(safe-area-inset-bottom) + 12px))
    max(var(--chapter-page-pad-x), env(safe-area-inset-left));
  gap: clamp(12px, 2.3vh, 22px);
}

.chapter-menu-header.chapter-top-bar {
  position: relative;
  z-index: 68;
  display: grid;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: var(--top-control-size);
  margin: 0;
}

.chapter-top-bar > .top-icon-button {
  margin-inline-start: var(--top-corner-inset);
  color: rgba(69, 64, 58, 0.58);
}

.chapter-actions {
  position: relative;
  z-index: 2;
  grid-column: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.chapter-screen-heading {
  padding-left: clamp(4px, 1.2vw, 10px);
}

.chapter-screen-heading h2 {
  font-size: clamp(2.25rem, 8.6vw, 3.25rem);
  line-height: 0.98;
}

.chapter-screen-heading p {
  margin-top: 8px;
  font-size: clamp(0.94rem, 3.15vw, 1.12rem);
}

.chapter-search {
  width: min(100%, 520px);
  min-height: 42px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: -8px 0 0 clamp(4px, 1.2vw, 10px);
  padding: 0 15px;
  border: 1px solid rgba(224, 214, 198, 0.7);
  border-radius: 999px;
  background:
    radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.82), transparent 52%),
    rgba(255, 253, 248, 0.72);
  color: rgba(91, 83, 72, 0.58);
  box-shadow:
    0 14px 28px rgba(40, 34, 25, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.chapter-search-icon {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chapter-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(30, 28, 25, 0.88);
  font-family: var(--ui-font);
  font-size: clamp(0.84rem, 2.45vw, 0.94rem);
  font-weight: 560;
  letter-spacing: 0;
}

.chapter-search input::placeholder {
  color: rgba(91, 83, 72, 0.48);
  opacity: 1;
}

.chapter-list {
  --chapter-row-gap: 8px;
  gap: 8px;
  margin-right: 0;
  padding: 1px 3px 14px 0;
}

.chapter-list.is-virtualized {
  display: block;
  position: relative;
  contain: layout paint;
}

.chapter-list.is-virtualized .chapter-virtual-canvas {
  position: relative;
  width: 100%;
}

.chapter-list.is-virtualized .chapter-virtual-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  will-change: transform;
}

.chapter-list.is-virtualized .chapter-option,
.chapter-list.is-virtualized .chapter-volume-divider {
  width: 100%;
}

.chapter-option {
  min-height: var(--chapter-row-height);
  height: var(--chapter-row-height);
}

.chapter-option-card {
  min-height: var(--chapter-row-height);
  grid-template-columns: 36px minmax(0, 1fr) 18px;
  gap: 12px;
  padding: 0 14px;
  border-radius: 15px;
  box-shadow:
    0 8px 18px rgba(40, 34, 25, 0.038),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.chapter-option-number {
  width: 34px;
  height: 34px;
  font-size: clamp(0.95rem, 3.35vw, 1.12rem);
}

.chapter-option-copy {
  gap: 5px;
}

.chapter-option-copy strong {
  font-size: clamp(0.95rem, 3.35vw, 1.12rem);
  font-weight: 500;
}

.chapter-option-copy small {
  gap: 8px;
  font-size: clamp(0.7rem, 2.35vw, 0.84rem);
}

.chapter-option-chevron {
  font-size: 1.32rem;
}

.chapter-option.is-current .chapter-option-card {
  border-color: rgba(198, 58, 54, 0.11);
  box-shadow:
    0 9px 20px rgba(126, 42, 36, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

@media (max-width: 390px), (max-height: 760px) {
  .chapter-sheet {
    --chapter-page-pad-x: clamp(18px, 5vw, 28px);
    --chapter-card-gap: 42px;
    --chapter-row-height: 58px;
    gap: 12px;
    padding-top: var(--screen-pad-top);
  }

  .chapter-menu-header.chapter-top-bar {
    grid-template-columns: var(--top-control-size) minmax(0, 1fr) auto;
  }

  .chapter-option-card {
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    gap: 11px;
    padding-inline: 12px;
  }

  .chapter-option-number {
    width: 31px;
    height: 31px;
  }
}

/* Chapters fine tuning: match reader header, single rail, centred dock contents */
.chapter-sheet {
  --chapter-rail-x: clamp(10px, 2.7vw, 17px);
  --chapter-card-gap: clamp(34px, 7.6vw, 46px);
}

.chapter-menu-header.chapter-top-bar {
  margin-left: calc(var(--screen-pad-left) - var(--chapter-page-pad-x));
  margin-right: calc(var(--screen-pad-right) - var(--chapter-page-pad-x));
}

.chapter-list::before {
  content: none;
}

.chapter-option::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--chapter-rail-x) - 0.5px);
  z-index: 0;
  width: 1px;
  height: calc(var(--chapter-row-height) + var(--chapter-row-gap));
  border-radius: 999px;
  background: rgba(195, 184, 166, 0.28);
  pointer-events: none;
}

.chapter-option:last-child::before,
.chapter-option:only-child::before {
  content: none !important;
}

.chapter-volume-divider {
  position: relative;
  z-index: 1;
  min-height: 34px;
  display: grid;
  grid-template-columns: var(--chapter-card-gap) minmax(0, 1fr);
  align-items: center;
  margin: -1px 0;
  color: rgba(118, 106, 91, 0.72);
  pointer-events: none;
}

.chapter-volume-divider::before {
  content: "";
  position: absolute;
  top: calc(var(--chapter-row-gap) * -0.75);
  bottom: calc(var(--chapter-row-gap) * -0.75);
  left: calc(var(--chapter-rail-x) - 0.5px);
  width: 1px;
  border-radius: 999px;
  background: rgba(195, 184, 166, 0.28);
}

.chapter-volume-divider span {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr);
  align-items: center;
  gap: clamp(10px, 3vw, 16px);
  padding-right: clamp(18px, 4.4vw, 24px);
  font-family: var(--ui-font);
  font-size: clamp(0.68rem, 2.15vw, 0.8rem);
  font-weight: 640;
  letter-spacing: 0.26em;
  line-height: 1;
  text-transform: uppercase;
}

.chapter-volume-divider.is-level-2 {
  min-height: 30px;
  margin: -3px 0;
  color: rgba(134, 119, 100, 0.74);
}

.chapter-volume-divider.is-level-2 span {
  gap: clamp(8px, 2.6vw, 14px);
  font-size: clamp(0.62rem, 2vw, 0.74rem);
  font-weight: 620;
  letter-spacing: 0.22em;
}

.chapter-volume-divider.is-level-3 {
  min-height: 26px;
  margin: -4px 0;
  color: rgba(134, 119, 100, 0.62);
}

.chapter-volume-divider.is-level-3 span {
  font-size: clamp(0.58rem, 1.9vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.18em;
}

.chapter-volume-divider span::before,
.chapter-volume-divider span::after {
  content: "";
  height: 1px;
  border-radius: 999px;
  background: rgba(194, 181, 163, 0.46);
}

.chapter-search-empty {
  grid-column: 1 / -1;
  margin: 14px 0 0 var(--chapter-card-gap);
  padding: 20px 22px;
  border: 1px solid rgba(224, 214, 198, 0.56);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.56);
  color: rgba(91, 83, 72, 0.62);
  font-family: var(--reading-font);
  font-size: clamp(0.94rem, 3vw, 1.08rem);
  line-height: 1.35;
}

.chapter-option.is-search-result {
  height: auto;
  min-height: 88px;
}

.chapter-option.is-search-result::before {
  height: calc(100% + var(--chapter-row-gap));
}

.chapter-option.is-search-result .chapter-option-card {
  min-height: 88px;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}

.chapter-option.is-search-result .chapter-option-copy {
  gap: 7px;
}

.chapter-option.is-search-result .chapter-option-copy small {
  min-width: 0;
}

.chapter-result-snippet {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(42, 37, 31, 0.9);
  font-family: var(--reading-font);
  font-size: clamp(0.9rem, 2.75vw, 1.04rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.chapter-result-match {
  color: rgb(127, 44, 39);
  background: rgba(198, 58, 54, 0.12);
  border-radius: 0.34em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.16em 0.03em;
}

.chapter-result-ellipsis {
  color: rgba(91, 83, 72, 0.5);
}

.chapter-option-status {
  width: 18px;
  height: 18px;
  margin-left: calc(var(--chapter-rail-x) - 9px);
  background: rgb(248, 244, 236);
  box-shadow: none;
}

.chapter-option.is-complete .chapter-option-status,
.chapter-option.is-current .chapter-option-status {
  background: rgb(248, 244, 236);
}

.chapter-option.is-current .chapter-option-status {
  border-color: rgba(200, 68, 60, 0.32);
  box-shadow:
    0 0 15px rgba(198, 58, 54, 0.16);
}

.chapter-option.is-current .chapter-status-mark::before {
  width: 8px;
  height: 8px;
  justify-self: center;
  align-self: center;
}

/* Chapters final alignment: smaller rail nodes, no row number badges */
.chapter-option-card {
  grid-template-columns: minmax(0, 1fr) 18px;
  gap: 10px;
  padding: 0 clamp(18px, 4.4vw, 24px);
}

.chapter-option-number {
  display: none !important;
}

.chapter-option-status {
  width: 12px;
  height: 12px;
  margin-left: calc(var(--chapter-rail-x) - 6px);
  border-width: 1.35px;
  background: var(--paper);
  box-shadow: none !important;
}

.chapter-option.is-complete .chapter-option-status {
  width: 14px;
  height: 14px;
  margin-left: calc(var(--chapter-rail-x) - 7px);
  border-width: 1.45px;
}

.chapter-option.is-current .chapter-option-status {
  width: 16px;
  height: 16px;
  margin-left: calc(var(--chapter-rail-x) - 8px);
  border-width: 1.45px;
  background: var(--paper);
  box-shadow: none !important;
}

.chapter-option.is-current .chapter-status-mark::before {
  width: 7px;
  height: 7px;
}

@media (max-width: 390px), (max-height: 760px) {
  .chapter-option-card {
    grid-template-columns: minmax(0, 1fr) 16px;
    gap: 9px;
    padding-inline: 16px;
  }

  .chapter-option-status {
    width: 11px;
    height: 11px;
    margin-left: calc(var(--chapter-rail-x) - 5.5px);
  }

  .chapter-option.is-complete .chapter-option-status {
    width: 13px;
    height: 13px;
    margin-left: calc(var(--chapter-rail-x) - 6.5px);
  }

  .chapter-option.is-current .chapter-option-status {
    width: 15px;
    height: 15px;
    margin-left: calc(var(--chapter-rail-x) - 7.5px);
  }

  .chapter-volume-divider {
    min-height: 30px;
  }

  .chapter-volume-divider span {
    padding-right: 16px;
    font-size: clamp(0.62rem, 2vw, 0.72rem);
    letter-spacing: 0.22em;
  }
}

/* Chapter structure screen inspired by the research-style contents mockup. */
.chapter-panel {
  background:
    radial-gradient(circle at 50% -12%, rgba(255, 255, 255, 0.86), transparent 38%),
    linear-gradient(180deg, rgb(253, 250, 244), rgb(247, 242, 233)) !important;
  touch-action: pan-y !important;
  overscroll-behavior: contain;
}

.chapter-sheet {
  --chapter-page-pad-x: clamp(16px, 4.4vw, 30px);
  --chapter-row-height: 72px;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.45vh, 14px);
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 820px;
  margin: 0 auto;
  padding:
    max(12px, calc(env(safe-area-inset-top) + 8px))
    max(var(--chapter-page-pad-x), env(safe-area-inset-right))
    max(10px, calc(env(safe-area-inset-bottom) + 8px))
    max(var(--chapter-page-pad-x), env(safe-area-inset-left));
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.chapter-menu-header.chapter-top-bar {
  flex: 0 0 auto;
  min-height: 44px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 10px;
}

.chapter-panel .top-icon-button,
.chapter-panel .chapter-icon-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
}

.chapter-screen-heading {
  padding-left: 0;
}

.chapter-screen-heading h2 {
  font-size: clamp(2.15rem, 6.7vw, 3.1rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.chapter-screen-heading p {
  margin-top: 6px;
  color: rgba(92, 84, 72, 0.7);
  font-size: clamp(0.84rem, 2.45vw, 1rem);
}

.chapter-search {
  flex: 0 0 auto;
  width: 100%;
  min-height: 46px;
  grid-template-columns: 18px minmax(0, 1fr) 20px;
  gap: 10px;
  margin: 0;
  padding: 0 clamp(14px, 3.5vw, 18px);
  border-color: rgba(218, 207, 191, 0.74);
  border-radius: 999px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.95), transparent 46%),
    linear-gradient(180deg, rgba(255, 254, 250, 0.94), rgba(253, 248, 240, 0.82));
  box-shadow:
    0 18px 36px rgba(55, 46, 35, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.chapter-search-icon {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}

.chapter-search input {
  font-family: var(--ui-font);
  font-size: clamp(0.86rem, 2.45vw, 0.98rem);
  font-weight: 520;
}

.chapter-panel-kicker {
  color: rgba(74, 64, 52, 0.76);
  font-family: var(--ui-font);
  font-size: clamp(0.62rem, 1.85vw, 0.72rem);
  font-weight: 760;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.chapter-current-card,
.chapter-journey-card {
  flex: 0 0 auto;
  border: 1px solid rgba(222, 211, 194, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.9), transparent 44%),
    linear-gradient(180deg, rgba(255, 253, 249, 0.86), rgba(252, 247, 239, 0.74));
  box-shadow:
    0 18px 42px rgba(58, 45, 31, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.chapter-journey-card {
  padding: clamp(18px, 4.2vw, 24px);
  display: grid;
  gap: 18px;
}

.chapter-journey-track {
  --chapter-journey-stage-width: clamp(96px, 26vw, 118px);
  --chapter-journey-gap: clamp(10px, 2.6vw, 18px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--chapter-journey-count, 1), var(--chapter-journey-stage-width));
  gap: var(--chapter-journey-gap);
  margin-inline: -2px;
  padding: 2px 2px 9px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.chapter-journey-track::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 11px;
  height: 2px;
  width: calc(var(--chapter-journey-track-width, 100%) - 22px);
  min-width: calc(100% - 22px);
  border-radius: 999px;
  background: rgba(194, 181, 163, 0.58);
}

.chapter-journey-track::-webkit-scrollbar {
  height: 3px;
}

.chapter-journey-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(112, 96, 74, 0.28);
}

.chapter-journey-stage {
  position: relative;
  z-index: 1;
  width: var(--chapter-journey-stage-width);
  min-width: var(--chapter-journey-stage-width);
  display: grid;
  justify-items: center;
  gap: 8px;
  scroll-snap-align: center;
  text-align: center;
}

.chapter-journey-node {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(99, 129, 112, 0.82);
  border-radius: 50%;
  background: rgb(254, 251, 245);
}

.chapter-journey-stage.is-complete .chapter-journey-node {
  background: rgba(99, 129, 112, 0.86);
}

.chapter-journey-stage.is-upcoming .chapter-journey-node {
  border-color: rgba(194, 181, 163, 0.58);
}

.chapter-journey-stage strong {
  overflow: hidden;
  max-width: 100%;
  color: rgba(35, 31, 27, 0.9);
  display: -webkit-box;
  font-family: var(--reading-font);
  font-size: clamp(0.88rem, 2.7vw, 1.04rem);
  font-weight: 520;
  line-height: 1.12;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.chapter-journey-stage small {
  color: rgba(97, 86, 72, 0.7);
  font-family: var(--reading-font);
  font-size: clamp(0.72rem, 2.25vw, 0.84rem);
}

.chapter-journey-stage.is-current strong {
  color: rgba(152, 55, 48, 0.9);
}

.chapter-journey-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-top: 13px;
  border-top: 1px solid rgba(222, 211, 194, 0.68);
  color: rgba(87, 77, 64, 0.72);
  font-family: var(--ui-font);
  font-size: clamp(0.76rem, 2.25vw, 0.9rem);
  font-weight: 600;
}

.chapter-list-heading {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 0;
  color: rgba(55, 48, 39, 0.78);
  font-family: var(--ui-font);
  font-size: clamp(0.64rem, 1.95vw, 0.74rem);
  font-weight: 760;
  letter-spacing: 0.13em;
  line-height: 1;
  text-transform: uppercase;
}

.chapter-list-heading small {
  color: rgba(93, 83, 70, 0.66);
  font-size: 0.96em;
  letter-spacing: 0.02em;
  text-transform: none;
}

.chapter-list {
  flex: 0 0 auto;
  min-height: auto;
  gap: 0;
  margin: 0;
  padding: 0 0 max(12px, env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: visible;
  -webkit-overflow-scrolling: auto;
  touch-action: pan-y;
  overscroll-behavior: auto;
}

.chapter-list.is-virtualized {
  display: block;
  flex: 1 1 auto;
  min-height: min(240px, 44vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.chapter-option {
  min-height: var(--chapter-row-height);
  height: auto;
  display: block;
  touch-action: pan-y;
}

.chapter-option::before,
.chapter-option-status {
  display: none !important;
}

.chapter-option-card {
  min-height: var(--chapter-row-height);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  gap: 14px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(222, 211, 194, 0.58);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.chapter-option:last-child .chapter-option-card {
  border-bottom: 0;
}

.chapter-option-number {
  width: 31px;
  height: 31px;
  display: grid !important;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(98, 123, 107, 0.9), rgba(58, 84, 74, 0.94));
  color: rgba(255, 253, 247, 0.98);
  font-family: var(--ui-font);
  font-size: 0.82rem;
  font-weight: 780;
  line-height: 1;
  box-shadow:
    0 10px 18px rgba(50, 67, 58, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.chapter-option-copy {
  gap: 7px;
}

.chapter-option-copy strong {
  font-size: clamp(0.9rem, 2.85vw, 1.06rem);
}

.chapter-option-copy small {
  color: rgba(93, 83, 70, 0.7);
  font-size: clamp(0.7rem, 2.15vw, 0.82rem);
}

.chapter-option-chevron {
  color: rgba(93, 83, 70, 0.58);
  font-size: 1.25rem;
}

.chapter-option.is-current .chapter-option-card {
  margin: 5px;
  min-height: calc(var(--chapter-row-height) - 2px);
  border: 1px solid rgba(184, 67, 58, 0.14);
  border-radius: 13px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.72), transparent 44%),
    linear-gradient(90deg, rgba(184, 67, 58, 0.08), rgba(99, 129, 112, 0.045));
  box-shadow:
    0 12px 26px rgba(88, 69, 49, 0.052),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.chapter-option.is-current .chapter-option-copy strong,
.chapter-option.is-current .chapter-option-chevron {
  color: rgba(145, 48, 43, 0.92);
}

.chapter-option.is-current .chapter-option-number {
  background: linear-gradient(145deg, rgba(197, 70, 60, 0.92), rgba(152, 49, 43, 0.94));
  box-shadow:
    0 10px 18px rgba(150, 57, 48, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.chapter-volume-divider {
  min-height: 32px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 12px 16px 6px;
  background: rgba(247, 240, 229, 0.48);
  border-bottom: 1px solid rgba(222, 211, 194, 0.5);
}

.chapter-volume-divider::before {
  content: none;
}

.chapter-volume-divider span {
  display: block;
  padding: 0;
  color: rgba(54, 47, 39, 0.7);
  font-size: clamp(0.72rem, 2.2vw, 0.84rem);
  letter-spacing: 0.14em;
}

.chapter-volume-divider span::before,
.chapter-volume-divider span::after {
  content: none;
}

.chapter-option.is-search-result {
  min-height: 104px;
}

.chapter-option.is-search-result .chapter-option-card {
  grid-template-columns: minmax(0, 1fr) 22px;
}

.chapter-search-empty {
  margin: 18px;
}

@media (max-width: 520px) {
  .chapter-sheet {
    --chapter-page-pad-x: clamp(14px, 4vw, 22px);
    --chapter-row-height: 66px;
    gap: 8px;
  }

  .chapter-journey-track {
    --chapter-journey-stage-width: clamp(88px, 31vw, 112px);
  }

  .chapter-journey-stage strong {
    font-size: 0.82rem;
  }

  .chapter-option-card {
    grid-template-columns: 31px minmax(0, 1fr) 15px;
    gap: 12px;
    padding-inline: 13px;
  }

  .chapter-option-number {
    width: 29px;
    height: 29px;
    border-radius: 7px;
    font-size: 0.78rem;
  }
}

@media (max-height: 760px) {
  .chapter-screen-heading h2 {
    font-size: clamp(1.95rem, 6vw, 2.55rem);
  }

  .chapter-screen-heading p,
  .chapter-current-ring small,
  .chapter-journey-meta {
    display: none;
  }

  .chapter-search {
    min-height: 42px;
  }

  .chapter-journey-card {
    padding-block: 12px;
  }
}

/* Settings/chapter heading alignment */

/* Library destination redesign */
.collection-view {
  gap: clamp(18px, 2.8vh, 26px);
}

.collection-view .library-header {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding-top: clamp(8px, 1.8vh, 18px);
}

.collection-view .library-header h2 {
  font-family: var(--reading-font);
  font-size: clamp(2.45rem, 9.4vw, 3.28rem);
  font-weight: 510;
  line-height: 0.98;
  letter-spacing: -0.012em;
}

.collection-view .library-header p {
  margin-top: 10px;
  color: rgba(86, 81, 73, 0.62);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.6vw, 1.18rem);
}

.library-search {
  min-height: 56px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(222, 214, 201, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.9), rgba(255, 252, 246, 0.78));
  box-shadow:
    0 12px 28px rgba(40, 36, 28, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.library-search span {
  position: relative;
  width: 18px;
  height: 18px;
  display: block;
  border: 2px solid rgba(86, 81, 73, 0.55);
  border-radius: 50%;
}

.library-search span::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(86, 81, 73, 0.55);
  transform: rotate(45deg);
  transform-origin: left center;
}

.library-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(28, 27, 25, 0.9);
  font-family: var(--reading-font);
  font-size: clamp(0.96rem, 3.5vw, 1.08rem);
}

.library-search input::placeholder {
  color: rgba(86, 81, 73, 0.52);
}

.library-section {
  display: grid;
  gap: 12px;
}

.library-section-heading {
  padding-inline: 2px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.library-section-heading h3 {
  margin: 0;
  color: rgba(28, 27, 25, 0.92);
  font-family: var(--reading-font);
  font-size: clamp(1.08rem, 4vw, 1.28rem);
  font-weight: 560;
  line-height: 1.08;
}

.library-section-heading span {
  color: rgba(86, 81, 73, 0.58);
  font-size: 0.82rem;
  font-weight: 620;
}

.library-continue-card {
  min-height: 132px;
}

.library-feature-button {
  width: 100%;
  min-height: 132px;
  padding: 16px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: center;
  border: 1px solid rgba(215, 91, 79, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.86), transparent 42%),
    linear-gradient(135deg, rgba(255, 251, 247, 0.92), rgba(250, 238, 232, 0.62));
  color: var(--ink);
  text-align: left;
  box-shadow:
    0 14px 34px rgba(65, 41, 30, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.library-feature-cover {
  width: 72px;
  height: 96px;
  overflow: hidden;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(92, 130, 112, 0.82), rgba(48, 86, 76, 0.92));
  color: rgba(255, 253, 247, 0.92);
  font-family: var(--reading-font);
  font-size: 1.9rem;
  box-shadow:
    0 8px 16px rgba(44, 32, 22, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.library-feature-cover.has-image {
  background: rgba(229, 222, 210, 0.78);
}

.library-feature-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.library-feature-copy,
.collection-copy {
  min-width: 0;
}

.library-feature-copy {
  display: grid;
  gap: 8px;
}

.library-feature-copy strong {
  overflow: hidden;
  color: rgba(28, 27, 25, 0.95);
  font-family: var(--reading-font);
  font-size: clamp(1.1rem, 4.2vw, 1.36rem);
  font-weight: 560;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-feature-copy small {
  overflow: hidden;
  color: rgba(86, 81, 73, 0.64);
  font-size: 0.82rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-progress-line {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  display: block;
  background: rgba(222, 214, 201, 0.64);
}

.library-progress-line span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: rgba(196, 62, 54, 0.85);
}

.library-feature-percent {
  align-self: end;
  color: rgba(196, 62, 54, 0.72);
  font-size: 0.8rem;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
}

.collection-view .collection-list {
  gap: 11px;
}

.collection-view .collection-item {
  min-height: 94px;
  padding: 9px 10px;
  grid-template-columns: minmax(0, 1fr) 34px;
  border-color: rgba(222, 214, 201, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.9), rgba(255, 252, 246, 0.78));
  box-shadow:
    0 9px 24px rgba(40, 36, 28, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.collection-view .collection-open {
  min-height: 76px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
}

.collection-view .collection-cover {
  width: 52px;
  height: 68px;
  border-radius: 7px;
  font-family: var(--reading-font);
  box-shadow:
    0 6px 13px rgba(44, 32, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.collection-view .collection-copy strong {
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.7vw, 1.18rem);
  font-weight: 540;
}

.collection-view .collection-copy small,
.collection-view .collection-meta,
.collection-view .collection-empty {
  color: rgba(86, 81, 73, 0.62);
}

.collection-view .collection-progress {
  height: 4px;
  margin-top: 2px;
  background: rgba(222, 214, 201, 0.64);
}

.collection-view .collection-progress span {
  background: rgba(196, 62, 54, 0.82);
}

.collection-view .collection-meta {
  color: rgba(196, 62, 54, 0.72);
  font-size: 0.76rem;
  font-weight: 730;
}

.collection-view .collection-delete {
  width: 34px;
  height: 34px;
  min-height: 34px;
  background: rgba(255, 253, 247, 0.66);
  color: rgba(126, 92, 76, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.28),
    0 8px 18px rgba(40, 36, 28, 0.04);
}

.collection-view .collection-empty {
  margin: 0;
  padding: 28px 22px;
  border-style: solid;
  border-color: rgba(222, 214, 201, 0.34);
  background: rgba(255, 253, 247, 0.48);
  font-family: var(--reading-font);
  font-size: 1.02rem;
}

@media (max-width: 390px) {
  .library-feature-button {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 12px;
    padding: 14px;
  }

  .library-feature-cover {
    width: 62px;
    height: 84px;
  }

  .collection-view .collection-open {
    grid-template-columns: 48px minmax(0, 1fr) auto;
  }

  .collection-view .collection-cover {
    width: 48px;
    height: 63px;
  }
}

/* Library polish: tighter scale, sort control, direct upload action */
.collection-view {
  gap: clamp(13px, 2.1vh, 21px);
  margin-top: clamp(-30px, -3.5vh, -16px);
}

.collection-view .library-header {
  gap: 14px;
  padding-top: 0;
  transform: translateY(-8px);
  margin-bottom: -4px;
}

.collection-view .collection-back {
  width: 38px;
  height: 38px;
  min-height: 38px;
  transform: translateY(-2px);
}

.collection-view .library-header h2 {
  font-size: clamp(2.1rem, 8vw, 2.72rem);
  line-height: 0.98;
}

.collection-view .library-header p {
  margin-top: 6px;
  font-size: clamp(0.9rem, 3.2vw, 1.04rem);
}

.collection-view .library-search {
  min-height: 48px;
  padding-inline: 16px;
  gap: 11px;
}

.collection-view .library-search input {
  font-size: clamp(0.9rem, 3.1vw, 1rem);
}

.library-upload-button {
  justify-self: start;
  min-height: 38px;
  padding: 0 16px 0 13px;
  display: inline-grid;
  grid-template-columns: 17px auto;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(222, 214, 201, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.86), rgba(255, 252, 246, 0.7));
  color: rgba(54, 50, 44, 0.78);
  font-size: 0.82rem;
  font-weight: 690;
  box-shadow:
    0 9px 18px rgba(40, 36, 28, 0.032),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.library-continue-section .library-section-heading {
  align-items: center;
}

.library-section-heading .library-upload-button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 13px 0 11px;
  font-size: 0.78rem;
}

.library-upload-button span {
  position: relative;
  width: 16px;
  height: 16px;
  display: block;
  border: 1.8px solid rgba(126, 92, 76, 0.52);
  border-top-color: transparent;
  border-radius: 5px;
}

.library-upload-button span::before,
.library-upload-button span::after {
  content: "";
  position: absolute;
  left: 50%;
  background: rgba(126, 92, 76, 0.58);
  transform: translateX(-50%);
}

.library-upload-button span::before {
  top: 1px;
  width: 2px;
  height: 9px;
  border-radius: 999px;
}

.library-upload-button span::after {
  top: 1px;
  width: 8px;
  height: 8px;
  background: transparent;
  border-top: 2px solid rgba(126, 92, 76, 0.58);
  border-left: 2px solid rgba(126, 92, 76, 0.58);
  transform: translateX(-50%) rotate(45deg);
}

.library-section-heading .library-upload-button span {
  width: 15px;
  height: 15px;
}

.library-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.library-sort-control {
  min-height: 31px;
  padding: 0 9px 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(222, 214, 201, 0.42);
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.62);
  color: rgba(86, 81, 73, 0.6);
  font-size: 0.72rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.library-sort-control span {
  color: rgba(86, 81, 73, 0.5);
  font-size: 0.68rem;
  font-weight: 680;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.library-sort-control select {
  max-width: 72px;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: rgba(54, 50, 44, 0.76);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
}

.library-section {
  gap: 10px;
}

.library-section-heading h3 {
  font-size: clamp(1.02rem, 3.65vw, 1.17rem);
}

.library-section-heading > span,
.library-section-heading #collectionCountLabel {
  white-space: nowrap;
  font-size: 0.76rem;
}

.library-continue-card {
  min-height: 112px;
}

.library-feature-button {
  min-height: 112px;
  padding: 13px;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 12px;
  border-radius: 18px;
}

.library-feature-cover {
  width: 60px;
  height: 80px;
  border-radius: 7px;
}

.library-feature-copy {
  gap: 7px;
}

.library-feature-copy strong {
  font-size: clamp(0.98rem, 3.7vw, 1.15rem);
}

.library-feature-copy small {
  font-size: 0.76rem;
}

.library-feature-percent {
  font-size: 0.76rem;
}

.collection-view .collection-list {
  gap: 9px;
}

.collection-view .collection-item {
  min-height: 82px;
  padding: 8px 9px;
  grid-template-columns: minmax(0, 1fr) 31px;
  border-radius: 16px;
}

.collection-view .collection-open {
  min-height: 66px;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  gap: 10px;
}

.collection-view .collection-cover {
  width: 45px;
  height: 58px;
  border-radius: 6px;
}

.collection-view .collection-copy strong {
  font-size: clamp(0.94rem, 3.25vw, 1.04rem);
}

.collection-view .collection-copy small {
  font-size: 0.75rem;
}

.collection-view .collection-progress {
  height: 3px;
}

.collection-view .collection-meta {
  font-size: 0.72rem;
}

.collection-view .collection-delete {
  width: 31px;
  height: 31px;
  min-height: 31px;
}

@media (max-width: 390px) {
  .library-sort-control span {
    display: none;
  }

  .library-feature-button {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    padding: 12px;
  }

  .library-feature-cover {
    width: 56px;
    height: 74px;
  }
}

/* Project Gutenberg catalogue */
.gutenberg-view {
  gap: clamp(14px, 2.2vh, 22px);
  margin-top: clamp(-30px, -3.5vh, -16px);
}

.gutenberg-view .library-header {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding-top: 0;
  transform: translateY(-8px);
  margin-bottom: -4px;
}

.gutenberg-view .collection-back {
  width: 38px;
  height: 38px;
  min-height: 38px;
  transform: translateY(-2px);
}

.gutenberg-view .library-header h2 {
  font-family: var(--reading-font);
  font-size: clamp(2.1rem, 8vw, 2.72rem);
  font-weight: 510;
  line-height: 0.98;
  letter-spacing: -0.012em;
}

.gutenberg-view .library-header p {
  margin-top: 6px;
  color: rgba(86, 81, 73, 0.62);
  font-family: var(--reading-font);
  font-size: clamp(0.9rem, 3.2vw, 1.04rem);
}

.gutenberg-view .library-search {
  min-height: 48px;
  padding-inline: 16px;
  gap: 11px;
}

.library-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: -2px;
}

.library-discover-button span {
  border-color: rgba(126, 92, 76, 0.5);
  border-top-color: rgba(126, 92, 76, 0.5);
  border-radius: 3px 3px 5px 5px;
}

.library-discover-button span::before {
  top: 3px;
  left: 5px;
  width: 5px;
  height: 7px;
  border-radius: 3px 0 0 3px;
  background: transparent;
  border: 1.8px solid rgba(126, 92, 76, 0.58);
  border-right: 0;
  transform: none;
}

.library-discover-button span::after {
  top: 3px;
  left: 9px;
  width: 5px;
  height: 7px;
  border: 1.8px solid rgba(126, 92, 76, 0.58);
  border-left: 0;
  border-top-color: rgba(126, 92, 76, 0.58);
  border-radius: 0 3px 3px 0;
  transform: none;
}

.gutenberg-status {
  margin: -2px 4px 0;
  color: rgba(86, 81, 73, 0.58);
  font-family: var(--reading-font);
  font-size: clamp(0.92rem, 3.2vw, 1.02rem);
  line-height: 1.36;
}

.gutenberg-list {
  display: grid;
  gap: 10px;
}

.gutenberg-item {
  min-width: 0;
}

.gutenberg-book-button {
  width: 100%;
  min-height: 94px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 18px;
  gap: 13px;
  align-items: center;
  border: 1px solid rgba(222, 214, 201, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.9), rgba(255, 252, 246, 0.78));
  color: var(--ink);
  text-align: left;
  box-shadow:
    0 9px 24px rgba(40, 36, 28, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.gutenberg-book-button:disabled {
  cursor: default;
  opacity: 0.56;
}

.gutenberg-cover {
  width: 52px;
  height: 68px;
  overflow: hidden;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(145deg, rgba(116, 143, 112, 0.82), rgba(77, 104, 78, 0.92));
  color: rgba(255, 253, 247, 0.92);
  font-family: var(--reading-font);
  font-size: 1.55rem;
  box-shadow:
    0 6px 13px rgba(44, 32, 22, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.gutenberg-cover.has-image {
  background: rgba(229, 222, 210, 0.78);
}

.gutenberg-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.gutenberg-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.gutenberg-copy strong {
  overflow: hidden;
  color: rgba(28, 27, 25, 0.94);
  font-family: var(--reading-font);
  font-size: clamp(0.98rem, 3.45vw, 1.12rem);
  font-weight: 540;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gutenberg-copy small,
.gutenberg-copy em {
  overflow: hidden;
  color: rgba(86, 81, 73, 0.62);
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gutenberg-copy em {
  color: rgba(196, 62, 54, 0.62);
  font-weight: 650;
}

.pubmed-cover {
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 253, 247, 0.34), transparent 36%),
    linear-gradient(145deg, rgba(78, 137, 143, 0.76), rgba(55, 93, 104, 0.92));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  font-size: 0.86rem;
  font-weight: 720;
  letter-spacing: 0.04em;
}

.pubmed-copy strong {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pubmed-copy em {
  color: rgba(62, 135, 123, 0.72);
}

.research-access-badges {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.gutenberg-copy .research-access-badges {
  margin-top: 1px;
}

.research-access-badge {
  min-height: 22px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(100, 124, 107, 0.18);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: rgba(58, 112, 96, 0.92);
  background: rgba(236, 247, 241, 0.72);
  font-family: var(--ui-font);
  font-size: 0.67rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
}

.research-access-badge.is-source-pubmed,
.research-access-badge.is-pmc {
  border-color: rgba(66, 139, 145, 0.2);
  background: rgba(232, 246, 247, 0.76);
  color: rgba(50, 113, 121, 0.94);
}

.research-access-badge.is-source-arxiv {
  border-color: rgba(166, 84, 74, 0.2);
  background: rgba(252, 235, 231, 0.78);
  color: rgba(135, 67, 59, 0.94);
}

.research-access-badge.is-source-openalex,
.research-access-badge.is-pdf {
  border-color: rgba(67, 119, 157, 0.2);
  background: rgba(232, 242, 249, 0.78);
  color: rgba(50, 95, 131, 0.94);
}

.research-access-badge.is-source-crossref {
  border-color: rgba(113, 91, 154, 0.2);
  background: rgba(241, 235, 250, 0.78);
  color: rgba(89, 70, 129, 0.94);
}

.research-access-badge.is-source-conversation {
  border-color: rgba(177, 73, 62, 0.2);
  background: rgba(252, 235, 232, 0.8);
  color: rgba(137, 59, 51, 0.94);
}

.research-access-badge.is-full-text,
.research-access-badge.is-open-access {
  border-color: rgba(66, 137, 99, 0.2);
  background: rgba(232, 247, 238, 0.78);
  color: rgba(52, 112, 78, 0.94);
}

.research-access-badge.is-abstract,
.research-access-badge.is-metadata,
.research-access-badge.is-doi {
  border-color: rgba(145, 118, 82, 0.18);
  background: rgba(250, 244, 233, 0.78);
  color: rgba(111, 91, 62, 0.9);
}

.research-access-badge.is-saved,
.research-access-badge.is-source-saved {
  border-color: rgba(132, 116, 86, 0.2);
  background: rgba(244, 239, 228, 0.78);
  color: rgba(98, 84, 60, 0.94);
}

.research-view {
  gap: clamp(12px, 2vh, 18px);
}

.research-source-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

.research-source-tabs[hidden] {
  display: none !important;
}

.research-source-tab {
  min-height: 62px;
  padding: 9px 7px;
  display: grid;
  gap: 5px;
  place-items: center;
  border: 1px solid rgba(222, 214, 201, 0.42);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.88), rgba(255, 252, 246, 0.72));
  color: rgba(86, 81, 73, 0.72);
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.05;
  text-align: center;
  box-shadow:
    0 8px 18px rgba(40, 36, 28, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.research-source-tab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.research-source-tab.is-active {
  border-color: rgba(87, 139, 119, 0.2);
  background:
    radial-gradient(circle at 50% 0%, rgba(128, 170, 147, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(238, 248, 242, 0.94), rgba(246, 251, 247, 0.76));
  color: rgba(73, 121, 104, 0.9);
  box-shadow:
    0 10px 20px rgba(47, 86, 72, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.56);
}

.research-status {
  margin-top: 2px;
}

.pubmed-list {
  gap: 11px;
}

.research-article-button {
  grid-template-columns: 58px minmax(0, 1fr) 18px;
  min-height: 108px;
  padding: 12px;
  gap: 13px;
}

.research-cover {
  width: 58px;
  height: 58px;
  border-radius: 13px;
  text-transform: none;
}

.research-cover-arxiv {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 253, 247, 0.3), transparent 36%),
    linear-gradient(145deg, rgba(159, 91, 84, 0.78), rgba(113, 61, 58, 0.92));
  font-family: var(--reading-font);
  font-size: 0.92rem;
  letter-spacing: 0;
}

.research-cover-openalex {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 253, 247, 0.3), transparent 36%),
    linear-gradient(145deg, rgba(68, 125, 151, 0.78), rgba(45, 78, 101, 0.92));
  font-family: var(--reading-font);
  font-size: 0.92rem;
  letter-spacing: 0;
}

.research-cover-crossref {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 253, 247, 0.3), transparent 36%),
    linear-gradient(145deg, rgba(115, 87, 151, 0.78), rgba(74, 53, 101, 0.92));
  font-family: var(--reading-font);
  font-size: 0.92rem;
  letter-spacing: 0;
}

.research-cover-conversation {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 253, 247, 0.3), transparent 36%),
    linear-gradient(145deg, rgba(195, 70, 58, 0.84), rgba(118, 45, 45, 0.94));
  font-family: var(--reading-font);
  font-size: 0.92rem;
  letter-spacing: 0;
}

.research-cover-saved {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 253, 247, 0.3), transparent 36%),
    linear-gradient(145deg, rgba(140, 124, 98, 0.78), rgba(88, 77, 63, 0.92));
}

@media (max-width: 390px) {
  .library-quick-actions {
    gap: 8px;
  }

  .library-upload-button {
    padding-inline: 12px;
    font-size: 0.76rem;
  }

  .gutenberg-book-button {
    grid-template-columns: 48px minmax(0, 1fr) 18px;
    min-height: 88px;
  }

  .gutenberg-cover {
    width: 48px;
    height: 62px;
  }

  .research-source-tabs {
    gap: 7px;
  }

  .research-source-tab {
    min-height: 58px;
    padding-inline: 5px;
    font-size: 0.66rem;
  }

  .research-source-tab svg {
    width: 20px;
    height: 20px;
  }

  .research-article-button {
    grid-template-columns: 52px minmax(0, 1fr) 16px;
  }

  .research-cover {
    width: 52px;
    height: 52px;
  }
}

/* Library mockup alignment pass */
.collection-view {
  gap: clamp(17px, 2.45vh, 24px);
  margin-top: 0;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.collection-view .library-header {
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding-top: clamp(6px, 1.5vh, 14px);
  margin-bottom: 0;
  transform: none;
}

.collection-view .collection-back {
  width: 46px;
  height: 46px;
  min-height: 46px;
  transform: translateY(-1px);
  background: rgba(255, 253, 247, 0.8);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.34),
    0 12px 24px rgba(40, 36, 28, 0.07);
}

.collection-view .collection-back::before {
  width: 13px;
  height: 13px;
  border-width: 2.4px;
  color: rgba(86, 81, 73, 0.66);
}

.collection-view .library-header h2 {
  color: rgba(24, 23, 21, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(2.72rem, 11.2vw, 3.55rem);
  font-weight: 520;
  line-height: 0.92;
  letter-spacing: -0.015em;
}

.collection-view .library-header p {
  margin-top: 8px;
  color: rgba(86, 81, 73, 0.66);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.85vw, 1.18rem);
  line-height: 1.15;
}

.collection-view .library-search {
  min-height: 50px;
  padding: 0 18px 0 17px;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 13px;
  border-color: rgba(222, 214, 201, 0.38);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.86), transparent 45%),
    linear-gradient(180deg, rgba(255, 254, 250, 0.9), rgba(255, 252, 247, 0.78));
  box-shadow:
    0 14px 28px rgba(40, 36, 28, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.collection-view .library-search span {
  width: 22px;
  height: 22px;
  border-width: 2.3px;
  border-color: rgba(86, 75, 65, 0.74);
}

.collection-view .library-search span::after {
  right: -7px;
  bottom: -5px;
  width: 10px;
  height: 2.4px;
  background: rgba(86, 75, 65, 0.74);
}

.collection-view .library-search input {
  color: rgba(45, 42, 38, 0.86);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.75vw, 1.12rem);
}

.collection-view .library-search input::placeholder {
  color: rgba(86, 81, 73, 0.64);
}

.collection-view .library-quick-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: -2px;
}

.collection-view .library-upload-button,
.collection-view .library-sort-control {
  min-height: 40px;
  border-color: rgba(222, 214, 201, 0.4);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.9), rgba(255, 252, 247, 0.74));
  box-shadow:
    0 10px 20px rgba(40, 36, 28, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.collection-view .library-upload-button {
  min-width: 112px;
  padding: 0 18px 0 15px;
  grid-template-columns: 18px auto;
  gap: 10px;
  color: rgba(31, 30, 28, 0.9);
  font-size: 0.94rem;
  font-weight: 680;
}

.collection-view .library-upload-button span {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 0;
}

.collection-view .library-upload-button span::before,
.collection-view .library-upload-button span::after {
  left: 50%;
  top: 50%;
  background: rgba(126, 92, 76, 0.78);
  border: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.collection-view .library-upload-button span::before {
  width: 18px;
  height: 2px;
}

.collection-view .library-upload-button span::after {
  width: 2px;
  height: 18px;
}

.collection-view .library-sort-control {
  position: relative;
  min-width: 126px;
  min-height: 40px;
  padding: 0 33px 0 15px;
  gap: 8px;
  color: rgba(86, 81, 73, 0.68);
  font-size: 0.92rem;
}

.collection-view .library-sort-control::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(86, 81, 73, 0.7);
  border-bottom: 2px solid rgba(86, 81, 73, 0.7);
  transform: translateY(-68%) rotate(45deg);
  pointer-events: none;
}

.collection-view .library-sort-control span {
  display: inline;
  color: rgba(86, 81, 73, 0.64);
  font-size: 0.88rem;
  font-weight: 460;
  letter-spacing: 0;
  text-transform: none;
}

.collection-view .library-sort-control select {
  max-width: 72px;
  padding-right: 4px;
  color: rgba(28, 27, 25, 0.94);
  font-size: 0.92rem;
  font-weight: 690;
}

.collection-view .library-section {
  gap: 12px;
}

.collection-view .library-section-heading {
  padding-inline: 4px;
}

.collection-view .library-section-heading h3 {
  color: rgba(24, 23, 21, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(1.52rem, 5.7vw, 1.88rem);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.collection-view .library-section-heading #collectionCountLabel {
  color: rgba(86, 81, 73, 0.64);
  font-family: var(--reading-font);
  font-size: clamp(0.92rem, 3.35vw, 1.04rem);
  font-weight: 480;
}

.collection-view .library-continue-card {
  min-height: 124px;
}

.collection-view .library-feature-button {
  min-height: 124px;
  padding: 16px 17px 16px 15px;
  grid-template-columns: 70px minmax(0, 1fr) 58px;
  gap: 16px;
  border-color: rgba(196, 62, 54, 0.16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.88), transparent 42%),
    linear-gradient(135deg, rgba(255, 252, 248, 0.95), rgba(251, 239, 234, 0.67));
  box-shadow:
    0 15px 34px rgba(65, 41, 30, 0.052),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.collection-view .library-feature-cover {
  width: 70px;
  height: 94px;
  border-radius: 7px;
}

.collection-view .library-feature-copy {
  gap: 10px;
}

.collection-view .library-feature-copy strong {
  color: rgba(24, 23, 21, 0.96);
  font-size: clamp(1.36rem, 5.1vw, 1.74rem);
  font-weight: 530;
  letter-spacing: -0.008em;
}

.collection-view .library-feature-copy small {
  color: rgba(86, 81, 73, 0.68);
  font-size: clamp(0.9rem, 3.3vw, 1.02rem);
}

.collection-view .library-progress-line {
  height: 5px;
  max-width: 100%;
  background: rgba(219, 211, 197, 0.78);
}

.collection-view .library-progress-line span,
.collection-view .collection-progress span {
  background: rgba(199, 67, 58, 0.86);
}

.collection-view .library-feature-play {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.94), rgba(255, 253, 248, 0.86) 58%, rgba(239, 230, 216, 0.66));
  color: rgba(199, 67, 58, 0.9);
  box-shadow:
    0 12px 24px rgba(65, 41, 30, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.collection-view .library-feature-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 16px solid currentColor;
}

.collection-view .collection-list {
  gap: 10px;
}

.collection-view .collection-item {
  min-height: 92px;
  padding: 9px 10px 9px 9px;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 10px;
  border-color: rgba(222, 214, 201, 0.32);
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 254, 250, 0.92), rgba(255, 252, 247, 0.76));
  box-shadow:
    0 10px 24px rgba(40, 36, 28, 0.037),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.collection-view .collection-open {
  min-height: 74px;
  grid-template-columns: 56px minmax(0, 1fr) 42px;
  gap: 13px;
}

.collection-view .collection-cover {
  width: 56px;
  height: 72px;
  border-radius: 6px;
}

.collection-view .collection-copy {
  gap: 7px;
}

.collection-view .collection-copy strong {
  color: rgba(24, 23, 21, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(1.18rem, 4.45vw, 1.42rem);
  font-weight: 520;
  letter-spacing: -0.008em;
}

.collection-view .collection-copy small {
  color: rgba(86, 81, 73, 0.68);
  font-size: clamp(0.84rem, 3.05vw, 0.96rem);
}

.collection-view .collection-progress {
  height: 4px;
  margin-top: 1px;
  background: rgba(219, 211, 197, 0.72);
}

.collection-view .collection-meta {
  align-self: center;
  padding-bottom: 0;
  color: rgba(199, 67, 58, 0.88);
  font-size: clamp(0.9rem, 3.2vw, 1rem);
  font-weight: 640;
}

.collection-view .collection-delete {
  width: 38px;
  height: 38px;
  min-height: 38px;
  background: rgba(255, 253, 247, 0.74);
  color: rgba(126, 105, 86, 0.74);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.3),
    0 8px 16px rgba(40, 36, 28, 0.038);
}

.collection-view .collection-delete span {
  width: 18px;
  height: 5px;
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collection-view .collection-delete span::before,
.collection-view .collection-delete span::after {
  top: 50%;
  width: 5px;
  height: 5px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%);
}

.collection-view .collection-delete span::before {
  left: 0;
  right: auto;
}

.collection-view .collection-delete span::after {
  left: auto;
  right: 0;
}

.collection-view .collection-delete span {
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 2.5px, transparent 2.6px);
}

.collection-view .collection-empty {
  margin: 0;
  padding: 26px 20px;
  border-color: rgba(222, 214, 201, 0.34);
  border-style: solid;
  background: rgba(255, 253, 247, 0.5);
  font-family: var(--reading-font);
  font-size: clamp(0.86rem, 3.1vw, 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-import-note {
  margin: 8px 4px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(222, 214, 201, 0.58);
  display: grid;
  grid-template-columns: 22px auto;
  justify-content: center;
  column-gap: 9px;
  row-gap: 4px;
  color: rgba(86, 81, 73, 0.66);
  font-family: var(--reading-font);
  font-size: clamp(0.86rem, 3.2vw, 0.98rem);
  line-height: 1.25;
  text-align: center;
}

.library-import-note span {
  position: relative;
  width: 18px;
  height: 17px;
  justify-self: end;
  color: rgba(199, 67, 58, 0.82);
}

.library-import-note span::before,
.library-import-note span::after {
  content: "";
  position: absolute;
  top: 1px;
  width: 8px;
  height: 15px;
  border: 1.6px solid currentColor;
  border-radius: 2px 2px 4px 4px;
  background: transparent;
}

.library-import-note span::before {
  left: 1px;
  transform: skewY(-8deg);
}

.library-import-note span::after {
  right: 1px;
  transform: skewY(8deg);
}

.library-import-note small {
  grid-column: 1 / -1;
  color: rgba(199, 67, 58, 0.86);
  font-size: 0.9em;
}

@media (max-width: 390px) {
  .collection-view .library-header {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
  }

  .collection-view .collection-back {
    width: 43px;
    height: 43px;
    min-height: 43px;
  }

  .collection-view .library-feature-button {
    grid-template-columns: 60px minmax(0, 1fr) 50px;
    gap: 12px;
    padding: 14px;
  }

  .collection-view .library-feature-cover {
    width: 60px;
    height: 80px;
  }

  .collection-view .library-feature-play {
    width: 50px;
    height: 50px;
  }

  .collection-view .collection-open {
    grid-template-columns: 50px minmax(0, 1fr) 38px;
    gap: 10px;
  }

  .collection-view .collection-cover {
    width: 50px;
    height: 64px;
  }

  .collection-view .library-sort-control {
    min-width: 116px;
  }
}

/* Library density correction: keep the mockup shape without oversized phone scale */
.collection-view {
  gap: clamp(12px, 1.9vh, 18px);
}

.collection-view .library-header {
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  padding-top: 0;
}

.collection-view .collection-back {
  width: 40px;
  height: 40px;
  min-height: 40px;
}

.collection-view .collection-back::before {
  width: 11px;
  height: 11px;
  border-width: 2.1px;
}

.collection-view .library-header h2 {
  font-size: clamp(2.18rem, 8.6vw, 2.78rem);
  line-height: 0.95;
}

.collection-view .library-header p {
  margin-top: 5px;
  font-size: clamp(0.9rem, 3.2vw, 1.02rem);
}

.collection-view .library-search {
  min-height: 44px;
  padding-inline: 15px;
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 11px;
}

.collection-view .library-search span {
  width: 18px;
  height: 18px;
  border-width: 2px;
}

.collection-view .library-search span::after {
  right: -6px;
  bottom: -4px;
  width: 8px;
  height: 2px;
}

.collection-view .library-search input {
  font-size: clamp(0.9rem, 3.15vw, 1rem);
}

.collection-view .library-quick-actions {
  gap: 10px;
}

.collection-view .library-upload-button,
.collection-view .library-sort-control {
  min-height: 36px;
}

.collection-view .library-upload-button {
  min-width: 102px;
  padding: 0 15px 0 13px;
  grid-template-columns: 16px auto;
  gap: 8px;
  font-size: 0.82rem;
}

.collection-view .library-upload-button span {
  width: 16px;
  height: 16px;
}

.collection-view .library-upload-button span::before {
  width: 16px;
  height: 1.8px;
}

.collection-view .library-upload-button span::after {
  width: 1.8px;
  height: 16px;
}

.collection-view .library-sort-control {
  min-width: 114px;
  padding: 0 29px 0 13px;
  gap: 7px;
  font-size: 0.82rem;
}

.collection-view .library-sort-control::after {
  right: 13px;
  width: 6px;
  height: 6px;
  border-width: 1.8px;
}

.collection-view .library-sort-control span {
  font-size: 0.78rem;
}

.collection-view .library-sort-control select {
  max-width: 68px;
  font-size: 0.82rem;
}

.collection-view .library-section {
  gap: 9px;
}

.collection-view .library-section-heading h3 {
  font-size: clamp(1.18rem, 4.55vw, 1.48rem);
  letter-spacing: -0.006em;
}

.collection-view .library-section-heading #collectionCountLabel {
  font-size: clamp(0.82rem, 2.9vw, 0.92rem);
}

.collection-view .library-continue-card {
  min-height: 104px;
}

.collection-view .library-feature-button {
  min-height: 104px;
  padding: 13px;
  grid-template-columns: 58px minmax(0, 1fr) 48px;
  gap: 13px;
  border-radius: 16px;
}

.collection-view .library-feature-cover {
  width: 58px;
  height: 78px;
}

.collection-view .library-feature-copy {
  gap: 7px;
}

.collection-view .library-feature-copy strong {
  font-size: clamp(1rem, 3.9vw, 1.24rem);
}

.collection-view .library-feature-copy small {
  font-size: clamp(0.78rem, 2.85vw, 0.9rem);
}

.collection-view .library-progress-line {
  height: 4px;
}

.collection-view .library-feature-play {
  width: 48px;
  height: 48px;
}

.collection-view .library-feature-play::before {
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-left-width: 13px;
}

.collection-view .collection-list {
  gap: 9px;
}

.collection-view .collection-item {
  min-height: 78px;
  padding: 8px;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  border-radius: 14px;
}

.collection-view .collection-open {
  min-height: 62px;
  grid-template-columns: 46px minmax(0, 1fr) 36px;
  gap: 10px;
}

.collection-view .collection-cover {
  width: 46px;
  height: 60px;
}

.collection-view .collection-copy {
  gap: 5px;
}

.collection-view .collection-copy strong {
  font-size: clamp(0.98rem, 3.55vw, 1.14rem);
}

.collection-view .collection-copy small {
  font-size: clamp(0.74rem, 2.75vw, 0.84rem);
  line-height: 1.2;
}

.collection-view .collection-progress {
  height: 3px;
}

.collection-view .collection-meta {
  font-size: clamp(0.78rem, 2.85vw, 0.9rem);
}

.collection-view .collection-delete {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.collection-view .collection-delete span {
  width: 16px;
}

.collection-view .collection-delete span::before,
.collection-view .collection-delete span::after {
  width: 4px;
  height: 4px;
}

.collection-view .collection-delete span {
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 2px, transparent 2.1px);
}

.library-import-note {
  margin-top: 4px;
  padding-top: 13px;
  font-size: clamp(0.78rem, 2.9vw, 0.9rem);
}

@media (max-width: 390px) {
  .collection-view .library-header {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
  }

  .collection-view .collection-back {
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .collection-view .library-feature-button {
    grid-template-columns: 54px minmax(0, 1fr) 44px;
    gap: 11px;
    padding: 12px;
  }

  .collection-view .library-feature-cover {
    width: 54px;
    height: 72px;
  }

  .collection-view .library-feature-play {
    width: 44px;
    height: 44px;
  }

  .collection-view .collection-open {
    grid-template-columns: 44px minmax(0, 1fr) 34px;
    gap: 9px;
  }

  .collection-view .collection-cover {
    width: 44px;
    height: 57px;
  }
}

/* Library/Classics optical parity with the settings surface */
.collection-view .library-header,
.gutenberg-view .library-header {
  grid-template-columns: var(--top-control-size) minmax(0, 1fr);
  gap: 13px;
}

.collection-view .collection-back,
.gutenberg-view .collection-back {
  width: var(--top-control-size);
  min-width: var(--top-control-size);
  height: var(--top-control-size);
  min-height: var(--top-control-size);
  transform: none;
  background: rgba(255, 253, 247, 0.68);
  color: rgba(45, 42, 38, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.3),
    0 9px 20px rgba(40, 36, 28, 0.052);
}

.collection-view .collection-back::before,
.gutenberg-view .collection-back::before {
  width: 9.5px;
  height: 9.5px;
  border-width: 1.85px;
  opacity: 0.82;
}

.collection-view .library-header h2,
.gutenberg-view .library-header h2 {
  overflow: visible;
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0;
}

.collection-view .library-section-heading h3 {
  font-weight: 500;
  letter-spacing: 0;
}

.collection-view .library-search,
.gutenberg-view .library-search {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
}

.collection-view .library-search span,
.gutenberg-view .library-search span {
  position: relative;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 0;
}

.collection-view .library-search span::before,
.gutenberg-view .library-search span::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(86, 75, 65, 0.68);
  border-radius: 50%;
}

.collection-view .library-search span::after,
.gutenberg-view .library-search span::after {
  left: 15px;
  top: 15px;
  right: auto;
  bottom: auto;
  width: 8px;
  height: 2px;
  background: rgba(86, 75, 65, 0.68);
  transform: rotate(45deg);
  transform-origin: left center;
}

/* Subview back buttons must sit exactly where the settings close button sits. */
.input-panel.is-menu-subview .collection-back {
  position: fixed;
  top: var(--screen-pad-top);
  left: calc(var(--screen-pad-left) + var(--top-corner-inset));
  z-index: 3;
  width: var(--top-control-size);
  min-width: var(--top-control-size);
  height: var(--top-control-size);
  min-height: var(--top-control-size);
}

.input-panel.is-menu-subview .collection-header {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 0;
  transform: none;
}

.gutenberg-view {
  margin-top: 0;
}

.input-panel.is-settings-screen.is-menu-subview .menu-card {
  padding-top: clamp(72px, 8.5vh, 92px);
}

.collection-view .library-header h2,
.gutenberg-view .library-header h2,
.settings-view .collection-header h2 {
  overflow: visible;
  font-family: var(--reading-font);
  font-size: clamp(2.45rem, 9vw, 3.05rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: 0;
}

/* Library editorial calm pass: reading first, management second. */
.collection-view .library-quick-actions {
  justify-content: flex-start;
  margin-top: -7px;
  gap: 0;
  padding-left: 2px;
}

.collection-view .library-upload-button {
  min-width: 0;
  min-height: 25px;
  padding: 0 4px 0 1px;
  border: 0;
  border-radius: 0;
  grid-template-columns: 14px auto;
  gap: 7px;
  background: transparent;
  box-shadow: none;
  color: rgba(126, 92, 76, 0.78);
  font-size: 0.84rem;
  font-weight: 600;
}

.collection-view .library-upload-button span {
  position: relative;
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 0;
}

.collection-view .library-upload-button span::before,
.collection-view .library-upload-button span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.collection-view .library-upload-button span::before {
  width: 14px;
  height: 1.7px;
}

.collection-view .library-upload-button span::after {
  width: 1.7px;
  height: 14px;
}

.collection-view .library-upload-button:active {
  color: rgba(196, 62, 54, 0.82);
}

.collection-view .library-section-heading {
  align-items: end;
  padding-inline: 3px;
}

.collection-view .library-heading-actions {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
  color: rgba(86, 81, 73, 0.52);
  font-family: var(--reading-font);
}

.collection-view .library-section-heading #collectionCountLabel {
  color: rgba(86, 81, 73, 0.5);
  font-size: clamp(0.76rem, 2.7vw, 0.86rem);
  font-weight: 450;
}

.collection-view .library-sort-control {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0 13px 0 0;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  background: transparent;
  box-shadow: none;
  color: rgba(86, 81, 73, 0.52);
  font-family: var(--reading-font);
  font-size: clamp(0.76rem, 2.7vw, 0.86rem);
  line-height: 1.1;
}

.collection-view .library-sort-control::after {
  right: 1px;
  top: 48%;
  width: 5px;
  height: 5px;
  border-right: 1.45px solid rgba(86, 81, 73, 0.48);
  border-bottom: 1.45px solid rgba(86, 81, 73, 0.48);
}

.collection-view .library-sort-control span {
  display: inline;
  color: rgba(86, 81, 73, 0.48);
  font-size: inherit;
  font-weight: 450;
  letter-spacing: 0;
  text-transform: none;
}

.collection-view .library-sort-control select {
  max-width: 68px;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: rgba(49, 46, 41, 0.72);
  font: inherit;
  font-weight: 520;
}

.collection-view .library-feature-button {
  border-color: rgba(198, 58, 54, 0.12);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.62), transparent 44%),
    linear-gradient(90deg, rgba(198, 58, 54, 0.12), rgba(198, 58, 54, 0.055));
  box-shadow:
    0 12px 26px rgba(126, 42, 36, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.collection-view .library-feature-cover,
.collection-view .collection-cover {
  border: 1px solid rgba(255, 253, 247, 0.56);
  box-shadow:
    0 7px 14px rgba(44, 32, 22, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.collection-view .library-feature-copy strong,
.collection-view .collection-copy strong {
  color: rgba(28, 27, 25, 0.88);
  font-weight: 490;
}

.collection-view .library-feature-copy strong {
  font-weight: 500;
}

.collection-view .collection-delete {
  width: 28px;
  min-width: 28px;
  height: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(126, 105, 86, 0.58);
  box-shadow: none;
}

.collection-view .collection-delete span {
  width: 16px;
  height: 4px;
}

.collection-view .collection-delete span::before,
.collection-view .collection-delete span::after {
  width: 4px;
  height: 4px;
}

.collection-view .collection-delete span {
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 2px, transparent 2.1px);
}

.collection-view .collection-delete:active {
  color: rgba(196, 62, 54, 0.68);
}

.collection-view .collection-item {
  position: relative;
  overflow: visible;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 5px;
}

.collection-view .collection-menu-wrap {
  position: relative;
  z-index: 4;
  display: grid;
  place-items: center;
}

.collection-view .collection-menu-toggle {
  width: 32px;
  min-width: 32px;
  height: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: rgba(126, 105, 86, 0.58);
  box-shadow: none;
  outline: 0;
}

.collection-view .collection-menu-toggle span {
  position: relative;
  width: 17px;
  height: 4px;
  display: block;
  border: 0;
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 2px, transparent 2.1px);
}

.collection-view .collection-menu-toggle span::before,
.collection-view .collection-menu-toggle span::after {
  content: "";
  position: absolute;
  top: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.collection-view .collection-menu-toggle span::before {
  left: 0;
}

.collection-view .collection-menu-toggle span::after {
  right: 0;
}

.collection-view .collection-menu-toggle[aria-expanded="true"],
.collection-view .collection-menu-toggle:active {
  color: rgba(196, 62, 54, 0.68);
}

.collection-view .collection-menu-toggle:focus-visible {
  box-shadow: none;
}

.collection-view .collection-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% - 3px);
  width: 142px;
  padding: 7px;
  border: 1px solid rgba(222, 214, 201, 0.56);
  border-radius: 15px;
  display: grid;
  gap: 2px;
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.82), transparent 45%),
    rgba(255, 252, 246, 0.98);
  box-shadow:
    0 16px 34px rgba(40, 34, 25, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

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

.collection-view .collection-menu-action {
  min-height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: transparent;
  color: rgba(49, 46, 41, 0.78);
  font-family: var(--reading-font);
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
}

.collection-view .collection-menu-action:active {
  background: rgba(198, 58, 54, 0.07);
}

.collection-view .collection-menu-action.is-danger {
  color: rgba(181, 51, 45, 0.86);
}

.book-details-panel {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: grid;
  place-items: end center;
  padding:
    0 max(18px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(28, 24, 18, 0.18);
  color: var(--ink);
}

.book-details-panel[hidden] {
  display: none;
}

.book-details-sheet {
  position: relative;
  width: min(600px, 100%);
  max-height: min(720px, calc(100vh - 42px));
  padding: 20px;
  border: 1px solid rgba(222, 214, 201, 0.62);
  border-radius: 24px;
  display: grid;
  gap: 16px;
  overflow: auto;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.86), transparent 48%),
    rgba(249, 244, 235, 0.98);
  box-shadow:
    0 26px 74px rgba(40, 34, 25, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.book-details-close {
  position: absolute;
  right: 11px;
  top: 11px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.72);
  color: rgba(91, 87, 80, 0.62);
}

.book-details-close::before,
.book-details-close::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 14px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
}

.book-details-close::before {
  transform: rotate(45deg);
}

.book-details-close::after {
  transform: rotate(-45deg);
}

.book-details-hero {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  padding-right: 30px;
}

.book-details-cover {
  width: 74px;
  aspect-ratio: 0.72;
  border: 1px solid rgba(255, 253, 247, 0.6);
  border-radius: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(198, 70, 61, 0.9), rgba(129, 92, 74, 0.74)),
    var(--paper-warm);
  color: rgba(255, 253, 247, 0.94);
  font-family: var(--reading-font);
  font-size: 2rem;
  font-weight: 560;
  box-shadow:
    0 9px 18px rgba(44, 32, 22, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.book-details-cover.has-image {
  background: rgba(249, 244, 235, 0.96);
}

.book-details-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.book-details-title-wrap {
  display: grid;
  gap: 6px;
}

.book-details-kicker {
  margin: 0;
  color: rgba(199, 67, 58, 0.86);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.book-details-title-wrap label {
  color: rgba(70, 64, 56, 0.72);
  font-family: var(--reading-font);
  font-size: 0.94rem;
}

.book-details-title-wrap input,
.book-details-title-wrap textarea {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(222, 214, 201, 0.62);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.76);
  color: rgba(31, 29, 26, 0.94);
  font-family: var(--reading-font);
  font-size: 1.1rem;
}

.book-details-title-wrap input:focus,
.book-details-title-wrap textarea:focus {
  outline: 2px solid rgba(199, 67, 58, 0.28);
  outline-offset: 2px;
}

.book-details-meta {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.book-details-meta div {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(222, 214, 201, 0.34);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.52);
}

.book-details-meta dt {
  margin: 0 0 4px;
  color: rgba(105, 95, 82, 0.68);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-details-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(35, 32, 28, 0.9);
  font-family: var(--reading-font);
  font-size: 0.94rem;
  line-height: 1.22;
}

.book-details-progress-card,
.book-details-memory-card,
.book-details-source-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(222, 214, 201, 0.38);
  border-radius: 18px;
  display: grid;
  gap: 12px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.74), transparent 48%),
    rgba(255, 253, 247, 0.56);
  box-shadow:
    0 10px 24px rgba(40, 36, 28, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.book-details-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.book-details-section-head span {
  color: rgba(105, 95, 82, 0.7);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.book-details-section-head strong {
  min-width: 0;
  color: rgba(150, 52, 45, 0.92);
  font-family: var(--reading-font);
  font-size: 1.08rem;
  font-weight: 560;
  line-height: 1.1;
  text-align: right;
}

.book-details-progress-line {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(222, 214, 201, 0.64);
}

.book-details-progress-line span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(173, 77, 64, 0.88), rgba(199, 67, 58, 0.74));
}

.book-details-progress-card p {
  margin: 0;
  color: rgba(45, 40, 34, 0.86);
  font-family: var(--reading-font);
  font-size: 0.98rem;
  line-height: 1.35;
}

.book-details-progress-subgrid,
.book-details-memory-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.book-details-progress-subgrid span,
.book-details-memory-counts span {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(249, 244, 235, 0.72);
}

.book-details-progress-subgrid strong,
.book-details-memory-counts strong {
  display: block;
  overflow: hidden;
  color: rgba(34, 31, 27, 0.9);
  font-family: var(--reading-font);
  font-size: 0.95rem;
  font-weight: 560;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-details-progress-subgrid small,
.book-details-memory-counts small {
  display: block;
  margin-top: 3px;
  color: rgba(105, 95, 82, 0.66);
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-transform: uppercase;
}

.book-details-memory-counts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-details-memory-card blockquote {
  margin: 0;
  padding: 12px 13px;
  border-left: 2px solid rgba(199, 67, 58, 0.36);
  border-radius: 14px;
  background: rgba(249, 244, 235, 0.58);
}

.book-details-memory-card blockquote span {
  color: rgba(199, 67, 58, 0.82);
  font-size: 0.68rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.book-details-memory-card blockquote p {
  margin: 5px 0 0;
  color: rgba(34, 31, 27, 0.9);
  font-family: var(--reading-font);
  font-size: 0.98rem;
  line-height: 1.35;
}

.book-details-memory-card blockquote small {
  display: block;
  margin-top: 7px;
  color: rgba(84, 79, 70, 0.68);
  font-family: var(--reading-font);
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.3;
}

.book-details-source-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
}

.book-details-source-list div {
  min-width: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(222, 214, 201, 0.45);
}

.book-details-source-list dt {
  margin: 0 0 3px;
  color: rgba(105, 95, 82, 0.66);
  font-size: 0.68rem;
  font-weight: 740;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-details-source-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(35, 32, 28, 0.88);
  font-family: var(--reading-font);
  font-size: 0.9rem;
  line-height: 1.25;
}

.book-details-summary,
.book-details-status {
  margin: 0;
  color: rgba(84, 79, 70, 0.68);
  font-family: var(--reading-font);
  font-size: 0.94rem;
  line-height: 1.35;
}

.book-details-status {
  min-height: 1.25em;
  color: rgba(199, 67, 58, 0.84);
}

.book-details-status[data-state="error"] {
  color: rgba(162, 43, 36, 0.92);
}

.book-details-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.book-details-resume-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: -2px;
}

.book-details-actions button {
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(222, 214, 201, 0.5);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.7);
  color: rgba(54, 48, 41, 0.82);
  font-size: 0.82rem;
  font-weight: 720;
}

.book-details-actions button:disabled {
  opacity: 0.48;
}

.book-details-actions .book-details-primary {
  border-color: rgba(199, 67, 58, 0.28);
  background: rgba(199, 67, 58, 0.1);
  color: rgba(150, 52, 45, 0.95);
}

.book-details-actions .book-details-danger {
  color: rgba(150, 52, 45, 0.88);
}

/* Calmer, reader-first Book Info surface. */
.book-details-panel {
  place-items: center;
  padding:
    max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.84), transparent 48%),
    rgba(248, 244, 237, 0.94);
  backdrop-filter: blur(10px);
}

.book-details-sheet {
  width: min(820px, 100%);
  max-height: min(920px, calc(100vh - 36px));
  padding: 36px 36px 30px;
  border-color: rgba(222, 214, 201, 0.48);
  border-radius: 30px;
  gap: 18px;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(249, 244, 236, 0.97));
  box-shadow:
    0 26px 80px rgba(47, 39, 28, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.book-details-sheet:focus {
  outline: none;
}

.book-details-close {
  left: 22px;
  right: auto;
  top: 22px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(55, 50, 43, 0.78);
  box-shadow:
    0 10px 28px rgba(42, 35, 26, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.book-details-close::before,
.book-details-close::after {
  left: 16px;
  right: auto;
  width: 12px;
  height: 2px;
  transform-origin: left center;
}

.book-details-close::before {
  top: 21px;
  transform: rotate(-42deg);
}

.book-details-close::after {
  top: 21px;
  transform: rotate(42deg);
}

.book-details-hero {
  grid-template-columns: minmax(112px, 168px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 34px);
  align-items: center;
  min-height: 212px;
  padding: 38px 0 0;
}

.book-details-cover {
  width: min(168px, 30vw);
  max-width: 168px;
  min-width: 112px;
  border-radius: 12px;
  font-size: clamp(2.4rem, 7vw, 4.1rem);
  box-shadow:
    0 18px 36px rgba(52, 38, 28, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.book-details-title-wrap {
  align-content: center;
  gap: 8px;
}

.book-details-kicker {
  color: rgba(159, 62, 54, 0.74);
  letter-spacing: 0.08em;
}

.book-details-title-wrap label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.book-details-title-wrap input,
.book-details-title-wrap textarea {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(20, 19, 17, 0.96);
  font-size: clamp(1.86rem, 4.25vw, 2.72rem);
  font-weight: 430;
  line-height: 1.08;
  letter-spacing: 0;
  resize: none;
  field-sizing: content;
  overflow: hidden;
}

.book-details-title-wrap input:focus,
.book-details-title-wrap textarea:focus {
  outline: 2px solid rgba(178, 58, 52, 0.18);
  outline-offset: 6px;
}

.book-details-author {
  margin: 0;
  color: rgba(67, 61, 53, 0.78);
  font-family: var(--reading-font);
  font-size: clamp(1.05rem, 2.6vw, 1.22rem);
  line-height: 1.25;
}

.book-details-author[hidden] {
  display: none;
}

.book-details-source-pill {
  width: fit-content;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 7px 13px;
  border: 1px solid rgba(222, 214, 201, 0.54);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
  color: rgba(82, 75, 66, 0.78);
  font-size: 0.78rem;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow:
    0 6px 16px rgba(45, 38, 28, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.book-details-progress-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  gap: 12px;
}

.book-details-section-head span {
  color: rgba(84, 76, 66, 0.68);
  letter-spacing: 0.06em;
}

.book-details-section-head strong {
  color: rgba(151, 49, 44, 0.9);
}

.book-details-progress-line {
  height: 6px;
  background: rgba(225, 218, 208, 0.68);
}

.book-details-progress-card p {
  color: rgba(54, 49, 42, 0.82);
  font-size: clamp(1rem, 2.4vw, 1.12rem);
}

.book-details-progress-card small {
  margin-top: -6px;
  color: rgba(71, 64, 56, 0.76);
  font-family: var(--reading-font);
  font-size: 0.98rem;
  line-height: 1.25;
}

.book-details-resume-actions {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  max-width: 520px;
  margin-top: 2px;
}

.book-details-actions button {
  min-height: 52px;
  border-color: rgba(222, 214, 201, 0.48);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.64);
  color: rgba(48, 43, 37, 0.86);
  font-size: 0.94rem;
  box-shadow:
    0 8px 18px rgba(47, 39, 28, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.book-details-actions .book-details-primary {
  border-color: rgba(172, 62, 55, 0.14);
  background:
    linear-gradient(180deg, rgba(181, 58, 52, 0.94), rgba(160, 51, 46, 0.96));
  color: rgba(255, 253, 249, 0.98);
}

.book-details-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 18px 12px;
  border: 1px solid rgba(222, 214, 201, 0.5);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.64);
  box-shadow:
    0 12px 28px rgba(47, 39, 28, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.book-details-meta div {
  display: grid;
  gap: 4px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.book-details-meta div + div {
  border-left: 1px solid rgba(222, 214, 201, 0.58);
}

.book-details-meta dt {
  order: 2;
  margin: 0;
  color: rgba(81, 73, 64, 0.7);
  font-size: 0.8rem;
  font-weight: 580;
  letter-spacing: 0;
  text-transform: none;
}

.book-details-meta dd {
  order: 1;
  color: rgba(24, 22, 19, 0.94);
  font-size: clamp(1.18rem, 3.3vw, 1.58rem);
  line-height: 1.08;
}

.book-details-quote-card,
.book-details-memory-card,
.book-details-source-card,
.book-details-topics-card {
  padding: 22px 24px;
  border-color: rgba(222, 214, 201, 0.48);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.66);
  box-shadow:
    0 12px 30px rgba(47, 39, 28, 0.052),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.book-details-quote-card {
  min-height: 132px;
}

.book-details-quote-card blockquote {
  position: relative;
  margin: 0;
  padding: 8px 0 0 48px;
}

.book-details-quote-card blockquote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -6px;
  color: rgba(158, 49, 44, 0.86);
  font-family: Georgia, var(--reading-font), serif;
  font-size: 3rem;
  line-height: 1;
}

.book-details-quote-card blockquote p {
  margin: 0;
  color: rgba(24, 22, 19, 0.95);
  font-family: var(--reading-font);
  font-size: clamp(1.12rem, 2.8vw, 1.44rem);
  line-height: 1.34;
}

.book-details-quote-card blockquote small {
  display: block;
  margin-top: 11px;
  color: rgba(76, 69, 60, 0.76);
  font-family: var(--reading-font);
  font-size: 0.98rem;
}

.book-details-quote-empty {
  min-height: 58px;
  display: grid;
  align-items: center;
}

.book-details-quote-empty p {
  max-width: 36ch;
  margin: 0;
  color: rgba(83, 76, 67, 0.66);
  font-family: var(--reading-font);
  font-size: 1rem;
  line-height: 1.38;
}

.book-details-source-list {
  grid-template-columns: 1fr;
  gap: 0;
}

.book-details-source-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid rgba(222, 214, 201, 0.54);
}

.book-details-source-list dt {
  margin: 0;
  color: rgba(55, 49, 42, 0.82);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.book-details-source-list dd {
  max-width: 62%;
  color: rgba(24, 22, 19, 0.9);
  font-size: 0.92rem;
  text-align: right;
}

.book-details-memory-counts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.book-details-memory-counts span {
  background: rgba(249, 244, 235, 0.76);
}

.book-details-memory-card blockquote {
  border-color: rgba(173, 63, 55, 0.22);
  background: rgba(249, 244, 235, 0.44);
}

.book-details-secondary-actions {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
}

.book-details-secondary-actions .book-details-primary {
  border-color: rgba(172, 62, 55, 0.22);
  background: rgba(255, 255, 255, 0.64);
  color: rgba(151, 49, 44, 0.9);
}

.book-details-summary {
  padding-inline: 2px;
}

.book-details-topics-card {
  display: grid;
  gap: 14px;
}

.book-details-topic-chips,
.topic-related-list,
.topic-source-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.book-details-topic-chip,
.topic-related-list button {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--topic-color, #8f6a4c) 34%, rgba(222, 214, 201, 0.54));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--topic-color, #8f6a4c) 18%, transparent), transparent 60%),
    rgba(255, 255, 255, 0.62);
  color: color-mix(in srgb, var(--topic-color, #8f6a4c) 76%, #181512);
  font-family: var(--reading-font);
  font-size: 0.94rem;
  line-height: 1.1;
  box-shadow:
    0 7px 16px rgba(47, 39, 28, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.topic-related-list button em {
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--topic-color, #8f6a4c) 11%, transparent);
  color: color-mix(in srgb, var(--topic-color, #8f6a4c) 72%, var(--topic-soft, rgba(84, 79, 70, 0.72)));
  font-family: var(--ui-font);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 780;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.book-details-topic-chip:focus-visible,
.topic-related-list button:focus-visible,
.topic-discovery-tabs button:focus-visible,
.topic-book-card:focus-visible,
.topic-research-row:focus-visible,
.topic-article-row:focus-visible,
.topic-library-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--topic-color, #ad4d40) 28%, transparent);
  outline-offset: 3px;
}

.book-details-topics-card p {
  margin: 0;
  color: rgba(84, 79, 70, 0.68);
  font-family: var(--reading-font);
  font-size: 0.94rem;
  line-height: 1.35;
}

.topic-discovery-panel {
  position: fixed;
  inset: 0;
  z-index: 160;
  display: grid;
  place-items: stretch;
  padding: 0;
  background:
    radial-gradient(circle at 70% 4%, rgba(43, 145, 136, 0.18), transparent 38%),
    rgba(9, 10, 7, 0.98);
}

.topic-discovery-panel[hidden] {
  display: none;
}

.topic-discovery-sheet {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 78% 3%, rgba(44, 144, 136, 0.22), transparent 34%),
    radial-gradient(circle at 10% 72%, rgba(163, 96, 54, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(20, 18, 14, 0.98), rgba(9, 10, 7, 0.98));
  color: rgba(250, 241, 226, 0.96);
  box-shadow: none;
}

.topic-discovery-sheet:focus {
  outline: none;
}

.topic-discovery-close {
  position: sticky;
  top: max(18px, env(safe-area-inset-top));
  left: 18px;
  z-index: 2;
  margin: max(18px, env(safe-area-inset-top)) 0 -58px max(18px, env(safe-area-inset-left));
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(250, 241, 226, 0.9);
}

.topic-discovery-content {
  width: min(760px, 100%);
  margin: 0 auto;
  padding:
    calc(72px + env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(34px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  display: grid;
  gap: 24px;
}

.topic-discovery-content.is-topic-context {
  width: min(980px, 100%);
  min-height: 100%;
  align-content: stretch;
}

.topic-context-entry {
  min-height: 52px;
  padding: 9px 14px;
  border: 1px solid var(--topic-control-border, rgba(236, 222, 198, 0.1));
  border-radius: 999px;
  display: grid;
  grid-template-columns: 28px minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background:
    radial-gradient(circle at calc(100% - 32px) 50%, color-mix(in srgb, var(--topic-color, #2d9f98) 20%, transparent), transparent 36%),
    var(--topic-control-bg, rgba(255, 255, 255, 0.075));
  color: var(--topic-heading, rgba(255, 248, 236, 0.96));
  text-align: left;
  box-shadow:
    0 10px 24px rgba(37, 29, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.topic-context-entry-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--topic-accent, rgba(67, 204, 194, 0.9));
}

.topic-context-entry-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topic-context-entry strong {
  min-width: 0;
  font-family: var(--ui-font);
  font-size: 0.92rem;
  font-weight: 780;
}

.topic-context-entry small {
  min-width: 0;
  overflow: hidden;
  color: var(--topic-soft, rgba(190, 171, 146, 0.74));
  font-size: 0.76rem;
  font-weight: 680;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-context-view {
  min-height: calc(100vh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 24px);
}

.topic-context-header {
  display: grid;
  justify-items: center;
  gap: 7px;
  text-align: center;
}

.topic-context-header p,
.topic-context-drawer-top p {
  margin: 0;
  color: var(--topic-heading, rgba(255, 248, 236, 0.96));
  font-family: var(--ui-font);
  font-size: 0.76rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topic-context-header h2,
.topic-context-drawer h3 {
  margin: 0;
  color: var(--topic-heading, rgba(255, 248, 236, 0.96));
  font-family: var(--reading-font);
  font-weight: 440;
  letter-spacing: 0;
}

.topic-context-header h2 {
  font-size: clamp(1.45rem, 5.4vw, 2.45rem);
  line-height: 1.05;
}

.topic-context-header small {
  max-width: 34ch;
  color: var(--topic-muted, rgba(221, 204, 181, 0.74));
  font-family: var(--reading-font);
  font-size: 0.98rem;
  line-height: 1.32;
}

.topic-context-body {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 320px);
  gap: clamp(18px, 3vw, 28px);
  align-items: center;
}

.topic-context-stage {
  position: relative;
  width: min(100%, 610px);
  aspect-ratio: 1;
  min-height: 360px;
  justify-self: center;
  isolation: isolate;
}

.topic-context-stage::before {
  content: "";
  position: absolute;
  inset: 7%;
  z-index: -2;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--topic-color, #2d9f98) 10%, transparent), transparent 62%),
    repeating-radial-gradient(circle, transparent 0 68px, color-mix(in srgb, var(--topic-color, #2d9f98) 12%, transparent) 69px 70px);
  opacity: 0.7;
}

.topic-context-links {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: visible;
}

.topic-context-links circle,
.topic-context-links line {
  fill: none;
  stroke: color-mix(in srgb, var(--topic-color, #2d9f98) 35%, var(--topic-line, rgba(236, 222, 198, 0.1)));
  stroke-width: 0.22;
  stroke-dasharray: 1.4 1.8;
  vector-effect: non-scaling-stroke;
  opacity: 0.72;
}

.topic-context-center,
.topic-context-node,
.topic-context-drawer-mark {
  position: absolute;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--topic-color, #2d9f98) 26%, var(--topic-card-border, rgba(236, 222, 198, 0.11)));
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--topic-heading, rgba(255, 248, 236, 0.96));
  isolation: isolate;
}

.topic-context-center::before,
.topic-context-node::before,
.topic-context-drawer-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--topic-image);
  background-size: cover;
  background-position: center;
  opacity: 0.42;
}

.topic-context-center::after,
.topic-context-node::after,
.topic-context-drawer-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color, #2d9f98) 62%, #17221e), color-mix(in srgb, var(--topic-color, #2d9f98) 30%, #060807));
}

.topic-context-center {
  left: 50%;
  top: 50%;
  width: clamp(128px, 28vw, 176px);
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  padding: 22px;
  gap: 7px;
  text-align: center;
  box-shadow:
    0 18px 44px color-mix(in srgb, var(--topic-color, #2d9f98) 28%, rgba(0, 0, 0, 0.3)),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: topic-context-center-in 360ms cubic-bezier(0.18, 0.84, 0.22, 1);
}

.topic-context-center span,
.topic-context-node span {
  position: relative;
  display: grid;
  place-items: center;
}

.topic-context-center svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.topic-context-center strong {
  position: relative;
  max-width: 8ch;
  font-family: var(--reading-font);
  font-size: clamp(1.15rem, 4.2vw, 1.75rem);
  font-weight: 450;
  line-height: 1.02;
}

.topic-context-node {
  left: var(--node-x);
  top: var(--node-y);
  width: clamp(86px, 19vw, 112px);
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  padding: 12px;
  gap: 5px;
  background: var(--topic-card-bg);
  text-align: center;
  box-shadow:
    0 14px 30px rgba(36, 29, 20, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  animation: topic-context-node-in 340ms cubic-bezier(0.18, 0.84, 0.22, 1) both;
  animation-delay: var(--delay, 0ms);
}

.topic-context-node::after {
  background:
    radial-gradient(circle at 30% 14%, rgba(255, 255, 255, 0.34), transparent 38%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color, #2d9f98) 15%, var(--topic-card-bg)), color-mix(in srgb, var(--topic-color, #2d9f98) 8%, var(--topic-control-bg)));
}

.topic-context-node svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: color-mix(in srgb, var(--topic-color, #2d9f98) 78%, var(--topic-heading));
  stroke-width: 1.85;
}

.topic-context-node strong {
  position: relative;
  color: var(--topic-heading);
  font-family: var(--ui-font);
  font-size: clamp(0.72rem, 2.4vw, 0.85rem);
  font-weight: 780;
  line-height: 1.08;
}

.topic-context-node[data-topic-connection-type="unexpected"] {
  border-color: color-mix(in srgb, var(--topic-color, #2d9f98) 46%, var(--topic-card-border));
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--topic-color, #2d9f98) 18%, rgba(36, 29, 20, 0.13)),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.topic-context-drawer {
  align-self: stretch;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--topic-card-border);
  border-radius: 24px;
  display: grid;
  gap: 16px;
  background: var(--topic-card-bg);
  box-shadow: var(--topic-card-shadow);
}

.topic-context-drawer-top {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.topic-context-drawer-mark {
  position: relative;
  width: 66px;
  aspect-ratio: 1;
  color: var(--topic-heading);
}

.topic-context-drawer-mark svg {
  position: relative;
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

.topic-context-drawer h3 {
  margin-top: 2px;
  font-size: 1.35rem;
  line-height: 1.08;
}

.topic-context-drawer small,
.topic-context-suggestions p {
  color: var(--topic-muted);
  font-family: var(--reading-font);
  font-size: 0.94rem;
  line-height: 1.34;
}

.topic-context-counts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.topic-context-counts div {
  min-width: 0;
  padding: 9px 7px;
  border: 1px solid var(--topic-control-border);
  border-radius: 14px;
  display: grid;
  gap: 2px;
  background: var(--topic-control-bg);
  text-align: center;
}

.topic-context-counts dt,
.topic-context-counts dd {
  margin: 0;
}

.topic-context-counts dt {
  overflow: hidden;
  color: var(--topic-soft);
  font-size: 0.62rem;
  font-weight: 760;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.topic-context-counts dd {
  color: var(--topic-heading);
  font-family: var(--reading-font);
  font-size: 1.04rem;
}

.topic-context-reasons {
  display: grid;
  gap: 9px;
}

.topic-context-reasons h4 {
  margin: 0;
  color: var(--topic-heading);
  font-family: var(--ui-font);
  font-size: 0.78rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topic-context-reasons article {
  padding: 10px 11px;
  border: 1px solid color-mix(in srgb, var(--topic-color, #2d9f98) 18%, var(--topic-card-border));
  border-radius: 14px;
  display: grid;
  gap: 5px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--topic-color, #2d9f98) 9%, transparent), transparent 64%),
    color-mix(in srgb, var(--topic-control-bg) 68%, transparent);
}

.topic-context-reasons span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}

.topic-context-reasons strong {
  min-width: 0;
  overflow: hidden;
  color: var(--topic-heading);
  font-family: var(--ui-font);
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-context-reasons em {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--topic-color, #2d9f98) 12%, transparent);
  color: color-mix(in srgb, var(--topic-color, #2d9f98) 70%, var(--topic-heading));
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.topic-context-reasons p {
  margin: 0;
  color: var(--topic-muted);
  font-family: var(--reading-font);
  font-size: 0.83rem;
  line-height: 1.32;
}

.topic-context-reasons small {
  color: var(--topic-soft);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
}

.topic-context-primary {
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--topic-color, #2d9f98) 86%, #d62420), color-mix(in srgb, var(--topic-color, #2d9f98) 60%, #a90f0b));
  color: rgba(255, 255, 255, 0.98);
  font-weight: 820;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--topic-color, #2d9f98) 22%, transparent);
}

.topic-context-suggestions {
  display: grid;
  gap: 10px;
}

.topic-context-suggestions h4 {
  margin: 0;
  color: var(--topic-heading);
  font-family: var(--reading-font);
  font-size: 1.12rem;
  font-weight: 470;
}

.topic-context-read {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--topic-control-border);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
  background: color-mix(in srgb, var(--topic-control-bg) 78%, transparent);
  color: inherit;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.topic-context-read-cover {
  width: 46px;
  aspect-ratio: 0.72;
  border: 1px solid var(--topic-card-border);
  border-radius: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--topic-cover-bg);
}

.topic-context-read-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic-context-read-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.topic-context-read-kicker {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.topic-context-read-kicker span {
  min-width: 0;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--topic-color, #2d9f98) 20%, var(--topic-control-border));
  border-radius: 999px;
  overflow: hidden;
  color: color-mix(in srgb, var(--topic-color, #2d9f98) 58%, var(--topic-heading));
  font-size: 0.62rem;
  font-weight: 780;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-context-read strong {
  min-width: 0;
  overflow: hidden;
  color: var(--topic-heading);
  font-family: var(--reading-font);
  font-size: 0.95rem;
  font-weight: 520;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-context-read small {
  min-width: 0;
  overflow: hidden;
  color: var(--topic-soft);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-context-read-badges {
  margin-top: 1px;
}

.topic-context-footer {
  min-height: 54px;
  padding: 7px;
  border: 1px solid var(--topic-control-border);
  border-radius: 999px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
  background: var(--topic-control-bg);
  box-shadow:
    0 12px 28px rgba(37, 29, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.topic-context-breadcrumb {
  min-width: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.topic-context-breadcrumb::-webkit-scrollbar {
  display: none;
}

.topic-context-breadcrumb button {
  flex: 0 0 auto;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 12px;
  background: transparent;
  color: var(--topic-soft);
  font-size: 0.82rem;
  font-weight: 720;
}

.topic-context-breadcrumb button[aria-current="page"] {
  color: var(--topic-accent);
}

.topic-context-info {
  width: 40px;
  height: 40px;
  border: 1px solid var(--topic-control-border);
  border-radius: 50%;
  background: var(--topic-card-bg);
  color: var(--topic-heading);
  font-family: var(--reading-font);
  font-size: 1rem;
}

@keyframes topic-context-center-in {
  from {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.86);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes topic-context-node-in {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 760px) {
  .topic-context-entry {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .topic-context-entry small {
    grid-column: 2;
    text-align: left;
  }

  .topic-context-body {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .topic-context-stage {
    min-height: min(86vw, 430px);
  }

  .topic-context-drawer {
    border-radius: 20px;
  }
}

@media (max-width: 430px) {
  .topic-discovery-content.is-topic-context {
    gap: 18px;
  }

  .topic-context-stage {
    width: calc(100vw - 28px);
    min-height: calc(100vw - 28px);
  }

  .topic-context-node {
    width: clamp(76px, 23vw, 94px);
    padding: 10px;
  }

  .topic-context-node svg {
    width: 22px;
    height: 22px;
  }

  .topic-context-node strong {
    font-size: 0.68rem;
  }

  .topic-context-center {
    width: clamp(112px, 34vw, 142px);
    padding: 18px;
  }

  .topic-context-counts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.topic-discovery-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  align-items: center;
  gap: 22px;
}

.topic-discovery-kicker {
  margin: 0 0 7px;
  color: rgba(200, 160, 102, 0.86);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.topic-discovery-hero h2 {
  margin: 0 0 9px;
  color: rgba(255, 248, 236, 0.98);
  font-family: var(--reading-font);
  font-size: clamp(2.1rem, 7vw, 3.2rem);
  font-weight: 430;
  line-height: 1.02;
  letter-spacing: 0;
}

.topic-discovery-hero p {
  max-width: 42ch;
  margin: 0;
  color: rgba(221, 204, 181, 0.76);
  font-family: var(--reading-font);
  font-size: 1.04rem;
  line-height: 1.42;
}

.topic-discovery-mark {
  position: relative;
  width: 96px;
  aspect-ratio: 1;
  border: 1px solid rgba(70, 190, 180, 0.18);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(27, 82, 75, 0.78);
  color: rgba(81, 214, 205, 0.9);
}

.topic-discovery-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.24;
}

.topic-discovery-mark svg {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topic-discovery-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: 50px;
  padding: 5px;
  border: 1px solid rgba(236, 222, 198, 0.09);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  gap: 4px;
}

.topic-discovery-tabs button {
  min-width: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(250, 241, 226, 0.9);
  font-family: var(--reading-font);
  font-size: 0.96rem;
}

.topic-discovery-tabs button.is-active {
  background: linear-gradient(180deg, rgba(45, 159, 152, 0.72), rgba(31, 102, 96, 0.76));
  color: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.topic-live-status {
  min-height: 34px;
  padding: 9px 12px;
  border: 1px solid rgba(236, 222, 198, 0.08);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-self: start;
  color: rgba(214, 190, 154, 0.78);
  background: rgba(255, 255, 255, 0.045);
  font-family: var(--ui-font);
  font-size: 0.76rem;
  font-weight: 720;
}

.topic-live-status span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(214, 160, 94, 0.8);
  box-shadow: 0 0 0 4px rgba(214, 160, 94, 0.1);
}

.topic-live-status.is-loading span {
  background: rgba(64, 204, 194, 0.9);
  box-shadow: 0 0 0 4px rgba(64, 204, 194, 0.1);
  animation: topic-source-pulse 1.6s ease-in-out infinite;
}

.topic-live-status strong {
  font: inherit;
}

@keyframes topic-source-pulse {
  0%,
  100% {
    transform: scale(0.86);
    opacity: 0.66;
  }

  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

.topic-discovery-section {
  display: grid;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(236, 222, 198, 0.08);
}

.topic-discovery-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.topic-discovery-section h3 {
  margin: 0;
  color: rgba(255, 248, 236, 0.96);
  font-family: var(--reading-font);
  font-size: 1.35rem;
  font-weight: 430;
  line-height: 1.15;
}

.topic-overview-card,
.topic-empty-card,
.topic-research-row,
.topic-article-row,
.topic-library-row {
  border: 1px solid rgba(236, 222, 198, 0.1);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.topic-overview-card {
  position: relative;
  overflow: hidden;
  min-height: 160px;
  padding: 20px;
  isolation: isolate;
}

.topic-overview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--topic-image);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
}

.topic-overview-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 12, 8, 0.9), rgba(11, 12, 8, 0.5));
}

.topic-overview-card p {
  max-width: 44ch;
  margin: 0;
  color: rgba(232, 218, 196, 0.82);
  font-family: var(--reading-font);
  font-size: 1.02rem;
  line-height: 1.45;
}

.topic-source-badges {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topic-source-badges span {
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(236, 222, 198, 0.1);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(217, 193, 157, 0.82);
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.76rem;
  font-weight: 720;
}

.topic-source-badges em {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: rgba(255, 248, 236, 0.92);
  background: rgba(45, 159, 152, 0.26);
  font-size: 0.68rem;
  font-style: normal;
}

.topic-suggested-section {
  gap: 12px;
}

.topic-suggested-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.topic-suggestion-card {
  min-width: 0;
  min-height: 108px;
  padding: 10px;
  border: 1px solid var(--topic-card-border);
  border-radius: 15px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background:
    radial-gradient(circle at 16% 0%, color-mix(in srgb, var(--topic-color, #2d9f98) 10%, transparent), transparent 58%),
    var(--topic-card-bg);
  color: inherit;
  text-align: left;
  box-shadow: var(--topic-card-shadow);
}

.topic-suggestion-cover {
  width: 54px;
  aspect-ratio: 0.72;
  border: 1px solid var(--topic-card-border);
  border-radius: 9px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--topic-cover-bg);
}

.topic-suggestion-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic-suggestion-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.topic-suggestion-kicker {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.topic-suggestion-kicker span {
  min-width: 0;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--topic-color, #2d9f98) 22%, var(--topic-control-border));
  border-radius: 999px;
  overflow: hidden;
  color: color-mix(in srgb, var(--topic-color, #2d9f98) 62%, var(--topic-heading));
  background: color-mix(in srgb, var(--topic-accent-soft) 58%, transparent);
  font-size: 0.62rem;
  font-weight: 780;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-suggestion-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--topic-heading);
  font-family: var(--reading-font);
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-suggestion-card small {
  min-width: 0;
  overflow: hidden;
  color: var(--topic-soft);
  font-family: var(--reading-font);
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-suggestion-badges {
  margin-top: 1px;
}

.topic-book-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 142px);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.topic-book-rail::-webkit-scrollbar {
  display: none;
}

.topic-book-card {
  min-width: 0;
  border: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.topic-book-cover {
  width: 100%;
  aspect-ratio: 0.68;
  border: 1px solid rgba(236, 222, 198, 0.14);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.topic-book-cover img,
.topic-article-thumb img,
.topic-library-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic-book-card strong,
.topic-research-row strong,
.topic-article-row strong,
.topic-library-row strong {
  color: rgba(255, 248, 236, 0.96);
  font-family: var(--reading-font);
  font-size: 1rem;
  font-weight: 430;
  line-height: 1.18;
}

.topic-book-card small,
.topic-research-row small,
.topic-article-row small,
.topic-library-row small {
  color: rgba(190, 171, 146, 0.74);
  font-family: var(--reading-font);
  font-size: 0.83rem;
  line-height: 1.2;
}

.topic-research-list {
  display: grid;
  gap: 10px;
}

.topic-research-row,
.topic-article-row,
.topic-library-row {
  width: 100%;
  min-height: 86px;
  padding: 10px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  color: inherit;
  text-align: left;
}

.topic-library-row {
  grid-template-columns: 48px minmax(0, 1fr) auto;
}

.topic-research-icon {
  width: 58px;
  aspect-ratio: 1;
  border: 1px solid rgba(64, 192, 183, 0.18);
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: rgba(92, 214, 205, 0.9);
  background: rgba(27, 82, 75, 0.72);
  font-family: var(--ui-font);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.topic-research-row span:last-child,
.topic-article-row span:last-child,
.topic-library-row span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.topic-research-row em,
.topic-library-row em {
  color: rgba(67, 204, 194, 0.88);
  font-family: var(--reading-font);
  font-size: 0.84rem;
  font-style: normal;
}

.topic-research-badges {
  margin-top: 2px;
}

.topic-research-badges .research-access-badge {
  min-height: 23px;
  border-color: rgba(236, 222, 198, 0.1);
  background: rgba(255, 255, 255, 0.055);
  color: rgba(217, 193, 157, 0.84);
}

.topic-research-badges .research-access-badge.is-pdf,
.topic-research-badges .research-access-badge.is-full-text,
.topic-research-badges .research-access-badge.is-open-access {
  border-color: rgba(67, 204, 194, 0.18);
  background: rgba(67, 204, 194, 0.1);
  color: rgba(92, 222, 213, 0.94);
}

.topic-research-badges .research-access-badge.is-pmc,
.topic-research-badges .research-access-badge.is-source-pubmed {
  border-color: rgba(91, 184, 190, 0.16);
  background: rgba(91, 184, 190, 0.09);
  color: rgba(128, 218, 223, 0.92);
}

.topic-article-thumb,
.topic-library-cover {
  width: 58px;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.topic-library-cover {
  width: 48px;
  aspect-ratio: 0.68;
  border-radius: 7px;
}

.topic-related-list button {
  min-height: 38px;
  background: rgba(255, 255, 255, 0.045);
  color: color-mix(in srgb, var(--topic-color, #44b9ae) 58%, #fff);
}

.topic-cluster-section {
  gap: 12px;
}

.topic-cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.topic-cluster-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--topic-card-border);
  border-radius: 15px;
  display: grid;
  gap: 11px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--topic-accent) 10%, transparent), transparent 56%),
    var(--topic-card-bg);
  box-shadow: var(--topic-card-shadow);
}

.topic-cluster-card h4 {
  margin: 0;
  color: var(--topic-heading);
  font-family: var(--reading-font);
  font-size: 1rem;
  font-weight: 480;
  line-height: 1.14;
}

.topic-cluster-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.topic-cluster-topics button {
  min-height: 32px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--topic-color, #2d756b) 30%, var(--topic-card-border));
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--topic-color, #2d756b) 14%, transparent), transparent 60%),
    var(--topic-badge-bg);
  color: color-mix(in srgb, var(--topic-color, #2d756b) 68%, var(--topic-heading));
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .topic-cluster-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(210px, 78vw);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .topic-cluster-grid::-webkit-scrollbar {
    display: none;
  }
}

.topic-empty-card {
  margin: 0;
  padding: 16px;
  color: rgba(190, 171, 146, 0.74);
  font-family: var(--reading-font);
  line-height: 1.35;
}

/* Topic discovery theme pass: light and dark share structure, with mode-specific surface tokens. */
.topic-discovery-panel {
  --topic-page-bg:
    linear-gradient(180deg, rgba(249, 246, 238, 0.98), rgba(239, 231, 216, 0.98));
  --topic-sheet-bg:
    linear-gradient(180deg, rgba(251, 248, 240, 0.98), rgba(244, 237, 224, 0.98) 58%, rgba(235, 226, 210, 0.98));
  --topic-text: rgba(28, 25, 21, 0.94);
  --topic-heading: rgba(25, 22, 19, 0.96);
  --topic-muted: rgba(82, 75, 64, 0.72);
  --topic-soft: rgba(105, 93, 76, 0.62);
  --topic-line: rgba(108, 91, 68, 0.14);
  --topic-card-bg:
    linear-gradient(180deg, rgba(255, 253, 248, 0.78), rgba(247, 241, 230, 0.7));
  --topic-card-border: rgba(119, 96, 68, 0.16);
  --topic-card-shadow:
    0 13px 30px rgba(63, 50, 32, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --topic-control-bg: rgba(255, 253, 248, 0.72);
  --topic-control-border: rgba(119, 96, 68, 0.15);
  --topic-tab-bg: rgba(48, 41, 31, 0.06);
  --topic-tab-text: rgba(54, 47, 38, 0.78);
  --topic-tab-active-bg:
    linear-gradient(180deg, rgba(48, 141, 132, 0.92), rgba(36, 109, 101, 0.92));
  --topic-tab-active-text: rgba(255, 253, 248, 0.98);
  --topic-accent: rgba(39, 128, 119, 0.92);
  --topic-accent-soft: rgba(39, 128, 119, 0.14);
  --topic-warm: rgba(151, 94, 51, 0.82);
  --topic-icon-bg:
    linear-gradient(145deg, rgba(223, 241, 237, 0.92), rgba(190, 222, 215, 0.9));
  --topic-icon-border: rgba(40, 136, 126, 0.2);
  --topic-icon-text: rgba(31, 128, 119, 0.96);
  --topic-overview-overlay: linear-gradient(90deg, rgba(252, 249, 242, 0.92), rgba(252, 249, 242, 0.58));
  --topic-overview-image-opacity: 0.2;
  --topic-badge-bg: rgba(255, 253, 248, 0.68);
  --topic-badge-text: rgba(92, 76, 53, 0.78);
  --topic-cover-bg: rgba(255, 253, 248, 0.68);
  --topic-focus-ring: rgba(43, 138, 128, 0.32);
  background: var(--topic-page-bg);
}

html.theme-dark .topic-discovery-panel,
body.theme-dark .topic-discovery-panel {
  --topic-page-bg:
    linear-gradient(180deg, rgba(20, 18, 15, 0.99), rgba(12, 13, 10, 0.99));
  --topic-sheet-bg:
    linear-gradient(180deg, rgba(21, 19, 15, 0.99), rgba(14, 14, 11, 0.99) 58%, rgba(9, 10, 7, 0.99));
  --topic-text: rgba(250, 241, 226, 0.94);
  --topic-heading: rgba(255, 248, 236, 0.97);
  --topic-muted: rgba(221, 204, 181, 0.74);
  --topic-soft: rgba(190, 171, 146, 0.74);
  --topic-line: rgba(236, 222, 198, 0.1);
  --topic-card-bg:
    linear-gradient(180deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.034);
  --topic-card-border: rgba(236, 222, 198, 0.11);
  --topic-card-shadow:
    0 13px 30px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --topic-control-bg: rgba(255, 255, 255, 0.075);
  --topic-control-border: rgba(236, 222, 198, 0.1);
  --topic-tab-bg: rgba(255, 255, 255, 0.06);
  --topic-tab-text: rgba(250, 241, 226, 0.88);
  --topic-tab-active-bg:
    linear-gradient(180deg, rgba(45, 159, 152, 0.72), rgba(31, 102, 96, 0.76));
  --topic-tab-active-text: rgba(255, 255, 255, 0.98);
  --topic-accent: rgba(67, 204, 194, 0.9);
  --topic-accent-soft: rgba(67, 204, 194, 0.12);
  --topic-warm: rgba(212, 160, 94, 0.84);
  --topic-icon-bg: rgba(27, 82, 75, 0.78);
  --topic-icon-border: rgba(70, 190, 180, 0.18);
  --topic-icon-text: rgba(81, 214, 205, 0.9);
  --topic-overview-overlay: linear-gradient(90deg, rgba(11, 12, 8, 0.9), rgba(11, 12, 8, 0.5));
  --topic-overview-image-opacity: 0.22;
  --topic-badge-bg: rgba(255, 255, 255, 0.055);
  --topic-badge-text: rgba(217, 193, 157, 0.82);
  --topic-cover-bg: rgba(255, 255, 255, 0.08);
  --topic-focus-ring: rgba(67, 204, 194, 0.3);
}

.topic-discovery-sheet {
  background: var(--topic-sheet-bg);
  color: var(--topic-text);
}

.topic-discovery-close {
  border-color: var(--topic-control-border);
  background: var(--topic-control-bg);
  color: var(--topic-heading);
  box-shadow:
    0 12px 28px rgba(39, 31, 21, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.topic-discovery-kicker {
  color: var(--topic-warm);
}

.topic-discovery-hero h2,
.topic-discovery-section h3,
.topic-book-card strong,
.topic-research-row strong,
.topic-article-row strong,
.topic-library-row strong {
  color: var(--topic-heading);
}

.topic-discovery-hero p,
.topic-overview-card p {
  color: var(--topic-muted);
}

.topic-discovery-mark {
  border-color: var(--topic-icon-border);
  background: var(--topic-icon-bg);
  color: var(--topic-icon-text);
  box-shadow:
    0 16px 34px rgba(42, 34, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.topic-discovery-mark img {
  opacity: 0.24;
  mix-blend-mode: multiply;
}

html.theme-dark .topic-discovery-mark img,
body.theme-dark .topic-discovery-mark img {
  mix-blend-mode: normal;
}

.topic-discovery-tabs {
  border-color: var(--topic-control-border);
  background: var(--topic-tab-bg);
}

.topic-discovery-tabs button {
  color: var(--topic-tab-text);
}

.topic-discovery-tabs button.is-active {
  background: var(--topic-tab-active-bg);
  color: var(--topic-tab-active-text);
  box-shadow:
    0 7px 16px rgba(32, 99, 92, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.topic-live-status {
  border-color: var(--topic-control-border);
  background: var(--topic-control-bg);
  color: var(--topic-badge-text);
}

.topic-live-status span {
  background: var(--topic-warm);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--topic-warm) 16%, transparent);
}

.topic-live-status.is-loading span {
  background: var(--topic-accent);
  box-shadow: 0 0 0 4px var(--topic-accent-soft);
}

.topic-discovery-section {
  border-color: var(--topic-line);
}

.topic-overview-card,
.topic-empty-card,
.topic-research-row,
.topic-article-row,
.topic-library-row {
  border-color: var(--topic-card-border);
  background: var(--topic-card-bg);
  box-shadow: var(--topic-card-shadow);
}

.topic-overview-card::before {
  opacity: var(--topic-overview-image-opacity);
}

.topic-overview-card::after {
  background: var(--topic-overview-overlay);
}

.topic-source-badges span {
  border-color: var(--topic-control-border);
  background: var(--topic-badge-bg);
  color: var(--topic-badge-text);
}

.topic-source-badges em {
  background: var(--topic-accent-soft);
  color: var(--topic-accent);
}

.topic-book-cover,
.topic-article-thumb,
.topic-library-cover {
  border: 1px solid var(--topic-card-border);
  background: var(--topic-cover-bg);
}

.topic-book-card small,
.topic-research-row small,
.topic-article-row small,
.topic-library-row small,
.topic-empty-card {
  color: var(--topic-soft);
}

.topic-research-icon {
  border-color: var(--topic-icon-border);
  background: var(--topic-icon-bg);
  color: var(--topic-icon-text);
}

.topic-research-row em,
.topic-library-row em {
  color: var(--topic-accent);
}

.topic-related-list button {
  border-color: color-mix(in srgb, var(--topic-color, #2d756b) 32%, var(--topic-card-border));
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--topic-color, #2d756b) 14%, transparent), transparent 60%),
    var(--topic-badge-bg);
  color: color-mix(in srgb, var(--topic-color, #2d756b) 68%, var(--topic-heading));
  box-shadow: var(--topic-card-shadow);
}

.book-details-topics-card {
  background: var(--topic-card-bg);
  border-color: var(--topic-card-border);
  box-shadow: var(--topic-card-shadow);
}

html.theme-dark .book-details-topics-card,
body.theme-dark .book-details-topics-card {
  --topic-card-bg:
    radial-gradient(circle at 18% 0%, rgba(255, 244, 226, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(45, 40, 34, 0.88), rgba(34, 30, 26, 0.88));
  --topic-card-border: rgba(225, 212, 190, 0.12);
  --topic-card-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.06);
}

html.theme-dark .book-details-topic-chip,
body.theme-dark .book-details-topic-chip {
  border-color: color-mix(in srgb, var(--topic-color, #73b5a8) 34%, rgba(225, 212, 190, 0.13));
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--topic-color, #73b5a8) 18%, transparent), transparent 60%),
    rgba(255, 244, 226, 0.07);
  color: color-mix(in srgb, var(--topic-color, #73b5a8) 62%, rgba(250, 244, 234, 0.96));
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 244, 226, 0.08);
}

html.theme-dark .book-details-topics-card p,
body.theme-dark .book-details-topics-card p {
  color: rgba(214, 204, 188, 0.68);
}

.book-details-topic-chip:focus-visible,
.topic-related-list button:focus-visible,
.topic-cluster-topics button:focus-visible,
.topic-discovery-tabs button:focus-visible,
.topic-suggestion-card:focus-visible,
.topic-book-card:focus-visible,
.topic-research-row:focus-visible,
.topic-article-row:focus-visible,
.topic-library-row:focus-visible {
  outline-color: var(--topic-focus-ring);
}

#bookDetailsOpenMemoryButton,
.book-details-memory-card {
  display: none !important;
}

.focus-word.is-memory-highlight,
.context-token.is-memory-highlight,
.ebook-word.is-memory-highlight {
  border-radius: 0.24em;
  background: rgba(255, 220, 128, 0.34);
  box-shadow:
    0 0 0 0.12em rgba(255, 220, 128, 0.14),
    inset 0 -0.08em 0 rgba(199, 67, 58, 0.18);
}

.focus-word.is-memory-bookmark,
.context-token.is-memory-bookmark,
.ebook-word.is-memory-bookmark {
  position: relative;
  color: rgba(128, 48, 42, 0.98);
}

.focus-word.is-memory-bookmark::after,
.context-token.is-memory-bookmark::after,
.ebook-word.is-memory-bookmark::after {
  content: "";
  position: absolute;
  right: -0.18em;
  top: -0.22em;
  width: 0.32em;
  height: 0.32em;
  border-radius: 50%;
  background: rgba(199, 67, 58, 0.82);
  box-shadow: 0 0 0 0.12em rgba(199, 67, 58, 0.12);
}

.memory-panel {
  position: fixed;
  inset: 0;
  z-index: 142;
  display: grid;
  place-items: end center;
  padding:
    0 max(18px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(28, 24, 18, 0.17);
  color: var(--ink);
}

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

.memory-sheet {
  position: relative;
  width: min(540px, 100%);
  max-height: min(740px, calc(100vh - 42px));
  padding: 20px;
  border: 1px solid rgba(222, 214, 201, 0.62);
  border-radius: 24px;
  display: grid;
  gap: 14px;
  overflow: auto;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.88), transparent 48%),
    rgba(249, 244, 235, 0.98);
  box-shadow:
    0 26px 74px rgba(40, 34, 25, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.memory-close {
  position: absolute;
  right: 11px;
  top: 11px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.72);
  color: rgba(91, 87, 80, 0.62);
}

.memory-close::before,
.memory-close::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 14px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
}

.memory-close::before {
  transform: rotate(45deg);
}

.memory-close::after {
  transform: rotate(-45deg);
}

.memory-header {
  padding-right: 34px;
}

.memory-kicker {
  margin: 0 0 5px;
  color: rgba(199, 67, 58, 0.86);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.memory-header h2 {
  margin: 0;
  color: rgba(24, 23, 21, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(1.45rem, 5vw, 1.9rem);
  font-weight: 520;
  letter-spacing: 0;
}

.memory-header small {
  display: block;
  margin-top: 5px;
  color: rgba(84, 79, 70, 0.66);
  font-family: var(--reading-font);
  font-size: 0.92rem;
}

.memory-actions,
.memory-tabs,
.memory-note-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.memory-actions button,
.memory-tabs button,
.memory-note-actions button,
.memory-item-actions button {
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(222, 214, 201, 0.5);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.7);
  color: rgba(54, 48, 41, 0.82);
  font-size: 0.82rem;
  font-weight: 720;
}

.memory-action-primary,
.memory-tabs button.is-active {
  border-color: rgba(199, 67, 58, 0.28);
  background: rgba(199, 67, 58, 0.1);
  color: rgba(150, 52, 45, 0.95);
}

.memory-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.memory-status {
  min-height: 1.25em;
  margin: -2px 0 0;
  color: rgba(199, 67, 58, 0.84);
  font-family: var(--reading-font);
  font-size: 0.9rem;
}

.memory-status[data-state="error"] {
  color: rgba(162, 43, 36, 0.92);
}

.memory-list {
  display: grid;
  gap: 9px;
}

.memory-empty {
  margin: 0;
  padding: 22px 16px;
  border: 1px solid rgba(222, 214, 201, 0.34);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.52);
  color: rgba(84, 79, 70, 0.66);
  font-family: var(--reading-font);
  text-align: center;
}

.memory-item {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(222, 214, 201, 0.38);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.58);
}

.memory-jump {
  min-width: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 5px;
  background: transparent;
  color: inherit;
  text-align: left;
}

.memory-jump span {
  color: rgba(199, 67, 58, 0.82);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.memory-jump strong {
  overflow-wrap: anywhere;
  color: rgba(34, 31, 27, 0.94);
  font-family: var(--reading-font);
  font-size: 1rem;
  font-weight: 520;
  line-height: 1.25;
}

.memory-jump small,
.memory-jump em {
  color: rgba(84, 79, 70, 0.66);
  font-family: var(--reading-font);
  font-size: 0.84rem;
  line-height: 1.25;
}

.memory-jump em {
  color: rgba(74, 68, 60, 0.78);
  font-style: italic;
}

.memory-item-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.memory-note-form {
  padding-top: 4px;
  display: grid;
  gap: 8px;
}

.memory-note-form[hidden] {
  display: none;
}

.memory-note-form label {
  color: rgba(70, 64, 56, 0.72);
  font-family: var(--reading-font);
  font-size: 0.94rem;
}

.memory-note-form textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid rgba(222, 214, 201, 0.62);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.76);
  color: rgba(31, 29, 26, 0.94);
  font-family: var(--reading-font);
  font-size: 1rem;
  line-height: 1.35;
}

.memory-note-form textarea:focus {
  outline: 2px solid rgba(199, 67, 58, 0.28);
  outline-offset: 2px;
}

.book-note-panel {
  position: fixed;
  inset: 0;
  z-index: 146;
  display: grid;
  place-items: end center;
  padding:
    0 max(18px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(28, 24, 18, 0.16);
  color: var(--ink);
}

.book-note-panel[hidden] {
  display: none;
}

.book-note-sheet {
  position: relative;
  width: min(520px, 100%);
  max-height: min(620px, calc(100vh - 42px));
  padding: 21px 21px 20px;
  border: 1px solid rgba(222, 214, 201, 0.62);
  border-radius: 24px;
  display: grid;
  gap: 14px;
  overflow: auto;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.9), transparent 48%),
    rgba(249, 244, 235, 0.985);
  box-shadow:
    0 26px 74px rgba(40, 34, 25, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.book-note-close {
  position: absolute;
  right: 11px;
  top: 11px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.72);
  color: rgba(91, 87, 80, 0.62);
}

.book-note-close::before,
.book-note-close::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 14px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
}

.book-note-close::before {
  transform: rotate(45deg);
}

.book-note-close::after {
  transform: rotate(-45deg);
}

.book-note-header {
  padding-right: 34px;
}

.book-note-kicker {
  margin: 0 0 5px;
  color: rgba(199, 67, 58, 0.86);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.book-note-header h2 {
  margin: 0;
  color: rgba(24, 23, 21, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(1.35rem, 4.8vw, 1.82rem);
  font-weight: 520;
  letter-spacing: 0;
}

.book-note-header small {
  display: block;
  margin-top: 5px;
  color: rgba(84, 79, 70, 0.7);
  font-family: var(--reading-font);
  font-size: 0.92rem;
}

.book-note-text {
  display: grid;
  gap: 0.82em;
  color: rgba(38, 34, 29, 0.9);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.9vw, 1.14rem);
  line-height: 1.5;
}

.book-note-text p {
  margin: 0;
}

.book-note-return {
  width: fit-content;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(199, 67, 58, 0.22);
  border-radius: 999px;
  background: rgba(199, 67, 58, 0.08);
  color: rgba(151, 48, 42, 0.94);
  font-family: var(--ui-font);
  font-size: 0.82rem;
  font-weight: 680;
}

.character-legend-panel {
  position: fixed;
  inset: 0;
  z-index: 147;
  display: grid;
  place-items: end center;
  padding:
    0 max(18px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background: rgba(28, 24, 18, 0.16);
  color: var(--ink);
}

.character-legend-panel[hidden] {
  display: none;
}

.character-legend-sheet {
  position: relative;
  width: min(520px, 100%);
  max-height: min(620px, calc(100vh - 42px));
  padding: 21px 21px 20px;
  border: 1px solid rgba(222, 214, 201, 0.62);
  border-radius: 24px;
  display: grid;
  gap: 14px;
  overflow: auto;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.9), transparent 48%),
    rgba(249, 244, 235, 0.985);
  box-shadow:
    0 26px 74px rgba(40, 34, 25, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.character-legend-close {
  position: absolute;
  right: 11px;
  top: 11px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 247, 0.72);
  color: rgba(91, 87, 80, 0.62);
}

.character-legend-close::before,
.character-legend-close::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 14px;
  height: 1.8px;
  border-radius: 999px;
  background: currentColor;
}

.character-legend-close::before {
  transform: rotate(45deg);
}

.character-legend-close::after {
  transform: rotate(-45deg);
}

.character-legend-header {
  padding-right: 34px;
}

.character-legend-kicker {
  margin: 0 0 5px;
  color: rgba(199, 67, 58, 0.86);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.character-legend-header h2 {
  margin: 0;
  color: rgba(24, 23, 21, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(1.35rem, 4.8vw, 1.82rem);
  font-weight: 520;
  letter-spacing: 0;
}

.character-legend-header small {
  display: block;
  margin-top: 5px;
  color: rgba(84, 79, 70, 0.7);
  font-family: var(--reading-font);
  font-size: 0.92rem;
}

.character-legend-list {
  display: grid;
  gap: 9px;
}

.character-legend-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--character-dialogue-color, rgb(82, 55, 45)) 22%, rgba(222, 214, 201, 0.42));
  border-radius: 14px;
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--character-dialogue-color, rgb(82, 55, 45)) 13%, transparent), transparent 48%),
    rgba(255, 253, 247, 0.62);
}

.character-legend-health,
.character-legend-debug {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(222, 214, 201, 0.45);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.66);
}

.character-legend-health {
  border-color: rgba(112, 126, 106, 0.24);
}

.character-legend-health.is-ok {
  border-color: rgba(174, 132, 54, 0.28);
}

.character-legend-health.is-review {
  border-color: rgba(176, 78, 67, 0.3);
}

.character-legend-debug {
  border-color: color-mix(in srgb, var(--character-dialogue-color, rgb(82, 55, 45)) 34%, rgba(222, 214, 201, 0.42));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--character-dialogue-color, rgb(82, 55, 45)) 15%, transparent), transparent 48%),
    rgba(255, 253, 247, 0.7);
}

.character-legend-health-label,
.character-legend-debug-label {
  color: rgba(199, 67, 58, 0.78);
  font-family: var(--ui-font);
  font-size: 0.67rem;
  font-weight: 720;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.character-legend-health strong,
.character-legend-debug strong {
  color: rgba(34, 31, 27, 0.94);
  font-family: var(--reading-font);
  font-size: 1.04rem;
  font-weight: 580;
  line-height: 1.2;
}

.character-legend-swatch {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--character-dialogue-color, rgb(82, 55, 45));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.62),
    0 4px 10px color-mix(in srgb, var(--character-dialogue-color, rgb(82, 55, 45)) 24%, transparent);
}

.character-legend-name {
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(34, 31, 27, 0.94);
  font-family: var(--reading-font);
  font-size: 1.02rem;
  font-weight: 560;
  line-height: 1.22;
}

.character-legend-item small,
.character-legend-health small,
.character-legend-debug small,
.character-legend-empty {
  color: rgba(84, 79, 70, 0.66);
  font-family: var(--reading-font);
  font-size: 0.86rem;
  line-height: 1.25;
}

.character-legend-empty {
  margin: 0;
  padding: 22px 16px;
  border: 1px solid rgba(222, 214, 201, 0.34);
  border-radius: 14px;
  background: rgba(255, 253, 247, 0.52);
  text-align: center;
}

html.theme-dark .character-legend-panel,
body.theme-dark .character-legend-panel {
  background: rgba(0, 0, 0, 0.34);
}

html.theme-dark .character-legend-sheet,
body.theme-dark .character-legend-sheet {
  border-color: rgba(236, 222, 198, 0.12);
  background:
    radial-gradient(circle at 50% -18%, rgba(119, 92, 64, 0.14), transparent 48%),
    rgba(30, 27, 23, 0.985);
  box-shadow:
    0 26px 74px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 244, 226, 0.06);
}

html.theme-dark .character-legend-close,
body.theme-dark .character-legend-close {
  background: rgba(255, 244, 226, 0.08);
  color: rgba(235, 224, 208, 0.62);
}

html.theme-dark .character-legend-kicker,
body.theme-dark .character-legend-kicker {
  color: rgba(230, 135, 121, 0.88);
}

html.theme-dark .character-legend-header h2,
body.theme-dark .character-legend-header h2,
html.theme-dark .character-legend-name,
body.theme-dark .character-legend-name,
html.theme-dark .character-legend-health strong,
body.theme-dark .character-legend-health strong,
html.theme-dark .character-legend-debug strong,
body.theme-dark .character-legend-debug strong {
  color: rgba(250, 244, 234, 0.95);
}

html.theme-dark .character-legend-header small,
body.theme-dark .character-legend-header small,
html.theme-dark .character-legend-item small,
body.theme-dark .character-legend-item small,
html.theme-dark .character-legend-health small,
body.theme-dark .character-legend-health small,
html.theme-dark .character-legend-debug small,
body.theme-dark .character-legend-debug small,
html.theme-dark .character-legend-empty,
body.theme-dark .character-legend-empty {
  color: rgba(214, 204, 188, 0.68);
}

html.theme-dark .character-legend-item,
body.theme-dark .character-legend-item,
html.theme-dark .character-legend-health,
body.theme-dark .character-legend-health,
html.theme-dark .character-legend-empty,
body.theme-dark .character-legend-empty {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--character-dialogue-color, rgb(255, 190, 156)) 16%, transparent), transparent 48%),
    rgba(255, 244, 226, 0.055);
  border-color: color-mix(in srgb, var(--character-dialogue-color, rgb(255, 190, 156)) 24%, rgba(236, 222, 198, 0.11));
}

html.theme-dark .character-legend-debug,
body.theme-dark .character-legend-debug {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--character-dialogue-color, rgb(255, 190, 156)) 18%, transparent), transparent 48%),
    rgba(255, 244, 226, 0.06);
  border-color: color-mix(in srgb, var(--character-dialogue-color, rgb(255, 190, 156)) 30%, rgba(236, 222, 198, 0.12));
}

.pdf-source-panel {
  position: fixed;
  inset: 0;
  z-index: 147;
  display: grid;
  place-items: stretch;
  padding: 0;
  background: var(--reader-surface);
  color: var(--ink);
  touch-action: manipulation;
}

.pdf-source-panel[hidden] {
  display: none;
}

.pdf-source-sheet {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  height: 100dvh;
  justify-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: block;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

.pdf-source-header {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.pdf-source-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  display: block;
  overflow: hidden;
  background: transparent;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  overscroll-behavior: contain;
}

.pdf-source-frame.is-zoomed {
  align-items: flex-start;
  justify-content: flex-start;
}

.pdf-source-frame.is-pinching {
  cursor: zoom-in;
}

.pdf-source-page-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  display: block;
  background: #fff;
  box-shadow: none;
  touch-action: none;
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  will-change: transform;
}

.pdf-source-page-wrap.is-pinching {
  will-change: transform;
}

.pdf-source-page-wrap[hidden] {
  display: none;
}

.pdf-source-page-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
}

.pdf-source-text-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: text;
  -webkit-user-select: text;
}

.pdf-source-text-word {
  position: absolute;
  display: block;
  box-sizing: border-box;
  overflow: visible;
  color: rgba(0, 0, 0, 0.012);
  line-height: 1;
  transform-origin: left top;
  white-space: pre;
  cursor: text;
  -webkit-tap-highlight-color: transparent;
}

.pdf-source-text-word::before {
  content: "";
  position: absolute;
  left: var(--pdf-selection-left, -1px);
  top: var(--pdf-selection-top, 8%);
  width: var(--pdf-selection-width, calc(100% + 2px));
  height: var(--pdf-selection-height, 84%);
  border-radius: max(1.5px, 0.14em);
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.985);
  transform-origin: center;
  transition:
    opacity 120ms ease,
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 160ms ease,
    box-shadow 180ms ease;
}

.pdf-source-text-word[data-word-index] {
  cursor: pointer;
}

.pdf-source-text-word::selection {
  color: rgba(23, 22, 20, 0.86);
  background: rgba(181, 66, 60, 0.24);
}

.pdf-source-text-word.is-selected {
  z-index: 1;
  background: transparent;
  box-shadow: none;
}

.pdf-source-text-word.is-selected::before {
  background: rgba(225, 158, 56, 0.32);
  box-shadow:
    0 0 0 1px rgba(203, 124, 34, 0.22),
    0 0 9px rgba(225, 158, 56, 0.13);
  opacity: 1;
  transform: scale(1);
}

.pdf-source-panel.is-highlight-gliding .pdf-source-text-word.is-selected::before {
  opacity: 0;
}

.pdf-source-panel.is-camera-entering,
.pdf-source-panel.is-camera-exiting {
  pointer-events: none;
}

.pdf-source-panel.is-camera-entering:not(.is-camera-highlight-ready) .pdf-source-text-word.is-selected::before {
  opacity: 0;
}

.pdf-source-selection-glider {
  position: fixed;
  z-index: 160;
  display: block;
  border-radius: max(1.5px, 0.14em);
  background: rgba(225, 158, 56, 0.32);
  box-shadow:
    0 0 0 1px rgba(203, 124, 34, 0.22),
    0 0 9px rgba(225, 158, 56, 0.13);
  pointer-events: none;
  transform-origin: left top;
  will-change: transform;
}

.pdf-source-selection-pulse {
  position: absolute;
  z-index: 162;
  display: block;
  border: 1px solid rgba(217, 53, 44, 0.24);
  border-radius: 0.42em;
  background: rgba(255, 224, 132, 0.2);
  box-shadow:
    inset 0 0 0 1px rgba(217, 53, 44, 0.1),
    0 0 0 3px rgba(255, 224, 132, 0.12),
    0 7px 18px rgba(217, 53, 44, 0.1);
  pointer-events: none;
  transform-origin: center;
  will-change: transform, opacity;
  animation: contextLandingRipple 720ms ease-out both;
}

.pdf-source-text-word.is-handoff-source {
  background: transparent;
  box-shadow: none;
  opacity: 0;
}

.pdf-source-word-mask,
.pdf-source-flight-word {
  position: fixed;
  pointer-events: none;
  transform-origin: center center;
}

.pdf-source-word-mask {
  z-index: 152;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.32),
    0 0 10px rgba(255, 255, 255, 0.28);
  will-change: opacity;
}

.pdf-source-flight-word {
  z-index: 153;
  display: inline-grid;
  place-items: center start;
  overflow: visible;
  white-space: pre;
  color: rgba(24, 23, 21, 0.88);
  font-family: var(--ui-font);
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  will-change: transform, opacity;
}

.pdf-source-flight-word-original {
  text-shadow: 0 0 0.01px currentColor;
}

.pdf-source-panel.is-handoff-exiting,
.pdf-source-panel.is-handoff-entering {
  will-change: opacity;
}

.pdf-source-panel.is-pdf-zoom-handoff .pdf-source-page-wrap {
  will-change: transform, opacity, filter;
}

.pdf-source-panel.is-handoff-exiting .pdf-source-header,
.pdf-source-panel.is-handoff-exiting .pdf-source-actions,
.pdf-source-panel.is-handoff-entering .pdf-source-header,
.pdf-source-panel.is-handoff-entering .pdf-source-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.pdf-source-actions {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(48px, calc(env(safe-area-inset-bottom) + 32px));
  z-index: 4;
  width: min(560px, calc(100% - var(--screen-pad-left) - var(--screen-pad-right)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  justify-items: center;
  pointer-events: none;
  transform: translate(-50%, -10px);
}

.pdf-source-actions button {
  pointer-events: auto;
}

.pdf-source-actions button:disabled {
  opacity: 0.42;
  cursor: default;
}

.pdf-source-actions .transport-controls {
  border-color: rgba(255, 255, 255, 0.46);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.18) 43%, transparent 66%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.38), rgba(224, 214, 198, 0.26));
  box-shadow:
    0 20px 42px rgba(43, 36, 27, 0.16),
    0 2px 10px rgba(255, 255, 255, 0.28),
    inset 0 1px 2px rgba(255, 255, 255, 0.72),
    inset 0 -3px 9px rgba(103, 83, 58, 0.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.22);
  backdrop-filter: blur(24px) saturate(1.22);
}

.pdf-source-actions .round-side-button,
.pdf-source-actions .round-side-button:hover,
.pdf-source-actions .round-side-button:focus,
.pdf-source-actions .round-side-button:focus-visible,
.pdf-source-actions .round-side-button:active,
.pdf-source-actions .pdf-source-panel-toggle,
.pdf-source-actions .pdf-source-panel-toggle:hover,
.pdf-source-actions .pdf-source-panel-toggle:focus,
.pdf-source-actions .pdf-source-panel-toggle:focus-visible,
.pdf-source-actions .pdf-source-panel-toggle:active,
.pdf-source-actions .pdf-source-panel-toggle.is-open,
.pdf-source-actions .pdf-source-panel-toggle[aria-pressed="true"] {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.56), rgba(250, 246, 237, 0.22) 52%, rgba(213, 201, 182, 0.18) 100%);
  color: rgba(50, 47, 42, 0.82);
  filter: none;
  outline: none;
  transform: none;
  box-shadow:
    0 14px 28px rgba(40, 36, 28, 0.15),
    inset 0 2px 2px rgba(255, 255, 255, 0.7),
    inset 0 -3px 7px rgba(129, 108, 82, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

.pdf-source-actions .play-control-button,
.pdf-source-actions .play-control-button:hover,
.pdf-source-actions .play-control-button:focus,
.pdf-source-actions .play-control-button:focus-visible,
.pdf-source-actions .play-control-button:active {
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 255, 255, 0.72), rgba(252, 248, 240, 0.44) 54%, rgba(222, 211, 194, 0.28) 100%);
  color: rgba(10, 10, 10, 0.92);
  filter: none;
  transform: none;
  box-shadow:
    0 16px 32px rgba(40, 36, 28, 0.16),
    inset 0 4px 10px rgba(255, 255, 255, 0.62),
    inset 0 -3px 8px rgba(103, 83, 58, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.36);
  -webkit-backdrop-filter: blur(18px) saturate(1.16);
  backdrop-filter: blur(18px) saturate(1.16);
}

.pdf-source-actions .play-control-button::before {
  opacity: 0.72;
}

.pdf-source-status {
  margin: 0;
  padding: 24px;
  color: rgba(91, 87, 80, 0.7);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.9vw, 1.12rem);
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 520px) {
  .book-details-panel {
    padding-inline: max(12px, env(safe-area-inset-left));
  }

  .memory-panel,
  .book-note-panel,
  .character-legend-panel {
    padding-inline: max(12px, env(safe-area-inset-left));
  }

  .memory-sheet,
  .book-note-sheet,
  .character-legend-sheet {
    max-height: calc(100vh - 28px);
    padding: 18px;
    border-radius: 22px;
  }

  .memory-actions,
  .memory-note-actions,
  .memory-item-actions {
    grid-template-columns: 1fr;
  }

  .book-details-sheet {
    max-height: calc(100vh - 28px);
    padding: 18px;
    border-radius: 22px;
  }

  .pdf-source-actions {
    left: 50%;
    right: auto;
    width: min(390px, calc(100% - var(--screen-pad-left) - var(--screen-pad-right)));
    bottom: max(46px, calc(env(safe-area-inset-bottom) + 30px));
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    transform: translate(-50%, -10px);
  }

  .pdf-source-actions button {
    padding-inline: 0;
  }

  .book-details-meta,
  .book-details-actions,
  .book-details-resume-actions,
  .book-details-source-list {
    grid-template-columns: 1fr;
  }

  .book-details-progress-subgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-details-source-card .book-details-section-head {
    display: grid;
    gap: 4px;
  }

  .book-details-source-card .book-details-section-head strong {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .book-details-panel {
    place-items: stretch center;
    padding:
      max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }

  .book-details-sheet {
    width: 100%;
    max-height: calc(100vh - 20px);
    padding: 24px 22px 22px;
    border-radius: 24px;
  }

  .book-details-close {
    left: 18px;
    top: 18px;
    width: 40px;
    height: 40px;
  }

  .book-details-close::before,
  .book-details-close::after {
    left: 15px;
    top: 19px;
  }

  .book-details-hero {
    grid-template-columns: minmax(104px, 132px) minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding-top: 56px;
  }

  .book-details-cover {
    width: min(132px, 31vw);
    min-width: 104px;
  }

  .book-details-title-wrap input,
  .book-details-title-wrap textarea {
    font-size: clamp(1.72rem, 7vw, 2.34rem);
  }

  .book-details-resume-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .book-details-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
  }

  .book-details-meta div {
    padding: 15px 12px;
  }

  .book-details-meta div + div {
    border-left: 0;
  }

  .book-details-meta div:nth-child(even) {
    border-left: 1px solid rgba(222, 214, 201, 0.58);
  }

  .book-details-meta div:nth-child(n + 3) {
    border-top: 1px solid rgba(222, 214, 201, 0.58);
  }

  .book-details-source-list {
    grid-template-columns: 1fr;
  }

  .book-details-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-details-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 440px) {
  .book-details-sheet {
    padding-inline: 18px;
  }

  .book-details-hero {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 15px;
  }

  .book-details-cover {
    width: 96px;
    min-width: 96px;
  }

  .book-details-source-list div {
    align-items: start;
    display: grid;
    gap: 4px;
  }

  .book-details-source-list dd {
    max-width: none;
    text-align: left;
  }
}

/* Book Info mockup alignment pass. */
.book-details-sheet {
  width: min(760px, 100%);
  gap: 20px;
}

.book-details-hero {
  grid-template-columns: minmax(132px, 170px) minmax(0, 1fr);
  align-items: start;
}

.book-details-title-wrap {
  min-width: 0;
  padding-top: 10px;
}

.book-details-title-wrap textarea {
  min-height: 2.2em;
}

.book-details-progress-card {
  margin-top: 0;
}

.book-details-meta {
  overflow: hidden;
}

.book-details-quote-card,
.book-details-source-card,
.book-details-insights-card {
  min-width: 0;
  padding: 22px 24px;
  border: 1px solid rgba(222, 214, 201, 0.48);
  border-radius: 18px;
  display: grid;
  gap: 14px;
  background: rgba(255, 253, 249, 0.66);
  box-shadow:
    0 12px 30px rgba(47, 39, 28, 0.052),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.book-details-insights-card {
  gap: 18px;
}

.book-details-insights-head h3 {
  margin: 0;
  color: rgba(24, 22, 19, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(1.42rem, 3.4vw, 1.78rem);
  font-weight: 480;
  letter-spacing: 0;
}

.book-details-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.book-details-insight-tile {
  min-width: 0;
  padding: 16px 15px;
  border: 1px solid rgba(222, 214, 201, 0.44);
  border-radius: 13px;
  display: grid;
  gap: 7px;
  background: rgba(255, 255, 255, 0.54);
  box-shadow:
    0 8px 18px rgba(47, 39, 28, 0.038),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.book-details-insight-tile small {
  overflow: hidden;
  color: rgba(58, 52, 45, 0.84);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-details-insight-tile strong {
  color: rgba(24, 22, 19, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(1.36rem, 3.5vw, 1.72rem);
  font-weight: 500;
  line-height: 1;
}

.book-details-insight-tile em {
  color: rgba(84, 78, 69, 0.72);
  font-family: var(--reading-font);
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.2;
}

.book-details-week-strip {
  padding: 14px 10px 10px;
  border: 1px solid rgba(222, 214, 201, 0.28);
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.44);
}

.book-details-week-strip p {
  margin: 0 0 12px;
  color: rgba(84, 78, 69, 0.72);
  font-family: var(--reading-font);
  font-size: 0.92rem;
}

.book-details-week-strip div {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.book-details-week-strip span {
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(92, 86, 77, 0.62);
  font-size: 0.78rem;
}

.book-details-week-strip i {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: block;
  background: rgba(219, 214, 207, 0.68);
}

.book-details-week-strip span.is-active i {
  background: rgba(166, 53, 48, 0.94);
  box-shadow: 0 5px 12px rgba(166, 53, 48, 0.16);
}

.book-details-summary {
  display: none;
}

#bookDetailsOpenMemoryButton {
  display: block !important;
}

@media (max-width: 720px) {
  .book-details-panel {
    place-items: start center;
    padding:
      max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
      max(0px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  }

  .book-details-sheet {
    max-height: calc(100vh - 24px);
    padding: 34px 20px 24px;
    border-radius: 31px;
    gap: 20px;
  }

  .book-details-close {
    left: 24px;
    top: 24px;
    width: 48px;
    height: 48px;
  }

  .book-details-close::before,
  .book-details-close::after {
    left: 18px;
    top: 23px;
  }

  .book-details-hero {
    grid-template-columns: minmax(112px, 31vw) minmax(0, 1fr);
    gap: 18px;
    padding-top: 78px;
  }

  .book-details-cover {
    width: min(132px, 31vw);
    min-width: 108px;
    align-self: start;
  }

  .book-details-title-wrap {
    padding-top: 6px;
  }

  .book-details-title-wrap textarea {
    min-height: 2.22em;
    font-size: clamp(2rem, 7.15vw, 2.55rem);
    line-height: 1.06;
  }

  .book-details-author {
    font-size: clamp(1.08rem, 4.3vw, 1.34rem);
  }

  .book-details-source-pill {
    margin-top: 6px;
  }

  .book-details-progress-card {
    gap: 10px;
  }

  .book-details-resume-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .book-details-actions button {
    min-height: 58px;
    border-radius: 16px;
    font-size: 1rem;
  }

  .book-details-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .book-details-quote-card,
  .book-details-source-card,
  .book-details-insights-card {
    padding: 22px;
    border-radius: 18px;
  }

  .book-details-source-list div {
    display: flex;
    align-items: baseline;
    gap: 14px;
  }

  .book-details-source-list dd {
    max-width: 58%;
    text-align: right;
  }

  .book-details-insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
  }

  .book-details-insight-tile {
    padding: 14px 10px;
  }

  .book-details-insight-tile small {
    white-space: normal;
  }

  .book-details-week-strip div {
    gap: 6px;
  }
}

@media (max-width: 440px) {
  .book-details-sheet {
    padding-inline: 18px;
  }

  .book-details-hero {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding-top: 74px;
  }

  .book-details-cover {
    width: 96px;
    min-width: 96px;
  }

  .book-details-title-wrap textarea {
    min-height: 2.28em;
    font-size: clamp(1.86rem, 7.4vw, 2.24rem);
  }

  .book-details-progress-card p,
  .book-details-progress-card small {
    overflow-wrap: anywhere;
  }

  .book-details-meta dd {
    font-size: clamp(1.25rem, 6vw, 1.62rem);
  }

  .book-details-source-list div {
    display: flex;
  }

  .book-details-source-list dd {
    max-width: 55%;
    text-align: right;
  }

  .book-details-insight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Book Info compact mockup polish. */
.book-details-sheet {
  width: min(720px, 100%);
  gap: 16px;
  padding: 30px 34px 26px;
}

.book-details-close {
  width: 42px;
  height: 42px;
}

.book-details-close::before,
.book-details-close::after {
  top: 20px;
}

.book-details-hero {
  grid-template-columns: minmax(112px, 142px) minmax(0, 1fr);
  gap: clamp(18px, 3.4vw, 30px);
  min-height: 176px;
  padding-top: 34px;
}

.book-details-cover {
  width: min(142px, 25vw);
  min-width: 108px;
  max-width: 142px;
  border-radius: 11px;
}

.book-details-title-wrap {
  gap: 7px;
  padding-top: 7px;
}

.book-details-kicker {
  margin-bottom: 1px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
}

.book-details-title-wrap textarea {
  min-height: 0;
  font-size: clamp(1.58rem, 3.4vw, 2.1rem);
  line-height: 1.06;
  pointer-events: none;
}

.book-details-title-wrap textarea:focus {
  outline: none;
}

.book-details-author {
  font-size: clamp(0.98rem, 2.2vw, 1.1rem);
  line-height: 1.24;
}

.book-details-source-pill {
  margin-top: 5px;
  padding: 6px 12px;
  font-size: 0.74rem;
}

.book-details-progress-card {
  gap: 9px;
}

.book-details-section-head span {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.book-details-section-head strong {
  font-size: 1.04rem;
}

.book-details-progress-line {
  height: 5px;
}

.book-details-progress-card p {
  font-size: 0.94rem;
  line-height: 1.32;
}

.book-details-progress-card small {
  margin-top: -5px;
  font-size: 0.9rem;
}

.book-details-actions button {
  min-height: 48px;
  border-radius: 13px;
  font-size: 0.9rem;
}

.book-details-resume-actions {
  max-width: 470px;
  gap: 10px;
}

.book-details-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 15px 8px;
  border-radius: 16px;
}

.book-details-meta div {
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 10px;
}

.book-details-meta div:nth-child(n + 1) {
  border-top: 0;
}

.book-details-meta div:nth-child(even) {
  border-left: 0;
}

.book-details-meta div + div {
  border-left: 1px solid rgba(222, 214, 201, 0.58);
}

.book-details-stat-icon {
  width: 17px;
  height: 17px;
  color: rgba(135, 112, 91, 0.92);
  display: inline-grid;
  place-items: center;
}

.book-details-stat-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.book-details-meta dd {
  font-size: clamp(0.98rem, 2.4vw, 1.24rem);
  font-weight: 500;
  letter-spacing: 0;
  white-space: normal;
}

.book-details-meta dt {
  font-size: 0.74rem;
  line-height: 1.15;
}

.book-details-quote-card,
.book-details-source-card,
.book-details-insights-card {
  padding: 19px 22px;
  border-radius: 16px;
  gap: 12px;
}

.book-details-quote-card {
  min-height: 112px;
}

.book-details-quote-card blockquote {
  padding-left: 38px;
}

.book-details-quote-card blockquote::before {
  font-size: 2.42rem;
}

.book-details-quote-card blockquote p,
.book-details-quote-empty p {
  font-size: clamp(0.98rem, 2.3vw, 1.2rem);
  line-height: 1.34;
}

.book-details-source-list div {
  padding: 8px 0;
}

.book-details-source-list dt,
.book-details-source-list dd {
  font-size: 0.84rem;
}

.book-details-insights-card {
  gap: 15px;
}

.book-details-insights-head h3 {
  font-size: clamp(1.22rem, 2.9vw, 1.55rem);
}

.book-details-insight-grid {
  gap: 10px;
}

.book-details-insight-tile {
  padding: 13px 12px;
  gap: 6px;
  border-radius: 12px;
}

.book-details-insight-tile small {
  font-size: 0.76rem;
}

.book-details-insight-tile strong {
  font-size: clamp(1.12rem, 2.8vw, 1.42rem);
}

.book-details-insight-tile em,
.book-details-week-strip p {
  font-size: 0.84rem;
}

.book-details-week-strip {
  padding: 12px 10px 9px;
}

.book-details-week-strip i {
  width: 23px;
  height: 23px;
}

.book-details-secondary-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.book-details-secondary-actions .book-details-danger {
  border-color: rgba(199, 67, 58, 0.22);
  color: rgba(151, 49, 44, 0.94);
}

#bookDetailsOpenMemoryButton,
#bookDetailsSaveButton,
#bookDetailsReprocessButton {
  display: none !important;
}

@media (max-width: 720px) {
  .book-details-panel {
    padding:
      max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right))
      max(0px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }

  .book-details-sheet {
    max-height: calc(100vh - 18px);
    gap: 15px;
    padding: 26px 18px 22px;
    border-radius: 30px;
  }

  .book-details-close {
    left: 18px;
    top: 18px;
    width: 42px;
    height: 42px;
  }

  .book-details-close::before,
  .book-details-close::after {
    left: 16px;
    top: 20px;
  }

  .book-details-hero {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding-top: 56px;
  }

  .book-details-cover {
    width: 94px;
    min-width: 94px;
    max-width: 94px;
  }

  .book-details-title-wrap {
    gap: 6px;
    padding-top: 2px;
  }

  .book-details-kicker {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  .book-details-title-wrap textarea {
    min-height: 0;
    font-size: clamp(1.42rem, 5.8vw, 1.92rem);
    line-height: 1.08;
  }

  .book-details-author {
    font-size: clamp(0.94rem, 3.6vw, 1.08rem);
  }

  .book-details-source-pill {
    padding: 5px 10px;
    font-size: 0.68rem;
  }

  .book-details-actions button {
    min-height: 50px;
    border-radius: 14px;
    font-size: 0.9rem;
  }

  .book-details-meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 13px 5px;
  }

  .book-details-meta div {
    padding: 0 5px;
  }

  .book-details-meta dd {
    font-size: clamp(0.78rem, 3.2vw, 1rem);
  }

  .book-details-meta dt {
    font-size: 0.62rem;
  }

  .book-details-stat-icon {
    width: 15px;
    height: 15px;
  }

  .book-details-quote-card,
  .book-details-source-card,
  .book-details-insights-card {
    padding: 18px;
    border-radius: 16px;
  }

  .book-details-insight-grid {
    gap: 8px;
  }

  .book-details-insight-tile {
    padding: 12px 9px;
  }

  .book-details-secondary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  .book-details-sheet {
    padding-inline: 15px;
  }

  .book-details-hero {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
  }

  .book-details-cover {
    width: 86px;
    min-width: 86px;
    max-width: 86px;
  }

  .book-details-title-wrap textarea {
    font-size: clamp(1.32rem, 5.7vw, 1.72rem);
  }

  .book-details-meta div {
    padding-inline: 3px;
  }
}

/* Book Info full-screen view pass. */
.book-details-panel {
  display: block;
  place-items: unset;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  overflow: auto;
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.72), transparent 38%),
    linear-gradient(180deg, rgb(250, 246, 238), rgb(242, 235, 223));
  backdrop-filter: none;
  isolation: isolate;
}

.book-details-sheet {
  width: min(760px, 100%);
  max-height: none;
  min-height: 100%;
  margin: 0 auto;
  padding: clamp(72px, 8.5vh, 92px) 0 34px;
  border: 0;
  border-radius: 0;
  gap: 18px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.book-details-close.collection-back {
  position: fixed;
  top: var(--screen-pad-top);
  left: calc(var(--screen-pad-left) + var(--top-corner-inset));
  right: auto;
  z-index: 4;
  width: var(--top-control-size);
  min-width: var(--top-control-size);
  height: var(--top-control-size);
  min-height: var(--top-control-size);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 253, 247, 0.68);
  color: rgba(45, 42, 38, 0.48);
  box-shadow:
    inset 0 0 0 1px rgba(222, 214, 201, 0.3),
    0 9px 20px rgba(40, 36, 28, 0.052);
}

.book-details-close.collection-back::before {
  position: static;
  width: 9.5px;
  height: 9.5px;
  border: 0;
  border-left: 1.85px solid currentColor;
  border-bottom: 1.85px solid currentColor;
  border-radius: 0;
  background: transparent;
  opacity: 0.82;
  transform: translate(2px, -1px) rotate(45deg);
}

.book-details-close.collection-back::after {
  content: none;
}

.book-details-hero {
  grid-template-columns: minmax(112px, 154px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 34px);
  align-items: start;
  min-height: 0;
  padding: 0;
}

.book-details-cover {
  width: min(154px, 25vw);
  min-width: 112px;
  max-width: 154px;
}

.book-details-title-wrap {
  gap: 8px;
  padding-top: 2px;
}

.book-details-kicker {
  display: none;
}

.book-details-title-wrap textarea {
  font-size: clamp(1.72rem, 3.8vw, 2.32rem);
}

.book-details-title-wrap .book-details-progress-card {
  margin-top: 12px;
}

.book-details-progress-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.book-details-resume-actions {
  width: 100%;
  max-width: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 6px;
}

.book-details-quote-card {
  min-height: 96px;
}

.book-details-quote-empty {
  min-height: 0;
  align-items: start;
}

.book-details-source-card {
  gap: 0;
}

@media (max-width: 720px) {
  .book-details-panel {
    padding:
      max(18px, env(safe-area-inset-top))
      max(18px, env(safe-area-inset-right))
      max(24px, env(safe-area-inset-bottom))
      max(18px, env(safe-area-inset-left));
  }

  .book-details-sheet {
    max-height: none;
    min-height: 100%;
    padding: clamp(76px, 9.5vh, 98px) 0 28px;
  }

  .book-details-hero {
    grid-template-columns: minmax(94px, 28vw) minmax(0, 1fr);
    gap: 15px;
    padding: 0;
  }

  .book-details-cover {
    width: min(116px, 28vw);
    min-width: 94px;
    max-width: 116px;
  }

  .book-details-title-wrap textarea {
    font-size: clamp(1.4rem, 5.9vw, 1.95rem);
  }

  .book-details-title-wrap .book-details-progress-card {
    margin-top: 9px;
  }

  .book-details-progress-card {
    gap: 7px;
  }

  .book-details-section-head span {
    font-size: 0.66rem;
  }

  .book-details-section-head strong {
    font-size: 0.96rem;
  }

  .book-details-progress-card p,
  .book-details-progress-card small {
    font-size: 0.82rem;
    line-height: 1.26;
  }

  .book-details-resume-actions {
    gap: 8px;
    margin-top: 5px;
  }

  .book-details-resume-actions button {
    min-height: 44px;
    padding-inline: 8px;
    font-size: 0.82rem;
  }
}

@media (max-width: 390px) {
  .book-details-panel {
    padding-inline: max(15px, env(safe-area-inset-left));
  }

  .book-details-hero {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
  }

  .book-details-cover {
    width: 86px;
    min-width: 86px;
    max-width: 86px;
  }

  .book-details-title-wrap textarea {
    font-size: clamp(1.28rem, 5.7vw, 1.66rem);
  }

  .book-details-resume-actions button {
    font-size: 0.78rem;
  }
}

/* Keep imported cover artwork fully visible wherever the app shows it. */
.collection-cover.has-image,
.library-feature-cover.has-image,
.gutenberg-cover.has-image,
.chapter-book-cover.has-image {
  box-sizing: border-box;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: transparent;
}

.collection-cover.has-image img,
.library-feature-cover.has-image img,
.gutenberg-cover.has-image img,
.chapter-book-cover.has-image img,
.book-details-cover.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

.collection-cover.has-image img,
.library-feature-cover.has-image img,
.gutenberg-cover.has-image img,
.chapter-book-cover.has-image img {
  border-radius: 3px;
}

.stats-book-cover {
  background-repeat: no-repeat;
  background-size: contain;
}

/* Book Info details polish. */
.book-details-source-pill {
  display: none !important;
}

.book-details-sheet {
  gap: 14px;
}

.book-details-cover {
  border-radius: 6px;
}

.book-details-cover.has-image {
  overflow: visible;
  background: transparent;
}

.book-details-cover.has-image img {
  display: block;
  border-radius: 3px;
  box-shadow:
    0 12px 26px rgba(44, 32, 22, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.book-details-hero {
  margin-bottom: clamp(10px, 2vw, 16px);
}

.book-details-progress-head {
  justify-content: flex-end;
  margin-bottom: 2px;
}

.book-details-progress-head strong {
  font-size: 0.98rem;
}

.book-details-resume-actions {
  gap: 8px;
  margin-top: 1px;
}

.book-details-resume-actions button {
  min-height: 40px;
  border-radius: 12px;
  font-size: 0.84rem;
  box-shadow:
    0 7px 16px rgba(47, 39, 28, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.book-details-resume-actions .book-details-primary {
  box-shadow:
    0 9px 18px rgba(151, 49, 44, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.book-details-quote-card {
  position: relative;
  overflow: hidden;
  min-height: 148px;
  margin-bottom: -14px;
  padding-left: 22px;
  padding-right: 22px;
  padding-bottom: 42px;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  box-shadow:
    0 8px 20px rgba(47, 39, 28, 0.038),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.book-details-quote-card blockquote {
  position: relative;
  z-index: 1;
  padding: 8px 0 0;
}

.book-details-quote-motif {
  position: absolute;
  right: -12px;
  bottom: -22px;
  z-index: 0;
  width: min(74%, 360px);
  max-height: 132%;
  object-fit: contain;
  object-position: right bottom;
  opacity: 0.28;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom right, transparent 0%, rgba(0, 0, 0, 0.08) 24%, rgba(0, 0, 0, 0.62) 46%, #000 66%);
  mask-image: linear-gradient(to bottom right, transparent 0%, rgba(0, 0, 0, 0.08) 24%, rgba(0, 0, 0, 0.62) 46%, #000 66%);
  pointer-events: none;
  user-select: none;
}

.book-details-quote-card blockquote::before,
.book-details-quote-card::before,
.book-details-quote-card::after {
  content: none;
}

.book-details-quote-card blockquote p::before {
  content: "\201c";
  color: rgba(158, 49, 44, 0.86);
  margin-right: 0.08em;
}

.book-details-quote-card blockquote p::after {
  content: "\201d";
  color: rgba(158, 49, 44, 0.86);
  margin-left: 0.05em;
}

.book-details-source-card {
  padding-top: 0;
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow:
    0 12px 28px rgba(47, 39, 28, 0.052),
    inset 0 -1px 0 rgba(255, 255, 255, 0.74);
}

.book-details-source-card.is-standalone {
  padding-top: 16px;
  border-radius: 16px;
}

.book-details-source-card::before {
  content: "";
  height: 1px;
  margin-bottom: 2px;
  display: block;
  background: rgba(222, 214, 201, 0.58);
}

.book-details-source-card.is-standalone::before {
  content: none;
}

.book-details-source-list div:first-child {
  border-top: 0;
}

.book-details-status:empty {
  display: none;
}

.book-details-secondary-actions {
  margin-top: -2px;
}

@media (max-width: 720px) {
  .book-details-resume-actions button {
    min-height: 40px;
    border-radius: 12px;
    font-size: 0.8rem;
  }

  .book-details-quote-card {
    margin-bottom: -14px;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 40px;
  }

  .book-details-quote-motif {
    right: -12px;
    bottom: -24px;
    width: min(84%, 350px);
    max-height: 138%;
    opacity: 0.3;
  }
}

/* Book Info literary refinement. */
.book-details-sheet {
  gap: 18px;
  padding-top: clamp(60px, 7.2vh, 82px);
}

.book-details-hero {
  grid-template-columns: minmax(112px, 148px) minmax(0, 1fr);
  margin-bottom: clamp(14px, 2.4vw, 20px);
}

.book-details-cover {
  width: min(148px, 24vw);
  max-width: 148px;
  aspect-ratio: 0.62;
}

.book-details-title-wrap textarea {
  font-family: var(--reading-font);
  font-weight: 400;
  letter-spacing: 0.005em;
}

.book-details-author,
.book-details-source-list dt,
.book-details-source-list dd,
.book-details-meta dt,
.book-details-meta dd {
  font-family: var(--reading-font);
}

.book-details-author {
  color: rgba(75, 68, 58, 0.74);
  font-size: clamp(1.02rem, 2.8vw, 1.22rem);
}

.book-details-resume-actions {
  gap: 10px;
  margin-top: 4px;
}

.book-details-resume-actions button {
  min-height: 42px;
  border-color: rgba(219, 211, 199, 0.58);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.64);
  color: rgba(48, 43, 37, 0.8);
  font-family: var(--reading-font);
  font-size: clamp(0.9rem, 2.8vw, 1rem);
  font-weight: 430;
  box-shadow:
    0 6px 14px rgba(47, 39, 28, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.book-details-resume-actions .book-details-primary {
  border-color: rgba(172, 62, 55, 0.12);
  background: linear-gradient(180deg, rgba(184, 63, 56, 0.9), rgba(161, 52, 47, 0.92));
  color: rgba(255, 253, 248, 0.96);
  box-shadow:
    0 8px 16px rgba(151, 49, 44, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.book-details-quote-card {
  min-height: 188px;
  margin-bottom: 0;
  padding: 26px 28px 58px;
  border-bottom: 1px solid rgba(225, 216, 202, 0.48);
  border-radius: 18px;
  box-shadow:
    0 10px 24px rgba(47, 39, 28, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.book-details-quote-card blockquote {
  max-width: min(72%, 520px);
  padding: 4px 0 0;
}

.book-details-quote-card blockquote p,
.book-details-quote-empty p {
  color: rgba(25, 23, 20, 0.94);
  font-family: var(--reading-font);
  font-size: clamp(1.18rem, 3.9vw, 1.55rem);
  font-weight: 400;
  line-height: 1.36;
}

.book-details-quote-card blockquote small {
  display: block;
  margin-top: 14px;
  color: rgba(84, 79, 70, 0.68);
  font-family: var(--reading-font);
  font-size: clamp(1rem, 2.9vw, 1.16rem);
  font-weight: 400;
}

.book-details-quote-motif {
  right: -12px;
  bottom: -22px;
  width: min(76%, 392px);
  max-height: 142%;
  opacity: 0.28;
}

.book-details-source-card {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(230, 222, 209, 0.42);
  border-radius: 18px;
  box-shadow:
    0 12px 28px rgba(47, 39, 28, 0.046),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.book-details-source-card::before {
  content: none;
}

@media (max-width: 720px) {
  .book-details-sheet {
    padding-top: clamp(62px, 7.8vh, 84px);
  }

  .book-details-hero {
    grid-template-columns: minmax(96px, 29vw) minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 16px;
  }

  .book-details-cover {
    width: min(122px, 29vw);
    min-width: 96px;
    max-width: 122px;
    aspect-ratio: 0.61;
  }

  .book-details-resume-actions button {
    min-height: 42px;
    border-radius: 16px;
    font-size: clamp(0.86rem, 3.35vw, 0.96rem);
  }

  .book-details-quote-card {
    min-height: 188px;
    padding: 24px 22px 56px;
    border-radius: 18px;
  }

  .book-details-quote-card blockquote {
    max-width: 75%;
  }

  .book-details-quote-card blockquote p,
  .book-details-quote-empty p {
    font-size: clamp(1.18rem, 4.35vw, 1.38rem);
  }

  .book-details-quote-motif {
    right: -12px;
    bottom: -24px;
    width: min(88%, 380px);
    max-height: 148%;
    opacity: 0.3;
  }

  .book-details-source-card {
    margin-top: 8px;
    border-radius: 18px;
  }
}

@media (max-width: 390px) {
  .book-details-hero {
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 13px;
  }

  .book-details-cover {
    width: 94px;
    min-width: 94px;
    max-width: 94px;
  }
}

/* Secondary text lift: keep context-mode reading opacity on its own tuned scale. */
.progress-meta,
.menu-hero p,
.menu-row-copy small,
.collection-header p,
.ebook-bottom-bar,
.stats-muted,
.stats-primary-number small,
.stats-mini-card small,
.stats-wide-card small,
.stats-achievement small,
.stats-locked-card p {
  color: rgba(91, 87, 80, 0.8);
}

.rhythm-intro-subtitle,
.rhythm-intro-hint,
.empty-reader-copy,
.speed-chapter-card small,
.collection-view .library-header p,
.gutenberg-view .library-header p,
.collection-view .library-feature-copy small,
.collection-view .collection-copy small,
.collection-view .collection-empty,
.library-import-note,
.gutenberg-status,
.gutenberg-copy small,
.chapter-book-copy small,
.chapter-screen-heading p,
.chapter-option-copy small,
.pdf-page-copy small,
.pdf-page-status,
.pdf-page-input-wrap,
.stats-locked-grid small,
.stats-typical-range small,
.stats-words-head small,
.stats-insight-tile em,
.stats-milestone em,
.stats-chart-labels,
.stats-chart-placeholder,
.stats-section-heading span,
.stats-summary-item em,
.stats-best-day,
.stats-words-chart small,
.stats-readout-strip small,
.book-details-summary,
.book-details-status,
.memory-header small,
.memory-empty,
.memory-jump small,
.memory-jump em,
.memory-note-form label {
  color: rgba(84, 79, 70, 0.72);
}

html.is-mobile-landscape body::after,
.brand-block small,
.ebook-title-block small,
.empty-reader-subtitle,
.chapter-title-block small,
.collection-view .library-search input::placeholder,
.gutenberg-view .library-search input::placeholder {
  color: rgba(86, 81, 73, 0.64);
}

.collection-view .library-section-heading #collectionCountLabel,
.collection-view .library-heading-actions,
.collection-view .library-sort-control,
.collection-view .library-sort-control span {
  color: rgba(86, 81, 73, 0.58);
}

/* Reading Stats editorial redesign */
.stats-view {
  --stats-red: rgba(178, 58, 52, 0.96);
  --stats-red-soft: rgba(178, 58, 52, 0.12);
  --stats-card: rgba(255, 253, 248, 0.84);
  --stats-card-warm: rgba(251, 245, 239, 0.84);
  --stats-muted: rgba(91, 87, 80, 0.76);
  gap: 12px;
}

.stats-view .collection-header {
  align-items: start;
  margin-bottom: 0;
}

.stats-view .collection-header h2 {
  color: rgba(22, 22, 22, 0.96);
  font-family: var(--reading-font);
  font-size: clamp(1.96rem, 7.65vw, 2.38rem);
  font-weight: 420;
  line-height: 1.07;
  letter-spacing: 0;
}

.stats-view .collection-header p {
  max-width: 31ch;
  margin-top: 6px;
  color: rgba(87, 82, 74, 0.78);
  font-family: var(--reading-font);
  font-size: clamp(0.9rem, 3.28vw, 0.99rem);
  line-height: 1.3;
}

.stats-view .stats-tabs {
  min-height: 46px;
  padding: 4px;
  gap: 4px;
  border: 1px solid rgba(90, 75, 60, 0.08);
  border-radius: 999px;
  background: rgba(245, 239, 230, 0.72);
  box-shadow:
    inset 0 1px 3px rgba(70, 56, 40, 0.035),
    0 8px 22px rgba(45, 34, 24, 0.035);
}

.stats-view .stats-tab {
  min-height: 34px;
  color: rgba(87, 82, 74, 0.82);
  font-family: var(--ui-font);
  font-size: 0.78rem;
  font-weight: 560;
}

.stats-view .stats-tab.is-active {
  color: rgba(22, 22, 22, 0.96);
  background: rgba(255, 253, 248, 0.95);
  box-shadow:
    0 8px 18px rgba(45, 34, 24, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.stats-stack {
  gap: 0;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.stats-editorial-bars {
  height: 47px;
  margin-top: 2px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  align-items: end;
}

.stats-editorial-bars span {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 3px;
  justify-items: center;
}

.stats-editorial-bars i {
  width: min(100%, 9px);
  align-self: end;
  border-radius: 6px 6px 2px 2px;
  background: rgba(214, 201, 190, 0.7);
}

.stats-editorial-bars .is-active i {
  background: var(--stats-red);
}

.stats-editorial-bars small,
.stats-average-days span {
  color: rgba(72, 67, 61, 0.82);
  font-family: var(--ui-font);
  font-size: 0.5rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.stats-when-copy p,
.stats-shelf-card p,
.stats-empty-line {
  margin: 6px 0 0;
  color: rgba(39, 35, 30, 0.86);
  font-family: var(--reading-font);
  font-size: 0.76rem;
  line-height: 1.25;
}

.stats-time-icon {
  width: 16px;
  height: 16px;
  position: relative;
  color: rgba(154, 132, 116, 0.88);
}

.stats-time-icon::before,
.stats-time-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.stats-time-icon-sun::before,
.stats-time-icon-sunrise::before,
.stats-time-icon-sunset::before {
  inset: 5px;
  border-radius: 50%;
  background: currentColor;
}

.stats-time-icon-sun::after,
.stats-time-icon-sunrise::after,
.stats-time-icon-sunset::after {
  left: 2px;
  right: 2px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.stats-time-icon-moon::before {
  inset: 3px;
  border-radius: 50%;
  box-shadow: -4px 1px 0 0 currentColor;
}

.stats-book-spotlight {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.stats-book-cover {
  width: 44px;
  aspect-ratio: 0.72;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background-color: rgba(161, 53, 45, 0.94);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow:
    0 9px 18px rgba(38, 30, 22, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.stats-book-cover-fallback {
  color: rgba(255, 250, 244, 0.94);
  font-family: var(--reading-font);
  font-size: 0.82rem;
  font-weight: 620;
}

.stats-book-spotlight strong {
  display: block;
  overflow: hidden;
  color: var(--stats-red);
  font-family: var(--reading-font);
  font-size: clamp(0.78rem, 2.8vw, 0.94rem);
  font-weight: 430;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-book-spotlight p,
.stats-book-spotlight small {
  display: block;
  margin: 4px 0 0;
  color: rgba(39, 35, 30, 0.84);
  font-family: var(--reading-font);
  font-size: 0.68rem;
  line-height: 1.2;
}

.stats-book-spotlight small {
  color: rgba(91, 87, 80, 0.76);
}

.stats-pace-range {
  margin-top: 7px;
  display: grid;
  gap: 6px;
}

.stats-pace-range > span {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(220, 211, 202, 0.9) 0 var(--pace-start),
      var(--stats-red) var(--pace-start) var(--pace-end),
      rgba(220, 211, 202, 0.9) var(--pace-end) 100%
    );
}

.stats-pace-range > i,
.stats-pace-range > em {
  width: 2px;
  height: 14px;
  margin-top: -17px;
  border-radius: 999px;
  background: rgba(178, 58, 52, 0.8);
  transform: translateX(-50%);
}

.stats-pace-range > i {
  margin-left: var(--pace-average);
}

.stats-pace-range > em {
  margin-left: var(--pace-end);
  opacity: 0.45;
}

.stats-pace-range div {
  display: flex;
  justify-content: space-between;
}

.stats-pace-range small {
  color: rgba(39, 35, 30, 0.78);
  font-family: var(--ui-font);
  font-size: 0.56rem;
  font-weight: 560;
}

@media (max-width: 430px) {

  .stats-book-spotlight {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
  }

  .stats-book-cover {
    width: 40px;
  }
}

/* Broad dark-mode surface layer. Later rules only handle focused polish. */
html.theme-dark .input-panel,
html.theme-dark .input-panel.is-settings-screen,
html.theme-dark .input-panel.is-menu-subview,
html.theme-dark .chapter-panel,
html.theme-dark .collection-view,
html.theme-dark .gutenberg-view,
html.theme-dark .stats-view,
html.theme-dark .book-details-view,
html.theme-dark .ebook-image-viewer {
  background:
    radial-gradient(circle at 50% -8%, rgba(95, 74, 58, 0.15), transparent 44%),
    linear-gradient(180deg, #191714 0%, #211d18 56%, #171512 100%);
  color: var(--ink);
}

html.theme-dark .onboarding-overlay {
  background:
    radial-gradient(circle at 50% 12%, rgba(113, 86, 63, 0.16), transparent 48%),
    linear-gradient(180deg, #191714 0%, #211d18 58%, #151310 100%);
  color: var(--ink);
}

html.theme-dark .rhythm-intro-stage {
  background:
    radial-gradient(circle at 50% 64%, rgba(211, 91, 82, 0.1), transparent 35%),
    linear-gradient(180deg, rgba(25, 23, 20, 0.98), rgba(31, 27, 23, 1) 58%, rgba(18, 16, 14, 0.98)),
    var(--paper);
}

html.theme-dark .rhythm-intro-stage::after {
  background:
    linear-gradient(180deg, rgba(25, 23, 20, 0.9) 0%, rgba(25, 23, 20, 0) 28%),
    linear-gradient(180deg, rgba(25, 23, 20, 0) 70%, rgba(14, 13, 11, 0.52) 100%);
}

html.theme-dark .rhythm-intro-brand,
html.theme-dark .rhythm-intro-line,
html.theme-dark .onboarding-copy h2 {
  color: rgba(246, 239, 228, 0.94);
}

html.theme-dark .rhythm-intro-kicker,
html.theme-dark .rhythm-intro-subtitle,
html.theme-dark .rhythm-intro-hint,
html.theme-dark .onboarding-copy p:last-child {
  color: rgba(211, 201, 187, 0.72);
}

html.theme-dark .rhythm-intro-kicker span:first-child,
html.theme-dark .rhythm-intro-emphasis,
html.theme-dark .onboarding-kicker,
html.theme-dark .onboarding-demo-library-row span {
  color: rgba(224, 120, 108, 0.86);
}

html.theme-dark .onboarding-deck {
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 244, 226, 0.08), rgba(25, 23, 20, 0) 54%),
    linear-gradient(180deg, rgba(25, 23, 20, 0.98), rgba(33, 29, 24, 0.98) 62%, rgba(18, 16, 14, 0.98));
}

html.theme-dark .onboarding-demo-frame {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 244, 226, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(46, 41, 35, 0.88), rgba(30, 27, 24, 0.88));
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(255, 244, 226, 0.1),
    inset 0 1px 0 rgba(255, 244, 226, 0.08);
}

html.theme-dark button.onboarding-demo-frame:focus-visible,
html.theme-dark .onboarding-demo-frame[role="button"]:focus-visible,
html.theme-dark .onboarding-demo-play:focus-visible,
html.theme-dark .onboarding-demo-mode-button:focus-visible,
html.theme-dark .onboarding-next:focus-visible,
html.theme-dark .onboarding-skip:focus-visible,
html.theme-dark .onboarding-dots button:focus-visible {
  box-shadow:
    0 0 0 3px rgba(25, 23, 20, 0.82),
    0 0 0 5px rgba(218, 119, 108, 0.34),
    0 18px 34px rgba(0, 0, 0, 0.24);
}

html.theme-dark .onboarding-demo-play,
html.theme-dark .onboarding-demo-mode-button {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 244, 226, 0.12), transparent 56%),
    linear-gradient(180deg, rgba(58, 52, 44, 0.96), rgba(30, 27, 24, 0.95));
  color: rgba(246, 239, 228, 0.88);
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(255, 244, 226, 0.1),
    inset 0 1px 0 rgba(255, 244, 226, 0.12);
}

html.theme-dark .onboarding-demo-play::after,
html.theme-dark .onboarding-demo-mode-button::after {
  border-color: rgba(224, 120, 108, 0.34);
  background: rgba(211, 91, 82, 0.16);
}

html.theme-dark .onboarding-demo-context .context-token.is-current {
  background: rgba(211, 91, 82, 0.22);
  box-shadow:
    inset 0 0 0 1px rgba(224, 120, 108, 0.26),
    0 0 0 3px rgba(211, 91, 82, 0.08),
    0 5px 14px rgba(0, 0, 0, 0.16);
}

html.theme-dark .onboarding-demo-context-note,
html.theme-dark .onboarding-demo-mode-top span {
  background: rgba(25, 23, 20, 0.56);
  color: rgba(211, 201, 187, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 226, 0.1),
    0 10px 22px rgba(0, 0, 0, 0.18);
}

html.theme-dark .onboarding-demo-mode-top span {
  color: rgba(238, 232, 220, 0.82);
}

html.theme-dark .onboarding-demo-ebook-page {
  color: rgba(238, 232, 220, 0.84);
}

html.theme-dark .onboarding-demo-ebook-word:hover,
html.theme-dark .onboarding-demo-ebook-word:focus-visible {
  background: rgba(211, 91, 82, 0.2);
}

html.theme-dark .onboarding-demo-library-row {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 244, 226, 0.07), transparent 42%),
    rgba(25, 23, 20, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 226, 0.1),
    0 12px 24px rgba(0, 0, 0, 0.2);
}

html.theme-dark .onboarding-demo-library-row strong {
  color: rgba(246, 239, 228, 0.88);
}

html.theme-dark .onboarding-skip {
  color: rgba(211, 201, 187, 0.68);
}

html.theme-dark .onboarding-next {
  background:
    linear-gradient(135deg, rgba(190, 78, 68, 0.96), rgba(143, 54, 48, 0.96));
  color: rgba(255, 253, 247, 0.96);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 244, 226, 0.14);
}

html.theme-dark .onboarding-dots button {
  background: rgba(224, 120, 108, 0.24);
}

html.theme-dark .onboarding-dots button.is-active {
  background: rgba(224, 120, 108, 0.92);
}

html.theme-dark .menu-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html.theme-dark output,
html.theme-dark #wpmOutput,
html.theme-dark #currentWpm {
  color: rgba(238, 232, 220, 0.88);
}

html.theme-dark .input-panel .menu-close,
html.theme-dark .collection-back,
html.theme-dark .top-mode-button,
html.theme-dark .top-mode-button:hover,
html.theme-dark .top-mode-button:focus,
html.theme-dark .top-mode-button:focus-visible,
html.theme-dark .ebook-actions .top-mode-button,
html.theme-dark .chapter-actions .top-mode-button,
html.theme-dark .top-actions .top-mode-button,
html.theme-dark body.ebook-mode #ebookSpeedModeButton,
html.theme-dark .ghost-button.bottom-mode-button,
html.theme-dark .ghost-button.bottom-mode-button:hover,
html.theme-dark .ghost-button.bottom-mode-button:focus,
html.theme-dark .ghost-button.bottom-mode-button:focus-visible,
html.theme-dark .ghost-button.bottom-mode-button:active {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 244, 226, 0.1), transparent 56%),
    linear-gradient(180deg, rgba(50, 45, 39, 0.96), rgba(30, 27, 24, 0.94));
  color: rgba(242, 235, 224, 0.86);
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 244, 226, 0.12),
    inset 0 -1px 3px rgba(0, 0, 0, 0.26);
}

html.theme-dark .input-panel .menu-close span,
html.theme-dark .input-panel .menu-close span::after {
  background: currentColor;
}

html.theme-dark .mode-switch-symbol {
  --mode-switch-opacity: 0.9;
  --mode-switch-width: 1.86;
  color: rgba(246, 239, 228, 0.9);
}

html.theme-dark .mode-switch-symbol path {
  stroke: currentColor;
}

html.theme-dark .menu-card,
html.theme-dark .menu-row-button,
html.theme-dark .chapter-card,
html.theme-dark .chapter-search,
html.theme-dark .library-search,
html.theme-dark .library-continue-card,
html.theme-dark .library-feature-button,
html.theme-dark .collection-item,
html.theme-dark .gutenberg-book-button,
html.theme-dark .book-details-card,
html.theme-dark .book-detail-card,
html.theme-dark .book-quote-card,
html.theme-dark .book-insights-card,
html.theme-dark .stats-editorial-card,
html.theme-dark .stats-bottom-banner {
  background: linear-gradient(180deg, rgba(43, 38, 32, 0.88), rgba(35, 31, 27, 0.86));
  color: var(--ink);
  border-color: rgba(225, 212, 190, 0.14);
  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 244, 226, 0.035);
}

html.theme-dark .paste-editor {
  background: rgba(21, 19, 17, 0.42);
}

html.theme-dark .library-search input,
html.theme-dark .chapter-search input,
html.theme-dark .gutenberg-search input,
html.theme-dark input,
html.theme-dark textarea {
  color: var(--ink);
}

html.theme-dark .library-search input::placeholder,
html.theme-dark .chapter-search input::placeholder,
html.theme-dark .gutenberg-search input::placeholder,
html.theme-dark input::placeholder,
html.theme-dark textarea::placeholder {
  color: rgba(197, 187, 172, 0.56);
}

html.theme-dark .menu-icon,
html.theme-dark .chapter-timeline-dot,
html.theme-dark .collection-cover,
html.theme-dark .library-feature-cover,
html.theme-dark .gutenberg-cover {
  background: rgba(255, 244, 226, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 244, 226, 0.06);
}

html.theme-dark .collection-view .library-header h2,
html.theme-dark .gutenberg-view .library-header h2,
html.theme-dark .settings-view .collection-header h2,
html.theme-dark .help-view .collection-header h2,
html.theme-dark .stats-view .collection-header h2,
html.theme-dark .menu-row-copy strong,
html.theme-dark .gutenberg-copy strong {
  color: rgba(246, 239, 228, 0.92);
}

html.theme-dark .collection-header p,
html.theme-dark .ebook-bottom-bar,
html.theme-dark .collection-view .library-header p,
html.theme-dark .gutenberg-view .library-header p,
html.theme-dark .help-view .collection-header p,
html.theme-dark .collection-view .library-feature-copy small,
html.theme-dark .collection-view .collection-copy small,
html.theme-dark .collection-view .collection-empty,
html.theme-dark .library-import-note,
html.theme-dark .gutenberg-status,
html.theme-dark .gutenberg-copy small,
html.theme-dark .gutenberg-copy em,
html.theme-dark .menu-row-copy small {
  color: rgba(211, 201, 187, 0.75);
}

html.theme-dark .menu-section-label {
  color: rgba(211, 201, 187, 0.5);
}

html.theme-dark .paste-editor textarea,
html.theme-dark #textInput {
  background: rgba(21, 19, 17, 0.58);
  border-color: rgba(225, 212, 190, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 226, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.12);
}

html.theme-dark .paste-editor textarea,
html.theme-dark #textInput {
  color: rgba(246, 239, 228, 0.9);
}

html.theme-dark .paste-editor .ghost-button,
html.theme-dark .paste-editor .primary-button {
  background: rgba(238, 232, 220, 0.08);
  color: rgba(238, 232, 220, 0.82);
  border-color: rgba(225, 212, 190, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 244, 226, 0.06);
}

html.theme-dark .paste-editor .primary-button {
  background: rgba(211, 91, 82, 0.62);
  color: rgba(255, 249, 240, 0.94);
}

html.theme-dark .gutenberg-cover:not(.has-image) {
  background:
    linear-gradient(145deg, rgba(88, 118, 97, 0.74), rgba(54, 82, 69, 0.88));
  color: rgba(246, 239, 228, 0.9);
}

html.theme-dark .gutenberg-cover.has-image,
html.theme-dark .collection-cover.has-image,
html.theme-dark .library-feature-cover.has-image {
  background: rgba(255, 244, 226, 0.08);
}
/* True EOF dark-mode polish layer. */
html.theme-dark .bottom-dock .slider-row,
body.theme-dark .bottom-dock .slider-row,
html.theme-dark .bottom-dock .speed-control output,
body.theme-dark .bottom-dock .speed-control output,
html.theme-dark #wpmOutput,
body.theme-dark #wpmOutput,
html.theme-dark #currentWpm,
body.theme-dark #currentWpm {
  color: rgba(246, 239, 228, 0.92) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}

html.theme-dark .bottom-dock,
body.theme-dark .bottom-dock {
  border-top-color: rgba(225, 212, 190, 0.18) !important;
}

html.theme-dark .top-mode-button,
body.theme-dark .top-mode-button,
html.theme-dark .ebook-actions #ebookSpeedModeButton,
body.theme-dark .ebook-actions #ebookSpeedModeButton,
html.theme-dark body.ebook-mode #ebookSpeedModeButton,
body.theme-dark.ebook-mode #ebookSpeedModeButton,
html.theme-dark .ghost-button.bottom-mode-button,
body.theme-dark .ghost-button.bottom-mode-button {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 244, 226, 0.13), transparent 58%),
    linear-gradient(180deg, rgba(55, 50, 43, 0.98), rgba(29, 26, 23, 0.97)) !important;
  color: rgba(250, 244, 234, 0.94) !important;
  border-color: rgba(255, 244, 226, 0.08) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 1px rgba(255, 244, 226, 0.14),
    inset 0 -1px 3px rgba(0, 0, 0, 0.28) !important;
}

html.theme-dark .top-mode-button .mode-switch-symbol,
body.theme-dark .top-mode-button .mode-switch-symbol,
html.theme-dark .bottom-mode-button .mode-switch-symbol,
body.theme-dark .bottom-mode-button .mode-switch-symbol {
  --mode-switch-opacity: 0.92;
  --mode-switch-width: 1.9;
  color: rgba(250, 244, 234, 0.94) !important;
}

html.theme-dark .top-mode-button .mode-switch-symbol path,
body.theme-dark .top-mode-button .mode-switch-symbol path,
html.theme-dark .bottom-mode-button .mode-switch-symbol path,
body.theme-dark .bottom-mode-button .mode-switch-symbol path {
  stroke: currentColor !important;
}

html.theme-dark .input-panel,
body.theme-dark .input-panel,
html.theme-dark .input-panel.settings-background-subtle-material,
body.theme-dark .input-panel.settings-background-subtle-material,
html.theme-dark body.settings-background-subtle-material .input-panel,
body.theme-dark.settings-background-subtle-material .input-panel,
html.theme-dark .gutenberg-view,
body.theme-dark .gutenberg-view {
  background:
    radial-gradient(circle at 50% -8%, rgba(98, 75, 57, 0.18), transparent 42%),
    linear-gradient(180deg, #181612 0%, #211d18 58%, #171512 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(246, 239, 228, 0.94) !important;
}

html.theme-dark .menu-card,
body.theme-dark .menu-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(246, 239, 228, 0.94) !important;
}

html.theme-dark .gutenberg-book-button,
body.theme-dark .gutenberg-book-button,
html.theme-dark .library-search,
body.theme-dark .library-search,
html.theme-dark .gutenberg-search,
body.theme-dark .gutenberg-search {
  background: linear-gradient(180deg, rgba(42, 37, 31, 0.9), rgba(34, 30, 26, 0.9)) !important;
  border-color: rgba(225, 212, 190, 0.16) !important;
  color: rgba(246, 239, 228, 0.94) !important;
  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.2),
    inset 0 0 0 1px rgba(255, 244, 226, 0.04) !important;
}

html.theme-dark .collection-header h2,
body.theme-dark .collection-header h2,
html.theme-dark .library-header h2,
body.theme-dark .library-header h2,
html.theme-dark .menu-row-copy strong,
body.theme-dark .menu-row-copy strong,
html.theme-dark .gutenberg-copy strong,
body.theme-dark .gutenberg-copy strong {
  color: rgba(250, 244, 234, 0.96) !important;
}

html.theme-dark .collection-header p,
body.theme-dark .collection-header p,
html.theme-dark .menu-row-copy small,
body.theme-dark .menu-row-copy small,
html.theme-dark .gutenberg-status,
body.theme-dark .gutenberg-status,
html.theme-dark .gutenberg-copy small,
body.theme-dark .gutenberg-copy small,
html.theme-dark .gutenberg-copy em,
body.theme-dark .gutenberg-copy em {
  color: rgba(218, 209, 194, 0.8) !important;
}

html.theme-dark .menu-section-label,
body.theme-dark .menu-section-label {
  color: rgba(218, 209, 194, 0.52) !important;
}

html.theme-dark .paste-editor textarea,
body.theme-dark .paste-editor textarea,
html.theme-dark #textInput,
body.theme-dark #textInput {
  background: rgba(18, 16, 14, 0.7) !important;
  border-color: rgba(225, 212, 190, 0.18) !important;
  color: rgba(246, 239, 228, 0.92) !important;
}

html.theme-dark .paste-editor,
body.theme-dark .paste-editor {
  background: rgba(18, 16, 14, 0.66) !important;
  border-color: rgba(225, 212, 190, 0.12) !important;
}

html.theme-dark .paste-editor .ghost-button,
body.theme-dark .paste-editor .ghost-button,
html.theme-dark .paste-editor .primary-button,
body.theme-dark .paste-editor .primary-button {
  background: rgba(238, 232, 220, 0.1) !important;
  color: rgba(246, 239, 228, 0.86) !important;
  border-color: rgba(225, 212, 190, 0.14) !important;
}

html.theme-dark .paste-editor .primary-button,
body.theme-dark .paste-editor .primary-button {
  background: rgba(211, 91, 82, 0.72) !important;
  color: rgba(255, 249, 240, 0.96) !important;
}

/* Dark-mode Library consolidation: keep this after the broad dark layer. */
html.theme-dark .input-panel,
body.theme-dark .input-panel,
html.theme-dark .input-panel.is-settings-screen,
body.theme-dark .input-panel.is-settings-screen,
html.theme-dark .input-panel.is-menu-subview,
body.theme-dark .input-panel.is-menu-subview {
  background-color: #181612 !important;
  background-image:
    radial-gradient(circle at 50% -8%, rgba(98, 75, 57, 0.18), transparent 42%),
    linear-gradient(180deg, #181612 0%, #211d18 58%, #171512 100%) !important;
}

html.theme-dark #collectionView,
body.theme-dark #collectionView,
html.theme-dark .collection-view,
body.theme-dark .collection-view {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: rgba(246, 239, 228, 0.94) !important;
}

html.theme-dark .input-panel.is-settings-screen .menu-card,
body.theme-dark .input-panel.is-settings-screen .menu-card,
html.theme-dark .input-panel.is-menu-subview .menu-card,
body.theme-dark .input-panel.is-menu-subview .menu-card {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .collection-view .library-section-heading h3,
body.theme-dark .collection-view .library-section-heading h3,
html.theme-dark .collection-view .library-feature-copy strong,
body.theme-dark .collection-view .library-feature-copy strong,
html.theme-dark .collection-view .collection-copy strong,
body.theme-dark .collection-view .collection-copy strong {
  color: rgba(250, 244, 234, 0.94) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.22);
}

html.theme-dark .collection-view .library-header p,
body.theme-dark .collection-view .library-header p,
html.theme-dark .collection-view .library-feature-copy small,
body.theme-dark .collection-view .library-feature-copy small,
html.theme-dark .collection-view .collection-copy small,
body.theme-dark .collection-view .collection-copy small,
html.theme-dark .collection-view .collection-empty,
body.theme-dark .collection-view .collection-empty {
  color: rgba(220, 211, 196, 0.76) !important;
}

html.theme-dark .collection-view .library-heading-actions,
body.theme-dark .collection-view .library-heading-actions,
html.theme-dark .collection-view .library-section-heading #collectionCountLabel,
body.theme-dark .collection-view .library-section-heading #collectionCountLabel,
html.theme-dark .collection-view .library-sort-control,
body.theme-dark .collection-view .library-sort-control,
html.theme-dark .collection-view .library-sort-control span,
body.theme-dark .collection-view .library-sort-control span {
  color: rgba(220, 211, 196, 0.68) !important;
}

html.theme-dark .collection-view .library-sort-control select,
body.theme-dark .collection-view .library-sort-control select {
  background: transparent !important;
  color: rgba(246, 239, 228, 0.82) !important;
}

html.theme-dark .collection-view .library-sort-control::after,
body.theme-dark .collection-view .library-sort-control::after {
  border-color: rgba(220, 211, 196, 0.58) !important;
}

html.theme-dark .collection-view .library-upload-button,
body.theme-dark .collection-view .library-upload-button {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(209, 137, 115, 0.84) !important;
}

html.theme-dark .collection-view .library-search,
body.theme-dark .collection-view .library-search {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 244, 226, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(47, 42, 36, 0.78), rgba(33, 30, 26, 0.76)) !important;
  border-color: rgba(225, 212, 190, 0.18) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 244, 226, 0.06) !important;
}

html.theme-dark .collection-view .library-search input,
body.theme-dark .collection-view .library-search input {
  color: rgba(246, 239, 228, 0.9) !important;
}

html.theme-dark .collection-view .library-search input::placeholder,
body.theme-dark .collection-view .library-search input::placeholder {
  color: rgba(220, 211, 196, 0.56) !important;
}

html.theme-dark .collection-view .library-search span::before,
body.theme-dark .collection-view .library-search span::before {
  border-color: rgba(220, 211, 196, 0.58) !important;
}

html.theme-dark .collection-view .library-search span::after,
body.theme-dark .collection-view .library-search span::after {
  background: rgba(220, 211, 196, 0.58) !important;
}

html.theme-dark .collection-view .library-feature-button,
body.theme-dark .collection-view .library-feature-button {
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 244, 226, 0.08), transparent 44%),
    linear-gradient(90deg, rgba(99, 48, 40, 0.42), rgba(42, 37, 32, 0.9)) !important;
  border-color: rgba(220, 114, 98, 0.2) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 244, 226, 0.08) !important;
}

html.theme-dark .collection-view .collection-item,
body.theme-dark .collection-view .collection-item {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 244, 226, 0.055), transparent 42%),
    linear-gradient(180deg, rgba(43, 38, 32, 0.84), rgba(31, 28, 24, 0.82)) !important;
  border-color: rgba(225, 212, 190, 0.14) !important;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.055) !important;
}

html.theme-dark .collection-view .library-progress-line,
body.theme-dark .collection-view .library-progress-line,
html.theme-dark .collection-view .collection-progress,
body.theme-dark .collection-view .collection-progress {
  background: rgba(225, 212, 190, 0.26) !important;
}

html.theme-dark .collection-view .library-progress-line span,
body.theme-dark .collection-view .library-progress-line span,
html.theme-dark .collection-view .collection-progress span,
body.theme-dark .collection-view .collection-progress span {
  background: rgba(214, 93, 82, 0.86) !important;
}

html.theme-dark .collection-view .library-feature-percent,
body.theme-dark .collection-view .library-feature-percent,
html.theme-dark .collection-view .collection-meta,
body.theme-dark .collection-view .collection-meta {
  color: rgba(226, 126, 111, 0.88) !important;
}

html.theme-dark .collection-view .collection-menu-toggle,
body.theme-dark .collection-view .collection-menu-toggle,
html.theme-dark .collection-view .collection-delete,
body.theme-dark .collection-view .collection-delete {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: rgba(220, 211, 196, 0.55) !important;
}

html.theme-dark .collection-view .collection-menu-toggle[aria-expanded="true"],
body.theme-dark .collection-view .collection-menu-toggle[aria-expanded="true"],
html.theme-dark .collection-view .collection-menu-toggle:active,
body.theme-dark .collection-view .collection-menu-toggle:active,
html.theme-dark .collection-view .collection-delete:active,
body.theme-dark .collection-view .collection-delete:active {
  color: rgba(226, 126, 111, 0.86) !important;
}

html.theme-dark .collection-view .collection-menu-panel,
body.theme-dark .collection-view .collection-menu-panel {
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 244, 226, 0.08), transparent 45%),
    rgba(33, 30, 26, 0.98) !important;
  border-color: rgba(225, 212, 190, 0.16) !important;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 244, 226, 0.07) !important;
}

html.theme-dark .collection-view .collection-menu-action,
body.theme-dark .collection-view .collection-menu-action {
  color: rgba(246, 239, 228, 0.88) !important;
}

html.theme-dark .collection-view .collection-menu-action.is-danger,
body.theme-dark .collection-view .collection-menu-action.is-danger {
  color: rgba(232, 126, 112, 0.92) !important;
}

html.theme-dark .font-size-popover,
body.theme-dark .font-size-popover {
  background:
    radial-gradient(circle at 50% -16%, rgba(255, 244, 226, 0.12), transparent 46%),
    linear-gradient(180deg, rgba(49, 44, 38, 0.98), rgba(30, 27, 24, 0.98)) !important;
  border-color: rgba(225, 212, 190, 0.16) !important;
  color: rgba(246, 239, 228, 0.92) !important;
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 244, 226, 0.08) !important;
}

html.theme-dark .font-size-option,
body.theme-dark .font-size-option,
html.theme-dark .font-size-theme-toggle,
body.theme-dark .font-size-theme-toggle {
  background: rgba(238, 232, 220, 0.08) !important;
  border-color: rgba(225, 212, 190, 0.14) !important;
  color: rgba(246, 239, 228, 0.82) !important;
}

html.theme-dark .font-size-option.is-active,
body.theme-dark .font-size-option.is-active,
html.theme-dark .font-size-theme-toggle.is-active,
body.theme-dark .font-size-theme-toggle.is-active {
  background: rgba(211, 91, 82, 0.16) !important;
  color: rgba(239, 152, 143, 0.96) !important;
}

html.theme-dark .theme-toggle-dialogue,
body.theme-dark .theme-toggle-dialogue {
  background: rgba(211, 91, 82, 0.12);
  color: rgba(239, 152, 143, 0.9);
}

html.theme-dark .font-size-popover,
body.theme-dark .font-size-popover {
  background: rgba(37, 33, 28, 0.96) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 244, 226, 0.08) !important;
}

html.theme-dark .font-size-section-label,
body.theme-dark .font-size-section-label,
html.theme-dark .theme-toggle-copy small,
body.theme-dark .theme-toggle-copy small {
  color: rgba(218, 209, 194, 0.68) !important;
}

html.theme-dark .font-family-option,
body.theme-dark .font-family-option,
html.theme-dark .dialogue-color-option,
body.theme-dark .dialogue-color-option {
  background: rgba(255, 244, 226, 0.07) !important;
  color: rgba(238, 232, 220, 0.82) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 226, 0.08) !important;
}

html.theme-dark .font-family-option.is-active,
body.theme-dark .font-family-option.is-active,
html.theme-dark .dialogue-color-option.is-active,
body.theme-dark .dialogue-color-option.is-active {
  background: rgba(211, 91, 82, 0.16) !important;
  color: rgba(255, 202, 194, 0.98) !important;
}

html.theme-dark .dialogue-color-option.is-active .dialogue-color-dot,
body.theme-dark .dialogue-color-option.is-active .dialogue-color-dot {
  box-shadow:
    inset 0 0 0 2px rgba(25, 23, 20, 0.88),
    0 0 0 2px rgba(255, 230, 204, 0.8),
    0 3px 10px rgba(0, 0, 0, 0.34) !important;
}

/* Dark-mode reader controls: keep the main reader chrome tactile, not pale. */
html.theme-dark .top-icon-button,
body.theme-dark .top-icon-button,
html.theme-dark .top-mode-button,
body.theme-dark .top-mode-button,
html.theme-dark .text-size-button,
body.theme-dark .text-size-button,
html.theme-dark .bottom-mode-button,
body.theme-dark .bottom-mode-button,
html.theme-dark .round-side-button,
body.theme-dark .round-side-button {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 244, 226, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(52, 47, 40, 0.96), rgba(29, 26, 23, 0.96)) !important;
  border-color: rgba(255, 244, 226, 0.08) !important;
  color: rgba(244, 237, 225, 0.84) !important;
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 1px rgba(255, 244, 226, 0.12),
    inset 0 -2px 5px rgba(0, 0, 0, 0.28) !important;
}

html.theme-dark .top-icon-button:hover,
body.theme-dark .top-icon-button:hover,
html.theme-dark .top-mode-button:hover,
body.theme-dark .top-mode-button:hover,
html.theme-dark .text-size-button:hover,
body.theme-dark .text-size-button:hover,
html.theme-dark .bottom-mode-button:hover,
body.theme-dark .bottom-mode-button:hover,
html.theme-dark .round-side-button:hover,
body.theme-dark .round-side-button:hover {
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 244, 226, 0.15), transparent 58%),
    linear-gradient(180deg, rgba(58, 52, 44, 0.98), rgba(33, 30, 26, 0.98)) !important;
}

@media (hover: none), (pointer: coarse) {
  html.theme-dark #prevButton:hover,
  body.theme-dark #prevButton:hover,
  html.theme-dark #nextButton:hover,
  body.theme-dark #nextButton:hover,
  html.theme-dark #prevButton:focus,
  body.theme-dark #prevButton:focus,
  html.theme-dark #nextButton:focus,
  body.theme-dark #nextButton:focus,
  html.theme-dark #prevButton:focus-visible,
  body.theme-dark #prevButton:focus-visible,
  html.theme-dark #nextButton:focus-visible,
  body.theme-dark #nextButton:focus-visible {
    background:
      radial-gradient(circle at 50% 16%, rgba(255, 244, 226, 0.12), transparent 58%),
      linear-gradient(180deg, rgba(52, 47, 40, 0.96), rgba(29, 26, 23, 0.96)) !important;
    border-color: rgba(255, 244, 226, 0.08) !important;
    color: rgba(244, 237, 225, 0.84) !important;
    filter: none !important;
    outline: none !important;
    transform: none !important;
    box-shadow:
      0 13px 28px rgba(0, 0, 0, 0.34),
      inset 0 1px 1px rgba(255, 244, 226, 0.12),
      inset 0 -2px 5px rgba(0, 0, 0, 0.28) !important;
  }
}

html.theme-dark .title-chapter-button,
body.theme-dark .title-chapter-button,
html.theme-dark .brand-block,
body.theme-dark .brand-block,
html.theme-dark .chapter-title-block,
body.theme-dark .chapter-title-block,
html.theme-dark .ebook-title-block,
body.theme-dark .ebook-title-block {
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 244, 226, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(49, 44, 38, 0.94), rgba(31, 28, 24, 0.94)) !important;
  border-color: rgba(255, 244, 226, 0.08) !important;
  color: rgba(244, 237, 225, 0.78) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 244, 226, 0.1),
    inset 0 -2px 5px rgba(0, 0, 0, 0.24) !important;
}

html.theme-dark .brand-block span,
body.theme-dark .brand-block span,
html.theme-dark .chapter-title-block span,
body.theme-dark .chapter-title-block span,
html.theme-dark .ebook-title-block span,
body.theme-dark .ebook-title-block span {
  color: rgba(244, 237, 225, 0.84) !important;
}

html.theme-dark .brand-block small,
body.theme-dark .brand-block small,
html.theme-dark .chapter-title-block small,
body.theme-dark .chapter-title-block small,
html.theme-dark .ebook-title-block small,
body.theme-dark .ebook-title-block small {
  color: rgba(214, 204, 188, 0.7) !important;
}

html.theme-dark .transport-controls,
body.theme-dark .transport-controls {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 244, 226, 0.1), transparent 62%),
    linear-gradient(180deg, rgba(45, 40, 35, 0.94), rgba(28, 25, 22, 0.96)) !important;
  border-color: rgba(255, 244, 226, 0.08) !important;
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.36),
    inset 0 1px 1px rgba(255, 244, 226, 0.1),
    inset 0 -2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.theme-dark .play-control-button,
body.theme-dark .play-control-button {
  background: var(--play-button-rest-bg) !important;
  color: rgba(244, 237, 225, 0.9) !important;
  box-shadow: var(--play-button-rest-shadow) !important;
}

html.theme-dark .play-control-button::before,
body.theme-dark .play-control-button::before {
  background:
    linear-gradient(180deg, rgba(255, 244, 226, 0.12), transparent 44%),
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.2), transparent 58%) !important;
}

html.theme-dark .play-control-button.is-paused,
body.theme-dark .play-control-button.is-paused,
html.theme-dark .play-control-button.is-paused:hover,
body.theme-dark .play-control-button.is-paused:hover,
html.theme-dark .play-control-button.is-paused:focus,
body.theme-dark .play-control-button.is-paused:focus,
html.theme-dark .play-control-button.is-paused:focus-visible,
body.theme-dark .play-control-button.is-paused:focus-visible,
html.theme-dark .play-control-button.is-paused:active,
body.theme-dark .play-control-button.is-paused:active {
  background:
    radial-gradient(circle at 50% 68%, rgba(255, 244, 226, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(30, 27, 24, 0.98), rgba(15, 14, 13, 0.98)) !important;
  color: rgba(244, 237, 225, 0.82) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.36),
    inset 0 6px 14px rgba(0, 0, 0, 0.44),
    inset 0 -1px 1px rgba(255, 244, 226, 0.08),
    inset 0 0 0 1px rgba(255, 244, 226, 0.05) !important;
  filter: none !important;
  transform: translateY(2px) scale(0.986);
  outline: none !important;
}

/* Dark mode context selection: warm amber word, quiet umber sentence bed. */
html.theme-dark .context-line.is-current-line,
body.theme-dark .context-line.is-current-line,
html.theme-dark .context-sentence-card.is-current-sentence-card,
body.theme-dark .context-sentence-card.is-current-sentence-card {
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .context-line.is-current-line::before,
body.theme-dark .context-line.is-current-line::before,
html.theme-dark .context-sentence-card.is-current-sentence-card::before,
body.theme-dark .context-sentence-card.is-current-sentence-card::before {
  background: rgba(42, 35, 24, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(139, 105, 20, 0.13),
    0 8px 22px rgba(0, 0, 0, 0.1) !important;
}

html.theme-dark .context-token.is-current,
body.theme-dark .context-token.is-current,
html.theme-dark .context-selection-glider,
body.theme-dark .context-selection-glider,
html.theme-dark .context-selection-pulse,
body.theme-dark .context-selection-pulse {
  background: rgba(139, 105, 20, 0.52) !important;
  box-shadow:
    inset 0 0 0 1px rgba(204, 156, 47, 0.42),
    0 0 0 3px rgba(139, 105, 20, 0.14),
    0 6px 16px rgba(0, 0, 0, 0.18) !important;
  color: rgba(250, 244, 230, 0.96) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.32) !important;
}

html.theme-dark .context-token.is-current .context-token-pivot,
body.theme-dark .context-token.is-current .context-token-pivot {
  color: var(--reader-anchor) !important;
  text-shadow: none !important;
}

html.theme-dark .context-token.is-dialogue,
body.theme-dark .context-token.is-dialogue {
  color: var(--dialogue-word-color, rgb(82, 55, 45)) !important;
}

html.theme-dark .ebook-word.is-dialogue,
body.theme-dark .ebook-word.is-dialogue {
  color: var(--dialogue-word-color, rgb(82, 55, 45));
}

html.theme-dark .context-line.is-epub-verse,
body.theme-dark .context-line.is-epub-verse,
html.theme-dark .context-sentence-card.is-epub-verse,
body.theme-dark .context-sentence-card.is-epub-verse,
html.theme-dark .ebook-paragraph.is-epub-verse,
body.theme-dark .ebook-paragraph.is-epub-verse {
  color: rgba(241, 233, 218, 0.86);
}

html.theme-dark .ebook-paragraph.is-epub-blockquote,
body.theme-dark .ebook-paragraph.is-epub-blockquote {
  color: rgba(247, 242, 232, 0.78);
}

html.theme-dark .ebook-paragraph.is-epub-drama,
body.theme-dark .ebook-paragraph.is-epub-drama {
  color: rgba(247, 242, 232, 0.92);
}

html.theme-dark .ebook-paragraph.is-epub-speaker,
body.theme-dark .ebook-paragraph.is-epub-speaker {
  color: rgba(255, 249, 238, 0.97);
}

html.theme-dark .ebook-paragraph.is-epub-stage-direction,
body.theme-dark .ebook-paragraph.is-epub-stage-direction {
  color: rgba(239, 228, 210, 0.84);
}

html.theme-dark .ebook-paragraph.is-epub-list-item,
body.theme-dark .ebook-paragraph.is-epub-list-item,
html.theme-dark .ebook-paragraph.is-epub-table-header,
body.theme-dark .ebook-paragraph.is-epub-table-header,
html.theme-dark .ebook-paragraph.is-epub-table-row,
body.theme-dark .ebook-paragraph.is-epub-table-row,
html.theme-dark .ebook-paragraph.is-epub-code,
body.theme-dark .ebook-paragraph.is-epub-code,
html.theme-dark .ebook-paragraph.is-epub-aside,
body.theme-dark .ebook-paragraph.is-epub-aside,
html.theme-dark .ebook-paragraph.is-epub-diagram,
body.theme-dark .ebook-paragraph.is-epub-diagram,
html.theme-dark .ebook-paragraph.is-epub-equation,
body.theme-dark .ebook-paragraph.is-epub-equation {
  color: rgba(242, 235, 222, 0.88);
}

html.theme-dark .ebook-paragraph.is-epub-list-item::before,
body.theme-dark .ebook-paragraph.is-epub-list-item::before {
  color: rgba(222, 196, 161, 0.78);
}

html.theme-dark .ebook-paragraph.is-epub-table-header,
body.theme-dark .ebook-paragraph.is-epub-table-header,
html.theme-dark .ebook-paragraph.is-epub-code,
body.theme-dark .ebook-paragraph.is-epub-code,
html.theme-dark .ebook-paragraph.is-epub-aside,
body.theme-dark .ebook-paragraph.is-epub-aside,
html.theme-dark .ebook-paragraph.is-epub-diagram,
body.theme-dark .ebook-paragraph.is-epub-diagram,
html.theme-dark .ebook-paragraph.is-epub-equation,
body.theme-dark .ebook-paragraph.is-epub-equation {
  border-color: rgba(234, 218, 192, 0.14);
  background: rgba(238, 224, 201, 0.055);
}

html.theme-dark .ebook-paragraph.is-epub-table-row,
body.theme-dark .ebook-paragraph.is-epub-table-row {
  border-bottom-color: rgba(234, 218, 192, 0.12);
}

html.theme-dark .ebook-illustration figcaption,
body.theme-dark .ebook-illustration figcaption,
html.theme-dark .ebook-paragraph.is-epub-image-caption,
body.theme-dark .ebook-paragraph.is-epub-image-caption {
  color: rgba(230, 217, 194, 0.62);
}

html.theme-dark .context-line.is-epub-heading-1,
html.theme-dark .context-line.is-epub-heading-2,
html.theme-dark .context-line.is-epub-heading-3,
html.theme-dark .context-line.is-epub-heading-4,
html.theme-dark .context-line.is-epub-heading-5,
html.theme-dark .context-line.is-epub-heading-6,
body.theme-dark .context-line.is-epub-heading-1,
body.theme-dark .context-line.is-epub-heading-2,
body.theme-dark .context-line.is-epub-heading-3,
body.theme-dark .context-line.is-epub-heading-4,
body.theme-dark .context-line.is-epub-heading-5,
body.theme-dark .context-line.is-epub-heading-6,
html.theme-dark .context-sentence-card.is-epub-heading-1,
html.theme-dark .context-sentence-card.is-epub-heading-2,
html.theme-dark .context-sentence-card.is-epub-heading-3,
html.theme-dark .context-sentence-card.is-epub-heading-4,
html.theme-dark .context-sentence-card.is-epub-heading-5,
html.theme-dark .context-sentence-card.is-epub-heading-6,
body.theme-dark .context-sentence-card.is-epub-heading-1,
body.theme-dark .context-sentence-card.is-epub-heading-2,
body.theme-dark .context-sentence-card.is-epub-heading-3,
body.theme-dark .context-sentence-card.is-epub-heading-4,
body.theme-dark .context-sentence-card.is-epub-heading-5,
body.theme-dark .context-sentence-card.is-epub-heading-6,
html.theme-dark .ebook-paragraph.is-epub-heading-1,
html.theme-dark .ebook-paragraph.is-epub-heading-2,
html.theme-dark .ebook-paragraph.is-epub-heading-3,
html.theme-dark .ebook-paragraph.is-epub-heading-4,
html.theme-dark .ebook-paragraph.is-epub-heading-5,
html.theme-dark .ebook-paragraph.is-epub-heading-6,
body.theme-dark .ebook-paragraph.is-epub-heading-1,
body.theme-dark .ebook-paragraph.is-epub-heading-2,
body.theme-dark .ebook-paragraph.is-epub-heading-3,
body.theme-dark .ebook-paragraph.is-epub-heading-4,
body.theme-dark .ebook-paragraph.is-epub-heading-5,
body.theme-dark .ebook-paragraph.is-epub-heading-6 {
  color: var(--ink) !important;
}

/* Dark-mode polish for chapters and book info screens. */
html.theme-dark .chapter-panel,
body.theme-dark .chapter-panel,
html.theme-dark .book-details-panel,
body.theme-dark .book-details-panel {
  background:
    radial-gradient(circle at 50% -8%, rgba(108, 82, 58, 0.16), transparent 42%),
    linear-gradient(180deg, #181612 0%, #211d18 58%, #171512 100%) !important;
  color: rgba(246, 239, 228, 0.94) !important;
}

html.theme-dark .chapter-sheet,
body.theme-dark .chapter-sheet,
html.theme-dark .book-details-sheet,
body.theme-dark .book-details-sheet {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .chapter-panel .chapter-screen-heading h2,
body.theme-dark .chapter-panel .chapter-screen-heading h2,
html.theme-dark .book-details-title-wrap input,
body.theme-dark .book-details-title-wrap input,
html.theme-dark .book-details-title-wrap textarea,
body.theme-dark .book-details-title-wrap textarea,
html.theme-dark .book-details-insights-head h3,
body.theme-dark .book-details-insights-head h3 {
  color: rgba(250, 244, 234, 0.96) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.22) !important;
}

html.theme-dark .chapter-panel .chapter-screen-heading p,
body.theme-dark .chapter-panel .chapter-screen-heading p,
html.theme-dark .book-details-author,
body.theme-dark .book-details-author,
html.theme-dark .book-details-progress-card p,
body.theme-dark .book-details-progress-card p,
html.theme-dark .book-details-progress-card small,
body.theme-dark .book-details-progress-card small,
html.theme-dark .book-details-summary,
body.theme-dark .book-details-summary,
html.theme-dark .book-details-status,
body.theme-dark .book-details-status {
  color: rgba(214, 204, 188, 0.78) !important;
}

html.theme-dark .chapter-panel .chapter-title-block.title-chapter-button,
body.theme-dark .chapter-panel .chapter-title-block.title-chapter-button,
html.theme-dark .chapter-panel .top-icon-button,
body.theme-dark .chapter-panel .top-icon-button,
html.theme-dark .book-details-close.collection-back,
body.theme-dark .book-details-close.collection-back {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 244, 226, 0.09), transparent 58%),
    linear-gradient(180deg, rgba(48, 43, 37, 0.96), rgba(30, 27, 24, 0.94)) !important;
  color: rgba(242, 235, 224, 0.84) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 244, 226, 0.11),
    inset 0 -1px 4px rgba(0, 0, 0, 0.26) !important;
}

html.theme-dark .chapter-search,
body.theme-dark .chapter-search {
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 244, 226, 0.08), transparent 48%),
    rgba(33, 29, 25, 0.78) !important;
  border-color: rgba(225, 212, 190, 0.16) !important;
  color: rgba(214, 204, 188, 0.72) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.06) !important;
}

html.theme-dark .chapter-search input,
body.theme-dark .chapter-search input {
  color: rgba(246, 239, 228, 0.9) !important;
}

html.theme-dark .chapter-search input::placeholder,
body.theme-dark .chapter-search input::placeholder {
  color: rgba(214, 204, 188, 0.54) !important;
}

html.theme-dark .chapter-option::before,
body.theme-dark .chapter-option::before,
html.theme-dark .chapter-volume-divider::before,
body.theme-dark .chapter-volume-divider::before {
  background: rgba(225, 212, 190, 0.14) !important;
}

html.theme-dark .chapter-volume-divider,
body.theme-dark .chapter-volume-divider {
  background:
    linear-gradient(90deg, rgba(255, 244, 226, 0.075), rgba(255, 244, 226, 0.032)) !important;
  border-color: rgba(225, 212, 190, 0.1) !important;
  color: rgba(225, 214, 196, 0.82) !important;
}

html.theme-dark .chapter-volume-divider span,
body.theme-dark .chapter-volume-divider span {
  color: rgba(225, 214, 196, 0.82) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.24) !important;
}

html.theme-dark .chapter-volume-divider span::before,
html.theme-dark .chapter-volume-divider span::after,
body.theme-dark .chapter-volume-divider span::before,
body.theme-dark .chapter-volume-divider span::after {
  background: rgba(225, 212, 190, 0.18) !important;
}

html.theme-dark .chapter-option-card,
body.theme-dark .chapter-option-card,
html.theme-dark .chapter-search-empty,
body.theme-dark .chapter-search-empty {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 244, 226, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(45, 40, 34, 0.88), rgba(34, 30, 26, 0.88)) !important;
  border-color: rgba(225, 212, 190, 0.12) !important;
  color: rgba(246, 239, 228, 0.9) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.06) !important;
}

html.theme-dark .chapter-option-copy strong,
body.theme-dark .chapter-option-copy strong,
html.theme-dark .chapter-result-snippet,
body.theme-dark .chapter-result-snippet {
  color: rgba(250, 244, 234, 0.92) !important;
}

html.theme-dark .chapter-option-copy small,
body.theme-dark .chapter-option-copy small,
html.theme-dark .chapter-result-ellipsis,
body.theme-dark .chapter-result-ellipsis,
html.theme-dark .chapter-option-chevron,
body.theme-dark .chapter-option-chevron {
  color: rgba(214, 204, 188, 0.62) !important;
}

html.theme-dark .chapter-option-status,
body.theme-dark .chapter-option-status,
html.theme-dark .chapter-option.is-complete .chapter-option-status,
body.theme-dark .chapter-option.is-complete .chapter-option-status {
  background: #1e1a16 !important;
  border-color: rgba(225, 212, 190, 0.2) !important;
}

html.theme-dark .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-option.is-current .chapter-option-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 151, 128, 0.13), transparent 52%),
    linear-gradient(90deg, rgba(52, 48, 39, 0.82), rgba(38, 34, 30, 0.9)) !important;
  border-color: rgba(126, 151, 128, 0.24) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 244, 226, 0.08),
    inset 0 0 0 1px rgba(126, 151, 128, 0.08) !important;
}

html.theme-dark .chapter-option.is-current .chapter-option-copy strong,
html.theme-dark .chapter-option.is-current .chapter-option-chevron,
body.theme-dark .chapter-option.is-current .chapter-option-copy strong,
body.theme-dark .chapter-option.is-current .chapter-option-chevron {
  color: rgba(238, 226, 204, 0.94) !important;
}

html.theme-dark .chapter-option.is-current .chapter-option-status,
body.theme-dark .chapter-option.is-current .chapter-option-status {
  background: #211915 !important;
  border-color: rgba(232, 119, 105, 0.44) !important;
}

html.theme-dark .chapter-current-label,
body.theme-dark .chapter-current-label,
html.theme-dark .chapter-result-match,
body.theme-dark .chapter-result-match {
  background: rgba(214, 93, 82, 0.16) !important;
  color: rgba(246, 145, 130, 0.94) !important;
}

html.theme-dark .chapter-current-card,
body.theme-dark .chapter-current-card,
html.theme-dark .chapter-journey-card,
body.theme-dark .chapter-journey-card {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 244, 226, 0.095), transparent 44%),
    linear-gradient(180deg, rgba(48, 43, 36, 0.94), rgba(32, 29, 25, 0.94)) !important;
  border-color: rgba(225, 212, 190, 0.18) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 244, 226, 0.08) !important;
}

html.theme-dark .chapter-list,
body.theme-dark .chapter-list {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .chapter-panel-kicker,
body.theme-dark .chapter-panel-kicker,
html.theme-dark .chapter-list-heading small,
body.theme-dark .chapter-list-heading small {
  color: rgba(214, 204, 188, 0.72) !important;
}

html.theme-dark .chapter-current-text strong,
body.theme-dark .chapter-current-text strong,
html.theme-dark .chapter-journey-stage strong,
body.theme-dark .chapter-journey-stage strong {
  color: rgba(250, 244, 234, 0.94) !important;
}

html.theme-dark .chapter-current-text small,
body.theme-dark .chapter-current-text small,
html.theme-dark .chapter-current-ring small,
body.theme-dark .chapter-current-ring small,
html.theme-dark .chapter-journey-stage small,
body.theme-dark .chapter-journey-stage small,
html.theme-dark .chapter-journey-meta,
body.theme-dark .chapter-journey-meta,
html.theme-dark .chapter-list-heading,
body.theme-dark .chapter-list-heading {
  color: rgba(214, 204, 188, 0.68) !important;
}

html.theme-dark .chapter-current-ring span,
body.theme-dark .chapter-current-ring span,
html.theme-dark .chapter-journey-stage.is-current strong,
body.theme-dark .chapter-journey-stage.is-current strong {
  color: rgba(224, 112, 98, 0.9) !important;
}

html.theme-dark .chapter-journey-track::before,
body.theme-dark .chapter-journey-track::before,
html.theme-dark .chapter-journey-meta,
body.theme-dark .chapter-journey-meta,
html.theme-dark .chapter-option-card,
body.theme-dark .chapter-option-card,
html.theme-dark .chapter-volume-divider,
body.theme-dark .chapter-volume-divider {
  border-color: rgba(225, 212, 190, 0.12) !important;
}

html.theme-dark .chapter-list .chapter-option-card,
body.theme-dark .chapter-list .chapter-option-card {
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .chapter-list .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-list .chapter-option.is-current .chapter-option-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 151, 128, 0.13), transparent 52%),
    linear-gradient(90deg, rgba(52, 48, 39, 0.82), rgba(38, 34, 30, 0.9)) !important;
  border-color: rgba(126, 151, 128, 0.24) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 244, 226, 0.08),
    inset 0 0 0 1px rgba(126, 151, 128, 0.08) !important;
}

html.theme-dark .chapter-journey-track::before,
body.theme-dark .chapter-journey-track::before {
  background: rgba(225, 212, 190, 0.18) !important;
}

html.theme-dark .chapter-journey-track::-webkit-scrollbar-track,
body.theme-dark .chapter-journey-track::-webkit-scrollbar-track {
  background: transparent !important;
}

html.theme-dark .chapter-journey-track::-webkit-scrollbar-thumb,
body.theme-dark .chapter-journey-track::-webkit-scrollbar-thumb {
  background: rgba(170, 150, 116, 0.28) !important;
}

html.theme-dark .chapter-journey-node,
body.theme-dark .chapter-journey-node {
  background: #211d18 !important;
  border-color: rgba(126, 151, 128, 0.86) !important;
}

html.theme-dark .chapter-journey-stage.is-complete .chapter-journey-node,
body.theme-dark .chapter-journey-stage.is-complete .chapter-journey-node {
  background: rgba(126, 151, 128, 0.84) !important;
}

html.theme-dark .chapter-journey-stage.is-upcoming .chapter-journey-node,
body.theme-dark .chapter-journey-stage.is-upcoming .chapter-journey-node {
  border-color: rgba(225, 212, 190, 0.22) !important;
}

html.theme-dark .chapter-option-number,
body.theme-dark .chapter-option-number {
  background: linear-gradient(145deg, rgba(103, 126, 108, 0.94), rgba(62, 85, 74, 0.96)) !important;
  color: rgba(255, 248, 237, 0.98) !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.12) !important;
}

html.theme-dark .chapter-option.is-current .chapter-option-number,
body.theme-dark .chapter-option.is-current .chapter-option-number {
  background: linear-gradient(145deg, rgba(204, 88, 76, 0.92), rgba(153, 57, 50, 0.94)) !important;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.12) !important;
}

html.theme-dark .book-details-cover,
body.theme-dark .book-details-cover {
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 244, 226, 0.08), transparent 56%),
    rgba(34, 30, 26, 0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(225, 212, 190, 0.1) !important;
}

html.theme-dark .book-details-cover.has-image,
body.theme-dark .book-details-cover.has-image {
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .book-details-cover.has-image img,
body.theme-dark .book-details-cover.has-image img {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.36) !important;
}

html.theme-dark .book-details-progress-line,
body.theme-dark .book-details-progress-line,
html.theme-dark .book-details-week-strip i,
body.theme-dark .book-details-week-strip i {
  background: rgba(225, 212, 190, 0.18) !important;
}

html.theme-dark .book-details-progress-head strong,
body.theme-dark .book-details-progress-head strong,
html.theme-dark .book-details-meta dd,
body.theme-dark .book-details-meta dd,
html.theme-dark .book-details-source-list dd,
body.theme-dark .book-details-source-list dd,
html.theme-dark .book-details-insight-tile strong,
body.theme-dark .book-details-insight-tile strong {
  color: rgba(250, 244, 234, 0.9) !important;
}

html.theme-dark .book-details-meta dt,
body.theme-dark .book-details-meta dt,
html.theme-dark .book-details-source-list dt,
body.theme-dark .book-details-source-list dt,
html.theme-dark .book-details-insight-tile small,
body.theme-dark .book-details-insight-tile small,
html.theme-dark .book-details-insight-tile em,
body.theme-dark .book-details-insight-tile em,
html.theme-dark .book-details-week-strip p,
body.theme-dark .book-details-week-strip p {
  color: rgba(214, 204, 188, 0.66) !important;
}

html.theme-dark .book-details-meta,
body.theme-dark .book-details-meta,
html.theme-dark .book-details-quote-card,
body.theme-dark .book-details-quote-card,
html.theme-dark .book-details-source-card,
body.theme-dark .book-details-source-card,
html.theme-dark .book-details-insights-card,
body.theme-dark .book-details-insights-card,
html.theme-dark .book-details-insight-tile,
body.theme-dark .book-details-insight-tile,
html.theme-dark .book-details-week-strip,
body.theme-dark .book-details-week-strip {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 244, 226, 0.07), transparent 42%),
    linear-gradient(180deg, rgba(45, 40, 34, 0.88), rgba(34, 30, 26, 0.88)) !important;
  border-color: rgba(225, 212, 190, 0.12) !important;
  color: rgba(246, 239, 228, 0.9) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.06) !important;
}

html.theme-dark .book-details-meta div + div,
body.theme-dark .book-details-meta div + div,
html.theme-dark .book-details-source-list div,
body.theme-dark .book-details-source-list div {
  border-color: rgba(225, 212, 190, 0.12) !important;
}

html.theme-dark .book-details-quote-card blockquote p,
html.theme-dark .book-details-quote-empty p,
body.theme-dark .book-details-quote-card blockquote p,
body.theme-dark .book-details-quote-empty p {
  color: rgba(250, 244, 234, 0.94) !important;
}

html.theme-dark .book-details-quote-card blockquote small,
body.theme-dark .book-details-quote-card blockquote small {
  color: rgba(214, 204, 188, 0.7) !important;
}

html.theme-dark .book-details-quote-motif,
body.theme-dark .book-details-quote-motif {
  opacity: 0.26 !important;
  mix-blend-mode: screen !important;
  filter: invert(1) sepia(0.24) saturate(0.9) hue-rotate(330deg) brightness(1.08) contrast(0.96) !important;
}

html.theme-dark .book-details-resume-actions button,
body.theme-dark .book-details-resume-actions button,
html.theme-dark .book-details-actions button,
body.theme-dark .book-details-actions button,
html.theme-dark .book-details-secondary-actions button,
body.theme-dark .book-details-secondary-actions button {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 244, 226, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(47, 42, 36, 0.96), rgba(30, 27, 24, 0.94)) !important;
  border-color: rgba(225, 212, 190, 0.14) !important;
  color: rgba(246, 239, 228, 0.9) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 244, 226, 0.08) !important;
}

html.theme-dark .book-details-resume-actions .book-details-primary,
body.theme-dark .book-details-resume-actions .book-details-primary,
html.theme-dark .book-details-actions .book-details-primary,
body.theme-dark .book-details-actions .book-details-primary,
html.theme-dark .book-details-secondary-actions .book-details-primary,
body.theme-dark .book-details-secondary-actions .book-details-primary {
  background: linear-gradient(180deg, rgba(183, 77, 66, 0.9), rgba(139, 52, 46, 0.94)) !important;
  border-color: rgba(232, 119, 105, 0.18) !important;
  color: rgba(255, 249, 238, 0.96) !important;
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.22),
    0 8px 18px rgba(151, 49, 44, 0.16),
    inset 0 1px 0 rgba(255, 244, 226, 0.14) !important;
}

html.theme-dark .book-details-secondary-actions .book-details-danger,
body.theme-dark .book-details-secondary-actions .book-details-danger,
html.theme-dark .book-details-actions .book-details-danger,
body.theme-dark .book-details-actions .book-details-danger {
  color: rgba(246, 145, 130, 0.94) !important;
}

/* Home dashboard */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  width: min(760px, 100%);
  padding-inline: clamp(20px, 5.6vw, 42px);
}

.menu-main.home-dashboard {
  gap: clamp(24px, 3.6vh, 38px);
}

.home-hero {
  display: grid;
  gap: 6px;
  padding-block-start: clamp(2px, 1.6vh, 16px);
}

.home-wordmark {
  margin: 0;
  font-family: var(--reading-font);
  font-size: clamp(3.25rem, 14vw, 5.1rem);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 0.9;
  color: rgba(28, 27, 25, 0.94);
}

.home-greeting,
.home-subtitle {
  margin: 0;
  font-family: var(--reading-font);
  color: rgba(83, 78, 70, 0.84);
}

.home-greeting {
  font-size: clamp(1.05rem, 4.2vw, 1.45rem);
}

.home-subtitle {
  font-size: clamp(0.98rem, 3.8vw, 1.22rem);
}

.home-section {
  display: grid;
  gap: 14px;
}

.home-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.home-section-label {
  margin: 0;
  font-family: var(--ui-font);
  font-size: clamp(0.72rem, 2.7vw, 0.92rem);
  font-weight: 760;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(91, 81, 70, 0.62);
}

.home-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  min-height: 34px;
  color: rgba(83, 78, 70, 0.78);
  font-family: var(--reading-font);
  font-size: clamp(0.98rem, 3.5vw, 1.16rem);
}

.home-view-all .menu-chevron {
  width: 7px;
  height: 7px;
  border-color: currentColor;
  opacity: 0.7;
}

.home-resume-card,
.home-action-panel,
.home-reading-panel,
.home-empty-progress {
  border: 1px solid rgba(196, 185, 167, 0.42);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.7), rgba(244, 238, 226, 0.46));
  box-shadow:
    0 18px 44px rgba(47, 39, 28, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.home-resume-card {
  display: grid;
  gap: clamp(16px, 3vw, 22px);
  padding: clamp(18px, 4.4vw, 28px);
}

.home-resume-body {
  display: grid;
  grid-template-columns: minmax(108px, 0.34fr) minmax(0, 1fr);
  gap: clamp(18px, 5vw, 36px);
  align-items: center;
}

.home-resume-cover {
  min-width: 0;
}

.home-book-cover,
.home-cover-placeholder {
  display: grid;
  place-items: center;
  width: min(100%, 178px);
  aspect-ratio: 0.68;
  border-radius: 7px;
  overflow: hidden;
  background: rgba(245, 238, 226, 0.72);
  box-shadow:
    0 18px 32px rgba(48, 39, 27, 0.12),
    inset 0 0 0 1px rgba(116, 96, 69, 0.1);
}

.home-book-cover.has-image {
  background: rgba(242, 235, 222, 0.42);
}

.home-book-cover.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-book-cover:not(.has-image) {
  font-family: var(--reading-font);
  font-size: clamp(2.2rem, 10vw, 4rem);
  color: rgba(153, 62, 55, 0.7);
}

.home-cover-placeholder {
  gap: 10px;
  border: 1.5px dashed rgba(128, 113, 94, 0.36);
  color: rgba(93, 84, 72, 0.58);
  text-align: center;
  padding: 18px;
}

.home-cover-placeholder span {
  max-width: 86px;
  font-family: var(--reading-font);
  font-size: clamp(0.95rem, 3.5vw, 1.12rem);
  line-height: 1.18;
}

.home-resume-copy {
  min-width: 0;
  display: grid;
  gap: clamp(12px, 2.6vw, 18px);
}

.home-resume-copy h3 {
  margin: 0;
  font-family: var(--reading-font);
  font-size: clamp(2.05rem, 8vw, 3.45rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: 0;
  color: rgba(28, 27, 25, 0.94);
}

.home-resume-copy p {
  margin: 0;
  max-width: 24em;
  font-family: var(--reading-font);
  font-size: clamp(1.02rem, 4vw, 1.34rem);
  line-height: 1.23;
  color: rgba(83, 78, 70, 0.82);
}

.home-resume-progress {
  display: grid;
  gap: 8px;
  margin-block: 2px 4px;
}

.home-progress-track {
  display: block;
  width: 100%;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(209, 202, 190, 0.72);
}

.home-progress-track > span,
#homeResumeProgressFill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(186, 65, 57, 0.86), rgba(205, 82, 73, 0.94));
}

.home-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(83, 78, 70, 0.76);
  font-family: var(--reading-font);
  font-size: clamp(0.94rem, 3.2vw, 1.12rem);
}

.home-primary-action,
.home-secondary-action {
  min-height: 56px;
  width: 100%;
  border-radius: 999px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--reading-font);
  font-size: clamp(1.04rem, 3.9vw, 1.26rem);
  transition: transform var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
}

.home-primary-action {
  background: linear-gradient(180deg, rgba(206, 70, 64, 0.95), rgba(165, 49, 45, 0.96));
  color: rgba(255, 251, 244, 0.98);
  box-shadow:
    0 14px 24px rgba(153, 49, 43, 0.2),
    inset 0 1px 0 rgba(255, 244, 226, 0.2);
}

.home-secondary-action {
  background: rgba(255, 253, 247, 0.48);
  color: rgba(54, 50, 45, 0.86);
  border: 1px solid rgba(201, 190, 173, 0.38);
  box-shadow:
    0 12px 24px rgba(47, 39, 28, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.home-action-symbol {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  color: currentColor;
}

.home-primary-action .home-action-symbol {
  fill: currentColor;
  stroke: none;
}

.home-secondary-action .home-action-symbol {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-progress-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 2px 2px 10px;
  margin-inline: -2px;
  scrollbar-width: none;
}

.home-progress-rail::-webkit-scrollbar {
  display: none;
}

.home-progress-rail.is-empty {
  display: block;
  padding: 0;
  margin: 0;
  overflow: visible;
}

.home-empty-progress {
  min-height: 128px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: rgba(83, 78, 70, 0.76);
}

.home-empty-progress strong,
.home-empty-progress small {
  display: block;
}

.home-empty-progress strong {
  margin-block-end: 7px;
  font-family: var(--reading-font);
  font-size: clamp(1.06rem, 3.8vw, 1.28rem);
  font-weight: 500;
  color: rgba(42, 39, 34, 0.92);
}

.home-empty-progress small {
  max-width: 25em;
  font-family: var(--reading-font);
  font-size: clamp(0.94rem, 3.4vw, 1.1rem);
  line-height: 1.35;
}

.home-empty-icon,
.home-action-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(151, 102, 49, 0.86);
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.74), transparent 58%),
    rgba(237, 229, 216, 0.52);
  box-shadow:
    inset 0 0 0 1px rgba(133, 111, 79, 0.14),
    0 10px 20px rgba(47, 39, 28, 0.08);
}

.home-empty-icon svg,
.home-action-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-progress-book {
  flex: 0 0 clamp(126px, 24vw, 152px);
  min-height: 220px;
  padding: 14px;
  border-radius: 13px;
  display: grid;
  gap: 11px;
  align-content: start;
  text-align: left;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.64), rgba(242, 235, 222, 0.46));
  border: 1px solid rgba(196, 185, 167, 0.4);
  box-shadow: 0 14px 30px rgba(47, 39, 28, 0.08);
}

.home-progress-cover {
  width: 100%;
  aspect-ratio: 0.68;
  border-radius: 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(245, 238, 226, 0.7);
  color: rgba(153, 62, 55, 0.72);
  font-family: var(--reading-font);
  font-size: 2.4rem;
  box-shadow: inset 0 0 0 1px rgba(116, 96, 69, 0.1);
}

.home-progress-cover.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.home-progress-book-copy {
  display: grid;
  gap: 7px;
}

.home-progress-book-copy strong {
  min-height: 2.4em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-family: var(--reading-font);
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.16;
  color: rgba(42, 39, 34, 0.92);
}

.home-progress-book-copy small,
.home-progress-book-copy em {
  font-family: var(--reading-font);
  color: rgba(83, 78, 70, 0.72);
}

.home-progress-book-copy small {
  font-size: 0.82rem;
  white-space: nowrap;
}

.home-progress-book-copy em {
  font-size: 1.02rem;
  font-style: normal;
}

.home-action-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: clamp(16px, 3.8vw, 24px);
}

.home-action-card {
  position: relative;
  min-width: 0;
  min-height: 150px;
  padding: 8px 10px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: rgba(42, 39, 34, 0.9);
  border-radius: 15px;
}

.home-import-card {
  cursor: pointer;
}

.home-import-card input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.home-action-card strong,
.home-action-card small {
  display: block;
  max-width: 100%;
}

.home-action-card strong {
  font-family: var(--reading-font);
  font-size: clamp(0.98rem, 3.1vw, 1.18rem);
  font-weight: 500;
  line-height: 1.12;
}

.home-action-card small {
  color: rgba(83, 78, 70, 0.72);
  font-family: var(--reading-font);
  font-size: clamp(0.82rem, 2.7vw, 1rem);
  line-height: 1.22;
}

.home-file-status {
  min-height: 1.1em;
  color: rgba(153, 62, 55, 0.76);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.1;
}

.home-action-import { color: rgba(116, 103, 90, 0.88); }
.home-action-paste { color: rgba(202, 91, 76, 0.9); }
.home-action-settings { color: rgba(186, 133, 53, 0.92); }
.home-action-stats { color: rgba(147, 111, 55, 0.92); }

.home-paste-editor {
  border: 1px solid rgba(196, 185, 167, 0.4);
  border-radius: 16px;
  background: rgba(255, 253, 247, 0.56);
  box-shadow: 0 12px 26px rgba(47, 39, 28, 0.07);
}

.home-reading-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 12px;
}

.home-reading-card {
  min-width: 0;
  min-height: 100px;
  padding: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  text-align: left;
  color: rgba(42, 39, 34, 0.92);
  border-radius: 14px;
}

.home-reading-card + .home-reading-card {
  border-left: 1px solid rgba(196, 185, 167, 0.42);
  border-radius: 0 14px 14px 0;
}

.home-reading-card strong,
.home-reading-card small {
  display: block;
}

.home-reading-card strong {
  font-family: var(--reading-font);
  font-size: clamp(1rem, 3.2vw, 1.22rem);
  font-weight: 500;
  line-height: 1.14;
}

.home-reading-card small {
  margin-block-start: 3px;
  font-family: var(--reading-font);
  font-size: clamp(0.84rem, 2.8vw, 1rem);
  line-height: 1.28;
  color: rgba(83, 78, 70, 0.72);
}

.home-reading-card .menu-chevron {
  border-color: currentColor;
  opacity: 0.46;
}

.home-empty-footer {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-block: 6px 18px;
  text-align: center;
  color: rgba(135, 95, 52, 0.72);
}

.home-empty-footer svg {
  width: 92px;
  height: 76px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
}

.home-empty-footer strong {
  color: rgba(42, 39, 34, 0.9);
  font-family: var(--reading-font);
  font-size: clamp(1.2rem, 4.5vw, 1.55rem);
  font-weight: 500;
}

.home-empty-footer span {
  color: rgba(83, 78, 70, 0.7);
  font-family: var(--reading-font);
  font-size: clamp(0.96rem, 3.4vw, 1.1rem);
}

@media (max-width: 560px) {
  .home-resume-body {
    grid-template-columns: minmax(92px, 0.78fr) minmax(0, 1.22fr);
    gap: 16px;
  }

  .home-primary-action,
  .home-secondary-action {
    min-height: 48px;
    padding-inline: 14px;
  }

  .home-action-panel {
    padding: 12px 8px;
    gap: 2px;
  }

  .home-action-card {
    min-height: 136px;
    padding-inline: 6px;
  }

  .home-action-icon {
    width: 54px;
    height: 54px;
  }

  .home-action-icon svg {
    width: 30px;
    height: 30px;
  }

  .home-reading-panel {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-reading-card + .home-reading-card {
    border-left: 0;
    border-top: 1px solid rgba(196, 185, 167, 0.42);
    border-radius: 14px;
  }
}

@media (max-width: 390px) {
  .home-resume-body {
    grid-template-columns: 1fr;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: 132px;
  }

  .home-action-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

html.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen),
body.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) {
  background:
    linear-gradient(180deg, rgba(21, 19, 16, 0.98), rgba(26, 23, 19, 0.98) 48%, rgba(17, 16, 14, 0.98)) !important;
  color: rgba(246, 239, 228, 0.94) !important;
}

html.theme-dark .home-wordmark,
body.theme-dark .home-wordmark,
html.theme-dark .home-resume-copy h3,
body.theme-dark .home-resume-copy h3,
html.theme-dark .home-empty-progress strong,
body.theme-dark .home-empty-progress strong,
html.theme-dark .home-progress-book-copy strong,
body.theme-dark .home-progress-book-copy strong,
html.theme-dark .home-action-card strong,
body.theme-dark .home-action-card strong,
html.theme-dark .home-reading-card strong,
body.theme-dark .home-reading-card strong,
html.theme-dark .home-empty-footer strong,
body.theme-dark .home-empty-footer strong {
  color: rgba(250, 244, 234, 0.96) !important;
}

html.theme-dark .home-greeting,
body.theme-dark .home-greeting,
html.theme-dark .home-subtitle,
body.theme-dark .home-subtitle,
html.theme-dark .home-resume-copy p,
body.theme-dark .home-resume-copy p,
html.theme-dark .home-empty-progress small,
body.theme-dark .home-empty-progress small,
html.theme-dark .home-progress-book-copy small,
body.theme-dark .home-progress-book-copy small,
html.theme-dark .home-progress-book-copy em,
body.theme-dark .home-progress-book-copy em,
html.theme-dark .home-action-card small,
body.theme-dark .home-action-card small,
html.theme-dark .home-reading-card small,
body.theme-dark .home-reading-card small,
html.theme-dark .home-progress-meta,
body.theme-dark .home-progress-meta,
html.theme-dark .home-empty-footer span,
body.theme-dark .home-empty-footer span {
  color: rgba(218, 209, 194, 0.74) !important;
}

html.theme-dark .home-section-label,
body.theme-dark .home-section-label {
  color: rgba(218, 209, 194, 0.56) !important;
}

html.theme-dark .home-view-all,
body.theme-dark .home-view-all {
  color: rgba(218, 209, 194, 0.74) !important;
}

html.theme-dark .home-resume-card,
body.theme-dark .home-resume-card,
html.theme-dark .home-action-panel,
body.theme-dark .home-action-panel,
html.theme-dark .home-reading-panel,
body.theme-dark .home-reading-panel,
html.theme-dark .home-empty-progress,
body.theme-dark .home-empty-progress,
html.theme-dark .home-progress-book,
body.theme-dark .home-progress-book,
html.theme-dark .home-paste-editor,
body.theme-dark .home-paste-editor {
  background:
    linear-gradient(180deg, rgba(42, 37, 31, 0.66), rgba(30, 27, 23, 0.6)) !important;
  border-color: rgba(225, 212, 190, 0.14) !important;
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.05) !important;
}

html.theme-dark .home-cover-placeholder,
body.theme-dark .home-cover-placeholder,
html.theme-dark .home-book-cover,
body.theme-dark .home-book-cover,
html.theme-dark .home-progress-cover,
body.theme-dark .home-progress-cover {
  background: rgba(31, 28, 24, 0.74) !important;
  color: rgba(231, 116, 104, 0.78) !important;
  box-shadow: inset 0 0 0 1px rgba(225, 212, 190, 0.1) !important;
}

html.theme-dark .home-book-cover.has-image,
body.theme-dark .home-book-cover.has-image,
html.theme-dark .home-progress-cover.has-image,
body.theme-dark .home-progress-cover.has-image {
  background: rgba(21, 19, 16, 0.42) !important;
}

html.theme-dark .home-secondary-action,
body.theme-dark .home-secondary-action {
  background: rgba(42, 37, 31, 0.5) !important;
  border-color: rgba(225, 212, 190, 0.13) !important;
  color: rgba(250, 244, 234, 0.9) !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.06) !important;
}

html.theme-dark .home-action-icon,
body.theme-dark .home-action-icon,
html.theme-dark .home-empty-icon,
body.theme-dark .home-empty-icon {
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 244, 226, 0.08), transparent 58%),
    rgba(45, 40, 34, 0.72) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 244, 226, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.24) !important;
}

html.theme-dark .home-progress-track,
body.theme-dark .home-progress-track {
  background: rgba(225, 212, 190, 0.16) !important;
}

html.theme-dark .home-reading-card + .home-reading-card,
body.theme-dark .home-reading-card + .home-reading-card {
  border-color: rgba(225, 212, 190, 0.14) !important;
}

html.theme-dark .home-empty-footer,
body.theme-dark .home-empty-footer {
  color: rgba(190, 144, 82, 0.74) !important;
}

/* Home dashboard closer to the compact mockup */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  width: 100%;
  max-width: 820px;
  padding-block-start: clamp(54px, 7.2vh, 72px);
  padding-inline: clamp(18px, 3.2vw, 28px);
}

.menu-main.home-dashboard {
  gap: clamp(17px, 2.5vh, 25px);
}

.home-hero {
  gap: 3px;
}

.home-wordmark {
  font-size: clamp(2.35rem, 9.6vw, 3.7rem);
  line-height: 0.94;
}

.home-greeting {
  font-size: clamp(0.92rem, 3.2vw, 1.12rem);
}

.home-subtitle {
  font-size: clamp(0.84rem, 2.9vw, 1rem);
}

.home-section {
  gap: 9px;
}

.home-section-label {
  font-size: clamp(0.59rem, 2vw, 0.73rem);
  letter-spacing: 0.3em;
}

.home-resume-card {
  gap: 10px;
  padding: clamp(13px, 2.7vw, 18px);
  border-radius: 15px;
}

.home-resume-body {
  grid-template-columns: minmax(84px, 0.31fr) minmax(0, 1fr);
  gap: clamp(12px, 3vw, 22px);
}

.home-book-cover,
.home-cover-placeholder {
  width: min(100%, 128px);
  border-radius: 5px;
  box-shadow:
    0 10px 20px rgba(48, 39, 27, 0.08),
    inset 0 0 0 1px rgba(116, 96, 69, 0.08);
}

.home-resume-copy {
  gap: clamp(7px, 1.7vw, 11px);
}

.home-resume-copy h3 {
  font-size: clamp(1.42rem, 5.2vw, 2.2rem);
  line-height: 1.05;
}

.home-resume-copy p {
  font-size: clamp(0.82rem, 2.8vw, 0.98rem);
}

.home-progress-meta {
  font-size: clamp(0.74rem, 2.45vw, 0.88rem);
}

.home-primary-action,
.home-secondary-action {
  min-height: 40px;
  padding-inline: 13px;
  font-size: clamp(0.84rem, 2.9vw, 0.98rem);
}

.home-progress-book {
  flex-basis: clamp(96px, 19vw, 118px);
  min-height: 162px;
  padding: 9px;
}

.home-progress-book-copy strong {
  font-size: 0.82rem;
}

.home-progress-book-copy small {
  font-size: 0.68rem;
}

.home-progress-book-copy em {
  font-size: 0.82rem;
}

.home-action-panel {
  padding: clamp(9px, 2.2vw, 14px);
  gap: 0;
}

.home-action-card {
  -webkit-appearance: none;
  appearance: none;
  min-height: 98px;
  padding: 5px;
  gap: 5px;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0;
}

.home-action-card:hover,
.home-action-card:focus,
.home-action-card:focus-visible,
.home-action-card:active {
  background: transparent !important;
  box-shadow: none !important;
}

.home-action-icon,
.home-reading-card .home-action-icon {
  width: 40px;
  height: 40px;
}

.home-action-icon svg,
.home-reading-card .home-action-icon svg {
  width: 23px;
  height: 23px;
}

.home-action-card strong {
  font-size: clamp(0.76rem, 2.45vw, 0.9rem);
}

.home-action-card small {
  font-size: clamp(0.66rem, 2.1vw, 0.78rem);
}

.home-file-status {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.home-reading-panel {
  padding: 8px;
}

.home-reading-card {
  min-height: 92px;
  padding: 8px;
  gap: 7px;
  background: transparent !important;
  box-shadow: none !important;
}

.home-reading-card strong {
  font-size: clamp(0.8rem, 2.55vw, 0.95rem);
}

.home-reading-card small {
  font-size: clamp(0.66rem, 2.1vw, 0.78rem);
}

html.theme-dark .home-action-card,
body.theme-dark .home-action-card,
html.theme-dark .home-reading-card,
body.theme-dark .home-reading-card {
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 560px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-inline: max(22px, env(safe-area-inset-left));
  }

  .home-resume-card,
  .home-action-panel,
  .home-reading-panel,
  .home-empty-progress {
    border-radius: 15px;
  }

  .home-resume-body {
    grid-template-columns: minmax(86px, 0.35fr) minmax(0, 1fr);
    gap: 12px;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 112px);
  }

  .home-action-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-action-card {
    min-height: 94px;
  }

  .home-reading-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-reading-card {
    min-height: 88px;
  }
}

@media (max-width: 390px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-inline: max(18px, env(safe-area-inset-left));
  }

  .home-wordmark {
    font-size: clamp(2.2rem, 9vw, 3.1rem);
  }

  .home-resume-copy h3 {
    font-size: clamp(1.28rem, 5vw, 1.9rem);
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 100px);
  }

  .home-action-icon,
  .home-reading-card .home-action-icon {
    width: 36px;
    height: 36px;
  }

  .home-action-icon svg,
  .home-reading-card .home-action-icon svg {
    width: 20px;
    height: 20px;
  }
}

/* Home dashboard compact scale */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  padding-block-start: clamp(52px, 7vh, 70px);
  padding-inline: clamp(18px, 5.1vw, 34px);
}

.menu-main.home-dashboard {
  gap: clamp(18px, 2.8vh, 28px);
}

.home-hero {
  gap: 4px;
  padding-block-start: 0;
}

.home-wordmark {
  font-size: clamp(2.6rem, 11vw, 4.25rem);
  line-height: 0.94;
}

.home-greeting {
  font-size: clamp(0.98rem, 3.55vw, 1.22rem);
}

.home-subtitle {
  font-size: clamp(0.9rem, 3.15vw, 1.08rem);
}

.home-section {
  gap: 10px;
}

.home-section-label {
  font-size: clamp(0.62rem, 2.25vw, 0.78rem);
  letter-spacing: 0.28em;
}

.home-view-all {
  min-height: 30px;
  font-size: clamp(0.86rem, 3vw, 1rem);
}

.home-resume-card,
.home-action-panel,
.home-reading-panel,
.home-empty-progress {
  border-radius: 16px;
  box-shadow:
    0 14px 32px rgba(47, 39, 28, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.home-resume-card {
  gap: clamp(11px, 2.2vw, 16px);
  padding: clamp(14px, 3.2vw, 20px);
}

.home-resume-body {
  grid-template-columns: minmax(92px, 0.3fr) minmax(0, 1fr);
  gap: clamp(14px, 3.8vw, 26px);
}

.home-book-cover,
.home-cover-placeholder {
  width: min(100%, 142px);
  border-radius: 6px;
  box-shadow:
    0 13px 24px rgba(48, 39, 27, 0.09),
    inset 0 0 0 1px rgba(116, 96, 69, 0.09);
}

.home-cover-placeholder {
  gap: 7px;
  padding: 14px;
}

.home-cover-placeholder span {
  font-size: clamp(0.82rem, 2.8vw, 0.98rem);
}

.home-resume-copy {
  gap: clamp(8px, 2vw, 13px);
}

.home-resume-copy h3 {
  font-size: clamp(1.55rem, 6.1vw, 2.65rem);
  line-height: 1.04;
}

.home-resume-copy p {
  font-size: clamp(0.88rem, 3.2vw, 1.08rem);
  line-height: 1.22;
}

.home-resume-progress {
  gap: 6px;
  margin-block: 0 2px;
}

.home-progress-track {
  height: 3.5px;
}

.home-progress-meta {
  font-size: clamp(0.8rem, 2.8vw, 0.95rem);
}

.home-primary-action,
.home-secondary-action {
  min-height: 44px;
  padding-inline: 16px;
  gap: 9px;
  font-size: clamp(0.92rem, 3.25vw, 1.08rem);
}

.home-action-symbol {
  width: 18px;
  height: 18px;
}

.home-progress-rail {
  gap: 12px;
  padding-bottom: 7px;
}

.home-progress-book {
  flex-basis: clamp(104px, 22vw, 128px);
  min-height: 176px;
  padding: 10px;
  gap: 8px;
  border-radius: 12px;
}

.home-progress-book-copy {
  gap: 5px;
}

.home-progress-book-copy strong {
  font-size: 0.88rem;
}

.home-progress-book-copy small {
  font-size: 0.72rem;
}

.home-progress-book-copy em {
  font-size: 0.88rem;
}

.home-empty-progress {
  min-height: 96px;
  padding: 17px;
  gap: 16px;
}

.home-empty-progress strong {
  font-size: clamp(0.94rem, 3.2vw, 1.1rem);
}

.home-empty-progress small {
  font-size: clamp(0.82rem, 2.9vw, 0.96rem);
}

.home-empty-icon,
.home-action-icon {
  width: 48px;
  height: 48px;
}

.home-empty-icon svg,
.home-action-icon svg {
  width: 27px;
  height: 27px;
}

.home-action-panel {
  padding: clamp(10px, 2.8vw, 16px);
}

.home-action-card {
  min-height: 112px;
  padding: 6px;
  gap: 6px;
  border-radius: 13px;
}

.home-action-card strong {
  font-size: clamp(0.82rem, 2.8vw, 1rem);
  line-height: 1.08;
}

.home-action-card small {
  font-size: clamp(0.72rem, 2.35vw, 0.86rem);
  line-height: 1.14;
}

.home-file-status {
  max-width: 100%;
  max-height: 2.3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.6rem;
  line-height: 1.12;
  opacity: 0.72;
}

.home-reading-panel {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 8px;
}

.home-reading-card {
  min-height: 112px;
  padding: 10px;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
}

.home-reading-card + .home-reading-card {
  border-left: 1px solid rgba(196, 185, 167, 0.42);
  border-top: 0;
  border-radius: 0 14px 14px 0;
}

.home-reading-card .home-action-icon {
  width: 48px;
  height: 48px;
}

.home-reading-card strong {
  font-size: clamp(0.86rem, 2.85vw, 1.03rem);
}

.home-reading-card small {
  font-size: clamp(0.72rem, 2.35vw, 0.86rem);
}

.home-reading-card .menu-chevron {
  display: none;
}

@media (max-width: 560px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-inline: clamp(18px, 9vw, 34px);
  }

  .home-resume-body {
    grid-template-columns: minmax(96px, 0.48fr) minmax(0, 1fr);
    gap: 14px;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 124px);
  }

  .home-primary-action,
  .home-secondary-action {
    min-height: 42px;
    padding-inline: 12px;
  }

  .home-action-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 9px 7px;
    gap: 2px;
  }

  .home-action-card {
    min-height: 104px;
    padding-inline: 4px;
  }

  .home-action-icon,
  .home-reading-card .home-action-icon {
    width: 42px;
    height: 42px;
  }

  .home-action-icon svg,
  .home-reading-card .home-action-icon svg {
    width: 24px;
    height: 24px;
  }

  .home-reading-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-reading-card {
    min-height: 104px;
    padding: 8px;
  }

  .home-reading-card + .home-reading-card {
    border-left: 1px solid rgba(196, 185, 167, 0.42);
    border-top: 0;
  }
}

@media (max-width: 390px) {
  .home-resume-body {
    grid-template-columns: minmax(92px, 0.48fr) minmax(0, 1fr);
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 112px);
  }

  .home-action-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Final home mockup fit layer */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  width: 100% !important;
  max-width: 820px !important;
  padding-block-start: clamp(54px, 7.2vh, 72px) !important;
  padding-inline: clamp(18px, 3.2vw, 28px) !important;
}

.menu-main.home-dashboard {
  gap: clamp(17px, 2.5vh, 25px) !important;
}

.home-wordmark {
  font-size: clamp(2.35rem, 9.6vw, 3.7rem) !important;
}

.home-greeting {
  font-size: clamp(0.92rem, 3.2vw, 1.12rem) !important;
}

.home-subtitle {
  font-size: clamp(0.84rem, 2.9vw, 1rem) !important;
}

.home-section {
  gap: 9px !important;
}

.home-section-label {
  font-size: clamp(0.59rem, 2vw, 0.73rem) !important;
}

.home-resume-card {
  gap: 10px !important;
  padding: clamp(13px, 2.7vw, 18px) !important;
}

.home-resume-body {
  grid-template-columns: minmax(84px, 0.31fr) minmax(0, 1fr) !important;
  gap: clamp(12px, 3vw, 22px) !important;
}

.home-book-cover,
.home-cover-placeholder {
  width: min(100%, 128px) !important;
}

.home-resume-copy {
  gap: clamp(7px, 1.7vw, 11px) !important;
}

.home-resume-copy h3 {
  font-size: clamp(1.42rem, 5.2vw, 2.2rem) !important;
}

.home-resume-copy p {
  font-size: clamp(0.82rem, 2.8vw, 0.98rem) !important;
}

.home-progress-meta {
  font-size: clamp(0.74rem, 2.45vw, 0.88rem) !important;
}

.home-primary-action,
.home-secondary-action {
  min-height: 40px !important;
  padding-inline: 13px !important;
  font-size: clamp(0.84rem, 2.9vw, 0.98rem) !important;
}

.home-progress-book {
  flex-basis: clamp(96px, 19vw, 118px) !important;
  min-height: 162px !important;
}

.home-action-card {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 98px !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.home-action-card:hover,
.home-action-card:focus,
.home-action-card:focus-visible,
.home-action-card:active {
  background: transparent !important;
  box-shadow: none !important;
}

.home-action-icon,
.home-reading-card .home-action-icon {
  width: 40px !important;
  height: 40px !important;
}

.home-action-icon svg,
.home-reading-card .home-action-icon svg {
  width: 23px !important;
  height: 23px !important;
}

.home-action-card strong {
  font-size: clamp(0.76rem, 2.45vw, 0.9rem) !important;
}

.home-action-card small {
  font-size: clamp(0.66rem, 2.1vw, 0.78rem) !important;
}

.home-file-status {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.home-reading-card {
  min-height: 92px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-reading-card strong {
  font-size: clamp(0.8rem, 2.55vw, 0.95rem) !important;
}

.home-reading-card small {
  font-size: clamp(0.66rem, 2.1vw, 0.78rem) !important;
}

@media (max-width: 560px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-inline: max(22px, env(safe-area-inset-left)) !important;
  }

  .home-resume-body {
    grid-template-columns: minmax(86px, 0.35fr) minmax(0, 1fr) !important;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 112px) !important;
  }

  .home-action-card {
    min-height: 94px !important;
  }

  .home-reading-card {
    min-height: 88px !important;
  }
}

@media (max-width: 390px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-inline: max(18px, env(safe-area-inset-left)) !important;
  }

  .home-wordmark {
    font-size: clamp(2.2rem, 9vw, 3.1rem) !important;
  }

  .home-resume-copy h3 {
    font-size: clamp(1.28rem, 5vw, 1.9rem) !important;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 100px) !important;
  }
}

/* Home opacity and quiet rail refinements */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) {
  background: #f7f4ec !important;
  background-color: #f7f4ec !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  isolation: isolate;
}

html.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen),
body.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) {
  background: #171512 !important;
  background-color: #171512 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen)::before,
.input-panel:not(.is-menu-subview):not(.is-settings-screen)::after {
  display: none !important;
}

.home-view-all,
.home-view-all:hover,
.home-view-all:focus,
.home-view-all:focus-visible,
.home-view-all:active,
.home-action-card,
.home-action-card:hover,
.home-action-card:focus,
.home-action-card:focus-visible,
.home-action-card:active {
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  -webkit-tap-highlight-color: transparent;
}

.home-view-all {
  min-height: 24px !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.home-progress-section {
  gap: 7px !important;
}

.home-progress-rail {
  gap: 10px !important;
  margin-inline: 0 !important;
  padding: 0 0 4px !important;
}

.home-progress-book {
  flex-basis: clamp(82px, 17vw, 104px) !important;
  min-height: 128px !important;
  padding: 7px !important;
  gap: 6px !important;
  border-radius: 10px !important;
  background: transparent !important;
  border-color: rgba(196, 185, 167, 0.22) !important;
  box-shadow: none !important;
}

.home-progress-cover {
  border-radius: 4px !important;
  box-shadow: none !important;
}

.home-progress-book-copy {
  gap: 4px !important;
}

.home-progress-book-copy strong {
  min-height: auto !important;
  font-size: 0.74rem !important;
  -webkit-line-clamp: 2;
}

.home-progress-book-copy small {
  font-size: 0.62rem !important;
}

.home-progress-book-copy em {
  font-size: 0.72rem !important;
}

.home-progress-book .home-progress-track {
  height: 3px !important;
}

.home-action-icon,
.home-action-card .home-action-icon {
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
}

.home-action-icon svg,
.home-action-card .home-action-icon svg {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  max-width: 23px !important;
  max-height: 23px !important;
}

html.theme-dark .home-progress-book,
body.theme-dark .home-progress-book {
  background: transparent !important;
  border-color: rgba(225, 212, 190, 0.1) !important;
  box-shadow: none !important;
}

html.theme-dark .home-view-all,
body.theme-dark .home-view-all,
html.theme-dark .home-view-all:hover,
body.theme-dark .home-view-all:hover,
html.theme-dark .home-view-all:focus,
body.theme-dark .home-view-all:focus,
html.theme-dark .home-view-all:active,
body.theme-dark .home-view-all:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Home dashboard edge fit and resume-card proportion pass */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  width: 100% !important;
  max-width: 900px !important;
  padding-inline: clamp(16px, 2.8vw, 26px) !important;
}

.menu-main.home-dashboard {
  gap: clamp(18px, 2.8vh, 30px) !important;
}

.home-hero,
.home-section {
  width: 100% !important;
}

.home-resume-card,
.home-action-panel,
.home-reading-panel,
.home-empty-progress {
  width: 100% !important;
  border-radius: 18px !important;
}

.home-resume-card {
  padding: clamp(17px, 3.2vw, 24px) !important;
  position: relative !important;
}

.home-resume-card > .home-section-label {
  width: max-content !important;
  max-width: 52% !important;
  overflow: visible;
  white-space: nowrap;
  font-size: clamp(0.5rem, 1.5vw, 0.62rem) !important;
  letter-spacing: 0.21em !important;
}

.home-resume-body {
  grid-template-columns: minmax(96px, 0.285fr) minmax(0, 1fr) !important;
  gap: clamp(18px, 4.2vw, 34px) !important;
}

.home-book-cover,
.home-cover-placeholder {
  width: min(100%, 140px) !important;
  aspect-ratio: 0.63 !important;
  border-radius: 6px !important;
}

.home-book-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.home-resume-info-button {
  position: absolute !important;
  top: clamp(12px, 3vw, 18px) !important;
  right: clamp(12px, 3vw, 18px) !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 1px solid rgba(116, 96, 69, 0.14) !important;
  border-radius: 50% !important;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.76), rgba(244, 238, 226, 0.44)) !important;
  color: rgba(80, 73, 64, 0.72) !important;
  box-shadow:
    0 10px 24px rgba(47, 39, 28, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

.home-resume-info-button[hidden] {
  display: none !important;
}

.home-info-symbol {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.home-book-cover.has-image {
  background: transparent !important;
}

html.theme-dark .home-resume-info-button,
body.theme-dark .home-resume-info-button {
  background:
    linear-gradient(180deg, rgba(54, 49, 42, 0.82), rgba(34, 30, 26, 0.68)) !important;
  border-color: rgba(225, 212, 190, 0.14) !important;
  color: rgba(232, 224, 209, 0.72) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.06) !important;
}

html.theme-dark .home-book-cover.has-image,
body.theme-dark .home-book-cover.has-image {
  background: transparent !important;
}

.home-resume-copy h3 {
  font-size: clamp(1.62rem, 5.25vw, 2.7rem) !important;
}

.home-resume-copy p,
.home-progress-meta {
  font-size: clamp(0.84rem, 2.55vw, 1.02rem) !important;
}

.home-progress-section .home-section-head,
.home-action-section .home-section-label,
.home-reading-section .home-section-label {
  padding-inline: 0 !important;
}

.book-details-cover.has-image {
  overflow: hidden !important;
  background: transparent !important;
  box-shadow:
    0 12px 26px rgba(44, 32, 22, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}

.book-details-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  box-shadow: none !important;
}

@media (max-width: 720px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-inline: max(8px, env(safe-area-inset-left)) !important;
  }

  .home-resume-body {
    grid-template-columns: minmax(100px, 0.3fr) minmax(0, 1fr) !important;
    gap: clamp(15px, 4vw, 22px) !important;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 108px) !important;
    aspect-ratio: 0.6 !important;
  }

  .home-resume-card > .home-section-label {
    width: max-content !important;
    max-width: 52% !important;
    font-size: 0.52rem !important;
    letter-spacing: 0.2em !important;
  }
}

@media (max-width: 390px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-inline: max(8px, env(safe-area-inset-left)) !important;
  }

  .home-resume-body {
    grid-template-columns: minmax(86px, 0.28fr) minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 96px) !important;
  }
}

/* Compact home and book-info density pass. */
.menu-main.home-dashboard {
  gap: clamp(14px, 2.1vh, 24px) !important;
}

.home-hero {
  gap: 2px !important;
}

.home-wordmark {
  font-size: clamp(2.4rem, 10.8vw, 4.6rem) !important;
  line-height: 0.94 !important;
}

.home-greeting {
  font-size: clamp(0.98rem, 3.7vw, 1.3rem) !important;
}

.home-subtitle {
  font-size: clamp(0.88rem, 3.35vw, 1.08rem) !important;
}

.home-section {
  gap: 10px !important;
}

.home-section-label {
  font-size: clamp(0.62rem, 2.2vw, 0.78rem) !important;
}

.home-resume-card {
  gap: 11px !important;
  padding: clamp(14px, 2.7vw, 20px) !important;
}

.home-resume-body {
  align-items: center !important;
}

.home-resume-copy {
  gap: clamp(7px, 1.6vw, 11px) !important;
}

.home-resume-copy h3 {
  font-size: clamp(1.46rem, 4.7vw, 2.25rem) !important;
  line-height: 1.02 !important;
}

.home-resume-copy p,
.home-progress-meta {
  font-size: clamp(0.78rem, 2.35vw, 0.96rem) !important;
  line-height: 1.14 !important;
}

.home-resume-progress {
  gap: 5px !important;
  margin-block: 0 2px !important;
}

.home-progress-track {
  height: 3px !important;
}

.home-primary-action,
.home-secondary-action {
  min-height: 42px !important;
  padding-inline: 16px !important;
  font-size: clamp(0.9rem, 3vw, 1.05rem) !important;
}

.home-resume-info-button {
  top: clamp(10px, 2.4vw, 14px) !important;
  right: clamp(10px, 2.4vw, 14px) !important;
  width: 28px !important;
  height: 28px !important;
}

.home-info-symbol {
  width: 15px !important;
  height: 15px !important;
}

.home-progress-rail {
  gap: 12px !important;
}

.home-progress-book {
  flex-basis: clamp(112px, 21vw, 136px) !important;
  min-height: 184px !important;
  padding: 10px !important;
  gap: 8px !important;
}

.home-progress-book-copy {
  gap: 5px !important;
}

.home-progress-book-copy strong {
  font-size: 0.92rem !important;
}

.home-progress-book-copy small {
  font-size: 0.74rem !important;
}

.home-progress-book-copy em {
  font-size: 0.92rem !important;
}

.home-action-panel {
  padding: clamp(12px, 2.8vw, 18px) !important;
}

.home-action-card {
  min-height: 118px !important;
  gap: 6px !important;
  padding: 6px 8px !important;
}

.home-empty-icon,
.home-action-icon,
.home-action-card .home-action-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
}

.home-empty-icon svg,
.home-action-icon svg,
.home-action-card .home-action-icon svg {
  width: 21px !important;
  height: 21px !important;
}

.home-action-card strong {
  font-size: clamp(0.88rem, 2.75vw, 1.02rem) !important;
}

.home-action-card small {
  font-size: clamp(0.72rem, 2.3vw, 0.88rem) !important;
}

.home-reading-panel {
  padding: 9px !important;
}

.home-reading-card {
  min-height: 82px !important;
  padding: 10px !important;
}

.book-details-sheet {
  gap: 12px !important;
  padding-top: clamp(54px, 6.6vh, 72px) !important;
}

.book-details-hero {
  gap: clamp(16px, 3vw, 26px) !important;
  margin-bottom: 6px !important;
}

.book-details-cover {
  width: min(132px, 22vw) !important;
  max-width: 132px !important;
}

.book-details-title-wrap {
  gap: 5px !important;
}

.book-details-title-wrap textarea {
  font-size: clamp(1.55rem, 3.35vw, 2.05rem) !important;
  line-height: 1.03 !important;
}

.book-details-author {
  font-size: clamp(0.92rem, 2.35vw, 1.08rem) !important;
  line-height: 1.12 !important;
}

.book-details-title-wrap .book-details-progress-card {
  margin-top: 5px !important;
}

.book-details-progress-card {
  gap: 8px !important;
}

.book-details-progress-head strong {
  font-size: 0.9rem !important;
}

.book-details-progress-line {
  height: 3px !important;
}

.book-details-resume-actions {
  gap: 8px !important;
  margin-top: 3px !important;
}

.book-details-resume-actions button {
  min-height: 38px !important;
  border-radius: 14px !important;
  font-size: clamp(0.82rem, 2.45vw, 0.94rem) !important;
}

.book-details-meta {
  min-height: 72px !important;
}

.book-details-meta div {
  min-height: 64px !important;
  padding: 10px 8px !important;
}

.book-details-stat-icon {
  width: 18px !important;
  height: 18px !important;
  margin-bottom: 3px !important;
}

.book-details-meta dd {
  font-size: clamp(0.95rem, 2.75vw, 1.18rem) !important;
  line-height: 1.05 !important;
}

.book-details-meta dt {
  font-size: 0.72rem !important;
  line-height: 1.08 !important;
}

.book-details-quote-card {
  min-height: 150px !important;
  padding: 20px 22px 46px !important;
  border-radius: 16px !important;
}

.book-details-quote-card blockquote {
  max-width: min(74%, 520px) !important;
  padding-top: 0 !important;
}

.book-details-quote-card blockquote p,
.book-details-quote-empty p {
  font-size: clamp(1.04rem, 3.2vw, 1.32rem) !important;
  line-height: 1.25 !important;
}

.book-details-quote-card blockquote small {
  margin-top: 8px !important;
  font-size: clamp(0.86rem, 2.45vw, 1rem) !important;
}

.book-details-quote-motif {
  right: -10px !important;
  bottom: -28px !important;
  width: min(72%, 340px) !important;
}

.book-details-source-card {
  margin-top: 4px !important;
  padding: 8px 18px 10px !important;
  border-radius: 16px !important;
}

.book-details-source-list div {
  min-height: 36px !important;
  padding: 8px 0 !important;
}

.book-details-source-list dt,
.book-details-source-list dd {
  font-size: clamp(0.86rem, 2.45vw, 1rem) !important;
  line-height: 1.12 !important;
}

.book-details-insights-card {
  padding: 16px !important;
  border-radius: 16px !important;
}

.book-details-insights-head h3 {
  font-size: clamp(1.35rem, 4vw, 1.7rem) !important;
}

.book-details-insight-grid {
  gap: 8px !important;
}

.book-details-insight-tile {
  min-height: 92px !important;
  padding: 12px !important;
}

.book-details-week-strip {
  margin-top: 10px !important;
  padding: 12px !important;
}

@media (max-width: 720px) {
  .home-resume-body {
    grid-template-columns: minmax(96px, 0.29fr) minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: min(100%, 102px) !important;
    aspect-ratio: 0.61 !important;
  }

  .home-resume-card > .home-section-label {
    font-size: 0.48rem !important;
  }

  .home-action-card {
    min-height: 110px !important;
  }

  .book-details-sheet {
    gap: 11px !important;
    padding-top: clamp(56px, 6.8vh, 74px) !important;
  }

  .book-details-hero {
    grid-template-columns: minmax(92px, 27vw) minmax(0, 1fr) !important;
    gap: 13px !important;
    margin-bottom: 4px !important;
  }

  .book-details-cover {
    width: min(110px, 27vw) !important;
    min-width: 92px !important;
    max-width: 110px !important;
  }

  .book-details-title-wrap textarea {
    font-size: clamp(1.28rem, 5.1vw, 1.72rem) !important;
  }

  .book-details-author {
    font-size: clamp(0.9rem, 3.35vw, 1.02rem) !important;
  }

  .book-details-resume-actions button {
    min-height: 36px !important;
    font-size: clamp(0.78rem, 3vw, 0.88rem) !important;
  }

  .book-details-meta {
    min-height: 66px !important;
  }

  .book-details-meta div {
    min-height: 60px !important;
    padding: 9px 5px !important;
  }

  .book-details-stat-icon {
    width: 16px !important;
    height: 16px !important;
  }

  .book-details-meta dd {
    font-size: clamp(0.86rem, 3.2vw, 1.04rem) !important;
  }

  .book-details-meta dt {
    font-size: 0.66rem !important;
  }

  .book-details-quote-card {
    min-height: 142px !important;
    padding: 18px 18px 42px !important;
  }

  .book-details-quote-card blockquote p,
  .book-details-quote-empty p {
    font-size: clamp(1rem, 3.8vw, 1.18rem) !important;
  }

  .book-details-source-card {
    padding: 6px 16px 8px !important;
  }

  .book-details-source-list div {
    min-height: 34px !important;
    padding: 7px 0 !important;
  }
}

@media (max-width: 390px) {
  .home-resume-body {
    grid-template-columns: 88px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  .home-book-cover,
  .home-cover-placeholder {
    width: 88px !important;
  }

  .home-primary-action,
  .home-secondary-action {
    min-height: 40px !important;
  }

  .book-details-hero {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  .book-details-cover {
    width: 84px !important;
    min-width: 84px !important;
    max-width: 84px !important;
  }

  .book-details-title-wrap textarea {
    font-size: clamp(1.16rem, 5vw, 1.48rem) !important;
  }
}

/* Cover integrity pass: keep jackets fully visible and let each wrapper match the artwork ratio. */
.home-resume-card > .home-section-label {
  font-size: clamp(0.58rem, 1.8vw, 0.72rem) !important;
  letter-spacing: 0.22em !important;
}

.collection-cover.has-image,
.library-feature-cover.has-image,
.gutenberg-cover.has-image,
.chapter-book-cover.has-image,
.book-details-cover.has-image,
.home-book-cover.has-image,
.home-progress-cover.has-image {
  aspect-ratio: var(--cover-aspect-ratio, 0.68) !important;
  height: auto !important;
  overflow: hidden !important;
  background: transparent !important;
}

.collection-cover.has-image img,
.library-feature-cover.has-image img,
.gutenberg-cover.has-image img,
.chapter-book-cover.has-image img,
.book-details-cover.has-image img,
.home-book-cover.has-image img,
.home-progress-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: inherit !important;
}

.home-progress-cover.has-image {
  align-self: start !important;
  box-shadow: none !important;
}

.home-book-cover.has-image,
.book-details-cover.has-image {
  box-shadow:
    0 12px 26px rgba(44, 32, 22, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
}

@media (max-width: 720px) {
  .home-resume-card > .home-section-label {
    font-size: 0.58rem !important;
  }
}

@media (max-width: 390px) {
  .home-resume-card > .home-section-label {
    font-size: 0.56rem !important;
  }
}

/* Add-content equal sizing pass. */
.home-action-panel {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

.home-action-card {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 118px !important;
  min-height: 118px !important;
  max-height: 118px !important;
  display: grid !important;
  grid-template-rows: 42px minmax(2.2em, auto) minmax(2.7em, auto) !important;
  align-content: start !important;
  align-items: start !important;
  justify-items: center !important;
  row-gap: 7px !important;
  padding: 8px 7px !important;
  text-align: center !important;
}

.home-action-card .home-action-icon {
  align-self: start !important;
  justify-self: center !important;
  margin: 0 auto !important;
  display: grid !important;
  place-items: center !important;
}

.home-action-card strong,
.home-action-card small {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.home-action-card strong {
  align-self: start !important;
  min-height: 2.16em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.home-action-card small {
  align-self: start !important;
  min-height: 2.7em !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

.home-action-card .home-file-status {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
}

@media (max-width: 720px) {
  .home-action-card {
    height: 114px !important;
    min-height: 114px !important;
    max-height: 114px !important;
    grid-template-rows: 40px minmax(2.15em, auto) minmax(2.65em, auto) !important;
    row-gap: 6px !important;
    padding: 7px 5px !important;
  }
}

/* Add-content mockup alignment: larger controls, centered icons, one-line titles. */
#homeAddContentLabel {
  white-space: nowrap !important;
}

.home-action-panel {
  padding: clamp(18px, 4vw, 28px) clamp(14px, 3.4vw, 22px) !important;
}

.home-action-card {
  height: 148px !important;
  min-height: 148px !important;
  max-height: 148px !important;
  grid-template-rows: 58px 1.25em minmax(3.2em, auto) !important;
  row-gap: 8px !important;
  padding: 8px 5px 10px !important;
}

.home-action-card .home-action-icon {
  width: 54px !important;
  height: 54px !important;
  min-width: 54px !important;
  min-height: 54px !important;
  max-width: 54px !important;
  max-height: 54px !important;
  align-self: center !important;
}

.home-action-card .home-action-icon svg {
  width: 29px !important;
  height: 29px !important;
  max-width: 29px !important;
  max-height: 29px !important;
}

.home-action-card strong {
  min-height: 1.25em !important;
  display: block !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-size: clamp(0.72rem, 2.25vw, 0.98rem) !important;
  line-height: 1.08 !important;
}

.home-action-card small {
  min-height: 3.2em !important;
  display: block !important;
  font-size: clamp(0.7rem, 2.28vw, 0.88rem) !important;
  line-height: 1.16 !important;
}

@media (max-width: 720px) {
  .home-action-panel {
    padding: clamp(16px, 3.8vw, 22px) clamp(10px, 2.8vw, 16px) !important;
  }

  .home-action-card {
    height: 142px !important;
    min-height: 142px !important;
    max-height: 142px !important;
    grid-template-rows: 54px 1.22em minmax(3.25em, auto) !important;
    row-gap: 7px !important;
  }

  .home-action-card .home-action-icon {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
  }

  .home-action-card .home-action-icon svg {
    width: 27px !important;
    height: 27px !important;
    max-width: 27px !important;
    max-height: 27px !important;
  }

  .home-action-card strong {
    font-size: clamp(0.68rem, 2.45vw, 0.82rem) !important;
  }

  .home-action-card small {
    font-size: clamp(0.66rem, 2.34vw, 0.78rem) !important;
  }
}

@media (max-width: 390px) {
  .home-action-card {
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
  }

  .home-action-card strong {
    font-size: 0.64rem !important;
  }

  .home-action-card small {
    font-size: 0.62rem !important;
  }
}

/* Uniform jacket slots: same tall shape, full cover visible by stretching into the frame. */
.home-book-cover.has-image,
.home-progress-cover.has-image,
.collection-cover.has-image,
.library-feature-cover.has-image,
.gutenberg-cover.has-image,
.chapter-book-cover.has-image,
.book-details-cover.has-image {
  aspect-ratio: 0.64 !important;
  height: auto !important;
}

.home-book-cover.has-image img,
.home-progress-cover.has-image img,
.collection-cover.has-image img,
.library-feature-cover.has-image img,
.gutenberg-cover.has-image img,
.chapter-book-cover.has-image img,
.book-details-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
}

.home-progress-cover.has-image,
.collection-cover.has-image,
.library-feature-cover.has-image {
  border-radius: 5px !important;
}

.home-book-cover.has-image,
.book-details-cover.has-image {
  border-radius: 6px !important;
}

/* Larger add-content controls with more separation between labels. */
.home-action-panel {
  column-gap: clamp(8px, 2.4vw, 18px) !important;
  padding: clamp(20px, 4.5vw, 30px) clamp(16px, 3.8vw, 26px) !important;
}

.home-action-card {
  height: 164px !important;
  min-height: 164px !important;
  max-height: 164px !important;
  grid-template-rows: 66px 1.24em minmax(3.35em, auto) !important;
  row-gap: 10px !important;
  padding: 9px 4px 12px !important;
}

.home-action-card .home-action-icon {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
}

.home-action-card .home-action-icon svg {
  width: 35px !important;
  height: 35px !important;
  max-width: 35px !important;
  max-height: 35px !important;
}

.home-action-card strong {
  white-space: nowrap !important;
  font-size: clamp(0.62rem, 2.05vw, 0.9rem) !important;
  line-height: 1.08 !important;
}

.home-action-card small {
  font-size: clamp(0.66rem, 2.18vw, 0.84rem) !important;
  line-height: 1.16 !important;
}

@media (max-width: 720px) {
  .home-action-panel {
    column-gap: clamp(7px, 2.1vw, 12px) !important;
    padding: clamp(18px, 4.2vw, 24px) clamp(12px, 3.1vw, 18px) !important;
  }

  .home-action-card {
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
    grid-template-rows: 62px 1.2em minmax(3.35em, auto) !important;
    row-gap: 9px !important;
  }

  .home-action-card .home-action-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    min-height: 60px !important;
    max-width: 60px !important;
    max-height: 60px !important;
  }

  .home-action-card .home-action-icon svg {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }

  .home-action-card strong {
    font-size: clamp(0.58rem, 2.05vw, 0.72rem) !important;
  }
}

@media (max-width: 390px) {
  .home-action-panel {
    column-gap: 6px !important;
    padding-inline: 10px !important;
  }

  .home-action-card {
    height: 150px !important;
    min-height: 150px !important;
    max-height: 150px !important;
  }

  .home-action-card .home-action-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
  }

  .home-action-card .home-action-icon svg {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
  }

  .home-action-card strong {
    font-size: 0.56rem !important;
  }

  .home-action-card small {
    font-size: 0.6rem !important;
  }
}

/* Home action polish: match the calmer mockup proportions after earlier overrides. */
.home-primary-action,
.home-secondary-action {
  position: relative !important;
  justify-content: center !important;
  padding-inline: 42px !important;
}

.home-primary-action .home-action-symbol,
.home-secondary-action .home-action-symbol {
  position: absolute !important;
  right: clamp(18px, 4.2vw, 30px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
}

.home-action-panel {
  column-gap: clamp(12px, 3.2vw, 24px) !important;
  padding: clamp(18px, 3.9vw, 24px) clamp(18px, 4.4vw, 30px) !important;
}

.home-action-card {
  height: 142px !important;
  min-height: 142px !important;
  max-height: 142px !important;
  grid-template-rows: 58px 1.2em minmax(3em, auto) !important;
  row-gap: 8px !important;
  padding: 6px 2px 8px !important;
}

.home-action-card .home-action-icon {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
}

.home-action-card .home-action-icon svg {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
}

.home-action-card strong {
  font-size: clamp(0.62rem, 1.78vw, 0.86rem) !important;
  white-space: nowrap !important;
}

.home-action-card small {
  max-width: 9em !important;
  margin-inline: auto !important;
  font-size: clamp(0.66rem, 2.02vw, 0.82rem) !important;
}

.home-reading-panel {
  padding: 10px !important;
}

.home-reading-card {
  min-height: 86px !important;
  grid-template-columns: 56px minmax(0, 1fr) 12px !important;
  justify-items: stretch !important;
  align-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  text-align: left !important;
}

.home-reading-card .home-action-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  justify-self: start !important;
  margin: 0 !important;
}

.home-reading-card .home-action-icon svg {
  width: 26px !important;
  height: 26px !important;
}

.home-reading-card > span:not(.home-action-icon):not(.menu-chevron) {
  min-width: 0 !important;
}

.home-reading-card strong,
.home-reading-card small {
  text-align: left !important;
}

.home-reading-card .menu-chevron {
  display: block !important;
  justify-self: end !important;
}

@media (max-width: 720px) {
  .home-action-panel {
    column-gap: clamp(9px, 2.7vw, 16px) !important;
    padding-inline: clamp(14px, 3.7vw, 22px) !important;
  }

  .home-action-card {
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
    grid-template-rows: 54px 1.15em minmax(3em, auto) !important;
    row-gap: 7px !important;
  }

  .home-action-card .home-action-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
    max-height: 52px !important;
  }

  .home-action-card .home-action-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  .home-action-card strong {
    font-size: clamp(0.58rem, 1.88vw, 0.72rem) !important;
  }

  .home-action-card small {
    font-size: clamp(0.62rem, 2vw, 0.74rem) !important;
  }

  .home-reading-card {
    grid-template-columns: 48px minmax(0, 1fr) 10px !important;
    gap: 10px !important;
    padding: 10px 12px !important;
  }
}

@media (max-width: 390px) {
  .home-action-panel {
    column-gap: 8px !important;
    padding-inline: 12px !important;
  }

  .home-action-card {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
  }

  .home-action-card strong {
    font-size: 0.53rem !important;
  }
}

/* Home screen v2: image-led discovery, lighter add actions, and quicker scan density. */
.input-panel.is-open:not(.is-menu-subview):not(.is-settings-screen) {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.86) 0 18rem, transparent 32rem),
    linear-gradient(180deg, #faf6ee 0%, #f5efe5 52%, #f0e9dc 100%) !important;
}

html.theme-dark .input-panel.is-open:not(.is-menu-subview):not(.is-settings-screen),
body.theme-dark .input-panel.is-open:not(.is-menu-subview):not(.is-settings-screen) {
  background:
    radial-gradient(circle at 16% 0%, rgba(91, 76, 54, 0.22) 0 18rem, transparent 32rem),
    linear-gradient(180deg, #15130f 0%, #11100d 54%, #0f0e0c 100%) !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-close {
  display: none !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  --home-page-gutter: clamp(14px, 3.7vw, 34px);
  width: 100% !important;
  max-width: 940px !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding:
    clamp(22px, 4vh, 42px)
    var(--home-page-gutter)
    max(34px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-dashboard {
  gap: clamp(19px, 3.3vw, 30px) !important;
  color: #181713 !important;
}

html.theme-dark .home-dashboard,
body.theme-dark .home-dashboard {
  color: #f4ece0 !important;
}

.home-hero {
  margin: 0 !important;
  padding: 0 !important;
}

.home-wordmark {
  margin: 0 !important;
  color: #1d1b17 !important;
  font-size: clamp(3.1rem, 11vw, 5.6rem) !important;
  line-height: 0.88 !important;
}

.home-wordmark .brand-red-letter:last-child {
  color: #fffaf2 !important;
}

html.theme-dark .home-wordmark,
body.theme-dark .home-wordmark {
  color: #f5efe5 !important;
}

.home-greeting {
  margin-top: 0.44rem !important;
  color: rgba(42, 39, 34, 0.78) !important;
  font-size: clamp(1.05rem, 3.5vw, 1.65rem) !important;
  line-height: 1.15 !important;
}

.home-subtitle {
  margin-top: 0.14rem !important;
  color: rgba(42, 39, 34, 0.66) !important;
  font-size: clamp(0.96rem, 3vw, 1.35rem) !important;
  line-height: 1.2 !important;
}

html.theme-dark .home-greeting,
body.theme-dark .home-greeting {
  color: rgba(244, 236, 224, 0.78) !important;
}

html.theme-dark .home-subtitle,
body.theme-dark .home-subtitle {
  color: rgba(244, 236, 224, 0.62) !important;
}

.home-section {
  margin: 0 !important;
}

.home-section-label {
  margin: 0 0 0.72rem !important;
  color: rgba(50, 46, 40, 0.62) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.69rem, 2.25vw, 0.9rem) !important;
  font-weight: 800 !important;
  letter-spacing: 0.26em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

html.theme-dark .home-section-label,
body.theme-dark .home-section-label {
  color: rgba(244, 236, 224, 0.58) !important;
}

.home-section-head {
  margin-bottom: 0.72rem !important;
  align-items: center !important;
}

.home-section-head .home-section-label {
  margin: 0 !important;
}

.home-view-all {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(42, 39, 34, 0.72) !important;
  box-shadow: none !important;
  font-size: clamp(0.93rem, 3vw, 1.18rem) !important;
}

html.theme-dark .home-view-all,
body.theme-dark .home-view-all {
  color: rgba(244, 236, 224, 0.68) !important;
}

.home-resume-card,
.home-action-panel,
.home-reading-panel,
.home-discover-card,
.home-progress-book {
  border: 1px solid rgba(90, 74, 55, 0.14) !important;
  background: rgba(255, 252, 246, 0.8) !important;
  box-shadow: 0 20px 52px rgba(95, 77, 53, 0.11) !important;
}

html.theme-dark .home-resume-card,
body.theme-dark .home-resume-card,
html.theme-dark .home-action-panel,
body.theme-dark .home-action-panel,
html.theme-dark .home-reading-panel,
body.theme-dark .home-reading-panel,
html.theme-dark .home-discover-card,
body.theme-dark .home-discover-card,
html.theme-dark .home-progress-book,
body.theme-dark .home-progress-book {
  border-color: rgba(246, 238, 224, 0.14) !important;
  background: rgba(33, 30, 25, 0.82) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26) !important;
}

.home-resume-card {
  position: relative !important;
  border-radius: 18px !important;
  padding: clamp(18px, 4.2vw, 28px) !important;
  overflow: hidden !important;
}

.home-resume-card > .home-section-label {
  width: max-content !important;
  max-width: none !important;
  margin-bottom: clamp(14px, 3vw, 22px) !important;
  white-space: nowrap !important;
  letter-spacing: 0.24em !important;
}

.home-resume-info-button {
  top: clamp(14px, 3vw, 20px) !important;
  right: clamp(14px, 3vw, 20px) !important;
  width: 34px !important;
  height: 34px !important;
  background: rgba(255, 252, 246, 0.76) !important;
  color: rgba(50, 46, 40, 0.66) !important;
}

html.theme-dark .home-resume-info-button,
body.theme-dark .home-resume-info-button {
  background: rgba(255, 250, 239, 0.08) !important;
  color: rgba(244, 236, 224, 0.72) !important;
}

.home-resume-body {
  grid-template-columns: minmax(104px, 0.36fr) minmax(0, 1fr) !important;
  align-items: end !important;
  gap: clamp(18px, 4.2vw, 34px) !important;
}

.home-book-cover,
.home-book-cover.has-image {
  width: min(100%, clamp(118px, 25vw, 174px)) !important;
  aspect-ratio: 0.64 !important;
  min-height: 0 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}

.home-book-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  display: block !important;
}

.home-resume-copy {
  gap: clamp(8px, 1.7vw, 13px) !important;
  align-self: end !important;
}

.home-resume-copy h3 {
  max-width: 10em !important;
  color: #171612 !important;
  font-size: clamp(2rem, 6.6vw, 3.65rem) !important;
  line-height: 0.96 !important;
  letter-spacing: 0 !important;
}

html.theme-dark .home-resume-copy h3,
body.theme-dark .home-resume-copy h3 {
  color: #f6eee2 !important;
}

.home-resume-copy p {
  color: rgba(44, 40, 35, 0.66) !important;
  font-size: clamp(0.98rem, 3vw, 1.34rem) !important;
  line-height: 1.25 !important;
}

html.theme-dark .home-resume-copy p,
body.theme-dark .home-resume-copy p {
  color: rgba(244, 236, 224, 0.64) !important;
}

.home-resume-progress {
  gap: 0.45rem !important;
  margin: 0.1rem 0 0.12rem !important;
}

.home-progress-track {
  height: 5px !important;
  background: rgba(100, 88, 70, 0.22) !important;
}

.home-progress-track > span,
.home-progress-track span {
  background: #c8423d !important;
}

html.theme-dark .home-progress-track,
body.theme-dark .home-progress-track {
  background: rgba(244, 236, 224, 0.18) !important;
}

.home-progress-meta {
  color: rgba(43, 39, 34, 0.68) !important;
  font-size: clamp(0.9rem, 2.7vw, 1.12rem) !important;
}

html.theme-dark .home-progress-meta,
body.theme-dark .home-progress-meta {
  color: rgba(244, 236, 224, 0.66) !important;
}

.home-primary-action,
.home-secondary-action {
  min-height: 48px !important;
  height: clamp(48px, 8.6vw, 62px) !important;
  border-radius: 999px !important;
  padding-inline: clamp(22px, 5vw, 42px) clamp(52px, 9vw, 76px) !important;
  justify-content: center !important;
  font-size: clamp(1rem, 3vw, 1.24rem) !important;
}

.home-primary-action {
  background: linear-gradient(180deg, #d84640 0%, #ba332f 100%) !important;
  color: #fffaf2 !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.28), 0 14px 28px rgba(179, 52, 47, 0.18) !important;
}

.home-secondary-action {
  border-color: rgba(89, 76, 58, 0.16) !important;
  background: rgba(255, 252, 246, 0.76) !important;
  color: #181713 !important;
}

html.theme-dark .home-secondary-action,
body.theme-dark .home-secondary-action {
  border-color: rgba(246, 238, 224, 0.15) !important;
  background: rgba(255, 250, 239, 0.06) !important;
  color: #f4ece0 !important;
}

.home-primary-action .home-action-symbol,
.home-secondary-action .home-action-symbol {
  right: clamp(22px, 5.4vw, 34px) !important;
  width: 1.15em !important;
  height: 1.15em !important;
}

.home-progress-rail {
  gap: clamp(16px, 3.8vw, 26px) !important;
  padding: 2px clamp(22px, 6vw, 54px) 8px 0 !important;
  margin-inline: 0 !important;
  margin-right: calc(-1 * var(--home-page-gutter, clamp(14px, 3.7vw, 34px))) !important;
  scroll-padding-inline: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x proximity !important;
  touch-action: pan-x !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.home-progress-book {
  flex: 0 0 clamp(138px, 31vw, 176px) !important;
  min-height: clamp(184px, 37vw, 232px) !important;
  max-height: clamp(184px, 37vw, 232px) !important;
  display: grid !important;
  grid-template-rows: minmax(110px, 1fr) auto !important;
  gap: clamp(8px, 1.8vw, 12px) !important;
  border-radius: 13px !important;
  padding: clamp(9px, 2.2vw, 13px) !important;
  overflow: hidden !important;
  scroll-snap-align: start !important;
  touch-action: pan-x !important;
  transform: none !important;
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast) !important;
  text-align: left !important;
}

.home-progress-book:active {
  transform: none !important;
}

.home-progress-book * {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.home-progress-cover,
.home-progress-cover.has-image {
  width: 100% !important;
  max-width: none !important;
  height: clamp(118px, 24vw, 150px) !important;
  aspect-ratio: auto !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background: rgba(255, 252, 246, 0.72) !important;
}

.home-progress-cover.has-title-fallback {
  display: grid !important;
  place-items: center !important;
  padding: 0.72rem !important;
  color: #a94844 !important;
  font-family: var(--serif-font) !important;
  font-size: clamp(1.45rem, 4.5vw, 2rem) !important;
  font-weight: 600 !important;
  line-height: 0.96 !important;
  text-align: center !important;
}

.home-progress-cover.has-title-fallback span {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
}

html.theme-dark .home-progress-cover.has-title-fallback,
body.theme-dark .home-progress-cover.has-title-fallback {
  color: #d1746c !important;
}

.home-progress-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  display: block !important;
}

.home-progress-book-copy {
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  gap: 0.3rem !important;
  min-height: 0 !important;
}

.home-progress-book-copy strong {
  color: #181713 !important;
  font-size: clamp(1.08rem, 3.2vw, 1.28rem) !important;
  line-height: 1.02 !important;
  min-height: 2.08em !important;
  -webkit-line-clamp: 2 !important;
}

html.theme-dark .home-progress-book-copy strong,
body.theme-dark .home-progress-book-copy strong {
  color: #f6eee2 !important;
}

.home-progress-book-copy small {
  color: rgba(44, 40, 35, 0.58) !important;
  font-size: clamp(0.78rem, 2.25vw, 0.9rem) !important;
  line-height: 1.05 !important;
}

html.theme-dark .home-progress-book-copy small,
body.theme-dark .home-progress-book-copy small {
  color: rgba(244, 236, 224, 0.58) !important;
}

.home-progress-book-copy em {
  color: rgba(44, 40, 35, 0.72) !important;
  font-size: clamp(1.02rem, 3.05vw, 1.2rem) !important;
  line-height: 1 !important;
}

html.theme-dark .home-progress-book-copy em,
body.theme-dark .home-progress-book-copy em {
  color: rgba(244, 236, 224, 0.66) !important;
}

.home-progress-book .home-progress-track {
  width: 100% !important;
  height: 4px !important;
  margin: 0.1rem 0 0.05rem !important;
}

.home-add-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  min-height: 112px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.home-add-panel .home-action-card {
  display: grid !important;
  grid-template-columns: clamp(54px, 11vw, 76px) minmax(0, 1fr) 14px !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: clamp(12px, 3.1vw, 22px) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 112px !important;
  max-height: none !important;
  padding: clamp(16px, 3.7vw, 24px) clamp(15px, 3.4vw, 24px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

.home-add-panel .home-action-card + .home-action-card {
  border-left: 1px solid rgba(90, 74, 55, 0.14) !important;
}

html.theme-dark .home-add-panel .home-action-card + .home-action-card,
body.theme-dark .home-add-panel .home-action-card + .home-action-card {
  border-left-color: rgba(246, 238, 224, 0.13) !important;
}

.home-add-panel .home-action-icon,
.home-reading-card .home-action-icon {
  display: grid !important;
  place-items: center !important;
  width: clamp(54px, 11vw, 72px) !important;
  height: clamp(54px, 11vw, 72px) !important;
  min-width: clamp(54px, 11vw, 72px) !important;
  min-height: clamp(54px, 11vw, 72px) !important;
  max-width: clamp(54px, 11vw, 72px) !important;
  max-height: clamp(54px, 11vw, 72px) !important;
  margin: 0 !important;
  justify-self: center !important;
}

.home-add-panel .home-action-icon svg,
.home-reading-card .home-action-icon svg {
  width: clamp(26px, 5.6vw, 34px) !important;
  height: clamp(26px, 5.6vw, 34px) !important;
}

.home-action-copy {
  display: grid !important;
  gap: 0.28rem !important;
  min-width: 0 !important;
}

.home-add-panel .home-action-card strong,
.home-add-panel .home-action-card small {
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  white-space: normal !important;
}

.home-add-panel .home-action-card strong {
  color: #181713 !important;
  font-family: var(--serif-font) !important;
  font-size: clamp(1rem, 3.1vw, 1.25rem) !important;
  line-height: 1.05 !important;
  font-weight: 600 !important;
}

.home-add-panel .home-action-card small {
  color: rgba(44, 40, 35, 0.62) !important;
  font-family: var(--serif-font) !important;
  font-size: clamp(0.82rem, 2.5vw, 1rem) !important;
  line-height: 1.22 !important;
}

html.theme-dark .home-add-panel .home-action-card strong,
body.theme-dark .home-add-panel .home-action-card strong {
  color: #f6eee2 !important;
}

html.theme-dark .home-add-panel .home-action-card small,
body.theme-dark .home-add-panel .home-action-card small {
  color: rgba(244, 236, 224, 0.6) !important;
}

.home-add-panel .menu-chevron,
.home-reading-card .menu-chevron {
  display: block !important;
  justify-self: end !important;
}

.home-file-status {
  grid-column: 1 / -1 !important;
  margin: -0.35rem 0 0 !important;
  text-align: left !important;
}

.home-reading-panel {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  min-height: 112px !important;
  padding: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.home-reading-card {
  display: grid !important;
  grid-template-columns: clamp(54px, 11vw, 76px) minmax(0, 1fr) 14px !important;
  align-items: center !important;
  gap: clamp(12px, 3.1vw, 22px) !important;
  min-height: 112px !important;
  padding: clamp(16px, 3.7vw, 24px) clamp(15px, 3.4vw, 24px) !important;
  border-radius: 0 !important;
  text-align: left !important;
}

.home-reading-card + .home-reading-card {
  border-left: 1px solid rgba(90, 74, 55, 0.14) !important;
}

html.theme-dark .home-reading-card + .home-reading-card,
body.theme-dark .home-reading-card + .home-reading-card {
  border-left-color: rgba(246, 238, 224, 0.13) !important;
}

.home-reading-card strong,
.home-reading-card small {
  text-align: left !important;
}

.home-reading-card strong {
  color: #181713 !important;
  font-family: var(--serif-font) !important;
  font-size: clamp(1rem, 3vw, 1.22rem) !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;
}

.home-reading-card small {
  color: rgba(44, 40, 35, 0.62) !important;
  font-family: var(--serif-font) !important;
  font-size: clamp(0.8rem, 2.45vw, 0.98rem) !important;
  line-height: 1.24 !important;
}

html.theme-dark .home-reading-card strong,
body.theme-dark .home-reading-card strong {
  color: #f6eee2 !important;
}

html.theme-dark .home-reading-card small,
body.theme-dark .home-reading-card small {
  color: rgba(244, 236, 224, 0.6) !important;
}

@media (max-width: 620px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    --home-page-gutter: clamp(12px, 3.8vw, 18px);
    padding-inline: var(--home-page-gutter) !important;
  }

  .home-resume-card {
    padding: 18px !important;
  }

  .home-resume-info-button {
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
  }

  .home-resume-body {
    grid-template-columns: minmax(118px, 0.84fr) minmax(0, 1.16fr) !important;
    gap: 18px !important;
  }

  .home-book-cover,
  .home-book-cover.has-image {
    width: min(100%, 138px) !important;
  }

  .home-resume-copy h3 {
    max-width: 10.5em !important;
    font-size: clamp(1.5rem, 5.5vw, 2rem) !important;
    line-height: 0.98 !important;
  }

  .home-resume-progress {
    gap: 0.4rem !important;
  }

  .home-progress-meta {
    font-size: clamp(0.82rem, 2.7vw, 0.96rem) !important;
    line-height: 1.02 !important;
  }

  .home-primary-action,
  .home-secondary-action {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 0.94rem !important;
  }

  .home-resume-card.has-book {
    padding: 17px !important;
  }

  .home-resume-card.has-book > .home-section-label {
    margin-bottom: 10px !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: minmax(114px, 0.78fr) minmax(0, 1.22fr) !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image {
    width: min(100%, 128px) !important;
  }

  .home-resume-card.has-book .home-resume-copy {
    gap: 7px !important;
    align-self: center !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    max-width: 11.5em !important;
    font-size: clamp(1.42rem, 5vw, 1.84rem) !important;
    line-height: 0.96 !important;
  }

  .home-resume-card.has-book .home-progress-track {
    height: 4px !important;
  }

  .home-resume-card.has-book .home-progress-meta {
    font-size: clamp(0.8rem, 2.6vw, 0.92rem) !important;
  }

  .home-resume-card.has-book .home-primary-action,
  .home-resume-card.has-book .home-secondary-action {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 0.86rem !important;
  }

  .home-progress-book {
    flex-basis: clamp(142px, 36vw, 166px) !important;
    min-height: 236px !important;
    max-height: 236px !important;
    grid-template-rows: 158px 1fr !important;
    gap: 9px !important;
    padding: 10px !important;
  }

  .home-progress-cover,
  .home-progress-cover.has-image {
    height: 158px !important;
  }

  .home-progress-book-copy strong {
    font-size: clamp(1.04rem, 3.4vw, 1.22rem) !important;
    line-height: 1.02 !important;
    min-height: 2.08em !important;
  }

  .home-progress-book-copy small {
    font-size: 0.8rem !important;
  }

  .home-progress-book-copy em {
    font-size: 1rem !important;
  }

  .home-add-panel,
  .home-reading-panel {
    min-height: 102px !important;
  }

  .home-add-panel .home-action-card,
  .home-reading-card {
    grid-template-columns: 48px minmax(0, 1fr) 10px !important;
    min-height: 102px !important;
    gap: 10px !important;
    padding: 13px 12px !important;
  }

  .home-add-panel .home-action-icon,
  .home-reading-card .home-action-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }

  .home-add-panel .home-action-icon svg,
  .home-reading-card .home-action-icon svg {
    width: 25px !important;
    height: 25px !important;
  }
}

/* Research catalogue — authentic, image-led paper browsing. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial {
  --research-accent: #805982;
  --research-accent-soft: rgba(128, 89, 130, 0.12);
  --research-gold: #a67937;
  gap: 13px !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial {
  --research-accent: #b696c2;
  --research-accent-soft: rgba(182, 150, 194, 0.13);
  --research-gold: #d4a448;
}

.discover-research-editorial-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  min-height: 77px;
  padding: 8px 1px 3px;
}

.discover-research-editorial-head > div {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.discover-research-editorial-head p,
.discover-research-shelf > h2,
.discover-research-feature-copy > small,
.discover-research-landmark > span > small {
  margin: 0;
  color: var(--research-accent);
  font-family: var(--ui-font);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 740;
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
}

.discover-research-editorial-head h1 {
  margin: 0;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(2.12rem, 7vw, 3.65rem);
  font-weight: 480;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.discover-research-editorial-head h1 span {
  color: var(--discover-coral);
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial .discover-research-sort {
  flex: 0 0 auto;
  min-width: 106px !important;
  color: var(--research-accent) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial .discover-research-sort select {
  color: var(--research-accent) !important;
  font-size: 0.7rem !important;
  font-weight: 680 !important;
  text-align: right;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-source-rail {
  padding-top: 0 !important;
  border-bottom: 1px solid var(--discover-line);
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-source-rail button:is(.is-active, .discover-live-source-menu) {
  border-bottom-color: var(--research-accent) !important;
  color: var(--research-accent) !important;
}

.discover-research-feature {
  display: grid;
  grid-template-columns: minmax(128px, 0.88fr) minmax(0, 1.12fr);
  align-items: stretch;
  gap: clamp(16px, 4vw, 28px);
  width: 100%;
  min-height: 250px;
  padding: 9px 0 18px;
  border: 0;
  border-bottom: 1px solid var(--discover-line);
  border-radius: 0;
  background: transparent;
  color: var(--discover-text);
  box-shadow: none;
  text-align: left;
}

.discover-research-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--research-accent) 28%, var(--discover-line));
  border-radius: 3px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--research-accent) 8%, var(--discover-surface)), var(--discover-surface-soft));
  box-shadow: 0 12px 26px rgba(50, 40, 54, 0.12);
}

html.theme-dark .discover-research-visual,
body.theme-dark .discover-research-visual {
  background:
    linear-gradient(145deg, rgba(55, 45, 61, 0.82), rgba(27, 29, 34, 0.96));
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
}

.discover-research-visual > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-research-visual[data-research-visual-kind="first-page"] > img {
  object-fit: cover;
  object-position: top center;
  background: #f5f2ea;
}

.discover-research-feature-art {
  min-height: 246px;
  aspect-ratio: 0.86;
}

.discover-research-feature-copy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 13px;
  min-width: 0;
  padding: 7px 0;
}

.discover-research-feature-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(1.38rem, 5vw, 2.25rem);
  font-weight: 490;
  letter-spacing: -0.025em;
  line-height: 1.07;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.discover-research-feature-copy > span,
.discover-research-shelf-card > small,
.discover-research-landmark > span > em {
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.78rem;
  font-style: normal;
  line-height: 1.2;
}

.discover-research-feature-copy > em {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
  color: var(--discover-coral);
  font-family: var(--reading-font);
  font-size: 0.9rem;
  font-style: normal;
}

.discover-research-feature-copy > em i {
  font-family: var(--ui-font);
  font-size: 1rem;
  font-style: normal;
}

.discover-research-visual-paper {
  position: relative;
  display: grid;
  align-content: center;
  gap: 9px;
  width: 67%;
  height: 78%;
  padding: 13%;
  border: 1px solid color-mix(in srgb, var(--research-accent) 30%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-surface) 92%, var(--research-accent));
  box-shadow: 0 8px 18px rgba(43, 33, 48, 0.09);
}

.discover-research-visual-paper::before {
  position: absolute;
  top: 9%;
  right: 11%;
  left: 11%;
  height: 1px;
  background: var(--research-accent);
  content: "";
  opacity: 0.55;
}

.discover-research-visual-paper i {
  display: block;
  height: 1px;
  background: var(--discover-line-strong, var(--discover-line));
}

.discover-research-visual-paper i:nth-child(2) { width: 78%; }
.discover-research-visual-paper i:nth-child(3) { width: 89%; }
.discover-research-visual-paper i:nth-child(4) { width: 63%; }

.discover-research-visual-paper strong {
  position: absolute;
  right: 10%;
  bottom: 8%;
  color: var(--research-accent);
  font: 600 clamp(0.67rem, 2vw, 0.9rem)/1 var(--ui-font);
  letter-spacing: 0.08em;
}

.discover-research-shelf {
  display: grid;
  gap: 10px;
  padding: 3px 0 18px;
  border-bottom: 1px solid var(--discover-line);
}

.discover-research-shelf > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.discover-research-shelf-card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--discover-text);
  box-shadow: none;
  text-align: left;
}

.discover-research-shelf-art {
  aspect-ratio: 1.14;
  min-height: 0;
  box-shadow: none;
}

.discover-research-shelf-card > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(0.79rem, 2.8vw, 1.03rem);
  font-weight: 500;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-research-shelf-card > small {
  display: block;
  overflow: hidden;
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-research-landmark {
  position: relative;
  display: grid;
  grid-template-columns: minmax(112px, 0.78fr) minmax(0, 1.22fr) 16px;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 144px;
  padding: 2px 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--discover-text);
  box-shadow: none;
  text-align: left;
}

.discover-research-landmark-art {
  min-height: 126px;
  aspect-ratio: 1.18;
  box-shadow: none;
}

.discover-research-landmark > span {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.discover-research-landmark > span > small {
  color: var(--research-gold);
}

.discover-research-landmark > span > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(1.08rem, 4vw, 1.55rem);
  font-weight: 500;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-research-landmark > .discover-card-arrow {
  position: static !important;
  color: var(--research-accent) !important;
}

.discover-browse-grid.is-research .discover-research-visual {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

@media (max-width: 430px) {
  .discover-research-editorial-head {
    min-height: 67px;
  }

  .discover-research-editorial-head h1 {
    font-size: clamp(1.88rem, 9vw, 2.45rem);
  }

  .discover-research-feature {
    grid-template-columns: minmax(112px, 0.84fr) minmax(0, 1.16fr);
    gap: 14px;
    min-height: 218px;
  }

  .discover-research-feature-art {
    min-height: 214px;
  }

  .discover-research-feature-copy {
    gap: 9px;
  }

  .discover-research-feature-copy > strong {
    font-size: clamp(1.16rem, 5.8vw, 1.55rem);
  }

  .discover-research-feature-copy > span {
    font-size: 0.69rem;
  }

  .discover-research-shelf > div {
    width: calc(100vw - 18px);
    margin-left: 0;
    padding-right: 18px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 42vw);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .discover-research-shelf > div::-webkit-scrollbar {
    display: none;
  }

  .discover-research-landmark {
    grid-template-columns: 108px minmax(0, 1fr) 14px;
    gap: 12px;
  }
}

@media (max-width: 470px) {
  .discover-preview-book-stage {
    min-height: 194px;
  }

  .discover-preview-book-cover {
    width: 104px;
    height: 156px;
  }

  .discover-preview-book-cover-fallback {
    padding: 15px 12px 12px;
  }

  .discover-preview-book-copy {
    padding: 21px 18px 18px;
  }

  .discover-preview-book-copy h2 {
    font-size: clamp(1.85rem, 9.3vw, 2.35rem);
    line-height: 0.96;
  }

  .discover-preview-book-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-preview-book-facts > span:nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    --home-page-gutter: 12px;
  }

  .home-resume-body {
    grid-template-columns: 122px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .home-resume-info-button {
    width: 30px !important;
    height: 30px !important;
  }

  .home-info-symbol {
    width: 14px !important;
    height: 14px !important;
  }

  .home-book-cover,
  .home-book-cover.has-image {
    width: 122px !important;
  }

  .home-resume-copy h3 {
    max-width: 10.5em !important;
    font-size: clamp(1.42rem, 5.8vw, 1.72rem) !important;
    line-height: 0.97 !important;
  }

  .home-resume-copy p,
  .home-progress-meta {
    font-size: 0.9rem !important;
  }

  .home-primary-action,
  .home-secondary-action {
    height: 42px !important;
    min-height: 42px !important;
    padding-inline: 18px 44px !important;
    font-size: 0.88rem !important;
  }

  .home-primary-action .home-action-symbol,
  .home-secondary-action .home-action-symbol {
    right: 17px !important;
  }

  .home-progress-book {
    flex-basis: 150px !important;
    min-height: 232px !important;
    max-height: 232px !important;
    grid-template-rows: 156px 1fr !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: 118px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image {
    width: 118px !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.34rem, 5.1vw, 1.58rem) !important;
  }

  .home-resume-card.has-book .home-primary-action,
  .home-resume-card.has-book .home-secondary-action {
    height: 38px !important;
    min-height: 38px !important;
  }

  .home-progress-cover,
  .home-progress-cover.has-image {
    height: 156px !important;
  }

  .home-progress-book-copy strong {
    font-size: 0.98rem !important;
  }

  .home-discover-grid,
  .home-add-panel,
  .home-reading-panel {
    gap: 10px !important;
  }

  .home-add-panel,
  .home-reading-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-height: 96px !important;
  }

  .home-add-panel .home-action-card,
  .home-reading-card {
    grid-template-columns: 42px minmax(0, 1fr) 8px !important;
    min-height: 96px !important;
    gap: 8px !important;
    padding: 12px 10px !important;
  }

  .home-add-panel .home-action-icon,
  .home-reading-card .home-action-icon {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
  }

  .home-add-panel .home-action-icon svg,
  .home-reading-card .home-action-icon svg {
    width: 23px !important;
    height: 23px !important;
  }

  .home-add-panel .home-action-card strong,
  .home-reading-card strong {
    font-size: 0.9rem !important;
  }

  .home-add-panel .home-action-card small,
  .home-reading-card small {
    font-size: 0.74rem !important;
  }
}

.home-primary-action > span,
.home-secondary-action > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 430px) {
  .home-primary-action,
  .home-secondary-action {
    font-size: 0.86rem !important;
  }
}

/* Home polish: slimmer progress cards, smaller info affordance, and uniform full-cover frames. */
.home-resume-info-button {
  top: 13px !important;
  right: 13px !important;
  width: 30px !important;
  height: 30px !important;
}

.home-info-symbol {
  width: 13px !important;
  height: 13px !important;
}

.home-progress-book {
  flex: 0 0 clamp(116px, 27vw, 142px) !important;
  min-height: clamp(190px, 37vw, 226px) !important;
  max-height: clamp(190px, 37vw, 226px) !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 8px !important;
  padding: 9px !important;
}

.home-progress-cover,
.home-progress-cover.has-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 0.64 !important;
}

.home-book-cover.has-image,
.home-progress-cover.has-image,
.collection-cover.has-image,
.library-feature-cover.has-image,
.gutenberg-cover.has-image,
.chapter-book-cover.has-image,
.book-details-cover.has-image {
  aspect-ratio: 0.64 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.home-book-cover.has-image img,
.home-progress-cover.has-image img,
.collection-cover.has-image img,
.library-feature-cover.has-image img,
.gutenberg-cover.has-image img,
.chapter-book-cover.has-image img,
.book-details-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
}

@media (max-width: 620px) {
  .home-resume-info-button {
    top: 13px !important;
    right: 13px !important;
    width: 28px !important;
    height: 28px !important;
  }

  .home-info-symbol {
    width: 12.5px !important;
    height: 12.5px !important;
  }

  .home-progress-book {
    flex-basis: 128px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    padding: 8px !important;
  }
}

@media (max-width: 430px) {
  .home-resume-info-button {
    width: 26px !important;
    height: 26px !important;
  }

  .home-info-symbol {
    width: 12px !important;
    height: 12px !important;
  }

  .home-progress-book {
    flex-basis: 126px !important;
    min-height: 218px !important;
    max-height: 218px !important;
  }
}

html.theme-dark .research-source-tab,
body.theme-dark .research-source-tab {
  border-color: rgba(225, 212, 190, 0.13) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 244, 226, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(42, 37, 31, 0.9), rgba(34, 30, 26, 0.88)) !important;
  color: rgba(218, 209, 194, 0.74) !important;
  box-shadow:
    0 12px 25px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 244, 226, 0.035) !important;
}

html.theme-dark .research-source-tab.is-active,
body.theme-dark .research-source-tab.is-active {
  border-color: rgba(136, 178, 157, 0.22) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(134, 178, 157, 0.18), transparent 64%),
    linear-gradient(180deg, rgba(38, 50, 41, 0.92), rgba(32, 38, 32, 0.9)) !important;
  color: rgba(165, 204, 183, 0.96) !important;
}

html.theme-dark .research-access-badge,
body.theme-dark .research-access-badge {
  border-color: rgba(225, 212, 190, 0.12);
  background: rgba(255, 244, 226, 0.065);
  color: rgba(218, 209, 194, 0.78);
}

html.theme-dark .research-access-badge.is-source-pubmed,
body.theme-dark .research-access-badge.is-source-pubmed,
html.theme-dark .research-access-badge.is-pmc,
body.theme-dark .research-access-badge.is-pmc {
  border-color: rgba(110, 190, 196, 0.18);
  background: rgba(86, 167, 174, 0.12);
  color: rgba(139, 218, 223, 0.9);
}

html.theme-dark .research-access-badge.is-source-arxiv,
body.theme-dark .research-access-badge.is-source-arxiv {
  border-color: rgba(191, 101, 92, 0.2);
  background: rgba(167, 75, 68, 0.12);
  color: rgba(232, 149, 139, 0.9);
}

html.theme-dark .research-access-badge.is-source-openalex,
body.theme-dark .research-access-badge.is-source-openalex,
html.theme-dark .research-access-badge.is-pdf,
body.theme-dark .research-access-badge.is-pdf {
  border-color: rgba(94, 149, 190, 0.2);
  background: rgba(64, 121, 164, 0.13);
  color: rgba(145, 197, 232, 0.9);
}

html.theme-dark .research-access-badge.is-source-crossref,
body.theme-dark .research-access-badge.is-source-crossref {
  border-color: rgba(153, 124, 199, 0.2);
  background: rgba(111, 83, 156, 0.13);
  color: rgba(191, 166, 230, 0.9);
}

html.theme-dark .research-access-badge.is-source-conversation,
body.theme-dark .research-access-badge.is-source-conversation {
  border-color: rgba(217, 101, 91, 0.22);
  background: rgba(173, 69, 60, 0.13);
  color: rgba(238, 157, 149, 0.9);
}

html.theme-dark .research-access-badge.is-full-text,
body.theme-dark .research-access-badge.is-full-text,
html.theme-dark .research-access-badge.is-open-access,
body.theme-dark .research-access-badge.is-open-access {
  border-color: rgba(102, 184, 135, 0.2);
  background: rgba(73, 154, 104, 0.13);
  color: rgba(151, 222, 179, 0.9);
}

html.theme-dark .research-cover-arxiv,
body.theme-dark .research-cover-arxiv {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 244, 226, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(143, 68, 63, 0.9), rgba(76, 42, 41, 0.96)) !important;
}

html.theme-dark .research-cover-openalex,
body.theme-dark .research-cover-openalex {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 244, 226, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(57, 105, 134, 0.92), rgba(36, 58, 78, 0.96)) !important;
}

html.theme-dark .research-cover-crossref,
body.theme-dark .research-cover-crossref {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 244, 226, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(94, 68, 130, 0.92), rgba(50, 39, 76, 0.96)) !important;
}

html.theme-dark .research-cover-conversation,
body.theme-dark .research-cover-conversation {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 244, 226, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(157, 61, 54, 0.92), rgba(82, 41, 42, 0.96)) !important;
}

html.theme-dark .research-cover-saved,
body.theme-dark .research-cover-saved {
  background:
    radial-gradient(circle at 32% 20%, rgba(255, 244, 226, 0.13), transparent 38%),
    linear-gradient(145deg, rgba(112, 98, 76, 0.92), rgba(61, 53, 45, 0.96)) !important;
}

/* Home in-progress rail: quiet cover-only cards. */
.home-progress-book {
  flex: 0 0 clamp(92px, 23vw, 116px) !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 7px !important;
  padding: 7px !important;
  border-radius: 13px !important;
}

.home-progress-cover,
.home-progress-cover.has-image,
.home-progress-cover.has-title-fallback {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 0.64 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}

.home-progress-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: fill !important;
  object-position: center !important;
  display: block !important;
}

.home-progress-book-copy {
  display: block !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.home-progress-book-copy strong,
.home-progress-book-copy small,
.home-progress-book-copy em {
  display: none !important;
}

.home-progress-book .home-progress-track {
  width: 100% !important;
  height: 4px !important;
  margin: 0 !important;
  border-radius: 999px !important;
}

.home-progress-cover.has-title-fallback,
.home-book-cover.has-title-fallback {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  place-items: stretch !important;
  padding: clamp(8px, 2vw, 12px) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.72), transparent 48%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.96), rgba(241, 235, 224, 0.9)) !important;
  color: #9f514b !important;
  box-shadow:
    inset 0 0 0 1px rgba(94, 75, 52, 0.08),
    0 12px 24px rgba(91, 71, 48, 0.08) !important;
  text-align: center !important;
}

html.theme-dark .home-progress-cover.has-title-fallback,
body.theme-dark .home-progress-cover.has-title-fallback,
html.theme-dark .home-book-cover.has-title-fallback,
body.theme-dark .home-book-cover.has-title-fallback {
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 241, 214, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(45, 39, 32, 0.96), rgba(30, 27, 23, 0.95)) !important;
  color: #d47d73 !important;
  box-shadow:
    inset 0 0 0 1px rgba(246, 238, 224, 0.09),
    0 12px 24px rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 620px) {
  .home-progress-book {
    flex-basis: clamp(94px, 25vw, 110px) !important;
    padding: 7px !important;
    gap: 6px !important;
  }
}

@media (max-width: 430px) {
  .home-progress-book {
    flex-basis: clamp(92px, 28vw, 106px) !important;
    padding: 6px !important;
  }

  .home-progress-book .home-progress-track {
    height: 3px !important;
  }
}

/* Home viewport fit: compact the vertical stack without changing the design language. */
.menu-main.home-dashboard {
  gap: clamp(14px, 2.25vh, 22px) !important;
}

.home-hero {
  gap: 3px !important;
  padding-block-start: 0 !important;
}

.home-wordmark {
  font-size: clamp(2.85rem, 9.7vw, 4.85rem) !important;
}

.home-greeting {
  margin-top: 0.3rem !important;
  font-size: clamp(1rem, 3.1vw, 1.42rem) !important;
}

.home-subtitle {
  margin-top: 0.05rem !important;
  font-size: clamp(0.9rem, 2.7vw, 1.16rem) !important;
  line-height: 1.08 !important;
}

.home-section {
  gap: 8px !important;
}

.home-section-head {
  margin-bottom: 0.4rem !important;
}

.home-section-label {
  margin-bottom: 0.44rem !important;
  font-size: clamp(0.64rem, 2vw, 0.78rem) !important;
  line-height: 0.95 !important;
}

.home-resume-card {
  padding: clamp(14px, 3.2vw, 22px) !important;
  border-radius: 17px !important;
}

.home-resume-card > .home-section-label {
  margin-bottom: clamp(8px, 1.8vw, 13px) !important;
}

.home-resume-info-button {
  top: 11px !important;
  right: 11px !important;
}

.home-resume-body {
  grid-template-columns: minmax(94px, 0.36fr) minmax(0, 1fr) !important;
  gap: clamp(14px, 3.4vw, 24px) !important;
}

.home-book-cover,
.home-book-cover.has-image,
.home-book-cover.has-title-fallback {
  width: min(100%, clamp(98px, 21vw, 150px)) !important;
}

.home-resume-copy {
  gap: clamp(6px, 1.25vw, 10px) !important;
}

.home-resume-copy h3 {
  font-size: clamp(1.65rem, 5.4vw, 3.05rem) !important;
  line-height: 0.94 !important;
}

.home-resume-copy p {
  font-size: clamp(0.88rem, 2.55vw, 1.16rem) !important;
  line-height: 1.12 !important;
}

.home-resume-progress {
  gap: 0.25rem !important;
  margin: 0 !important;
}

.home-progress-meta {
  font-size: clamp(0.8rem, 2.25vw, 0.98rem) !important;
  line-height: 1 !important;
}

.home-primary-action,
.home-secondary-action {
  min-height: 40px !important;
  height: clamp(40px, 7.4vw, 52px) !important;
  font-size: clamp(0.9rem, 2.65vw, 1.08rem) !important;
}

.home-progress-rail {
  gap: clamp(12px, 3vw, 20px) !important;
  padding-bottom: 4px !important;
}

.home-progress-book {
  flex-basis: clamp(84px, 21vw, 104px) !important;
  gap: 5px !important;
  padding: 5px !important;
  border-radius: 12px !important;
}

.home-progress-cover,
.home-progress-cover.has-image,
.home-progress-cover.has-title-fallback {
  border-radius: 6px !important;
}

.home-progress-cover.has-title-fallback {
  padding: 7px !important;
}

.home-progress-book .home-progress-track {
  height: 3px !important;
}

@media (max-width: 620px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-block-start: 0 !important;
  }

  .menu-main.home-dashboard {
    gap: 14px !important;
  }

  .home-wordmark {
    font-size: clamp(2.7rem, 10.5vw, 3.65rem) !important;
  }

  .home-resume-card.has-book {
    padding: 14px !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: minmax(98px, 0.8fr) minmax(0, 1.2fr) !important;
    gap: 12px !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: min(100%, 112px) !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.28rem, 4.85vw, 1.56rem) !important;
    line-height: 0.95 !important;
  }

  .home-resume-card.has-book .home-primary-action,
  .home-resume-card.has-book .home-secondary-action {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 0.8rem !important;
  }

  .home-progress-book {
    flex-basis: clamp(82px, 23vw, 96px) !important;
  }

  }

@media (max-width: 430px) {
  .home-wordmark {
    font-size: clamp(2.55rem, 11vw, 3.25rem) !important;
  }

  .home-greeting {
    font-size: 0.98rem !important;
  }

  .home-subtitle {
    font-size: 0.86rem !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: 96px !important;
  }

  .home-progress-book {
    flex-basis: 86px !important;
    padding: 5px !important;
  }

  }

@media (max-width: 620px) and (max-height: 900px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-block-start: 0 !important;
    padding-block-end: 16px !important;
  }

  .menu-main.home-dashboard {
    gap: 12px !important;
  }

  .home-wordmark {
    font-size: clamp(2.45rem, 10vw, 3.2rem) !important;
  }

  .home-greeting {
    margin-top: 0.22rem !important;
  }

  .home-resume-card.has-book {
    padding: 12px !important;
  }

  .home-resume-card.has-book > .home-section-label {
    margin-bottom: 7px !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: 90px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: 90px !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.18rem, 4.65vw, 1.46rem) !important;
  }

  .home-resume-card.has-book .home-primary-action,
  .home-resume-card.has-book .home-secondary-action {
    height: 34px !important;
    min-height: 34px !important;
  }

  .home-section-label {
    margin-bottom: 0.34rem !important;
  }

  .home-progress-book {
    flex-basis: 80px !important;
    gap: 4px !important;
    padding: 5px !important;
  }

  }

/* Home mockup alignment pass: quiet page, wider cards, image-led discovery. */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  background:
    radial-gradient(circle at 82% 4%, rgba(183, 72, 65, 0.04), transparent 26rem),
    linear-gradient(180deg, #fffdf8 0%, #f8f2e9 100%) !important;
}

html.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card,
body.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  background:
    radial-gradient(circle at 88% 2%, rgba(198, 72, 66, 0.08), transparent 23rem),
    radial-gradient(circle at 12% 8%, rgba(255, 244, 218, 0.04), transparent 18rem),
    #12100d !important;
}

.menu-main.home-dashboard {
  --home-page-gutter: clamp(16px, 3.4vw, 30px);
  gap: clamp(17px, 2.6vh, 28px) !important;
  max-width: 960px !important;
  padding-inline: var(--home-page-gutter) !important;
}

.home-hero {
  padding-block-start: clamp(8px, 1.4vh, 18px) !important;
}

.home-wordmark {
  font-size: clamp(3.35rem, 10.8vw, 5.4rem) !important;
}

.home-greeting {
  margin-top: clamp(0.52rem, 1vw, 0.75rem) !important;
  font-size: clamp(1.08rem, 3.15vw, 1.46rem) !important;
}

.home-subtitle {
  font-size: clamp(0.96rem, 2.55vw, 1.2rem) !important;
}

.home-section {
  gap: clamp(9px, 1.7vw, 15px) !important;
}

.home-section-label {
  letter-spacing: 0.28em !important;
  margin-bottom: 0 !important;
  color: rgba(42, 38, 33, 0.72) !important;
}

html.theme-dark .home-section-label,
body.theme-dark .home-section-label {
  color: rgba(245, 237, 225, 0.62) !important;
}

.home-resume-card,
.home-action-panel,
.home-reading-panel {
  border-color: rgba(82, 69, 52, 0.14) !important;
  background: rgba(255, 253, 248, 0.78) !important;
  box-shadow: 0 22px 60px rgba(94, 78, 56, 0.12) !important;
}

html.theme-dark .home-resume-card,
body.theme-dark .home-resume-card,
html.theme-dark .home-action-panel,
body.theme-dark .home-action-panel,
html.theme-dark .home-reading-panel,
body.theme-dark .home-reading-panel {
  border-color: rgba(246, 238, 224, 0.13) !important;
  background: rgba(34, 30, 25, 0.72) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32) !important;
}

.home-resume-card.has-book {
  padding: clamp(18px, 3.35vw, 28px) clamp(20px, 3.75vw, 34px) !important;
  border-radius: 20px !important;
}

.home-resume-card.has-book > .home-section-label {
  margin-bottom: clamp(14px, 2.5vw, 20px) !important;
  font-size: clamp(0.68rem, 1.75vw, 0.88rem) !important;
}

.home-resume-info-button {
  top: clamp(14px, 2.8vw, 22px) !important;
  right: clamp(14px, 2.8vw, 22px) !important;
  width: 31px !important;
  height: 31px !important;
  border-color: rgba(95, 82, 64, 0.12) !important;
  box-shadow: 0 9px 22px rgba(82, 66, 46, 0.08) !important;
}

.home-resume-card.has-book .home-resume-body {
  grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(22px, 4.3vw, 40px) !important;
}

.home-resume-card.has-book .home-book-cover,
.home-resume-card.has-book .home-book-cover.has-image,
.home-resume-card.has-book .home-book-cover.has-title-fallback {
  width: min(100%, clamp(138px, 25vw, 178px)) !important;
  aspect-ratio: 0.64 !important;
  border-radius: 8px !important;
}

.home-book-cover.has-image img,
.home-progress-cover.has-image img {
  object-fit: fill !important;
  object-position: center !important;
}

.home-resume-card.has-book .home-resume-copy {
  gap: clamp(8px, 1.35vw, 13px) !important;
  align-self: center !important;
}

.home-resume-card.has-book .home-resume-copy h3 {
  max-width: 12em !important;
  font-size: clamp(1.85rem, 5.45vw, 3.35rem) !important;
  line-height: 1.02 !important;
}

.home-resume-card.has-book .home-resume-progress {
  gap: clamp(0.4rem, 1vw, 0.56rem) !important;
  margin: 0 !important;
}

.home-resume-card.has-book .home-progress-track {
  height: 5px !important;
}

.home-resume-card.has-book .home-progress-meta {
  font-size: clamp(0.88rem, 2.25vw, 1.08rem) !important;
  line-height: 1 !important;
}

.home-resume-card.has-book #homeResumeProgressPercent {
  color: #c8423d !important;
}

.home-resume-card.has-book .home-primary-action,
.home-resume-card.has-book .home-secondary-action {
  position: relative !important;
  min-height: 44px !important;
  height: clamp(44px, 7.2vw, 54px) !important;
  border-radius: 13px !important;
  padding-inline: clamp(18px, 4vw, 30px) clamp(48px, 8vw, 68px) !important;
  font-size: clamp(0.96rem, 2.55vw, 1.16rem) !important;
}

.home-resume-card.has-book .home-secondary-action {
  background: rgba(255, 253, 248, 0.7) !important;
}

html.theme-dark .home-resume-card.has-book .home-secondary-action,
body.theme-dark .home-resume-card.has-book .home-secondary-action {
  background: rgba(255, 250, 240, 0.045) !important;
}

.home-resume-card.has-book .home-action-symbol {
  right: clamp(20px, 4.4vw, 31px) !important;
}

.home-progress-rail {
  background: transparent !important;
  gap: clamp(13px, 3vw, 20px) !important;
  margin-inline: calc(-1 * var(--home-page-gutter)) !important;
  padding: 2px var(--home-page-gutter) 8px !important;
  scroll-padding-inline: var(--home-page-gutter) !important;
}

.home-progress-book {
  flex: 0 0 clamp(116px, 27vw, 150px) !important;
  min-height: clamp(158px, 32vw, 198px) !important;
  max-height: clamp(158px, 32vw, 198px) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 7px !important;
  padding: 7px !important;
  border-radius: 13px !important;
  background: rgba(255, 253, 248, 0.52) !important;
  box-shadow: 0 14px 34px rgba(92, 73, 48, 0.08) !important;
}

html.theme-dark .home-progress-book,
body.theme-dark .home-progress-book {
  background: rgba(28, 25, 21, 0.54) !important;
}

.home-progress-cover,
.home-progress-cover.has-image,
.home-progress-cover.has-title-fallback {
  height: auto !important;
  min-height: 0 !important;
  width: 100% !important;
  aspect-ratio: 0.68 !important;
  border-radius: 8px !important;
}

.home-progress-cover.has-title-fallback {
  display: grid !important;
  grid-template-rows: auto 1fr auto auto !important;
  align-content: stretch !important;
  justify-items: start !important;
  place-items: initial !important;
  padding: clamp(9px, 2.2vw, 13px) !important;
  text-align: left !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 239, 227, 0.78)),
    #f6efe4 !important;
  color: #a84944 !important;
}

html.theme-dark .home-progress-cover.has-title-fallback,
body.theme-dark .home-progress-cover.has-title-fallback {
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 0.1), rgba(255, 250, 239, 0.045)),
    #211d18 !important;
}

.home-progress-book-copy {
  min-height: 0 !important;
  display: block !important;
}

.home-progress-book .home-progress-track {
  height: 4px !important;
  margin: 0 !important;
}

@media (max-width: 620px) {
  .menu-main.home-dashboard {
    --home-page-gutter: clamp(14px, 3.8vw, 24px);
    gap: 17px !important;
  }

  .home-wordmark {
    font-size: clamp(3.15rem, 12.2vw, 4rem) !important;
  }

  .home-resume-card.has-book {
    padding: 18px 18px 20px !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: minmax(108px, 0.45fr) minmax(0, 1fr) !important;
    gap: clamp(16px, 4.4vw, 24px) !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: clamp(112px, 29vw, 146px) !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.46rem, 5.85vw, 2.06rem) !important;
    line-height: 1.03 !important;
  }

  .home-resume-card.has-book .home-primary-action,
  .home-resume-card.has-book .home-secondary-action {
    height: clamp(42px, 9.2vw, 48px) !important;
    min-height: 42px !important;
  }

  .home-progress-book {
    flex-basis: clamp(106px, 29vw, 132px) !important;
    min-height: clamp(146px, 38vw, 178px) !important;
    max-height: clamp(146px, 38vw, 178px) !important;
  }

  }

@media (max-width: 430px) {
  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: 106px minmax(0, 1fr) !important;
    gap: 15px !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: 106px !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.34rem, 5.55vw, 1.7rem) !important;
  }

  .home-resume-card.has-book .home-progress-meta {
    font-size: 0.82rem !important;
  }

  .home-progress-book {
    flex-basis: 104px !important;
    min-height: 144px !important;
    max-height: 144px !important;
  }

  }

/* Home v2 completion pass: match the lighter mockup proportions and keep the rail compact. */
.menu-main.home-dashboard {
  --home-page-gutter: clamp(18px, 4vw, 32px);
  gap: clamp(14px, 2.1vh, 24px) !important;
  padding-inline: var(--home-page-gutter) !important;
}

.home-hero {
  padding-block-start: clamp(0px, 0.6vh, 8px) !important;
}

.home-wordmark {
  line-height: 0.9 !important;
}

.home-greeting {
  margin-top: clamp(0.68rem, 1.35vw, 0.94rem) !important;
}

.home-resume-card.has-book {
  padding: clamp(17px, 3vw, 24px) clamp(18px, 3.4vw, 30px) !important;
  border-radius: clamp(16px, 3.2vw, 20px) !important;
}

.home-resume-card.has-book > .home-section-label {
  margin-bottom: clamp(14px, 2.2vw, 18px) !important;
  font-size: clamp(0.62rem, 1.55vw, 0.78rem) !important;
  letter-spacing: 0.31em !important;
}

.home-resume-info-button {
  width: 29px !important;
  height: 29px !important;
  top: clamp(13px, 2.4vw, 19px) !important;
  right: clamp(13px, 2.4vw, 19px) !important;
}

.home-resume-card.has-book .home-resume-body {
  grid-template-columns: minmax(116px, 0.34fr) minmax(0, 1fr) !important;
  gap: clamp(20px, 4vw, 36px) !important;
}

.home-resume-card.has-book .home-book-cover,
.home-resume-card.has-book .home-book-cover.has-image,
.home-resume-card.has-book .home-book-cover.has-title-fallback {
  width: min(100%, clamp(128px, 23vw, 172px)) !important;
}

.home-resume-card.has-book .home-resume-copy {
  gap: clamp(7px, 1.15vw, 11px) !important;
}

.home-resume-card.has-book .home-resume-copy h3 {
  font-size: clamp(1.74rem, 4.8vw, 3.05rem) !important;
  line-height: 1.02 !important;
}

.home-resume-card.has-book .home-progress-meta {
  align-items: baseline !important;
  color: rgba(43, 39, 34, 0.62) !important;
}

.home-resume-card.has-book #homeResumeProgressPercent {
  color: #c73834 !important;
}

.home-resume-card.has-book .home-primary-action,
.home-resume-card.has-book .home-secondary-action {
  height: clamp(42px, 6.5vw, 50px) !important;
  min-height: 42px !important;
  border-radius: 12px !important;
}

.home-progress-section {
  gap: clamp(8px, 1.35vw, 12px) !important;
}

.home-progress-rail {
  gap: clamp(11px, 2.65vw, 18px) !important;
  padding-block: 1px 5px !important;
}

.home-progress-book {
  flex-basis: clamp(100px, 23vw, 132px) !important;
  min-height: clamp(136px, 29vw, 178px) !important;
  max-height: clamp(136px, 29vw, 178px) !important;
  gap: 6px !important;
  padding: 6px !important;
  border-radius: 12px !important;
  background: rgba(255, 253, 248, 0.44) !important;
}

.home-progress-book:active {
  transform: none !important;
}

.home-progress-cover,
.home-progress-cover.has-image,
.home-progress-cover.has-title-fallback {
  aspect-ratio: 0.68 !important;
  border-radius: 7px !important;
}

.home-progress-cover.has-image img,
.home-book-cover.has-image img {
  object-fit: fill !important;
}

.home-progress-cover.has-title-fallback {
  padding: clamp(8px, 1.8vw, 11px) !important;
}

.home-progress-book-copy {
  display: grid !important;
  align-items: end !important;
}

.home-discover-section {
  gap: clamp(8px, 1.45vw, 13px) !important;
}

@media (max-width: 620px) {
  .menu-main.home-dashboard {
    --home-page-gutter: clamp(18px, 5.2vw, 24px);
    gap: 14px !important;
  }

  .home-wordmark {
    font-size: clamp(3rem, 11vw, 3.75rem) !important;
  }

  .home-greeting {
    margin-top: 0.66rem !important;
  }

  .home-subtitle {
    font-size: clamp(0.92rem, 2.65vw, 1rem) !important;
  }

  .home-resume-card.has-book {
    padding: 16px 17px 17px !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: minmax(108px, 0.4fr) minmax(0, 1fr) !important;
    gap: clamp(16px, 4vw, 22px) !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: clamp(108px, 28vw, 132px) !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.38rem, 5.25vw, 1.86rem) !important;
  }

  .home-resume-card.has-book .home-primary-action,
  .home-resume-card.has-book .home-secondary-action {
    height: 41px !important;
    min-height: 41px !important;
  }

  .home-progress-book {
    flex-basis: clamp(92px, 26vw, 108px) !important;
    min-height: clamp(128px, 35vw, 146px) !important;
    max-height: clamp(128px, 35vw, 146px) !important;
    padding: 5px !important;
  }

  .home-progress-book .home-progress-track {
    height: 3px !important;
  }

  }

@media (max-width: 430px) {
  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: 104px !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.28rem, 5vw, 1.62rem) !important;
  }

  .home-resume-card.has-book .home-progress-meta {
    font-size: 0.78rem !important;
  }

  .home-progress-book {
    flex-basis: 90px !important;
    min-height: 126px !important;
    max-height: 126px !important;
  }

  }

/* Home regular-iPhone calibration: design for ~390x844 first, then let larger phones breathe. */
@media (max-width: 430px), (max-height: 880px) and (max-width: 520px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    --home-page-gutter: clamp(14px, 4.25vw, 18px);
    padding-inline: var(--home-page-gutter) !important;
  }

  .menu-main.home-dashboard {
    --home-page-gutter: clamp(14px, 4.25vw, 18px);
    gap: 11px !important;
    padding-inline: var(--home-page-gutter) !important;
  }

  .home-hero {
    padding-block-start: 0 !important;
  }

  .home-wordmark {
    font-size: clamp(2.78rem, 10.8vw, 3.22rem) !important;
    line-height: 0.88 !important;
  }

  .home-greeting {
    margin-top: 0.52rem !important;
    font-size: clamp(1.08rem, 3.9vw, 1.28rem) !important;
  }

  .home-subtitle {
    margin-top: 0.14rem !important;
    font-size: clamp(0.86rem, 2.85vw, 0.96rem) !important;
    line-height: 1.16 !important;
  }

  .home-section-head {
    margin-bottom: 2px !important;
  }

  .home-section-label {
    font-size: 0.66rem !important;
    letter-spacing: 0.31em !important;
  }

  .home-view-all {
    font-size: 0.96rem !important;
  }

  .home-resume-card.has-book {
    padding: 14px 14px 15px !important;
    border-radius: 17px !important;
  }

  .home-resume-card.has-book > .home-section-label {
    margin-bottom: 11px !important;
    font-size: 0.63rem !important;
  }

  .home-resume-info-button {
    width: 26px !important;
    height: 26px !important;
    top: 12px !important;
    right: 12px !important;
  }

  .home-resume-info-button .home-info-symbol {
    width: 12px !important;
    height: 12px !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: 101px minmax(0, 1fr) !important;
    gap: 13px !important;
    align-items: center !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: 101px !important;
    border-radius: 9px !important;
  }

  .home-resume-card.has-book .home-resume-copy {
    gap: 6px !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.23rem, 5vw, 1.52rem) !important;
    line-height: 1.02 !important;
  }

  .home-resume-card.has-book .home-progress-track {
    height: 4px !important;
  }

  .home-resume-card.has-book .home-progress-meta {
    font-size: 0.76rem !important;
    line-height: 1.1 !important;
  }

  .home-resume-card.has-book .home-primary-action,
  .home-resume-card.has-book .home-secondary-action {
    height: 37px !important;
    min-height: 37px !important;
    border-radius: 10px !important;
    font-size: 0.95rem !important;
  }

  .home-resume-card.has-book .home-action-symbol {
    width: 17px !important;
    height: 17px !important;
  }

  .home-progress-section,
  .home-discover-section,
  .home-add-section {
    gap: 7px !important;
  }

  .home-progress-rail {
    gap: 10px !important;
    padding-block: 0 4px !important;
  }

  .home-progress-book {
    flex: 0 0 82px !important;
    min-height: 118px !important;
    max-height: 118px !important;
    padding: 5px !important;
    border-radius: 11px !important;
  }

  .home-progress-cover,
  .home-progress-cover.has-image,
  .home-progress-cover.has-title-fallback {
    aspect-ratio: 0.67 !important;
    border-radius: 7px !important;
  }

  .home-progress-cover.has-title-fallback {
    padding: 7px !important;
  }

  .home-progress-book .home-progress-track {
    height: 3px !important;
  }

  .home-add-panel,
  .home-reading-panel {
    min-height: 86px !important;
    border-radius: 15px !important;
  }

  .home-add-panel .home-action-card,
  .home-reading-card {
    grid-template-columns: 45px minmax(0, 1fr) 11px !important;
    min-height: 86px !important;
    padding: 11px 10px !important;
    gap: 9px !important;
  }

  .home-add-panel .home-action-icon,
  .home-reading-card .home-action-icon {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    min-height: 45px !important;
    max-width: 45px !important;
    max-height: 45px !important;
  }

  .home-add-panel .home-action-icon svg,
  .home-reading-card .home-action-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .home-add-panel .home-action-card strong,
  .home-reading-card strong {
    font-size: 0.88rem !important;
    line-height: 1.02 !important;
  }

  .home-add-panel .home-action-card small,
  .home-reading-card small {
    font-size: 0.7rem !important;
    line-height: 1.16 !important;
  }
}

/* Let the home shelf scroll to the glass edge while cards still rest on the panel grid. */
@media (max-width: 720px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .home-progress-rail {
    --home-rail-align-pad: calc(max(16px, env(safe-area-inset-left)) + (2 * var(--home-page-gutter, 18px)));
    --home-rail-end-pad: calc(max(16px, env(safe-area-inset-right)) + var(--home-page-gutter, 18px));
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: var(--home-rail-align-pad) !important;
    padding-right: var(--home-rail-end-pad) !important;
    scroll-padding-left: var(--home-rail-align-pad) !important;
    scroll-padding-right: var(--home-rail-end-pad) !important;
  }
}

/* Home edge correction: no inner page frame; regular iPhones get wider cards, not a tighter box. */
.input-panel.is-open:not(.is-menu-subview):not(.is-settings-screen) {
  background:
    radial-gradient(circle at 78% 0%, rgba(188, 72, 64, 0.04), transparent 24rem),
    linear-gradient(180deg, #fffdf8 0%, #f8f2e9 100%) !important;
}

html.theme-dark .input-panel.is-open:not(.is-menu-subview):not(.is-settings-screen),
body.theme-dark .input-panel.is-open:not(.is-menu-subview):not(.is-settings-screen) {
  background:
    radial-gradient(circle at 74% 0%, rgba(190, 73, 66, 0.09), transparent 22rem),
    radial-gradient(circle at 8% 6%, rgba(255, 244, 218, 0.035), transparent 18rem),
    linear-gradient(180deg, #15130f 0%, #11100d 58%, #0f0e0c 100%) !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card,
body.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  background: transparent !important;
}

.menu-main.home-dashboard {
  width: 100% !important;
  max-width: none !important;
  --home-page-gutter: clamp(12px, 3.2vw, 22px);
  padding-inline: var(--home-page-gutter) !important;
}

@media (max-width: 430px), (max-height: 880px) and (max-width: 520px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
    padding-inline: 0 !important;
  }

  .menu-main.home-dashboard {
    --home-page-gutter: clamp(10px, 2.9vw, 14px);
    gap: 12px !important;
    padding-inline: var(--home-page-gutter) !important;
  }

  .home-resume-card.has-book {
    padding: 15px 16px 16px !important;
    border-radius: 17px !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: 108px !important;
  }

  .home-resume-card.has-book .home-resume-copy h3 {
    font-size: clamp(1.34rem, 5.25vw, 1.7rem) !important;
  }

  .home-resume-card.has-book .home-primary-action,
  .home-resume-card.has-book .home-secondary-action {
    height: 39px !important;
    min-height: 39px !important;
  }

  .home-progress-book {
    flex: 0 0 91px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }

  .home-add-panel,
  .home-reading-panel {
    min-height: 90px !important;
  }

  .home-add-panel .home-action-card,
  .home-reading-card {
    min-height: 90px !important;
    padding: 12px 12px !important;
  }
}

@media (max-width: 720px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .home-progress-rail {
    --home-rail-align-pad: max(var(--home-page-gutter, 12px), env(safe-area-inset-left));
    --home-rail-end-pad: max(var(--home-page-gutter, 12px), env(safe-area-inset-right));
  }
}

/* Home resume/rail refinement: wider panels, matched cover ratios, label aligned with cover top. */
.menu-main.home-dashboard {
  --home-page-gutter: clamp(8px, 2.25vw, 18px);
}

.home-resume-card.has-book {
  --home-cover-ratio: 0.64;
  --home-resume-pad-x: clamp(15px, 3.2vw, 28px);
  --home-resume-pad-y: clamp(15px, 2.7vw, 22px);
  --home-resume-cover-w: clamp(132px, 25vw, 184px);
  --home-resume-gap: clamp(18px, 3.6vw, 34px);
  position: relative !important;
  padding: var(--home-resume-pad-y) var(--home-resume-pad-x) !important;
}

.home-resume-card.has-book > .home-section-label {
  position: absolute !important;
  z-index: 2 !important;
  top: calc(var(--home-resume-pad-y) + 1px) !important;
  left: calc(var(--home-resume-pad-x) + var(--home-resume-cover-w) + var(--home-resume-gap)) !important;
  margin: 0 !important;
  max-width: calc(100% - var(--home-resume-pad-x) - var(--home-resume-cover-w) - var(--home-resume-gap) - 44px) !important;
  color: #c8423d !important;
}

html.theme-dark .home-resume-card.has-book > .home-section-label,
body.theme-dark .home-resume-card.has-book > .home-section-label {
  color: #d97269 !important;
}

.home-resume-card.has-book .home-resume-body {
  grid-template-columns: var(--home-resume-cover-w) minmax(0, 1fr) !important;
  gap: var(--home-resume-gap) !important;
  align-items: stretch !important;
}

.home-resume-card.has-book .home-resume-cover {
  display: grid !important;
  align-items: stretch !important;
}

.home-resume-card.has-book .home-book-cover,
.home-resume-card.has-book .home-book-cover.has-image,
.home-resume-card.has-book .home-book-cover.has-title-fallback {
  width: var(--home-resume-cover-w) !important;
  max-width: 100% !important;
  aspect-ratio: var(--home-cover-ratio) !important;
  align-self: stretch !important;
}

.home-resume-card.has-book .home-resume-copy {
  padding-top: clamp(23px, 4.6vw, 34px) !important;
}

.home-progress-book {
  --home-cover-ratio: 0.64;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  padding: 6px !important;
}

.home-progress-cover,
.home-progress-cover.has-image,
.home-progress-cover.has-title-fallback {
  aspect-ratio: var(--home-cover-ratio) !important;
  width: 100% !important;
  height: auto !important;
}

.home-progress-cover.has-image img,
.home-book-cover.has-image img {
  object-fit: fill !important;
  object-position: center !important;
}

.home-progress-book-copy {
  width: 100% !important;
  padding: 0 1px !important;
}

.home-progress-book .home-progress-track {
  display: block !important;
  width: 100% !important;
  margin-top: 4px !important;
}

@media (max-width: 430px), (max-height: 880px) and (max-width: 520px) {
  .menu-main.home-dashboard {
    --home-page-gutter: clamp(7px, 2vw, 10px);
  }

  .home-resume-card.has-book {
    --home-resume-pad-x: 13px;
    --home-resume-pad-y: 13px;
    --home-resume-cover-w: clamp(118px, 30vw, 132px);
    --home-resume-gap: 14px;
  }

  .home-resume-card.has-book > .home-section-label {
    top: 13px !important;
    left: calc(var(--home-resume-pad-x) + var(--home-resume-cover-w) + var(--home-resume-gap)) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.29em !important;
  }

  .home-resume-card.has-book .home-resume-body {
    grid-template-columns: var(--home-resume-cover-w) minmax(0, 1fr) !important;
    gap: var(--home-resume-gap) !important;
  }

  .home-resume-card.has-book .home-book-cover,
  .home-resume-card.has-book .home-book-cover.has-image,
  .home-resume-card.has-book .home-book-cover.has-title-fallback {
    width: var(--home-resume-cover-w) !important;
    aspect-ratio: 0.64 !important;
  }

  .home-resume-card.has-book .home-resume-copy {
    padding-top: 22px !important;
  }

  .home-progress-book {
    flex-basis: 86px !important;
    min-height: 144px !important;
    max-height: 144px !important;
  }
}

/* Home edge symmetry: let one small page gutter own the horizontal rhythm. */
.input-panel.is-open:not(.is-menu-subview):not(.is-settings-screen) {
  padding-left: env(safe-area-inset-left) !important;
  padding-right: env(safe-area-inset-right) !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) .menu-card {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.menu-main.home-dashboard {
  --home-page-gutter: clamp(8px, 2vw, 12px);
  padding-left: var(--home-page-gutter) !important;
  padding-right: var(--home-page-gutter) !important;
}

@media (max-width: 430px), (max-height: 880px) and (max-width: 520px) {
  .menu-main.home-dashboard {
    --home-page-gutter: clamp(8px, 2vw, 10px);
  }
}

@media (max-width: 720px) {
  .input-panel:not(.is-menu-subview):not(.is-settings-screen) .home-progress-rail {
    --home-rail-align-pad: var(--home-page-gutter, 6px);
    --home-rail-end-pad: var(--home-page-gutter, 6px);
  }
}

/* Persistent home-shell ambience shared by the bottom-nav destinations. */
#inputPanel {
  isolation: isolate;
}

#inputPanel .home-ambient-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms ease;
}

#inputPanel.home-ambient-active .home-ambient-canvas {
  opacity: 0.76;
}

#inputPanel.home-ambient-paused .home-ambient-canvas {
  opacity: 0;
}

#inputPanel > .menu-card {
  position: relative;
  z-index: 1;
}

#inputPanel.home-ambient-active > .menu-card {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#inputPanel.home-ambient-active .home-resume-card,
#inputPanel.home-ambient-active .home-progress-book,
#inputPanel.home-ambient-active .home-empty-progress,
#inputPanel.home-ambient-active .home-discover-card,
#inputPanel.home-ambient-active .home-action-panel,
#inputPanel.home-ambient-active .home-reading-panel,
#inputPanel.home-ambient-active #collectionView .library-search,
#inputPanel.home-ambient-active #collectionView .library-feature-button,
#inputPanel.home-ambient-active #collectionView .collection-item,
#inputPanel.home-ambient-active #statsView .stats-tabs,
#inputPanel.home-ambient-active #statsView .stats-card,
#inputPanel.home-ambient-active #statsView .stats-insight-tile,
#inputPanel.home-ambient-active #statsView .stats-bottom-banner,
#inputPanel.home-ambient-active #settingsView .settings-group,
#inputPanel.home-ambient-active #gutenbergView .library-search,
#inputPanel.home-ambient-active #gutenbergView .gutenberg-category-card,
#inputPanel.home-ambient-active #gutenbergView .gutenberg-book-button,
#inputPanel.home-ambient-active #pubmedView .library-search,
#inputPanel.home-ambient-active #pubmedView .research-source-tab,
#inputPanel.home-ambient-active #pubmedView .gutenberg-book-button {
  -webkit-backdrop-filter: blur(16px) saturate(1.05);
  backdrop-filter: blur(16px) saturate(1.05);
}

html.theme-dark #inputPanel.home-ambient-active .home-resume-card,
body.theme-dark #inputPanel.home-ambient-active .home-resume-card,
html.theme-dark #inputPanel.home-ambient-active .home-progress-book,
body.theme-dark #inputPanel.home-ambient-active .home-progress-book,
html.theme-dark #inputPanel.home-ambient-active .home-empty-progress,
body.theme-dark #inputPanel.home-ambient-active .home-empty-progress,
html.theme-dark #inputPanel.home-ambient-active .home-discover-card,
body.theme-dark #inputPanel.home-ambient-active .home-discover-card,
html.theme-dark #inputPanel.home-ambient-active .home-action-panel,
body.theme-dark #inputPanel.home-ambient-active .home-action-panel,
html.theme-dark #inputPanel.home-ambient-active .home-reading-panel,
body.theme-dark #inputPanel.home-ambient-active .home-reading-panel {
  background:
    linear-gradient(180deg, rgba(255, 244, 226, 0.08), rgba(255, 244, 226, 0.02)),
    rgba(34, 30, 26, 0.44) !important;
}

@media (prefers-reduced-motion: reduce) {
  #inputPanel .home-ambient-canvas {
    transition: none;
  }
}

/* Context chrome translucency and sea-glass controls. Keep this late so it overrides older chrome passes without changing layout measurements. */

.top-icon-button,
.top-mode-button {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 52% 48% 57% 43% / 45% 56% 44% 55% !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.78), transparent 42%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.58), rgba(218, 231, 225, 0.34) 52%, rgba(233, 223, 207, 0.46)) !important;
  box-shadow:
    0 10px 22px rgba(45, 38, 28, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.72),
    inset 0 -2px 5px rgba(83, 112, 104, 0.08) !important;
  backdrop-filter: blur(12px) saturate(1.12);
}

.top-icon-button::before,
.top-mode-button::before {
  border-radius: inherit !important;
}

.top-bar > .top-icon-button,
.ebook-top-bar > .top-icon-button {
  border-radius: 46% 54% 43% 57% / 56% 45% 55% 44% !important;
}

html.theme-dark .top-icon-button,
body.theme-dark .top-icon-button,
html.theme-dark .top-mode-button,
body.theme-dark .top-mode-button {
  border-color: rgba(255, 244, 226, 0.14) !important;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 244, 226, 0.15), transparent 45%),
    linear-gradient(145deg, rgba(70, 63, 52, 0.58), rgba(30, 39, 38, 0.44) 52%, rgba(40, 32, 27, 0.64)) !important;
  color: rgba(244, 237, 225, 0.86) !important;
  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.32),
    inset 0 1px 2px rgba(255, 244, 226, 0.13),
    inset 0 -2px 6px rgba(0, 0, 0, 0.28) !important;
}

.reader-panel:has(.word-display.has-context) .top-bar {
  background: transparent !important;
  box-shadow: none !important;
}

.reader-panel:has(.word-display.has-context) .brand-block {
  color: rgba(38, 34, 29, 0.68) !important;
  text-shadow: 0 1px 10px rgba(255, 253, 247, 0.42) !important;
}

.reader-panel:has(.word-display.has-context) .bottom-dock {
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  border-radius: 30px 36px 28px 34px / 34px 28px 37px 29px !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.42), transparent 34%),
    radial-gradient(circle at 86% 88%, rgba(196, 170, 125, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.58), rgba(240, 229, 207, 0.38)) !important;
  box-shadow:
    0 18px 42px rgba(45, 38, 28, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.52),
    inset 0 -2px 8px rgba(136, 102, 61, 0.07) !important;
  backdrop-filter: blur(18px) saturate(1.08);
}

html.theme-dark .reader-panel:has(.word-display.has-context) .brand-block,
body.theme-dark .reader-panel:has(.word-display.has-context) .brand-block,
html.theme-dark .has-chapters .title-chapter-button,
body.theme-dark .has-chapters .title-chapter-button,
html.theme-dark .has-book-navigation .title-chapter-button,
body.theme-dark .has-book-navigation .title-chapter-button {
  color: rgba(238, 232, 220, 0.78) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42) !important;
}

html.theme-dark .reader-panel:has(.word-display.has-context) .bottom-dock,
body.theme-dark .reader-panel:has(.word-display.has-context) .bottom-dock {
  border-color: rgba(255, 244, 226, 0.11) !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 244, 226, 0.12), transparent 35%),
    radial-gradient(circle at 88% 86%, rgba(211, 91, 82, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(43, 37, 30, 0.56), rgba(24, 21, 18, 0.42)) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.32),
    inset 0 1px 2px rgba(255, 244, 226, 0.09),
    inset 0 -2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* Follow-up context chrome corrections: title stack, reliable blank-tap visual target, and borderless vellum dock. */
.brand-block {
  width: min(62vw, 390px) !important;
}

.reader-panel:has(.word-display.has-context) .bottom-dock {
  border: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.34), transparent 36%),
    radial-gradient(circle at 86% 88%, rgba(196, 170, 125, 0.1), transparent 40%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.46), rgba(240, 229, 207, 0.28)) !important;
  box-shadow:
    0 18px 42px rgba(45, 38, 28, 0.07),
    inset 0 1px 2px rgba(255, 255, 255, 0.38),
    inset 0 -2px 8px rgba(136, 102, 61, 0.045) !important;
}

.reader-panel:has(.word-display.has-context) .bottom-dock::before,
.reader-panel:has(.word-display.has-context) .bottom-dock::after {
  border: 0 !important;
  outline: 0 !important;
}

html.theme-dark .reader-panel:has(.word-display.has-context) .bottom-dock,
body.theme-dark .reader-panel:has(.word-display.has-context) .bottom-dock {
  border: 0 !important;
  outline: 0 !important;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 244, 226, 0.1), transparent 38%),
    radial-gradient(circle at 88% 86%, rgba(211, 91, 82, 0.08), transparent 40%),
    linear-gradient(145deg, rgba(43, 37, 30, 0.46), rgba(24, 21, 18, 0.32)) !important;
}

/* Title/chapter header should read as plain text only, with centered chapter text and attached chevron. */
.brand-block,
.reader-panel:has(.word-display.has-context) .brand-block,
.top-bar .brand-block {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.brand-block::before,
.brand-block::after,
.title-chapter-button::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Page Mode: keep bottom controls in place but remove the visible dock panel entirely. */
.reader-panel:has(.word-display.has-context) .bottom-dock {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.reader-panel:has(.word-display.has-context) .bottom-dock::before,
.reader-panel:has(.word-display.has-context) .bottom-dock::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.theme-dark .reader-panel:has(.word-display.has-context) .bottom-dock,
body.theme-dark .reader-panel:has(.word-display.has-context) .bottom-dock {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Context header final correction: no top panel, centered chapter line, visible attached chevron. */
.reader-panel:has(.word-display.has-context) .top-bar,
.reader-panel:has(.word-display.has-context) .brand-block,
.reader-panel:has(.word-display.has-context) .title-chapter-button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.reader-panel:has(.word-display.has-context) .top-bar::before,
.reader-panel:has(.word-display.has-context) .top-bar::after,
.reader-panel:has(.word-display.has-context) .brand-block::before,
.reader-panel:has(.word-display.has-context) .brand-block::after,
.reader-panel:has(.word-display.has-context) .title-chapter-button::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Speed mode header parity with Page Mode: no top panel, stacked centered title, attached chevron. */
.reader-panel .top-bar,
.reader-panel .brand-block,
.reader-panel .title-chapter-button {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.reader-panel .top-bar::before,
.reader-panel .top-bar::after,
.reader-panel .brand-block::before,
.reader-panel .brand-block::after,
.reader-panel .title-chapter-button::before {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Speed mode top chrome: remove any remaining rectangular header plate behind title/chapter. */
body:not(.ebook-mode) .reader-panel > .top-bar {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.ebook-mode) .reader-panel > .top-bar::before,
body:not(.ebook-mode) .reader-panel > .top-bar::after,
body:not(.ebook-mode) .reader-panel > .top-bar > .brand-block::before,
body:not(.ebook-mode) .reader-panel > .top-bar > .brand-block::after,
body:not(.ebook-mode) .reader-panel > .top-bar .title-chapter-button::before {
  display: none !important;
  content: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:not(.ebook-mode) .reader-panel > .top-bar > .brand-block,
body:not(.ebook-mode) .reader-panel > .top-bar .title-chapter-button,
body:not(.ebook-mode) .reader-panel > .top-bar .title-chapter-button span,
body:not(.ebook-mode) .reader-panel > .top-bar .title-chapter-button small {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Context text edge softening: fade the readable text near the top without changing layout math. */
.word-display.has-context {
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.28) 14px,
    rgba(0, 0, 0, 0.82) 36px,
    #000 64px,
    #000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0.28) 14px,
    rgba(0, 0, 0, 0.82) 36px,
    #000 64px,
    #000 100%
  );
}

/* Ebook mode header parity: keep controls/text, remove the rectangular title plate. */
.ebook-top-bar,
.ebook-top-bar .ebook-title-block,
.ebook-top-bar .ebook-title-block span,
.ebook-top-bar .ebook-title-block small,
.ebook-title-block,
.ebook-title-block span,
.ebook-title-block small {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.ebook-top-bar::before,
.ebook-top-bar::after,
.ebook-title-block::before,
.ebook-title-block::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Ebook mode final header parity: exact speed/context title stack, no plate, attached chapter chevron. */
body.ebook-mode .ebook-top-bar,
body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton,
body.ebook-mode #ebookTitle,
body.ebook-mode #ebookChapterLabel,
.ebook-reader .ebook-top-bar,
.ebook-reader .ebook-title-block,
.ebook-reader #ebookChapterButton,
.ebook-reader #ebookTitle,
.ebook-reader #ebookChapterLabel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ebook-mode .ebook-top-bar::before,
body.ebook-mode .ebook-top-bar::after,
body.ebook-mode .ebook-title-block::before,
body.ebook-mode .ebook-title-block::after,
body.ebook-mode #ebookChapterButton::before,
body.ebook-mode #ebookChapterButton::after,
body.ebook-mode #ebookTitle::before,
body.ebook-mode #ebookTitle::after,
.ebook-reader .ebook-top-bar::before,
.ebook-reader .ebook-top-bar::after,
.ebook-reader .ebook-title-block::before,
.ebook-reader .ebook-title-block::after,
.ebook-reader #ebookChapterButton::before,
.ebook-reader #ebookChapterButton::after,
.ebook-reader #ebookTitle::before,
.ebook-reader #ebookTitle::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton,
.ebook-reader .ebook-title-block,
.ebook-reader #ebookChapterButton {
  width: min(62vw, 390px) !important;
  max-width: min(62vw, 390px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  row-gap: 1px !important;
  align-items: center !important;
  justify-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  color: inherit !important;
}

body.ebook-mode #ebookTitle,
.ebook-reader #ebookTitle,
body.ebook-mode .ebook-title-block span,
.ebook-reader .ebook-title-block span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  max-width: min(58vw, 360px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.ebook-mode #ebookChapterLabel,
.ebook-reader #ebookChapterLabel,
body.ebook-mode .ebook-title-block small,
.ebook-reader .ebook-title-block small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  max-width: min(50vw, 300px) !important;
  margin: 0 !important;
  padding-right: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.ebook-mode #ebookChapterLabel::after,
.ebook-reader #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block small::after,
.ebook-reader .ebook-title-block small::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  top: 50% !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  opacity: 0.78 !important;
  transform: translateY(-62%) rotate(45deg) !important;
}

/* Prevent transient header plate flash while switching between ebook, context, and speed modes. */
.reader-panel,
.ebook-reader,
.reader-panel .top-bar,
.ebook-reader .ebook-top-bar,
.reader-panel .brand-block,
.ebook-reader .ebook-title-block,
.reader-panel .title-chapter-button,
.ebook-reader #ebookChapterButton {
  transition-property: opacity, filter, transform, color !important;
}

body.mode-transitioning .top-bar,
body.mode-transitioning .ebook-top-bar,
body.mode-transitioning .brand-block,
body.mode-transitioning .ebook-title-block,
body.mode-transitioning .title-chapter-button,
body.mode-transitioning #ebookChapterButton,
body.mode-transitioning #ebookTitle,
body.mode-transitioning #ebookChapterLabel,
.reader-panel.is-mode-transitioning .top-bar,
.reader-panel.is-mode-transitioning .brand-block,
.reader-panel.is-mode-transitioning .title-chapter-button,
.ebook-reader.is-mode-transitioning .ebook-top-bar,
.ebook-reader.is-mode-transitioning .ebook-title-block,
.ebook-reader.is-mode-transitioning #ebookChapterButton {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.mode-transitioning .top-bar::before,
body.mode-transitioning .top-bar::after,
body.mode-transitioning .ebook-top-bar::before,
body.mode-transitioning .ebook-top-bar::after,
body.mode-transitioning .brand-block::before,
body.mode-transitioning .brand-block::after,
body.mode-transitioning .ebook-title-block::before,
body.mode-transitioning .ebook-title-block::after,
body.mode-transitioning .title-chapter-button::before,
body.mode-transitioning .title-chapter-button::after,
body.mode-transitioning #ebookChapterButton::before,
body.mode-transitioning #ebookChapterButton::after,
.reader-panel.is-mode-transitioning .top-bar::before,
.reader-panel.is-mode-transitioning .top-bar::after,
.ebook-reader.is-mode-transitioning .ebook-top-bar::before,
.ebook-reader.is-mode-transitioning .ebook-top-bar::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Ebook mode: expose the shared A +/- text control at bottom-left and keep scrub/progress clear of it. */
body.ebook-mode #textSizeButton {
  position: fixed !important;
  left: max(26px, calc(env(safe-area-inset-left) + 20px)) !important;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 24px)) !important;
  z-index: 95 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.ebook-mode #fontSizePopover {
  position: fixed !important;
  left: max(18px, calc(env(safe-area-inset-left) + 12px)) !important;
  right: auto !important;
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px)) !important;
  z-index: 96 !important;
  pointer-events: auto !important;
}

body.ebook-mode .reader-panel,
body.ebook-mode .bottom-dock,
body.ebook-mode .controls {
  overflow: visible !important;
}

body.ebook-mode .reader-panel #textSizeButton,
body.ebook-mode .reader-panel #fontSizePopover {
  pointer-events: auto !important;
}

body.ebook-mode .ebook-bottom-bar,
body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap,
body.ebook-mode #ebookProgress {
  padding-left: max(84px, calc(env(safe-area-inset-left) + 78px)) !important;
}

body.ebook-mode .ebook-bottom-bar .progress-meta,
body.ebook-mode .ebook-progress .progress-meta,
body.ebook-mode #ebookProgress .progress-meta {
  padding-left: 0 !important;
}

@media (max-width: 430px) {
  body.ebook-mode #textSizeButton {
    left: max(20px, calc(env(safe-area-inset-left) + 16px)) !important;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 20px)) !important;
  }

  body.ebook-mode #fontSizePopover {
    left: max(12px, calc(env(safe-area-inset-left) + 10px)) !important;
    bottom: max(86px, calc(env(safe-area-inset-bottom) + 80px)) !important;
  }

  body.ebook-mode .ebook-bottom-bar,
  body.ebook-mode .ebook-progress,
  body.ebook-mode .ebook-progress-wrap,
  body.ebook-mode #ebookProgress {
    padding-left: max(74px, calc(env(safe-area-inset-left) + 68px)) !important;
  }
}

/* Ebook mode bottom controls: show only the shared A +/- control, never the speed/source page-out controls. */
body.ebook-mode .reader-panel .bottom-dock {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ebook-mode .reader-panel .bottom-dock > :not(.controls),
body.ebook-mode .reader-panel .controls > :not(#textSizeButton):not(#fontSizePopover),
body.ebook-mode .reader-panel .bottom-right-actions,
body.ebook-mode #sourceLinkButton,
body.ebook-mode #pdfPageJumpButton,
body.ebook-mode #ebookSourceLinkButton,
body.ebook-mode #ebookPdfPageJumpButton {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.ebook-mode .reader-panel .controls {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1201 !important;
  display: block !important;
  visibility: visible !important;
  width: 100vw !important;
  height: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.ebook-mode .reader-panel #textSizeButton {
  position: fixed !important;
  left: max(26px, calc(env(safe-area-inset-left) + 20px)) !important;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 24px)) !important;
  z-index: 1202 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

body.ebook-mode .reader-panel #fontSizePopover {
  position: fixed !important;
  left: max(18px, calc(env(safe-area-inset-left) + 12px)) !important;
  right: auto !important;
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px)) !important;
  z-index: 1203 !important;
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.ebook-mode .reader-panel #fontSizePopover[hidden] {
  display: none !important;
}

body.ebook-mode #ebookProgress,
body.ebook-mode #ebookProgressTrack,
body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap,
body.ebook-mode .ebook-bottom-bar {
  margin-left: max(74px, calc(env(safe-area-inset-left) + 68px)) !important;
  width: auto !important;
}

/* Corrective pass: hide external page-out controls, restore ebook scrub layout, and keep ebook top controls inside the screen. */
#sourceLinkButton,
#ebookSourceLinkButton,
#pdfPageJumpButton,
#ebookPdfPageJumpButton,
.reader-panel .bottom-right-actions,
.ebook-reader .ebook-actions .source-link-button,
.ebook-reader .ebook-actions .pdf-page-button {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.has-character-legend:not(.ebook-mode) .reader-panel .bottom-right-actions {
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.ebook-mode #ebookProgress,
body.ebook-mode #ebookProgressTrack,
body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap,
body.ebook-mode .ebook-bottom-bar {
  margin-left: 0 !important;
  padding-left: 0 !important;
  transform: none !important;
}

body.ebook-mode #ebookProgress,
body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap {
  width: min(56vw, 280px) !important;
  max-width: calc(100vw - 168px) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

body.ebook-mode #ebookProgressTrack {
  width: 100% !important;
}

body.ebook-mode .ebook-page,
body.ebook-mode #ebookPage {
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

body.ebook-mode .ebook-top-bar {
  overflow: visible !important;
  padding-left: max(22px, calc(env(safe-area-inset-left) + 18px)) !important;
  padding-right: max(22px, calc(env(safe-area-inset-right) + 18px)) !important;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) var(--top-control-size) !important;
}

body.ebook-mode .ebook-actions,
body.ebook-mode .top-actions {
  overflow: visible !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}

body.ebook-mode #ebookSpeedModeButton,
body.ebook-mode .ebook-actions .top-mode-button {
  position: relative !important;
  right: auto !important;
  inset-inline-end: auto !important;
  margin-right: 0 !important;
  transform: none !important;
}

body.ebook-mode #textSizeButton {
  position: fixed !important;
  left: max(26px, calc(env(safe-area-inset-left) + 20px)) !important;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 24px)) !important;
  z-index: 1500 !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Corrective ebook geometry: match speed/context top buttons and keep ebook scrub centered away from A+/-. */
body.ebook-mode .ebook-top-bar {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
}

body.ebook-mode .ebook-top-bar > .top-icon-button {
  grid-column: 1 !important;
  justify-self: start !important;
  margin-inline-start: var(--top-corner-inset) !important;
  margin-inline-end: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

body.ebook-mode .ebook-actions,
body.ebook-mode .ebook-top-bar > .ebook-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

body.ebook-mode .ebook-actions .top-mode-button,
body.ebook-mode #ebookSpeedModeButton {
  justify-self: end !important;
  margin-inline-start: 0 !important;
  margin-inline-end: var(--top-corner-inset) !important;
  left: auto !important;
  right: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  transform: none !important;
}

body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  grid-column: 2 !important;
  justify-self: center !important;
  max-width: min(58vw, 390px) !important;
  margin: 0 auto !important;
  transform: none !important;
}

body.ebook-mode #ebookProgress,
body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(116px, calc(env(safe-area-inset-bottom) + 108px)) !important;
  z-index: 90 !important;
  width: min(260px, 48vw) !important;
  max-width: min(260px, calc(100vw - 180px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

body.ebook-mode #ebookProgressTrack,
body.ebook-mode .ebook-progress-track {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

body.ebook-mode .ebook-progress-meta,
body.ebook-mode #ebookProgress .progress-meta,
body.ebook-mode .ebook-progress .progress-meta {
  width: 100% !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

body.ebook-mode #textSizeButton {
  left: max(24px, calc(env(safe-area-inset-left) + 18px)) !important;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 22px)) !important;
}

@media (max-width: 430px) {
  body.ebook-mode #ebookProgress,
  body.ebook-mode .ebook-progress,
  body.ebook-mode .ebook-progress-wrap {
    bottom: max(112px, calc(env(safe-area-inset-bottom) + 104px)) !important;
    width: min(238px, 46vw) !important;
    max-width: calc(100vw - 168px) !important;
  }
}

/* Ebook corrective reset: restore centered scrub, centered header text, and full-screen reading surface. */
body.ebook-mode .ebook-reader {
  background: var(--reader-surface) !important;
  background-color: var(--reader-surface) !important;
  background-image: none !important;
  overflow: hidden !important;
}

body.ebook-mode .ebook-page,
body.ebook-mode #ebookPage {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: clamp(28px, 7vw, 58px) !important;
  padding-right: clamp(28px, 7vw, 58px) !important;
  transform: none !important;
}

body.ebook-mode .ebook-bottom-bar,
body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap,
body.ebook-mode #ebookProgress {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap,
body.ebook-mode #ebookProgress {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 82px)) !important;
  z-index: 300 !important;
  width: min(310px, 58vw) !important;
  max-width: calc(100vw - 154px) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
}

body.ebook-mode #ebookProgressTrack,
body.ebook-mode .ebook-progress-track,
body.ebook-mode .ebook-progress .progress-track,
body.ebook-mode #ebookProgress .progress-track {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: rgba(122, 116, 105, 0.42) !important;
  transform: none !important;
}

body.ebook-mode #ebookProgressFill,
body.ebook-mode .ebook-progress-fill,
body.ebook-mode .ebook-progress .progress-fill,
body.ebook-mode #ebookProgress .progress-fill {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: var(--progress-fill-soft) !important;
}

body.ebook-mode .ebook-progress-meta,
body.ebook-mode .ebook-bottom-bar,
body.ebook-mode #ebookProgress .progress-meta,
body.ebook-mode .ebook-progress .progress-meta {
  display: block !important;
  width: 100% !important;
  margin: 9px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

body.ebook-mode .ebook-top-bar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) var(--top-control-size) !important;
  gap: 12px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100vw !important;
  min-height: var(--top-control-size) !important;
  padding-left: var(--screen-pad-left) !important;
  padding-right: var(--screen-pad-right) !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: min(58vw, 390px) !important;
  max-width: calc(100vw - 174px) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  pointer-events: auto !important;
}

body.ebook-mode .ebook-top-bar > .top-icon-button {
  grid-column: 1 !important;
  justify-self: start !important;
  z-index: 2 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  transform: none !important;
}

body.ebook-mode .ebook-actions,
body.ebook-mode .ebook-top-bar > .ebook-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  z-index: 2 !important;
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

body.ebook-mode .ebook-actions .top-mode-button,
body.ebook-mode #ebookSpeedModeButton {
  margin: 0 !important;
  transform: none !important;
}

body.ebook-mode #textSizeButton {
  left: max(24px, calc(env(safe-area-inset-left) + 18px)) !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 18px)) !important;
}

/* Ebook scrub final layout: centered bar, page number below, no overlap with bottom-left font control. */
body.ebook-mode .ebook-bottom-bar {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 78px)) !important;
  z-index: 320 !important;
  width: min(260px, 52vw) !important;
  max-width: calc(100vw - 188px) !important;
  min-width: 150px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 9px !important;
  justify-items: center !important;
  align-items: center !important;
  transform: translateX(-50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

body.ebook-mode #ebookProgress,
body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  gap: 9px !important;
  justify-items: center !important;
  transform: none !important;
}

body.ebook-mode #ebookProgressTrack,
body.ebook-mode .ebook-progress-track,
body.ebook-mode .ebook-progress .progress-track,
body.ebook-mode #ebookProgress .progress-track {
  grid-row: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 8px !important;
  margin: 0 !important;
}

body.ebook-mode .ebook-progress-meta,
body.ebook-mode #ebookProgress .progress-meta,
body.ebook-mode .ebook-progress .progress-meta,
body.ebook-mode .ebook-bottom-bar small,
body.ebook-mode .ebook-bottom-bar output {
  grid-row: 2 !important;
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  color: var(--muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.78rem, 2.7vw, 0.96rem) !important;
  line-height: 1.1 !important;
  text-align: center !important;
  transform: none !important;
}

body.ebook-mode #textSizeButton {
  left: max(22px, calc(env(safe-area-inset-left) + 16px)) !important;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px)) !important;
}

@media (max-width: 430px) {
  body.ebook-mode .ebook-bottom-bar {
    width: min(220px, 50vw) !important;
    max-width: calc(100vw - 172px) !important;
    min-width: 136px !important;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 76px)) !important;
  }
}

/* Ebook final alignment: viewport-centered title/chapter and low, non-overlapping page scrub. */
body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  position: fixed !important;
  left: 50vw !important;
  right: auto !important;
  top: calc(var(--screen-pad-top) + 24px) !important;
  width: min(58vw, 390px) !important;
  max-width: calc(100vw - 176px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  text-align: center !important;
  justify-items: center !important;
}

body.ebook-mode #ebookTitle,
body.ebook-mode .ebook-title-block span,
body.ebook-mode #ebookChapterLabel,
body.ebook-mode .ebook-title-block small {
  justify-self: center !important;
  text-align: center !important;
}

body.ebook-mode .ebook-page,
body.ebook-mode #ebookPage {
  padding-bottom: max(138px, calc(env(safe-area-inset-bottom) + 128px)) !important;
}

body.ebook-mode .ebook-bottom-bar {
  position: fixed !important;
  left: 50vw !important;
  right: auto !important;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  z-index: 340 !important;
  width: min(252px, 48vw) !important;
  max-width: calc(100vw - 190px) !important;
  min-width: 136px !important;
  transform: translateX(-50%) !important;
}

body.ebook-mode #ebookProgress,
body.ebook-mode .ebook-progress,
body.ebook-mode .ebook-progress-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

body.ebook-mode #ebookProgressTrack,
body.ebook-mode .ebook-progress-track,
body.ebook-mode .ebook-progress .progress-track,
body.ebook-mode #ebookProgress .progress-track {
  height: 7px !important;
}

@media (max-width: 430px) {
  body.ebook-mode .ebook-title-block,
  body.ebook-mode #ebookChapterButton {
    width: min(56vw, 330px) !important;
    max-width: calc(100vw - 166px) !important;
  }

  body.ebook-mode .ebook-page,
  body.ebook-mode #ebookPage {
    padding-bottom: max(128px, calc(env(safe-area-inset-bottom) + 118px)) !important;
  }

  body.ebook-mode .ebook-bottom-bar {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 10px)) !important;
    width: min(210px, 46vw) !important;
    max-width: calc(100vw - 174px) !important;
    min-width: 126px !important;
  }
}

/* Ebook header parity correction: use speed/context top-bar geometry as the source of truth. */
body.ebook-mode .ebook-top-bar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: var(--top-control-size) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: min(58vw, 390px) !important;
  max-width: calc(100% - 144px) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  z-index: 1 !important;
  text-align: center !important;
  justify-items: center !important;
}

body.ebook-mode .ebook-top-bar > .top-icon-button {
  grid-column: 1 !important;
  justify-self: start !important;
  margin-inline-start: var(--top-corner-inset) !important;
  margin-inline-end: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 2 !important;
}

body.ebook-mode .ebook-actions,
body.ebook-mode .ebook-top-bar > .ebook-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
  z-index: 2 !important;
}

body.ebook-mode .ebook-actions .top-mode-button,
body.ebook-mode #ebookSpeedModeButton {
  margin-inline-start: 0 !important;
  margin-inline-end: var(--top-corner-inset) !important;
  left: auto !important;
  right: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  transform: none !important;
}

body.ebook-mode #ebookTitle,
body.ebook-mode .ebook-title-block span {
  justify-self: center !important;
  max-width: min(58vw, 360px) !important;
  margin: 0 !important;
  text-align: center !important;
}

body.ebook-mode #ebookChapterLabel,
body.ebook-mode .ebook-title-block small {
  justify-self: center !important;
  max-width: min(50vw, 300px) !important;
  margin: 0 !important;
  padding-right: 18px !important;
  text-align: center !important;
}

/* Ebook page fill correction: reduce bottom reservation so text renders closer to the scrub controls. */
body.ebook-mode .ebook-page,
body.ebook-mode #ebookPage {
  padding-bottom: max(76px, calc(env(safe-area-inset-bottom) + 66px)) !important;
}

body.ebook-mode .ebook-bottom-bar {
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 8px)) !important;
}

@media (max-width: 430px) {
  body.ebook-mode .ebook-page,
  body.ebook-mode #ebookPage {
    padding-bottom: max(70px, calc(env(safe-area-inset-bottom) + 60px)) !important;
  }

  body.ebook-mode .ebook-bottom-bar {
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px)) !important;
  }
}

/* Ebook page fill fine-tune: reclaim about one more text line above the scrub controls. */
body.ebook-mode .ebook-page,
body.ebook-mode #ebookPage {
  padding-bottom: max(42px, calc(env(safe-area-inset-bottom) + 34px)) !important;
}

body.ebook-mode .ebook-bottom-bar {
  bottom: max(8px, calc(env(safe-area-inset-bottom) + 2px)) !important;
}

@media (max-width: 430px) {
  body.ebook-mode .ebook-page,
  body.ebook-mode #ebookPage {
    padding-bottom: max(38px, calc(env(safe-area-inset-bottom) + 30px)) !important;
  }

  body.ebook-mode .ebook-bottom-bar {
    bottom: max(7px, calc(env(safe-area-inset-bottom) + 1px)) !important;
  }
}

/* Ebook title centering correction: center against viewport, independent of left/right header controls. */
body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: calc(var(--screen-pad-top) + 25px) !important;
  width: min(58vw, 390px) !important;
  max-width: calc(100vw - 176px) !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
}

body.ebook-mode #ebookTitle,
body.ebook-mode .ebook-title-block span,
body.ebook-mode #ebookChapterLabel,
body.ebook-mode .ebook-title-block small {
  justify-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

/* Ebook header exact parity: match speed/context placement and typography. */
body.ebook-mode .ebook-top-bar {
  position: relative !important;
  display: grid !important;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: var(--top-control-size) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  z-index: 1 !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100% - 144px) !important;
  margin: 0 !important;
  padding: 5px 8px 5px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  row-gap: 1px !important;
  justify-content: center !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
  transform: translate(-50%, calc(-50% + var(--chapter-title-y-offset, 0px))) !important;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.ebook-mode #ebookTitle,
body.ebook-mode .ebook-title-block span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  max-width: min(58vw, 360px) !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  color: inherit !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.8rem, 2.8vw, 0.94rem) !important;
  font-style: normal !important;
  font-weight: 690 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.ebook-mode #ebookChapterLabel,
body.ebook-mode .ebook-title-block small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  max-width: min(50vw, 300px) !important;
  margin: 0 !important;
  padding-right: 18px !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  color: rgba(91, 87, 80, 0.56) !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(0.75rem, 2.35vw, 0.86rem) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.ebook-mode #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block small::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  top: 50% !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 1.8px solid currentColor !important;
  border-bottom: 1.8px solid currentColor !important;
  opacity: 0.78 !important;
  transform: translateY(-62%) rotate(45deg) !important;
}

html.theme-dark body.ebook-mode #ebookChapterLabel,
body.theme-dark.ebook-mode #ebookChapterLabel,
html.theme-dark body.ebook-mode .ebook-title-block small,
body.theme-dark.ebook-mode .ebook-title-block small {
  color: rgba(238, 232, 220, 0.66) !important;
}

/* Ebook title horizontal correction only: keep current sizing, but center the title stack on the viewport. */
body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  position: fixed !important;
  left: 50vw !important;
  right: auto !important;
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  transform: translate(-50%, -50%) !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - 144px) !important;
  margin: 0 !important;
}

/* Ebook title micro-alignment: match speed/context weight and vertical rhythm exactly. */
body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  row-gap: 1px !important;
}

body.ebook-mode #ebookTitle,
body.ebook-mode .ebook-title-block span {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.8rem, 2.8vw, 0.94rem) !important;
  font-weight: 690 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
}

body.ebook-mode #ebookChapterLabel,
body.ebook-mode .ebook-title-block small {
  font-family: var(--reading-font) !important;
  font-size: clamp(0.75rem, 2.35vw, 0.86rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Hide shared reader font control whenever the home/library/settings main panel is open. */
body:has(#inputPanel.is-open) #textSizeButton,
body:has(#inputPanel.is-open) #fontSizePopover {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Final reading-header parity: one shared visual spec for speed, context, and ebook headers. */
.reader-panel .title-chapter-button,
body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  padding: 5px 8px 5px 14px !important;
  row-gap: 1px !important;
  text-align: center !important;
  font-synthesis-weight: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

.reader-panel .title-chapter-button span,
body.ebook-mode #ebookTitle,
body.ebook-mode .ebook-title-block span {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.8rem, 2.8vw, 0.94rem) !important;
  font-style: normal !important;
  font-weight: 690 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
}

.reader-panel .title-chapter-button small,
body.ebook-mode #ebookChapterLabel,
body.ebook-mode .ebook-title-block small {
  font-family: var(--reading-font) !important;
  font-size: clamp(0.75rem, 2.35vw, 0.86rem) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  transform: translate(-50%, -50%) !important;
}

/* Contents menu header parity: remove the remaining top plate in the chapter/contents screen. */
.chapter-panel .chapter-top-bar,
.chapter-panel .chapter-menu-header,
.chapter-panel .chapter-title-block,
.chapter-panel .title-chapter-button,
.chapter-panel #chapterTitleButton,
.chapter-panel #chapterBookTitle,
.chapter-panel #chapterBookMeta {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.chapter-panel .chapter-top-bar::before,
.chapter-panel .chapter-top-bar::after,
.chapter-panel .chapter-menu-header::before,
.chapter-panel .chapter-menu-header::after,
.chapter-panel .chapter-title-block::before,
.chapter-panel .chapter-title-block::after,
.chapter-panel #chapterTitleButton::before,
.chapter-panel #chapterTitleButton::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.chapter-panel #chapterTitleButton {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100% - 144px) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transition-property: color, opacity, filter !important;
}

/* Stabilize title/chapter tap animations: never transition transform/left/right on header title controls. */
.title-chapter-button,
.brand-block,
.ebook-title-block,
#ebookChapterButton,
#chapterTitleButton {
  transition-property: color, opacity, filter !important;
  will-change: auto !important;
}

.title-chapter-button:active,
.has-chapters .title-chapter-button:active,
.has-book-navigation .title-chapter-button:active,
body.ebook-mode #ebookChapterButton:active,
.chapter-panel #chapterTitleButton:active {
  transform: translate(-50%, -50%) !important;
}

body.ebook-mode .ebook-title-block:active,
body.ebook-mode #ebookChapterButton:active {
  transform: translate(-50%, -50%) !important;
}

/* Header tap stability: prevent title/chapter controls from drifting during taps. */
.reader-panel > .top-bar .brand-block {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, calc(-50% + var(--chapter-title-y-offset, 0px))) !important;
  transition-property: color, opacity, filter !important;
  will-change: auto !important;
}

body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton,
body.ebook-mode .ebook-title-block:active,
body.ebook-mode #ebookChapterButton:active,
body.ebook-mode #ebookChapterButton.is-tactile-press {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  transition-property: color, opacity, filter !important;
  will-change: auto !important;
}

.chapter-panel #chapterTitleButton,
.chapter-panel #chapterTitleButton:active,
.chapter-panel #chapterTitleButton.is-tactile-press {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  transition-property: color, opacity, filter !important;
  will-change: auto !important;
}

/* Context geometry correction: preserve current-word opening; soften only the first few pixels, not a full line. */
.word-display.has-context {
  scroll-padding-top: 0 !important;
  scroll-margin-top: 0 !important;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.34) 0,
    rgba(0, 0, 0, 0.82) 8px,
    #000 18px,
    #000 100%
  ) !important;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.34) 0,
    rgba(0, 0, 0, 0.82) 8px,
    #000 18px,
    #000 100%
  ) !important;
}

.word-display.has-context .context-sentence-scroll {
  scroll-padding-top: 0 !important;
  scroll-margin-top: 0 !important;
}

/* Contents page opening geometry: keep the chapter sheet flush instead of appearing pre-scrolled. */
.chapter-panel,
.chapter-panel .chapter-sheet {
  scroll-padding-top: 0 !important;
  scroll-margin-top: 0 !important;
}

.chapter-panel .chapter-sheet {
  transform: translateY(0) !important;
  margin-top: 0 !important;
  padding-top: max(18px, env(safe-area-inset-top)) !important;
}

.chapter-panel .chapter-top-bar,
.chapter-panel .chapter-menu-header {
  margin-top: 0 !important;
  transform: none !important;
}

/* Contents page safe-area correction: keep top controls fully visible and start contents at the top. */
.chapter-panel {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scroll-padding-top: 0 !important;
}

.chapter-panel .chapter-sheet {
  min-height: 100dvh !important;
  margin-top: 0 !important;
  padding-top: max(116px, calc(env(safe-area-inset-top) + 84px)) !important;
  transform: none !important;
}

.chapter-panel .chapter-top-bar,
.chapter-panel .chapter-menu-header {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  left: max(16px, env(safe-area-inset-left)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  z-index: 120 !important;
  min-height: var(--top-control-size) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: none !important;
}

.chapter-panel .chapter-top-bar > .top-icon-button,
.chapter-panel .chapter-menu-header > .top-icon-button,
.chapter-panel .chapter-actions .top-mode-button {
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.chapter-panel .chapter-screen-heading {
  margin-top: 0 !important;
}

/* Ebook title horizontal correction: center to viewport while preserving matched header typography. */
body.ebook-mode .ebook-title-block,
body.ebook-mode #ebookChapterButton {
  position: fixed !important;
  left: 50vw !important;
  right: auto !important;
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  transform: translate(-50%, -50%) !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - 144px) !important;
  margin: 0 !important;
}

/* Contents body clearance: keep fixed top controls in place, move the contents body below them. */
.chapter-panel .chapter-sheet {
  padding-top: max(164px, calc(env(safe-area-inset-top) + 132px)) !important;
}

.chapter-panel .chapter-screen-heading {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 430px) {
  .chapter-panel .chapter-sheet {
    padding-top: max(154px, calc(env(safe-area-inset-top) + 122px)) !important;
  }
}

/* Contents overlap fix: the body heading must clear the fixed chapter top bar/title row. */
.chapter-panel .chapter-screen-heading {
  position: relative !important;
  z-index: 1 !important;
  margin-top: max(92px, calc(env(safe-area-inset-top) + 74px)) !important;
  padding-top: 0 !important;
}

.chapter-panel .chapter-search {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 430px) {
  .chapter-panel .chapter-screen-heading {
    margin-top: max(86px, calc(env(safe-area-inset-top) + 68px)) !important;
  }
}

/* Contents scroll model correction: fixed header, body scroll starts below it, no scroll-back blank zone. */
.chapter-panel {
  position: fixed !important;
  inset: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

.chapter-panel .chapter-sheet {
  position: absolute !important;
  top: max(132px, calc(env(safe-area-inset-top) + 92px)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-right: max(16px, env(safe-area-inset-right)) !important;
  padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
  padding-left: max(16px, env(safe-area-inset-left)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.chapter-panel .chapter-top-bar,
.chapter-panel .chapter-menu-header {
  position: fixed !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  left: max(16px, env(safe-area-inset-left)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  z-index: 200 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.chapter-panel .chapter-screen-heading {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.chapter-panel .chapter-search {
  margin-top: clamp(18px, 2.4vh, 24px) !important;
}

@media (max-width: 430px) {
  .chapter-panel .chapter-sheet {
    top: max(122px, calc(env(safe-area-inset-top) + 82px)) !important;
  }
}

/* Final contents overlay layout: shared top chrome, clean scroll body, no scroll-back spacer. */
.chapter-panel {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

.chapter-panel .chapter-menu-header,
.chapter-panel .chapter-top-bar {
  position: fixed !important;
  top: var(--screen-pad-top) !important;
  left: var(--screen-pad-x) !important;
  right: var(--screen-pad-x) !important;
  width: auto !important;
  height: var(--top-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  z-index: 300 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.chapter-panel .chapter-menu-header::before,
.chapter-panel .chapter-menu-header::after,
.chapter-panel .chapter-top-bar::before,
.chapter-panel .chapter-top-bar::after {
  display: none !important;
  content: none !important;
}

.chapter-panel .chapter-close-button,
.chapter-panel .chapter-actions {
  position: absolute !important;
  top: 50% !important;
  z-index: 2 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.chapter-panel .chapter-close-button {
  left: 0 !important;
  transform: translateY(-50%) !important;
}

.chapter-panel .chapter-actions {
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  transform: translateY(-50%) !important;
}

.chapter-panel .chapter-title-block,
.chapter-panel #chapterTitleButton {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - (2 * var(--screen-pad-x)) - (2 * var(--top-control-size)) - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: center !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.chapter-panel #chapterBookTitle,
.chapter-panel #chapterBookMeta {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.chapter-panel .chapter-sheet {
  position: absolute !important;
  top: calc(var(--screen-pad-top) + var(--top-control-size) + clamp(22px, 3.2vh, 38px)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 var(--screen-pad-x) max(32px, env(safe-area-inset-bottom)) var(--screen-pad-x) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  scroll-padding-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-sheet > :first-child:not(.chapter-menu-header):not(.chapter-top-bar),
.chapter-panel .chapter-screen-heading,
.chapter-panel .chapter-heading,
.chapter-panel .contents-heading {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.chapter-panel .chapter-screen-heading {
  margin-bottom: clamp(18px, 2.6vh, 28px) !important;
}

.chapter-panel .chapter-search {
  margin-top: 0 !important;
}

@media (max-width: 430px) {
  .chapter-panel .chapter-title-block,
  .chapter-panel #chapterTitleButton {
    max-width: calc(100vw - (2 * var(--screen-pad-x)) - (2 * var(--top-control-size)) - 18px) !important;
  }
}

/* Contents overlay correction v2: keep header in the scroll model so it cannot vanish or create phantom top space. */
.chapter-panel {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.chapter-panel .chapter-sheet {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 var(--screen-pad-x) max(32px, env(safe-area-inset-bottom)) var(--screen-pad-x) !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  scroll-padding-top: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-menu-header,
.chapter-panel .chapter-top-bar {
  position: sticky !important;
  top: var(--screen-pad-top) !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  height: var(--top-control-size) !important;
  margin: var(--screen-pad-top) 0 clamp(22px, 3.2vh, 38px) !important;
  padding: 0 !important;
  display: block !important;
  z-index: 300 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.chapter-panel .chapter-close-button,
.chapter-panel .chapter-actions {
  position: absolute !important;
  top: 50% !important;
  z-index: 2 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.chapter-panel .chapter-close-button {
  left: 0 !important;
  transform: translateY(-50%) !important;
}

.chapter-panel .chapter-actions {
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  transform: translateY(-50%) !important;
}

.chapter-panel .chapter-title-block,
.chapter-panel #chapterTitleButton {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - (2 * var(--screen-pad-x)) - (2 * var(--top-control-size)) - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  text-align: center !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.chapter-panel .chapter-menu-header::before,
.chapter-panel .chapter-menu-header::after,
.chapter-panel .chapter-top-bar::before,
.chapter-panel .chapter-top-bar::after,
.chapter-panel .chapter-title-block::before,
.chapter-panel .chapter-title-block::after {
  display: none !important;
  content: none !important;
}

.chapter-panel .chapter-screen-heading,
.chapter-panel .chapter-heading,
.chapter-panel .contents-heading {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.chapter-panel .chapter-screen-heading {
  margin-bottom: clamp(18px, 2.6vh, 28px) !important;
}

.chapter-panel .chapter-search {
  margin-top: 0 !important;
}

@media (max-width: 430px) {
  .chapter-panel .chapter-menu-header,
  .chapter-panel .chapter-top-bar {
    margin-bottom: clamp(18px, 2.8vh, 30px) !important;
  }

  .chapter-panel .chapter-title-block,
  .chapter-panel #chapterTitleButton {
    max-width: calc(100vw - (2 * var(--screen-pad-x)) - (2 * var(--top-control-size)) - 18px) !important;
  }
}

/* Authoritative reading chrome + contents overlay cleanup. Keep this after older iterative overrides. */
.reader-panel > .top-bar #chapterButton,
body.ebook-mode #ebookChapterButton,
body.ebook-mode .ebook-title-block,
.pdf-source-panel > .pdf-source-sheet > .pdf-source-header .pdf-source-title-block {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - (2 * var(--screen-pad-x)) - (2 * var(--top-control-size)) - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 8px 5px 14px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  text-align: center !important;
  overflow: hidden !important;
  transform: translate(-50%, -50%) !important;
  transition-property: color, opacity, filter !important;
  will-change: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-synthesis-weight: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

body.ebook-mode #ebookChapterButton,
body.ebook-mode .ebook-title-block {
  position: fixed !important;
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  left: 50vw !important;
}

.reader-panel > .top-bar #chapterButton:active,
.reader-panel > .top-bar #chapterButton.is-tactile-press,
.reader-panel > .top-bar #chapterButton[aria-expanded="true"],
.reader-panel > .top-bar #chapterButton[aria-expanded="true"]:active,
body.ebook-mode #ebookChapterButton:active,
body.ebook-mode #ebookChapterButton.is-tactile-press,
body.ebook-mode .ebook-title-block:active {
  transform: translate(-50%, -50%) !important;
}

.reader-panel > .top-bar #chapterButton::before,
.reader-panel > .top-bar #chapterButton::after,
body.ebook-mode #ebookChapterButton::before,
body.ebook-mode #ebookChapterButton::after,
body.ebook-mode .ebook-title-block::before,
body.ebook-mode .ebook-title-block::after {
  display: none !important;
  content: none !important;
}

.reader-panel > .top-bar #chapterButton #tagline,
body.ebook-mode #ebookChapterButton #ebookTitle,
body.ebook-mode .ebook-title-block #ebookTitle,
body.ebook-mode .ebook-title-block span,
.pdf-source-panel .pdf-source-title-block > span {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.8rem, 2.8vw, 0.94rem) !important;
  font-style: normal !important;
  font-weight: 690 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail,
body.ebook-mode #ebookChapterButton #ebookChapterLabel,
body.ebook-mode .ebook-title-block #ebookChapterLabel,
body.ebook-mode .ebook-title-block small,
.pdf-source-panel .pdf-source-title-block > small {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: visible !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(0.75rem, 2.35vw, 0.86rem) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail::after,
body.ebook-mode #ebookChapterButton #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block small::after {
  content: "" !important;
  display: inline-block !important;
  width: 0.62em !important;
  height: 0.62em !important;
  margin-left: 0.38em !important;
  border-right: 0.13em solid currentColor !important;
  border-bottom: 0.13em solid currentColor !important;
  transform: translateY(-0.18em) rotate(45deg) !important;
  opacity: 0.72 !important;
  vertical-align: middle !important;
}

.chapter-panel {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  background: var(--paper, var(--reader-surface, #191714)) !important;
  color: var(--ink, #eee8dc) !important;
}

.chapter-panel .chapter-sheet {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: calc(var(--screen-pad-top) + var(--top-control-size) + clamp(32px, 5vh, 54px)) var(--screen-pad-x) max(32px, env(safe-area-inset-bottom)) var(--screen-pad-x) !important;
  display: block !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  transform: none !important;
  scroll-padding-top: 0 !important;
  background: var(--paper, var(--reader-surface, #191714)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-menu-header,
.chapter-panel .chapter-top-bar {
  position: fixed !important;
  top: var(--screen-pad-top) !important;
  left: var(--screen-pad-x) !important;
  right: var(--screen-pad-x) !important;
  width: auto !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  z-index: 300 !important;
  overflow: visible !important;
  pointer-events: none !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.chapter-panel .chapter-menu-header::before,
.chapter-panel .chapter-menu-header::after,
.chapter-panel .chapter-top-bar::before,
.chapter-panel .chapter-top-bar::after,
.chapter-panel .chapter-title-block::before,
.chapter-panel .chapter-title-block::after,
.chapter-panel #chapterTitleButton::before,
.chapter-panel #chapterTitleButton::after {
  display: none !important;
  content: none !important;
}

.chapter-panel .chapter-close-button,
.chapter-panel .chapter-actions {
  position: absolute !important;
  top: 50% !important;
  z-index: 2 !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.chapter-panel .chapter-close-button {
  left: 0 !important;
  transform: translateY(-50%) !important;
}

.chapter-panel .chapter-actions {
  right: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  transform: translateY(-50%) !important;
}

.chapter-panel #chapterTitleButton,
.chapter-panel .chapter-title-block {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - (2 * var(--screen-pad-x)) - (2 * var(--top-control-size)) - 28px) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 5px 8px 5px 14px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  text-align: center !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  transform: translate(-50%, -50%) !important;
  transition-property: color, opacity, filter !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.chapter-panel #chapterBookTitle {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.8rem, 2.8vw, 0.94rem) !important;
  font-weight: 690 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
}

.chapter-panel #chapterBookMeta {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(0.75rem, 2.35vw, 0.86rem) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.chapter-panel .chapter-screen-heading,
.chapter-panel .chapter-heading,
.chapter-panel .contents-heading {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(20px, 3vh, 32px) !important;
  padding-top: 0 !important;
  background: transparent !important;
}

.chapter-panel .chapter-screen-heading h2,
.chapter-panel .chapter-screen-heading p {
  display: block !important;
}

.chapter-panel .chapter-screen-heading p {
  margin-top: 6px !important;
}

.chapter-panel .chapter-search {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  margin-bottom: clamp(16px, 2.6vh, 26px) !important;
}

.chapter-panel .chapter-current-card,
.chapter-panel .chapter-journey-card {
  margin-top: 0 !important;
  margin-bottom: clamp(16px, 2.6vh, 26px) !important;
}

.chapter-panel .chapter-list-heading {
  margin-top: clamp(14px, 2vh, 22px) !important;
  margin-bottom: clamp(10px, 1.8vh, 16px) !important;
}

.chapter-panel .chapter-list {
  padding-top: 0 !important;
}

@media (max-width: 430px) {
  .reader-panel > .top-bar #chapterButton,
  body.ebook-mode #ebookChapterButton,
  body.ebook-mode .ebook-title-block,
  .chapter-panel #chapterTitleButton,
  .chapter-panel .chapter-title-block {
    max-width: calc(100vw - (2 * var(--screen-pad-x)) - (2 * var(--top-control-size)) - 18px) !important;
  }

  .chapter-panel .chapter-sheet {
    padding-top: calc(var(--screen-pad-top) + var(--top-control-size) + clamp(24px, 4vh, 42px)) !important;
  }
}

/* Last-mile specificity fix: beat older theme gradients and stale title child sizing. */
html.theme-dark .chapter-panel,
body.theme-dark .chapter-panel,
html.theme-dark .chapter-panel .chapter-sheet,
body.theme-dark .chapter-panel .chapter-sheet,
.chapter-panel,
.chapter-panel .chapter-sheet {
  background: var(--paper, var(--reader-surface, #191714)) !important;
  background-color: var(--paper, var(--reader-surface, #191714)) !important;
  background-image: none !important;
}

html:not(.theme-dark) .chapter-panel,
body:not(.theme-dark) .chapter-panel,
html:not(.theme-dark) .chapter-panel .chapter-sheet,
body:not(.theme-dark) .chapter-panel .chapter-sheet {
  background: var(--paper, #f6f1e8) !important;
  background-color: var(--paper, #f6f1e8) !important;
  background-image: none !important;
}

.reader-panel > .top-bar #chapterButton #tagline,
.reader-panel > .top-bar #chapterButton #speedHeaderDetail,
body.ebook-mode #ebookChapterButton #ebookTitle,
body.ebook-mode #ebookChapterButton #ebookChapterLabel,
body.ebook-mode .ebook-title-block #ebookTitle,
body.ebook-mode .ebook-title-block #ebookChapterLabel,
body.ebook-mode .ebook-title-block span,
body.ebook-mode .ebook-title-block small,
.chapter-panel #chapterBookTitle,
.chapter-panel #chapterBookMeta {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Contents final alignment: centered title chrome plus home-like side gutters. */
.chapter-panel {
  --contents-edge-gap: clamp(14px, 3.6vw, 20px);
}

.chapter-panel .chapter-sheet {
  padding-right: max(var(--contents-edge-gap), env(safe-area-inset-right)) !important;
  padding-left: max(var(--contents-edge-gap), env(safe-area-inset-left)) !important;
}

.chapter-panel .chapter-menu-header,
.chapter-panel .chapter-top-bar {
  left: max(var(--contents-edge-gap), env(safe-area-inset-left)) !important;
  right: max(var(--contents-edge-gap), env(safe-area-inset-right)) !important;
}

.chapter-panel #chapterTitleButton,
.chapter-panel .chapter-title-block {
  position: fixed !important;
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  left: 50vw !important;
  right: auto !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - (2 * var(--contents-edge-gap)) - (2 * var(--top-control-size)) - 28px) !important;
  transform: translate(-50%, -50%) !important;
}

.chapter-panel .chapter-search,
.chapter-panel .chapter-current-card,
.chapter-panel .chapter-journey-card,
.chapter-panel .chapter-list-heading,
.chapter-panel .chapter-list,
.chapter-panel .chapter-screen-heading {
  width: 100% !important;
  max-width: none !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

/* Contents top-lock: do not inherit reading-mode vertical offsets inside the contents overlay. */
.chapter-panel {
  --contents-edge-gap: clamp(14px, 3.6vw, 20px);
  --contents-top-inset: max(14px, env(safe-area-inset-top));
  --contents-control-size: 48px;
  --contents-body-clearance: clamp(28px, 4.4vh, 46px);
}

.chapter-panel .chapter-menu-header,
.chapter-panel .chapter-top-bar {
  position: fixed !important;
  top: var(--contents-top-inset) !important;
  left: max(var(--contents-edge-gap), env(safe-area-inset-left)) !important;
  right: max(var(--contents-edge-gap), env(safe-area-inset-right)) !important;
  height: var(--contents-control-size) !important;
  min-height: var(--contents-control-size) !important;
  transform: none !important;
}

.chapter-panel .chapter-close-button,
.chapter-panel .chapter-actions {
  top: 50% !important;
}

.chapter-panel #chapterTitleButton,
.chapter-panel .chapter-title-block {
  position: fixed !important;
  top: calc(var(--contents-top-inset) + (var(--contents-control-size) / 2)) !important;
  left: 50vw !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
}

.chapter-panel .chapter-sheet {
  inset: 0 !important;
  padding-top: calc(var(--contents-top-inset) + var(--contents-control-size) + var(--contents-body-clearance)) !important;
  padding-right: max(var(--contents-edge-gap), env(safe-area-inset-right)) !important;
  padding-left: max(var(--contents-edge-gap), env(safe-area-inset-left)) !important;
  scroll-padding-top: 0 !important;
}

/* Contents chrome button alignment: match reading-mode top control height exactly. */
.chapter-panel .chapter-close-button,
.chapter-panel .chapter-actions {
  position: fixed !important;
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  z-index: 320 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: translateY(-50%) !important;
}

.chapter-panel .chapter-close-button {
  left: max(var(--contents-edge-gap), env(safe-area-inset-left)) !important;
}

.chapter-panel .chapter-actions {
  right: max(var(--contents-edge-gap), env(safe-area-inset-right)) !important;
}

/* Contents close button hard align: match the right contents mode button row. */
html body .chapter-panel #closeChapterButton.top-icon-button.chapter-close-button,
html body .chapter-panel #closeChapterButton.chapter-close-button,
html body .chapter-panel .chapter-menu-header #closeChapterButton {
  position: fixed !important;
  top: calc(var(--contents-top-inset) + (var(--contents-control-size) / 2)) !important;
  left: max(var(--contents-edge-gap), env(safe-area-inset-left)) !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  translate: none !important;
  z-index: 340 !important;
}

/* Context bottom text underlay final: real text extends under a full-bleed translucent dock. */
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) {
  --context-dock-underlap: 0px;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .focus-stage,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .word-display.has-context,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .word-display.has-context.has-context-sentence-scroll {
  overflow: visible !important;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .context-sentence-scroll {
  height: calc(100% + var(--context-dock-underlap, 0px)) !important;
  max-height: none !important;
  margin-bottom: 0 !important;
  padding-bottom: calc(clamp(18px, 5vh, 42px) + var(--context-dock-underlap, 0px)) !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  position: relative !important;
  z-index: 1 !important;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .bottom-dock {
  position: relative !important;
  z-index: 80 !important;
  isolation: isolate !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(18px, env(safe-area-inset-left)) !important;
  padding-right: max(18px, env(safe-area-inset-right)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 34px 34px 0 0 / 30px 30px 0 0 !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.24), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(196, 170, 125, 0.08), transparent 44%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.34), rgba(240, 229, 207, 0.16)) !important;
  box-shadow:
    0 -18px 44px rgba(45, 38, 28, 0.06),
    inset 0 1px 2px rgba(255, 255, 255, 0.26),
    inset 0 -2px 8px rgba(136, 102, 61, 0.04) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
}

html.theme-dark body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .bottom-dock {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 244, 226, 0.08), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(211, 91, 82, 0.06), transparent 44%),
    linear-gradient(145deg, rgba(43, 37, 30, 0.30), rgba(24, 21, 18, 0.14)) !important;
  box-shadow:
    0 -18px 44px rgba(0, 0, 0, 0.22),
    inset 0 1px 2px rgba(255, 244, 226, 0.07),
    inset 0 -2px 8px rgba(0, 0, 0, 0.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .bottom-dock::before,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .bottom-dock::after {
  display: none !important;
  content: none !important;
}

body.ebook-mode .reader-panel .bottom-dock,
body.ebook-mode .reader-panel:has(.word-display.has-context) .bottom-dock {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Speed/context shared bottom vellum and guaranteed context text underlap. */
body:not(.ebook-mode) .reader-panel {
  --shared-bottom-dock-underlap: max(214px, calc(env(safe-area-inset-bottom) + 188px));
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) {
  --context-dock-underlap: var(--shared-bottom-dock-underlap);
}

body:not(.ebook-mode) .reader-panel .bottom-dock {
  position: relative !important;
  z-index: 80 !important;
  isolation: isolate !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(18px, env(safe-area-inset-left)) !important;
  padding-right: max(18px, env(safe-area-inset-right)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 34px 34px 0 0 / 30px 30px 0 0 !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.24), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(196, 170, 125, 0.08), transparent 44%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.34), rgba(240, 229, 207, 0.16)) !important;
  box-shadow:
    0 -18px 44px rgba(45, 38, 28, 0.06),
    inset 0 1px 2px rgba(255, 255, 255, 0.26),
    inset 0 -2px 8px rgba(136, 102, 61, 0.04) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
}

html.theme-dark body:not(.ebook-mode) .reader-panel .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel .bottom-dock {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 244, 226, 0.08), transparent 42%),
    radial-gradient(circle at 88% 86%, rgba(211, 91, 82, 0.06), transparent 44%),
    linear-gradient(145deg, rgba(43, 37, 30, 0.30), rgba(24, 21, 18, 0.14)) !important;
  box-shadow:
    0 -18px 44px rgba(0, 0, 0, 0.22),
    inset 0 1px 2px rgba(255, 244, 226, 0.07),
    inset 0 -2px 8px rgba(0, 0, 0, 0.12) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.12) !important;
  backdrop-filter: blur(16px) saturate(1.12) !important;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .focus-stage,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .word-display.has-context,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .word-display.has-context.has-context-sentence-scroll {
  overflow: visible !important;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .context-sentence-scroll {
  height: calc(100% + var(--context-dock-underlap, var(--shared-bottom-dock-underlap))) !important;
  min-height: calc(100% + var(--context-dock-underlap, var(--shared-bottom-dock-underlap))) !important;
  max-height: none !important;
  padding-bottom: calc(clamp(18px, 5vh, 42px) + var(--context-dock-underlap, var(--shared-bottom-dock-underlap))) !important;
  margin-bottom: calc(-1 * var(--context-dock-underlap, var(--shared-bottom-dock-underlap))) !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
}

body:not(.ebook-mode) .reader-panel .bottom-dock::before,
body:not(.ebook-mode) .reader-panel .bottom-dock::after {
  display: none !important;
  content: none !important;
}

body.ebook-mode .reader-panel .bottom-dock {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Context/speed dock underlap rescue: make the real context scroller paint under the glass dock. */
body:not(.ebook-mode) .reader-panel {
  --context-visual-dock-underlap: max(
    var(--context-dock-underlap, 0px),
    clamp(300px, 30vh, 560px)
  );
}

body:not(.ebook-mode) .app-shell:has(.context-sentence-scroll),
body:not(.ebook-mode) .reader-panel:has(.context-sentence-scroll),
body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context),
body:not(.ebook-mode) .focus-stage:has(.context-sentence-scroll),
body:not(.ebook-mode) .focus-stage:has(#wordDisplay.has-context),
body:not(.ebook-mode) #focusStage:has(.context-sentence-scroll),
body:not(.ebook-mode) #wordDisplay.has-context,
body:not(.ebook-mode) #wordDisplay.has-context.has-context-sentence-scroll {
  overflow: visible !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  contain: none !important;
}

body:not(.ebook-mode) #wordDisplay.has-context.has-context-sentence-scroll .context-sentence-scroll,
body:not(.ebook-mode) .context-sentence-scroll {
  height: calc(100% + var(--context-visual-dock-underlap)) !important;
  min-height: calc(100% + var(--context-visual-dock-underlap)) !important;
  max-height: none !important;
  margin-bottom: calc(-1 * var(--context-visual-dock-underlap)) !important;
  padding-bottom: calc(clamp(18px, 5vh, 42px) + var(--context-visual-dock-underlap)) !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  position: relative !important;
  z-index: 1 !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

body:not(.ebook-mode) .reader-panel .bottom-dock {
  position: relative !important;
  z-index: 90 !important;
  isolation: isolate !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: max(18px, env(safe-area-inset-left)) !important;
  padding-right: max(18px, env(safe-area-inset-right)) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 34px 34px 0 0 / 30px 30px 0 0 !important;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.22), transparent 40%),
    radial-gradient(circle at 88% 90%, rgba(201, 93, 72, 0.10), transparent 46%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.30), rgba(238, 225, 202, 0.12)) !important;
  box-shadow:
    0 -18px 44px rgba(45, 38, 28, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.20),
    inset 0 -2px 8px rgba(136, 102, 61, 0.04) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
}

html.theme-dark body:not(.ebook-mode) .reader-panel .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel .bottom-dock {
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 244, 226, 0.07), transparent 40%),
    radial-gradient(circle at 88% 90%, rgba(211, 91, 82, 0.08), transparent 46%),
    linear-gradient(145deg, rgba(42, 37, 31, 0.42), rgba(18, 16, 14, 0.24)) !important;
  box-shadow:
    0 -18px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 2px rgba(255, 244, 226, 0.08),
    inset 0 -2px 8px rgba(0, 0, 0, 0.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
  backdrop-filter: blur(18px) saturate(1.14) !important;
}

body:not(.ebook-mode) .reader-panel .bottom-dock::before,
body:not(.ebook-mode) .reader-panel .bottom-dock::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.ebook-mode .reader-panel .bottom-dock,
body.ebook-mode .reader-panel .bottom-dock::before,
body.ebook-mode .reader-panel .bottom-dock::after {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Home/dock containment: the reader controls must not bleed over the home panel. */
body:has(#inputPanel.is-open) .input-panel {
  z-index: 180 !important;
}

body:has(#inputPanel.is-open) .reader-panel .bottom-dock,
body:not(.has-loaded-text) .reader-panel .bottom-dock {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Reading dock edge: let the dock itself, not the reader padding, meet the screen bottom. */
body.has-loaded-text:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel {
  padding-bottom: 0 !important;
}

body.has-loaded-text:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel .bottom-dock {
  align-self: end !important;
  margin-bottom: 0 !important;
}

/* Embedded vellum controls: controls belong to the dock material instead of floating above it. */
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) {
  padding-bottom: 0 !important;
}

body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .bottom-dock {
  align-self: end !important;
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px)) !important;
}

body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .controls {
  position: relative !important;
  z-index: 2 !important;
  align-items: center !important;
}

body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .transport-controls,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .transport-controls:hover,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .transport-controls:focus-within {
  width: clamp(226px, 55vw, 270px) !important;
  gap: clamp(20px, 7vw, 38px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .text-size-button,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .round-side-button,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .bottom-mode-button,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .pdf-source-toggle-button,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .source-link-button {
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 42% 58% 49% 51% / 54% 43% 57% 46% !important;
  background:
    radial-gradient(circle at 48% 72%, rgba(130, 94, 54, 0.08), transparent 58%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.06), rgba(111, 88, 56, 0.03)) !important;
  color: rgba(50, 45, 38, 0.94) !important;
  filter: none !important;
  transform: none !important;
  box-shadow:
    inset 0 2px 5px rgba(94, 70, 42, 0.10),
    inset 0 -1px 2px rgba(255, 255, 255, 0.28) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .text-size-button:hover,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .round-side-button:hover,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .bottom-mode-button:hover,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .pdf-source-toggle-button:hover,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .source-link-button:hover,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .text-size-button:focus-visible,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .round-side-button:focus-visible,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .bottom-mode-button:focus-visible,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .pdf-source-toggle-button:focus-visible,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .source-link-button:focus-visible {
  background:
    radial-gradient(circle at 48% 72%, rgba(130, 94, 54, 0.11), transparent 58%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.09), rgba(111, 88, 56, 0.04)) !important;
  box-shadow:
    inset 0 2px 6px rgba(94, 70, 42, 0.13),
    inset 0 -1px 2px rgba(255, 255, 255, 0.30) !important;
  outline: none !important;
}

body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:hover,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:focus,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:focus-visible,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:active {
  width: calc(var(--play-control-size) - 2px) !important;
  min-width: calc(var(--play-control-size) - 2px) !important;
  height: calc(var(--play-control-size) - 2px) !important;
  min-height: calc(var(--play-control-size) - 2px) !important;
  border: 0 !important;
  border-radius: 47% 53% 50% 50% / 51% 47% 53% 49% !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.42), transparent 44%),
    radial-gradient(circle at 50% 70%, rgba(128, 94, 56, 0.12), transparent 62%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.18), rgba(217, 203, 179, 0.10)) !important;
  color: rgba(198, 82, 60, 0.98) !important;
  filter: none !important;
  transform: none !important;
  box-shadow:
    inset 0 4px 9px rgba(109, 82, 49, 0.13),
    inset 0 -2px 3px rgba(255, 255, 255, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button::before {
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 50% 78%, rgba(92, 67, 38, 0.13), transparent 55%),
    linear-gradient(180deg, transparent 28%, rgba(255, 255, 255, 0.12)) !important;
  opacity: 1 !important;
}

body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .control-symbol,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .font-size-mark,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .source-link-symbol,
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .pdf-page-symbol {
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.20))
    drop-shadow(0 -1px 0 rgba(86, 63, 37, 0.08)) !important;
}

html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .text-size-button,
html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .round-side-button,
html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .bottom-mode-button,
html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .pdf-source-toggle-button,
html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .source-link-button,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .text-size-button,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .round-side-button,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .bottom-mode-button,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .pdf-source-toggle-button,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .source-link-button {
  background:
    radial-gradient(circle at 48% 72%, rgba(0, 0, 0, 0.18), transparent 58%),
    linear-gradient(180deg, rgba(255, 236, 204, 0.045), rgba(0, 0, 0, 0.10)) !important;
  color: rgba(244, 229, 204, 0.90) !important;
  box-shadow:
    inset 0 2px 7px rgba(0, 0, 0, 0.26),
    inset 0 -1px 2px rgba(255, 236, 204, 0.10) !important;
}

html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button,
html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:hover,
html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:focus,
html.theme-dark body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:focus-visible,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:hover,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:focus,
body.theme-dark:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .play-control-button:focus-visible {
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 235, 198, 0.12), transparent 44%),
    radial-gradient(circle at 50% 72%, rgba(0, 0, 0, 0.22), transparent 62%),
    linear-gradient(180deg, rgba(255, 226, 180, 0.05), rgba(0, 0, 0, 0.16)) !important;
  color: rgba(234, 88, 64, 0.98) !important;
  box-shadow:
    inset 0 4px 10px rgba(0, 0, 0, 0.30),
    inset 0 -1px 2px rgba(255, 236, 204, 0.10),
    0 1px 0 rgba(255, 236, 204, 0.04) !important;
}

/* Loaded reader dock restore: home stays hidden, real reading states always show the dock flush. */
body:not(.ebook-mode):not(:has(#inputPanel.is-open)) .reader-panel:has(#wordDisplay:not(:has(.empty-reader-state))) .bottom-dock {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin-bottom: 0 !important;
  inset-block-end: 0 !important;
}

/* Embedded dock controls v2: simple loaded-reader selectors so the visual change actually applies. */
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock {
  align-self: end !important;
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px)) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .transport-controls,
body.has-loaded-text:not(.ebook-mode) .reader-panel .transport-controls:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .transport-controls:focus-within {
  width: clamp(226px, 55vw, 270px) !important;
  gap: clamp(20px, 7vw, 38px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-mode-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-mode-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-mode-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-mode-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .pdf-source-toggle-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .pdf-source-toggle-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .pdf-source-toggle-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .pdf-source-toggle-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .source-link-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .source-link-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .source-link-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .source-link-button:focus-visible {
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 42% 58% 49% 51% / 54% 43% 57% 46% !important;
  background:
    radial-gradient(circle at 50% 58%, rgba(132, 93, 52, 0.08), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(97, 71, 38, 0.025)) !important;
  color: rgba(51, 44, 35, 0.96) !important;
  filter: none !important;
  transform: none !important;
  box-shadow:
    inset 0 2px 7px rgba(92, 66, 35, 0.11),
    inset 0 -1px 2px rgba(255, 255, 255, 0.22) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:active {
  width: calc(var(--play-control-size) - 2px) !important;
  min-width: calc(var(--play-control-size) - 2px) !important;
  height: calc(var(--play-control-size) - 2px) !important;
  min-height: calc(var(--play-control-size) - 2px) !important;
  border: 0 !important;
  border-radius: 47% 53% 50% 50% / 51% 47% 53% 49% !important;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.28), transparent 42%),
    radial-gradient(circle at 50% 72%, rgba(123, 88, 48, 0.15), transparent 62%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.12), rgba(173, 143, 98, 0.07)) !important;
  color: rgba(202, 76, 55, 0.98) !important;
  filter: none !important;
  transform: none !important;
  box-shadow:
    inset 0 5px 11px rgba(101, 73, 38, 0.15),
    inset 0 -2px 3px rgba(255, 255, 255, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button::before {
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 50% 78%, rgba(88, 62, 31, 0.14), transparent 54%),
    linear-gradient(180deg, transparent 28%, rgba(255, 255, 255, 0.10)) !important;
  opacity: 1 !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-mode-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .pdf-source-toggle-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .source-link-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-mode-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .pdf-source-toggle-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .source-link-button {
  background:
    radial-gradient(circle at 50% 58%, rgba(0, 0, 0, 0.20), transparent 56%),
    linear-gradient(180deg, rgba(255, 232, 190, 0.035), rgba(0, 0, 0, 0.12)) !important;
  color: rgba(245, 229, 199, 0.92) !important;
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 -1px 2px rgba(255, 232, 190, 0.08) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible {
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 230, 190, 0.10), transparent 42%),
    radial-gradient(circle at 50% 72%, rgba(0, 0, 0, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(255, 226, 180, 0.045), rgba(0, 0, 0, 0.18)) !important;
  color: rgba(235, 87, 62, 0.98) !important;
  box-shadow:
    inset 0 5px 12px rgba(0, 0, 0, 0.34),
    inset 0 -1px 2px rgba(255, 232, 190, 0.08),
    0 1px 0 rgba(255, 232, 190, 0.04) !important;
}

body:has(#inputPanel.is-open) .reader-panel .bottom-dock,
body:not(.has-loaded-text) .reader-panel .bottom-dock {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Dock controls v3: matte raised play button, pure glyph side/font controls. */
body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button:focus-visible {
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: rgba(45, 39, 31, 0.96) !important;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton .arrow-symbol,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton .arrow-symbol {
  width: 29px !important;
  height: 29px !important;
  stroke-width: 2.45 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button .font-size-mark {
  transform: translateY(-1px) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:active {
  width: calc(var(--play-control-size) + 10px) !important;
  min-width: calc(var(--play-control-size) + 10px) !important;
  height: calc(var(--play-control-size) + 10px) !important;
  min-height: calc(var(--play-control-size) + 10px) !important;
  border: 0 !important;
  border-radius: 49% 51% 48% 52% / 51% 48% 52% 49% !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 253, 247, 0.68), rgba(241, 232, 215, 0.58) 42%, rgba(213, 198, 172, 0.50) 100%) !important;
  color: rgba(207, 83, 58, 0.98) !important;
  filter: none !important;
  transform: none !important;
  box-shadow:
    0 16px 24px rgba(69, 51, 28, 0.20),
    0 4px 8px rgba(69, 51, 28, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.46),
    inset 0 -4px 8px rgba(105, 78, 42, 0.13) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button::before {
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 50% 76%, rgba(94, 67, 34, 0.10), transparent 58%) !important;
  opacity: 1 !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button .play-symbol,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button .pause-icon {
  width: 33px !important;
  height: 33px !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.18)) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button {
  background: transparent !important;
  background-image: none !important;
  color: rgba(247, 226, 190, 0.92) !important;
  box-shadow: none !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible {
  background:
    radial-gradient(circle at 50% 27%, rgba(58, 50, 41, 0.96), rgba(34, 30, 25, 0.98) 48%, rgba(19, 17, 15, 0.98) 100%) !important;
  color: rgba(235, 83, 58, 0.98) !important;
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.42),
    0 5px 10px rgba(0, 0, 0, 0.28),
    inset 0 1px 1px rgba(255, 232, 190, 0.12),
    inset 0 -4px 8px rgba(0, 0, 0, 0.28) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button::before,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button::before {
  background:
    radial-gradient(circle at 50% 78%, rgba(0, 0, 0, 0.18), transparent 58%) !important;
}

/* Dock/top glyph polish v4: no tap squares, red mode arrows, stronger home mark. */
body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton,
body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:active,
body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton.is-tactile-press,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:active,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton.is-tactile-press {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton::before,
body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton::after,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton::before,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton .arrow-symbol,
body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton .arrow-symbol {
  color: rgba(44, 38, 30, 0.96) !important;
  stroke-width: 2.65 !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:hover,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:focus,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:focus-visible,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:active,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton.is-tactile-press,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:hover,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:focus,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:focus-visible,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:active,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton.is-tactile-press,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:hover,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:focus,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:focus-visible,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton:active,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton.is-tactile-press,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:hover,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:focus,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:focus-visible,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton:active,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton.is-tactile-press {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton .arrow-symbol,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton .arrow-symbol,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #prevButton .arrow-symbol,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #nextButton .arrow-symbol {
  color: rgba(247, 226, 190, 0.94) !important;
}

#ebookModeButton .mode-switch-symbol,
#ebookSpeedModeButton .mode-switch-symbol,
.reader-panel .top-mode-button .mode-switch-symbol,
.ebook-reader .top-mode-button .mode-switch-symbol {
  color: var(--accent) !important;
  stroke: currentColor !important;
  stroke-width: 2.15 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.10)) !important;
}

html.theme-dark #ebookModeButton .mode-switch-symbol,
html.theme-dark #ebookSpeedModeButton .mode-switch-symbol,
html.theme-dark .reader-panel .top-mode-button .mode-switch-symbol,
html.theme-dark .ebook-reader .top-mode-button .mode-switch-symbol,
body.theme-dark #ebookModeButton .mode-switch-symbol,
body.theme-dark #ebookSpeedModeButton .mode-switch-symbol,
body.theme-dark .reader-panel .top-mode-button .mode-switch-symbol,
body.theme-dark .ebook-reader .top-mode-button .mode-switch-symbol {
  color: rgba(235, 83, 58, 0.98) !important;
}

#textPanelButton .home-symbol,
#ebookBackButton .home-symbol,
.reader-panel .menu-button .home-symbol,
.ebook-reader .menu-button .home-symbol {
  width: 30px !important;
  height: 30px !important;
  stroke-width: 2.05 !important;
  transform: translateY(0.5px) scaleX(1.04) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.12)) !important;
}

#textPanelButton .home-symbol path,
#ebookBackButton .home-symbol path,
.reader-panel .menu-button .home-symbol path,
.ebook-reader .menu-button .home-symbol path {
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

html.theme-dark #textPanelButton .home-symbol,
html.theme-dark #ebookBackButton .home-symbol,
body.theme-dark #textPanelButton .home-symbol,
body.theme-dark #ebookBackButton .home-symbol {
  color: rgba(247, 238, 220, 0.92) !important;
}

/* Header chapter chevron v5: attach chevron to chapter label instead of the right side. */
.reader-panel > .top-bar #chapterButton,
body.ebook-mode #ebookChapterButton,
body.ebook-mode .ebook-title-block {
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
}

.reader-panel > .top-bar #chapterButton::after,
body.ebook-mode #ebookChapterButton::after,
body.ebook-mode .ebook-title-block::after,
.chapter-panel #chapterTitleButton::after,
.chapter-panel .chapter-title-block::after {
  display: none !important;
  content: none !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail,
body.ebook-mode #ebookChapterButton #ebookChapterLabel,
body.ebook-mode .ebook-title-block #ebookChapterLabel,
body.ebook-mode .ebook-title-block small,
.chapter-panel #chapterBookMeta {
  width: auto !important;
  max-width: min(46vw, 220px) !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.38em !important;
  margin-inline: auto !important;
  text-align: center !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail::after,
body.ebook-mode #ebookChapterButton #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block small::after,
.chapter-panel #chapterBookMeta::after {
  content: "" !important;
  flex: 0 0 auto !important;
  display: inline-block !important;
  width: 0.58em !important;
  height: 0.58em !important;
  margin-left: 0 !important;
  border-right: 0.14em solid currentColor !important;
  border-bottom: 0.14em solid currentColor !important;
  opacity: 0.72 !important;
  transform: translateY(-0.13em) rotate(45deg) !important;
  vertical-align: middle !important;
}

/* Speed/context chapter chevron v6: tuck it closer and align with the chapter baseline. */
.reader-panel > .top-bar #chapterButton #speedHeaderDetail {
  gap: 0.24em !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail::after {
  width: 0.52em !important;
  height: 0.52em !important;
  margin-left: 0 !important;
  border-right-width: 0.14em !important;
  border-bottom-width: 0.14em !important;
  transform: translateY(-0.20em) rotate(45deg) !important;
  opacity: 0.76 !important;
}

/* Speed/context chapter chevron v7: pin chevron to the chapter text edge. */
.reader-panel > .top-bar #chapterButton #speedHeaderDetail {
  position: relative !important;
  width: fit-content !important;
  max-width: min(46vw, 220px) !important;
  padding-right: 0.72em !important;
  gap: 0 !important;
  display: block !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail::after {
  position: absolute !important;
  left: calc(100% - 0.46em) !important;
  top: 50% !important;
  width: 0.46em !important;
  height: 0.46em !important;
  margin: 0 !important;
  border-right-width: 0.135em !important;
  border-bottom-width: 0.135em !important;
  transform: translateY(-62%) rotate(45deg) !important;
  opacity: 0.76 !important;
}

/* Ebook header parity v8: match the now-correct speed/context title and chevron geometry. */
body.ebook-mode #ebookChapterButton,
body.ebook-mode .ebook-title-block {
  position: fixed !important;
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  left: 50vw !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - 144px) !important;
  margin: 0 !important;
  padding: 5px 8px 5px 14px !important;
  row-gap: 1px !important;
  align-items: center !important;
  justify-items: center !important;
  text-align: center !important;
}

body.ebook-mode #ebookChapterButton #ebookTitle,
body.ebook-mode .ebook-title-block #ebookTitle,
body.ebook-mode .ebook-title-block span {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.8rem, 2.8vw, 0.94rem) !important;
  font-style: normal !important;
  font-weight: 690 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-align: center !important;
}

body.ebook-mode #ebookChapterButton #ebookChapterLabel,
body.ebook-mode .ebook-title-block #ebookChapterLabel,
body.ebook-mode .ebook-title-block small {
  position: relative !important;
  width: fit-content !important;
  max-width: min(46vw, 220px) !important;
  min-width: 0 !important;
  display: block !important;
  margin-inline: auto !important;
  padding-right: 0.72em !important;
  overflow: visible !important;
  white-space: nowrap !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(0.75rem, 2.35vw, 0.86rem) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body.ebook-mode #ebookChapterButton::after,
body.ebook-mode .ebook-title-block::after {
  display: none !important;
  content: none !important;
}

body.ebook-mode #ebookChapterButton #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block small::after {
  content: "" !important;
  position: absolute !important;
  left: calc(100% - 0.46em) !important;
  top: 50% !important;
  display: inline-block !important;
  width: 0.46em !important;
  height: 0.46em !important;
  margin: 0 !important;
  border-right: 0.135em solid currentColor !important;
  border-bottom: 0.135em solid currentColor !important;
  opacity: 0.76 !important;
  transform: translateY(-62%) rotate(45deg) !important;
  vertical-align: middle !important;
}

/* Ebook header stability and mirrored top buttons v9. */
body.ebook-mode #ebookChapterButton,
body.ebook-mode #ebookChapterButton:hover,
body.ebook-mode #ebookChapterButton:focus,
body.ebook-mode #ebookChapterButton:focus-visible,
body.ebook-mode #ebookChapterButton:active,
body.ebook-mode #ebookChapterButton.is-tactile-press,
body.ebook-mode #ebookChapterButton[aria-expanded="true"],
body.ebook-mode #ebookChapterButton[aria-expanded="true"]:active,
body.ebook-mode .ebook-title-block,
body.ebook-mode .ebook-title-block:hover,
body.ebook-mode .ebook-title-block:focus,
body.ebook-mode .ebook-title-block:focus-visible,
body.ebook-mode .ebook-title-block:active,
body.ebook-mode .ebook-title-block.is-tactile-press {
  left: 50vw !important;
  right: auto !important;
  top: calc(var(--screen-pad-top) + (var(--top-control-size) / 2)) !important;
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  margin: 0 !important;
  transition-property: color, opacity, filter !important;
  will-change: auto !important;
}

.top-icon-button,
.top-mode-button,
.reader-panel .top-icon-button,
.reader-panel .top-mode-button,
.ebook-reader .top-icon-button,
.ebook-reader .top-mode-button {
  width: 58px !important;
  min-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  border-radius: 31% 34% 32% 36% / 34% 30% 36% 32% !important;
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 255, 255, 0.30), transparent 42%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.28), rgba(39, 35, 29, 0.18)) !important;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.20),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -3px 8px rgba(0, 0, 0, 0.14) !important;
  border: 1px solid rgba(255, 244, 226, 0.12) !important;
  overflow: hidden !important;
}

.top-icon-button:hover,
.top-icon-button:focus,
.top-icon-button:focus-visible,
.top-mode-button:hover,
.top-mode-button:focus,
.top-mode-button:focus-visible {
  background:
    radial-gradient(circle at 42% 24%, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.32), rgba(39, 35, 29, 0.20)) !important;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.20),
    inset 0 1px 1px rgba(255, 255, 255, 0.24),
    inset 0 -3px 8px rgba(0, 0, 0, 0.14) !important;
  transform: none !important;
  outline: none !important;
}

html.theme-dark .top-icon-button,
html.theme-dark .top-mode-button,
body.theme-dark .top-icon-button,
body.theme-dark .top-mode-button {
  background:
    radial-gradient(circle at 42% 22%, rgba(255, 244, 226, 0.12), transparent 44%),
    linear-gradient(145deg, rgba(58, 52, 43, 0.92), rgba(25, 23, 20, 0.94)) !important;
  border-color: rgba(255, 244, 226, 0.10) !important;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 1px rgba(255, 244, 226, 0.10),
    inset 0 -3px 8px rgba(0, 0, 0, 0.25) !important;
}

#textPanelButton .home-symbol,
#ebookBackButton .home-symbol,
#closePdfSourceButton .home-symbol {
  width: 31px !important;
  height: 31px !important;
  stroke-width: 2.15 !important;
}

#ebookModeButton .mode-switch-symbol,
#ebookSpeedModeButton .mode-switch-symbol,
.reader-panel .top-mode-button .mode-switch-symbol,
.ebook-reader .top-mode-button .mode-switch-symbol {
  width: 31px !important;
  height: 31px !important;
  stroke-width: 2.2 !important;
}

/* Top buttons v10: return side buttons to round while keeping glyph sizing and title stability. */
.top-icon-button,
.top-mode-button,
.reader-panel .top-icon-button,
.reader-panel .top-mode-button,
.ebook-reader .top-icon-button,
.ebook-reader .top-mode-button,
.top-icon-button:hover,
.top-icon-button:focus,
.top-icon-button:focus-visible,
.top-icon-button:active,
.top-icon-button.is-tactile-press,
.top-mode-button:hover,
.top-mode-button:focus,
.top-mode-button:focus-visible,
.top-mode-button:active,
.top-mode-button.is-tactile-press {
  border-radius: 50% !important;
}

/* Header polish v11: smaller round corner buttons, larger literary title stack. */
.top-icon-button,
.top-mode-button,
.reader-panel .top-icon-button,
.reader-panel .top-mode-button,
.ebook-reader .top-icon-button,
.ebook-reader .top-mode-button {
  width: 52px !important;
  min-width: 52px !important;
  height: 52px !important;
  min-height: 52px !important;
  border-radius: 50% !important;
}

#textPanelButton .home-symbol,
#ebookBackButton .home-symbol,
#closePdfSourceButton .home-symbol {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 2.08 !important;
}

#ebookModeButton .mode-switch-symbol,
#ebookSpeedModeButton .mode-switch-symbol,
.reader-panel .top-mode-button .mode-switch-symbol,
.ebook-reader .top-mode-button .mode-switch-symbol {
  width: 28px !important;
  height: 28px !important;
  stroke-width: 2.12 !important;
}

.reader-panel > .top-bar #chapterButton #tagline,
body.ebook-mode #ebookChapterButton #ebookTitle,
body.ebook-mode .ebook-title-block #ebookTitle,
body.ebook-mode .ebook-title-block span,
.pdf-source-panel .pdf-source-title-block > span {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.96rem, 3.25vw, 1.12rem) !important;
  font-weight: 650 !important;
  line-height: 1.14 !important;
  letter-spacing: 0.012em !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail,
body.ebook-mode #ebookChapterButton #ebookChapterLabel,
body.ebook-mode .ebook-title-block #ebookChapterLabel,
body.ebook-mode .ebook-title-block small,
.pdf-source-panel .pdf-source-title-block > small {
  font-size: clamp(0.84rem, 2.7vw, 0.98rem) !important;
  line-height: 1.16 !important;
}

/* Play button translucency v12: subtly let the dock material breathe through. */
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:active {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 253, 247, 0.54), rgba(241, 232, 215, 0.46) 42%, rgba(213, 198, 172, 0.38) 100%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.04) !important;
  backdrop-filter: blur(7px) saturate(1.04) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible {
  background:
    radial-gradient(circle at 50% 27%, rgba(58, 50, 41, 0.78), rgba(34, 30, 25, 0.82) 48%, rgba(19, 17, 15, 0.84) 100%) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.08) !important;
  backdrop-filter: blur(7px) saturate(1.08) !important;
}

/* Header ornament v13: shared line motif below title/chapter, theme-colored only. */
:root {
  --reader-header-ornament: rgba(197, 73, 57, 0.78);
}

html.theme-dark,
body.theme-dark {
  --reader-header-ornament: rgba(222, 159, 70, 0.92);
}

.reader-panel > .top-bar #chapterButton,
body.ebook-mode #ebookChapterButton,
body.ebook-mode .ebook-title-block {
  overflow: visible !important;
}

.reader-panel > .top-bar #chapterButton::before,
body.ebook-mode #ebookChapterButton::before,
body.ebook-mode .ebook-title-block::before,
.pdf-source-panel > .pdf-source-sheet > .pdf-source-header .pdf-source-title-block::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 13px) !important;
  width: clamp(228px, 58vw, 380px) !important;
  height: 18px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  opacity: 0.9 !important;
  background:
    radial-gradient(circle at 50% 50%, var(--reader-header-ornament) 0 3.5px, transparent 4px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--reader-header-ornament) 52%, transparent) 0 8px, transparent 9px),
    linear-gradient(90deg, transparent 0 4%, color-mix(in srgb, var(--reader-header-ornament) 0%, transparent) 4% 9%, var(--reader-header-ornament) 20%, color-mix(in srgb, var(--reader-header-ornament) 78%, transparent) 39%, transparent 46% 54%, color-mix(in srgb, var(--reader-header-ornament) 78%, transparent) 61%, var(--reader-header-ornament) 80%, color-mix(in srgb, var(--reader-header-ornament) 0%, transparent) 91% 96%, transparent 96% 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 22px 22px, 100% 1.35px !important;
  background-position: center, center, center !important;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--reader-header-ornament) 36%, transparent)) !important;
}

html:not(.theme-dark) .reader-panel > .top-bar #chapterButton::before,
body:not(.theme-dark) .reader-panel > .top-bar #chapterButton::before,
html:not(.theme-dark) body.ebook-mode #ebookChapterButton::before,
body:not(.theme-dark).ebook-mode #ebookChapterButton::before,
html:not(.theme-dark) body.ebook-mode .ebook-title-block::before,
body:not(.theme-dark).ebook-mode .ebook-title-block::before,
html:not(.theme-dark) .pdf-source-panel .pdf-source-title-block::before,
body:not(.theme-dark) .pdf-source-panel .pdf-source-title-block::before {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--reader-header-ornament) 24%, transparent)) !important;
}

/* Context top fade v13: visual fade only, does not change flight/scroll geometry. */
html body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) #focusStage {
  overflow-x: visible !important;
}

.reader-panel .focus-stage:has(.word-display.has-context)::before {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  right: auto !important;
  top: 0 !important;
  width: 100vw !important;
  height: clamp(26px, 4.5vh, 42px) !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 68%, transparent) 24%, transparent 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html.theme-dark .reader-panel .focus-stage:has(.word-display.has-context)::before,
body.theme-dark .reader-panel .focus-stage:has(.word-display.has-context)::before {
  background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 68%, transparent) 24%, transparent 100%) !important;
}

/* Vellum texture and wider glowing header ornament v14. */
body:not(.ebook-mode) .reader-panel .bottom-dock {
  background-image:
    radial-gradient(circle at 16% 14%, rgba(255, 244, 226, 0.07), transparent 40%),
    radial-gradient(circle at 88% 90%, rgba(211, 91, 82, 0.08), transparent 46%),
    radial-gradient(ellipse at 34% 42%, rgba(255, 244, 226, 0.026), transparent 34%),
    radial-gradient(ellipse at 74% 72%, rgba(0, 0, 0, 0.035), transparent 38%),
    linear-gradient(145deg, rgba(42, 37, 31, 0.42), rgba(18, 16, 14, 0.24)) !important;
}

html:not(.theme-dark) body:not(.ebook-mode) .reader-panel .bottom-dock,
body:not(.theme-dark):not(.ebook-mode) .reader-panel .bottom-dock {
  background-image:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.22), transparent 40%),
    radial-gradient(circle at 88% 90%, rgba(201, 93, 72, 0.08), transparent 46%),
    radial-gradient(ellipse at 34% 42%, rgba(255, 255, 255, 0.12), transparent 34%),
    radial-gradient(ellipse at 74% 72%, rgba(118, 82, 36, 0.035), transparent 38%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.30), rgba(238, 225, 202, 0.12)) !important;
}

.reader-panel > .top-bar #chapterButton::before,
body.ebook-mode #ebookChapterButton::before,
body.ebook-mode .ebook-title-block::before {
  width: clamp(282px, 70vw, 470px) !important;
  height: 20px !important;
  opacity: 0.96 !important;
  background-size: 100% 100%, 24px 24px, 100% 1.45px !important;
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--reader-header-ornament) 42%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--reader-header-ornament) 20%, transparent)) !important;
}

/* Vellum texture v15: still subtle, but visible on phone glass. */
body:not(.ebook-mode) .reader-panel .bottom-dock {
  background-image:
    radial-gradient(circle at 16% 14%, rgba(255, 244, 226, 0.09), transparent 40%),
    radial-gradient(circle at 88% 90%, rgba(211, 91, 82, 0.09), transparent 46%),
    radial-gradient(ellipse at 28% 38%, rgba(255, 244, 226, 0.050), transparent 34%),
    radial-gradient(ellipse at 68% 76%, rgba(0, 0, 0, 0.050), transparent 38%),
    linear-gradient(145deg, rgba(42, 37, 31, 0.42), rgba(18, 16, 14, 0.24)) !important;
}

html:not(.theme-dark) body:not(.ebook-mode) .reader-panel .bottom-dock,
body:not(.theme-dark):not(.ebook-mode) .reader-panel .bottom-dock {
  background-image:
    radial-gradient(circle at 16% 14%, rgba(255, 255, 255, 0.24), transparent 40%),
    radial-gradient(circle at 88% 90%, rgba(201, 93, 72, 0.09), transparent 46%),
    radial-gradient(ellipse at 28% 38%, rgba(255, 255, 255, 0.15), transparent 34%),
    radial-gradient(ellipse at 68% 76%, rgba(118, 82, 36, 0.050), transparent 38%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.30), rgba(238, 225, 202, 0.12)) !important;
}

/* Candlelight context glow v15: brighter dark-mode word and sentence selection. */
html.theme-dark .context-line.is-current-line::before,
body.theme-dark .context-line.is-current-line::before,
html.theme-dark .context-sentence-card.is-current-sentence-card::before,
body.theme-dark .context-sentence-card.is-current-sentence-card::before {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 184, 72, 0.18), rgba(86, 49, 18, 0.14) 54%, rgba(35, 27, 19, 0.18) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 86, 0.22),
    0 0 18px rgba(255, 164, 54, 0.16),
    0 0 42px rgba(255, 128, 32, 0.08),
    0 10px 26px rgba(0, 0, 0, 0.18) !important;
}

html.theme-dark .context-token.is-current,
body.theme-dark .context-token.is-current,
html.theme-dark .context-selection-glider,
body.theme-dark .context-selection-glider,
html.theme-dark .context-selection-pulse,
body.theme-dark .context-selection-pulse {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 202, 92, 0.72), rgba(202, 127, 36, 0.52) 68%, rgba(125, 68, 22, 0.42) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 224, 126, 0.62),
    inset 0 1px 2px rgba(255, 238, 180, 0.20),
    0 0 0 3px rgba(255, 177, 66, 0.18),
    0 0 18px rgba(255, 175, 58, 0.42),
    0 0 42px rgba(255, 128, 32, 0.18),
    0 8px 20px rgba(0, 0, 0, 0.22) !important;
  color: rgba(255, 249, 231, 0.99) !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.38),
    0 0 12px rgba(255, 222, 140, 0.22) !important;
}

html.theme-dark .context-token.is-current .context-token-pivot,
body.theme-dark .context-token.is-current .context-token-pivot {
  color: rgba(255, 154, 82, 0.98) !important;
  text-shadow:
    0 0 10px rgba(255, 154, 82, 0.44),
    0 0 22px rgba(255, 118, 42, 0.22) !important;
}

/* Candlelight refinement v16: same strength, softer less-geometric edges. */
html.theme-dark .context-line.is-current-line::before,
body.theme-dark .context-line.is-current-line::before,
html.theme-dark .context-sentence-card.is-current-sentence-card::before,
body.theme-dark .context-sentence-card.is-current-sentence-card::before {
  inset: -0.24em -0.38em !important;
  border-radius: 0.78em 0.62em 0.86em 0.68em / 0.66em 0.84em 0.62em 0.78em !important;
  background:
    radial-gradient(ellipse at 46% 48%, rgba(231, 153, 62, 0.105), rgba(111, 64, 25, 0.082) 58%, rgba(35, 27, 19, 0.12) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(230, 171, 91, 0.12),
    0 0 14px rgba(232, 151, 55, 0.095),
    0 9px 22px rgba(0, 0, 0, 0.14) !important;
}

html.theme-dark .context-token.is-current,
body.theme-dark .context-token.is-current,
html.theme-dark .context-selection-glider,
body.theme-dark .context-selection-glider,
html.theme-dark .context-selection-pulse,
body.theme-dark .context-selection-pulse {
  border-radius: 0.36em 0.31em 0.40em 0.33em / 0.32em 0.39em 0.31em 0.37em !important;
  background:
    radial-gradient(ellipse at 48% 46%, rgba(222, 151, 56, 0.58), rgba(164, 95, 32, 0.46) 68%, rgba(98, 55, 22, 0.34) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(238, 185, 88, 0.36),
    inset 0 1px 2px rgba(255, 232, 166, 0.11),
    0 0 0 2px rgba(216, 140, 50, 0.10),
    0 0 13px rgba(222, 139, 45, 0.20),
    0 7px 18px rgba(0, 0, 0, 0.20) !important;
  color: rgba(255, 247, 229, 0.98) !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.34),
    0 0 8px rgba(239, 184, 94, 0.12) !important;
}

html.theme-dark .context-token.is-current::before,
body.theme-dark .context-token.is-current::before {
  content: "" !important;
  position: absolute !important;
  inset: 8% 7% 10% 9% !important;
  z-index: -1 !important;
  border-radius: 44% 56% 50% 54% / 52% 45% 55% 48% !important;
  pointer-events: none !important;
  background: rgba(255, 213, 132, 0.045) !important;
}

html.theme-dark .context-token.is-current .context-token-pivot,
body.theme-dark .context-token.is-current .context-token-pivot {
  color: rgba(236, 126, 78, 0.96) !important;
  text-shadow:
    0 0 7px rgba(236, 126, 78, 0.24),
    0 1px 1px rgba(0, 0, 0, 0.20) !important;
}

/* Candlelight refinement v17: middle ground warmth with soft organic edges. */
html.theme-dark .context-line.is-current-line::before,
body.theme-dark .context-line.is-current-line::before,
html.theme-dark .context-sentence-card.is-current-sentence-card::before,
body.theme-dark .context-sentence-card.is-current-sentence-card::before {
  inset: -0.24em -0.38em !important;
  border-radius: 0.76em 0.64em 0.84em 0.68em / 0.66em 0.82em 0.64em 0.78em !important;
  background:
    radial-gradient(ellipse at 47% 48%, rgba(238, 162, 67, 0.135), rgba(122, 70, 26, 0.104) 58%, rgba(35, 27, 19, 0.135) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(238, 181, 92, 0.16),
    0 0 15px rgba(238, 154, 54, 0.125),
    0 9px 23px rgba(0, 0, 0, 0.15) !important;
}

html.theme-dark .context-token.is-current,
body.theme-dark .context-token.is-current,
html.theme-dark .context-selection-glider,
body.theme-dark .context-selection-glider,
html.theme-dark .context-selection-pulse,
body.theme-dark .context-selection-pulse {
  border-radius: 0.36em 0.31em 0.40em 0.33em / 0.32em 0.39em 0.31em 0.37em !important;
  background:
    radial-gradient(ellipse at 48% 46%, rgba(232, 160, 60, 0.63), rgba(178, 103, 34, 0.50) 68%, rgba(106, 59, 22, 0.37) 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(246, 191, 92, 0.44),
    inset 0 1px 2px rgba(255, 232, 166, 0.14),
    0 0 0 2px rgba(225, 147, 50, 0.13),
    0 0 14px rgba(230, 143, 45, 0.27),
    0 7px 18px rgba(0, 0, 0, 0.21) !important;
  color: rgba(255, 248, 230, 0.99) !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 0 9px rgba(244, 188, 94, 0.16) !important;
}

html.theme-dark .context-token.is-current::before,
body.theme-dark .context-token.is-current::before {
  background: rgba(255, 213, 132, 0.058) !important;
}

html.theme-dark .context-token.is-current .context-token-pivot,
body.theme-dark .context-token.is-current .context-token-pivot {
  color: rgba(245, 132, 78, 0.97) !important;
  text-shadow:
    0 0 8px rgba(245, 132, 78, 0.30),
    0 1px 1px rgba(0, 0, 0, 0.20) !important;
}

/* Context sentence switch v18: prevent selected-word highlight from settling after sentence scale changes. */
.word-display.has-context.has-context-sentence-scroll.is-context-sentence-switching .context-sentence-card,
.word-display.has-context.has-context-sentence-scroll.is-context-sentence-switching .context-sentence-card.is-current-sentence-card,
.word-display.has-context.has-context-sentence-scroll.is-context-sentence-switching .context-sentence-card.is-near-sentence-card,
.word-display.has-context.has-context-sentence-scroll.is-context-sentence-switching .context-sentence-card.is-mid-sentence-card,
.word-display.has-context.has-context-sentence-scroll.is-context-sentence-switching .context-sentence-card.is-far-sentence-card {
  transition:
    background-color 135ms ease,
    box-shadow 135ms ease,
    opacity 140ms cubic-bezier(0.2, 0.74, 0.22, 1) !important;
}

/* Contents header typography v19: match reader title stack, without the line motif. */

/* Play button translucency v20: slightly more vellum-through, still matte and raised. */
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:active {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 253, 247, 0.44), rgba(241, 232, 215, 0.36) 42%, rgba(213, 198, 172, 0.30) 100%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.03) !important;
  backdrop-filter: blur(8px) saturate(1.03) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:focus-visible {
  background:
    radial-gradient(circle at 50% 27%, rgba(58, 50, 41, 0.66), rgba(34, 30, 25, 0.72) 48%, rgba(19, 17, 15, 0.74) 100%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.07) !important;
  backdrop-filter: blur(8px) saturate(1.07) !important;
}

/* Sentence highlight v21: remove hard outline, keep soft atmospheric lift. */
.context-line.is-current-line::before,
.context-sentence-card.is-current-sentence-card::before {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow:
    0 0 14px rgba(206, 102, 78, 0.10),
    0 9px 22px rgba(0, 0, 0, 0.10) !important;
}

html.theme-dark .context-line.is-current-line::before,
body.theme-dark .context-line.is-current-line::before,
html.theme-dark .context-sentence-card.is-current-sentence-card::before,
body.theme-dark .context-sentence-card.is-current-sentence-card::before {
  border-color: transparent !important;
  outline: 0 !important;
  box-shadow:
    0 0 15px rgba(238, 154, 54, 0.125),
    0 9px 23px rgba(0, 0, 0, 0.15) !important;
}

/* Sentence highlight v22: feather to transparent, no clipped rectangular glow. */
.word-display.has-context,
.word-display.has-context.has-context-sentence-scroll,
.word-display.has-context .context-sentence-scroll,
.word-display.has-context .context-sentence-card,
.word-display.has-context .context-line {
  overflow: visible !important;
}

.context-line.is-current-line,
.context-sentence-card.is-current-sentence-card {
  background: transparent !important;
  box-shadow: none !important;
}

.context-line.is-current-line::before,
.context-sentence-card.is-current-sentence-card::before {
  border: 0 !important;
  outline: 0 !important;
  inset: -0.42em -0.18em !important;
  border-radius: 1.05em 0.92em 1.12em 0.98em / 0.86em 1.08em 0.92em 1.02em !important;
  background:
    radial-gradient(ellipse 82% 74% at 48% 50%,
      rgba(206, 102, 78, 0.115) 0%,
      rgba(206, 102, 78, 0.075) 38%,
      rgba(206, 102, 78, 0.030) 62%,
      rgba(206, 102, 78, 0.000) 84%) !important;
  box-shadow: none !important;
  -webkit-mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, #000 0 50%, rgba(0, 0, 0, 0.55) 68%, transparent 92%) !important;
  mask-image: radial-gradient(ellipse 88% 82% at 50% 50%, #000 0 50%, rgba(0, 0, 0, 0.55) 68%, transparent 92%) !important;
}

html.theme-dark .context-line.is-current-line::before,
body.theme-dark .context-line.is-current-line::before,
html.theme-dark .context-sentence-card.is-current-sentence-card::before,
body.theme-dark .context-sentence-card.is-current-sentence-card::before {
  border: 0 !important;
  outline: 0 !important;
  background:
    radial-gradient(ellipse 82% 74% at 48% 50%,
      rgba(238, 154, 54, 0.145) 0%,
      rgba(190, 108, 36, 0.095) 38%,
      rgba(118, 66, 26, 0.040) 62%,
      rgba(118, 66, 26, 0.000) 84%) !important;
  box-shadow: none !important;
}

/* Sentence highlight v23: replace boxed bed with an edge-faded illumination layer. */
.context-line.is-current-line,
.context-sentence-card.is-current-sentence-card {
  overflow: visible !important;
  isolation: isolate !important;
  contain: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  clip-path: none !important;
}

.context-line.is-current-line::before,
.context-sentence-card.is-current-sentence-card::before {
  content: none !important;
  display: none !important;
}

.context-line.is-current-line::after,
.context-sentence-card.is-current-sentence-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  top: -0.46em !important;
  bottom: -0.46em !important;
  left: 50% !important;
  width: min(94%, calc(100% - 26px)) !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 1.4em 1.08em 1.32em 1.16em / 0.98em 1.26em 1.02em 1.18em !important;
  background:
    radial-gradient(ellipse 62% 74% at 48% 50%,
      rgba(206, 102, 78, 0.120) 0%,
      rgba(206, 102, 78, 0.082) 34%,
      rgba(206, 102, 78, 0.038) 56%,
      rgba(206, 102, 78, 0.012) 72%,
      rgba(206, 102, 78, 0.000) 88%) !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.20) 9%, #000 27%, #000 73%, rgba(0, 0, 0, 0.20) 91%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.20) 9%, #000 27%, #000 73%, rgba(0, 0, 0, 0.20) 91%, transparent 100%) !important;
}

html.theme-dark .context-line.is-current-line::after,
body.theme-dark .context-line.is-current-line::after,
html.theme-dark .context-sentence-card.is-current-sentence-card::after,
body.theme-dark .context-sentence-card.is-current-sentence-card::after {
  background:
    radial-gradient(ellipse 62% 74% at 48% 50%,
      rgba(238, 154, 54, 0.152) 0%,
      rgba(190, 108, 36, 0.104) 34%,
      rgba(118, 66, 26, 0.050) 56%,
      rgba(118, 66, 26, 0.016) 72%,
      rgba(118, 66, 26, 0.000) 88%) !important;
}

/* Sentence highlight v24: restore full-size bed; prevent side clipping instead of shrinking it. */
.reader-panel:has(.word-display.has-context),
.reader-panel:has(.word-display.has-context) .focus-stage,
.reader-panel:has(.word-display.has-context) .word-display.has-context,
.reader-panel:has(.word-display.has-context) .word-display.has-context.has-context-sentence-scroll,
.reader-panel:has(.word-display.has-context) .context-sentence-scroll,
.reader-panel:has(.word-display.has-context) .context-sentence-card,
.reader-panel:has(.word-display.has-context) .context-line {
  overflow-x: visible !important;
  clip-path: none !important;
  contain: none !important;
}

.context-line.is-current-line::after,
.context-sentence-card.is-current-sentence-card::after {
  top: -0.46em !important;
  bottom: -0.46em !important;
  left: -0.72em !important;
  right: -0.72em !important;
  width: auto !important;
  transform: none !important;
  border-radius: 1.06em 0.92em 1.12em 0.98em / 0.86em 1.08em 0.92em 1.02em !important;
  background:
    radial-gradient(ellipse 92% 78% at 48% 50%,
      rgba(206, 102, 78, 0.120) 0%,
      rgba(206, 102, 78, 0.082) 38%,
      rgba(206, 102, 78, 0.038) 62%,
      rgba(206, 102, 78, 0.012) 78%,
      rgba(206, 102, 78, 0.000) 94%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html.theme-dark .context-line.is-current-line::after,
body.theme-dark .context-line.is-current-line::after,
html.theme-dark .context-sentence-card.is-current-sentence-card::after,
body.theme-dark .context-sentence-card.is-current-sentence-card::after {
  background:
    radial-gradient(ellipse 92% 78% at 48% 50%,
      rgba(238, 154, 54, 0.152) 0%,
      rgba(190, 108, 36, 0.104) 38%,
      rgba(118, 66, 26, 0.050) 62%,
      rgba(118, 66, 26, 0.016) 78%,
      rgba(118, 66, 26, 0.000) 94%) !important;
}

/* Sentence highlight v25: keep full-size illumination, move hard paint boundary off-screen. */
.context-line.is-current-line,
.context-sentence-card.is-current-sentence-card {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.context-line.is-current-line::before,
.context-sentence-card.is-current-sentence-card::before {
  content: none !important;
  display: none !important;
}

.context-line.is-current-line::after,
.context-sentence-card.is-current-sentence-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  top: -0.58em !important;
  bottom: -0.58em !important;
  left: -24vw !important;
  right: -24vw !important;
  width: auto !important;
  transform: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background:
    radial-gradient(ellipse 56% 78% at 50% 50%,
      rgba(206, 102, 78, 0.118) 0%,
      rgba(206, 102, 78, 0.088) 30%,
      rgba(206, 102, 78, 0.052) 47%,
      rgba(206, 102, 78, 0.020) 61%,
      rgba(206, 102, 78, 0.000) 74%) !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html.theme-dark .context-line.is-current-line::after,
body.theme-dark .context-line.is-current-line::after,
html.theme-dark .context-sentence-card.is-current-sentence-card::after,
body.theme-dark .context-sentence-card.is-current-sentence-card::after {
  background:
    radial-gradient(ellipse 56% 78% at 50% 50%,
      rgba(238, 154, 54, 0.150) 0%,
      rgba(190, 108, 36, 0.112) 30%,
      rgba(118, 66, 26, 0.064) 47%,
      rgba(118, 66, 26, 0.026) 61%,
      rgba(118, 66, 26, 0.000) 74%) !important;
}

/* Sentence highlight v26: full-width bed with self-feathered side alpha, no scrollport clipping edge. */
.context-line.is-current-line,
.context-sentence-card.is-current-sentence-card {
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.context-line.is-current-line::before,
.context-sentence-card.is-current-sentence-card::before {
  content: none !important;
  display: none !important;
}

.context-line.is-current-line::after,
.context-sentence-card.is-current-sentence-card::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  top: -0.58em !important;
  bottom: -0.58em !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  transform: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 1.08em 0.94em 1.12em 0.98em / 0.86em 1.08em 0.92em 1.02em !important;
  background:
    radial-gradient(ellipse 112% 84% at 50% 50%,
      rgba(206, 102, 78, 0.122) 0%,
      rgba(206, 102, 78, 0.088) 36%,
      rgba(206, 102, 78, 0.045) 60%,
      rgba(206, 102, 78, 0.016) 78%,
      rgba(206, 102, 78, 0.000) 96%) !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 3%,
    rgba(0, 0, 0, 0.72) 8%,
    #000 15%,
    #000 85%,
    rgba(0, 0, 0, 0.72) 92%,
    rgba(0, 0, 0, 0.22) 97%,
    transparent 100%) !important;
  mask-image: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.22) 3%,
    rgba(0, 0, 0, 0.72) 8%,
    #000 15%,
    #000 85%,
    rgba(0, 0, 0, 0.72) 92%,
    rgba(0, 0, 0, 0.22) 97%,
    transparent 100%) !important;
}

html.theme-dark .context-line.is-current-line::after,
body.theme-dark .context-line.is-current-line::after,
html.theme-dark .context-sentence-card.is-current-sentence-card::after,
body.theme-dark .context-sentence-card.is-current-sentence-card::after {
  background:
    radial-gradient(ellipse 112% 84% at 50% 50%,
      rgba(238, 154, 54, 0.154) 0%,
      rgba(190, 108, 36, 0.112) 36%,
      rgba(118, 66, 26, 0.058) 60%,
      rgba(118, 66, 26, 0.020) 78%,
      rgba(118, 66, 26, 0.000) 96%) !important;
}

/* Context scrollport v27: full-bleed paint area, preserved readable text column. */
.reader-panel:has(.word-display.has-context) .context-sentence-scroll {
  --context-scroll-side-pad: calc(14px + clamp(16px, 4vw, 24px));
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: calc(var(--context-scroll-side-pad) + env(safe-area-inset-left)) !important;
  padding-right: calc(var(--context-scroll-side-pad) + env(safe-area-inset-right)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
.reader-panel:has(.word-display.has-context) .context-line.is-current-line::after {
  left: calc(-1 * var(--context-scroll-side-pad, 38px)) !important;
  right: calc(-1 * var(--context-scroll-side-pad, 38px)) !important;
  width: auto !important;
  transform: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background:
    radial-gradient(ellipse 78% 84% at 50% 50%,
      rgba(206, 102, 78, 0.122) 0%,
      rgba(206, 102, 78, 0.090) 34%,
      rgba(206, 102, 78, 0.050) 54%,
      rgba(206, 102, 78, 0.018) 70%,
      rgba(206, 102, 78, 0.000) 88%) !important;
}

html.theme-dark .reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
body.theme-dark .reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
html.theme-dark .reader-panel:has(.word-display.has-context) .context-line.is-current-line::after,
body.theme-dark .reader-panel:has(.word-display.has-context) .context-line.is-current-line::after {
  background:
    radial-gradient(ellipse 78% 84% at 50% 50%,
      rgba(238, 154, 54, 0.154) 0%,
      rgba(190, 108, 36, 0.114) 34%,
      rgba(118, 66, 26, 0.064) 54%,
      rgba(118, 66, 26, 0.024) 70%,
      rgba(118, 66, 26, 0.000) 88%) !important;
}

/* Sentence highlight v28: give vertical glow room so top/bottom fade before the layer boundary. */
.reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
.reader-panel:has(.word-display.has-context) .context-line.is-current-line::after {
  top: -1.38em !important;
  bottom: -1.38em !important;
  background:
    radial-gradient(ellipse 78% 58% at 50% 50%,
      rgba(206, 102, 78, 0.122) 0%,
      rgba(206, 102, 78, 0.090) 32%,
      rgba(206, 102, 78, 0.050) 48%,
      rgba(206, 102, 78, 0.018) 61%,
      rgba(206, 102, 78, 0.000) 76%) !important;
}

html.theme-dark .reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
body.theme-dark .reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
html.theme-dark .reader-panel:has(.word-display.has-context) .context-line.is-current-line::after,
body.theme-dark .reader-panel:has(.word-display.has-context) .context-line.is-current-line::after {
  background:
    radial-gradient(ellipse 78% 58% at 50% 50%,
      rgba(238, 154, 54, 0.154) 0%,
      rgba(190, 108, 36, 0.114) 32%,
      rgba(118, 66, 26, 0.064) 48%,
      rgba(118, 66, 26, 0.024) 61%,
      rgba(118, 66, 26, 0.000) 76%) !important;
}

/* Top corner buttons v29: matte page-set rounded squares, light and dark. */
.reader-panel .top-icon-button,
.reader-panel .top-mode-button,
.ebook-reader .top-icon-button,
.ebook-reader .top-mode-button,
.chapter-panel .top-icon-button,
.chapter-panel .top-mode-button {
  width: 54px !important;
  min-width: 54px !important;
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, rgba(255, 253, 247, 0.86), rgba(239, 229, 211, 0.72)) !important;
  border: 1px solid rgba(111, 82, 45, 0.055) !important;
  color: rgba(17, 17, 15, 0.92) !important;
  box-shadow:
    0 12px 22px rgba(83, 56, 24, 0.12),
    0 3px 8px rgba(83, 56, 24, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(111, 82, 45, 0.045) !important;
  filter: none !important;
  -webkit-backdrop-filter: blur(5px) saturate(0.96) !important;
  backdrop-filter: blur(5px) saturate(0.96) !important;
}

.reader-panel .top-icon-button:hover,
.reader-panel .top-icon-button:focus,
.reader-panel .top-icon-button:focus-visible,
.reader-panel .top-mode-button:hover,
.reader-panel .top-mode-button:focus,
.reader-panel .top-mode-button:focus-visible,
.ebook-reader .top-icon-button:hover,
.ebook-reader .top-icon-button:focus,
.ebook-reader .top-icon-button:focus-visible,
.ebook-reader .top-mode-button:hover,
.ebook-reader .top-mode-button:focus,
.ebook-reader .top-mode-button:focus-visible,
.chapter-panel .top-icon-button:hover,
.chapter-panel .top-icon-button:focus,
.chapter-panel .top-icon-button:focus-visible,
.chapter-panel .top-mode-button:hover,
.chapter-panel .top-mode-button:focus,
.chapter-panel .top-mode-button:focus-visible {
  background:
    linear-gradient(145deg, rgba(255, 253, 247, 0.90), rgba(239, 229, 211, 0.76)) !important;
  box-shadow:
    0 13px 24px rgba(83, 56, 24, 0.13),
    0 3px 8px rgba(83, 56, 24, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(111, 82, 45, 0.045) !important;
  transform: none !important;
  outline: none !important;
}

.reader-panel .top-icon-button .home-symbol,
.ebook-reader .top-icon-button .home-symbol,
.chapter-panel .top-icon-button .home-symbol,
.reader-panel .top-icon-button .home-symbol path,
.ebook-reader .top-icon-button .home-symbol path,
.chapter-panel .top-icon-button .home-symbol path {
  color: rgba(18, 18, 16, 0.92) !important;
  stroke: currentColor !important;
}

html.theme-dark .reader-panel .top-icon-button,
html.theme-dark .reader-panel .top-mode-button,
html.theme-dark .ebook-reader .top-icon-button,
html.theme-dark .ebook-reader .top-mode-button,
html.theme-dark .chapter-panel .top-icon-button,
html.theme-dark .chapter-panel .top-mode-button,
body.theme-dark .reader-panel .top-icon-button,
body.theme-dark .reader-panel .top-mode-button,
body.theme-dark .ebook-reader .top-icon-button,
body.theme-dark .ebook-reader .top-mode-button,
body.theme-dark .chapter-panel .top-icon-button,
body.theme-dark .chapter-panel .top-mode-button {
  background:
    linear-gradient(145deg, rgba(55, 49, 40, 0.82), rgba(24, 22, 19, 0.88)) !important;
  border-color: rgba(255, 244, 226, 0.075) !important;
  color: rgba(246, 239, 228, 0.94) !important;
  box-shadow:
    0 14px 25px rgba(0, 0, 0, 0.32),
    0 3px 8px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.075),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
  filter: none !important;
  -webkit-backdrop-filter: blur(5px) saturate(0.92) !important;
  backdrop-filter: blur(5px) saturate(0.92) !important;
}

html.theme-dark .reader-panel .top-icon-button:hover,
html.theme-dark .reader-panel .top-icon-button:focus,
html.theme-dark .reader-panel .top-icon-button:focus-visible,
html.theme-dark .reader-panel .top-mode-button:hover,
html.theme-dark .reader-panel .top-mode-button:focus,
html.theme-dark .reader-panel .top-mode-button:focus-visible,
html.theme-dark .ebook-reader .top-icon-button:hover,
html.theme-dark .ebook-reader .top-icon-button:focus,
html.theme-dark .ebook-reader .top-icon-button:focus-visible,
html.theme-dark .ebook-reader .top-mode-button:hover,
html.theme-dark .ebook-reader .top-mode-button:focus,
html.theme-dark .ebook-reader .top-mode-button:focus-visible,
body.theme-dark .reader-panel .top-icon-button:hover,
body.theme-dark .reader-panel .top-icon-button:focus,
body.theme-dark .reader-panel .top-icon-button:focus-visible,
body.theme-dark .reader-panel .top-mode-button:hover,
body.theme-dark .reader-panel .top-mode-button:focus,
body.theme-dark .reader-panel .top-mode-button:focus-visible,
body.theme-dark .ebook-reader .top-icon-button:hover,
body.theme-dark .ebook-reader .top-icon-button:focus,
body.theme-dark .ebook-reader .top-icon-button:focus-visible,
body.theme-dark .ebook-reader .top-mode-button:hover,
body.theme-dark .ebook-reader .top-mode-button:focus,
body.theme-dark .ebook-reader .top-mode-button:focus-visible {
  background:
    linear-gradient(145deg, rgba(60, 53, 43, 0.86), rgba(27, 24, 20, 0.90)) !important;
  box-shadow:
    0 15px 26px rgba(0, 0, 0, 0.34),
    0 3px 8px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 244, 226, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
}

html.theme-dark .reader-panel .top-icon-button .home-symbol,
html.theme-dark .ebook-reader .top-icon-button .home-symbol,
html.theme-dark .chapter-panel .top-icon-button .home-symbol,
body.theme-dark .reader-panel .top-icon-button .home-symbol,
body.theme-dark .ebook-reader .top-icon-button .home-symbol,
body.theme-dark .chapter-panel .top-icon-button .home-symbol {
  color: rgba(248, 239, 221, 0.94) !important;
}

/* Ebook bottom controls v30: no scrub bar; flat A+ matches reader modes. */
body.ebook-mode .ebook-bottom-bar .ebook-progress-track,
body.ebook-mode .ebook-bottom-bar .ebook-progress-fill {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ebook-mode .ebook-bottom-bar {
  left: 0 !important;
  right: 0 !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

body.ebook-mode .ebook-bottom-bar .ebook-progress-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(91, 87, 80, 0.66) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.78rem, 2.5vw, 0.92rem) !important;
  line-height: 1.1 !important;
  pointer-events: none !important;
}

html.theme-dark body.ebook-mode .ebook-bottom-bar .ebook-progress-row,
body.theme-dark.ebook-mode .ebook-bottom-bar .ebook-progress-row {
  color: rgba(214, 204, 188, 0.62) !important;
}

body.ebook-mode .reader-panel .bottom-dock {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
  z-index: 88 !important;
}

body.ebook-mode .reader-panel .bottom-dock > :not(.controls),
body.ebook-mode .reader-panel .controls > :not(#textSizeButton):not(#fontSizePopover) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ebook-mode .reader-panel .bottom-dock .controls {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.ebook-mode .reader-panel #textSizeButton,
body.ebook-mode .reader-panel #textSizeButton:hover,
body.ebook-mode .reader-panel #textSizeButton:focus,
body.ebook-mode .reader-panel #textSizeButton:focus-visible,
body.ebook-mode .reader-panel #textSizeButton:active,
body.ebook-mode .reader-panel #textSizeButton.is-tactile-press {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  left: max(38px, calc(env(safe-area-inset-left) + 38px)) !important;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 38px)) !important;
  z-index: 92 !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: rgba(45, 39, 31, 0.96) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.ebook-mode .reader-panel #textSizeButton::before,
body.ebook-mode .reader-panel #textSizeButton::after {
  display: none !important;
  content: none !important;
}

body.ebook-mode .reader-panel #textSizeButton .font-size-mark {
  transform: translateY(-1px) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) !important;
}

html.theme-dark body.ebook-mode .reader-panel #textSizeButton,
html.theme-dark body.ebook-mode .reader-panel #textSizeButton:hover,
html.theme-dark body.ebook-mode .reader-panel #textSizeButton:focus,
html.theme-dark body.ebook-mode .reader-panel #textSizeButton:focus-visible,
body.theme-dark.ebook-mode .reader-panel #textSizeButton,
body.theme-dark.ebook-mode .reader-panel #textSizeButton:hover,
body.theme-dark.ebook-mode .reader-panel #textSizeButton:focus,
body.theme-dark.ebook-mode .reader-panel #textSizeButton:focus-visible {
  background: transparent !important;
  background-image: none !important;
  color: rgba(247, 226, 190, 0.92) !important;
  box-shadow: none !important;
}

/* Ebook bottom controls v31: scrub bars fully gone; A+ aligned with reader control row. */
body.ebook-mode #ebookProgressTrack,
body.ebook-mode #ebookProgressFill,
body.ebook-mode .ebook-progress-track,
body.ebook-mode .ebook-progress-fill,
body.ebook-mode .ebook-bottom-bar [role="slider"],
body.ebook-mode .ebook-bottom-bar .progress-track,
body.ebook-mode .ebook-bottom-bar .progress-fill,
body.ebook-mode .reader-panel .bottom-dock .speed-control,
body.ebook-mode .reader-panel .bottom-dock .slider-row,
body.ebook-mode .reader-panel .bottom-dock .progress-track,
body.ebook-mode .reader-panel .bottom-dock .progress-fill,
body.ebook-mode .reader-panel .bottom-dock input[type="range"],
body.ebook-mode .reader-panel .bottom-dock output,
body.ebook-mode .reader-panel .bottom-dock .progress-meta,
body.ebook-mode .reader-panel .bottom-dock .transport-controls,
body.ebook-mode .reader-panel .bottom-dock .bottom-right-actions,
body.ebook-mode .reader-panel .bottom-dock .round-side-button,
body.ebook-mode .reader-panel .bottom-dock .play-control-button,
body.ebook-mode .reader-panel .bottom-dock .bottom-mode-button,
body.ebook-mode .reader-panel .bottom-dock .pdf-source-toggle-button,
body.ebook-mode .reader-panel .bottom-dock .source-link-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.ebook-mode .ebook-bottom-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  left: 0 !important;
  right: 0 !important;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 30px)) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

body.ebook-mode .ebook-bottom-bar .ebook-progress-row,
body.ebook-mode .ebook-bottom-bar #ebookProgress {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(91, 87, 80, 0.66) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.78rem, 2.5vw, 0.92rem) !important;
  line-height: 1.1 !important;
  pointer-events: none !important;
}

html.theme-dark body.ebook-mode .ebook-bottom-bar .ebook-progress-row,
html.theme-dark body.ebook-mode .ebook-bottom-bar #ebookProgress,
body.theme-dark.ebook-mode .ebook-bottom-bar .ebook-progress-row,
body.theme-dark.ebook-mode .ebook-bottom-bar #ebookProgress {
  color: rgba(214, 204, 188, 0.62) !important;
}

body.ebook-mode .reader-panel .bottom-dock,
body.ebook-mode .reader-panel .bottom-dock .controls {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

body.ebook-mode .reader-panel #textSizeButton,
body.ebook-mode .reader-panel #textSizeButton:hover,
body.ebook-mode .reader-panel #textSizeButton:focus,
body.ebook-mode .reader-panel #textSizeButton:focus-visible,
body.ebook-mode .reader-panel #textSizeButton:active,
body.ebook-mode .reader-panel #textSizeButton.is-tactile-press {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  left: max(24px, calc(env(safe-area-inset-left) + 24px)) !important;
  bottom: max(118px, calc(env(safe-area-inset-bottom) + 108px)) !important;
  z-index: 92 !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: rgba(45, 39, 31, 0.96) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.ebook-mode .reader-panel #textSizeButton::before,
body.ebook-mode .reader-panel #textSizeButton::after {
  display: none !important;
  content: none !important;
}

body.ebook-mode .reader-panel #textSizeButton .font-size-mark {
  transform: translateY(-1px) !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) !important;
}

html.theme-dark body.ebook-mode .reader-panel #textSizeButton,
html.theme-dark body.ebook-mode .reader-panel #textSizeButton:hover,
html.theme-dark body.ebook-mode .reader-panel #textSizeButton:focus,
html.theme-dark body.ebook-mode .reader-panel #textSizeButton:focus-visible,
body.theme-dark.ebook-mode .reader-panel #textSizeButton,
body.theme-dark.ebook-mode .reader-panel #textSizeButton:hover,
body.theme-dark.ebook-mode .reader-panel #textSizeButton:focus,
body.theme-dark.ebook-mode .reader-panel #textSizeButton:focus-visible {
  background: transparent !important;
  background-image: none !important;
  color: rgba(247, 226, 190, 0.92) !important;
  box-shadow: none !important;
}

/* Ebook footer v32: centered page label and non-overlapping flat A+. */
body.ebook-mode .ebook-page {
  padding-bottom: max(108px, calc(env(safe-area-inset-bottom) + 96px)) !important;
}

body.ebook-mode .ebook-bottom-bar {
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  left: 0 !important;
  right: 0 !important;
  bottom: max(42px, calc(env(safe-area-inset-bottom) + 32px)) !important;
  width: 100vw !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 90 !important;
}

body.ebook-mode .ebook-bottom-bar .ebook-progress-row {
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
  transform: none !important;
}

body.ebook-mode .ebook-bottom-bar #ebookProgress {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 150px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  transform: none !important;
}

body.ebook-mode .reader-panel #textSizeButton,
body.ebook-mode .reader-panel #textSizeButton:hover,
body.ebook-mode .reader-panel #textSizeButton:focus,
body.ebook-mode .reader-panel #textSizeButton:focus-visible,
body.ebook-mode .reader-panel #textSizeButton:active,
body.ebook-mode .reader-panel #textSizeButton.is-tactile-press {
  left: max(24px, calc(env(safe-area-inset-left) + 24px)) !important;
  bottom: max(42px, calc(env(safe-area-inset-bottom) + 32px)) !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  place-items: center !important;
}

@media (max-width: 430px) {
  body.ebook-mode .ebook-page {
    padding-bottom: max(116px, calc(env(safe-area-inset-bottom) + 104px)) !important;
  }
}

/* Ebook footer v33: hard-pin page label to viewport center; refine A+ alignment. */
body.ebook-mode .ebook-bottom-bar,
body.ebook-mode .ebook-reader .ebook-bottom-bar {
  position: fixed !important;
  left: 0 !important;
  right: auto !important;
  bottom: max(40px, calc(env(safe-area-inset-bottom) + 30px)) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 30px !important;
  min-height: 30px !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
  z-index: 94 !important;
}

body.ebook-mode .ebook-bottom-bar .ebook-progress-row,
body.ebook-mode .ebook-reader .ebook-bottom-bar .ebook-progress-row {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100vw - 160px) !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

body.ebook-mode .ebook-bottom-bar #ebookProgress,
body.ebook-mode .ebook-reader .ebook-bottom-bar #ebookProgress {
  display: block !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  white-space: nowrap !important;
  transform: none !important;
}

body.ebook-mode .reader-panel #textSizeButton,
body.ebook-mode .reader-panel #textSizeButton:hover,
body.ebook-mode .reader-panel #textSizeButton:focus,
body.ebook-mode .reader-panel #textSizeButton:focus-visible,
body.ebook-mode .reader-panel #textSizeButton:active,
body.ebook-mode .reader-panel #textSizeButton.is-tactile-press {
  left: max(24px, calc(env(safe-area-inset-left) + 24px)) !important;
  bottom: max(39px, calc(env(safe-area-inset-bottom) + 29px)) !important;
  transform: translateY(0) !important;
}

/* Ebook footer v34: reclaim page text area and align A+ with reader footer lane. */
body.ebook-mode .ebook-page {
  padding-bottom: clamp(18px, 2.8vh, 32px) !important;
}

@media (max-width: 430px) {
  body.ebook-mode .ebook-page {
    padding-bottom: clamp(18px, 2.8vh, 32px) !important;
  }
}

body.ebook-mode .ebook-bottom-bar,
body.ebook-mode .ebook-reader .ebook-bottom-bar {
  bottom: max(37px, calc(env(safe-area-inset-bottom) + 27px)) !important;
}

body.ebook-mode .reader-panel #textSizeButton,
body.ebook-mode .reader-panel #textSizeButton:hover,
body.ebook-mode .reader-panel #textSizeButton:focus,
body.ebook-mode .reader-panel #textSizeButton:focus-visible,
body.ebook-mode .reader-panel #textSizeButton:active,
body.ebook-mode .reader-panel #textSizeButton.is-tactile-press {
  left: max(24px, calc(env(safe-area-inset-left) + 24px)) !important;
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 26px)) !important;
  transform: translateY(1px) !important;
}

/* Ebook page shuttle: fixed overlay for tactile page finding without changing pagination geometry. */
body.ebook-mode .ebook-bottom-bar .ebook-progress-row,
body.ebook-mode .ebook-reader .ebook-bottom-bar .ebook-progress-row,
body.ebook-mode .ebook-bottom-bar #ebookProgress,
body.ebook-mode .ebook-reader .ebook-bottom-bar #ebookProgress {
  pointer-events: auto !important;
}

body.ebook-mode .ebook-bottom-bar #ebookProgress,
body.ebook-mode .ebook-reader .ebook-bottom-bar #ebookProgress {
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Book details stack restore: keep the info dialog above the open home panel. */
.book-details-panel:not([hidden]) {
  z-index: 220 !important;
}

/* Topic discovery stack restore: topic pages opened from book info must appear above book info. */
.topic-discovery-panel:not([hidden]) {
  z-index: 240 !important;
}

/* Home reading utilities: compact icon-only buttons on the right. */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) .home-reading-panel {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 2px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card,
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card {
  position: relative !important;
  display: grid !important;
  flex: 0 0 42px !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(105, 88, 65, 0.12) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.78), transparent 52%),
    rgba(246, 239, 226, 0.72) !important;
  box-shadow:
    0 9px 20px rgba(86, 64, 38, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
  color: rgba(75, 62, 46, 0.86) !important;
  text-align: center !important;
  -webkit-tap-highlight-color: transparent !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card > span:not(.home-action-icon),
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card > span:not(.home-action-icon),
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card .menu-chevron,
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card .menu-chevron {
  display: none !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card .home-action-icon,
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card .home-action-icon {
  display: grid !important;
  place-items: center !important;
  justify-self: center !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: currentColor !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card .home-action-icon svg,
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card .home-action-icon svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.95 !important;
}

html.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card,
html.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card,
body.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card,
body.theme-dark .input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card {
  border-color: rgba(230, 202, 150, 0.13) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(244, 222, 176, 0.11), transparent 52%),
    rgba(45, 39, 31, 0.66) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 239, 203, 0.1) !important;
  color: rgba(236, 216, 181, 0.88) !important;
}

/* Home reading utilities v2: top-right icon cluster, no Reading label. */
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #homeReadingLabel {
  display: none !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) .home-section[aria-labelledby="homeReadingLabel"] {
  display: contents !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) .home-reading-panel {
  position: fixed !important;
  top: max(26px, calc(env(safe-area-inset-top) + 16px)) !important;
  right: max(22px, calc(env(safe-area-inset-right) + 18px)) !important;
  z-index: 210 !important;
  width: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 11px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card,
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card {
  flex-basis: 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openSettingsButton.home-reading-card .home-action-icon svg,
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #openStatsButton.home-reading-card .home-action-icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* Home bottom nav + Topic of the Day. */
body:has(#inputPanel.is-open) .input-panel {
  padding-bottom: max(116px, calc(env(safe-area-inset-bottom) + 104px)) !important;
}

.input-panel:not(.is-menu-subview):not(.is-settings-screen) .home-section[aria-labelledby="homeReadingLabel"],
.input-panel:not(.is-menu-subview):not(.is-settings-screen) .home-reading-panel,
.input-panel:not(.is-menu-subview):not(.is-settings-screen) #homeReadingLabel {
  display: none !important;
}

.home-bottom-nav {
  position: fixed;
  left: max(16px, env(safe-area-inset-left));
  right: max(16px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 190;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  min-height: 74px;
  padding: 10px 12px max(10px, calc(env(safe-area-inset-bottom) * 0.28));
  border: 1px solid rgba(105, 88, 65, 0.11);
  border-radius: 26px 26px 24px 24px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.62), transparent 48%),
    rgba(248, 240, 224, 0.84);
  box-shadow:
    0 20px 46px rgba(89, 66, 38, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.58);
  -webkit-backdrop-filter: blur(18px) saturate(1.02);
  backdrop-filter: blur(18px) saturate(1.02);
}

body:not(:has(#inputPanel.is-open)) .home-bottom-nav,
body:has(.book-details-panel:not([hidden])):not(:has(.book-details-viewport.is-active:not([data-navigation-phase="open"]))) .home-bottom-nav,
body:has(.topic-discovery-panel:not([hidden])) .home-bottom-nav,
body.ebook-mode:not(:has(#inputPanel.is-open)) .home-bottom-nav {
  display: none !important;
}

.home-bottom-nav button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: rgba(87, 72, 55, 0.78);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-bottom-nav button svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.home-bottom-nav button:nth-child(4) svg,
.home-bottom-nav button:nth-child(5) svg {
  width: 25px;
  height: 25px;
}

.home-bottom-nav button span {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-bottom-nav button.is-active {
  color: rgba(190, 52, 44, 0.96);
}

html.theme-dark .home-bottom-nav,
body.theme-dark .home-bottom-nav {
  border-color: rgba(230, 202, 150, 0.11);
  background:
    radial-gradient(circle at 18% 0%, rgba(237, 208, 155, 0.1), transparent 48%),
    rgba(39, 34, 27, 0.86);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 239, 203, 0.09);
}

html.theme-dark .home-bottom-nav button,
body.theme-dark .home-bottom-nav button {
  color: rgba(224, 207, 176, 0.76);
}

html.theme-dark .home-bottom-nav button.is-active,
body.theme-dark .home-bottom-nav button.is-active {
  color: rgba(223, 89, 68, 0.98);
}

@media (max-width: 520px) {

  .home-bottom-nav {
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 76px;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 24px 24px 0 0;
  }
}

/* Home Topic of the Day v2: smaller secondary card. */

/* Topic context cleanup: remove developer-facing explanation panels. */
.topic-context-drawer-top,
.topic-context-reasons {
  display: none !important;
}

/* Gutenberg discovery expansion: browsable shelves and book details sheet. */
.gutenberg-browse-shell {
  display: grid;
  gap: clamp(14px, 3vw, 22px);
  margin: clamp(10px, 2.4vw, 18px) 0 clamp(18px, 4vw, 30px);
}

.gutenberg-browse-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: clamp(18px, 4vw, 30px);
  border: 1px solid rgba(128, 92, 66, 0.14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 24%, rgba(192, 61, 48, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 240, 0.9), rgba(244, 233, 214, 0.72));
  box-shadow:
    0 18px 46px rgba(112, 78, 49, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.64);
}

.gutenberg-kicker {
  margin: 0;
  color: rgba(190, 52, 44, 0.92);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.gutenberg-browse-hero h2 {
  margin: 0;
  max-width: 13em;
  color: rgba(34, 30, 25, 0.94);
  font-family: var(--serif-display);
  font-size: clamp(1.82rem, 6vw, 3rem);
  line-height: 0.98;
}

.gutenberg-browse-hero p:not(.gutenberg-kicker) {
  margin: 0;
  max-width: 34em;
  color: rgba(80, 66, 51, 0.76);
  font-family: var(--serif-body);
  font-size: clamp(0.98rem, 2.4vw, 1.1rem);
  line-height: 1.38;
}

.gutenberg-browse-section {
  display: grid;
  gap: 10px;
}

.gutenberg-browse-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
  font-family: var(--ui-font);
}

.gutenberg-browse-section-head strong {
  color: rgba(52, 44, 35, 0.92);
  font-size: 0.76rem;
  font-weight: 830;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gutenberg-browse-section-head span {
  color: rgba(114, 93, 72, 0.66);
  font-size: 0.84rem;
}

.gutenberg-browse-chips,
.gutenberg-reading-lists {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.gutenberg-reading-lists {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
}

.gutenberg-browse-chip {
  display: grid;
  gap: 4px;
  min-height: 72px;
  padding: 13px 14px;
  border: 1px solid rgba(122, 95, 69, 0.13);
  border-radius: 21px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.64), transparent 44%),
    rgba(250, 244, 233, 0.74);
  color: rgba(47, 40, 32, 0.9);
  text-align: left;
  box-shadow: 0 12px 30px rgba(116, 83, 52, 0.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gutenberg-browse-chip strong {
  font-family: var(--serif-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.05;
}

.gutenberg-browse-chip small {
  color: rgba(91, 75, 58, 0.68);
  font-family: var(--serif-body);
  font-size: 0.79rem;
  line-height: 1.18;
}

.gutenberg-browse-chip.is-active {
  border-color: rgba(190, 52, 44, 0.32);
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.72), transparent 44%),
    linear-gradient(135deg, rgba(255, 244, 231, 0.92), rgba(244, 219, 205, 0.74));
  box-shadow:
    0 16px 34px rgba(181, 70, 51, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

#gutenbergList {
  display: grid;
  gap: 12px;
}

.gutenberg-item {
  position: relative;
  border-radius: 24px;
}

.gutenberg-item .gutenberg-book-button {
  width: 100%;
  min-height: 116px;
  padding: 12px 94px 12px 12px !important;
  border-radius: 24px !important;
  align-items: center;
}

.gutenberg-card-chips,
.gutenberg-details-meta,
.gutenberg-detail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.gutenberg-chip,
.gutenberg-detail-chip-row button {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid rgba(174, 73, 58, 0.14);
  border-radius: 999px;
  background: rgba(190, 52, 44, 0.075);
  color: rgba(132, 58, 45, 0.9);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 720;
  letter-spacing: 0.02em;
}

.gutenberg-card-download {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(190, 52, 44, 0.2);
  border-radius: 999px;
  background: rgba(190, 52, 44, 0.92);
  color: #fff8ee;
  font-family: var(--ui-font);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px rgba(178, 54, 42, 0.18);
  cursor: pointer;
}

.gutenberg-card-download:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.gutenberg-details-panel {
  position: fixed;
  inset: 0;
  z-index: 280;
  display: grid;
  place-items: end center;
  padding: clamp(12px, 3vw, 28px);
  background: rgba(20, 16, 12, 0.28);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.gutenberg-details-panel[hidden] {
  display: none !important;
}

.gutenberg-details-sheet {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: clamp(16px, 3vw, 24px);
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  padding: clamp(18px, 4vw, 34px);
  border: 1px solid rgba(123, 93, 67, 0.18);
  border-radius: 34px;
  background:
    radial-gradient(circle at 84% 16%, rgba(190, 52, 44, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(255, 250, 239, 0.96), rgba(245, 234, 214, 0.92));
  color: rgba(38, 32, 26, 0.94);
  box-shadow:
    0 34px 86px rgba(44, 31, 20, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
  overflow-y: auto;
}

.gutenberg-details-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.64);
  color: rgba(66, 52, 40, 0.72);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.gutenberg-details-top {
  display: grid;
  grid-template-columns: minmax(92px, 132px) minmax(0, 1fr);
  gap: clamp(16px, 4vw, 26px);
  align-items: center;
  padding-right: 42px;
}

.gutenberg-details-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 0.68;
  overflow: hidden;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(104, 86, 64, 0.18), rgba(190, 52, 44, 0.12)),
    rgba(250, 244, 233, 0.78);
  box-shadow: 0 18px 34px rgba(87, 62, 39, 0.18);
}

.gutenberg-details-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gutenberg-details-cover span {
  font-family: var(--serif-display);
  font-size: 3rem;
  color: rgba(190, 52, 44, 0.64);
}

.gutenberg-details-title {
  display: grid;
  gap: 8px;
}

.gutenberg-details-title h2 {
  margin: 0;
  color: rgba(28, 25, 21, 0.96);
  font-family: var(--serif-display);
  font-size: clamp(1.9rem, 6vw, 3.2rem);
  line-height: 0.96;
}

.gutenberg-details-title p:not(.gutenberg-kicker) {
  margin: 0;
  color: rgba(86, 70, 54, 0.74);
  font-family: var(--serif-body);
  font-size: clamp(1rem, 2.6vw, 1.14rem);
}

.gutenberg-details-body {
  display: grid;
  gap: 18px;
}

.gutenberg-details-body section {
  display: grid;
  gap: 8px;
}

.gutenberg-details-body h3 {
  margin: 0;
  color: rgba(52, 43, 34, 0.86);
  font-family: var(--ui-font);
  font-size: 0.73rem;
  font-weight: 820;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.gutenberg-details-body p {
  margin: 0;
  color: rgba(66, 53, 41, 0.82);
  font-family: var(--serif-body);
  font-size: clamp(1.03rem, 2.5vw, 1.16rem);
  line-height: 1.45;
}

.gutenberg-details-loading {
  color: rgba(129, 101, 75, 0.64);
  font-family: var(--ui-font);
}

.gutenberg-detail-chip-row button {
  cursor: pointer;
}

.gutenberg-detail-facts {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
}

.gutenberg-detail-facts span {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(122, 95, 69, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.36);
}

.gutenberg-detail-facts strong {
  color: rgba(42, 34, 27, 0.9);
  font-family: var(--serif-display);
  font-size: 0.98rem;
  line-height: 1.08;
}

.gutenberg-detail-facts small {
  color: rgba(103, 82, 62, 0.62);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gutenberg-details-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.gutenberg-details-download,
.gutenberg-details-source {
  min-height: 50px;
  border-radius: 18px;
  font-family: var(--ui-font);
  font-weight: 770;
  text-decoration: none;
}

.gutenberg-details-download {
  border: 0;
  background: linear-gradient(135deg, #c8372f, #b62f2a);
  color: #fff8ee;
  box-shadow: 0 16px 32px rgba(180, 47, 40, 0.2);
  cursor: pointer;
}

.gutenberg-details-download:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.gutenberg-details-source {
  display: inline-grid;
  place-items: center;
  padding: 0 16px;
  border: 1px solid rgba(122, 95, 69, 0.14);
  color: rgba(64, 50, 38, 0.78);
  background: rgba(255, 255, 255, 0.36);
}

html.theme-dark .gutenberg-browse-hero,
body.theme-dark .gutenberg-browse-hero,
html.theme-dark .gutenberg-browse-chip,
body.theme-dark .gutenberg-browse-chip {
  border-color: rgba(230, 202, 150, 0.11);
  background:
    radial-gradient(circle at 84% 24%, rgba(208, 154, 74, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(40, 36, 29, 0.88), rgba(22, 20, 17, 0.76));
  color: rgba(239, 228, 207, 0.94);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

html.theme-dark .gutenberg-browse-hero h2,
body.theme-dark .gutenberg-browse-hero h2,
html.theme-dark .gutenberg-browse-section-head strong,
body.theme-dark .gutenberg-browse-section-head strong,
html.theme-dark .gutenberg-browse-chip strong,
body.theme-dark .gutenberg-browse-chip strong {
  color: rgba(248, 238, 218, 0.96);
}

html.theme-dark .gutenberg-browse-hero p:not(.gutenberg-kicker),
body.theme-dark .gutenberg-browse-hero p:not(.gutenberg-kicker),
html.theme-dark .gutenberg-browse-section-head span,
body.theme-dark .gutenberg-browse-section-head span,
html.theme-dark .gutenberg-browse-chip small,
body.theme-dark .gutenberg-browse-chip small {
  color: rgba(222, 207, 181, 0.68);
}

html.theme-dark .gutenberg-browse-chip.is-active,
body.theme-dark .gutenberg-browse-chip.is-active {
  border-color: rgba(215, 162, 80, 0.32);
  background:
    radial-gradient(circle at 12% 0%, rgba(232, 197, 129, 0.13), transparent 44%),
    linear-gradient(135deg, rgba(48, 40, 30, 0.92), rgba(37, 29, 23, 0.82));
}

html.theme-dark .gutenberg-chip,
html.theme-dark .gutenberg-detail-chip-row button,
body.theme-dark .gutenberg-chip,
body.theme-dark .gutenberg-detail-chip-row button {
  border-color: rgba(222, 164, 83, 0.16);
  background: rgba(210, 143, 65, 0.1);
  color: rgba(230, 185, 118, 0.9);
}

html.theme-dark .gutenberg-details-panel,
body.theme-dark .gutenberg-details-panel {
  background: rgba(0, 0, 0, 0.46);
}

html.theme-dark .gutenberg-details-sheet,
body.theme-dark .gutenberg-details-sheet {
  border-color: rgba(230, 202, 150, 0.12);
  background:
    radial-gradient(circle at 84% 16%, rgba(222, 164, 83, 0.11), transparent 32%),
    linear-gradient(135deg, rgba(38, 33, 27, 0.98), rgba(20, 18, 15, 0.94));
  color: rgba(241, 231, 211, 0.94);
  box-shadow: 0 34px 86px rgba(0, 0, 0, 0.48);
}

html.theme-dark .gutenberg-details-close,
body.theme-dark .gutenberg-details-close {
  background: rgba(56, 48, 39, 0.86);
  color: rgba(231, 216, 190, 0.78);
}

html.theme-dark .gutenberg-details-title h2,
html.theme-dark .gutenberg-details-body h3,
html.theme-dark .gutenberg-detail-facts strong,
body.theme-dark .gutenberg-details-title h2,
body.theme-dark .gutenberg-details-body h3,
body.theme-dark .gutenberg-detail-facts strong {
  color: rgba(248, 238, 218, 0.96);
}

html.theme-dark .gutenberg-details-title p:not(.gutenberg-kicker),
html.theme-dark .gutenberg-details-body p,
html.theme-dark .gutenberg-detail-facts small,
html.theme-dark .gutenberg-details-source,
body.theme-dark .gutenberg-details-title p:not(.gutenberg-kicker),
body.theme-dark .gutenberg-details-body p,
body.theme-dark .gutenberg-detail-facts small,
body.theme-dark .gutenberg-details-source {
  color: rgba(222, 207, 181, 0.74);
}

html.theme-dark .gutenberg-detail-facts span,
html.theme-dark .gutenberg-details-source,
body.theme-dark .gutenberg-detail-facts span,
body.theme-dark .gutenberg-details-source {
  border-color: rgba(230, 202, 150, 0.1);
  background: rgba(255, 239, 203, 0.055);
}

@media (max-width: 560px) {
  .gutenberg-browse-chips,
  .gutenberg-reading-lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gutenberg-browse-chip {
    min-height: 68px;
    padding: 12px;
  }

  .gutenberg-browse-chip strong {
    font-size: 0.94rem;
  }

  .gutenberg-browse-chip small {
    font-size: 0.72rem;
  }

  .gutenberg-item .gutenberg-book-button {
    padding-right: 12px !important;
  }

  .gutenberg-card-download {
    position: static;
    transform: none;
    width: calc(100% - 24px);
    margin: 8px 12px 12px;
  }

  .gutenberg-details-panel {
    padding: 8px;
  }

  .gutenberg-details-sheet {
    border-radius: 28px;
    max-height: 90vh;
  }

  .gutenberg-details-top {
    grid-template-columns: 86px minmax(0, 1fr);
    padding-right: 28px;
  }

  .gutenberg-detail-facts,
  .gutenberg-details-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Classics browser v2: cleaner Gutenberg shop layout inspired by the mockup. */
.gutenberg-view {
  padding-bottom: max(112px, calc(env(safe-area-inset-bottom) + 96px)) !important;
}

.gutenberg-view .library-header {
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  align-items: end;
  margin-bottom: 20px !important;
}

.gutenberg-view .library-header > div {
  min-width: 0;
}

.gutenberg-view .library-header h2 {
  margin: 0;
  font-family: var(--serif-display);
  font-size: clamp(3.2rem, 14vw, 5.2rem) !important;
  font-weight: 620;
  line-height: 0.88;
  letter-spacing: -0.055em;
}

.gutenberg-view .library-header p {
  margin-top: 12px !important;
  color: rgba(82, 70, 57, 0.74);
  font-family: var(--serif-body);
  font-size: clamp(1rem, 3vw, 1.22rem) !important;
}

.gutenberg-view .collection-back {
  align-self: start;
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
}

.gutenberg-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 12px;
  align-items: center;
  margin: 2px 0 14px;
}

.gutenberg-search-row .library-search {
  margin: 0 !important;
  min-height: 62px;
  border-radius: 28px !important;
}

.gutenberg-filter-button {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(118, 94, 70, 0.16);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.68), transparent 46%),
    rgba(244, 236, 222, 0.72);
  color: rgba(80, 66, 51, 0.78);
  box-shadow:
    0 14px 30px rgba(96, 67, 43, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gutenberg-filter-button svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gutenberg-status {
  margin: -4px 2px 16px !important;
  min-height: 1.2em;
  color: rgba(104, 86, 67, 0.62) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.78rem !important;
}

.gutenberg-browse-shell {
  gap: 18px !important;
  margin: 0 0 16px !important;
}

.gutenberg-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(116, 91, 67, 0.14);
  border-radius: 23px;
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.72), rgba(239, 228, 211, 0.52));
  box-shadow:
    0 16px 32px rgba(101, 71, 44, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.56);
}

.gutenberg-tab {
  min-height: 52px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: rgba(92, 76, 59, 0.72);
  font-family: var(--serif-display);
  font-size: clamp(0.98rem, 3vw, 1.16rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gutenberg-tab.is-active {
  color: rgba(40, 34, 27, 0.94);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.7), transparent 48%),
    rgba(255, 250, 241, 0.58);
  box-shadow:
    inset 0 0 0 1px rgba(115, 88, 64, 0.12),
    0 8px 20px rgba(94, 66, 44, 0.08);
}

.gutenberg-browse-section {
  gap: 12px !important;
}

.gutenberg-browse-section-head,
.gutenberg-books-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
  padding: 0 2px;
}

.gutenberg-browse-section-head strong,
.gutenberg-books-header h3 {
  margin: 0;
  color: rgba(38, 32, 26, 0.94) !important;
  font-family: var(--serif-display) !important;
  font-size: clamp(1.22rem, 4vw, 1.58rem) !important;
  font-weight: 640 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

.gutenberg-browse-section-head button,
.gutenberg-books-header button {
  border: 0;
  background: transparent;
  color: rgba(196, 60, 50, 0.95);
  font-family: var(--serif-body);
  font-size: clamp(0.98rem, 3vw, 1.14rem);
  cursor: pointer;
}

.gutenberg-category-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(154px, 178px);
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  margin: 0 -2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.gutenberg-category-rail::-webkit-scrollbar {
  display: none;
}

.gutenberg-category-card {
  scroll-snap-align: start;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 148px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(119, 94, 69, 0.15);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 250, 241, 0.72), rgba(239, 228, 211, 0.48));
  color: rgba(42, 35, 28, 0.94);
  text-align: left;
  box-shadow: 0 14px 28px rgba(99, 70, 44, 0.08);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gutenberg-category-card.is-active {
  border-color: rgba(202, 61, 51, 0.72);
  box-shadow:
    0 0 0 1px rgba(202, 61, 51, 0.18),
    0 16px 34px rgba(180, 56, 48, 0.13);
}

.gutenberg-category-icon svg {
  width: 35px;
  height: 35px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.62;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gutenberg-category-card strong {
  font-family: var(--serif-display);
  font-size: 1.16rem;
  font-weight: 620;
  line-height: 1.05;
}

.gutenberg-category-card small {
  color: rgba(77, 62, 48, 0.74);
  font-family: var(--serif-body);
  font-size: 0.96rem;
  line-height: 1.12;
}

.gutenberg-category-card em {
  display: none;
}

.gutenberg-books-header {
  margin-top: 2px;
}

#gutenbergList {
  gap: 10px !important;
}

.gutenberg-item {
  overflow: hidden;
  border: 1px solid rgba(116, 91, 67, 0.13);
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.48), transparent 46%),
    linear-gradient(135deg, rgba(255, 250, 241, 0.72), rgba(239, 228, 211, 0.54));
  box-shadow: 0 14px 30px rgba(98, 69, 43, 0.09);
}

.gutenberg-item .gutenberg-book-button {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 22px !important;
  gap: 16px !important;
  min-height: 126px !important;
  padding: 12px 16px 12px 12px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  text-align: left !important;
}

.gutenberg-cover {
  width: 76px !important;
  height: 102px !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 20px rgba(48, 33, 21, 0.18) !important;
}

.gutenberg-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gutenberg-copy {
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  min-width: 0;
}

.gutenberg-copy strong {
  color: rgba(37, 31, 25, 0.96) !important;
  font-family: var(--serif-display) !important;
  font-size: clamp(1.08rem, 4.4vw, 1.44rem) !important;
  font-weight: 620 !important;
  line-height: 1.05 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gutenberg-copy small,
.gutenberg-copy em {
  color: rgba(81, 67, 52, 0.72) !important;
  font-family: var(--serif-body) !important;
  font-size: clamp(0.88rem, 2.7vw, 1.02rem) !important;
  font-style: normal !important;
  line-height: 1.16 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gutenberg-item .menu-chevron {
  align-self: center;
  justify-self: end;
  opacity: 0.64;
}

.gutenberg-card-download {
  display: none !important;
}

.gutenberg-bottom-nav {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px));
  z-index: 58;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  min-height: 76px;
  padding: 9px 10px;
  border: 1px solid rgba(116, 91, 67, 0.14);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.56), transparent 48%),
    rgba(246, 237, 222, 0.84);
  box-shadow:
    0 22px 48px rgba(86, 60, 39, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.02);
  backdrop-filter: blur(18px) saturate(1.02);
}

.gutenberg-bottom-nav button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: rgba(92, 76, 59, 0.72);
  font-family: var(--serif-body);
  font-size: 0.82rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gutenberg-bottom-nav svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.58;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gutenberg-bottom-nav button.is-active {
  color: rgba(202, 61, 51, 0.98);
}

html.theme-dark .gutenberg-view .library-header p,
body.theme-dark .gutenberg-view .library-header p {
  color: rgba(223, 211, 190, 0.74);
}

html.theme-dark .gutenberg-filter-button,
body.theme-dark .gutenberg-filter-button,
html.theme-dark .gutenberg-tabs,
body.theme-dark .gutenberg-tabs,
html.theme-dark .gutenberg-category-card,
body.theme-dark .gutenberg-category-card,
html.theme-dark .gutenberg-item,
body.theme-dark .gutenberg-item,
html.theme-dark .gutenberg-bottom-nav,
body.theme-dark .gutenberg-bottom-nav {
  border-color: rgba(235, 211, 169, 0.12);
  background:
    radial-gradient(circle at 24% 0%, rgba(236, 199, 139, 0.1), transparent 46%),
    linear-gradient(135deg, rgba(43, 38, 31, 0.84), rgba(27, 24, 20, 0.74));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 239, 203, 0.08);
}

html.theme-dark .gutenberg-tab,
body.theme-dark .gutenberg-tab,
html.theme-dark .gutenberg-filter-button,
body.theme-dark .gutenberg-filter-button,
html.theme-dark .gutenberg-bottom-nav button,
body.theme-dark .gutenberg-bottom-nav button {
  color: rgba(224, 210, 184, 0.7);
}

html.theme-dark .gutenberg-tab.is-active,
body.theme-dark .gutenberg-tab.is-active {
  color: rgba(248, 239, 222, 0.96);
  background: rgba(255, 239, 203, 0.055);
}

html.theme-dark .gutenberg-browse-section-head strong,
html.theme-dark .gutenberg-books-header h3,
html.theme-dark .gutenberg-copy strong,
body.theme-dark .gutenberg-browse-section-head strong,
body.theme-dark .gutenberg-books-header h3,
body.theme-dark .gutenberg-copy strong {
  color: rgba(248, 239, 222, 0.96) !important;
}

html.theme-dark .gutenberg-category-card small,
html.theme-dark .gutenberg-copy small,
html.theme-dark .gutenberg-copy em,
html.theme-dark .gutenberg-status,
body.theme-dark .gutenberg-category-card small,
body.theme-dark .gutenberg-copy small,
body.theme-dark .gutenberg-copy em,
body.theme-dark .gutenberg-status {
  color: rgba(222, 207, 181, 0.68) !important;
}

html.theme-dark .gutenberg-category-card,
body.theme-dark .gutenberg-category-card {
  color: rgba(244, 232, 210, 0.94);
}

html.theme-dark .gutenberg-category-card.is-active,
body.theme-dark .gutenberg-category-card.is-active {
  border-color: rgba(220, 88, 68, 0.74);
  box-shadow:
    0 0 0 1px rgba(220, 88, 68, 0.16),
    0 16px 34px rgba(0, 0, 0, 0.22);
}

html.theme-dark .gutenberg-bottom-nav button.is-active,
body.theme-dark .gutenberg-bottom-nav button.is-active,
html.theme-dark .gutenberg-browse-section-head button,
html.theme-dark .gutenberg-books-header button,
body.theme-dark .gutenberg-browse-section-head button,
body.theme-dark .gutenberg-books-header button {
  color: rgba(224, 88, 68, 0.98);
}

@media (max-width: 560px) {
  .gutenberg-view .library-header {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
  }

  .gutenberg-view .collection-back {
    width: 54px !important;
    height: 54px !important;
  }

  .gutenberg-search-row {
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 10px;
  }

  .gutenberg-search-row .library-search,
  .gutenberg-filter-button {
    min-height: 56px;
    height: 56px;
  }

  .gutenberg-category-rail {
    grid-auto-columns: minmax(146px, 168px);
  }

  .gutenberg-category-card {
    min-height: 132px;
    padding: 16px 16px 14px;
  }

  .gutenberg-item .gutenberg-book-button {
    grid-template-columns: 64px minmax(0, 1fr) 18px !important;
    gap: 14px !important;
    min-height: 110px !important;
  }

  .gutenberg-cover {
    width: 64px !important;
    height: 86px !important;
  }

  .gutenberg-bottom-nav {
    left: 8px;
    right: 8px;
    bottom: max(7px, calc(env(safe-area-inset-bottom) + 5px));
    border-radius: 24px;
  }
}

/* Classics density pass: wider canvas, smaller controls/cards. */
body:has(#gutenbergView:not([hidden])) .input-panel {
  width: 100vw !important;
  max-width: none !important;
  padding-inline: max(22px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
}

body:has(#gutenbergView:not([hidden])) .input-panel .menu-card {
  width: 100% !important;
  max-width: none !important;
}

.gutenberg-view {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: clamp(14px, 3.4vw, 34px) !important;
  background: transparent !important;
}

.gutenberg-view .library-header {
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

.gutenberg-view .collection-back {
  width: 50px !important;
  height: 50px !important;
}

.gutenberg-view .library-header h2 {
  font-size: clamp(2.45rem, 10vw, 4.15rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.05em !important;
}

.gutenberg-view .library-header p {
  margin-top: 8px !important;
  font-size: clamp(0.88rem, 2.35vw, 1.05rem) !important;
  line-height: 1.25 !important;
}

.gutenberg-search-row {
  grid-template-columns: minmax(0, 1fr) 50px !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

.gutenberg-search-row .library-search {
  min-height: 50px !important;
  border-radius: 24px !important;
}

.gutenberg-search-row .library-search input {
  font-size: clamp(0.92rem, 2.8vw, 1.05rem) !important;
}

.gutenberg-filter-button {
  width: 50px !important;
  height: 50px !important;
}

.gutenberg-filter-button svg {
  width: 23px !important;
  height: 23px !important;
}

.gutenberg-status {
  margin: -2px 2px 12px !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

.gutenberg-browse-shell {
  gap: 13px !important;
  margin-bottom: 12px !important;
}

.gutenberg-tabs {
  border-radius: 20px !important;
  padding: 4px !important;
}

.gutenberg-tab {
  min-height: 43px !important;
  border-radius: 15px !important;
  font-size: clamp(0.9rem, 2.75vw, 1.03rem) !important;
}

.gutenberg-browse-section-head,
.gutenberg-books-header {
  gap: 12px !important;
}

.gutenberg-browse-section-head strong,
.gutenberg-books-header h3 {
  font-size: clamp(1.03rem, 3.35vw, 1.34rem) !important;
}

.gutenberg-browse-section-head button,
.gutenberg-books-header button {
  font-size: clamp(0.88rem, 2.7vw, 1.02rem) !important;
}

.gutenberg-category-rail {
  grid-auto-columns: minmax(124px, 148px) !important;
  gap: 10px !important;
  padding-bottom: 8px !important;
}

.gutenberg-category-card {
  min-height: 108px !important;
  gap: 5px !important;
  padding: 13px 14px 12px !important;
  border-radius: 18px !important;
}

.gutenberg-category-icon svg {
  width: 27px !important;
  height: 27px !important;
}

.gutenberg-category-card strong {
  font-size: 0.98rem !important;
  line-height: 1.03 !important;
}

.gutenberg-category-card small {
  font-size: 0.82rem !important;
}

#gutenbergList {
  gap: 8px !important;
}

.gutenberg-item {
  border-radius: 20px !important;
}

.gutenberg-item .gutenberg-book-button {
  grid-template-columns: 58px minmax(0, 1fr) 18px !important;
  gap: 12px !important;
  min-height: 92px !important;
  padding: 9px 12px 9px 9px !important;
  border-radius: 20px !important;
}

.gutenberg-cover {
  width: 58px !important;
  height: 76px !important;
  border-radius: 9px !important;
}

.gutenberg-copy {
  gap: 3px !important;
}

.gutenberg-copy strong {
  font-size: clamp(0.98rem, 3.45vw, 1.22rem) !important;
}

.gutenberg-copy small,
.gutenberg-copy em {
  font-size: clamp(0.78rem, 2.35vw, 0.92rem) !important;
}

.gutenberg-bottom-nav {
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  min-height: 68px !important;
  padding: 7px 8px !important;
  border-radius: 23px !important;
}

.gutenberg-bottom-nav button {
  gap: 3px !important;
  font-size: 0.74rem !important;
}

.gutenberg-bottom-nav svg {
  width: 21px !important;
  height: 21px !important;
}

@media (max-width: 560px) {
  body:has(#gutenbergView:not([hidden])) .input-panel {
    padding-inline: max(12px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
  }

  .gutenberg-view {
    padding-inline: clamp(10px, 2.4vw, 18px) !important;
  }

  .gutenberg-view .library-header {
    grid-template-columns: 48px minmax(0, 1fr) !important;
  }

  .gutenberg-view .collection-back,
  .gutenberg-filter-button {
    width: 48px !important;
    height: 48px !important;
  }

  .gutenberg-search-row {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  .gutenberg-search-row .library-search {
    min-height: 48px !important;
  }

  .gutenberg-category-rail {
    grid-auto-columns: minmax(118px, 142px) !important;
  }

  .gutenberg-item .gutenberg-book-button {
    grid-template-columns: 54px minmax(0, 1fr) 16px !important;
    min-height: 86px !important;
  }

  .gutenberg-cover {
    width: 54px !important;
    height: 72px !important;
  }
}

/* Classics density rescue v2: break out of the inherited narrow library/card layout. */
#inputPanel:has(#gutenbergView:not([hidden])) {
  width: 100vw !important;
  max-width: none !important;
  padding-inline: clamp(14px, 4vw, 34px) !important;
}

#inputPanel:has(#gutenbergView:not([hidden])) .menu-card:has(#gutenbergView) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#gutenbergView.gutenberg-view {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(6px, 1.8vw, 18px) max(104px, calc(env(safe-area-inset-bottom) + 92px)) !important;
  background: transparent !important;
}

#gutenbergView .library-header {
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  margin: 0 0 18px !important;
  padding: 74px 0 0 !important;
}

#gutenbergView .library-header .collection-back,
#gutenbergView .collection-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 50px !important;
  height: 50px !important;
  margin: 0 !important;
}

#gutenbergView .library-header > div {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#gutenbergView .library-header h2 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: clamp(2.55rem, 10.6vw, 4rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.052em !important;
}

#gutenbergView .library-header p {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 9px 0 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: clamp(0.86rem, 2.6vw, 1rem) !important;
  line-height: 1.28 !important;
}

#gutenbergView .gutenberg-search-row {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) 50px !important;
  gap: 10px !important;
  margin: 0 0 10px !important;
}

#gutenbergView .gutenberg-search-row .library-search {
  min-width: 0 !important;
  min-height: 48px !important;
  border-radius: 24px !important;
}

#gutenbergView .gutenberg-filter-button {
  width: 50px !important;
  height: 50px !important;
}

#gutenbergView .gutenberg-status {
  margin: 6px 2px 14px !important;
  max-width: none !important;
  font-size: 0.72rem !important;
}

#gutenbergView .gutenberg-tabs {
  width: 100% !important;
  min-height: 48px !important;
}

#gutenbergView .gutenberg-tab {
  min-height: 40px !important;
  font-size: clamp(0.86rem, 2.55vw, 1rem) !important;
}

#gutenbergView .gutenberg-browse-section-head strong,
#gutenbergView .gutenberg-books-header h3 {
  font-size: clamp(1rem, 3.2vw, 1.25rem) !important;
}

#gutenbergView .gutenberg-browse-section-head button,
#gutenbergView .gutenberg-books-header button {
  font-size: clamp(0.84rem, 2.55vw, 0.98rem) !important;
}

#gutenbergView .gutenberg-category-rail {
  grid-auto-columns: minmax(112px, 132px) !important;
  gap: 9px !important;
  margin-inline: 0 !important;
  padding: 1px 0 8px !important;
}

#gutenbergView .gutenberg-category-card {
  min-height: 96px !important;
  padding: 12px !important;
  border-radius: 17px !important;
}

#gutenbergView .gutenberg-category-icon svg {
  width: 24px !important;
  height: 24px !important;
}

#gutenbergView .gutenberg-category-card strong {
  font-size: 0.9rem !important;
}

#gutenbergView .gutenberg-category-card small {
  font-size: 0.74rem !important;
}

#gutenbergView .gutenberg-item .gutenberg-book-button {
  grid-template-columns: 50px minmax(0, 1fr) 16px !important;
  gap: 11px !important;
  min-height: 80px !important;
  padding: 8px 11px 8px 8px !important;
}

#gutenbergView .gutenberg-cover {
  width: 50px !important;
  height: 66px !important;
}

#gutenbergView .gutenberg-copy strong {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.92rem, 3vw, 1.12rem) !important;
  font-weight: 650 !important;
  letter-spacing: -0.012em !important;
}

#gutenbergView .gutenberg-copy small {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.74rem, 2.15vw, 0.86rem) !important;
  font-weight: 540 !important;
  letter-spacing: 0 !important;
}

#gutenbergView .gutenberg-copy em {
  font-size: clamp(0.74rem, 2.15vw, 0.86rem) !important;
}

#gutenbergView .gutenberg-bottom-nav {
  left: max(8px, env(safe-area-inset-left)) !important;
  right: max(8px, env(safe-area-inset-right)) !important;
  min-height: 64px !important;
  padding: 6px 8px !important;
}

/* Classics cleanup v3: tighter top, no dead filter/status, smoother category rail. */
#inputPanel:has(#gutenbergView:not([hidden])) {
  padding-top: max(12px, calc(env(safe-area-inset-top) + 8px)) !important;
}

#gutenbergView .library-header {
  padding-top: 54px !important;
  margin-bottom: 14px !important;
}

#gutenbergView .library-header .collection-back,
#gutenbergView .collection-back {
  top: 0 !important;
}

#gutenbergView .gutenberg-search-row {
  grid-template-columns: minmax(0, 1fr) !important;
  margin-bottom: 12px !important;
}

#gutenbergFilterButton,
#gutenbergView .gutenberg-filter-button {
  display: none !important;
}

#gutenbergStatus,
#gutenbergView .gutenberg-status {
  display: none !important;
}

#gutenbergView .gutenberg-browse-shell {
  gap: 12px !important;
}

#gutenbergView .gutenberg-tabs {
  margin-top: 0 !important;
}

#gutenbergView .gutenberg-category-rail {
  grid-auto-columns: minmax(118px, 138px) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: none !important;
  touch-action: pan-x pan-y !important;
  padding: 6px 0 14px !important;
  cursor: grab;
}

#gutenbergView .gutenberg-category-rail:active {
  cursor: grabbing;
}

#gutenbergView .gutenberg-category-card {
  scroll-snap-align: none !important;
  touch-action: pan-x pan-y !important;
  -webkit-user-select: none;
  user-select: none;
}

#gutenbergView .gutenberg-category-card:active {
  transform: none !important;
}

@media (max-width: 560px) {
  #inputPanel:has(#gutenbergView:not([hidden])) {
    padding-top: max(10px, calc(env(safe-area-inset-top) + 6px)) !important;
  }

  #gutenbergView .library-header {
    padding-top: 50px !important;
  }

  #gutenbergView .gutenberg-category-rail {
    grid-auto-columns: minmax(112px, 132px) !important;
  }
}

/* Gutenberg category directory and active sort controls. */
.gutenberg-category-directory-panel {
  position: fixed;
  inset: 0;
  z-index: 290;
  display: grid;
  place-items: end center;
  padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: rgba(16, 13, 10, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.gutenberg-category-directory-panel[hidden] {
  display: none !important;
}

.gutenberg-category-directory-sheet {
  position: relative;
  overflow: auto;
  width: min(760px, 100%);
  max-height: min(88vh, 900px);
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid rgba(123, 94, 68, 0.17);
  border-radius: 32px;
  background:
    radial-gradient(circle at 88% 14%, rgba(196, 61, 50, 0.11), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 240, 0.96), rgba(244, 233, 216, 0.92));
  box-shadow:
    0 34px 86px rgba(42, 30, 20, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.66);
}

.gutenberg-directory-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(67, 52, 39, 0.72);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.gutenberg-category-directory-sheet header {
  display: grid;
  gap: 8px;
  padding-right: 48px;
  margin-bottom: 18px;
}

.gutenberg-category-directory-sheet h2 {
  margin: 0;
  color: rgba(30, 25, 20, 0.96);
  font-family: var(--serif-display);
  font-size: clamp(2.2rem, 8vw, 4rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.gutenberg-category-directory-sheet header p:not(.gutenberg-kicker) {
  margin: 0;
  max-width: 34em;
  color: rgba(84, 67, 51, 0.72);
  font-family: var(--serif-body);
  font-size: clamp(0.96rem, 2.5vw, 1.1rem);
  line-height: 1.34;
}

.gutenberg-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.gutenberg-directory-card {
  display: grid;
  align-content: start;
  gap: 7px;
  min-height: 122px;
  padding: 14px;
  border: 1px solid rgba(119, 94, 69, 0.14);
  border-radius: 20px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.54), transparent 44%),
    rgba(250, 244, 233, 0.62);
  color: rgba(42, 35, 28, 0.94);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gutenberg-directory-card.is-active {
  border-color: rgba(202, 61, 51, 0.68);
  box-shadow: 0 0 0 1px rgba(202, 61, 51, 0.16);
}

.gutenberg-directory-card svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gutenberg-directory-card strong {
  font-family: var(--serif-display);
  font-size: 1rem;
  line-height: 1.05;
}

.gutenberg-directory-card small {
  color: rgba(78, 62, 48, 0.7);
  font-family: var(--serif-body);
  font-size: 0.78rem;
  line-height: 1.16;
}

html.theme-dark .gutenberg-category-directory-panel,
body.theme-dark .gutenberg-category-directory-panel {
  background: rgba(0, 0, 0, 0.52);
}

html.theme-dark .gutenberg-category-directory-sheet,
body.theme-dark .gutenberg-category-directory-sheet {
  border-color: rgba(235, 211, 169, 0.12);
  background:
    radial-gradient(circle at 88% 14%, rgba(220, 88, 68, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(39, 34, 28, 0.98), rgba(20, 18, 15, 0.94));
  box-shadow: 0 34px 86px rgba(0, 0, 0, 0.5);
}

html.theme-dark .gutenberg-directory-close,
body.theme-dark .gutenberg-directory-close {
  background: rgba(56, 48, 39, 0.86);
  color: rgba(231, 216, 190, 0.78);
}

html.theme-dark .gutenberg-category-directory-sheet h2,
html.theme-dark .gutenberg-directory-card strong,
body.theme-dark .gutenberg-category-directory-sheet h2,
body.theme-dark .gutenberg-directory-card strong {
  color: rgba(248, 239, 222, 0.96);
}

html.theme-dark .gutenberg-category-directory-sheet header p:not(.gutenberg-kicker),
html.theme-dark .gutenberg-directory-card small,
body.theme-dark .gutenberg-category-directory-sheet header p:not(.gutenberg-kicker),
body.theme-dark .gutenberg-directory-card small {
  color: rgba(222, 207, 181, 0.68);
}

html.theme-dark .gutenberg-directory-card,
body.theme-dark .gutenberg-directory-card {
  border-color: rgba(235, 211, 169, 0.1);
  background:
    radial-gradient(circle at 18% 0%, rgba(236, 199, 139, 0.09), transparent 44%),
    rgba(42, 37, 30, 0.7);
  color: rgba(244, 232, 210, 0.94);
}

html.theme-dark .gutenberg-directory-card.is-active,
body.theme-dark .gutenberg-directory-card.is-active {
  border-color: rgba(220, 88, 68, 0.7);
  box-shadow: 0 0 0 1px rgba(220, 88, 68, 0.16);
}

@media (max-width: 560px) {
  .gutenberg-category-directory-sheet {
    border-radius: 28px;
    padding: 20px 16px 22px;
  }

  .gutenberg-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gutenberg-directory-card {
    min-height: 108px;
    padding: 12px;
  }
}

/* Gutenberg full-page overlays: category directory and book preview become real pages. */
.gutenberg-category-directory-panel,
.gutenberg-details-panel {
  place-items: stretch !important;
  padding: 0 !important;
  background: var(--surface, #f7f1e6) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.gutenberg-category-directory-sheet,
.gutenberg-details-sheet {
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: none !important;
  height: 100dvh !important;
  max-height: none !important;
  margin: 0 !important;
  padding:
    max(26px, calc(env(safe-area-inset-top) + 18px))
    clamp(18px, 5vw, 44px)
    max(28px, calc(env(safe-area-inset-bottom) + 24px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 86% 16%, rgba(196, 61, 50, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(255, 250, 240, 0.98), rgba(244, 233, 216, 0.96)) !important;
  box-shadow: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.gutenberg-directory-close,
.gutenberg-details-close {
  top: max(16px, calc(env(safe-area-inset-top) + 10px)) !important;
  right: max(16px, calc(env(safe-area-inset-right) + 12px)) !important;
}

.gutenberg-category-directory-sheet header,
.gutenberg-details-top {
  padding-top: 56px !important;
}

.gutenberg-category-directory-sheet header {
  padding-right: 58px !important;
}

.gutenberg-directory-grid {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)) !important;
}

.gutenberg-details-top {
  max-width: 860px !important;
  margin-inline: auto !important;
}

.gutenberg-details-body,
.gutenberg-details-actions {
  width: min(860px, 100%) !important;
  margin-inline: auto !important;
}

html.theme-dark .gutenberg-category-directory-panel,
body.theme-dark .gutenberg-category-directory-panel,
html.theme-dark .gutenberg-details-panel,
body.theme-dark .gutenberg-details-panel {
  background: #11100e !important;
}

html.theme-dark .gutenberg-category-directory-sheet,
body.theme-dark .gutenberg-category-directory-sheet,
html.theme-dark .gutenberg-details-sheet,
body.theme-dark .gutenberg-details-sheet {
  background:
    radial-gradient(circle at 86% 16%, rgba(220, 88, 68, 0.1), transparent 34%),
    linear-gradient(135deg, rgba(31, 27, 23, 0.99), rgba(14, 13, 11, 0.98)) !important;
}

@media (max-width: 560px) {
  .gutenberg-category-directory-sheet,
  .gutenberg-details-sheet {
    padding:
      max(22px, calc(env(safe-area-inset-top) + 14px))
      16px
      max(24px, calc(env(safe-area-inset-bottom) + 20px)) !important;
  }

  .gutenberg-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .gutenberg-details-top {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
}

/* BEGIN V1 bottom nav and Classics spacing polish */
#homeBottomNav,
.home-bottom-nav {
  border-radius: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  right: 0 !important;
  transform: none !important;
  width: 100vw !important;
}

#homeBottomNav::before,
#homeBottomNav::after,
.home-bottom-nav::before,
.home-bottom-nav::after {
  border-radius: 0 !important;
}

#homeBottomNav {
  padding-bottom: max(0.7rem, env(safe-area-inset-bottom)) !important;
}

#gutenbergView,
.gutenberg-view,
.classics-view {
  padding-top: max(0.85rem, env(safe-area-inset-top)) !important;
}

#gutenbergView .library-panel,
#gutenbergView .library-content,
#gutenbergView .gutenberg-page,
#gutenbergView .gutenberg-classics-page,
#gutenbergView .gutenberg-browse-page,
#gutenbergView .gutenberg-browse-shell,
#gutenbergBrowseShell {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#gutenbergView .library-header,
#gutenbergView .gutenberg-header,
#gutenbergView .gutenberg-hero,
#gutenbergView .gutenberg-browse-hero,
#gutenbergBrowseShell .gutenberg-header,
#gutenbergBrowseShell .gutenberg-hero {
  margin-top: 0 !important;
  padding-top: clamp(0.25rem, 1.5vh, 0.85rem) !important;
}

#gutenbergView .back-button,
#gutenbergView [data-gutenberg-nav="library"],
#gutenbergView [data-gutenberg-back] {
  margin-top: 0 !important;
}
/* END V1 bottom nav and Classics spacing polish */

/* Gutenberg browse final compact pass. Keep this after the V1 polish block. */
#inputPanel:has(#gutenbergView:not([hidden])) {
  padding-top: 0 !important;
}

#inputPanel:has(#gutenbergView:not([hidden])) .menu-card:has(#gutenbergView) {
  padding-top: 0 !important;
}

#gutenbergView.gutenberg-view,
#gutenbergView {
  padding-bottom: max(96px, calc(env(safe-area-inset-bottom) + 84px)) !important;
  padding-top: 0 !important;
}

#gutenbergView .library-header {
  margin-bottom: 10px !important;
  padding-top: calc(var(--screen-pad-top) + var(--top-control-size) + 10px) !important;
}

#inputPanel.is-menu-subview:has(#gutenbergView:not([hidden])) #gutenbergView .collection-back {
  position: fixed !important;
  top: var(--screen-pad-top) !important;
  left: calc(var(--screen-pad-left) + var(--top-corner-inset)) !important;
  z-index: 3 !important;
  width: var(--top-control-size) !important;
  min-width: var(--top-control-size) !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin: 0 !important;
  transform: none !important;
}

#gutenbergView .library-header p {
  margin-top: 6px !important;
}

#gutenbergView .gutenberg-search-row {
  margin: -8px 0 -8px !important;
}

#gutenbergView .gutenberg-search-row .library-search {
  min-height: 44px !important;
}

#gutenbergView .gutenberg-browse-shell {
  gap: 8px !important;
  margin-top: -10px !important;
  margin-bottom: 8px !important;
}

#gutenbergView .gutenberg-tabs {
  display: none !important;
}

#gutenbergView .gutenberg-browse-section {
  gap: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#gutenbergView .gutenberg-browse-section-head,
#gutenbergView .gutenberg-books-header {
  padding-inline: 0 !important;
}

#gutenbergView .gutenberg-category-rail {
  --gutenberg-rail-align-pad: max(10px, env(safe-area-inset-left));
  --gutenberg-rail-end-pad: max(10px, env(safe-area-inset-right));
  background: transparent !important;
  box-shadow: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 1px var(--gutenberg-rail-end-pad) 7px var(--gutenberg-rail-align-pad) !important;
  scroll-padding-left: var(--gutenberg-rail-align-pad) !important;
  scroll-padding-right: var(--gutenberg-rail-end-pad) !important;
  width: 100vw !important;
}

#gutenbergView .gutenberg-category-card {
  min-height: 92px !important;
  background: rgba(255, 250, 241, 0.58) !important;
  box-shadow: 0 8px 18px rgba(99, 70, 44, 0.06) !important;
}

#gutenbergView .gutenberg-category-card.is-active {
  box-shadow:
    0 0 0 1px rgba(202, 61, 51, 0.18),
    0 10px 20px rgba(180, 56, 48, 0.1) !important;
}

#gutenbergView .gutenberg-books-header {
  margin-top: 0 !important;
}

#gutenbergList {
  gap: 7px !important;
}

@media (max-width: 560px) {
  #gutenbergView.gutenberg-view {
    padding-inline: max(10px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
  }
}

/* Context dialogue turns: force a visual paragraph break when a new speaker starts inside one card. */
.context-dialogue-turn-break {
  display: block !important;
  width: 100% !important;
  height: 0 !important;
  margin: 0.72em 0 0.06em !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Reader header parity v32: one exact title/chapter/motif spec for speed, context, and ebook. */
:root {
  --reader-header-top-y: calc(var(--screen-pad-top) + (var(--top-control-size) / 2));
  --reader-header-title-color: rgba(38, 34, 29, 0.9);
  --reader-header-meta-color: rgba(88, 78, 65, 0.68);
}

html.theme-dark,
body.theme-dark {
  --reader-header-title-color: rgba(244, 237, 225, 0.84);
  --reader-header-meta-color: rgba(238, 232, 220, 0.66);
}

.reader-panel > .top-bar #chapterButton,
body.ebook-mode #ebookChapterButton,
body.ebook-mode .ebook-title-block,
.reader-panel > .top-bar #chapterButton:hover,
.reader-panel > .top-bar #chapterButton:focus,
.reader-panel > .top-bar #chapterButton:focus-visible,
.reader-panel > .top-bar #chapterButton:active,
.reader-panel > .top-bar #chapterButton.is-tactile-press,
.reader-panel > .top-bar #chapterButton[aria-expanded="true"],
body.ebook-mode #ebookChapterButton:hover,
body.ebook-mode #ebookChapterButton:focus,
body.ebook-mode #ebookChapterButton:focus-visible,
body.ebook-mode #ebookChapterButton:active,
body.ebook-mode #ebookChapterButton.is-tactile-press,
body.ebook-mode #ebookChapterButton[aria-expanded="true"],
body.ebook-mode .ebook-title-block:hover,
body.ebook-mode .ebook-title-block:focus,
body.ebook-mode .ebook-title-block:focus-visible,
body.ebook-mode .ebook-title-block:active,
body.ebook-mode .ebook-title-block.is-tactile-press,
.pdf-source-panel .pdf-source-title-block {
  position: fixed !important;
  top: var(--reader-header-top-y) !important;
  left: 50vw !important;
  right: auto !important;
  width: min(62vw, 390px) !important;
  max-width: calc(100vw - (2 * var(--screen-pad-x)) - (2 * var(--top-control-size)) - 28px) !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 5px 8px 5px 14px !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  justify-content: center !important;
  justify-items: center !important;
  row-gap: 1px !important;
  overflow: visible !important;
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  color: var(--reader-header-meta-color) !important;
  text-align: center !important;
  text-shadow: none !important;
  transition-property: color, opacity, filter !important;
  will-change: auto !important;
  font-synthesis-weight: none !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

.reader-panel > .top-bar #chapterButton #tagline,
body.ebook-mode #ebookChapterButton #ebookTitle,
body.ebook-mode .ebook-title-block #ebookTitle,
body.ebook-mode .ebook-title-block span,
.pdf-source-panel .pdf-source-title-block > span {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--reader-header-title-color) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.96rem, 3.25vw, 1.12rem) !important;
  font-style: normal !important;
  font-weight: 650 !important;
  line-height: 1.14 !important;
  letter-spacing: 0.012em !important;
  text-align: center !important;
  text-shadow: none !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail,
body.ebook-mode #ebookChapterButton #ebookChapterLabel,
body.ebook-mode .ebook-title-block #ebookChapterLabel,
body.ebook-mode .ebook-title-block small,
.pdf-source-panel .pdf-source-title-block > small {
  position: relative !important;
  width: fit-content !important;
  max-width: min(46vw, 220px) !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 auto !important;
  padding: 0 0.72em 0 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: var(--reader-header-meta-color) !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(0.84rem, 2.7vw, 0.98rem) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  line-height: 1.16 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-shadow: none !important;
}

.reader-panel > .top-bar #chapterButton::after,
body.ebook-mode #ebookChapterButton::after,
body.ebook-mode .ebook-title-block::after,
.pdf-source-panel .pdf-source-title-block::after {
  display: none !important;
  content: none !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail::after,
body.ebook-mode #ebookChapterButton #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block #ebookChapterLabel::after,
body.ebook-mode .ebook-title-block small::after {
  content: "" !important;
  position: absolute !important;
  left: calc(100% - 0.46em) !important;
  top: 50% !important;
  display: inline-block !important;
  width: 0.46em !important;
  height: 0.46em !important;
  margin: 0 !important;
  border-right: 0.135em solid currentColor !important;
  border-bottom: 0.135em solid currentColor !important;
  opacity: 0.76 !important;
  transform: translateY(-62%) rotate(45deg) !important;
  vertical-align: middle !important;
}

.reader-panel > .top-bar #chapterButton::before,
body.ebook-mode #ebookChapterButton::before,
body.ebook-mode .ebook-title-block::before,
.pdf-source-panel .pdf-source-title-block::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 13px) !important;
  width: clamp(282px, 70vw, 470px) !important;
  height: 20px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  opacity: 0.96 !important;
  background:
    radial-gradient(circle at 50% 50%, var(--reader-header-ornament) 0 3.5px, transparent 4px),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--reader-header-ornament) 52%, transparent) 0 8px, transparent 9px),
    linear-gradient(90deg, transparent 0 4%, color-mix(in srgb, var(--reader-header-ornament) 0%, transparent) 4% 9%, var(--reader-header-ornament) 20%, color-mix(in srgb, var(--reader-header-ornament) 78%, transparent) 39%, transparent 46% 54%, color-mix(in srgb, var(--reader-header-ornament) 78%, transparent) 61%, var(--reader-header-ornament) 80%, color-mix(in srgb, var(--reader-header-ornament) 0%, transparent) 91% 96%, transparent 96% 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100%, 24px 24px, 100% 1.45px !important;
  background-position: center, center, center !important;
  filter:
    drop-shadow(0 0 7px color-mix(in srgb, var(--reader-header-ornament) 42%, transparent))
    drop-shadow(0 0 16px color-mix(in srgb, var(--reader-header-ornament) 20%, transparent)) !important;
}

/* Context scroll lock: native vertical scroll only, no sideways page drag. */
html:has(body .reader-panel .word-display.has-context),
body:has(.reader-panel .word-display.has-context) {
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context),
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .focus-stage,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .word-display.has-context,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .word-display.has-context.has-context-sentence-scroll {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .context-sentence-scroll {
  overflow: clip auto !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior-x: none !important;
  touch-action: pan-y !important;
}

body:not(.ebook-mode) #wordDisplay.has-context.has-context-sentence-scroll .context-sentence-scroll,
body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context.has-context-sentence-scroll) #wordDisplay.has-context.has-context-sentence-scroll .context-sentence-scroll {
  overflow: clip auto !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
  overscroll-behavior: none contain !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .context-sentence-card,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .context-line,
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context) .context-token {
  touch-action: pan-y !important;
}

/* Library/stats edge parity with book-info page. */
:root {
  --subview-book-info-edge-gutter: clamp(14px, 4.4vw, 42px);
}

body:has(#collectionView:not([hidden])) #inputPanel.is-menu-subview,
body:has(#statsView:not([hidden])) #inputPanel.is-menu-subview {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#collectionView.collection-view,
#statsView.stats-view {
  width: 100vw !important;
  max-width: 100vw !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: max(var(--subview-book-info-edge-gutter), env(safe-area-inset-left)) !important;
  padding-right: max(var(--subview-book-info-edge-gutter), env(safe-area-inset-right)) !important;
}

#collectionView .library-search,
#collectionView .library-continue-card,
#collectionView .library-feature-button,
#collectionView .collection-list,
#collectionView .collection-item,
#collectionView .collection-empty,
#statsView .stats-tabs,
#statsView .stats-stack,
#statsView .stats-card,
#statsView .stats-insight-tile,
#statsView .stats-bottom-banner {
  max-width: none !important;
}

/* Library/stats edge parity v2: widen the parent subview rail, not just child cards. */
#inputPanel.is-menu-subview:has(#collectionView:not([hidden])),
#inputPanel.is-menu-subview:has(#statsView:not([hidden])) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#inputPanel.is-menu-subview:has(#collectionView:not([hidden])) .menu-card,
#inputPanel.is-menu-subview:has(#statsView:not([hidden])) .menu-card {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#collectionView.collection-view,
#statsView.stats-view {
  width: 100% !important;
  max-width: none !important;
  padding-left: max(clamp(14px, 4.4vw, 42px), env(safe-area-inset-left)) !important;
  padding-right: max(clamp(14px, 4.4vw, 42px), env(safe-area-inset-right)) !important;
}

#collectionView .library-search,
#collectionView .library-feature-button,
#collectionView .collection-item,
#statsView .stats-tabs,
#statsView .stats-card,
#statsView .stats-insight-tile,
#statsView .stats-bottom-banner {
  width: 100% !important;
}

/* Library/stats edge parity v3: break out of the inherited menu rail gutter. */
:root {
  --subview-edge-pull: clamp(14px, 4.4vw, 42px);
}

body:has(#collectionView:not([hidden])) #inputPanel,
body:has(#statsView:not([hidden])) #inputPanel {
  overflow-x: hidden !important;
}

#collectionView.collection-view,
#statsView.stats-view {
  width: calc(100% + var(--subview-edge-pull) + var(--subview-edge-pull)) !important;
  max-width: none !important;
  margin-left: calc(-1 * var(--subview-edge-pull)) !important;
  margin-right: calc(-1 * var(--subview-edge-pull)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Library/stats edge parity v4: move the actual visible rails to the book-info gutter. */
:root {
  --subview-card-gutter: clamp(16px, 4.4vw, 42px);
}

#collectionView.collection-view,
#statsView.stats-view {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#collectionView .library-search,
#collectionView .library-quick-actions,
#collectionView .library-section,
#collectionView > .collection-header,
#statsView > .collection-header,
#statsView .stats-tabs,
#statsView .stats-stack,
#settingsView > .collection-header,
#settingsView .settings-stack {
  width: calc(100vw - (var(--subview-card-gutter) * 2)) !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw + var(--subview-card-gutter)) !important;
  margin-right: calc(50% - 50vw + var(--subview-card-gutter)) !important;
}

#settingsView .settings-group {
  width: 100% !important;
  max-width: none !important;
}

/* Stats dark-mode pass and header rail correction. */
html.theme-dark #statsView.stats-view,
body.theme-dark #statsView.stats-view {
  --stats-red: rgba(220, 76, 67, 0.98);
  --stats-red-soft: rgba(220, 76, 67, 0.16);
  --stats-card: rgba(37, 32, 25, 0.72);
  --stats-card-warm: rgba(46, 38, 30, 0.72);
  --stats-muted: rgba(218, 205, 185, 0.72);
}

html.theme-dark #statsView .collection-header h2,
body.theme-dark #statsView .collection-header h2 {
  color: rgba(248, 241, 231, 0.96) !important;
}

html.theme-dark #statsView .collection-header p,
body.theme-dark #statsView .collection-header p {
  color: rgba(220, 208, 190, 0.74) !important;
}

html.theme-dark #statsView .stats-tabs,
body.theme-dark #statsView .stats-tabs {
  border-color: rgba(236, 218, 190, 0.15) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 244, 218, 0.09), transparent 44%),
    rgba(47, 40, 32, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 244, 218, 0.07),
    0 12px 26px rgba(0, 0, 0, 0.18) !important;
}

html.theme-dark #statsView .stats-tab,
body.theme-dark #statsView .stats-tab {
  color: rgba(224, 211, 191, 0.76) !important;
}

html.theme-dark #statsView .stats-tab.is-active,
body.theme-dark #statsView .stats-tab.is-active {
  color: rgba(34, 29, 23, 0.94) !important;
  background: rgba(251, 246, 235, 0.92) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

html.theme-dark #statsView .stats-editorial-card p,
html.theme-dark #statsView .stats-editorial-card small,
html.theme-dark #statsView .stats-words-read-card p,
html.theme-dark #statsView .stats-books-finished-card p,
html.theme-dark #statsView .stats-average-copy p,
html.theme-dark #statsView .stats-small-stat-card small,
html.theme-dark #statsView .stats-comfortable-card small,
html.theme-dark #statsView .stats-when-copy p,
html.theme-dark #statsView .stats-shelf-card p,
html.theme-dark #statsView .stats-empty-line,
body.theme-dark #statsView .stats-editorial-card p,
body.theme-dark #statsView .stats-editorial-card small,
body.theme-dark #statsView .stats-words-read-card p,
body.theme-dark #statsView .stats-books-finished-card p,
body.theme-dark #statsView .stats-average-copy p,
body.theme-dark #statsView .stats-small-stat-card small,
body.theme-dark #statsView .stats-comfortable-card small,
body.theme-dark #statsView .stats-when-copy p,
body.theme-dark #statsView .stats-shelf-card p,
body.theme-dark #statsView .stats-empty-line {
  color: rgba(222, 210, 190, 0.72) !important;
}

html.theme-dark #statsView .stats-editorial-bars small,
html.theme-dark #statsView .stats-average-days span,
html.theme-dark #statsView .stats-day-dots small,
html.theme-dark #statsView .stats-time-segments small,
html.theme-dark #statsView .stats-time-segments strong,
html.theme-dark #statsView .stats-average-chart text,
body.theme-dark #statsView .stats-editorial-bars small,
body.theme-dark #statsView .stats-average-days span,
body.theme-dark #statsView .stats-day-dots small,
body.theme-dark #statsView .stats-time-segments small,
body.theme-dark #statsView .stats-time-segments strong,
body.theme-dark #statsView .stats-average-chart text {
  fill: rgba(220, 208, 190, 0.72) !important;
  color: rgba(220, 208, 190, 0.72) !important;
}

html.theme-dark #statsView .stats-editorial-bars i,
html.theme-dark #statsView .stats-day-dots i,
body.theme-dark #statsView .stats-editorial-bars i,
body.theme-dark #statsView .stats-day-dots i {
  background: rgba(218, 205, 185, 0.42) !important;
}

html.theme-dark #statsView .stats-editorial-bars .is-active i,
html.theme-dark #statsView .stats-day-dots .is-active i,
body.theme-dark #statsView .stats-editorial-bars .is-active i,
body.theme-dark #statsView .stats-day-dots .is-active i {
  background: var(--stats-red) !important;
}

[hidden] {
  display: none !important;
}

#pubmedView.research-view {
  width: 100% !important;
  max-width: none !important;
  padding: 0 clamp(14px, 3.4vw, 34px) max(108px, calc(env(safe-area-inset-bottom) + 92px)) !important;
}

#inputPanel:has(#pubmedView.is-articles-mode:not([hidden])) {
  width: 100vw !important;
  max-width: none !important;
  padding-top: max(12px, calc(env(safe-area-inset-top) + 8px)) !important;
  padding-inline: clamp(14px, 4vw, 34px) !important;
}

#inputPanel:has(#pubmedView.is-articles-mode:not([hidden])) .menu-card:has(#pubmedView) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#pubmedView.research-view.is-articles-mode {
  gap: 12px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 clamp(6px, 1.8vw, 18px) max(104px, calc(env(safe-area-inset-bottom) + 92px)) !important;
  background: transparent !important;
}

#pubmedView.research-view.is-articles-mode .library-header {
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  gap: 0 !important;
  margin: 0 0 14px !important;
  padding: 54px 0 0 !important;
}

#pubmedView.research-view.is-articles-mode .library-header .collection-back,
#pubmedView.research-view.is-articles-mode .collection-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 50px !important;
  height: 50px !important;
  min-width: 50px !important;
  min-height: 50px !important;
  margin: 0 !important;
  transform: none !important;
}

#pubmedView.research-view.is-articles-mode .library-header > div {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

#pubmedView.research-view.is-articles-mode .library-header h2 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  font-size: clamp(2.55rem, 10.6vw, 4rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.052em !important;
  white-space: nowrap !important;
}

#pubmedView.research-view.is-articles-mode .library-header p {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 9px 0 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: clamp(0.86rem, 2.6vw, 1rem) !important;
  line-height: 1.28 !important;
}

#pubmedView.research-view.is-articles-mode .library-search {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  margin: 0 0 12px !important;
  padding-inline: 16px !important;
  border-radius: 24px !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 10px !important;
}

#pubmedView.research-view.is-articles-mode .library-search input {
  min-width: 0 !important;
  font-size: clamp(0.92rem, 2.8vw, 1.05rem) !important;
  text-overflow: ellipsis !important;
}

.article-browse-panel {
  display: grid;
  gap: 12px;
  margin: 0 0 2px;
}

.article-browse-section {
  display: grid;
  gap: 6px;
}

.article-browse-section-head,
.article-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.article-browse-section-head strong,
.article-results-header h3 {
  margin: 0;
  color: rgba(47, 41, 34, 0.92);
  font-family: var(--serif-body);
  font-size: clamp(1rem, 3.2vw, 1.25rem);
  font-weight: 640;
  line-height: 1.08;
}

.article-results-header {
  margin: -2px 0 0;
}

.article-results-header span {
  color: rgba(112, 91, 68, 0.58);
  font-family: var(--ui-font);
  font-size: clamp(0.78rem, 2.25vw, 0.92rem);
  font-weight: 720;
}

.article-topic-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 138px);
  gap: 9px;
  margin-inline: 0;
  overflow-x: auto;
  overflow-y: visible;
  padding: 6px 0 14px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.article-topic-rail::-webkit-scrollbar {
  display: none;
}

.article-topic-card {
  display: grid;
  align-content: end;
  gap: 5px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid rgba(194, 66, 56, 0.16);
  border-radius: 17px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.78), transparent 54%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.82), rgba(247, 239, 228, 0.62));
  color: rgba(104, 82, 67, 0.82);
  text-align: left;
  touch-action: pan-x pan-y;
  box-shadow:
    0 8px 18px rgba(86, 61, 40, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.article-topic-card strong {
  color: rgba(48, 41, 34, 0.92);
  font-family: var(--serif-body);
  font-size: 0.9rem;
  font-weight: 650;
  line-height: 1.05;
}

.article-topic-card small {
  color: rgba(112, 91, 68, 0.62);
  font-family: var(--ui-font);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.1;
}

.article-topic-card.is-active {
  border-color: rgba(196, 66, 58, 0.34);
  background:
    radial-gradient(circle at 50% 0%, rgba(232, 112, 89, 0.2), transparent 68%),
    linear-gradient(180deg, rgba(255, 246, 237, 0.96), rgba(246, 229, 215, 0.74));
}

.article-topic-card.is-active strong {
  color: rgba(150, 54, 48, 0.96);
}

#pubmedView.research-view.is-articles-mode .research-status {
  margin: -2px 2px 8px !important;
  max-width: none !important;
  font-size: 0.72rem !important;
  line-height: 1.25 !important;
}

#pubmedView.research-view.is-articles-mode .pubmed-list {
  gap: 9px !important;
  margin-top: 0 !important;
}

#pubmedView.research-view.is-articles-mode .research-article-button {
  grid-template-columns: 50px minmax(0, 1fr) 16px !important;
  gap: 11px !important;
  min-height: 80px !important;
  padding: 8px 11px 8px 8px !important;
  border-radius: 17px !important;
}

#pubmedView.research-view.is-articles-mode .research-cover {
  width: 50px !important;
  height: 50px !important;
  border-radius: 13px !important;
}

#pubmedView.research-view.is-articles-mode .pubmed-copy strong {
  font-size: clamp(0.92rem, 3vw, 1.12rem) !important;
}

#pubmedView.research-view.is-articles-mode .pubmed-copy small {
  font-size: clamp(0.74rem, 2.15vw, 0.86rem) !important;
}

@media (max-width: 560px) {
  #inputPanel:has(#pubmedView.is-articles-mode:not([hidden])) {
    padding-top: max(10px, calc(env(safe-area-inset-top) + 6px)) !important;
  }

  #pubmedView.research-view.is-articles-mode .library-header {
    padding-top: 50px !important;
  }

  .article-topic-rail {
    grid-auto-columns: minmax(112px, 132px);
  }
}

/* Research browser parity with the Classics browse surface. */
#inputPanel:has(#pubmedView.research-view:not(.is-articles-mode):not([hidden])) {
  width: 100vw !important;
  max-width: none !important;
  padding-top: 0 !important;
  padding-inline: clamp(14px, 4vw, 34px) !important;
  overflow-x: hidden !important;
}

#inputPanel:has(#pubmedView.research-view:not(.is-articles-mode):not([hidden])) .menu-card:has(#pubmedView) {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-top: 0 !important;
  padding-inline: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#pubmedView.research-view:not(.is-articles-mode) {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 8px !important;
  padding: 0 max(10px, env(safe-area-inset-left), env(safe-area-inset-right)) max(96px, calc(env(safe-area-inset-bottom) + 84px)) !important;
  background: transparent !important;
}

#pubmedView.research-view:not(.is-articles-mode) .library-header {
  position: relative !important;
  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  gap: 0 !important;
  margin: 0 0 10px !important;
  padding: calc(var(--screen-pad-top) + var(--top-control-size) + 10px) 0 0 !important;
}

#inputPanel.is-menu-subview:has(#pubmedView.research-view:not(.is-articles-mode):not([hidden])) #pubmedView .collection-back {
  position: fixed !important;
  top: var(--screen-pad-top) !important;
  left: calc(var(--screen-pad-left) + var(--top-corner-inset)) !important;
  z-index: 3 !important;
  width: var(--top-control-size) !important;
  min-width: var(--top-control-size) !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin: 0 !important;
  transform: none !important;
}

#pubmedView.research-view:not(.is-articles-mode) .library-header > div {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#pubmedView.research-view:not(.is-articles-mode) .library-header h2 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
  font-size: clamp(2.55rem, 10.6vw, 4rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.052em !important;
}

#pubmedView.research-view:not(.is-articles-mode) .library-header p {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 6px 0 0 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  font-size: clamp(0.86rem, 2.6vw, 1rem) !important;
  line-height: 1.28 !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-search-row {
  width: 100% !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  margin: -8px 0 -8px !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-search-row .library-search {
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  border-radius: 24px !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-search-row .library-search input {
  min-width: 0 !important;
  font-size: clamp(0.92rem, 2.8vw, 1.05rem) !important;
  text-overflow: ellipsis !important;
}

#pubmedView.research-view:not(.is-articles-mode) #researchSourceTabs,
#pubmedView.research-view:not(.is-articles-mode) .research-status {
  display: none !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-browse-shell {
  gap: 8px !important;
  margin-top: -10px !important;
  margin-bottom: 8px !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-section {
  gap: 6px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#pubmedView.research-view:not(.is-articles-mode) .gutenberg-browse-section-head,
#pubmedView.research-view:not(.is-articles-mode) .research-results-header {
  padding-inline: 0 !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-rail {
  --gutenberg-rail-align-pad: max(10px, env(safe-area-inset-left));
  --gutenberg-rail-end-pad: max(10px, env(safe-area-inset-right));
  width: 100vw !important;
  grid-auto-columns: minmax(118px, 138px) !important;
  gap: 9px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 1px var(--gutenberg-rail-end-pad) 7px var(--gutenberg-rail-align-pad) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-padding-left: var(--gutenberg-rail-align-pad) !important;
  scroll-padding-right: var(--gutenberg-rail-end-pad) !important;
  scroll-snap-type: none !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x pan-y !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: grab;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-rail:active {
  cursor: grabbing;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-rail::-webkit-scrollbar {
  display: none !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-card {
  min-height: 92px !important;
  gap: 5px !important;
  padding: 12px !important;
  border-radius: 17px !important;
  scroll-snap-align: none !important;
  touch-action: pan-x pan-y !important;
  -webkit-user-select: none;
  user-select: none;
  background: rgba(255, 250, 241, 0.58) !important;
  box-shadow: 0 8px 18px rgba(99, 70, 44, 0.06) !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-card:active {
  transform: none !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-card.is-active {
  box-shadow:
    0 0 0 1px rgba(202, 61, 51, 0.18),
    0 10px 20px rgba(180, 56, 48, 0.1) !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-card-icon svg {
  width: 24px !important;
  height: 24px !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-card strong {
  font-size: 0.9rem !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-source-card small {
  font-size: 0.74rem !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-results-header {
  margin-top: 0 !important;
}

#pubmedView.research-view:not(.is-articles-mode) .pubmed-list {
  gap: 7px !important;
  margin-top: 0 !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-article-button {
  grid-template-columns: 50px minmax(0, 1fr) 16px !important;
  gap: 11px !important;
  min-height: 80px !important;
  padding: 8px 11px 8px 8px !important;
  border-radius: 20px !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-cover {
  width: 50px !important;
  height: 50px !important;
  border-radius: 13px !important;
}

#pubmedView.research-view:not(.is-articles-mode) .pubmed-copy {
  gap: 3px !important;
}

#pubmedView.research-view:not(.is-articles-mode) .pubmed-copy strong {
  display: block !important;
  font-size: clamp(0.92rem, 3vw, 1.12rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#pubmedView.research-view:not(.is-articles-mode) .pubmed-copy small,
#pubmedView.research-view:not(.is-articles-mode) .pubmed-copy em {
  font-size: clamp(0.74rem, 2.15vw, 0.86rem) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-access-badges {
  flex-wrap: nowrap !important;
  gap: 4px !important;
  overflow: hidden !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-access-badge {
  min-height: 18px !important;
  padding: 2px 6px !important;
  font-size: 0.58rem !important;
}

#pubmedView.research-view:not(.is-articles-mode) .research-access-badge:nth-child(n+4) {
  display: none !important;
}

#pubmedView.research-view.is-articles-mode .research-search-row {
  display: block !important;
  margin: 0 !important;
}

@media (max-width: 560px) {
  #inputPanel:has(#pubmedView.research-view:not(.is-articles-mode):not([hidden])) {
    padding-inline: max(10px, env(safe-area-inset-left), env(safe-area-inset-right)) !important;
  }

  #pubmedView.research-view:not(.is-articles-mode) .library-header {
    padding-top: calc(var(--screen-pad-top) + var(--top-control-size) + 8px) !important;
  }

  #pubmedView.research-view:not(.is-articles-mode) .research-source-rail {
    grid-auto-columns: minmax(112px, 132px) !important;
  }
}

/* Compact Gutenberg book preview page. */
.gutenberg-details-panel {
  background:
    radial-gradient(circle at 76% 20%, rgba(205, 84, 64, 0.08), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(182, 136, 74, 0.08), transparent 38%),
    #faf6ed !important;
}

.gutenberg-details-sheet {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: clamp(14px, 1.9vh, 22px) !important;
  padding:
    max(18px, calc(env(safe-area-inset-top) + 14px))
    max(24px, calc(env(safe-area-inset-right) + 22px))
    max(18px, calc(env(safe-area-inset-bottom) + 14px))
    max(24px, calc(env(safe-area-inset-left) + 22px)) !important;
  background:
    radial-gradient(circle at 78% 22%, rgba(213, 80, 62, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 252, 245, 0.98), rgba(245, 236, 221, 0.96)) !important;
  overflow-y: auto !important;
}

.gutenberg-details-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(860px, 100%);
  margin-inline: auto;
}

.gutenberg-details-close,
.gutenberg-details-more {
  position: static !important;
  inset: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(42px, 11vw, 54px) !important;
  height: clamp(42px, 11vw, 54px) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(245, 238, 226, 0.82) !important;
  color: #322b24 !important;
  box-shadow:
    0 14px 28px rgba(68, 48, 24, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(28px, 7vw, 38px) !important;
  line-height: 1 !important;
}

.gutenberg-details-more {
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(18px, 4.5vw, 24px) !important;
  letter-spacing: 0.08em;
}

.gutenberg-details-top {
  display: grid !important;
  grid-template-columns: minmax(106px, min(30vw, 178px)) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(18px, 5vw, 34px) !important;
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin-inline: auto !important;
  padding-top: 0 !important;
}

.gutenberg-details-cover {
  width: 100% !important;
  max-width: 178px !important;
  aspect-ratio: 0.66 !important;
  min-height: 0 !important;
  border-radius: clamp(14px, 4vw, 24px) !important;
  overflow: hidden !important;
  background: rgba(238, 229, 213, 0.88) !important;
  box-shadow:
    0 18px 34px rgba(78, 56, 28, 0.13),
    0 0 0 1px rgba(88, 63, 39, 0.08) !important;
}

.gutenberg-details-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.gutenberg-details-title {
  min-width: 0;
}

.gutenberg-details-title h2 {
  margin: 0 !important;
  color: #20201d !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(31px, 7.5vw, 56px) !important;
  font-weight: 650 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gutenberg-details-author {
  margin: clamp(12px, 2.1vh, 18px) 0 clamp(14px, 2.4vh, 20px) !important;
  color: #a44236 !important;
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(11px, 2.5vw, 15px) !important;
  font-weight: 760 !important;
  letter-spacing: 0.34em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.gutenberg-details-meta-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 2.9vw, 22px);
  color: #3b332b;
  font-family: ui-rounded, "Avenir Next", sans-serif;
  font-size: clamp(12px, 2.7vw, 16px);
  line-height: 1;
}

.gutenberg-details-meta-list > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.gutenberg-details-meta-list > span > span {
  color: #564a3d;
  font-size: 1.1em;
}

.gutenberg-details-body {
  display: grid !important;
  gap: clamp(12px, 1.8vh, 18px) !important;
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin-inline: auto !important;
}

.gutenberg-details-about-card,
.gutenberg-details-start-card,
.gutenberg-details-option-card {
  border: 1px solid rgba(85, 63, 38, 0.12) !important;
  border-radius: clamp(18px, 4.8vw, 26px) !important;
  background: rgba(255, 252, 245, 0.72) !important;
  box-shadow:
    0 20px 42px rgba(87, 63, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.gutenberg-details-about-card {
  padding: clamp(17px, 3.8vw, 26px) clamp(18px, 4.2vw, 28px) clamp(10px, 2.4vw, 16px) !important;
}

.gutenberg-details-about-card h3,
.gutenberg-details-start-card h3 {
  margin: 0 0 clamp(10px, 2.1vw, 16px) !important;
  color: #2b2925 !important;
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(18px, 4vw, 24px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.02em !important;
}

.gutenberg-details-about-card p {
  margin: 0 !important;
  color: rgba(34, 32, 28, 0.9) !important;
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(15px, 3.45vw, 20px) !important;
  line-height: 1.52 !important;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gutenberg-details-card-chevron {
  display: block;
  margin-top: clamp(10px, 2vh, 16px);
  padding-top: clamp(7px, 1.2vh, 10px);
  border-top: 1px solid rgba(84, 65, 44, 0.13);
  color: rgba(70, 59, 48, 0.55);
  text-align: center;
  font-size: 22px;
  line-height: 1;
}

.gutenberg-details-loading {
  display: block;
  margin-top: 8px;
  color: rgba(164, 66, 54, 0.78);
  font-family: ui-rounded, "Avenir Next", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

/* Public-domain note (app.js GUTENBERG_PUBLIC_DOMAIN_NOTE). */
.gutenberg-details-rights {
  display: block;
  margin-top: 10px;
  color: rgba(94, 78, 64, 0.72);
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}

:is(html, body).theme-dark .gutenberg-details-rights {
  color: rgba(214, 218, 226, 0.62);
}

.gutenberg-details-start-card {
  display: grid !important;
  gap: 10px !important;
  padding: clamp(16px, 3.7vw, 24px) !important;
}

.gutenberg-details-download-error {
  margin: 0 0 2px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(196, 51, 46, 0.24) !important;
  border-radius: 12px !important;
  background: rgba(196, 51, 46, 0.07) !important;
  color: #a4312d !important;
  font: 650 12px/1.4 ui-rounded, "Avenir Next", sans-serif !important;
}

body.theme-dark .gutenberg-details-download-error,
body.dark-mode .gutenberg-details-download-error,
body.dark .gutenberg-details-download-error,
body[data-theme="dark"] .gutenberg-details-download-error {
  border-color: rgba(238, 111, 100, 0.3) !important;
  background: rgba(238, 111, 100, 0.09) !important;
  color: #f09a91 !important;
}

.gutenberg-details-primary-action,
.gutenberg-details-secondary-action,
.gutenberg-details-option-card button,
.gutenberg-details-option-card a {
  width: 100%;
  min-width: 0;
  border: 0;
  font-family: ui-rounded, "Avenir Next", sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.gutenberg-details-primary-action,
.gutenberg-details-secondary-action {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: clamp(50px, 8vh, 66px);
  padding: 0 clamp(18px, 4vw, 26px);
  border-radius: clamp(15px, 4vw, 21px);
  font-size: clamp(16px, 3.7vw, 21px);
  font-weight: 680;
  text-align: left;
}

.gutenberg-details-primary-action {
  background: linear-gradient(135deg, #d73931, #c52928) !important;
  color: #fffaf3 !important;
  box-shadow: 0 18px 28px rgba(190, 48, 42, 0.22) !important;
}

.gutenberg-details-secondary-action {
  border: 1px solid rgba(87, 64, 38, 0.13) !important;
  background: rgba(255, 251, 244, 0.64) !important;
  color: #2e2a25 !important;
}

.gutenberg-details-primary-action strong,
.gutenberg-details-secondary-action strong,
.gutenberg-details-option-card strong {
  justify-self: end;
  font-size: 1.35em;
  font-weight: 420;
}

.gutenberg-details-option-card {
  display: grid !important;
  padding: 0 clamp(18px, 4vw, 26px) !important;
}

.gutenberg-details-option-card button,
.gutenberg-details-option-card a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: clamp(46px, 7vh, 58px);
  padding: 0;
  border-bottom: 1px solid rgba(82, 62, 42, 0.12);
  background: transparent;
  color: #2f2b26;
  font-size: clamp(15px, 3.4vw, 19px);
  font-weight: 520;
  text-align: left;
}

.gutenberg-details-option-card > :last-child {
  border-bottom: 0;
}

.gutenberg-details-primary-action:disabled,
.gutenberg-details-secondary-action:disabled,
.gutenberg-details-option-card button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

body.dark-mode .gutenberg-details-panel,
body.dark .gutenberg-details-panel,
body.theme-dark .gutenberg-details-panel,
body[data-theme="dark"] .gutenberg-details-panel {
  background:
    radial-gradient(circle at 74% 18%, rgba(199, 85, 61, 0.14), transparent 34%),
    radial-gradient(circle at 10% 80%, rgba(204, 155, 82, 0.1), transparent 36%),
    #11100e !important;
}

body.dark-mode .gutenberg-details-sheet,
body.dark .gutenberg-details-sheet,
body.theme-dark .gutenberg-details-sheet,
body[data-theme="dark"] .gutenberg-details-sheet {
  background:
    radial-gradient(circle at 82% 22%, rgba(209, 87, 64, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(24, 22, 18, 0.98), rgba(14, 13, 12, 0.98)) !important;
}

body.dark-mode .gutenberg-details-close,
body.dark-mode .gutenberg-details-more,
body.dark .gutenberg-details-close,
body.dark .gutenberg-details-more,
body.theme-dark .gutenberg-details-close,
body.theme-dark .gutenberg-details-more,
body[data-theme="dark"] .gutenberg-details-close,
body[data-theme="dark"] .gutenberg-details-more {
  background: rgba(44, 39, 32, 0.9) !important;
  color: #f3eadb !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .gutenberg-details-title h2,
body.dark .gutenberg-details-title h2,
body.theme-dark .gutenberg-details-title h2,
body[data-theme="dark"] .gutenberg-details-title h2,
body.dark-mode .gutenberg-details-about-card h3,
body.dark .gutenberg-details-about-card h3,
body.theme-dark .gutenberg-details-about-card h3,
body[data-theme="dark"] .gutenberg-details-about-card h3,
body.dark-mode .gutenberg-details-start-card h3,
body.dark .gutenberg-details-start-card h3,
body.theme-dark .gutenberg-details-start-card h3,
body[data-theme="dark"] .gutenberg-details-start-card h3 {
  color: #f4eadc !important;
}

body.dark-mode .gutenberg-details-author,
body.dark .gutenberg-details-author,
body.theme-dark .gutenberg-details-author,
body[data-theme="dark"] .gutenberg-details-author {
  color: #df6a58 !important;
}

body.dark-mode .gutenberg-details-meta-list,
body.dark .gutenberg-details-meta-list,
body.theme-dark .gutenberg-details-meta-list,
body[data-theme="dark"] .gutenberg-details-meta-list,
body.dark-mode .gutenberg-details-option-card button,
body.dark-mode .gutenberg-details-option-card a,
body.dark .gutenberg-details-option-card button,
body.dark .gutenberg-details-option-card a,
body.theme-dark .gutenberg-details-option-card button,
body.theme-dark .gutenberg-details-option-card a,
body[data-theme="dark"] .gutenberg-details-option-card button,
body[data-theme="dark"] .gutenberg-details-option-card a {
  color: rgba(246, 236, 218, 0.88) !important;
}

body.dark-mode .gutenberg-details-about-card,
body.dark-mode .gutenberg-details-start-card,
body.dark-mode .gutenberg-details-option-card,
body.dark .gutenberg-details-about-card,
body.dark .gutenberg-details-start-card,
body.dark .gutenberg-details-option-card,
body.theme-dark .gutenberg-details-about-card,
body.theme-dark .gutenberg-details-start-card,
body.theme-dark .gutenberg-details-option-card,
body[data-theme="dark"] .gutenberg-details-about-card,
body[data-theme="dark"] .gutenberg-details-start-card,
body[data-theme="dark"] .gutenberg-details-option-card {
  border-color: rgba(238, 207, 167, 0.12) !important;
  background: rgba(39, 34, 28, 0.74) !important;
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .gutenberg-details-about-card p,
body.dark .gutenberg-details-about-card p,
body.theme-dark .gutenberg-details-about-card p,
body[data-theme="dark"] .gutenberg-details-about-card p {
  color: rgba(245, 235, 218, 0.82) !important;
}

body.dark-mode .gutenberg-details-secondary-action,
body.dark .gutenberg-details-secondary-action,
body.theme-dark .gutenberg-details-secondary-action,
body[data-theme="dark"] .gutenberg-details-secondary-action {
  border-color: rgba(238, 207, 167, 0.14) !important;
  background: rgba(24, 22, 18, 0.48) !important;
  color: #f2e7d8 !important;
}

@media (max-width: 560px) {
  .gutenberg-details-sheet {
    gap: clamp(12px, 1.55vh, 18px) !important;
    padding:
      max(16px, calc(env(safe-area-inset-top) + 12px))
      max(18px, calc(env(safe-area-inset-right) + 16px))
      max(16px, calc(env(safe-area-inset-bottom) + 12px))
      max(18px, calc(env(safe-area-inset-left) + 16px)) !important;
  }

  .gutenberg-details-top {
    grid-template-columns: minmax(112px, 33vw) minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .gutenberg-details-meta-list {
    gap: 10px 14px;
  }
}

@media (max-height: 760px) {
  .gutenberg-details-sheet {
    gap: 10px !important;
  }

  .gutenberg-details-top {
    grid-template-columns: minmax(92px, 27vw) minmax(0, 1fr) !important;
  }

  .gutenberg-details-title h2 {
    font-size: clamp(27px, 6.8vw, 42px) !important;
  }

  .gutenberg-details-author {
    margin-block: 8px 9px !important;
  }

  .gutenberg-details-about-card p {
    -webkit-line-clamp: 4;
  }

  .gutenberg-details-option-card button,
  .gutenberg-details-option-card a {
    min-height: 42px;
  }
}

/* Compact Gutenberg book preview final overrides. */
.gutenberg-details-panel {
  background:
    radial-gradient(circle at 76% 20%, rgba(205, 84, 64, 0.08), transparent 34%),
    radial-gradient(circle at 8% 82%, rgba(182, 136, 74, 0.08), transparent 38%),
    #faf6ed !important;
}

.gutenberg-details-sheet {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) !important;
  gap: clamp(14px, 1.9vh, 22px) !important;
  padding:
    max(18px, calc(env(safe-area-inset-top) + 14px))
    max(24px, calc(env(safe-area-inset-right) + 22px))
    max(18px, calc(env(safe-area-inset-bottom) + 14px))
    max(24px, calc(env(safe-area-inset-left) + 22px)) !important;
  background:
    radial-gradient(circle at 78% 22%, rgba(213, 80, 62, 0.08), transparent 32%),
    linear-gradient(135deg, rgba(255, 252, 245, 0.98), rgba(245, 236, 221, 0.96)) !important;
  overflow-y: auto !important;
}

.gutenberg-details-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: min(860px, 100%) !important;
  margin-inline: auto !important;
}

.gutenberg-details-close,
.gutenberg-details-more {
  position: static !important;
  inset: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(42px, 11vw, 54px) !important;
  height: clamp(42px, 11vw, 54px) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(245, 238, 226, 0.82) !important;
  color: #322b24 !important;
  box-shadow:
    0 14px 28px rgba(68, 48, 24, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(28px, 7vw, 38px) !important;
  line-height: 1 !important;
}

.gutenberg-details-more {
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(18px, 4.5vw, 24px) !important;
  letter-spacing: 0.08em !important;
}

.gutenberg-details-top {
  display: grid !important;
  grid-template-columns: minmax(106px, min(30vw, 178px)) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(18px, 5vw, 34px) !important;
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin-inline: auto !important;
  padding-top: 0 !important;
}

.gutenberg-details-cover {
  width: 100% !important;
  max-width: 178px !important;
  aspect-ratio: 0.66 !important;
  min-height: 0 !important;
  border-radius: clamp(14px, 4vw, 24px) !important;
  overflow: hidden !important;
  background: rgba(238, 229, 213, 0.88) !important;
  box-shadow:
    0 18px 34px rgba(78, 56, 28, 0.13),
    0 0 0 1px rgba(88, 63, 39, 0.08) !important;
}

.gutenberg-details-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.gutenberg-details-title {
  min-width: 0 !important;
}

.gutenberg-details-title h2 {
  margin: 0 !important;
  color: #20201d !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(31px, 7.5vw, 56px) !important;
  font-weight: 650 !important;
  letter-spacing: -0.045em !important;
  line-height: 0.98 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.gutenberg-details-author {
  margin: clamp(12px, 2.1vh, 18px) 0 clamp(14px, 2.4vh, 20px) !important;
  color: #a44236 !important;
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(11px, 2.5vw, 15px) !important;
  font-weight: 760 !important;
  letter-spacing: 0.34em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
}

.gutenberg-details-meta-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(10px, 2.9vw, 22px) !important;
  color: #3b332b !important;
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(12px, 2.7vw, 16px) !important;
  line-height: 1 !important;
}

.gutenberg-details-meta-list > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.gutenberg-details-body {
  display: grid !important;
  gap: clamp(12px, 1.8vh, 18px) !important;
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin-inline: auto !important;
}

.gutenberg-details-about-card,
.gutenberg-details-start-card,
.gutenberg-details-option-card {
  border: 1px solid rgba(85, 63, 38, 0.12) !important;
  border-radius: clamp(18px, 4.8vw, 26px) !important;
  background: rgba(255, 252, 245, 0.72) !important;
  box-shadow:
    0 20px 42px rgba(87, 63, 35, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.gutenberg-details-about-card {
  padding: clamp(17px, 3.8vw, 26px) clamp(18px, 4.2vw, 28px) clamp(10px, 2.4vw, 16px) !important;
}

.gutenberg-details-about-card h3,
.gutenberg-details-start-card h3 {
  margin: 0 0 clamp(10px, 2.1vw, 16px) !important;
  color: #2b2925 !important;
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(18px, 4vw, 24px) !important;
  font-weight: 760 !important;
  letter-spacing: -0.02em !important;
}

.gutenberg-details-about-card p {
  margin: 0 !important;
  color: rgba(34, 32, 28, 0.9) !important;
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  font-size: clamp(15px, 3.45vw, 20px) !important;
  line-height: 1.52 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 7 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.gutenberg-details-card-chevron {
  display: block !important;
  margin-top: clamp(10px, 2vh, 16px) !important;
  padding-top: clamp(7px, 1.2vh, 10px) !important;
  border-top: 1px solid rgba(84, 65, 44, 0.13) !important;
  color: rgba(70, 59, 48, 0.55) !important;
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.gutenberg-details-start-card {
  display: grid !important;
  gap: 10px !important;
  padding: clamp(16px, 3.7vw, 24px) !important;
}

.gutenberg-details-primary-action,
.gutenberg-details-secondary-action,
.gutenberg-details-option-card button,
.gutenberg-details-option-card a {
  width: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
  font-family: ui-rounded, "Avenir Next", sans-serif !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.gutenberg-details-primary-action,
.gutenberg-details-secondary-action {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: clamp(50px, 8vh, 66px) !important;
  padding: 0 clamp(18px, 4vw, 26px) !important;
  border-radius: clamp(15px, 4vw, 21px) !important;
  font-size: clamp(16px, 3.7vw, 21px) !important;
  font-weight: 680 !important;
  text-align: left !important;
}

.gutenberg-details-primary-action {
  background: linear-gradient(135deg, #d73931, #c52928) !important;
  color: #fffaf3 !important;
  box-shadow: 0 18px 28px rgba(190, 48, 42, 0.22) !important;
}

.gutenberg-details-secondary-action {
  border: 1px solid rgba(87, 64, 38, 0.13) !important;
  background: rgba(255, 251, 244, 0.64) !important;
  color: #2e2a25 !important;
}

.gutenberg-details-primary-action strong,
.gutenberg-details-secondary-action strong,
.gutenberg-details-option-card strong {
  justify-self: end !important;
  font-size: 1.35em !important;
  font-weight: 420 !important;
}

.gutenberg-details-option-card {
  display: grid !important;
  padding: 0 clamp(18px, 4vw, 26px) !important;
}

.gutenberg-details-option-card button,
.gutenberg-details-option-card a {
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: clamp(46px, 7vh, 58px) !important;
  padding: 0 !important;
  border-bottom: 1px solid rgba(82, 62, 42, 0.12) !important;
  background: transparent !important;
  color: #2f2b26 !important;
  font-size: clamp(15px, 3.4vw, 19px) !important;
  font-weight: 520 !important;
  text-align: left !important;
}

.gutenberg-details-option-card > :last-child {
  border-bottom: 0 !important;
}

body.dark-mode .gutenberg-details-panel,
body.dark .gutenberg-details-panel,
body.theme-dark .gutenberg-details-panel,
body[data-theme="dark"] .gutenberg-details-panel {
  background:
    radial-gradient(circle at 74% 18%, rgba(199, 85, 61, 0.14), transparent 34%),
    radial-gradient(circle at 10% 80%, rgba(204, 155, 82, 0.1), transparent 36%),
    #11100e !important;
}

body.dark-mode .gutenberg-details-sheet,
body.dark .gutenberg-details-sheet,
body.theme-dark .gutenberg-details-sheet,
body[data-theme="dark"] .gutenberg-details-sheet {
  background:
    radial-gradient(circle at 82% 22%, rgba(209, 87, 64, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(24, 22, 18, 0.98), rgba(14, 13, 12, 0.98)) !important;
}

body.dark-mode .gutenberg-details-close,
body.dark-mode .gutenberg-details-more,
body.dark .gutenberg-details-close,
body.dark .gutenberg-details-more,
body.theme-dark .gutenberg-details-close,
body.theme-dark .gutenberg-details-more,
body[data-theme="dark"] .gutenberg-details-close,
body[data-theme="dark"] .gutenberg-details-more {
  background: rgba(44, 39, 32, 0.9) !important;
  color: #f3eadb !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .gutenberg-details-title h2,
body.dark .gutenberg-details-title h2,
body.theme-dark .gutenberg-details-title h2,
body[data-theme="dark"] .gutenberg-details-title h2,
body.dark-mode .gutenberg-details-about-card h3,
body.dark .gutenberg-details-about-card h3,
body.theme-dark .gutenberg-details-about-card h3,
body[data-theme="dark"] .gutenberg-details-about-card h3,
body.dark-mode .gutenberg-details-start-card h3,
body.dark .gutenberg-details-start-card h3,
body.theme-dark .gutenberg-details-start-card h3,
body[data-theme="dark"] .gutenberg-details-start-card h3 {
  color: #f4eadc !important;
}

body.dark-mode .gutenberg-details-author,
body.dark .gutenberg-details-author,
body.theme-dark .gutenberg-details-author,
body[data-theme="dark"] .gutenberg-details-author {
  color: #df6a58 !important;
}

body.dark-mode .gutenberg-details-meta-list,
body.dark .gutenberg-details-meta-list,
body.theme-dark .gutenberg-details-meta-list,
body[data-theme="dark"] .gutenberg-details-meta-list,
body.dark-mode .gutenberg-details-option-card button,
body.dark-mode .gutenberg-details-option-card a,
body.dark .gutenberg-details-option-card button,
body.dark .gutenberg-details-option-card a,
body.theme-dark .gutenberg-details-option-card button,
body.theme-dark .gutenberg-details-option-card a,
body[data-theme="dark"] .gutenberg-details-option-card button,
body[data-theme="dark"] .gutenberg-details-option-card a {
  color: rgba(246, 236, 218, 0.88) !important;
}

body.dark-mode .gutenberg-details-about-card,
body.dark-mode .gutenberg-details-start-card,
body.dark-mode .gutenberg-details-option-card,
body.dark .gutenberg-details-about-card,
body.dark .gutenberg-details-start-card,
body.dark .gutenberg-details-option-card,
body.theme-dark .gutenberg-details-about-card,
body.theme-dark .gutenberg-details-start-card,
body.theme-dark .gutenberg-details-option-card,
body[data-theme="dark"] .gutenberg-details-about-card,
body[data-theme="dark"] .gutenberg-details-start-card,
body[data-theme="dark"] .gutenberg-details-option-card {
  border-color: rgba(238, 207, 167, 0.12) !important;
  background: rgba(39, 34, 28, 0.74) !important;
  box-shadow:
    0 22px 42px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

body.dark-mode .gutenberg-details-about-card p,
body.dark .gutenberg-details-about-card p,
body.theme-dark .gutenberg-details-about-card p,
body[data-theme="dark"] .gutenberg-details-about-card p {
  color: rgba(245, 235, 218, 0.82) !important;
}

body.dark-mode .gutenberg-details-secondary-action,
body.dark .gutenberg-details-secondary-action,
body.theme-dark .gutenberg-details-secondary-action,
body[data-theme="dark"] .gutenberg-details-secondary-action {
  border-color: rgba(238, 207, 167, 0.14) !important;
  background: rgba(24, 22, 18, 0.48) !important;
  color: #f2e7d8 !important;
}

@media (max-width: 560px) {
  .gutenberg-details-sheet {
    gap: clamp(12px, 1.55vh, 18px) !important;
    padding:
      max(16px, calc(env(safe-area-inset-top) + 12px))
      max(18px, calc(env(safe-area-inset-right) + 16px))
      max(16px, calc(env(safe-area-inset-bottom) + 12px))
      max(18px, calc(env(safe-area-inset-left) + 16px)) !important;
  }

  .gutenberg-details-top {
    grid-template-columns: minmax(112px, 33vw) minmax(0, 1fr) !important;
    gap: 18px !important;
  }

  .gutenberg-details-meta-list {
    gap: 10px 14px !important;
  }
}

@media (max-height: 760px) {
  .gutenberg-details-sheet {
    gap: 10px !important;
  }

  .gutenberg-details-top {
    grid-template-columns: minmax(92px, 27vw) minmax(0, 1fr) !important;
  }

  .gutenberg-details-title h2 {
    font-size: clamp(27px, 6.8vw, 42px) !important;
  }

  .gutenberg-details-author {
    margin-block: 8px 9px !important;
  }

  .gutenberg-details-about-card p {
    -webkit-line-clamp: 4 !important;
  }

  .gutenberg-details-option-card button,
  .gutenberg-details-option-card a {
    min-height: 42px !important;
  }
}

/* Library sections redesign: all/books/articles/papers. */
body:has(#collectionView:not([hidden])) #inputPanel.is-menu-subview {
  background:
    radial-gradient(circle at 78% 0%, rgba(188, 72, 64, 0.04), transparent 24rem),
    linear-gradient(180deg, #fffdf8 0%, #f8f2e9 100%) !important;
}

html.theme-dark body:has(#collectionView:not([hidden])) #inputPanel.is-menu-subview,
body.theme-dark:has(#collectionView:not([hidden])) #inputPanel.is-menu-subview {
  background:
    radial-gradient(circle at 74% 0%, rgba(190, 73, 66, 0.09), transparent 22rem),
    radial-gradient(circle at 8% 6%, rgba(255, 244, 218, 0.035), transparent 18rem),
    linear-gradient(180deg, #15130f 0%, #11100d 58%, #0f0e0c 100%) !important;
}

#collectionView.collection-view {
  --library-page-gutter: clamp(8px, 2vw, 12px);
  gap: clamp(14px, 2vh, 20px) !important;
  margin-top: clamp(-38px, -5vh, -22px) !important;
}

#collectionView .library-search,
#collectionView .library-category-row,
#collectionView .library-section,
#collectionView > .collection-header {
  width: calc(100vw - (var(--library-page-gutter, clamp(8px, 2vw, 12px)) * 2)) !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw + var(--library-page-gutter, clamp(8px, 2vw, 12px))) !important;
  margin-right: calc(50% - 50vw + var(--library-page-gutter, clamp(8px, 2vw, 12px))) !important;
}

#collectionView > .library-section > .library-section-heading {
  display: none;
}

#collectionView > .collection-header.library-header {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding-top: 0 !important;
  margin-bottom: clamp(-4px, -0.8vh, -2px) !important;
}

#collectionView.collection-view,
#statsView.stats-view,
#settingsView.settings-view {
  --subview-header-gutter: clamp(8px, 2vw, 12px);
  gap: clamp(14px, 2vh, 20px) !important;
  margin-top: clamp(-38px, -5vh, -22px) !important;
}

#collectionView > .collection-header,
#statsView > .collection-header,
#settingsView > .collection-header {
  width: calc(100vw - (var(--subview-header-gutter) * 2)) !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw + var(--subview-header-gutter)) !important;
  margin-right: calc(50% - 50vw + var(--subview-header-gutter)) !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0 !important;
  padding-top: 0 !important;
  margin-bottom: clamp(-4px, -0.8vh, -2px) !important;
}

#statsView > .collection-header,
#settingsView > .collection-header {
  transform: none !important;
}

#collectionView > .collection-header h2,
#statsView > .collection-header h2,
#settingsView > .collection-header h2 {
  margin: 0 !important;
  overflow: visible !important;
  color: rgba(22, 22, 22, 0.96) !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(2.45rem, 9vw, 3.05rem) !important;
  font-weight: 500 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#collectionView > .collection-header p,
#statsView > .collection-header p {
  max-width: none !important;
  margin: 6px 0 0 !important;
  color: rgba(84, 79, 70, 0.62) !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(1rem, 3.8vw, 1.16rem) !important;
  line-height: 1.26 !important;
}

html.theme-dark #collectionView > .collection-header h2,
html.theme-dark #statsView > .collection-header h2,
html.theme-dark #settingsView > .collection-header h2,
body.theme-dark #collectionView > .collection-header h2,
body.theme-dark #statsView > .collection-header h2,
body.theme-dark #settingsView > .collection-header h2 {
  color: #f4eadc !important;
}

html.theme-dark #collectionView > .collection-header p,
html.theme-dark #statsView > .collection-header p,
body.theme-dark #collectionView > .collection-header p,
body.theme-dark #statsView > .collection-header p {
  color: rgba(230, 217, 194, 0.66) !important;
}

#collectionView .library-search {
  min-height: 54px;
  border-radius: 18px;
}

#collectionView .library-category-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

#collectionView .library-category-chip {
  min-width: 0;
  min-height: 46px;
  padding: 0 8px;
  border: 1px solid rgba(222, 214, 201, 0.48);
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: rgba(255, 253, 248, 0.68);
  color: rgba(91, 79, 68, 0.78);
  font-family: var(--reading-font);
  font-size: clamp(0.9rem, 3.2vw, 1rem);
  line-height: 1;
  box-shadow: 0 9px 20px rgba(40, 36, 28, 0.025);
}

#collectionView .library-category-chip.is-selected {
  border-color: rgba(198, 58, 54, 0.24);
  background: rgba(255, 244, 241, 0.78);
  color: rgba(190, 45, 39, 0.94);
}

#collectionView .library-category-chip:active,
#collectionView .library-book-card:active,
#collectionView .library-book-card .collection-open:active,
#collectionView .library-stack-row:active,
#collectionView .library-stack-row .collection-open:active {
  transform: none !important;
}

#collectionView .library-category-icon,
#collectionView .library-section-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
  overflow: visible;
}

#collectionView .library-content-section {
  display: grid;
  gap: 10px;
  overflow: visible;
}

#collectionView .collection-list {
  overflow: visible;
}

#collectionView .library-content-section + .library-content-section {
  margin-top: clamp(18px, 3vh, 28px);
}

#collectionView .library-book-section,
#collectionView .library-book-section::before,
#collectionView .library-book-section::after,
#collectionView .library-book-rail,
#collectionView .library-book-rail::before,
#collectionView .library-book-rail::after {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

#collectionView .library-content-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-inline: 2px;
}

#collectionView .library-content-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(24, 23, 21, 0.96);
}

#collectionView .library-content-title h4 {
  margin: 0;
  font-family: var(--reading-font);
  font-size: clamp(1.36rem, 5.2vw, 1.68rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0;
}

#collectionView .library-section-icon {
  width: 22px;
  height: 22px;
  color: rgba(190, 45, 39, 0.92);
}

#collectionView .library-see-all {
  min-height: 30px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  box-shadow: none;
  color: rgba(190, 45, 39, 0.92);
  font-family: var(--reading-font);
  font-size: 0.98rem;
  font-weight: 500;
}

#collectionView .library-see-all span:last-child {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}

#collectionView .library-section-sort-control {
  position: relative;
  min-width: 94px;
  min-height: 32px;
  padding: 0 24px 0 10px;
  border: 1px solid rgba(198, 58, 54, 0.18);
  border-radius: 999px;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  background: rgba(255, 244, 241, 0.58);
  color: rgba(190, 45, 39, 0.94);
  font-family: var(--reading-font);
  font-size: 0.86rem;
  line-height: 1;
}

#collectionView .library-section-sort-control::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

#collectionView .library-section-sort-control span {
  color: rgba(126, 92, 76, 0.72);
  font-size: 0.78rem;
}

#collectionView .library-section-sort-control select {
  min-width: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1;
  outline: 0;
}

#collectionView .library-book-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(100px, 23vw, 132px);
  gap: clamp(11px, 2.65vw, 18px);
  margin-inline: calc(-1 * var(--library-page-gutter, clamp(8px, 2vw, 12px)));
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px var(--library-page-gutter, clamp(8px, 2vw, 12px)) 5px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--library-page-gutter, clamp(8px, 2vw, 12px));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

#collectionView .library-book-rail::-webkit-scrollbar {
  display: none;
}

#collectionView .library-book-card.collection-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  scroll-snap-align: start;
  touch-action: pan-x;
  transform: none !important;
}

#collectionView .library-stack-list {
  overflow: hidden;
  border: 1px solid rgba(222, 214, 201, 0.36);
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.62);
  box-shadow:
    0 10px 24px rgba(40, 36, 28, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

#collectionView .library-stack-row.collection-item {
  min-height: 82px;
  padding: 8px 10px 8px 8px;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 8px;
  background: transparent;
  box-shadow: none;
}

#collectionView .library-stack-row.collection-item + .library-stack-row.collection-item {
  border-top: 1px solid rgba(91, 75, 63, 0.11);
}

#collectionView .library-stack-row .collection-open {
  min-height: 64px;
  padding: 0;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  gap: 12px;
}

#collectionView .library-stack-row .collection-cover {
  width: 76px;
  height: 48px;
  border-radius: 6px;
}

#collectionView .library-stack-row .collection-cover.has-image img {
  object-fit: cover !important;
  object-position: center !important;
}

#collectionView .library-stack-row.is-books.collection-item {
  min-height: 94px;
}

#collectionView .library-stack-row.is-books .collection-open {
  min-height: 78px;
  grid-template-columns: 54px minmax(0, 1fr) auto;
}

#collectionView .library-stack-row.is-books .collection-cover {
  width: 54px;
  height: 74px;
  border-radius: 7px;
}

#collectionView .library-stack-row.is-books .collection-cover.has-image img {
  object-fit: fill !important;
}

#collectionView .library-stack-row .collection-copy {
  gap: 4px;
}

#collectionView .library-stack-row .collection-copy strong {
  display: -webkit-box;
  white-space: normal;
  line-height: 1.16;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#collectionView .library-stack-row .collection-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collectionView .library-stack-row .collection-progress {
  display: none;
}

#collectionView .library-stack-row .collection-meta {
  align-self: center;
  padding: 0;
  color: rgba(126, 105, 86, 0.72);
  font-size: 0.78rem;
}

#collectionView .library-stack-row .collection-meta.is-pdf-tag {
  min-width: 42px;
  min-height: 23px;
  padding: 4px 9px 3px;
  border: 1px solid rgba(198, 58, 54, 0.22);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 240, 236, 0.92);
  color: rgba(169, 36, 31, 0.95);
  font-size: 0.76rem;
}

#collectionView .library-section-empty {
  margin: 0;
  padding: 18px 16px;
  border: 1px dashed rgba(222, 214, 201, 0.56);
  border-radius: 8px;
  color: rgba(86, 81, 73, 0.62);
  background: rgba(255, 253, 247, 0.48);
  font-family: var(--reading-font);
  font-size: 0.94rem;
  line-height: 1.3;
}

#collectionView .library-book-rail .library-section-empty {
  width: 100%;
}

#collectionView .library-stack-list .library-section-empty {
  border: 0;
  border-radius: 0;
  background: transparent;
}

@media (min-width: 520px) {
  #collectionView .library-book-rail {
    grid-auto-columns: clamp(100px, 23vw, 132px);
  }
}

@media (max-width: 430px), (max-height: 880px) and (max-width: 520px) {
  #collectionView.collection-view {
    --library-page-gutter: clamp(8px, 2vw, 10px);
  }

  #collectionView .library-book-rail {
    grid-auto-columns: 86px;
    gap: 10px;
    padding-top: 0;
    padding-bottom: 4px;
  }

  #collectionView .library-book-card.collection-item {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 374px) {
  #collectionView .library-category-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #collectionView .library-book-rail {
    grid-auto-columns: 86px;
  }

  #collectionView .library-book-card.collection-item {
    min-height: 0;
    max-height: none;
  }

  #collectionView .library-stack-row .collection-open {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  #collectionView .library-stack-row .collection-cover {
    width: 64px;
    height: 42px;
  }

  #collectionView .library-stack-row.is-books .collection-open {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  #collectionView .library-stack-row.is-books .collection-cover {
    width: 48px;
    height: 66px;
  }

  #collectionView .library-stack-row .collection-meta,
  #collectionView .library-stack-row .collection-menu-wrap {
    display: none;
  }
}

html.theme-dark #collectionView .library-category-chip,
body.theme-dark #collectionView .library-category-chip,
html.theme-dark #collectionView .library-stack-list,
body.theme-dark #collectionView .library-stack-list,
html.theme-dark #collectionView .library-section-empty,
body.theme-dark #collectionView .library-section-empty {
  border-color: rgba(225, 212, 190, 0.16) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 244, 226, 0.055), transparent 42%),
    linear-gradient(180deg, rgba(43, 38, 32, 0.84), rgba(31, 28, 24, 0.82)) !important;
  color: rgba(220, 211, 196, 0.78) !important;
}

html.theme-dark #collectionView .library-category-chip.is-selected,
body.theme-dark #collectionView .library-category-chip.is-selected {
  border-color: rgba(220, 114, 98, 0.24) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 244, 226, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(81, 41, 36, 0.82), rgba(43, 35, 31, 0.84)) !important;
  color: rgba(226, 126, 111, 0.94) !important;
}

html.theme-dark #collectionView .library-category-chip,
body.theme-dark #collectionView .library-category-chip {
  background: rgba(43, 38, 32, 0.78) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12) !important;
}

html.theme-dark #collectionView .library-category-chip.is-selected,
body.theme-dark #collectionView .library-category-chip.is-selected {
  background: rgba(81, 41, 36, 0.76) !important;
}

html.theme-dark #collectionView .library-content-title,
body.theme-dark #collectionView .library-content-title {
  color: rgba(250, 244, 234, 0.94) !important;
}

html.theme-dark #collectionView .library-section-icon,
body.theme-dark #collectionView .library-section-icon,
html.theme-dark #collectionView .library-see-all,
body.theme-dark #collectionView .library-see-all {
  color: rgba(226, 126, 111, 0.9) !important;
}

html.theme-dark #collectionView .library-section-sort-control,
body.theme-dark #collectionView .library-section-sort-control {
  border-color: rgba(220, 114, 98, 0.22) !important;
  background: rgba(81, 41, 36, 0.48) !important;
  color: rgba(226, 126, 111, 0.94) !important;
}

html.theme-dark #collectionView .library-section-sort-control span,
body.theme-dark #collectionView .library-section-sort-control span {
  color: rgba(220, 211, 196, 0.62) !important;
}

html.theme-dark #collectionView .library-book-card.home-progress-book,
body.theme-dark #collectionView .library-book-card.home-progress-book {
  border-color: rgba(246, 238, 224, 0.14) !important;
  background: rgba(28, 25, 21, 0.54) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.26) !important;
}

html.theme-dark #collectionView .library-stack-row.collection-item + .library-stack-row.collection-item,
body.theme-dark #collectionView .library-stack-row.collection-item + .library-stack-row.collection-item {
  border-top-color: rgba(225, 212, 190, 0.12) !important;
}

html.theme-dark #collectionView .library-stack-row .collection-meta.is-pdf-tag,
body.theme-dark #collectionView .library-stack-row .collection-meta.is-pdf-tag,
html.theme-dark #collectionView .library-book-card .collection-meta,
body.theme-dark #collectionView .library-book-card .collection-meta {
  border-color: rgba(220, 114, 98, 0.24) !important;
  background: rgba(81, 41, 36, 0.9) !important;
  color: rgba(245, 157, 140, 0.96) !important;
}

/* Compact Gutenberg book preview refinement: calmer type, lighter cards, real expandable blurb. */
.gutenberg-details-toolbar {
  justify-content: flex-start !important;
}

.gutenberg-details-more {
  display: none !important;
}

.gutenberg-details-title h2 {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  color: #22211e !important;
  font-size: clamp(25px, 6vw, 44px) !important;
  font-weight: 560 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.08 !important;
}

.gutenberg-details-author {
  margin: clamp(10px, 1.7vh, 14px) 0 clamp(11px, 1.9vh, 16px) !important;
  font-size: clamp(10px, 2.25vw, 13px) !important;
  font-weight: 720 !important;
  letter-spacing: 0.34em !important;
}

.gutenberg-details-meta-list {
  gap: 9px clamp(12px, 3vw, 20px) !important;
  font-size: clamp(11px, 2.55vw, 14px) !important;
}

.gutenberg-details-about-card,
.gutenberg-details-start-card,
.gutenberg-details-option-card {
  border-color: rgba(82, 64, 43, 0.1) !important;
  border-radius: clamp(16px, 4.1vw, 22px) !important;
  background: rgba(255, 252, 245, 0.6) !important;
  box-shadow:
    0 10px 24px rgba(87, 63, 35, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.gutenberg-details-about-card {
  padding: clamp(15px, 3.4vw, 22px) clamp(16px, 3.8vw, 24px) clamp(8px, 2vw, 12px) !important;
}

.gutenberg-details-about-card h3,
.gutenberg-details-start-card h3 {
  margin-bottom: clamp(9px, 1.8vw, 13px) !important;
  text-transform: none !important;
  color: #292824 !important;
  font-size: clamp(16px, 3.45vw, 20px) !important;
  font-weight: 690 !important;
  letter-spacing: -0.02em !important;
}

.gutenberg-details-about-card p {
  font-size: clamp(14px, 3.1vw, 17px) !important;
  line-height: 1.5 !important;
  -webkit-line-clamp: 6 !important;
}

.gutenberg-details-about-card.is-expanded p {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

.gutenberg-details-card-chevron {
  appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin-top: clamp(8px, 1.5vh, 12px) !important;
  padding: clamp(6px, 1.2vh, 9px) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(84, 65, 44, 0.11) !important;
  background: transparent !important;
  color: rgba(70, 59, 48, 0.55) !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.gutenberg-details-about-card.is-expanded .gutenberg-details-card-chevron span {
  transform: rotate(180deg) !important;
}

.gutenberg-details-start-card {
  gap: 8px !important;
  padding: clamp(14px, 3.2vw, 20px) !important;
}

.gutenberg-details-primary-action,
.gutenberg-details-secondary-action {
  min-height: clamp(45px, 6.6vh, 56px) !important;
  padding: 0 clamp(16px, 3.6vw, 22px) !important;
  border-radius: clamp(13px, 3.3vw, 18px) !important;
  font-size: clamp(14px, 3.2vw, 18px) !important;
  font-weight: 620 !important;
}

.gutenberg-details-primary-action {
  box-shadow: 0 10px 20px rgba(190, 48, 42, 0.14) !important;
}

.gutenberg-details-secondary-action {
  background: rgba(255, 251, 244, 0.5) !important;
}

.gutenberg-details-option-card {
  padding: 0 clamp(16px, 3.7vw, 22px) !important;
}

.gutenberg-details-option-card button,
.gutenberg-details-option-card a {
  min-height: clamp(42px, 6vh, 50px) !important;
  font-size: clamp(14px, 3.05vw, 17px) !important;
  font-weight: 500 !important;
}

body.dark-mode .gutenberg-details-about-card,
body.dark-mode .gutenberg-details-start-card,
body.dark-mode .gutenberg-details-option-card,
body.dark .gutenberg-details-about-card,
body.dark .gutenberg-details-start-card,
body.dark .gutenberg-details-option-card,
body.theme-dark .gutenberg-details-about-card,
body.theme-dark .gutenberg-details-start-card,
body.theme-dark .gutenberg-details-option-card,
body[data-theme="dark"] .gutenberg-details-about-card,
body[data-theme="dark"] .gutenberg-details-start-card,
body[data-theme="dark"] .gutenberg-details-option-card {
  border-color: rgba(238, 207, 167, 0.1) !important;
  background: rgba(39, 34, 28, 0.62) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .gutenberg-details-title h2,
body.dark .gutenberg-details-title h2,
body.theme-dark .gutenberg-details-title h2,
body[data-theme="dark"] .gutenberg-details-title h2 {
  color: #f2e9dc !important;
}

@media (max-height: 760px) {
  .gutenberg-details-title h2 {
    font-size: clamp(22px, 5.4vw, 36px) !important;
  }

  .gutenberg-details-about-card p {
    -webkit-line-clamp: 4 !important;
  }

  .gutenberg-details-about-card.is-expanded p {
    -webkit-line-clamp: unset !important;
  }
}

/* Gutenberg book preview scroll + Pro Max density fix. */
.gutenberg-details-panel:not([hidden]) {
  overflow: hidden !important;
}

.gutenberg-details-panel .gutenberg-details-sheet {
  display: block !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  padding-top: max(14px, calc(env(safe-area-inset-top) + 10px)) !important;
  padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)) !important;
}

.gutenberg-details-panel .gutenberg-details-toolbar,
.gutenberg-details-panel .gutenberg-details-top,
.gutenberg-details-panel .gutenberg-details-body {
  width: min(860px, 100%) !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.gutenberg-details-panel .gutenberg-details-toolbar {
  margin-bottom: clamp(8px, 1.2vh, 14px) !important;
}

.gutenberg-details-panel .gutenberg-details-top {
  grid-template-columns: minmax(92px, min(27vw, 150px)) minmax(0, 1fr) !important;
  gap: clamp(14px, 3.8vw, 26px) !important;
  margin-bottom: clamp(12px, 1.7vh, 18px) !important;
}

.gutenberg-details-panel .gutenberg-details-title h2 {
  font-size: clamp(22px, 5.25vw, 38px) !important;
  font-weight: 520 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
}

.gutenberg-details-panel .gutenberg-details-author {
  margin: clamp(7px, 1vh, 10px) 0 clamp(8px, 1.15vh, 12px) !important;
  font-size: clamp(9px, 2vw, 12px) !important;
  letter-spacing: 0.3em !important;
}

.gutenberg-details-panel .gutenberg-details-meta-list {
  gap: 7px 12px !important;
  font-size: clamp(10px, 2.35vw, 13px) !important;
}

.gutenberg-details-panel .gutenberg-details-body {
  gap: clamp(9px, 1.25vh, 13px) !important;
  padding-bottom: 2px !important;
}

.gutenberg-details-panel .gutenberg-details-about-card,
.gutenberg-details-panel .gutenberg-details-start-card,
.gutenberg-details-panel .gutenberg-details-option-card {
  border-radius: clamp(14px, 3.4vw, 20px) !important;
  box-shadow:
    0 8px 18px rgba(87, 63, 35, 0.038),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.gutenberg-details-panel .gutenberg-details-about-card {
  padding: clamp(12px, 2.9vw, 18px) clamp(14px, 3.3vw, 20px) clamp(7px, 1.5vw, 10px) !important;
}

.gutenberg-details-panel .gutenberg-details-about-card h3,
.gutenberg-details-panel .gutenberg-details-start-card h3 {
  margin-bottom: clamp(7px, 1.3vw, 10px) !important;
  font-size: clamp(15px, 3.05vw, 18px) !important;
  font-weight: 650 !important;
}

.gutenberg-details-panel .gutenberg-details-about-card p {
  font-size: clamp(13px, 2.75vw, 16px) !important;
  line-height: 1.42 !important;
  -webkit-line-clamp: 5 !important;
}

.gutenberg-details-panel .gutenberg-details-about-card.is-expanded p {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

.gutenberg-details-panel .gutenberg-details-card-chevron {
  margin-top: clamp(6px, 1vh, 9px) !important;
  padding-top: clamp(5px, 0.9vh, 7px) !important;
  font-size: 18px !important;
}

.gutenberg-details-panel .gutenberg-details-start-card {
  gap: 7px !important;
  padding: clamp(12px, 2.9vw, 18px) !important;
}

.gutenberg-details-panel .gutenberg-details-primary-action,
.gutenberg-details-panel .gutenberg-details-secondary-action {
  min-height: clamp(40px, 5.7vh, 50px) !important;
  padding: 0 clamp(13px, 3vw, 18px) !important;
  border-radius: clamp(12px, 2.8vw, 16px) !important;
  font-size: clamp(13px, 2.9vw, 16px) !important;
  font-weight: 590 !important;
}

.gutenberg-details-panel .gutenberg-details-option-card {
  padding: 0 clamp(14px, 3.2vw, 20px) !important;
}

.gutenberg-details-panel .gutenberg-details-option-card button,
.gutenberg-details-panel .gutenberg-details-option-card a {
  min-height: clamp(38px, 5.2vh, 46px) !important;
  font-size: clamp(13px, 2.8vw, 16px) !important;
}

@media (min-width: 400px) and (min-height: 850px) and (max-width: 480px) {
  .gutenberg-details-panel .gutenberg-details-about-card p {
    -webkit-line-clamp: 6 !important;
  }
}

@media (max-height: 760px) {
  .gutenberg-details-panel .gutenberg-details-top {
    grid-template-columns: minmax(82px, 24vw) minmax(0, 1fr) !important;
  }

  .gutenberg-details-panel .gutenberg-details-about-card p {
    -webkit-line-clamp: 3 !important;
  }
}

/* Ambient subpage rails should never become invisible glass panels. */
#inputPanel.home-ambient-active #statsView,
#inputPanel.home-ambient-active #statsView .stats-stack,
#inputPanel.home-ambient-active #statsView .stats-editorial-grid,
#inputPanel.home-ambient-active #settingsView,
#inputPanel.home-ambient-active #settingsView .settings-stack,
#inputPanel.home-ambient-active #settingsView .settings-group {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Gutenberg browse classics spacing, edge alignment, and dark category polish. */
:root {
  --gutenberg-browse-edge-gutter: clamp(12px, 3.8vw, 30px);
}

#gutenbergView.gutenberg-view {
  gap: clamp(12px, 1.9vh, 18px) !important;
}

#gutenbergView .library-header,
#gutenbergView .library-search,
#gutenbergView .library-quick-actions,
#gutenbergView .gutenberg-status,
#gutenbergView .gutenberg-browse-tabs,
#gutenbergView .gutenberg-section,
#gutenbergView .gutenberg-results-section,
#gutenbergView .gutenberg-list,
#gutenbergView .gutenberg-nav,
#gutenbergView .gutenberg-empty,
#gutenbergView .gutenberg-error {
  width: calc(100vw - (var(--gutenberg-browse-edge-gutter) * 2)) !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw + var(--gutenberg-browse-edge-gutter)) !important;
  margin-right: calc(50% - 50vw + var(--gutenberg-browse-edge-gutter)) !important;
}

#gutenbergView .library-search {
  margin-bottom: clamp(8px, 1.25vh, 14px) !important;
}

#gutenbergView .library-search + .gutenberg-status,
#gutenbergView .library-search + .gutenberg-browse-tabs,
#gutenbergView .library-search + .gutenberg-section,
#gutenbergView .gutenberg-status + .gutenberg-browse-tabs,
#gutenbergView .gutenberg-status + .gutenberg-section,
#gutenbergView .gutenberg-browse-tabs + .gutenberg-section {
  margin-top: clamp(8px, 1.3vh, 14px) !important;
}

#gutenbergView .gutenberg-section-heading,
#gutenbergView .gutenberg-row-heading,
#gutenbergView .gutenberg-category-heading,
#gutenbergView .gutenberg-results-heading {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#gutenbergView .gutenberg-category-rail,
#gutenbergView .gutenberg-category-row,
#gutenbergView .gutenberg-category-grid,
#gutenbergView .gutenberg-category-carousel,
#gutenbergView .gutenberg-shelf-rail,
#gutenbergView .gutenberg-shelf-row {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  scroll-padding-left: 0 !important;
  scroll-padding-right: 0 !important;
}

#gutenbergView .gutenberg-category-rail > :first-child,
#gutenbergView .gutenberg-category-row > :first-child,
#gutenbergView .gutenberg-category-grid > :first-child,
#gutenbergView .gutenberg-category-carousel > :first-child,
#gutenbergView .gutenberg-shelf-rail > :first-child,
#gutenbergView .gutenberg-shelf-row > :first-child {
  margin-left: 0 !important;
}

html.theme-dark #gutenbergView .gutenberg-category-card,
html.theme-dark #gutenbergView .gutenberg-category-button,
html.theme-dark #gutenbergView .gutenberg-category-chip,
html.theme-dark #gutenbergView .gutenberg-shelf-card,
html.theme-dark #gutenbergView [data-gutenberg-category],
html.theme-dark #gutenbergView [data-gutenberg-shelf],
body.theme-dark #gutenbergView .gutenberg-category-card,
body.theme-dark #gutenbergView .gutenberg-category-button,
body.theme-dark #gutenbergView .gutenberg-category-chip,
body.theme-dark #gutenbergView .gutenberg-shelf-card,
body.theme-dark #gutenbergView [data-gutenberg-category],
body.theme-dark #gutenbergView [data-gutenberg-shelf] {
  border-color: rgba(222, 190, 140, 0.13) !important;
  background:
    radial-gradient(circle at 22% 10%, rgba(211, 165, 92, 0.1), transparent 42%),
    linear-gradient(145deg, rgba(42, 36, 29, 0.86), rgba(24, 22, 18, 0.92)) !important;
  color: rgba(246, 236, 218, 0.9) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

html.theme-dark #gutenbergView .gutenberg-category-card.is-active,
html.theme-dark #gutenbergView .gutenberg-category-button.is-active,
html.theme-dark #gutenbergView .gutenberg-category-chip.is-active,
html.theme-dark #gutenbergView .gutenberg-shelf-card.is-active,
html.theme-dark #gutenbergView [data-gutenberg-category][aria-pressed="true"],
html.theme-dark #gutenbergView [data-gutenberg-shelf][aria-pressed="true"],
body.theme-dark #gutenbergView .gutenberg-category-card.is-active,
body.theme-dark #gutenbergView .gutenberg-category-button.is-active,
body.theme-dark #gutenbergView .gutenberg-category-chip.is-active,
body.theme-dark #gutenbergView .gutenberg-shelf-card.is-active,
body.theme-dark #gutenbergView [data-gutenberg-category][aria-pressed="true"],
body.theme-dark #gutenbergView [data-gutenberg-shelf][aria-pressed="true"] {
  border-color: rgba(220, 91, 74, 0.76) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(220, 91, 74, 0.18), transparent 44%),
    linear-gradient(145deg, rgba(54, 39, 32, 0.94), rgba(29, 24, 20, 0.96)) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(220, 91, 74, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

html.theme-dark #gutenbergView .gutenberg-category-card small,
html.theme-dark #gutenbergView .gutenberg-category-button small,
html.theme-dark #gutenbergView .gutenberg-category-chip small,
html.theme-dark #gutenbergView .gutenberg-shelf-card small,
body.theme-dark #gutenbergView .gutenberg-category-card small,
body.theme-dark #gutenbergView .gutenberg-category-button small,
body.theme-dark #gutenbergView .gutenberg-category-chip small,
body.theme-dark #gutenbergView .gutenberg-shelf-card small {
  color: rgba(226, 211, 188, 0.68) !important;
}

@media (max-width: 560px) {
  :root {
    --gutenberg-browse-edge-gutter: clamp(12px, 3.4vw, 18px);
  }
}

/* Fix Gutenberg category rail edge clipping after wider browse gutters. */
#gutenbergView .gutenberg-section:has(.gutenberg-category-rail),
#gutenbergView .gutenberg-section:has(.gutenberg-category-row),
#gutenbergView .gutenberg-section:has(.gutenberg-category-carousel),
#gutenbergView .gutenberg-section:has(.gutenberg-shelf-rail),
#gutenbergView .gutenberg-section:has(.gutenberg-shelf-row) {
  overflow: visible !important;
}

#gutenbergView .gutenberg-category-rail,
#gutenbergView .gutenberg-category-row,
#gutenbergView .gutenberg-category-carousel,
#gutenbergView .gutenberg-shelf-rail,
#gutenbergView .gutenberg-shelf-row {
  box-sizing: border-box !important;
  width: calc(100% + 12px) !important;
  max-width: none !important;
  margin-left: -6px !important;
  margin-right: -6px !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-padding-left: 6px !important;
  scroll-padding-right: 6px !important;
  -webkit-overflow-scrolling: touch !important;
}

#gutenbergView .gutenberg-category-rail > :first-child,
#gutenbergView .gutenberg-category-row > :first-child,
#gutenbergView .gutenberg-category-carousel > :first-child,
#gutenbergView .gutenberg-shelf-rail > :first-child,
#gutenbergView .gutenberg-shelf-row > :first-child {
  margin-left: 0 !important;
}

#gutenbergView .gutenberg-category-rail > :last-child,
#gutenbergView .gutenberg-category-row > :last-child,
#gutenbergView .gutenberg-category-carousel > :last-child,
#gutenbergView .gutenberg-shelf-rail > :last-child,
#gutenbergView .gutenberg-shelf-row > :last-child {
  margin-right: 0 !important;
}

#gutenbergView .gutenberg-category-card,
#gutenbergView .gutenberg-category-button,
#gutenbergView .gutenberg-category-chip,
#gutenbergView .gutenberg-shelf-card,
#gutenbergView [data-gutenberg-category],
#gutenbergView [data-gutenberg-shelf] {
  flex: 0 0 auto !important;
}

/* Gutenberg category rails v2: move the scrollport clip outside the visible card edge. */
:root {
  --gutenberg-rail-bleed: clamp(20px, 6vw, 34px);
}

#gutenbergView .gutenberg-section:has(.gutenberg-category-rail),
#gutenbergView .gutenberg-section:has(.gutenberg-category-row),
#gutenbergView .gutenberg-section:has(.gutenberg-category-carousel),
#gutenbergView .gutenberg-section:has(.gutenberg-shelf-rail),
#gutenbergView .gutenberg-section:has(.gutenberg-shelf-row) {
  overflow: visible !important;
  clip-path: none !important;
  contain: none !important;
}

#gutenbergView .gutenberg-category-rail,
#gutenbergView .gutenberg-category-row,
#gutenbergView .gutenberg-category-carousel,
#gutenbergView .gutenberg-shelf-rail,
#gutenbergView .gutenberg-shelf-row {
  width: calc(100% + (var(--gutenberg-rail-bleed) * 2)) !important;
  margin-left: calc(-1 * var(--gutenberg-rail-bleed)) !important;
  margin-right: calc(-1 * var(--gutenberg-rail-bleed)) !important;
  padding-left: var(--gutenberg-rail-bleed) !important;
  padding-right: var(--gutenberg-rail-bleed) !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  clip-path: none !important;
  contain: none !important;
  scroll-padding-left: var(--gutenberg-rail-bleed) !important;
  scroll-padding-right: var(--gutenberg-rail-bleed) !important;
}

#gutenbergView .gutenberg-category-card,
#gutenbergView .gutenberg-category-button,
#gutenbergView .gutenberg-category-chip,
#gutenbergView .gutenberg-shelf-card,
#gutenbergView [data-gutenberg-category],
#gutenbergView [data-gutenberg-shelf] {
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
}

/* Gutenberg category rail final alignment: no backdrop shadow, exact first-card edge. */
#gutenbergView .gutenberg-category-rail,
#gutenbergView .gutenberg-category-row,
#gutenbergView .gutenberg-category-carousel,
#gutenbergView .gutenberg-shelf-rail,
#gutenbergView .gutenberg-shelf-row {
  --gutenberg-rail-bleed: clamp(20px, 6vw, 34px);
  width: calc(100% + (var(--gutenberg-rail-bleed) * 2)) !important;
  margin-left: calc(-1 * var(--gutenberg-rail-bleed)) !important;
  margin-right: calc(-1 * var(--gutenberg-rail-bleed)) !important;
  padding-left: var(--gutenberg-rail-bleed) !important;
  padding-right: var(--gutenberg-rail-bleed) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#gutenbergView .gutenberg-category-rail::before,
#gutenbergView .gutenberg-category-rail::after,
#gutenbergView .gutenberg-category-row::before,
#gutenbergView .gutenberg-category-row::after,
#gutenbergView .gutenberg-category-carousel::before,
#gutenbergView .gutenberg-category-carousel::after,
#gutenbergView .gutenberg-shelf-rail::before,
#gutenbergView .gutenberg-shelf-rail::after,
#gutenbergView .gutenberg-shelf-row::before,
#gutenbergView .gutenberg-shelf-row::after {
  display: none !important;
  content: none !important;
}

#gutenbergView .gutenberg-category-card,
#gutenbergView .gutenberg-category-button,
#gutenbergView .gutenberg-category-chip,
#gutenbergView .gutenberg-shelf-card,
#gutenbergView [data-gutenberg-category],
#gutenbergView [data-gutenberg-shelf] {
  box-shadow: none !important;
}

html.theme-dark #gutenbergView .gutenberg-category-card,
html.theme-dark #gutenbergView .gutenberg-category-button,
html.theme-dark #gutenbergView .gutenberg-category-chip,
html.theme-dark #gutenbergView .gutenberg-shelf-card,
html.theme-dark #gutenbergView [data-gutenberg-category],
html.theme-dark #gutenbergView [data-gutenberg-shelf],
body.theme-dark #gutenbergView .gutenberg-category-card,
body.theme-dark #gutenbergView .gutenberg-category-button,
body.theme-dark #gutenbergView .gutenberg-category-chip,
body.theme-dark #gutenbergView .gutenberg-shelf-card,
body.theme-dark #gutenbergView [data-gutenberg-category],
body.theme-dark #gutenbergView [data-gutenberg-shelf] {
  box-shadow: none !important;
}

html.theme-dark #gutenbergView .gutenberg-category-card.is-active,
html.theme-dark #gutenbergView .gutenberg-category-button.is-active,
html.theme-dark #gutenbergView .gutenberg-category-chip.is-active,
html.theme-dark #gutenbergView .gutenberg-shelf-card.is-active,
html.theme-dark #gutenbergView [data-gutenberg-category][aria-pressed="true"],
html.theme-dark #gutenbergView [data-gutenberg-shelf][aria-pressed="true"],
body.theme-dark #gutenbergView .gutenberg-category-card.is-active,
body.theme-dark #gutenbergView .gutenberg-category-button.is-active,
body.theme-dark #gutenbergView .gutenberg-category-chip.is-active,
body.theme-dark #gutenbergView .gutenberg-shelf-card.is-active,
body.theme-dark #gutenbergView [data-gutenberg-category][aria-pressed="true"],
body.theme-dark #gutenbergView [data-gutenberg-shelf][aria-pressed="true"] {
  box-shadow: 0 0 0 1px rgba(220, 91, 74, 0.14) !important;
}

/* Gutenberg book rows: no depressed tap animation, allow page scrolling from card surface. */
#gutenbergView #gutenbergList,
#gutenbergView .gutenberg-list,
#gutenbergView .gutenberg-item,
#gutenbergView .gutenberg-item .gutenberg-book-button,
#gutenbergView .gutenberg-book-button {
  touch-action: pan-y !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

#gutenbergView .gutenberg-item .gutenberg-book-button:active,
#gutenbergView .gutenberg-book-button:active,
#gutenbergView .gutenberg-item .gutenberg-book-button.is-tactile-press,
#gutenbergView .gutenberg-book-button.is-tactile-press {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  opacity: 1 !important;
}

#gutenbergView .gutenberg-item .gutenberg-book-button * {
  touch-action: pan-y !important;
}

/* Reader header motif vertical nudge: raise ornament toward corner-icon baseline. */
.reader-panel > .top-bar #chapterButton::before,
body.ebook-mode #ebookChapterButton::before,
body.ebook-mode .ebook-title-block::before {
  top: calc(100% + 5px) !important;
}

/* Today is a finite reading decision surface, not a second Browse feed. */
.discover-today-view {
  display: grid;
  gap: clamp(28px, 4vw, 42px);
}

.discover-today-intro {
  max-width: 760px;
  margin: 10px auto 0;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.discover-today-intro > p,
.discover-today-intro h1,
.discover-today-intro span {
  margin: 0;
}

.discover-today-intro > p {
  color: var(--discover-coral-strong);
  font: 780 0.6rem/1 var(--ui-font);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.discover-today-intro > div {
  display: grid;
  gap: 5px;
}

.discover-today-intro h1 {
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(2.25rem, 5.5vw, 3.8rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.96;
}

.discover-today-intro span {
  color: var(--discover-muted);
  font: 0.82rem/1.4 var(--reading-font);
}

.discover-today-lead,
.discover-today-picks,
.discover-today-topic {
  display: grid;
  gap: 13px;
}

.discover-today-continue {
  position: relative;
  min-width: 0;
  min-height: 156px;
  padding: 14px 118px 14px 14px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 30%, var(--discover-line));
  border-radius: 22px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--topic-color) 12%, transparent), transparent 42%),
    var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
}

.discover-today-continue-art,
.discover-today-continue-art img {
  width: 92px;
  height: 126px;
  border-radius: 5px 10px 10px 5px;
  object-fit: cover;
}

.discover-today-continue-art > span {
  height: 100%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 12%, var(--discover-surface-soft));
  color: var(--topic-color);
  font: 2.2rem/1 var(--reading-font);
}

.discover-today-continue-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.discover-today-continue-copy > small {
  overflow: hidden;
  color: color-mix(in srgb, var(--topic-color) 80%, var(--discover-text));
  font: 760 0.58rem/1.2 var(--ui-font);
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.discover-today-continue-copy > strong {
  overflow: hidden;
  display: -webkit-box;
  font-family: var(--reading-font);
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-today-continue-copy > span {
  overflow: hidden;
  color: var(--discover-muted);
  font: 0.64rem/1.3 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-today-continue-copy > i {
  width: min(230px, 100%);
  height: 3px;
  margin-top: 5px;
  border-radius: 999px;
  display: block;
  overflow: hidden;
  background: var(--discover-line);
}

.discover-today-continue-copy > i > span {
  width: var(--progress);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--topic-color);
}

.discover-today-continue-action {
  position: absolute;
  right: 21px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--discover-text);
  font: 750 0.68rem/1 var(--ui-font);
}

.discover-today-continue-action > i,
.discover-today-pick > i,
.discover-today-topic > button > i,
.discover-today-browse > i {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.discover-today-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.discover-today-pick {
  --pick-accent: var(--discover-coral);
  position: relative;
  min-width: 0;
  min-height: 286px;
  padding: 0 14px 15px;
  border: 1px solid color-mix(in srgb, var(--pick-accent) 22%, var(--discover-line));
  border-radius: 20px;
  display: grid;
  grid-template-rows: 120px auto auto auto 1fr;
  gap: 7px;
  overflow: hidden;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
}

.discover-today-pick.is-articles { --pick-accent: var(--discover-amber); }
.discover-today-pick.is-research { --pick-accent: var(--discover-green); }

.discover-today-pick-art {
  width: calc(100% + 28px);
  height: 120px;
  margin-inline: -14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--topic-color) 18%, transparent), transparent 38%),
    color-mix(in srgb, var(--pick-accent) 7%, var(--discover-surface-soft));
}

.discover-today-pick-art img {
  width: 72px;
  height: 100px;
  border-radius: 4px 8px 8px 4px;
  object-fit: cover;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--pick-accent) 16%, rgba(0, 0, 0, 0.16));
}

.discover-today-pick-art > span {
  width: 72px;
  height: 100px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--pick-accent) 12%, var(--discover-surface));
  color: var(--pick-accent);
  font: 1.8rem/1 var(--reading-font);
}

.discover-today-pick > strong {
  overflow: hidden;
  display: -webkit-box;
  font-family: var(--reading-font);
  font-size: 1.12rem;
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1.08;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-today-pick > small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 0.59rem/1.3 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-today-pick > p {
  margin: 0;
  overflow: hidden;
  color: var(--discover-muted);
  display: -webkit-box;
  align-self: end;
  font: 0.7rem/1.32 var(--reading-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-today-pick > i {
  position: absolute;
  right: 15px;
  bottom: 16px;
  color: var(--pick-accent);
}

.discover-today-topic > button {
  min-height: 116px;
  padding: 15px 50px 15px 15px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 28%, var(--discover-line));
  border-radius: 20px;
  position: relative;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--topic-color) 13%, transparent), transparent 42%),
    var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
}

.discover-today-topic > button > span:first-child {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 12%, var(--discover-surface-soft));
  color: var(--topic-color);
}

.discover-today-topic svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
}

.discover-today-topic > button > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.discover-today-topic small {
  color: var(--topic-color);
  font: 780 0.56rem/1 var(--ui-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.discover-today-topic strong {
  font: 560 1.35rem/1.05 var(--reading-font);
  letter-spacing: -0.03em;
}

.discover-today-topic p {
  margin: 0;
  overflow: hidden;
  color: var(--discover-muted);
  display: -webkit-box;
  font: 0.75rem/1.35 var(--reading-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-today-topic > button > i {
  position: absolute;
  right: 22px;
  color: var(--topic-color);
}

.discover-today-browse {
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid var(--discover-line);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--discover-surface) 82%, transparent);
  color: var(--discover-text);
  text-align: left;
}

.discover-today-browse > span {
  display: grid;
  gap: 2px;
}

.discover-today-browse small {
  color: var(--discover-coral-strong);
  font: 770 0.55rem/1 var(--ui-font);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.discover-today-browse strong {
  font: 560 1rem/1.2 var(--reading-font);
}

@media (max-width: 700px) {
  .discover-today-view {
    gap: 28px;
  }

  .discover-today-intro {
    margin-top: 4px;
    gap: 6px;
  }

  .discover-today-intro h1 {
    font-size: 2.45rem;
  }

  .discover-today-intro span {
    font-size: 0.76rem;
  }

  .discover-today-pick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-today-pick {
    min-height: 260px;
    grid-template-rows: 104px auto auto auto 1fr;
  }

  .discover-today-pick-art {
    height: 104px;
  }

  .discover-today-pick-art img,
  .discover-today-pick-art > span {
    width: 62px;
    height: 86px;
  }

  .discover-today-pick.is-wide {
    min-height: 138px;
    padding: 12px 44px 12px 12px;
    grid-column: 1 / -1;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: 4px 13px;
    align-items: start;
  }

  .discover-today-pick.is-wide .discover-today-pick-art {
    width: 82px;
    height: 112px;
    margin: 0;
    grid-row: 1 / -1;
    border-radius: 7px;
  }

  .discover-today-pick.is-wide .discover-today-pick-art img,
  .discover-today-pick.is-wide .discover-today-pick-art > span {
    width: 70px;
    height: 98px;
  }

  .discover-today-pick.is-wide > p {
    align-self: start;
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 480px) {
  .discover-today-continue {
    min-height: 142px;
    padding: 11px 72px 11px 11px;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 13px;
  }

  .discover-today-continue-art,
  .discover-today-continue-art img {
    width: 76px;
    height: 108px;
  }

  .discover-today-continue-copy > strong {
    font-size: 1.16rem;
  }

  .discover-today-continue-action {
    right: 15px;
    bottom: 15px;
    font-size: 0.62rem;
  }

  .discover-today-pick {
    padding-inline: 11px;
  }

  .discover-today-pick-art {
    width: calc(100% + 22px);
    margin-inline: -11px;
  }

  .discover-today-pick > strong {
    font-size: 1rem;
  }

  .discover-today-pick > p {
    font-size: 0.65rem;
  }

  .discover-today-topic > button {
    min-height: 104px;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
  }

  .discover-today-topic > button > span:first-child {
    width: 50px;
    height: 50px;
  }

  .discover-today-topic strong {
    font-size: 1.18rem;
  }
}

/* Library v6: compact professional header and controls. */
#inputPanel.is-menu-subview:has(#collectionView:not([hidden])) > .menu-card {
  padding-top: clamp(20px, 3.2vh, 28px) !important;
}

#collectionView.collection-view {
  padding-top: 0 !important;
  gap: 10px !important;
}

#collectionView > .collection-header.library-header {
  min-height: 66px;
  padding-bottom: 1px !important;
  gap: 14px !important;
}

#collectionView > .collection-header h2 {
  font-size: clamp(2.25rem, 5.4vw, 2.85rem) !important;
  line-height: 1 !important;
}

#collectionView > .collection-header p {
  margin-top: 3px !important;
  font-size: clamp(0.86rem, 2vw, 0.98rem) !important;
}

#collectionView .library-add-button {
  min-width: 84px;
  min-height: 39px;
  padding: 0 14px;
  border-color: rgba(184, 55, 48, 0.2);
  gap: 8px;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.74), transparent 52%),
    rgba(255, 247, 243, 0.82);
  color: rgba(177, 46, 40, 0.94);
  font-size: 0.8rem;
  font-weight: 740;
  box-shadow:
    0 8px 20px rgba(91, 54, 43, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  backdrop-filter: blur(14px) saturate(1.04);
}

#collectionView .library-add-button:is(:hover, :focus-visible) {
  border-color: rgba(184, 55, 48, 0.28);
  background: rgba(255, 241, 237, 0.94);
  box-shadow:
    0 10px 24px rgba(91, 54, 43, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#collectionView .library-add-button > span {
  width: 12px;
  height: 12px;
}

#collectionView .library-add-button > span::before {
  width: 12px;
  height: 1.6px;
}

#collectionView .library-add-button > span::after {
  width: 1.6px;
  height: 12px;
}

#collectionView > .library-search {
  min-height: 46px;
  padding: 0 11px 0 16px;
  border-radius: 14px;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 9px;
  box-shadow:
    0 8px 22px rgba(51, 42, 30, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#collectionView > .library-search > span {
  position: relative !important;
  width: 15px;
  height: 15px;
  margin: 0 !important;
  border-width: 1.55px;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView > .library-search > span::before {
  content: none !important;
  display: none !important;
}

#collectionView > .library-search > span::after {
  right: -4px;
  bottom: -2px;
  width: 6px;
  height: 1.55px;
}

#collectionView > .library-search input {
  height: 32px;
  font-size: 0.91rem;
}

#collectionView > .library-category-row {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
}

#collectionView .library-category-chip {
  min-width: 108px;
  min-height: 36px;
  padding: 0 11px;
  border-radius: 12px;
  flex: 0 0 auto;
  gap: 6px;
  font-size: 0.73rem;
}

#collectionView .library-category-chip .library-category-icon {
  width: 15px;
  height: 15px;
}

#collectionView .library-category-count {
  min-width: 18px;
  height: 18px;
  padding-inline: 5px;
  font-size: 0.61rem;
}

#collectionView > .library-section {
  gap: 8px;
}

#collectionView > .library-section > .library-section-heading {
  min-height: 32px;
}

#collectionView .library-section-heading h3 {
  font-size: clamp(1.02rem, 2.4vw, 1.17rem);
}

#collectionView .library-sort-control {
  min-height: 31px;
  padding-left: 9px;
  font-size: 0.68rem;
}

#collectionView .collection-list {
  gap: clamp(18px, 2.7vh, 26px);
}

#collectionView .library-content-section {
  gap: 8px;
}

#collectionView .library-content-heading {
  min-height: 28px;
}

#collectionView .library-content-title h4 {
  font-size: clamp(1.1rem, 3vw, 1.28rem);
}

#collectionView .library-section-icon {
  width: 17px;
  height: 17px;
}

html.theme-dark #collectionView .library-add-button,
body.theme-dark #collectionView .library-add-button {
  border-color: rgba(222, 104, 90, 0.22);
  background: rgba(58, 33, 36, 0.72);
  color: rgba(239, 142, 128, 0.96);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(248, 239, 224, 0.045);
}

@media (max-width: 700px) {
  #inputPanel.is-menu-subview:has(#collectionView:not([hidden])) > .menu-card {
    padding-top: clamp(10px, 2vh, 16px) !important;
  }

  #collectionView.collection-view {
    gap: 9px !important;
  }

  #collectionView > .collection-header.library-header {
    min-height: 60px;
  }

  #collectionView > .collection-header h2 {
    font-size: clamp(2.08rem, 10vw, 2.5rem) !important;
  }

  #collectionView .library-add-button {
    min-width: 75px;
    min-height: 37px;
    padding-inline: 12px;
  }

  #collectionView > .library-search {
    min-height: 44px;
  }

  #collectionView > .library-category-row {
    gap: 5px;
  }

  #collectionView .library-category-chip {
    min-width: 78px;
    min-height: 35px;
    padding-inline: 8px;
  }
}

/* Library v3: return Books to a quiet swipe shelf and neutralize the full-list surface. */
#collectionView .library-book-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 108px;
  justify-content: start;
  gap: 13px;
  margin-inline: -2px;
  padding: 2px 2px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
}

#collectionView .library-book-strip::-webkit-scrollbar {
  display: none;
}

#collectionView .library-book-strip .library-book-card.collection-item {
  width: 108px !important;
  min-width: 108px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 9px;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  scroll-snap-align: start;
  touch-action: pan-x;
}

#collectionView .library-book-strip .library-book-open {
  gap: 5px;
}

#collectionView .library-book-strip .library-grid-cover {
  width: 108px;
  height: 151px;
  aspect-ratio: auto;
  border-radius: 7px;
  box-shadow:
    0 8px 17px rgba(52, 41, 28, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#collectionView .library-book-strip .library-book-card-copy {
  display: block;
  height: 4px;
  padding-inline: 2px;
}

#collectionView .library-book-strip .library-book-card-copy > strong,
#collectionView .library-book-strip .library-book-card-copy > small,
#collectionView .library-book-strip .library-book-card-status {
  display: none;
}

#collectionView .library-book-strip .library-book-card .collection-progress {
  height: 3px;
  margin: 0;
  background: rgba(109, 95, 80, 0.12);
}

#collectionView .library-book-strip .library-book-card > .collection-menu-toggle {
  right: 7px;
  top: 7px;
  width: 25px;
  min-width: 25px;
  height: 25px;
  opacity: 0.86;
}

#collectionView .library-book-strip .library-book-card > .collection-menu-toggle > span {
  width: 13px;
  transform: scale(0.78);
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-list {
  border-color: rgba(108, 106, 102, 0.15) !important;
  background: rgba(255, 255, 255, 0.66) !important;
  box-shadow:
    0 14px 34px rgba(42, 42, 39, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row.collection-item {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row.collection-item + .library-stack-row.collection-item {
  border-top-color: rgba(76, 75, 72, 0.1) !important;
}

html.theme-dark #collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-list,
body.theme-dark #collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-list {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background: rgba(31, 32, 36, 0.78) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(248, 239, 224, 0.035) !important;
}

html.theme-dark #collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row.collection-item,
body.theme-dark #collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row.collection-item {
  background: transparent !important;
}

html.theme-dark #collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row.collection-item + .library-stack-row.collection-item,
body.theme-dark #collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row.collection-item + .library-stack-row.collection-item {
  border-top-color: rgba(235, 228, 217, 0.1) !important;
}

@media (max-width: 700px) {
  #collectionView .library-book-strip {
    grid-auto-columns: 88px;
    gap: 10px;
  }

  #collectionView .library-book-strip .library-book-card.collection-item {
    width: 88px !important;
    min-width: 88px;
  }

  #collectionView .library-book-strip .library-grid-cover {
    width: 88px;
    height: 124px;
  }
}

/* Home page Cloudflare-safe discovery art and smoother scroll starts from cards. */

.home-discover-card,
.home-action-card,
.home-reading-card,
.home-resume-card,
.home-topic-button,
.home-primary-action,
.home-secondary-action {
  touch-action: pan-y !important;
  -webkit-tap-highlight-color: transparent !important;
}

.home-dashboard .home-progress-rail,
.home-dashboard .home-progress-strip,
.home-dashboard .home-progress-carousel,
.home-dashboard .home-book-rail,
.home-dashboard .home-books-rail,
.home-dashboard .home-discover-grid {
  touch-action: pan-x pan-y !important;
}

.home-dashboard .home-progress-rail,
.home-dashboard .home-progress-rail * {
  touch-action: pan-x pan-y !important;
  -webkit-tap-highlight-color: transparent !important;
}

.home-dashboard .home-discover-card,
.home-dashboard .home-progress-book,
.home-dashboard .home-resume-card,
.home-dashboard .home-action-card,
.home-dashboard .home-reading-card {
  overscroll-behavior: auto !important;
}

/* Contents menu: the overlay no longer exposes a top-right mode switch. */

/* Topic discovery dossier: a teal editorial world keyed to the active topic colour. */
.topic-discovery-panel {
  --topic-color: #2d9f98;
  --topic-dossier-page: #e7eeeb;
  --topic-dossier-sheet: #f5f9f6;
  --topic-dossier-surface: #fcfefb;
  --topic-dossier-surface-soft: #e9f1ed;
  --topic-dossier-text: #18211e;
  --topic-dossier-muted: #617069;
  --topic-dossier-soft: #7b8b84;
  --topic-dossier-line: color-mix(in srgb, var(--topic-color) 16%, rgba(62, 78, 71, 0.14));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 82%, #245f59);
  --topic-dossier-accent-soft: color-mix(in srgb, var(--topic-color) 11%, transparent);
  --topic-dossier-shadow: 0 10px 24px rgba(35, 73, 65, 0.08);
  --topic-page-bg: var(--topic-dossier-page);
  --topic-sheet-bg: var(--topic-dossier-sheet);
  --topic-heading: var(--topic-dossier-text);
  --topic-text: var(--topic-dossier-text);
  --topic-muted: var(--topic-dossier-muted);
  --topic-soft: var(--topic-dossier-soft);
  --topic-line: var(--topic-dossier-line);
  --topic-card-bg: var(--topic-dossier-surface);
  --topic-card-border: var(--topic-dossier-line);
  --topic-card-shadow: var(--topic-dossier-shadow);
  --topic-control-bg: var(--topic-dossier-surface);
  --topic-control-border: var(--topic-dossier-line);
  --topic-tab-bg: transparent;
  --topic-tab-text: var(--topic-dossier-text);
  --topic-tab-active-bg: var(--topic-dossier-surface);
  --topic-tab-active-text: var(--topic-dossier-accent);
  --topic-accent: var(--topic-dossier-accent);
  --topic-accent-soft: var(--topic-dossier-accent-soft);
  --topic-warm: var(--topic-dossier-accent);
  --topic-badge-bg: var(--topic-dossier-surface-soft);
  --topic-badge-text: var(--topic-dossier-muted);
  --topic-cover-bg: var(--topic-dossier-surface-soft);
  background:
    radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--topic-color) 13%, transparent), transparent 34%),
    radial-gradient(circle at 8% 72%, rgba(55, 116, 105, 0.06), transparent 36%),
    var(--topic-dossier-page);
}

.topic-discovery-sheet {
  background:
    radial-gradient(circle at 76% 0%, color-mix(in srgb, var(--topic-color) 10%, transparent), transparent 32%),
    linear-gradient(180deg, var(--topic-dossier-sheet), var(--topic-dossier-page));
}

.topic-discovery-close {
  top: max(18px, env(safe-area-inset-top));
  margin: max(18px, env(safe-area-inset-top)) 0 -62px max(18px, env(safe-area-inset-left));
  width: 42px;
  height: 42px;
  border: 1px solid var(--topic-dossier-line);
  background: var(--topic-dossier-surface);
  color: var(--topic-dossier-text);
  box-shadow: var(--topic-dossier-shadow);
}

.topic-discovery-content:not(.is-topic-context) {
  width: min(720px, 100%);
  padding:
    calc(74px + env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(38px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  gap: 0;
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-hero {
  display: block;
  padding: 2px 8px 20px;
  text-align: center;
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-kicker {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  margin: 0 0 14px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--topic-dossier-accent) 24%, transparent);
  border-radius: 999px;
  background: var(--topic-dossier-accent-soft);
  color: var(--topic-dossier-accent);
  font-family: var(--ui-font);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-hero h2 {
  max-width: 14ch;
  margin: 0 auto 12px;
  overflow-wrap: anywhere;
  color: var(--topic-dossier-text);
  font-family: var(--reading-font);
  font-size: 2.6rem;
  font-weight: 520;
  line-height: 1.02;
  letter-spacing: 0;
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-hero > p:not(.topic-discovery-kicker) {
  max-width: 34em;
  margin: 0 auto;
  color: var(--topic-dossier-muted);
  font-family: var(--reading-font);
  font-size: 1rem;
  line-height: 1.46;
}

.topic-discovery-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 470px;
  margin: 22px auto 0;
  padding: 0;
  color: var(--topic-dossier-muted);
  list-style: none;
}

.topic-discovery-counts li {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--ui-font);
  white-space: nowrap;
}

.topic-discovery-counts li > span {
  width: 20px;
  height: 20px;
  display: grid;
  flex: 0 0 20px;
  place-items: center;
}

.topic-discovery-counts svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.topic-discovery-counts strong {
  color: var(--topic-dossier-text);
  font-size: 0.86rem;
  font-weight: 760;
}

.topic-discovery-counts small {
  min-width: 0;
  overflow: hidden;
  font-size: 0.76rem;
  text-overflow: ellipsis;
}

.topic-discovery-content:not(.is-topic-context) .topic-context-entry {
  min-height: 58px;
  grid-template-columns: 26px minmax(0, 1fr) 30px;
  gap: 10px;
  margin: 0 0 22px;
  padding: 10px 12px 10px 16px;
  border: 1px solid color-mix(in srgb, var(--topic-dossier-accent) 20%, transparent);
  border-radius: 999px;
  background: var(--topic-dossier-surface);
  color: var(--topic-dossier-accent);
  box-shadow: var(--topic-dossier-shadow);
  text-align: left;
}

.topic-discovery-content:not(.is-topic-context) .topic-context-entry-icon {
  width: 26px;
  height: 26px;
  color: currentColor;
}

.topic-discovery-content:not(.is-topic-context) .topic-context-entry-icon svg {
  width: 21px;
  height: 21px;
  stroke-width: 1.8;
}

.topic-discovery-content:not(.is-topic-context) .topic-context-entry strong {
  font-family: var(--ui-font);
  font-size: 0.96rem;
  font-weight: 760;
}

.topic-context-entry-action {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--topic-dossier-accent-soft);
}

.topic-context-entry-action::before {
  width: 8px;
  height: 8px;
  border-top: 1.8px solid currentColor;
  border-right: 1.8px solid currentColor;
  content: "";
  transform: translateX(-2px) rotate(45deg);
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-tabs {
  min-height: 42px;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-tabs button {
  min-height: 40px;
  padding: 0 7px;
  border: 1px solid var(--topic-dossier-line);
  border-radius: 999px;
  background: transparent;
  color: var(--topic-dossier-text);
  font-family: var(--ui-font);
  font-size: 0.8rem;
  font-weight: 680;
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-tabs button.is-active {
  border-color: color-mix(in srgb, var(--topic-dossier-accent) 42%, transparent);
  background: color-mix(in srgb, var(--topic-color) 6%, var(--topic-dossier-surface));
  color: var(--topic-dossier-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--topic-dossier-accent) 7%, transparent);
}

.topic-discovery-content:not(.is-topic-context) .topic-live-status {
  min-height: 30px;
  justify-self: center;
  margin: -8px auto 20px;
  padding: 6px 9px;
  border-color: var(--topic-dossier-line);
  background: transparent;
  color: var(--topic-dossier-soft);
  font-size: 0.66rem;
  font-weight: 650;
}

.topic-discovery-content:not(.is-topic-context) .topic-live-status span {
  width: 6px;
  height: 6px;
  background: var(--topic-dossier-accent);
  box-shadow: none;
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-section {
  gap: 12px;
  margin: 0 0 22px;
  padding: 0 0 22px;
  border-color: var(--topic-dossier-line);
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-section h3 {
  color: var(--topic-dossier-text);
  font-family: var(--reading-font);
  font-size: 1.16rem;
  font-weight: 560;
  line-height: 1.18;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggested-list,
.topic-discovery-content:not(.is-topic-context) .topic-book-rail,
.topic-discovery-content:not(.is-topic-context) .topic-research-list {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: initial;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  overflow: visible;
  padding: 0;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-card,
.topic-discovery-content:not(.is-topic-context) .topic-book-card,
.topic-discovery-content:not(.is-topic-context) .topic-research-row,
.topic-discovery-content:not(.is-topic-context) .topic-article-row,
.topic-discovery-content:not(.is-topic-context) .topic-library-row {
  width: 100%;
  min-width: 0;
  min-height: 96px;
  padding: 9px 11px;
  border: 1px solid var(--topic-dossier-line);
  border-radius: 8px;
  background: var(--topic-dossier-surface);
  color: var(--topic-dossier-text);
  box-shadow: var(--topic-dossier-shadow);
  text-align: left;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-card,
.topic-discovery-content:not(.is-topic-context) .topic-book-card {
  grid-template-columns: 58px minmax(0, 1fr) 13px;
  gap: 12px;
  align-items: center;
}

.topic-discovery-content:not(.is-topic-context) .topic-research-row,
.topic-discovery-content:not(.is-topic-context) .topic-article-row {
  grid-template-columns: 52px minmax(0, 1fr) 13px;
  gap: 11px;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-card::after,
.topic-discovery-content:not(.is-topic-context) .topic-book-card::after,
.topic-discovery-content:not(.is-topic-context) .topic-research-row::after,
.topic-discovery-content:not(.is-topic-context) .topic-article-row::after {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--topic-dossier-soft);
  border-right: 1.5px solid var(--topic-dossier-soft);
  content: "";
  transform: rotate(45deg);
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-cover,
.topic-discovery-content:not(.is-topic-context) .topic-book-cover {
  width: 58px;
  aspect-ratio: 0.7;
  border: 1px solid var(--topic-dossier-line);
  border-radius: 6px;
  background: var(--topic-dossier-surface-soft);
  box-shadow: 0 5px 12px rgba(56, 43, 29, 0.09);
}

.topic-book-copy,
.topic-discovery-content:not(.is-topic-context) .topic-suggestion-copy,
.topic-discovery-content:not(.is-topic-context) .topic-research-row > span:nth-child(2),
.topic-discovery-content:not(.is-topic-context) .topic-article-row > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-card strong,
.topic-discovery-content:not(.is-topic-context) .topic-book-card strong,
.topic-discovery-content:not(.is-topic-context) .topic-research-row strong,
.topic-discovery-content:not(.is-topic-context) .topic-article-row strong,
.topic-discovery-content:not(.is-topic-context) .topic-library-row strong {
  overflow: visible;
  color: var(--topic-dossier-text);
  font-family: var(--reading-font);
  font-size: 0.97rem;
  font-weight: 590;
  line-height: 1.18;
  text-overflow: clip;
  white-space: normal;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-card small,
.topic-discovery-content:not(.is-topic-context) .topic-book-card small,
.topic-discovery-content:not(.is-topic-context) .topic-research-row small,
.topic-discovery-content:not(.is-topic-context) .topic-article-row small,
.topic-discovery-content:not(.is-topic-context) .topic-library-row small {
  overflow: visible;
  color: var(--topic-dossier-muted);
  font-family: var(--reading-font);
  font-size: 0.78rem;
  line-height: 1.3;
  text-overflow: clip;
  white-space: normal;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-kicker span {
  border-color: color-mix(in srgb, var(--topic-dossier-accent) 20%, transparent);
  background: var(--topic-dossier-accent-soft);
  color: var(--topic-dossier-accent);
}

.topic-discovery-content:not(.is-topic-context) .topic-research-icon {
  width: 52px;
  height: 70px;
  border: 1px solid var(--topic-dossier-line);
  border-radius: 6px;
  background: var(--topic-dossier-surface-soft);
  color: var(--topic-dossier-accent);
}

.topic-discovery-content:not(.is-topic-context) .topic-article-thumb {
  width: 52px;
  height: 70px;
  border: 1px solid var(--topic-dossier-line);
  border-radius: 6px;
  background: var(--topic-dossier-surface-soft);
}

.topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge,
.topic-discovery-content:not(.is-topic-context) .topic-suggestion-badges .research-access-badge {
  border-color: var(--topic-dossier-line);
  background: var(--topic-dossier-surface-soft);
  color: var(--topic-dossier-muted);
}

.topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-pdf,
.topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-full-text,
.topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-open-access,
.topic-discovery-content:not(.is-topic-context) .topic-suggestion-badges .research-access-badge.is-pdf,
.topic-discovery-content:not(.is-topic-context) .topic-suggestion-badges .research-access-badge.is-full-text,
.topic-discovery-content:not(.is-topic-context) .topic-suggestion-badges .research-access-badge.is-open-access {
  border-color: rgba(48, 117, 86, 0.18);
  background: rgba(48, 117, 86, 0.08);
  color: #2f7457;
}

.topic-discovery-content:not(.is-topic-context) .topic-library-row {
  grid-template-columns: 46px minmax(0, 1fr) minmax(68px, 102px);
  gap: 11px;
}

.topic-discovery-content:not(.is-topic-context) .topic-library-cover {
  width: 46px;
  border-radius: 5px;
}

.topic-library-progress {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(42px, 1fr) auto;
  align-items: center;
  gap: 7px;
}

.topic-library-progress > span {
  position: relative;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--topic-dossier-surface-soft);
}

.topic-library-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--topic-read-progress, 0%);
  border-radius: inherit;
  background: var(--topic-dossier-accent);
}

.topic-discovery-content:not(.is-topic-context) .topic-library-progress em {
  color: var(--topic-dossier-accent);
  font-family: var(--ui-font);
  font-size: 0.76rem;
  font-style: normal;
  font-weight: 720;
}

.topic-discovery-content:not(.is-topic-context) .topic-overview-card,
.topic-discovery-content:not(.is-topic-context) .topic-empty-card,
.topic-discovery-content:not(.is-topic-context) .topic-cluster-card {
  border-color: var(--topic-dossier-line);
  border-radius: 8px;
  background: var(--topic-dossier-surface);
  box-shadow: var(--topic-dossier-shadow);
}

.topic-discovery-content:not(.is-topic-context) .topic-cluster-card {
  background-image: none;
}

.topic-discovery-content:not(.is-topic-context) .topic-related-list button,
.topic-discovery-content:not(.is-topic-context) .topic-cluster-topics button,
.topic-discovery-content:not(.is-topic-context) .topic-source-badges span {
  background: var(--topic-dossier-surface-soft);
  box-shadow: none;
}

html.theme-dark .topic-discovery-panel,
body.theme-dark .topic-discovery-panel {
  --topic-dossier-page: #0b0c0b;
  --topic-dossier-sheet: #10110f;
  --topic-dossier-surface: #1a1b18;
  --topic-dossier-surface-soft: #242622;
  --topic-dossier-text: #f2f4ef;
  --topic-dossier-muted: #b8beb7;
  --topic-dossier-soft: #90978f;
  --topic-dossier-line: color-mix(in srgb, var(--topic-color) 12%, rgba(232, 236, 228, 0.13));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 68%, #9bd7cd);
  --topic-dossier-accent-soft: color-mix(in srgb, var(--topic-color) 11%, transparent);
  --topic-dossier-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  background:
    radial-gradient(circle at 78% 0%, color-mix(in srgb, var(--topic-color) 6%, transparent), transparent 32%),
    var(--topic-dossier-page);
}

html.theme-dark .topic-discovery-sheet,
body.theme-dark .topic-discovery-sheet {
  background:
    radial-gradient(circle at 76% 0%, color-mix(in srgb, var(--topic-color) 5%, transparent), transparent 30%),
    linear-gradient(180deg, var(--topic-dossier-sheet), var(--topic-dossier-page));
}

html.theme-dark .topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-pdf,
html.theme-dark .topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-full-text,
html.theme-dark .topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-open-access,
body.theme-dark .topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-pdf,
body.theme-dark .topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-full-text,
body.theme-dark .topic-discovery-content:not(.is-topic-context) .topic-research-badges .research-access-badge.is-open-access {
  color: #8dd0ad;
}

@media (max-width: 560px) {
  .topic-discovery-content:not(.is-topic-context) {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
  }

  .topic-discovery-content:not(.is-topic-context) .topic-discovery-hero {
    padding-right: 4px;
    padding-left: 4px;
  }

  .topic-discovery-content:not(.is-topic-context) .topic-discovery-hero h2 {
    max-width: 12ch;
    font-size: 2.2rem;
  }

  .topic-discovery-content:not(.is-topic-context) .topic-discovery-hero > p:not(.topic-discovery-kicker) {
    font-size: 0.94rem;
  }

  .topic-discovery-counts {
    margin-top: 20px;
  }

  .topic-discovery-counts li {
    gap: 5px;
  }

  .topic-discovery-counts li > span {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
  }

  .topic-discovery-counts svg {
    width: 20px;
    height: 20px;
  }

  .topic-discovery-counts strong {
    font-size: 0.86rem;
  }

  .topic-discovery-counts small {
    font-size: 0.74rem;
  }

  .topic-discovery-content:not(.is-topic-context) .topic-discovery-tabs {
    gap: 6px;
  }

  .topic-discovery-content:not(.is-topic-context) .topic-discovery-tabs button {
    padding: 0 4px;
    font-size: 0.74rem;
  }
}

@media (max-width: 380px) {
  .topic-discovery-content:not(.is-topic-context) .topic-discovery-hero h2 {
    font-size: 1.95rem;
  }

  .topic-discovery-counts li {
    display: grid;
    grid-template-columns: 20px auto;
    grid-template-rows: auto auto;
    column-gap: 5px;
  }

  .topic-discovery-counts li > span {
    grid-row: 1 / span 2;
  }

  .topic-discovery-counts small {
    line-height: 1;
  }

  .topic-discovery-content:not(.is-topic-context) .topic-suggestion-card,
  .topic-discovery-content:not(.is-topic-context) .topic-book-card {
    grid-template-columns: 52px minmax(0, 1fr) 11px;
    gap: 10px;
  }

  .topic-discovery-content:not(.is-topic-context) .topic-suggestion-cover,
  .topic-discovery-content:not(.is-topic-context) .topic-book-cover {
    width: 52px;
  }

  .topic-discovery-content:not(.is-topic-context) .topic-library-row {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .topic-discovery-content:not(.is-topic-context) .topic-library-progress {
    grid-column: 2;
  }
}

/* Topics refinements: unboxed tabs and denser, metadata-free subject tiles. */
.discover-panel .discover-tabs,
html.theme-dark .discover-panel .discover-tabs,
body.theme-dark .discover-panel .discover-tabs {
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: color-mix(in srgb, var(--discover-page) 94%, transparent) !important;
  box-shadow: none !important;
}

.discover-panel .discover-tabs button {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel .discover-tabs button::after {
  content: "";
  position: absolute;
  right: 20%;
  bottom: -1px;
  left: 20%;
  height: 2px;
  background: transparent;
}

.discover-panel .discover-tabs button.is-active {
  background: transparent !important;
  color: var(--discover-coral-strong) !important;
  box-shadow: none !important;
}

.discover-panel .discover-tabs button.is-active::after {
  background: var(--discover-coral) !important;
}

.discover-panel .discover-tabs button:focus-visible {
  color: var(--discover-text) !important;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--discover-coral) 55%, transparent);
  text-underline-offset: 5px;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choices {
  gap: 10px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
  position: relative;
  isolation: isolate;
  min-height: 150px;
  padding: 17px 12px 14px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--topic-color) 54%, var(--discover-line));
  border-bottom: 1px solid color-mix(in srgb, var(--topic-color) 12%, var(--discover-line));
  border-radius: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: end;
  gap: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 13%, color-mix(in srgb, var(--topic-color) 13%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color) 3.5%, transparent), transparent 66%);
  box-shadow: none;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card::before {
  content: "";
  position: absolute;
  top: -26px;
  right: -18px;
  z-index: -1;
  width: 112px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--topic-color) 16%, transparent);
  border-radius: 50%;
  opacity: 0.58;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark {
  position: absolute;
  top: 16px;
  right: 13px;
  width: 42px;
  height: 42px;
  min-height: 0;
  border: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: color-mix(in srgb, var(--topic-color) 68%, var(--discover-text));
  opacity: 0.72;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  max-width: 11ch;
  color: var(--discover-text);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 520;
  line-height: 0.98;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > small {
  display: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > i {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin: 0 3px 4px 0;
  color: color-mix(in srgb, var(--topic-color) 72%, var(--discover-text));
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card:is(:hover, :focus-visible) {
  border-top-color: color-mix(in srgb, var(--topic-color) 76%, var(--discover-line));
  background:
    radial-gradient(circle at 92% 13%, color-mix(in srgb, var(--topic-color) 18%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color) 5%, transparent), transparent 66%);
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-shelf > header {
  min-height: 42px;
  align-items: center;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-shelf > header > div {
  gap: 0;
}

@media (max-width: 760px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
    min-height: 138px;
    padding: 15px 10px 13px;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark {
    top: 13px;
    right: 10px;
    width: 37px;
    height: 37px;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark svg {
    width: 27px;
    height: 27px;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
    font-size: clamp(1.08rem, 4.2vw, 1.35rem);
  }
}

/* Guided topic paths, persistent following, and context direction controls. */
.topic-discovery-content:not(.is-topic-context) {
  position: relative;
}

.topic-follow-button {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 1px solid var(--topic-dossier-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--topic-dossier-surface);
  color: var(--topic-dossier-muted);
  box-shadow: var(--topic-dossier-shadow);
  cursor: pointer;
}

.topic-follow-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.topic-follow-button.is-followed {
  border-color: color-mix(in srgb, var(--topic-dossier-accent) 30%, transparent);
  background: var(--topic-dossier-accent-soft);
  color: var(--topic-dossier-accent);
}

.topic-follow-button.is-followed svg {
  fill: currentColor;
}

.topic-path-heading {
  display: grid;
  gap: 4px;
}

.topic-path-heading > span {
  color: var(--topic-dossier-accent);
  font-family: var(--ui-font);
  font-size: 0.6rem;
  font-weight: 760;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.topic-path-heading p {
  max-width: 38em;
  margin: 0;
  color: var(--topic-dossier-muted);
  font-family: var(--reading-font);
  font-size: 0.84rem;
  line-height: 1.35;
}

.topic-path-stage {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--topic-dossier-accent);
  font-family: var(--ui-font);
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.topic-path-stage em {
  min-width: 24px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--topic-dossier-accent) 22%, transparent);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: var(--topic-dossier-accent-soft);
  font-style: normal;
  letter-spacing: 0.04em;
}

.topic-path-reason {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--topic-dossier-line);
  display: grid;
  gap: 3px;
}

.topic-path-reason b {
  color: var(--topic-dossier-soft);
  font-family: var(--ui-font);
  font-size: 0.56rem;
  font-weight: 740;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.topic-path-reason > span {
  color: var(--topic-dossier-muted);
  font-family: var(--reading-font);
  font-size: 0.75rem;
  line-height: 1.3;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggested-section .topic-suggestion-card strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-card.is-source-route,
.topic-discovery-content:not(.is-topic-context) .topic-book-card.is-source-route,
.topic-discovery-content:not(.is-topic-context) .topic-research-row.is-source-route,
.topic-discovery-content:not(.is-topic-context) .topic-article-row.is-source-route {
  border-style: dashed;
  background: color-mix(in srgb, var(--topic-dossier-surface-soft) 62%, var(--topic-dossier-surface));
  box-shadow: none;
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-card.is-source-route .topic-suggestion-cover {
  box-shadow: none;
  filter: saturate(0.68);
  opacity: 0.82;
}

.topic-context-header {
  gap: 6px;
}

.topic-context-header h2 {
  font-size: 2rem;
}

.topic-context-directions {
  width: min(100%, 470px);
  min-height: 46px;
  margin-top: 9px;
  padding: 4px;
  border: 1px solid var(--topic-dossier-line);
  border-radius: 999px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  background: var(--topic-dossier-surface-soft);
}

.topic-context-directions button {
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
  color: var(--topic-dossier-muted);
  font-family: var(--ui-font);
  font-size: 0.78rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.topic-context-directions button.is-active {
  background: var(--topic-dossier-surface);
  color: var(--topic-dossier-accent);
  box-shadow: 0 2px 8px rgba(62, 48, 32, 0.07);
}

.topic-context-drawer {
  border-radius: 8px;
}

.topic-context-counts div,
.topic-context-reasons article,
.topic-context-read {
  border-radius: 8px;
}

.topic-context-reasons {
  display: grid !important;
  gap: 8px;
}

.topic-context-reasons h4 {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.topic-context-reasons article {
  padding: 9px 10px;
  background: var(--topic-dossier-surface-soft);
}

.topic-context-reasons strong {
  white-space: normal;
}

.topic-context-reasons p {
  font-size: 0.8rem;
}

@media (max-width: 560px) {
  .topic-follow-button {
    right: max(14px, env(safe-area-inset-right));
  }

  .topic-context-header h2 {
    font-size: 1.7rem;
  }

  .topic-context-directions {
    min-height: 42px;
  }

  .topic-context-directions button {
    min-height: 34px;
    padding: 0 5px;
    font-size: 0.7rem;
  }
}

/* Context constellation motion and spatial continuity. */
.topic-context-stage {
  width: min(100%, 540px);
  min-height: 0;
  aspect-ratio: 1;
}

.topic-context-stage::before {
  inset: 11%;
  border: 1px solid color-mix(in srgb, var(--topic-color, #2d9f98) 12%, var(--topic-dossier-line));
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--topic-color, #2d9f98) 7%, transparent) 0 38%,
    transparent 69%
  );
  opacity: 0.82;
}

.topic-context-links {
  -webkit-mask-image: radial-gradient(circle, #000 0 43%, rgba(0, 0, 0, 0.82) 65%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
  mask-image: radial-gradient(circle, #000 0 43%, rgba(0, 0, 0, 0.82) 65%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
}

.topic-context-links circle {
  stroke-width: 0.18;
  stroke-dasharray: 0.018 0.034;
  opacity: 0.42;
}

.topic-context-links line {
  stroke-width: 0.34;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  opacity: 0.48;
  animation: none;
  transition: stroke 140ms ease, stroke-width 140ms ease, opacity 140ms ease;
}

.topic-context-links line.is-transition-target {
  animation: none;
  stroke: color-mix(in srgb, var(--topic-color, #2d9f98) 76%, var(--topic-dossier-accent));
  stroke-width: 0.62;
  opacity: 1;
}

.topic-context-center,
.topic-context-node {
  animation: none;
  border-color: color-mix(in srgb, var(--topic-color, #2d9f98) 32%, var(--topic-dossier-line));
  background: var(--topic-dossier-surface);
  color: var(--topic-dossier-text);
  transition:
    transform 150ms cubic-bezier(0.22, 0.78, 0.2, 1),
    border-color 150ms ease,
    box-shadow 180ms ease;
}

.topic-context-center::before,
.topic-context-node::before {
  opacity: 0.08;
  filter: saturate(0.72) contrast(0.92);
}

.topic-context-center::after,
.topic-context-node::after {
  background: color-mix(in srgb, var(--topic-color, #2d9f98) 5%, var(--topic-dossier-surface));
}

.topic-context-center {
  width: clamp(122px, 25vw, 158px);
  border-width: 2px;
  color: var(--topic-dossier-text);
  box-shadow:
    0 15px 34px color-mix(in srgb, var(--topic-color, #2d9f98) 13%, rgba(49, 39, 27, 0.12)),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.topic-context-center svg {
  stroke: color-mix(in srgb, var(--topic-color, #2d9f98) 76%, var(--topic-dossier-text));
}

.topic-context-center strong {
  color: var(--topic-dossier-text);
  font-size: 1.38rem;
  font-weight: 560;
}

.topic-context-node {
  width: clamp(82px, 17vw, 104px);
  box-shadow:
    0 9px 22px rgba(49, 39, 27, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.topic-context-node[data-topic-connection-type="strong"] {
  width: clamp(88px, 18.5vw, 112px);
  border-color: color-mix(in srgb, var(--topic-color, #2d9f98) 42%, var(--topic-dossier-line));
}

.topic-context-node[data-topic-connection-type="secondary"] {
  width: clamp(82px, 17vw, 104px);
}

.topic-context-node[data-topic-connection-type="unexpected"] {
  width: clamp(78px, 16vw, 98px);
  border-style: dashed;
}

.topic-context-node strong {
  color: var(--topic-dossier-text);
  font-size: 0.76rem;
  font-weight: 740;
}

.topic-context-node:active {
  transform: translate(-50%, -50%);
}

.topic-context-node.is-transition-target {
  z-index: 3;
  border-color: color-mix(in srgb, var(--topic-color, #2d9f98) 72%, var(--topic-dossier-accent));
  transform: translate(-50%, -50%) scale(1.035);
  box-shadow:
    0 13px 30px color-mix(in srgb, var(--topic-color, #2d9f98) 18%, rgba(49, 39, 27, 0.12)),
    0 0 0 4px color-mix(in srgb, var(--topic-color, #2d9f98) 9%, transparent);
}

.topic-context-directions {
  position: relative;
  isolation: isolate;
}

.topic-context-direction-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 0;
  width: calc((100% - 16px) / 3);
  border-radius: 999px;
  background: var(--topic-dossier-surface);
  box-shadow: 0 2px 8px rgba(62, 48, 32, 0.07);
  transform: translateX(0);
}

.topic-context-view[data-context-mode="broader"] .topic-context-direction-indicator {
  transform: translateX(calc(100% + 4px));
}

.topic-context-view[data-context-mode="surprise"] .topic-context-direction-indicator {
  transform: translateX(calc(200% + 8px));
}

.topic-context-directions button {
  position: relative;
  z-index: 1;
}

.topic-context-directions button.is-active {
  background: transparent;
  box-shadow: none;
}

.topic-context-drawer {
  align-self: start;
  background: color-mix(in srgb, var(--topic-dossier-surface) 94%, transparent);
  box-shadow: 0 12px 30px rgba(62, 48, 32, 0.07);
}

@keyframes topic-context-line-in {
  from {
    stroke-dashoffset: 1;
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 0.48;
  }
}

@keyframes topic-view-old-fade {
  to { opacity: 0; }
}

@keyframes topic-view-new-fade {
  from { opacity: 0; }
}

@keyframes topic-context-links-reveal {
  from {
    clip-path: circle(0% at 50% 50%);
    opacity: 0.28;
  }

  to {
    clip-path: circle(76% at 50% 50%);
    opacity: 1;
  }
}

@supports (view-transition-name: none) {
  .topic-context-header h2 {
    view-transition-name: topic-context-heading;
  }

  .topic-context-links {
    view-transition-name: topic-context-links;
  }

  .topic-context-drawer {
    view-transition-name: topic-context-details;
  }

  .topic-context-breadcrumb {
    view-transition-name: topic-context-path;
  }

  .topic-context-direction-indicator {
    view-transition-name: topic-context-direction;
  }

  html[data-topic-transition]::view-transition-old(root),
  html[data-topic-transition]::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  html[data-topic-transition]::view-transition-image-pair(*) {
    isolation: auto;
  }

  html[data-topic-transition]::view-transition-group(*) {
    animation-duration: 350ms;
    animation-timing-function: cubic-bezier(0.22, 0.78, 0.2, 1);
  }

  html[data-topic-transition="open-context"]::view-transition-group(*) {
    animation-duration: 460ms;
  }

  html[data-topic-transition="navigate-context"]::view-transition-group(*) {
    animation-duration: 360ms;
  }

  html[data-topic-transition="change-mode"]::view-transition-group(*) {
    animation-duration: 300ms;
  }

  html[data-topic-transition="close-context"]::view-transition-group(*) {
    animation-duration: 380ms;
  }

  html[data-topic-transition="change-tab"]::view-transition-group(*) {
    animation-duration: 240ms;
  }

  html[data-topic-transition]::view-transition-old(*) {
    animation: topic-view-old-fade 170ms ease both;
    mix-blend-mode: normal;
  }

  html[data-topic-transition]::view-transition-new(*) {
    animation: topic-view-new-fade 240ms ease both;
    mix-blend-mode: normal;
  }

  html[data-topic-transition]::view-transition-old(root),
  html[data-topic-transition]::view-transition-new(root) {
    animation: none;
  }

  html[data-topic-transition="open-context"]::view-transition-new(topic-context-links) {
    animation: topic-context-links-reveal 410ms 55ms cubic-bezier(0.22, 0.78, 0.2, 1) both;
  }

  html[data-topic-transition="navigate-context"]::view-transition-new(topic-context-links),
  html[data-topic-transition="change-mode"]::view-transition-new(topic-context-links) {
    animation: topic-context-links-reveal 270ms 30ms cubic-bezier(0.22, 0.78, 0.2, 1) both;
  }

  html[data-topic-transition] .topic-context-center,
  html[data-topic-transition] .topic-context-node,
  html[data-topic-transition] .topic-context-links line {
    animation: none;
  }
}

@supports not (view-transition-name: none) {
  .topic-context-center {
    animation: topic-context-center-in 340ms cubic-bezier(0.22, 0.78, 0.2, 1);
  }

  .topic-context-node {
    animation: topic-context-node-in 320ms cubic-bezier(0.22, 0.78, 0.2, 1) both;
    animation-delay: var(--delay, 0ms);
  }

  .topic-context-links line {
    animation: topic-context-line-in 390ms cubic-bezier(0.22, 0.78, 0.2, 1) both;
    animation-delay: var(--line-delay, 90ms);
  }
}

@media (max-width: 760px) {
  .topic-context-body {
    gap: 12px;
  }

  .topic-context-stage {
    width: min(100%, 410px);
    min-height: 0;
  }

  .topic-context-drawer {
    width: 100%;
  }
}

@media (max-width: 430px) {
  .topic-context-stage {
    width: min(calc(100vw - 28px), 390px);
    min-height: 0;
  }

  .topic-context-center {
    width: clamp(112px, 31vw, 132px);
    padding: 16px;
  }

  .topic-context-center strong {
    font-size: 1.12rem;
  }

  .topic-context-node,
  .topic-context-node[data-topic-connection-type="secondary"] {
    width: clamp(72px, 21vw, 86px);
    padding: 8px;
  }

  .topic-context-node[data-topic-connection-type="strong"] {
    width: clamp(78px, 22vw, 92px);
  }

  .topic-context-node[data-topic-connection-type="unexpected"] {
    width: clamp(68px, 19.5vw, 80px);
  }

  .topic-context-node strong {
    font-size: 0.65rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topic-context-center,
  .topic-context-node,
  .topic-context-links line,
  .topic-context-direction-indicator,
  .topic-context-entry {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* Compact phone dock: keep the five reader targets distinct below 360px. */
@media (max-width: 360px) {
  body.has-loaded-text:not(.ebook-mode) .reader-panel .transport-controls {
    width: min(188px, calc(100vw - 132px)) !important;
    gap: clamp(8px, 4vw, 14px) !important;
  }
}

@media (max-width: 360px) and (max-height: 600px) {
  body.ebook-mode #ebookPage,
  body.ebook-mode .ebook-measure-page {
    padding-bottom: max(58px, calc(env(safe-area-inset-bottom) + 48px)) !important;
  }
}

/* Milestone 2 reader experience: explicit modes, quieter chrome, and stable viewport. */
html,
body {
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.app-shell,
.reader-panel {
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.reader-aa-mark {
  display: inline-block;
  font-family: var(--reading-font);
  font-size: 0.98rem;
  font-weight: 660;
  letter-spacing: -0.035em;
  line-height: 1;
}

.font-size-popover {
  gap: 10px !important;
  width: min(306px, calc(100vw - 24px)) !important;
  max-height: min(76dvh, 480px) !important;
  padding: 12px !important;
  overflow-y: auto !important;
  border: 1px solid rgba(112, 89, 59, 0.08);
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.92), transparent 48%),
    rgba(250, 247, 239, 0.97) !important;
  box-shadow:
    0 15px 36px rgba(48, 39, 27, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.reader-appearance-heading,
.reader-appearance-font,
.reader-appearance-more,
.reader-appearance-size,
.reader-appearance-dialogue-colours {
  width: 100%;
}

.reader-appearance-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 4px 0;
}

.reader-appearance-heading > span {
  color: rgba(35, 32, 28, 0.88);
  font-size: 0.82rem;
  font-weight: 730;
}

.reader-appearance-heading small,
.reader-appearance-size small,
.reader-appearance-font small,
.reader-appearance-more small {
  color: rgba(91, 87, 80, 0.68);
  font-family: var(--ui-font);
  font-size: 0.65rem;
  font-weight: 520;
  line-height: 1.25;
}

.font-size-dialogue-toggle {
  min-height: 46px !important;
  padding: 7px 10px !important;
  border-radius: 17px !important;
}

.reader-appearance-dialogue-colours {
  gap: 7px;
  padding: 2px 0;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .slider-row,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .progress-meta,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .text-size-button,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .round-side-button,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .bottom-right-actions {
  opacity: 0.16 !important;
  transition: opacity 420ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .progress-track {
  opacity: 0.42;
  transition: opacity 420ms cubic-bezier(0.22, 0.72, 0.22, 1);
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing.is-adjusting-speed .slider-row,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .slider-row:focus-within,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .text-size-button:focus-visible,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .round-side-button:focus-visible,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .bottom-right-actions:focus-within {
  opacity: 1 !important;
}

.reader-panel .top-icon-button,
.reader-panel .top-mode-button,
.ebook-reader .top-icon-button,
.ebook-reader .top-mode-button {
  box-shadow:
    0 7px 16px rgba(83, 56, 24, 0.07),
    0 2px 5px rgba(83, 56, 24, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .text-size-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .round-side-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-mode-button {
  box-shadow:
    inset 0 1px 3px rgba(94, 70, 42, 0.08),
    inset 0 -1px 1px rgba(255, 255, 255, 0.24) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button {
  box-shadow:
    inset 0 2px 6px rgba(109, 82, 49, 0.10),
    inset 0 -1px 2px rgba(255, 255, 255, 0.28),
    0 5px 13px rgba(58, 43, 25, 0.055) !important;
}

html.theme-dark .reader-appearance-heading > span,
body.theme-dark .reader-appearance-heading > span {
  color: rgba(246, 239, 228, 0.92);
}

html.theme-dark .reader-appearance-heading small,
html.theme-dark .reader-appearance-size small,
html.theme-dark .reader-appearance-font small,
html.theme-dark .reader-appearance-more small,
body.theme-dark .reader-appearance-heading small,
body.theme-dark .reader-appearance-size small,
body.theme-dark .reader-appearance-font small,
body.theme-dark .reader-appearance-more small {
  color: rgba(214, 204, 188, 0.66);
}

html.theme-dark body.reader-context-mode .context-sentence-card.is-mid-sentence-card,
body.theme-dark.reader-context-mode .context-sentence-card.is-mid-sentence-card {
  --context-line-opacity: 0.72;
}

html.theme-dark body.reader-context-mode .context-sentence-card.is-far-sentence-card,
body.theme-dark.reader-context-mode .context-sentence-card.is-far-sentence-card {
  --context-line-opacity: 0.56;
}

html.theme-dark .reader-panel .top-icon-button,
html.theme-dark .reader-panel .top-mode-button,
html.theme-dark .ebook-reader .top-icon-button,
html.theme-dark .ebook-reader .top-mode-button,
body.theme-dark .reader-panel .top-icon-button,
body.theme-dark .reader-panel .top-mode-button,
body.theme-dark .ebook-reader .top-icon-button,
body.theme-dark .ebook-reader .top-mode-button {
  box-shadow:
    0 8px 17px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 244, 226, 0.07) !important;
}

@media (max-width: 430px) {
  .font-size-popover {
    width: min(300px, calc(100vw - 20px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .slider-row,
  body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .progress-meta,
  body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .text-size-button,
  body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .round-side-button,
  body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .bottom-right-actions {
    transition-duration: 1ms !important;
  }
}

/* Rhythm reader visual system: editorial hierarchy, warm signals, fixed geometry. */
:root {
  --rhythm-coral: #c95445;
  --rhythm-coral-strong: #b94337;
  --rhythm-amber: #ca8a3d;
  --rhythm-amber-bright: #dca653;
  --rhythm-progress-teal: #3f9689;
  --rhythm-control-ink: rgba(48, 42, 34, 0.88);
  --rhythm-control-muted: rgba(92, 82, 68, 0.70);
  --rhythm-dock-surface: rgba(240, 234, 222, 0.985);
}

html.theme-dark,
body.theme-dark {
  --rhythm-coral: #e06c5b;
  --rhythm-coral-strong: #ef7b68;
  --rhythm-amber: #d39a49;
  --rhythm-amber-bright: #e5b45f;
  --rhythm-progress-teal: #62b8aa;
  --rhythm-control-ink: rgba(244, 232, 212, 0.90);
  --rhythm-control-muted: rgba(218, 204, 181, 0.70);
  --rhythm-dock-surface: rgba(31, 28, 24, 0.985);
}

body.has-loaded-text:not(.ebook-mode) {
  --speed-fill: var(--rhythm-coral);
  --speed-track: rgba(160, 147, 127, 0.34);
  --progress-fill-soft: var(--rhythm-amber);
  --progress-track-soft: rgba(164, 150, 128, 0.28);
}

html.theme-dark body.has-loaded-text:not(.ebook-mode),
body.theme-dark.has-loaded-text:not(.ebook-mode) {
  --speed-track: rgba(202, 184, 153, 0.22);
  --progress-track-soft: rgba(202, 184, 153, 0.18);
}

/* The title stack is literary; its supporting information is quiet UI text. */
.reader-panel > .top-bar #chapterButton #tagline,
body.ebook-mode #ebookChapterButton #ebookTitle,
body.ebook-mode .ebook-title-block #ebookTitle,
body.ebook-mode .ebook-title-block span,
.pdf-source-panel .pdf-source-title-block > span {
  font-weight: 620 !important;
  letter-spacing: 0.006em !important;
}

.reader-panel > .top-bar #chapterButton #speedHeaderDetail,
body.ebook-mode #ebookChapterButton #ebookChapterLabel,
body.ebook-mode .ebook-title-block #ebookChapterLabel,
body.ebook-mode .ebook-title-block small,
.pdf-source-panel .pdf-source-title-block > small {
  color: var(--reader-header-meta-color) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.76rem, 2.35vw, 0.84rem) !important;
  font-weight: 590 !important;
  letter-spacing: 0.038em !important;
}

/* A fine amber measure with a coral beat marks the reader's central axis. */
.reader-panel > .top-bar #chapterButton::before,
body.ebook-mode #ebookChapterButton::before,
body.ebook-mode .ebook-title-block::before,
.pdf-source-panel .pdf-source-title-block::before {
  top: calc(100% + 12px) !important;
  width: clamp(228px, 58vw, 360px) !important;
  height: 14px !important;
  opacity: 0.84 !important;
  background:
    radial-gradient(circle at 50% 50%, var(--rhythm-coral) 0 1.7px, transparent 2.2px),
    radial-gradient(circle at 50% 50%, var(--rhythm-amber-bright) 0 4px, transparent 4.6px),
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--rhythm-amber) 18%, transparent) 10%,
      color-mix(in srgb, var(--rhythm-amber) 72%, transparent) 38%,
      color-mix(in srgb, var(--rhythm-amber) 84%, transparent) 46%,
      transparent 47%,
      transparent 53%,
      color-mix(in srgb, var(--rhythm-amber) 84%, transparent) 54%,
      color-mix(in srgb, var(--rhythm-amber) 72%, transparent) 62%,
      color-mix(in srgb, var(--rhythm-amber) 18%, transparent) 90%,
      transparent 100%
    ) !important;
  background-position: center, center, center !important;
  background-repeat: no-repeat !important;
  background-size: 14px 14px, 14px 14px, 100% 1px !important;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--rhythm-amber) 24%, transparent)) !important;
  transition: opacity 260ms ease, filter 260ms ease !important;
}

.reader-panel.is-playing > .top-bar #chapterButton::before {
  opacity: 0.96 !important;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--rhythm-amber) 30%, transparent)) !important;
}

/* Header controls stay tactile but read as quiet tools rather than floating tiles. */
.reader-panel :is(.top-icon-button, .top-mode-button),
.ebook-reader :is(.top-icon-button, .top-mode-button),
.chapter-panel :is(.top-icon-button, .top-mode-button) {
  border-color: rgba(93, 73, 49, 0.085) !important;
  background: linear-gradient(180deg, rgba(251, 248, 240, 0.96), rgba(235, 227, 213, 0.94)) !important;
  box-shadow:
    0 7px 15px rgba(65, 49, 29, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease !important;
}

.reader-panel :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible),
.ebook-reader :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible),
.chapter-panel :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--rhythm-coral) 19%, transparent) !important;
  background: linear-gradient(180deg, rgba(253, 250, 243, 0.98), rgba(239, 231, 217, 0.96)) !important;
  box-shadow:
    0 8px 17px rgba(65, 49, 29, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.reader-panel .top-icon-button .home-symbol,
.ebook-reader .top-icon-button .home-symbol,
.chapter-panel .top-icon-button .home-symbol {
  color: var(--rhythm-control-ink) !important;
}

html.theme-dark .reader-panel :is(.top-icon-button, .top-mode-button),
html.theme-dark .ebook-reader :is(.top-icon-button, .top-mode-button),
html.theme-dark .chapter-panel :is(.top-icon-button, .top-mode-button),
body.theme-dark .reader-panel :is(.top-icon-button, .top-mode-button),
body.theme-dark .ebook-reader :is(.top-icon-button, .top-mode-button),
body.theme-dark .chapter-panel :is(.top-icon-button, .top-mode-button) {
  border-color: rgba(255, 239, 212, 0.075) !important;
  background: linear-gradient(180deg, rgba(43, 38, 32, 0.98), rgba(31, 28, 24, 0.985)) !important;
  box-shadow:
    0 8px 17px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 240, 215, 0.065) !important;
}

html.theme-dark .reader-panel :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible),
html.theme-dark .ebook-reader :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible),
html.theme-dark .chapter-panel :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible),
body.theme-dark .reader-panel :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible),
body.theme-dark .ebook-reader :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible),
body.theme-dark .chapter-panel :is(.top-icon-button, .top-mode-button):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--rhythm-coral) 22%, transparent) !important;
  background: linear-gradient(180deg, rgba(47, 42, 35, 0.99), rgba(34, 30, 26, 0.99)) !important;
  box-shadow:
    0 9px 19px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 240, 215, 0.075) !important;
}

/* One opaque vellum surface keeps Focus and Context visually stable. */
body:not(.ebook-mode) .reader-panel .bottom-dock {
  border-top: 0 !important;
  background:
    linear-gradient(color-mix(in srgb, var(--rhythm-amber) 20%, transparent), color-mix(in srgb, var(--rhythm-amber) 20%, transparent)) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(246, 242, 233, 0.985), var(--rhythm-dock-surface)) !important;
  box-shadow: 0 -11px 28px rgba(56, 43, 27, 0.095) !important;
  -webkit-backdrop-filter: blur(10px) saturate(0.96) !important;
  backdrop-filter: blur(10px) saturate(0.96) !important;
}

html.theme-dark body:not(.ebook-mode) .reader-panel .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel .bottom-dock {
  border-top: 0 !important;
  background:
    linear-gradient(color-mix(in srgb, var(--rhythm-amber) 22%, transparent), color-mix(in srgb, var(--rhythm-amber) 22%, transparent)) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(36, 32, 27, 0.985), var(--rhythm-dock-surface)) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.30) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .slider-row,
body.has-loaded-text:not(.ebook-mode) .reader-panel .progress-meta,
body.has-loaded-text:not(.ebook-mode) .reader-panel .speed-control output {
  color: var(--rhythm-control-muted) !important;
  font-family: var(--ui-font) !important;
  text-shadow: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .slider-row {
  font-weight: 590 !important;
  letter-spacing: 0.014em !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .speed-control output {
  color: var(--rhythm-control-ink) !important;
  font-weight: 620 !important;
  letter-spacing: -0.01em !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .progress-track {
  background: var(--progress-track-soft) !important;
  container-type: inline-size;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .progress-fill {
  background: linear-gradient(90deg, var(--rhythm-amber) 0%, var(--rhythm-progress-teal) 100%) !important;
  background-size: 100cqw 100% !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
}

/* Secondary controls are glyphs in the dock; only Play receives a material. */
body.has-loaded-text:not(.ebook-mode) .reader-panel :is(.text-size-button, .round-side-button, .bottom-mode-button),
body.has-loaded-text:not(.ebook-mode) .reader-panel :is(.text-size-button, .round-side-button, .bottom-mode-button):is(:hover, :focus, :focus-visible, :active) {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--rhythm-control-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel :is(.text-size-button, .round-side-button, .bottom-mode-button):is(:hover, :focus-visible) {
  color: var(--rhythm-coral) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .character-legend-button:not([aria-expanded="true"]) {
  opacity: 0.64;
  filter: saturate(0.62) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .character-legend-button[aria-expanded="true"] {
  opacity: 1;
  filter: saturate(1) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:is(:hover, :focus, :focus-visible) {
  border: 1px solid rgba(113, 83, 48, 0.10) !important;
  background: linear-gradient(180deg, rgba(250, 245, 235, 0.99), rgba(226, 215, 196, 0.99)) !important;
  color: var(--rhythm-coral-strong) !important;
  box-shadow:
    0 9px 19px rgba(66, 49, 28, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover {
  border-color: color-mix(in srgb, var(--rhythm-coral) 24%, transparent) !important;
  background: linear-gradient(180deg, rgba(253, 248, 239, 1), rgba(232, 220, 201, 1)) !important;
  box-shadow:
    0 10px 21px rgba(66, 49, 28, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button::before {
  background: transparent !important;
  opacity: 0 !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:is(:hover, :focus, :focus-visible),
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:is(:hover, :focus, :focus-visible) {
  border-color: rgba(255, 235, 203, 0.085) !important;
  background: linear-gradient(180deg, rgba(57, 49, 40, 0.99), rgba(37, 32, 27, 0.995)) !important;
  color: var(--rhythm-coral-strong) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 236, 204, 0.09) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:hover {
  border-color: color-mix(in srgb, var(--rhythm-coral) 27%, transparent) !important;
  background: linear-gradient(180deg, rgba(62, 53, 43, 1), rgba(41, 35, 29, 1)) !important;
}

/* Playback quiets supporting chrome without making controls disappear. */
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing :is(
  .slider-row,
  .progress-meta,
  .text-size-button,
  .round-side-button,
  .bottom-right-actions
) {
  opacity: 0.72 !important;
  transition: opacity 280ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .progress-track {
  opacity: 0.78 !important;
  transition: opacity 280ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing.is-adjusting-speed .slider-row,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .slider-row:focus-within,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing :is(.text-size-button, .round-side-button):focus-visible,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .bottom-right-actions:focus-within {
  opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
  .reader-panel > .top-bar #chapterButton::before,
  body.ebook-mode #ebookChapterButton::before,
  body.ebook-mode .ebook-title-block::before,
  .reader-panel :is(.top-icon-button, .top-mode-button),
  .ebook-reader :is(.top-icon-button, .top-mode-button),
  body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
  body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing :is(
    .slider-row,
    .progress-meta,
    .text-size-button,
    .round-side-button,
    .bottom-right-actions
  ) {
    transition-duration: 1ms !important;
  }
}

/* Scrollable content surfaces: cards belong to the page, not the button chrome. */
.topic-discovery-sheet {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

.topic-discovery-content:not(.is-topic-context),
.topic-discovery-content:not(.is-topic-context) .topic-discovery-section,
.topic-discovery-content:not(.is-topic-context) button,
.topic-discovery-content:not(.is-topic-context) button * {
  touch-action: pan-y !important;
}

button[data-scroll-surface="vertical"],
button[data-scroll-surface="vertical"] * {
  touch-action: pan-y !important;
  -webkit-tap-highlight-color: transparent !important;
}

button[data-scroll-surface]:active,
button[data-scroll-surface].is-tactile-press {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  opacity: 1 !important;
}

@media (max-width: 560px) {
  .topic-discovery-content:not(.is-topic-context) .topic-cluster-grid,
  .topic-discovery-content:not(.is-topic-context) .topic-cluster-grid button,
  .topic-discovery-content:not(.is-topic-context) .topic-cluster-grid button * {
    touch-action: pan-x pan-y !important;
  }
}

/* Context retains an in-view close control; its old topic-page entry pill is retired. */
.topic-context-entry-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
  justify-items: start;
}

.topic-context-entry-label {
  color: var(--topic-dossier-muted);
  font-family: var(--ui-font);
  font-size: 0.58rem;
  font-weight: 760;
  letter-spacing: 0.09em;
  line-height: 1.1;
  text-transform: uppercase;
}

.topic-discovery-content:not(.is-topic-context) .topic-context-entry-copy strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--topic-dossier-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-discovery-content:not(.is-topic-context) .topic-context-entry-copy small {
  max-width: 100%;
  color: var(--topic-dossier-accent);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 680;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
}

.topic-context-center {
  cursor: pointer;
}

.topic-context-center[data-scroll-surface]:active,
.topic-context-center[data-scroll-surface].is-tactile-press {
  transform: translate(-50%, -50%) !important;
}

.topic-context-center small {
  position: relative;
  max-width: 12ch;
  color: var(--topic-dossier-muted);
  font-family: var(--ui-font);
  font-size: 0.6rem;
  font-weight: 680;
  line-height: 1.12;
}

@media (max-width: 430px) {
  .topic-context-center {
    gap: 5px;
    padding: 13px;
  }

  .topic-context-center small {
    max-width: 11ch;
    font-size: 0.55rem;
  }
}

/* Keep the Discover back control above the older shared collection button layers. */
.discover-panel .discover-close {
  position: relative;
  inset: auto;
  margin: 0;
  border: 1px solid var(--discover-line);
  background: var(--discover-surface);
  color: var(--discover-text);
  box-shadow: 0 8px 20px rgba(65, 49, 31, 0.08);
}

html.theme-dark .discover-panel .discover-close,
body.theme-dark .discover-panel .discover-close {
  border-color: var(--discover-line);
  background: var(--discover-surface);
  color: var(--discover-text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Discover hierarchy refinement: sources lead, while the daily topic reads as a compact feature. */
.discover-content {
  gap: clamp(26px, 4.5vw, 38px);
}

.discover-sources {
  order: 1;
}

.discover-topic-section {
  order: 2;
}

.discover-topic-card {
  min-height: 188px;
  grid-template-columns: minmax(138px, 0.48fr) minmax(0, 1.52fr);
  border-radius: 24px;
  box-shadow:
    0 14px 32px rgba(68, 50, 31, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.54);
}

.discover-topic-art {
  min-height: 188px;
}

.discover-topic-date {
  top: 17px;
  left: 17px;
  font-size: 0.58rem;
}

.discover-topic-watermark {
  bottom: -0.2em;
  font-size: 10rem;
}

.discover-topic-glyph {
  width: 66px;
  height: 66px;
}

.discover-topic-glyph svg {
  width: 34px;
  height: 34px;
}

.discover-topic-line {
  right: 17px;
  bottom: 17px;
  left: 17px;
}

.discover-topic-copy {
  padding: clamp(20px, 3.2vw, 28px);
  gap: 8px;
}

.discover-topic-kicker {
  font-size: 0.59rem;
}

.discover-topic-copy h3 {
  max-width: 18ch;
  font-size: clamp(1.65rem, 4vw, 2.2rem);
  line-height: 1;
}

.discover-topic-copy > p:not(.discover-topic-kicker) {
  display: -webkit-box;
  max-width: 39em;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-topic-formats span {
  min-height: 22px;
  padding: 0 8px;
  font-size: 0.6rem;
}

.discover-topic-button {
  width: auto;
  min-width: 190px;
  min-height: 40px;
  margin-top: 2px;
  padding-inline: 14px;
  border-radius: 13px;
}

@media (max-width: 680px) {
  .discover-topic-card {
    min-height: 156px;
    grid-template-columns: 88px minmax(0, 1fr);
    border-radius: 20px;
  }

  .discover-topic-art {
    min-height: 100%;
  }

  .discover-topic-date,
  .discover-topic-watermark,
  .discover-topic-line {
    display: none;
  }

  .discover-topic-glyph {
    width: 52px;
    height: 52px;
  }

  .discover-topic-glyph svg {
    width: 27px;
    height: 27px;
  }

  .discover-topic-copy {
    padding: 15px 15px 14px;
    gap: 6px;
  }

  .discover-topic-copy h3 {
    font-size: clamp(1.35rem, 6vw, 1.65rem);
  }

  .discover-topic-copy > p:not(.discover-topic-kicker) {
    font-size: 0.76rem;
  }

  .discover-topic-formats {
    display: none;
  }

  .discover-topic-button {
    width: 100%;
    min-width: 0;
    min-height: 36px;
  }
}

/* Reading appearance: one composed control sheet, separated by rhythm rather than cards. */
.font-size-popover {
  gap: 0 !important;
  width: min(310px, calc(100vw - 24px)) !important;
  max-height: min(78dvh, 500px) !important;
  padding: 12px 15px 14px !important;
  border: 1px solid rgba(89, 72, 51, 0.12) !important;
  border-radius: 20px !important;
  background: rgba(250, 247, 240, 0.985) !important;
  box-shadow:
    0 18px 42px rgba(42, 34, 24, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.reader-appearance-heading {
  min-height: 38px;
  padding: 3px 2px 11px;
  border-bottom: 1px solid rgba(91, 76, 56, 0.12);
}

.reader-appearance-heading > span {
  font-family: var(--reading-font);
  font-size: 0.96rem;
  font-weight: 620;
  letter-spacing: -0.015em;
}

.reader-appearance-heading small {
  font-size: 0.61rem;
  font-weight: 640;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.reader-appearance-dialogue-colours {
  gap: 8px;
  padding: 11px 2px 1px;
}

.reader-appearance-dialogue-colours .dialogue-color-options {
  gap: 4px;
}

.reader-appearance-dialogue-colours .dialogue-color-option {
  min-height: 42px;
  padding: 4px 2px;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
}

.reader-appearance-dialogue-colours .dialogue-color-option.is-active {
  background: transparent;
  color: rgba(55, 48, 40, 0.88);
}

html.theme-dark .font-size-popover,
body.theme-dark .font-size-popover {
  border-color: rgba(231, 218, 196, 0.13) !important;
  background: rgba(30, 28, 24, 0.99) !important;
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 244, 226, 0.07) !important;
}

html.theme-dark .reader-appearance-heading,
html.theme-dark .reader-appearance-size,
html.theme-dark .reader-appearance-font,
html.theme-dark .reader-appearance-options,
body.theme-dark .reader-appearance-heading,
body.theme-dark .reader-appearance-size,
body.theme-dark .reader-appearance-font,
body.theme-dark .reader-appearance-options {
  border-color: rgba(231, 218, 196, 0.11);
}

html.theme-dark .reader-appearance-dialogue-colours .dialogue-color-option,
body.theme-dark .reader-appearance-dialogue-colours .dialogue-color-option {
  background: transparent !important;
  color: rgba(226, 216, 199, 0.76) !important;
  box-shadow: none !important;
}

html.theme-dark .reader-appearance-dialogue-colours .dialogue-color-option.is-active,
body.theme-dark .reader-appearance-dialogue-colours .dialogue-color-option.is-active {
  background: transparent !important;
  color: rgba(246, 239, 228, 0.92) !important;
}

/* Per-topic colour worlds: a black canvas with restrained, topic-specific tinting. */
.topic-discovery-panel,
html.theme-dark .topic-discovery-panel,
body.theme-dark .topic-discovery-panel {
  color-scheme: dark;
  --topic-dossier-page: #090a09;
  --topic-dossier-sheet: #0e0f0d;
  --topic-dossier-surface: color-mix(in srgb, var(--topic-color) 3%, #191a17);
  --topic-dossier-surface-soft: color-mix(in srgb, var(--topic-color) 5%, #232520);
  --topic-dossier-text: #f3f3ed;
  --topic-dossier-muted: #b8bab3;
  --topic-dossier-soft: #8f938b;
  --topic-dossier-line: color-mix(in srgb, var(--topic-color) 18%, rgba(232, 232, 222, 0.12));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 82%, #f0eadc);
  --topic-dossier-accent-soft: color-mix(in srgb, var(--topic-color) 12%, transparent);
  --topic-dossier-shadow: 0 12px 28px color-mix(in srgb, var(--topic-color) 4%, rgba(0, 0, 0, 0.46));
  background:
    radial-gradient(circle at 76% -4%, color-mix(in srgb, var(--topic-color) 10%, transparent), transparent 32%),
    radial-gradient(circle at 4% 72%, color-mix(in srgb, var(--topic-color) 4%, transparent), transparent 34%),
    var(--topic-dossier-page);
}

.topic-discovery-sheet,
html.theme-dark .topic-discovery-sheet,
body.theme-dark .topic-discovery-sheet {
  background:
    radial-gradient(circle at 74% -3%, color-mix(in srgb, var(--topic-color) 8%, transparent), transparent 30%),
    linear-gradient(180deg, var(--topic-dossier-sheet), var(--topic-dossier-page));
}

.topic-discovery-close {
  color: var(--topic-dossier-accent);
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-hero {
  position: relative;
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-hero::after {
  width: min(170px, 44%);
  height: 1px;
  margin: 19px auto 0;
  display: block;
  background: linear-gradient(90deg, transparent, var(--topic-dossier-accent), transparent);
  content: "";
  opacity: 0.42;
}

.topic-discovery-counts li > span,
.topic-discovery-content:not(.is-topic-context) .topic-discovery-section h3 {
  color: color-mix(in srgb, var(--topic-dossier-accent) 42%, var(--topic-dossier-text));
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-card,
.topic-discovery-content:not(.is-topic-context) .topic-book-card,
.topic-discovery-content:not(.is-topic-context) .topic-research-row,
.topic-discovery-content:not(.is-topic-context) .topic-article-row,
.topic-discovery-content:not(.is-topic-context) .topic-library-row,
.topic-discovery-content:not(.is-topic-context) .topic-overview-card,
.topic-discovery-content:not(.is-topic-context) .topic-empty-card,
.topic-discovery-content:not(.is-topic-context) .topic-cluster-card {
  background: color-mix(in srgb, var(--topic-color) 3%, var(--topic-dossier-surface));
}

.topic-discovery-content:not(.is-topic-context) .topic-suggestion-cover,
.topic-discovery-content:not(.is-topic-context) .topic-book-cover,
.topic-discovery-content:not(.is-topic-context) .topic-research-icon,
.topic-discovery-content:not(.is-topic-context) .topic-article-thumb,
.topic-discovery-content:not(.is-topic-context) .topic-related-list button,
.topic-discovery-content:not(.is-topic-context) .topic-cluster-topics button,
.topic-discovery-content:not(.is-topic-context) .topic-source-badges span {
  background: color-mix(in srgb, var(--topic-color) 7%, var(--topic-dossier-surface-soft));
}

.topic-discovery-content:not(.is-topic-context) .topic-discovery-tabs button.is-active,
.topic-context-directions button.is-active,
.topic-follow-button.is-followed {
  border-color: color-mix(in srgb, var(--topic-color) 34%, var(--topic-dossier-line));
  background: color-mix(in srgb, var(--topic-color) 9%, var(--topic-dossier-surface));
  color: var(--topic-dossier-accent);
}

.topic-live-status span,
.topic-library-progress i,
.topic-context-entry-action,
.topic-context-direction-indicator {
  background-color: var(--topic-dossier-accent);
}

/* Milestone 3 · Discover is a destination, not a source menu. */
.discover-panel {
  --discover-page: #eee9e0;
  --discover-sheet: #f8f5ef;
  --discover-surface: #fffdf9;
  --discover-surface-soft: #f0ebe2;
  --discover-text: #1d1d1b;
  --discover-muted: #6f6a61;
  --discover-soft: #9b9489;
  --discover-line: rgba(40, 38, 33, 0.13);
  --discover-coral: #bc4b42;
  --discover-coral-strong: #a83c35;
  --discover-amber: #b9782d;
  --discover-green: #46766d;
  --discover-shadow: 0 18px 50px rgba(47, 40, 31, 0.11);
  background:
    radial-gradient(circle at 84% -8%, rgba(188, 75, 66, 0.085), transparent 28%),
    var(--discover-page);
}

.discover-sheet {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  background:
    linear-gradient(180deg, rgba(255, 253, 249, 0.88), rgba(248, 245, 239, 0.94) 310px, var(--discover-page) 860px),
    var(--discover-page);
  scrollbar-gutter: auto;
  -webkit-overflow-scrolling: touch;
}

.discover-header {
  position: sticky;
  top: 0;
  z-index: 12;
  width: min(1040px, 100%);
  min-height: 88px;
  padding:
    max(16px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    12px
    max(24px, env(safe-area-inset-left));
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--discover-sheet) 96%, transparent) 58%, transparent);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.discover-panel .discover-close,
.discover-search-toggle,
.discover-preview-back,
.discover-preview-save {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  border: 1px solid var(--discover-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--discover-surface) 92%, transparent);
  color: var(--discover-text);
  box-shadow: 0 7px 20px rgba(47, 40, 31, 0.075);
  cursor: pointer;
}

.discover-search-toggle {
  grid-column: 3;
}

.discover-search-toggle svg,
.discover-search-bar svg,
.discover-preview-save svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.discover-search-toggle.is-active,
.discover-preview-save.is-saved {
  border-color: color-mix(in srgb, var(--discover-coral) 32%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 9%, var(--discover-surface));
  color: var(--discover-coral-strong);
}

.discover-preview-save.is-saved svg {
  fill: currentColor;
}

.discover-header-copy {
  gap: 1px;
}

.discover-header-copy h2 {
  order: 1;
  font-size: clamp(1.55rem, 3vw, 1.9rem);
  font-weight: 570;
}

.discover-header-copy p {
  order: 2;
  letter-spacing: 0.08em;
  text-transform: none;
}

.discover-search-bar {
  width: min(920px, calc(100% - 40px));
  margin: 0 auto 14px;
  padding: 0 2px;
}

.discover-search-bar[hidden],
.discover-preview-panel[hidden] {
  display: none;
}

.discover-search-bar label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.discover-search-bar > div {
  min-height: 52px;
  padding: 0 10px 0 17px;
  border: 1px solid var(--discover-line);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  background: var(--discover-surface);
  box-shadow: 0 10px 30px rgba(47, 40, 31, 0.08);
}

.discover-search-bar input {
  width: 100%;
  min-width: 0;
  height: 48px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--discover-text);
  font-family: var(--ui-font);
  font-size: 0.84rem;
}

.discover-search-bar input::placeholder {
  color: var(--discover-soft);
}

.discover-search-bar button {
  min-height: 44px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.7rem;
  font-weight: 730;
  cursor: pointer;
}

.discover-tabs {
  position: sticky;
  top: 82px;
  z-index: 11;
  width: min(520px, calc(100% - 40px));
  min-height: 52px;
  margin: 0 auto 24px;
  padding: 4px;
  border: 1px solid var(--discover-line);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: color-mix(in srgb, var(--discover-surface) 90%, transparent);
  box-shadow: 0 10px 28px rgba(47, 40, 31, 0.08);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

.discover-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 720;
  cursor: pointer;
}

.discover-tabs button.is-active {
  background: var(--discover-text);
  color: var(--discover-surface);
  box-shadow: 0 6px 16px rgba(35, 32, 27, 0.14);
}

.discover-content {
  width: min(1040px, 100%);
  margin: 0 auto;
  padding:
    2px
    max(24px, env(safe-area-inset-right))
    max(72px, calc(env(safe-area-inset-bottom) + 46px))
    max(24px, env(safe-area-inset-left));
  display: grid;
  gap: clamp(48px, 7vw, 78px);
}

.discover-content button,
.discover-content button *,
.discover-preview-content button,
.discover-preview-content button * {
  touch-action: pan-y;
}

.discover-content button:active,
.discover-content button.is-tactile-press,
.discover-preview-content button:active,
.discover-preview-content button.is-tactile-press {
  transform: none !important;
  filter: none !important;
}

.discover-intro,
.discover-view-intro {
  max-width: 790px;
  margin: clamp(14px, 4vw, 40px) auto 0;
  display: grid;
  justify-items: center;
  gap: 13px;
  text-align: center;
}

.discover-intro > p,
.discover-view-intro > p,
.discover-search-results > header > p {
  margin: 0;
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.62rem;
  font-weight: 780;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.discover-intro h1,
.discover-view-intro h1,
.discover-search-results > header h1 {
  margin: 0;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 480;
  letter-spacing: -0.052em;
  line-height: 0.95;
}

.discover-intro h1 em {
  color: var(--discover-coral-strong);
  font-weight: inherit;
}

.discover-intro > span,
.discover-view-intro > span,
.discover-search-results > header > span {
  max-width: 50em;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: clamp(0.88rem, 2vw, 1rem);
  line-height: 1.5;
}

.discover-view-intro h1 {
  font-size: clamp(2.45rem, 6.4vw, 4.5rem);
}

.discover-view-intro.is-browse h1 {
  font-size: clamp(3rem, 8vw, 5.5rem);
}

.discover-next-section,
.discover-daily-section,
.discover-recommendations-section,
.discover-format-section,
.discover-followed-section,
.discover-personal-topics,
.discover-topic-families,
.discover-directory,
.discover-browse-section,
.discover-search-results > section {
  display: grid;
  gap: 18px;
}

.discover-editorial-heading {
  min-width: 0;
  display: flex;
  gap: 18px;
  align-items: end;
  justify-content: space-between;
}

.discover-editorial-heading > div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.discover-editorial-heading h3 {
  margin: 0;
}

.discover-editorial-heading h3 {
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  font-weight: 540;
  letter-spacing: -0.03em;
}

.discover-editorial-heading > span {
  flex: 0 0 auto;
  max-width: 42%;
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 650;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-next-card {
  position: relative;
  min-height: 340px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--topic-color) 22%, var(--discover-line));
  border-radius: 30px;
  display: grid;
  grid-template-columns: minmax(270px, 0.82fr) minmax(0, 1.18fr);
  overflow: hidden;
  background: var(--discover-surface);
  color: var(--discover-text);
  box-shadow: var(--discover-shadow);
  text-align: left;
  cursor: pointer;
}

.discover-next-art {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.26), transparent 30%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color) 78%, #dfd1b7), color-mix(in srgb, var(--topic-color) 74%, #151718));
}

.discover-next-art > img,
.discover-next-art > span:not(i) {
  width: min(182px, 62%);
  aspect-ratio: 0.68;
  border-radius: 5px 10px 10px 5px;
  object-fit: cover;
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.28);
}

.discover-next-art > span:not(i) {
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: var(--reading-font);
  font-size: 5rem;
}

.discover-next-art > i {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(15, 17, 18, 0.24);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.discover-next-art > i svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.discover-next-copy {
  min-width: 0;
  padding: clamp(28px, 5vw, 52px);
  display: grid;
  align-content: center;
  gap: 12px;
}

.discover-next-path {
  color: color-mix(in srgb, var(--topic-color) 84%, var(--discover-text));
  font-family: var(--ui-font);
  font-size: 0.63rem;
  font-weight: 780;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.discover-next-copy > strong {
  max-width: 18ch;
  font-family: var(--reading-font);
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 510;
  letter-spacing: -0.045em;
  line-height: 1;
}

.discover-next-copy > small {
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.71rem;
  line-height: 1.4;
}

.discover-next-copy > span:last-child,
.discover-reason {
  display: grid;
  gap: 4px;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.8rem;
  line-height: 1.38;
}

.discover-next-copy > span:last-child b,
.discover-reason b {
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.57rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.discover-next-action {
  position: absolute;
  right: 24px;
  bottom: 22px;
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--discover-text);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 730;
}

.discover-next-action i,
.discover-card-arrow,
.discover-format-card > i,
.discover-family-card button i {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.discover-daily-card {
  min-height: 275px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 20%, var(--discover-line));
  border-radius: 26px;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  overflow: hidden;
  background: var(--discover-surface);
  box-shadow: 0 15px 38px rgba(47, 40, 31, 0.08);
}

.discover-daily-card button {
  min-width: 0;
  padding: 30px;
  border: 0;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  cursor: pointer;
}

.discover-daily-topic {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
  background:
    radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--topic-color) 17%, transparent), transparent 36%),
    color-mix(in srgb, var(--topic-color) 6%, var(--discover-surface)) !important;
}

.discover-daily-topic > span {
  width: 44px;
  height: 44px;
  margin-bottom: 3px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 12%, var(--discover-surface-soft));
  color: color-mix(in srgb, var(--topic-color) 88%, var(--discover-text));
}

.discover-daily-topic svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.discover-daily-topic small,
.discover-daily-read small {
  color: color-mix(in srgb, var(--topic-color) 82%, var(--discover-text));
  font-family: var(--ui-font);
  font-size: 0.59rem;
  font-weight: 780;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.discover-daily-topic strong {
  font-family: var(--reading-font);
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 520;
  letter-spacing: -0.04em;
}

.discover-daily-topic p {
  max-width: 35em;
  margin: 0;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.86rem;
  line-height: 1.42;
}

.discover-daily-read {
  border-left: 1px solid var(--discover-line) !important;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.discover-daily-read > span:first-child,
.discover-daily-read > span:first-child img {
  width: 92px;
  aspect-ratio: 0.7;
  border-radius: 4px 9px 9px 4px;
  object-fit: cover;
}

.discover-daily-read > span:first-child > span {
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--discover-surface-soft);
  color: var(--discover-coral-strong);
  font-family: var(--reading-font);
  font-size: 2.5rem;
}

.discover-daily-read > span:last-child {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.discover-daily-read strong {
  font-family: var(--reading-font);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 540;
  letter-spacing: -0.025em;
  line-height: 1.12;
}

.discover-daily-read em {
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 720;
}

.discover-recommendation-list {
  display: grid;
  gap: 10px;
}

.discover-recommendation-card {
  --item-accent: var(--discover-coral);
  min-height: 130px;
  padding: 14px 54px 14px 14px;
  border: 1px solid var(--discover-line);
  border-radius: 21px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  background: var(--discover-surface);
  color: var(--discover-text);
  box-shadow: 0 10px 27px rgba(47, 40, 31, 0.065);
  text-align: left;
  cursor: pointer;
}

.discover-recommendation-card.is-research {
  --item-accent: var(--discover-green);
}

.discover-recommendation-card.is-articles {
  --item-accent: var(--discover-amber);
}

.discover-recommendation-art,
.discover-recommendation-art img {
  width: 78px;
  height: 100px;
  border-radius: 4px 8px 8px 4px;
  object-fit: cover;
}

.discover-recommendation-art > span {
  height: 100%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--item-accent) 11%, var(--discover-surface-soft));
  color: var(--item-accent);
  font-family: var(--reading-font);
  font-size: 2rem;
}

.discover-recommendation-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.discover-recommendation-kicker {
  display: flex;
  gap: 7px;
  align-items: center;
  overflow: hidden;
  color: var(--item-accent);
  font-family: var(--ui-font);
  font-size: 0.57rem;
  font-weight: 760;
  letter-spacing: 0.09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.discover-recommendation-kicker i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.discover-recommendation-copy > strong {
  overflow: hidden;
  font-family: var(--reading-font);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.12;
  text-overflow: ellipsis;
}

.discover-recommendation-copy > small {
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.65rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-recommendation-card .discover-reason {
  margin-top: 3px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  font-size: 0.72rem;
}

.discover-recommendation-card .discover-card-arrow,
.discover-browse-card > .discover-card-arrow {
  position: absolute;
  right: 24px;
  color: var(--item-accent);
}

.discover-recommendation-card,
.discover-browse-card {
  position: relative;
}

.discover-format-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.discover-format-card {
  --format-accent: var(--discover-coral);
  position: relative;
  min-height: 225px;
  padding: 21px;
  border: 1px solid var(--discover-line);
  border-radius: 23px;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--format-accent) 13%, transparent), transparent 38%),
    var(--discover-surface);
  color: var(--discover-text);
  box-shadow: 0 11px 28px rgba(47, 40, 31, 0.065);
  text-align: left;
  cursor: pointer;
}

.discover-format-card.is-articles { --format-accent: var(--discover-amber); }
.discover-format-card.is-research { --format-accent: var(--discover-green); }

.discover-format-card > span {
  width: 50px;
  height: 50px;
  margin-bottom: 9px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--format-accent) 11%, var(--discover-surface-soft));
  color: var(--format-accent);
}

.discover-format-card svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.discover-format-card strong {
  font-family: var(--reading-font);
  font-size: 1.45rem;
  font-weight: 560;
  letter-spacing: -0.03em;
}

.discover-format-card small {
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.81rem;
  line-height: 1.38;
}

.discover-format-card em {
  margin-top: auto;
  padding-top: 9px;
  color: var(--format-accent);
  font-family: var(--ui-font);
  font-size: 0.59rem;
  font-style: normal;
  font-weight: 720;
  line-height: 1.35;
}

.discover-format-card > i {
  position: absolute;
  right: 22px;
  bottom: 23px;
  color: var(--format-accent);
}

.discover-topic-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.discover-topic-pill {
  min-width: 0;
  min-height: 84px;
  padding: 12px 42px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 17%, var(--discover-line));
  border-radius: 18px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: color-mix(in srgb, var(--topic-color) 4%, var(--discover-surface));
  color: var(--discover-text);
  text-align: left;
  cursor: pointer;
}

.discover-topic-pill > span:first-child {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 11%, var(--discover-surface-soft));
  color: color-mix(in srgb, var(--topic-color) 86%, var(--discover-text));
}

.discover-topic-pill svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}

.discover-topic-pill > span:nth-child(2) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.discover-topic-pill strong {
  overflow: hidden;
  font-family: var(--reading-font);
  font-size: 1rem;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-topic-pill small {
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.61rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-topic-pill > i {
  position: absolute;
  right: 20px;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid color-mix(in srgb, var(--topic-color) 82%, var(--discover-text));
  border-right: 1.5px solid color-mix(in srgb, var(--topic-color) 82%, var(--discover-text));
  transform: rotate(45deg);
}

.discover-topic-pill {
  position: relative;
}

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

.discover-family-card {
  --family-accent: var(--discover-coral);
  min-width: 0;
  min-height: 295px;
  padding: 24px;
  border: 1px solid var(--discover-line);
  border-radius: 24px;
  display: grid;
  align-content: start;
  gap: 9px;
  overflow: hidden;
  background:
    radial-gradient(circle at 95% -4%, color-mix(in srgb, var(--family-accent) 15%, transparent), transparent 41%),
    var(--discover-surface);
  box-shadow: 0 12px 30px rgba(47, 40, 31, 0.065);
}

.discover-family-card.is-family-2 { --family-accent: var(--discover-green); }
.discover-family-card.is-family-3 { --family-accent: var(--discover-amber); }
.discover-family-card.is-family-4 { --family-accent: #6c6687; }

.discover-family-number {
  color: var(--family-accent);
  font-family: var(--ui-font);
  font-size: 0.6rem;
  font-weight: 780;
  letter-spacing: 0.14em;
}

.discover-family-card h3 {
  margin: 0;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 540;
  letter-spacing: -0.035em;
}

.discover-family-card > p {
  margin: 0 0 8px;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.78rem;
  line-height: 1.4;
}

.discover-family-card > div {
  display: grid;
}

.discover-family-card button {
  min-height: 44px;
  padding: 0 19px 0 0;
  border: 0;
  border-top: 1px solid var(--discover-line);
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: var(--discover-text);
  font-family: var(--ui-font);
  font-size: 0.7rem;
  font-weight: 680;
  text-align: left;
  cursor: pointer;
}

.discover-family-card button i {
  color: var(--family-accent);
}

.discover-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.discover-directory-grid > button {
  min-width: 0;
  min-height: 92px;
  padding: 14px 14px 14px 18px;
  border: 1px solid var(--discover-line);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  gap: 3px 10px;
  align-content: center;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  cursor: pointer;
}

.discover-directory-grid > button > i {
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  grid-row: 1 / span 2;
  background: var(--topic-color);
}

.discover-directory-grid strong,
.discover-directory-grid span {
  overflow: hidden;
  font-family: var(--reading-font);
  font-size: 0.94rem;
  font-weight: 580;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-directory-grid small {
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.58rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-format-switch {
  width: min(470px, 100%);
  min-height: 50px;
  margin: -30px auto 0;
  padding: 4px;
  border: 1px solid var(--discover-line);
  border-radius: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--discover-surface);
}

.discover-format-switch button {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.7rem;
  font-weight: 710;
  cursor: pointer;
}

.discover-format-switch button.is-active {
  background: var(--discover-text);
  color: var(--discover-surface);
}

.discover-browse-grid {
  display: grid;
  gap: 10px;
}

.discover-browse-grid.is-books {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.discover-browse-card {
  --item-accent: var(--discover-green);
  min-width: 0;
  min-height: 138px;
  padding: 14px 54px 14px 14px;
  border: 1px solid var(--discover-line);
  border-radius: 20px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 17px;
  align-items: center;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  cursor: pointer;
}

.discover-browse-card.is-articles { --item-accent: var(--discover-amber); }
.discover-browse-card.is-books { --item-accent: var(--discover-coral); }

.discover-browse-grid.is-books .discover-browse-card {
  min-height: 318px;
  padding: 18px;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: center;
  gap: 14px;
  background:
    radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--item-accent) 10%, transparent), transparent 38%),
    var(--discover-surface);
  text-align: center;
}

.discover-browse-art,
.discover-browse-art img {
  width: 82px;
  height: 108px;
  border-radius: 4px 8px 8px 4px;
  object-fit: cover;
}

.discover-browse-grid.is-books .discover-browse-art,
.discover-browse-grid.is-books .discover-browse-art img {
  width: 118px;
  height: 168px;
}

.discover-browse-art > span {
  height: 100%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--item-accent) 10%, var(--discover-surface-soft));
  color: var(--item-accent);
  font-family: var(--reading-font);
  font-size: 2.2rem;
}

.discover-browse-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.discover-browse-copy > span {
  color: var(--item-accent);
  font-family: var(--ui-font);
  font-size: 0.57rem;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.discover-browse-copy strong {
  font-family: var(--reading-font);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.discover-browse-copy small {
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.62rem;
  line-height: 1.35;
}

.discover-browse-copy p {
  margin: 2px 0 0;
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.76rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-browse-card > .discover-card-arrow {
  color: var(--item-accent);
}

.discover-browse-grid.is-books .discover-card-arrow {
  right: 20px;
  bottom: 21px;
}

.discover-search-results {
  display: grid;
  gap: 46px;
}

.discover-search-results > header {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}

.discover-search-results > header h1 {
  max-width: 16ch;
  font-size: clamp(2.2rem, 6vw, 4rem);
}

.discover-empty-state {
  min-height: 130px;
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--discover-line);
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: center;
}

.discover-loading {
  min-height: 58vh;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
}

.discover-loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--discover-coral);
  animation: discover-loading-pulse 1s ease-in-out infinite alternate;
}

.discover-loading span:nth-child(2) { animation-delay: 180ms; }
.discover-loading span:nth-child(3) { animation-delay: 360ms; }

@keyframes discover-loading-pulse {
  to { opacity: 0.28; transform: translateY(-4px); }
}

.discover-preview-panel {
  position: fixed;
  inset: 0;
  z-index: 25;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  background: rgba(20, 20, 18, 0.36);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  contain: layout paint style;
  isolation: isolate;
}

.discover-preview-sheet {
  width: min(720px, 100%);
  max-height: min(880px, 100%);
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--discover-line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 0%, rgba(188, 75, 66, 0.07), transparent 29%),
    var(--discover-sheet);
  color: var(--discover-text);
  box-shadow: 0 32px 90px rgba(12, 12, 11, 0.27);
  outline: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  contain: layout paint style;
}

.discover-preview-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 76px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  background: linear-gradient(180deg, var(--discover-sheet) 82%, color-mix(in srgb, var(--discover-sheet) 94%, transparent));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.discover-preview-header > p {
  margin: 0;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.61rem;
  font-weight: 740;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

.discover-preview-content {
  padding: 4px clamp(22px, 5vw, 52px) 42px;
  display: grid;
  gap: 26px;
}

.discover-preview-hero {
  --preview-accent: var(--discover-coral);
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
}

.discover-preview-hero.is-articles { --preview-accent: var(--discover-amber); }
.discover-preview-hero.is-research { --preview-accent: var(--discover-green); }

.discover-preview-art,
.discover-preview-art img {
  width: 146px;
  height: 204px;
  border-radius: 6px 13px 13px 6px;
  object-fit: cover;
  box-shadow: 0 20px 42px color-mix(in srgb, var(--preview-accent) 18%, rgba(0, 0, 0, 0.15));
}

.discover-preview-art > span {
  height: 100%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--preview-accent) 12%, var(--discover-surface-soft));
  color: var(--preview-accent);
  font-family: var(--reading-font);
  font-size: 4rem;
}

.discover-preview-title {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.discover-preview-title p,
.discover-preview-title h2 {
  margin: 0;
}

.discover-preview-title p {
  color: var(--preview-accent);
  font-family: var(--ui-font);
  font-size: 0.61rem;
  font-weight: 780;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.discover-preview-title h2 {
  font-family: var(--reading-font);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.047em;
  line-height: 0.98;
}

.discover-preview-title > span {
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  line-height: 1.42;
}

.discover-preview-summary {
  padding-top: 22px;
  border-top: 1px solid var(--discover-line);
  display: grid;
  gap: 22px;
}

.discover-preview-summary > p {
  margin: 0;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: 1rem;
  line-height: 1.55;
}

.discover-preview-summary dl {
  margin: 0;
  display: grid;
}

.discover-preview-summary dl > div {
  min-height: 57px;
  padding: 11px 0;
  border-top: 1px solid var(--discover-line);
  display: grid;
  grid-template-columns: 94px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}

.discover-preview-summary dt {
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.58rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.discover-preview-summary dd {
  margin: 0;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.82rem;
  line-height: 1.42;
}

.discover-preview-topic {
  min-height: 60px;
  padding: 10px 16px;
  border: 1px solid var(--discover-line);
  border-radius: 15px;
  display: grid;
  gap: 2px;
  background: var(--discover-surface-soft);
  color: var(--discover-text);
  text-align: left;
  opacity: 1;
}

.discover-preview-topic span {
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.56rem;
  font-weight: 720;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.discover-preview-topic strong {
  font-family: var(--reading-font);
  font-size: 1rem;
  font-weight: 570;
}

.discover-preview-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.discover-preview-actions button {
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--discover-line);
  border-radius: 15px;
  background: var(--discover-surface);
  color: var(--discover-text);
  font-family: var(--ui-font);
  font-size: 0.71rem;
  font-weight: 720;
  cursor: pointer;
}

.discover-preview-actions button.is-primary {
  border-color: var(--discover-coral-strong);
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  background: var(--discover-coral-strong);
  color: #fffaf2;
}

.discover-preview-actions button.is-primary i {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.discover-preview-actions button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.discover-preview-actions button.is-primary.is-loading i {
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, currentColor 34%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: discover-gutenberg-download-spin 0.75s linear infinite;
}

.discover-preview-download-error {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--discover-coral-strong) 36%, var(--discover-line));
  border-radius: 14px;
  display: grid;
  gap: 3px;
  background: color-mix(in srgb, var(--discover-coral-strong) 8%, var(--discover-surface));
  color: var(--discover-muted);
  font: 580 0.64rem/1.4 var(--ui-font);
}

.discover-preview-download-error strong {
  color: var(--discover-coral-strong);
  font-size: 0.66rem;
  font-weight: 760;
}

.discover-preview-note {
  margin: -6px auto 0;
  max-width: 42em;
  color: var(--discover-soft);
  font-family: var(--ui-font);
  font-size: 0.58rem;
  line-height: 1.5;
  text-align: center;
}

.discover-preview-feedback {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--discover-line);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--discover-surface-soft) 76%, transparent);
  color: var(--discover-muted);
  font: 590 0.61rem/1.35 var(--ui-font);
}

.discover-preview-feedback button,
.discover-preview-feedback button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  outline-offset: 2px;
  background: transparent;
  color: var(--discover-coral-strong);
  box-shadow: none;
  filter: none;
  transform: none;
  font: 720 0.6rem/1 var(--ui-font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.discover-preview-hero.is-editorial {
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: start;
}

.discover-preview-book-hero {
  --book-preview-accent: var(--discover-coral-strong);
  overflow: hidden;
  border: 1px solid var(--discover-line);
  border-radius: 28px;
  display: grid;
  grid-template-columns: minmax(250px, 0.88fr) minmax(0, 1.12fr);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--book-preview-accent) 4%, var(--discover-surface)), var(--discover-surface));
  box-shadow: 0 24px 60px color-mix(in srgb, var(--discover-text) 8%, transparent);
}

.discover-preview-book-stage {
  position: relative;
  min-height: 340px;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 42% 34%, color-mix(in srgb, var(--book-preview-accent) 22%, transparent), transparent 39%),
    linear-gradient(155deg, color-mix(in srgb, var(--book-preview-accent) 12%, var(--discover-surface-soft)), var(--discover-surface-soft));
}

.discover-preview-book-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.22;
  background-image:
    linear-gradient(color-mix(in srgb, var(--book-preview-accent) 26%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--book-preview-accent) 26%, transparent) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(145deg, #000, transparent 76%);
  mask-image: linear-gradient(145deg, #000, transparent 76%);
}

.discover-preview-book-orbit {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--book-preview-accent) 25%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

.discover-preview-book-orbit.is-one {
  width: 280px;
  height: 280px;
  transform: translate(-26%, -15%);
}

.discover-preview-book-orbit.is-two {
  right: -58px;
  bottom: -76px;
  width: 190px;
  height: 190px;
}

.discover-preview-book-cover {
  position: relative;
  z-index: 1;
  width: 158px;
  height: 236px;
  border-radius: 4px 11px 11px 4px;
  transform: rotate(-1.2deg);
  background: var(--discover-sheet);
  box-shadow:
    -8px 14px 25px rgba(20, 18, 15, 0.17),
    13px 27px 42px rgba(20, 18, 15, 0.24);
}

.discover-preview-book-cover::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, rgba(15, 14, 13, 0.22), rgba(255, 255, 255, 0.1), transparent);
  pointer-events: none;
}

.discover-preview-book-cover img,
.discover-preview-book-cover-fallback {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.discover-preview-book-cover img {
  display: block;
  object-fit: cover;
}

.discover-preview-book-cover-fallback {
  padding: 20px 17px 16px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 10px;
  background:
    radial-gradient(circle at 80% 12%, color-mix(in srgb, var(--book-preview-accent) 18%, transparent), transparent 30%),
    linear-gradient(160deg, color-mix(in srgb, var(--book-preview-accent) 8%, #f3eee4), #e7ded0);
  color: #28231e;
}

.discover-preview-book-cover-fallback small {
  font-family: var(--ui-font);
  font-size: 0.45rem;
  font-weight: 780;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.discover-preview-book-cover-fallback strong {
  align-self: center;
  overflow-wrap: anywhere;
  font-family: var(--reading-font);
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 570;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.discover-preview-book-cover-fallback em {
  font-family: var(--reading-font);
  font-size: 0.62rem;
  font-style: normal;
  line-height: 1.2;
}

.discover-preview-book-cover-fallback i {
  width: 32px;
  height: 2px;
  background: var(--book-preview-accent);
}

.discover-preview-book-source {
  position: absolute;
  right: 14px;
  bottom: 14px;
  max-width: calc(100% - 28px);
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--discover-line) 72%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--discover-surface) 78%, transparent);
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.49rem;
  font-weight: 730;
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.discover-preview-book-copy {
  min-width: 0;
  padding: 34px 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.discover-preview-book-copy > p {
  margin: 0 0 13px;
  color: var(--book-preview-accent);
  font-family: var(--ui-font);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.discover-preview-book-copy h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-family: var(--reading-font);
  font-size: clamp(2rem, 5.1vw, 3.25rem);
  font-weight: 520;
  letter-spacing: -0.052em;
  line-height: 0.94;
}

.discover-preview-book-author {
  margin-top: 14px;
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.82rem;
  line-height: 1.25;
}

.discover-preview-book-facts {
  margin-top: 26px;
  border-top: 1px solid var(--discover-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.discover-preview-book-facts > span {
  min-width: 0;
  padding: 12px 10px 0 0;
  display: grid;
  gap: 4px;
}

.discover-preview-book-facts small {
  color: var(--discover-soft);
  font-family: var(--ui-font);
  font-size: 0.48rem;
  font-weight: 720;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.discover-preview-book-facts strong {
  overflow-wrap: anywhere;
  color: var(--discover-text);
  font-family: var(--ui-font);
  font-size: 0.63rem;
  font-weight: 680;
  line-height: 1.3;
}

.discover-preview-book-overview {
  padding: 4px 2px 2px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 9px 22px;
}

.discover-preview-book-overview > p {
  margin: 4px 0 0;
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.55rem;
  font-weight: 790;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.discover-preview-book-overview > div {
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: 1rem;
  line-height: 1.52;
}

.discover-preview-book-overview > span {
  grid-column: 2;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.58rem;
  line-height: 1.4;
}

.discover-preview-book-topics {
  padding: 2px 0 4px;
  border-top: 1px solid var(--discover-line);
  display: grid;
  gap: 12px;
}

.discover-preview-book-topics > header {
  padding-top: 15px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.discover-preview-book-topics > header p,
.discover-preview-book-topics > header span {
  margin: 0;
  font-family: var(--ui-font);
}

.discover-preview-book-topics > header p {
  color: var(--discover-coral-strong);
  font-size: 0.55rem;
  font-weight: 790;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.discover-preview-book-topics > header span {
  color: var(--discover-soft);
  font-size: 0.56rem;
  font-weight: 680;
}

.discover-preview-book-topics > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.discover-preview-book-topics button {
  --book-topic-color: var(--discover-coral-strong);
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--book-topic-color) 24%, var(--discover-line));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--book-topic-color) 5%, var(--discover-surface));
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: 0.72rem;
  font-weight: 550;
  opacity: 1;
}

.discover-preview-book-topics button i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--book-topic-color);
}

.discover-preview-book-genres {
  display: grid;
  gap: 10px;
}

.discover-preview-book-genres > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.discover-preview-book-genres > header p,
.discover-preview-book-genres > header span {
  margin: 0;
  font-family: var(--ui-font);
}

.discover-preview-book-genres > header p {
  color: var(--discover-coral-strong);
  font-size: 0.55rem;
  font-weight: 790;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.discover-preview-book-genres > header span {
  color: var(--discover-soft);
  font-size: 0.56rem;
  font-weight: 680;
}

.discover-preview-book-genres > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.discover-preview-book-genres > div span {
  padding: 6px 9px;
  border: 1px solid var(--discover-line);
  border-radius: 8px;
  background: var(--discover-surface-soft);
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.58rem;
  font-weight: 650;
  line-height: 1.2;
}

@media (max-width: 620px) {
  .discover-preview-book-hero {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  .discover-preview-book-stage {
    min-height: 218px;
  }

  .discover-preview-book-cover {
    width: 116px;
    height: 174px;
  }

  .discover-preview-book-orbit.is-one {
    width: 230px;
    height: 230px;
    transform: translate(-38%, -31%);
  }

  .discover-preview-book-copy {
    padding: 24px 22px 21px;
  }

  .discover-preview-book-copy > p {
    margin-bottom: 10px;
  }

  .discover-preview-book-copy h2 {
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .discover-preview-book-author {
    margin-top: 10px;
  }

  .discover-preview-book-facts {
    margin-top: 19px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .discover-preview-book-overview {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .discover-preview-book-overview > p,
  .discover-preview-book-overview > span {
    grid-column: 1;
  }

  .discover-preview-book-overview > span {
    margin-top: 3px;
  }
}

.discover-preview-mark {
  width: 112px;
  min-height: 112px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--preview-accent) 30%, var(--discover-line));
  border-radius: 24px;
  display: grid;
  align-content: space-between;
  gap: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--preview-accent) 11%, var(--discover-surface-soft)), var(--discover-surface));
  color: var(--preview-accent);
}

.discover-preview-mark svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.discover-preview-mark span {
  overflow-wrap: anywhere;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.56rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.discover-preview-summary h3 {
  margin: 0 0 -12px;
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.59rem;
  font-weight: 790;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.discover-preview-access-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.discover-preview-access-badges .research-access-badge {
  padding: 4px 7px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  background: var(--discover-surface-soft);
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.56rem;
  line-height: 1;
}

.discover-preview-source-details {
  border-top: 1px solid var(--discover-line);
  border-bottom: 1px solid var(--discover-line);
  color: var(--discover-muted);
  font-family: var(--ui-font);
}

.discover-preview-source-details summary {
  padding: 15px 2px;
  color: var(--discover-text);
  font-size: 0.67rem;
  font-weight: 720;
  cursor: pointer;
}

.discover-preview-source-details p {
  margin: -3px 0 12px;
  font-family: var(--reading-font);
  font-size: 0.76rem;
  line-height: 1.45;
}

.discover-preview-source-details button {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.64rem;
  font-weight: 740;
}

.discover-preview-actions {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  margin: 0 -10px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--discover-line) 78%, transparent);
  border-radius: 19px;
  background: color-mix(in srgb, var(--discover-sheet) 92%, transparent);
  box-shadow: 0 -14px 28px color-mix(in srgb, var(--discover-sheet) 78%, transparent);
  -webkit-backdrop-filter: blur(17px);
  backdrop-filter: blur(17px);
}

html.theme-dark .discover-panel,
body.theme-dark .discover-panel {
  --discover-page: #0c0d0e;
  --discover-sheet: #111315;
  --discover-surface: #17191b;
  --discover-surface-soft: #1e2124;
  --discover-text: #f2f1ec;
  --discover-muted: #aaa9a3;
  --discover-soft: #7e807e;
  --discover-line: rgba(238, 238, 230, 0.105);
  --discover-coral: #db675c;
  --discover-coral-strong: #ef796d;
  --discover-amber: #d69a55;
  --discover-green: #73a99f;
  --discover-shadow: 0 21px 56px rgba(0, 0, 0, 0.31);
  background:
    radial-gradient(circle at 82% -9%, rgba(219, 103, 92, 0.09), transparent 29%),
    var(--discover-page);
}

html.theme-dark .discover-sheet,
body.theme-dark .discover-sheet {
  background:
    linear-gradient(180deg, rgba(18, 20, 22, 0.92), rgba(13, 14, 15, 0.97) 340px, var(--discover-page) 900px),
    var(--discover-page);
}

html.theme-dark .discover-header,
body.theme-dark .discover-header {
  background: linear-gradient(180deg, rgba(17, 19, 21, 0.96) 58%, transparent);
}

html.theme-dark .discover-panel .discover-close,
html.theme-dark .discover-search-toggle,
html.theme-dark .discover-preview-back,
html.theme-dark .discover-preview-save,
body.theme-dark .discover-panel .discover-close,
body.theme-dark .discover-search-toggle,
body.theme-dark .discover-preview-back,
body.theme-dark .discover-preview-save {
  border-color: var(--discover-line);
  background: rgba(25, 27, 29, 0.92);
  color: var(--discover-text);
  box-shadow: 0 8px 23px rgba(0, 0, 0, 0.25);
}

html.theme-dark .discover-search-toggle.is-active,
html.theme-dark .discover-preview-save.is-saved,
body.theme-dark .discover-search-toggle.is-active,
body.theme-dark .discover-preview-save.is-saved {
  background: color-mix(in srgb, var(--discover-coral) 12%, var(--discover-surface));
  color: var(--discover-coral-strong);
}

html.theme-dark .discover-tabs button.is-active,
html.theme-dark .discover-format-switch button.is-active,
body.theme-dark .discover-tabs button.is-active,
body.theme-dark .discover-format-switch button.is-active {
  background: #eeede8;
  color: #161719;
}

html.theme-dark .discover-preview-panel,
body.theme-dark .discover-preview-panel {
  background: rgba(0, 0, 0, 0.57);
}

html.theme-dark .discover-preview-sheet,
body.theme-dark .discover-preview-sheet {
  background:
    radial-gradient(circle at 88% 0%, rgba(219, 103, 92, 0.08), transparent 29%),
    var(--discover-sheet);
  box-shadow: 0 34px 95px rgba(0, 0, 0, 0.58);
}

html.theme-dark .discover-preview-header,
body.theme-dark .discover-preview-header {
  background: linear-gradient(180deg, rgba(17, 19, 21, 0.97) 78%, transparent);
}

@media (max-width: 760px) {
  .discover-header {
    min-height: 78px;
    padding:
      max(12px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      8px
      max(16px, env(safe-area-inset-left));
  }

  .discover-header-copy p {
    display: none;
  }

  .discover-tabs {
    top: 72px;
    width: calc(100% - 28px);
    margin-bottom: 18px;
  }

  .discover-search-bar {
    width: calc(100% - 28px);
    margin-bottom: 10px;
  }

  .discover-content {
    padding-right: max(14px, env(safe-area-inset-right));
    padding-left: max(14px, env(safe-area-inset-left));
    gap: 52px;
  }

  .discover-intro {
    margin-top: 17px;
  }

  .discover-intro h1,
  .discover-view-intro h1 {
    font-size: clamp(2.45rem, 12vw, 3.65rem);
  }

  .discover-intro > span,
  .discover-view-intro > span {
    max-width: 32em;
    font-size: 0.86rem;
  }

  .discover-next-card {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 24px;
  }

  .discover-next-art {
    min-height: 235px;
  }

  .discover-next-art > img,
  .discover-next-art > span:not(i) {
    width: 118px;
  }

  .discover-next-copy {
    padding: 24px 22px 58px;
  }

  .discover-next-copy > strong {
    font-size: clamp(1.75rem, 8vw, 2.35rem);
  }

  .discover-daily-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .discover-daily-card button {
    padding: 22px;
  }

  .discover-daily-read {
    border-top: 1px solid var(--discover-line) !important;
    border-left: 0 !important;
  }

  .discover-format-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .discover-format-card {
    min-height: 0;
    padding: 16px 46px 16px 16px;
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 2px 13px;
    align-items: center;
    border-radius: 18px;
  }

  .discover-format-card > span {
    width: 48px;
    height: 48px;
    margin: 0;
    grid-row: 1 / span 3;
  }

  .discover-format-card strong,
  .discover-format-card small,
  .discover-format-card em {
    grid-column: 2;
  }

  .discover-format-card strong {
    font-size: 1.12rem;
  }

  .discover-format-card small {
    font-family: var(--ui-font);
    font-size: 0.67rem;
  }

  .discover-format-card em {
    margin: 2px 0 0;
    padding: 0;
    font-size: 0.55rem;
  }

  .discover-format-card > i {
    right: 20px;
    bottom: auto;
  }

  .discover-topic-rail,
  .discover-family-grid,
  .discover-directory-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .discover-family-card {
    min-height: 0;
  }

  .discover-directory-grid > button {
    min-height: 76px;
  }

  .discover-browse-grid.is-books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-browse-grid.is-books .discover-browse-card {
    min-height: 286px;
    padding: 15px;
  }

  .discover-browse-grid.is-books .discover-browse-art,
  .discover-browse-grid.is-books .discover-browse-art img {
    width: 102px;
    height: 146px;
  }

  .discover-preview-panel {
    padding: 0;
    place-items: stretch;
  }

  .discover-preview-sheet {
    width: 100%;
    max-height: 100%;
    border: 0;
    border-radius: 0;
  }

  .discover-preview-header {
    min-height: 72px;
    padding:
      max(12px, env(safe-area-inset-top))
      max(15px, env(safe-area-inset-right))
      8px
      max(15px, env(safe-area-inset-left));
  }

  .discover-preview-content {
    padding: 13px 20px max(40px, calc(env(safe-area-inset-bottom) + 26px));
  }
}

@media (max-width: 470px) {
  .discover-panel .discover-close,
  .discover-search-toggle,
  .discover-preview-back,
  .discover-preview-save {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }

  .discover-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .discover-tabs {
    min-height: 52px;
  }

  .discover-tabs button {
    min-height: 44px;
  }

  .discover-editorial-heading {
    align-items: start;
  }

  .discover-editorial-heading > span {
    max-width: 38%;
    padding-top: 4px;
    font-size: 0.59rem;
  }

  .discover-next-art {
    min-height: 210px;
  }

  .discover-next-art > i {
    right: 15px;
    bottom: 15px;
    width: 44px;
    height: 44px;
  }

  .discover-daily-read {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 15px;
  }

  .discover-daily-read > span:first-child,
  .discover-daily-read > span:first-child img {
    width: 72px;
  }

  .discover-recommendation-card {
    min-height: 116px;
    padding: 12px 38px 12px 12px;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 13px;
    border-radius: 18px;
  }

  .discover-recommendation-art,
  .discover-recommendation-art img {
    width: 62px;
    height: 88px;
  }

  .discover-recommendation-card .discover-reason {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.67rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .discover-recommendation-card .discover-reason b {
    margin-right: 6px;
  }

  .discover-recommendation-card .discover-card-arrow,
  .discover-browse-card > .discover-card-arrow {
    right: 17px;
  }

  .discover-topic-pill {
    min-height: 78px;
  }

  .discover-format-switch {
    margin-top: -22px;
  }

  .discover-browse-card:not(.is-books) {
    min-height: 120px;
    padding: 12px 38px 12px 12px;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 13px;
  }

  .discover-browse-card:not(.is-books) .discover-browse-art,
  .discover-browse-card:not(.is-books) .discover-browse-art img {
    width: 64px;
    height: 92px;
  }

  .discover-browse-grid.is-books .discover-browse-card {
    min-height: 265px;
  }

  .discover-browse-grid.is-books .discover-browse-art,
  .discover-browse-grid.is-books .discover-browse-art img {
    width: 88px;
    height: 127px;
  }

  .discover-preview-hero {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 18px;
  }

  .discover-preview-art,
  .discover-preview-art img {
    width: 92px;
    height: 134px;
  }

  .discover-preview-hero.is-editorial {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 15px;
  }

  .discover-preview-mark {
    width: 82px;
    min-height: 96px;
    padding: 13px;
    border-radius: 19px;
  }

  .discover-preview-mark svg {
    width: 28px;
    height: 28px;
  }

  .discover-preview-title h2 {
    font-size: clamp(1.65rem, 8vw, 2.3rem);
  }

  .discover-preview-summary dl > div {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }

  .discover-preview-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-loading span {
    animation: none;
  }
}

/* Context focus handoff: candlelight radiates from the selected word across its sentence. */
@property --context-glow-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --context-glow-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --context-glow-ambient-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --context-glow-bridge-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.context-line,
.context-sentence-card {
  --context-glow-x: 50%;
  --context-glow-y: 50%;
  --context-glow-ambient-x: 50%;
  --context-glow-bridge-x: 50%;
}

.word-display.has-context.is-context-selection-updating .context-line,
.word-display.has-context.is-context-selection-updating .context-sentence-card {
  transition:
    background-color 135ms ease,
    box-shadow 135ms ease,
    opacity 140ms cubic-bezier(0.2, 0.74, 0.22, 1),
    transform 165ms cubic-bezier(0.16, 1, 0.3, 1),
    --context-glow-x 175ms cubic-bezier(0.2, 0.78, 0.24, 1),
    --context-glow-ambient-x 175ms cubic-bezier(0.2, 0.78, 0.24, 1),
    --context-glow-bridge-x 175ms cubic-bezier(0.2, 0.78, 0.24, 1),
    --context-glow-y 175ms cubic-bezier(0.2, 0.78, 0.24, 1) !important;
}

.word-display.has-context.has-context-sentence-scroll.is-context-sentence-switching .context-sentence-card {
  transition:
    background-color 135ms ease,
    box-shadow 135ms ease,
    opacity 140ms cubic-bezier(0.2, 0.74, 0.22, 1),
    --context-glow-x 175ms cubic-bezier(0.2, 0.78, 0.24, 1),
    --context-glow-ambient-x 175ms cubic-bezier(0.2, 0.78, 0.24, 1),
    --context-glow-bridge-x 175ms cubic-bezier(0.2, 0.78, 0.24, 1),
    --context-glow-y 175ms cubic-bezier(0.2, 0.78, 0.24, 1) !important;
}

.word-display.has-context.is-context-highlight-gliding .context-token.is-current {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  text-shadow: none !important;
}

.word-display.has-context.is-context-highlight-gliding .context-token.is-current::before {
  opacity: 0 !important;
}

.word-display.has-context.is-context-highlight-gliding .context-token.is-current .context-token-pivot {
  color: inherit !important;
  text-shadow: none !important;
}

.reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
.reader-panel:has(.word-display.has-context) .context-line.is-current-line::after {
  top: -3.15em !important;
  bottom: -2.85em !important;
  left: calc(-1 * var(--context-scroll-side-pad, 38px) - 22vw) !important;
  right: calc(-1 * var(--context-scroll-side-pad, 38px) - 22vw) !important;
  border-radius: 46% 54% 49% 51% / 55% 43% 57% 45% !important;
  transform-origin: 47% 52% !important;
  will-change: opacity, translate, scale !important;
  animation: context-candle-breathe 5.4s cubic-bezier(0.42, 0, 0.34, 1) infinite alternate !important;
  background:
    radial-gradient(ellipse 42% 52% at var(--context-glow-bridge-x) var(--context-glow-y),
      rgba(237, 166, 82, 0.046) 0%,
      rgba(218, 126, 65, 0.024) 54%,
      rgba(206, 102, 78, 0.000) 100%),
    radial-gradient(ellipse 58% 64% at var(--context-glow-ambient-x) 58%,
      rgba(214, 105, 65, 0.034) 0%,
      rgba(178, 75, 58, 0.018) 62%,
      rgba(206, 102, 78, 0.000) 100%),
    radial-gradient(ellipse 68% 58% at 34% 43%,
      rgba(172, 84, 62, 0.044) 0%,
      rgba(151, 67, 55, 0.026) 58%,
      rgba(128, 58, 49, 0.000) 100%),
    radial-gradient(ellipse 61% 69% at 69% 62%,
      rgba(186, 108, 58, 0.034) 0%,
      rgba(135, 70, 48, 0.018) 64%,
      rgba(112, 58, 44, 0.000) 100%),
    radial-gradient(ellipse 88% 76% at 47% 51%,
      rgba(128, 68, 53, 0.034) 0%,
      rgba(111, 57, 48, 0.026) 54%,
      rgba(92, 48, 43, 0.012) 76%,
      rgba(82, 44, 41, 0.000) 100%) !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html.theme-dark .reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
body.theme-dark .reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
html.theme-dark .reader-panel:has(.word-display.has-context) .context-line.is-current-line::after,
body.theme-dark .reader-panel:has(.word-display.has-context) .context-line.is-current-line::after {
  background:
    radial-gradient(ellipse 42% 52% at var(--context-glow-bridge-x) var(--context-glow-y),
      rgba(255, 196, 91, 0.072) 0%,
      rgba(230, 142, 54, 0.038) 54%,
      rgba(118, 66, 26, 0.000) 100%),
    radial-gradient(ellipse 58% 64% at var(--context-glow-ambient-x) 58%,
      rgba(222, 112, 50, 0.050) 0%,
      rgba(178, 72, 43, 0.026) 62%,
      rgba(118, 66, 26, 0.000) 100%),
    radial-gradient(ellipse 68% 58% at 34% 43%,
      rgba(188, 82, 54, 0.060) 0%,
      rgba(151, 62, 48, 0.034) 58%,
      rgba(112, 49, 43, 0.000) 100%),
    radial-gradient(ellipse 61% 69% at 69% 62%,
      rgba(192, 103, 48, 0.048) 0%,
      rgba(139, 67, 42, 0.026) 64%,
      rgba(105, 51, 39, 0.000) 100%),
    radial-gradient(ellipse 88% 76% at 47% 51%,
      rgba(138, 66, 48, 0.050) 0%,
      rgba(116, 53, 44, 0.038) 54%,
      rgba(94, 45, 41, 0.018) 76%,
      rgba(76, 39, 38, 0.000) 100%) !important;
}

@keyframes context-candle-breathe {
  0% {
    opacity: 0.88;
    translate: -1.4% 0.7%;
    scale: 1.012 0.992;
  }
  23% {
    opacity: 0.98;
    translate: 0.7% -0.9%;
    scale: 1.022 1.008;
  }
  48% {
    opacity: 0.91;
    translate: 1.5% 0.45%;
    scale: 0.992 1.018;
  }
  73% {
    opacity: 1;
    translate: -0.45% 1.05%;
    scale: 1.016 0.997;
  }
  100% {
    opacity: 0.93;
    translate: -0.9% -0.55%;
    scale: 1.002 1.014;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
  .reader-panel:has(.word-display.has-context) .context-line.is-current-line::after {
    animation: none !important;
  }
}

/* Sentence focus aperture: line-following lift with motion only on handoff. */
.reader-panel:has(.word-display.has-context) .context-sentence-card.is-current-sentence-card::after,
.reader-panel:has(.word-display.has-context) .context-line.is-current-line::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.context-sentence-card.is-current-sentence-card {
  --context-sentence-scale: 1.018;
}

.context-token.is-current-sentence:not(.is-current)::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -0.08em -0.34em -0.12em;
  border-radius: 54% 46% 52% 48% / 48% 55% 45% 52%;
  background:
    radial-gradient(ellipse 86% 74% at 47% 52%,
      rgba(196, 100, 78, 0.050) 0%,
      rgba(190, 92, 72, 0.026) 58%,
      rgba(176, 82, 66, 0.000) 100%);
  box-shadow:
    -0.16em 0.02em 0.58em rgba(205, 119, 88, 0.020),
    0.18em 0.04em 0.72em rgba(161, 77, 66, 0.018);
  filter: blur(0.24em);
  transform-origin: 48% 54%;
  animation: context-aperture-handoff 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.theme-dark .context-token.is-current-sentence:not(.is-current)::before,
body.theme-dark .context-token.is-current-sentence:not(.is-current)::before {
  background:
    radial-gradient(ellipse 86% 74% at 47% 52%,
      rgba(191, 88, 59, 0.062) 0%,
      rgba(164, 70, 53, 0.034) 58%,
      rgba(126, 56, 48, 0.000) 100%);
  box-shadow:
    -0.16em 0.02em 0.62em rgba(218, 112, 67, 0.026),
    0.18em 0.04em 0.76em rgba(135, 61, 49, 0.024);
}

@keyframes context-aperture-handoff {
  from {
    opacity: 0;
    scale: 0.94 0.9;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .context-token.is-current-sentence:not(.is-current)::before {
    animation: none;
  }
}

html.theme-dark .word-display.has-context:not(.is-context-highlight-gliding) .context-token.is-current,
body.theme-dark .word-display.has-context:not(.is-context-highlight-gliding) .context-token.is-current,
html.theme-dark .context-selection-glider,
body.theme-dark .context-selection-glider {
  box-shadow:
    inset 0 0 0 1px rgba(246, 191, 92, 0.44),
    inset 0 1px 2px rgba(255, 232, 166, 0.14),
    0 0 24px rgba(255, 190, 74, 0.14),
    -3px -5px 14px rgba(255, 205, 94, 0.18),
    5px 2px 23px rgba(245, 157, 54, 0.16),
    -7px 8px 32px rgba(190, 86, 28, 0.09),
    5px 12px 40px rgba(118, 61, 24, 0.065),
    0 7px 18px rgba(0, 0, 0, 0.21) !important;
}

/* Play always keeps the coral keyline, including hover, pause, and tactile states. */
body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button {
  border: 1px solid color-mix(in srgb, var(--rhythm-coral) 52%, transparent) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button {
  border-color: color-mix(in srgb, var(--rhythm-coral-strong) 62%, transparent) !important;
}

/* Discover density refinement: preserve hierarchy while showing more choices per screen. */
.discover-header {
  min-height: 72px;
  padding:
    max(10px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    6px
    max(24px, env(safe-area-inset-left));
}

.discover-header-copy h2 {
  font-size: clamp(1.45rem, 2.6vw, 1.72rem);
}

.discover-header-copy p {
  font-size: 0.56rem;
}

.discover-tabs {
  top: 67px;
  margin-bottom: 12px;
}

.discover-content {
  padding-top: 0;
  padding-bottom: max(56px, calc(env(safe-area-inset-bottom) + 36px));
  gap: clamp(34px, 5vw, 50px);
}

.discover-intro,
.discover-view-intro {
  margin-top: clamp(4px, 2vw, 18px);
  gap: 8px;
}

.discover-intro h1,
.discover-search-results > header h1 {
  font-size: clamp(2.35rem, 6vw, 4.15rem);
  line-height: 0.94;
}

.discover-view-intro h1 {
  font-size: clamp(2.2rem, 5.4vw, 3.75rem);
}

.discover-view-intro.is-browse h1 {
  font-size: clamp(2.6rem, 6.8vw, 4.35rem);
}

.discover-intro > span,
.discover-view-intro > span,
.discover-search-results > header > span {
  font-size: clamp(0.8rem, 1.7vw, 0.92rem);
  line-height: 1.36;
}

.discover-next-section,
.discover-daily-section,
.discover-recommendations-section,
.discover-format-section,
.discover-followed-section,
.discover-personal-topics,
.discover-topic-families,
.discover-directory,
.discover-browse-section,
.discover-search-results > section {
  gap: 12px;
}

.discover-editorial-heading > div {
  gap: 2px;
}

.discover-editorial-heading h3 {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.discover-next-card {
  min-height: 292px;
  grid-template-columns: minmax(230px, 0.76fr) minmax(0, 1.24fr);
  border-radius: 25px;
}

.discover-next-art {
  min-height: 292px;
}

.discover-next-art > img,
.discover-next-art > span:not(i) {
  width: min(150px, 60%);
}

.discover-next-art > i {
  right: 16px;
  bottom: 16px;
  width: 46px;
  height: 46px;
}

.discover-next-copy {
  padding: clamp(24px, 4vw, 38px);
  gap: 9px;
}

.discover-next-copy > strong {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
}

.discover-next-action {
  right: 20px;
  bottom: 17px;
}

.discover-daily-card {
  min-height: 230px;
  border-radius: 22px;
}

.discover-daily-card button {
  padding: 22px;
}

.discover-daily-topic {
  gap: 5px;
}

.discover-daily-topic > span {
  width: 40px;
  height: 40px;
  margin-bottom: 1px;
}

.discover-daily-topic strong {
  font-size: clamp(1.55rem, 3.4vw, 2.15rem);
}

.discover-daily-read {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 16px;
}

.discover-daily-read > span:first-child,
.discover-daily-read > span:first-child img {
  width: 76px;
}

.discover-daily-read > span:last-child {
  gap: 5px;
}

.discover-recommendation-list,
.discover-browse-grid,
.discover-topic-rail {
  gap: 8px;
}

.discover-recommendation-card {
  min-height: 112px;
  padding: 10px 48px 10px 10px;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  border-radius: 18px;
}

.discover-recommendation-art,
.discover-recommendation-art img {
  width: 64px;
  height: 88px;
}

.discover-recommendation-copy {
  gap: 3px;
}

.discover-recommendation-card .discover-reason {
  margin-top: 1px;
  font-size: 0.68rem;
}

.discover-format-grid {
  gap: 9px;
}

.discover-format-card {
  min-height: 185px;
  padding: 17px;
  gap: 6px;
  border-radius: 20px;
}

.discover-format-card > span {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 14px;
}

.discover-format-card strong {
  font-size: 1.28rem;
}

.discover-format-card small {
  font-size: 0.75rem;
  line-height: 1.3;
}

.discover-format-card em {
  padding-top: 4px;
}

.discover-topic-pill {
  min-height: 72px;
  padding: 8px 38px 8px 8px;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px;
  border-radius: 16px;
}

.discover-topic-pill > span:first-child {
  width: 40px;
  height: 40px;
}

.discover-family-grid {
  gap: 9px;
}

.discover-family-card {
  min-height: 0;
  padding: 18px;
  gap: 5px;
  border-radius: 20px;
}

.discover-family-card h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.72rem);
}

.discover-family-card > p {
  margin-bottom: 4px;
  font-size: 0.72rem;
}

.discover-family-card > div {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
}

.discover-family-card button {
  padding-right: 12px;
  font-size: 0.66rem;
}

.discover-directory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.discover-directory-grid > button {
  min-height: 72px;
  padding: 10px 11px 10px 14px;
  border-radius: 14px;
}

.discover-format-switch {
  margin-top: -18px;
}

.discover-browse-grid.is-books {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.discover-browse-card {
  min-height: 118px;
  padding: 10px 48px 10px 10px;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 14px;
  border-radius: 17px;
}

.discover-browse-art,
.discover-browse-art img {
  width: 70px;
  height: 94px;
}

.discover-browse-grid.is-books .discover-browse-card {
  min-height: 264px;
  padding: 14px;
  gap: 10px;
}

.discover-browse-grid.is-books .discover-browse-art,
.discover-browse-grid.is-books .discover-browse-art img {
  width: 96px;
  height: 138px;
}

.discover-browse-copy {
  gap: 3px;
}

.discover-search-results {
  gap: 30px;
}

.discover-search-results > header {
  gap: 6px;
}

.discover-empty-state {
  min-height: 104px;
  padding: 20px;
}

.discover-preview-header {
  min-height: 68px;
  padding: 10px 16px;
}

.discover-preview-content {
  padding: 0 clamp(22px, 4vw, 42px) 30px;
  gap: 18px;
}

.discover-preview-hero {
  grid-template-columns: 122px minmax(0, 1fr);
  gap: 20px;
}

.discover-preview-art,
.discover-preview-art img {
  width: 122px;
  height: 174px;
}

.discover-preview-title {
  gap: 7px;
}

.discover-preview-title h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.7rem);
}

.discover-preview-summary {
  padding-top: 16px;
  gap: 14px;
}

.discover-preview-summary > p {
  font-size: 0.92rem;
  line-height: 1.45;
}

.discover-preview-summary dl > div {
  min-height: 50px;
  padding: 8px 0;
}

@media (max-width: 760px) {
  .discover-header {
    min-height: 68px;
    padding:
      max(8px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      4px
      max(14px, env(safe-area-inset-left));
  }

  .discover-tabs {
    top: 63px;
    margin-bottom: 10px;
  }

  .discover-content {
    gap: 36px;
    padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 30px));
  }

  .discover-intro,
  .discover-view-intro {
    margin-top: 3px;
    gap: 7px;
  }

  .discover-intro h1,
  .discover-view-intro h1 {
    font-size: clamp(2.15rem, 10.6vw, 3rem);
  }

  .discover-view-intro.is-browse h1 {
    font-size: clamp(2.5rem, 12vw, 3.45rem);
  }

  .discover-intro > span,
  .discover-view-intro > span {
    font-size: 0.8rem;
    line-height: 1.35;
  }

  .discover-next-card {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 21px;
  }

  .discover-next-art {
    min-height: 175px;
  }

  .discover-next-art > img,
  .discover-next-art > span:not(i) {
    width: 96px;
  }

  .discover-next-copy {
    padding: 18px 18px 50px;
    gap: 7px;
  }

  .discover-next-copy > strong {
    font-size: clamp(1.55rem, 7vw, 1.95rem);
  }

  .discover-daily-card button {
    padding: 17px;
  }

  .discover-format-card {
    padding: 12px 42px 12px 12px;
  }

  .discover-family-card {
    padding: 15px;
  }

  .discover-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-browse-grid.is-books {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-directory-grid > button {
    min-height: 64px;
  }

  .discover-browse-grid.is-books .discover-browse-card {
    min-height: 238px;
    padding: 12px;
  }

  .discover-browse-grid.is-books .discover-browse-art,
  .discover-browse-grid.is-books .discover-browse-art img {
    width: 84px;
    height: 121px;
  }

  .discover-preview-content {
    padding: 8px 18px max(32px, calc(env(safe-area-inset-bottom) + 22px));
    gap: 16px;
  }

  .discover-preview-hero {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 15px;
  }

  .discover-preview-art,
  .discover-preview-art img {
    width: 82px;
    height: 118px;
  }

  .discover-preview-title h2 {
    font-size: clamp(1.5rem, 7.2vw, 2.05rem);
  }
}

@media (max-width: 470px) {
  .discover-editorial-heading h3 {
    font-size: 1.25rem;
  }

  .discover-recommendation-card {
    min-height: 102px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 11px;
  }

  .discover-recommendation-art,
  .discover-recommendation-art img {
    width: 56px;
    height: 80px;
  }

  .discover-family-card > div {
    column-gap: 8px;
  }

  .discover-family-card button {
    font-size: 0.62rem;
  }

  .discover-directory-grid small {
    display: none;
  }

  .discover-directory-grid > button {
    min-height: 54px;
  }

  .discover-browse-card:not(.is-books) {
    min-height: 106px;
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .discover-browse-card:not(.is-books) .discover-browse-art,
  .discover-browse-card:not(.is-books) .discover-browse-art img {
    width: 58px;
    height: 84px;
  }
}

/* Home-shell destination parity: one warm canvas and one upper-right red glow. */
#inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen),
#inputPanel.is-open:has(#collectionView:not([hidden])),
#inputPanel.is-open:has(#statsView:not([hidden])),
#inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) {
  background:
    radial-gradient(circle at 82% 0%, rgba(188, 72, 64, 0.075), transparent 24rem),
    linear-gradient(180deg, #fffdf8 0%, #f8f2e9 100%) !important;
}

html.theme-dark #inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen),
body.theme-dark #inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen),
html.theme-dark #inputPanel.is-open:has(#collectionView:not([hidden])),
body.theme-dark #inputPanel.is-open:has(#collectionView:not([hidden])),
html.theme-dark #inputPanel.is-open:has(#statsView:not([hidden])),
body.theme-dark #inputPanel.is-open:has(#statsView:not([hidden])),
html.theme-dark #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])),
body.theme-dark #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) {
  background:
    radial-gradient(circle at 82% 0%, rgba(211, 91, 82, 0.12), transparent 23rem),
    radial-gradient(circle at 10% 5%, rgba(255, 244, 218, 0.04), transparent 18rem),
    linear-gradient(180deg, #15130f 0%, #11100d 58%, #0f0e0c 100%) !important;
}

/* Destination ambient worlds share the home canvas treatment while keeping their own visual language. */

.discover-panel,
.topic-discovery-panel {
  isolation: isolate;
}

.discover-panel {
  overflow: hidden;
  touch-action: pan-y;
}

.discover-sheet,
.topic-discovery-sheet {
  position: relative;
  z-index: 1;
}

.discover-sheet {
  background: var(--discover-page) !important;
  background-color: var(--discover-page) !important;
  background-image: none !important;
}

.topic-discovery-sheet {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.discover-panel .discover-sheet {
  min-height: 0;
  height: 100%;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior-y: contain;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

.discover-panel {
  --discover-page: #f8f3eb;
  --discover-sheet: #fcf9f4;
  --discover-surface: #fffdf9;
  --discover-surface-soft: #f0eaf0;
  --discover-line: rgba(76, 66, 117, 0.14);
  background:
    radial-gradient(circle at 84% 0%, rgba(108, 86, 187, 0.16), transparent 25rem),
    radial-gradient(circle at 96% 20%, rgba(70, 119, 181, 0.075), transparent 24rem),
    linear-gradient(180deg, #fffdf8 0%, #f8f2e9 100%) !important;
}

.discover-header {
  position: relative;
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.discover-panel .discover-tabs {
  top: 0;
}

.discover-panel .discover-close,
.discover-panel .discover-search-toggle {
  border-color: rgba(96, 79, 151, 0.18);
  background: rgba(255, 252, 247, 0.72);
  color: rgba(72, 61, 116, 0.9);
}

html.theme-dark .discover-panel,
body.theme-dark .discover-panel {
  --discover-page: #101014;
  --discover-sheet: #15151c;
  --discover-surface: #1b1a23;
  --discover-surface-soft: #232131;
  --discover-line: rgba(193, 181, 245, 0.13);
  background:
    radial-gradient(circle at 84% 0%, rgba(137, 105, 231, 0.19), transparent 25rem),
    radial-gradient(circle at 97% 22%, rgba(77, 139, 210, 0.11), transparent 25rem),
    linear-gradient(180deg, #15131b 0%, #111015 58%, #0f0e13 100%) !important;
}

html.theme-dark .discover-header,
body.theme-dark .discover-header {
  background: transparent !important;
}

html.theme-dark .discover-panel .discover-close,
html.theme-dark .discover-panel .discover-search-toggle,
body.theme-dark .discover-panel .discover-close,
body.theme-dark .discover-panel .discover-search-toggle {
  border-color: rgba(193, 181, 245, 0.15);
  background: rgba(30, 28, 40, 0.74);
  color: rgba(213, 205, 251, 0.92);
}

.topic-discovery-panel {
  color-scheme: light;
  --topic-dossier-page: #f5f6ef;
  --topic-dossier-sheet: #fbfcf7;
  --topic-dossier-surface: rgba(253, 254, 249, 0.9);
  --topic-dossier-surface-soft: rgba(231, 241, 234, 0.88);
  --topic-dossier-text: #19231f;
  --topic-dossier-muted: #617069;
  --topic-dossier-soft: #7a8a82;
  --topic-dossier-line: color-mix(in srgb, var(--topic-color) 15%, rgba(54, 84, 70, 0.14));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 68%, #2d7562);
  --topic-dossier-accent-soft: color-mix(in srgb, var(--topic-color) 10%, transparent);
  --topic-dossier-shadow: 0 12px 28px rgba(42, 83, 66, 0.08);
  background:
    radial-gradient(circle at 14% -2%, rgba(86, 66, 174, 0.23), transparent 25rem),
    radial-gradient(circle at 5% 74%, rgba(70, 119, 181, 0.075), transparent 24rem),
    linear-gradient(180deg, #fffdf8 0%, #f8f2e9 100%) !important;
}

.topic-discovery-panel .topic-discovery-close {
  background: rgba(252, 254, 248, 0.76);
  -webkit-backdrop-filter: blur(14px) saturate(1.04);
  backdrop-filter: blur(14px) saturate(1.04);
}

html.theme-dark .topic-discovery-panel,
body.theme-dark .topic-discovery-panel {
  color-scheme: dark;
  --topic-dossier-page: #0e1210;
  --topic-dossier-sheet: #121814;
  --topic-dossier-surface: rgba(24, 31, 27, 0.88);
  --topic-dossier-surface-soft: rgba(31, 42, 36, 0.9);
  --topic-dossier-text: #f0f5f1;
  --topic-dossier-muted: #b2bdb7;
  --topic-dossier-soft: #89968f;
  --topic-dossier-line: color-mix(in srgb, var(--topic-color) 14%, rgba(222, 239, 229, 0.13));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 58%, #8fd5b4);
  --topic-dossier-accent-soft: color-mix(in srgb, var(--topic-color) 10%, transparent);
  --topic-dossier-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  background:
    radial-gradient(circle at 14% -2%, rgba(117, 87, 211, 0.27), transparent 25rem),
    radial-gradient(circle at 6% 74%, rgba(77, 139, 210, 0.11), transparent 24rem),
    linear-gradient(180deg, #15131b 0%, #111015 58%, #0f0e13 100%) !important;
}

html.theme-dark .topic-discovery-panel .topic-discovery-close,
body.theme-dark .topic-discovery-panel .topic-discovery-close {
  background: rgba(24, 33, 28, 0.76);
}

/* Topics is an editorial index: personal continuity first, then broad subject areas. */
.discover-topics-intro {
  max-width: 620px;
  margin-top: clamp(12px, 3vw, 26px);
}

.discover-topics-intro h1 {
  font-size: clamp(2.5rem, 6.8vw, 4.7rem);
}

.discover-topics-intro > span {
  max-width: 36rem;
}

.discover-personal-topic-list,
.discover-subject-area-list {
  display: grid;
  border-top: 1px solid var(--discover-line);
}

.discover-personal-topic-row,
.discover-subject-area-row {
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--discover-line);
  display: grid;
  align-items: center;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  cursor: pointer;
}

.discover-personal-topic-row {
  min-height: 86px;
  padding: 10px 4px 10px 0;
  grid-template-columns: 62px minmax(0, 1fr) 24px;
  gap: 16px;
}

.discover-personal-topic-icon {
  width: 62px;
  height: 62px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 30%, var(--discover-line));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 10%, var(--discover-surface-soft));
  color: color-mix(in srgb, var(--topic-color) 84%, var(--discover-text));
}

.discover-personal-topic-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
}

.discover-personal-topic-copy,
.discover-subject-area-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.discover-personal-topic-copy strong,
.discover-subject-area-copy strong {
  overflow: hidden;
  font-family: var(--reading-font);
  font-size: clamp(1.28rem, 3.4vw, 1.78rem);
  font-weight: 540;
  letter-spacing: -0.032em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-personal-topic-copy small,
.discover-subject-area-copy small {
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-personal-topic-copy small {
  color: color-mix(in srgb, var(--topic-color) 72%, var(--discover-muted));
}

.discover-personal-topic-copy small i {
  padding: 0 6px;
  color: var(--discover-coral);
  font-style: normal;
}

.discover-topic-row-arrow,
.discover-subject-area-arrow {
  width: 12px;
  height: 12px;
  border-top: 2px solid var(--discover-coral);
  border-right: 2px solid var(--discover-coral);
  transform: rotate(45deg);
}

.discover-subject-area-row {
  min-height: 106px;
  padding: 12px 4px 12px 0;
  grid-template-columns: 76px minmax(0, 1fr) 24px;
  gap: 18px;
}

.discover-subject-area-art {
  width: 76px;
  height: 82px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 28%, var(--discover-line));
  border-radius: 17px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--topic-color) 9%, var(--discover-surface-soft));
  color: color-mix(in srgb, var(--topic-color) 78%, var(--discover-text));
}

.discover-subject-area-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-subject-area-art svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
}

.discover-subject-area-copy small {
  font-family: var(--reading-font);
  font-size: clamp(0.76rem, 2vw, 0.92rem);
  font-weight: 430;
  letter-spacing: 0;
}

@media (max-width: 760px) {
  .discover-topics-intro h1 {
    font-size: clamp(2.35rem, 11vw, 3.25rem);
  }

  .discover-personal-topic-row {
    min-height: 76px;
    grid-template-columns: 54px minmax(0, 1fr) 20px;
    gap: 13px;
  }

  .discover-personal-topic-icon {
    width: 54px;
    height: 54px;
  }

  .discover-personal-topic-icon svg {
    width: 25px;
    height: 25px;
  }

  .discover-subject-area-row {
    min-height: 92px;
    grid-template-columns: 66px minmax(0, 1fr) 20px;
    gap: 15px;
  }

  .discover-subject-area-art {
    width: 66px;
    height: 70px;
    border-radius: 15px;
  }
}

/* Topics exploration: selectable interests, balanced suggestions, and an adaptive reading path. */
.discover-personal-topic-list,
.discover-topic-suggestion-rail,
.discover-topic-start-rail {
  width: calc(100% + max(24px, env(safe-area-inset-right)) + max(24px, env(safe-area-inset-left)));
  margin-inline: calc(-1 * max(24px, env(safe-area-inset-left)));
  padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right));
  display: grid;
  grid-auto-flow: column;
  gap: 11px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.discover-personal-topic-list::-webkit-scrollbar,
.discover-topic-suggestion-rail::-webkit-scrollbar,
.discover-topic-start-rail::-webkit-scrollbar {
  display: none;
}

.discover-personal-topic-list {
  grid-auto-columns: minmax(205px, 31%);
  border: 0;
}

.discover-personal-topic-row {
  min-height: 132px;
  padding: 18px 42px 18px 16px;
  border: 1px solid var(--discover-line);
  border-radius: 20px;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  align-content: center;
  background: color-mix(in srgb, var(--discover-surface) 86%, transparent);
  box-shadow: 0 12px 28px rgba(34, 28, 50, 0.055);
  scroll-snap-align: start;
}

.discover-personal-topic-row.is-selected {
  border-color: color-mix(in srgb, var(--topic-color) 52%, var(--discover-line));
  background: color-mix(in srgb, var(--topic-color) 9%, var(--discover-surface));
}

.discover-personal-topic-icon {
  width: 54px;
  height: 54px;
}

.discover-personal-topic-copy strong {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-personal-topic-copy small {
  display: block;
  white-space: normal;
  line-height: 1.45;
}

.discover-topic-row-arrow {
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: 9px;
  height: 9px;
  border-width: 1.5px;
  border-color: color-mix(in srgb, var(--topic-color) 78%, var(--discover-coral));
}

.discover-topic-suggestions,
.discover-topic-start-section {
  display: grid;
  gap: 13px;
}

.discover-topic-suggestions-heading,
.discover-topic-start-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.discover-topic-suggestions-heading > div,
.discover-topic-start-heading > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.discover-topic-suggestions-heading p,
.discover-topic-start-heading p {
  margin: 0;
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.62rem;
  font-weight: 790;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.discover-topic-suggestions-heading span,
.discover-topic-start-heading span {
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: 0.78rem;
}

.discover-topic-suggestion-actions > button,
.discover-topic-start-heading > button {
  min-height: 40px;
  padding: 0 4px 0 12px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: color-mix(in srgb, #8f70e9 80%, var(--discover-text));
  font-family: var(--ui-font);
  font-size: 0.72rem;
  font-weight: 720;
  cursor: pointer;
}

.discover-topic-suggestions-heading .discover-topic-suggestion-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.discover-topic-suggestion-actions > button {
  padding-inline: 8px;
  white-space: nowrap;
}

.discover-topic-suggestions-heading .discover-topic-suggestion-actions > button:first-child {
  color: var(--discover-coral-strong);
}

.discover-topic-suggestion-actions > button i {
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  position: relative;
}

.discover-topic-suggestion-actions > button i::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 0;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(18deg);
}

.discover-topic-suggestion-rail,
.discover-topic-start-rail {
  grid-auto-columns: minmax(168px, 22%);
}

.discover-topic-suggestion-card {
  --suggestion-tone: #8d70d7;
  min-width: 0;
  min-height: 358px;
  padding: 0 13px 16px;
  border: 1px solid color-mix(in srgb, var(--suggestion-tone) 30%, var(--discover-line));
  border-radius: 19px;
  display: grid;
  grid-template-rows: auto 142px auto auto auto 1fr;
  gap: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--discover-surface) 88%, transparent);
  color: var(--discover-text);
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

.discover-topic-suggestion-card.is-different { --suggestion-tone: #d39a2e; }
.discover-topic-suggestion-card.is-unexpected { --suggestion-tone: #4aa56c; }
.discover-topic-suggestion-card.is-new { --suggestion-tone: #668bd0; }

.discover-topic-suggestion-reason {
  min-height: 28px;
  margin-inline: -13px;
  padding: 7px 10px 5px;
  overflow: hidden;
  background: color-mix(in srgb, var(--suggestion-tone) 12%, transparent);
  color: color-mix(in srgb, var(--suggestion-tone) 82%, var(--discover-text));
  font-family: var(--ui-font);
  font-size: 0.58rem;
  font-weight: 720;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-topic-suggestion-art {
  width: calc(100% + 26px);
  height: 142px;
  margin-inline: -13px;
  overflow: hidden;
  background: color-mix(in srgb, var(--topic-color) 12%, var(--discover-surface-soft));
}

.discover-topic-suggestion-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.06) contrast(1.04);
}

.discover-topic-suggestion-art svg {
  width: 34px;
  height: 34px;
  margin: 52px auto;
  display: block;
  fill: none;
  stroke: currentColor;
}

.discover-topic-suggestion-icon {
  width: 34px;
  height: 34px;
  margin-top: -25px;
  border: 1px solid color-mix(in srgb, var(--suggestion-tone) 56%, var(--discover-line));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--discover-surface) 92%, transparent);
  color: var(--suggestion-tone);
}

.discover-topic-suggestion-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

.discover-topic-suggestion-card > strong {
  font-family: var(--reading-font);
  font-size: 1.18rem;
  font-weight: 540;
  letter-spacing: -0.03em;
  line-height: 1.03;
}

.discover-topic-suggestion-card > em {
  overflow: hidden;
  color: color-mix(in srgb, var(--suggestion-tone) 84%, var(--discover-text));
  font-family: var(--ui-font);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.discover-topic-suggestion-card > small {
  overflow: hidden;
  color: var(--discover-muted);
  display: -webkit-box;
  font-family: var(--reading-font);
  font-size: 0.72rem;
  line-height: 1.38;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-browse-topic-filter {
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  margin-top: 0;
  padding: 4px 5px 4px 12px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 42%, var(--discover-line));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--topic-color) 9%, var(--discover-surface));
  color: var(--discover-text);
  font-family: var(--ui-font);
}

.discover-browse-topic-filter strong {
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-browse-topic-filter button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 16%, transparent);
  color: currentColor;
  font: 700 1rem/1 var(--ui-font);
}

.topic-browse-sources {
  width: 100%;
  min-height: 72px;
  margin-top: 10px;
  padding: 13px 15px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 34%, var(--discover-line));
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: color-mix(in srgb, var(--topic-color) 8%, var(--discover-surface));
  color: var(--discover-text);
  text-align: left;
}

.topic-browse-sources > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.topic-browse-sources small,
.topic-browse-sources em {
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.66rem;
  font-style: normal;
}

.topic-browse-sources small {
  color: color-mix(in srgb, var(--topic-color) 76%, var(--discover-text));
  font-weight: 760;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.topic-browse-sources strong {
  overflow: hidden;
  font-family: var(--reading-font);
  font-size: 1rem;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-browse-sources > i {
  width: 9px;
  height: 9px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  flex: 0 0 auto;
  transform: rotate(45deg);
}

.discover-topic-start-heading h3 {
  margin: 0;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  font-weight: 540;
  letter-spacing: -0.035em;
}

.discover-topic-start-heading > button i {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.discover-topic-start-card {
  min-width: 0;
  min-height: 328px;
  padding: 14px;
  border: 1px solid var(--discover-line);
  border-radius: 19px;
  display: grid;
  grid-template-rows: auto 152px auto auto auto;
  gap: 9px;
  background: color-mix(in srgb, var(--discover-surface) 90%, transparent);
  color: var(--discover-text);
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

.discover-topic-start-kicker {
  color: color-mix(in srgb, var(--topic-color) 75%, var(--discover-coral));
  font-family: var(--ui-font);
  font-size: 0.59rem;
  font-weight: 790;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.discover-topic-start-art,
.discover-topic-start-art img {
  width: 100%;
  height: 152px;
  border-radius: 12px;
}

.discover-topic-start-art {
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--discover-surface-soft);
}

.discover-topic-start-art img {
  object-fit: cover;
}

.discover-topic-start-art > span {
  font-family: var(--reading-font);
  font-size: 2.2rem;
}

.discover-topic-start-card > strong {
  overflow: hidden;
  color: var(--discover-text);
  display: -webkit-box;
  font-family: var(--reading-font);
  font-size: 1.06rem;
  font-weight: 540;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-topic-start-card > small {
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.66rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-topic-start-card > i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--discover-surface-soft);
}

.discover-topic-start-card > i::after {
  content: "";
  width: 7px;
  height: 7px;
  border-top: 1.5px solid var(--discover-text);
  border-right: 1.5px solid var(--discover-text);
  transform: rotate(45deg);
}

.discover-personal-topic-list button,
.discover-personal-topic-list button *,
.discover-topic-suggestion-rail button,
.discover-topic-suggestion-rail button *,
.discover-topic-start-rail button,
.discover-topic-start-rail button * {
  touch-action: pan-x pan-y !important;
}

html.theme-dark .discover-personal-topic-row,
body.theme-dark .discover-personal-topic-row,
html.theme-dark .discover-topic-suggestion-card,
body.theme-dark .discover-topic-suggestion-card,
html.theme-dark .discover-topic-start-card,
body.theme-dark .discover-topic-start-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

@media (max-width: 760px) {
  .discover-personal-topic-list,
  .discover-topic-suggestion-rail,
  .discover-topic-start-rail {
    width: calc(100% + max(14px, env(safe-area-inset-right)) + max(14px, env(safe-area-inset-left)));
    margin-inline: calc(-1 * max(14px, env(safe-area-inset-left)));
    padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
  }

  .discover-personal-topic-list {
    grid-auto-columns: 174px;
  }

  .discover-personal-topic-row {
    min-height: 96px;
    padding: 12px 25px 12px 11px;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
  }

  .discover-personal-topic-icon {
    width: 38px;
    height: 38px;
  }

  .discover-personal-topic-icon svg {
    width: 20px;
    height: 20px;
  }

  .discover-personal-topic-copy strong {
    font-size: 1.02rem;
    line-height: 1.03;
  }

  .discover-personal-topic-copy small {
    font-size: 0.62rem;
    line-height: 1.24;
  }

  .discover-topic-suggestion-rail,
  .discover-topic-start-rail {
    grid-auto-columns: minmax(158px, 44vw);
  }

  .discover-topic-suggestion-card {
    min-height: 310px;
    grid-template-rows: auto 128px auto auto 1fr;
  }

  .discover-topic-suggestion-art {
    height: 128px;
  }

  .discover-topic-start-card {
    min-height: 306px;
    grid-template-rows: auto 136px auto auto auto;
  }

  .discover-topic-start-art,
  .discover-topic-start-art img {
    height: 136px;
  }
}

/* Discover is a root navigation destination, so its tab bar remains persistent. */
body:has(.discover-panel:not([hidden])):not(.is-discover-preview-open) .home-bottom-nav {
  display: grid !important;
}

body:has(.discover-panel:not([hidden])) .discover-sheet {
  scroll-padding-bottom: max(124px, calc(env(safe-area-inset-bottom) + 104px));
}

body:has(.discover-panel:not([hidden])) .discover-content {
  padding-bottom: max(124px, calc(env(safe-area-inset-bottom) + 104px));
}

/* The source preview is a focused modal detail rather than a root destination. */
body.is-discover-preview-open .home-bottom-nav {
  display: none !important;
}

@media (max-width: 760px) {
  body.is-discover-preview-open .discover-sheet {
    visibility: hidden;
  }
}

/* Who’s Speaking: a reader-facing dialogue guide rather than an attribution diagnostic. */
.character-legend-panel {
  z-index: 250;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  background: rgba(38, 31, 24, 0.28);
  -webkit-backdrop-filter: blur(14px) saturate(0.94);
  backdrop-filter: blur(14px) saturate(0.94);
}

.character-legend-sheet {
  width: min(560px, 100%);
  max-height: min(680px, calc(100dvh - 24px));
  padding: clamp(22px, 4vw, 30px);
  border: 1px solid rgba(113, 92, 68, 0.14);
  border-radius: 32px;
  gap: 18px;
  background:
    radial-gradient(circle at 88% 2%, rgba(93, 151, 139, 0.14), transparent 34%),
    radial-gradient(circle at 8% 0%, rgba(202, 91, 72, 0.1), transparent 30%),
    linear-gradient(155deg, rgba(255, 253, 247, 0.99), rgba(245, 237, 224, 0.985));
  box-shadow:
    0 34px 90px rgba(42, 31, 21, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.character-legend-close {
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(103, 84, 62, 0.12);
  background: rgba(255, 253, 247, 0.72);
  color: rgba(65, 57, 48, 0.72);
  box-shadow:
    0 8px 18px rgba(70, 50, 31, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.character-legend-close::before,
.character-legend-close::after {
  left: 11px;
  right: 11px;
  top: 17px;
  height: 1.7px;
}

.character-legend-header {
  padding-right: 46px;
}

.character-legend-title-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.character-legend-title-row > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.character-legend-title-mark {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid rgba(80, 133, 122, 0.17);
  border-radius: 18px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.74), transparent 48%),
    rgba(93, 151, 139, 0.13);
  color: rgba(47, 111, 99, 0.9);
  box-shadow:
    0 10px 22px rgba(50, 91, 78, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.character-legend-title-mark svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.character-legend-title-mark circle {
  fill: currentColor;
  stroke: none;
}

.character-legend-kicker {
  margin: 0;
  color: rgba(187, 70, 60, 0.88);
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.18em;
}

.character-legend-header h2 {
  font-size: clamp(1.72rem, 5.6vw, 2.28rem);
  font-weight: 520;
  line-height: 1;
  letter-spacing: -0.025em;
}

.character-legend-header > small {
  width: fit-content;
  margin-top: 13px;
  padding: 6px 10px;
  border: 1px solid rgba(102, 86, 67, 0.1);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.54);
  color: rgba(75, 67, 57, 0.7);
  font-family: var(--ui-font);
  font-size: 0.7rem;
  font-weight: 620;
  line-height: 1;
}

.character-legend-intro {
  max-width: 42em;
  margin: 11px 0 0;
  color: rgba(76, 69, 59, 0.66);
  font-family: var(--reading-font);
  font-size: 0.88rem;
  line-height: 1.38;
}

.character-legend-list {
  gap: 10px;
}

.character-legend-item {
  position: relative;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 3px 12px;
  min-height: 66px;
  padding: 12px 14px;
  border-color: color-mix(in srgb, var(--character-dialogue-color, #5d978b) 20%, rgba(108, 90, 68, 0.12));
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--character-dialogue-color, #5d978b) 13%, transparent), transparent 42%),
    rgba(255, 253, 248, 0.7);
  box-shadow:
    0 9px 22px rgba(62, 47, 31, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.character-legend-swatch {
  position: relative;
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 253, 247, 0.76);
  background: var(--character-dialogue-color, #5d978b);
  box-shadow:
    0 7px 16px color-mix(in srgb, var(--character-dialogue-color, #5d978b) 24%, transparent),
    inset 0 1px 2px rgba(255, 255, 255, 0.22);
}

.character-legend-swatch::after {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.88);
  content: "“";
  font-family: Georgia, serif;
  font-size: 1.45rem;
  line-height: 1;
}

.character-legend-name {
  align-self: end;
  font-size: 1.05rem;
  font-weight: 590;
}

.character-legend-item small {
  align-self: start;
  font-family: var(--ui-font);
  font-size: 0.7rem;
  line-height: 1.25;
}

.character-legend-health,
.character-legend-debug {
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.character-legend-health {
  --legend-status: #4f9687;
  gap: 9px;
  padding: 14px;
  border-color: color-mix(in srgb, var(--legend-status) 24%, rgba(107, 90, 69, 0.12));
  background: color-mix(in srgb, var(--legend-status) 5%, rgba(255, 253, 248, 0.78));
}

.character-legend-health.is-ok {
  --legend-status: #bc843b;
}

.character-legend-health.is-review {
  --legend-status: #bd574b;
}

.character-legend-health-copy {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
}

.character-legend-health-label {
  color: color-mix(in srgb, var(--legend-status) 82%, #312a22);
  letter-spacing: 0.11em;
}

.character-legend-health .character-legend-health-copy strong {
  color: color-mix(in srgb, var(--legend-status) 78%, #26211c);
  font-family: var(--ui-font);
  font-size: 0.88rem;
  font-weight: 760;
}

.character-legend-coverage-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  display: block;
  background: color-mix(in srgb, var(--legend-status) 14%, rgba(112, 97, 78, 0.11));
}

.character-legend-coverage-track i {
  width: var(--dialogue-coverage, 0%);
  height: 100%;
  border-radius: inherit;
  display: block;
  background: linear-gradient(90deg, color-mix(in srgb, var(--legend-status) 72%, white), var(--legend-status));
}

.character-legend-health small {
  font-family: var(--reading-font);
  font-size: 0.8rem;
  line-height: 1.35;
}

.character-legend-debug {
  position: relative;
  gap: 3px;
  padding: 14px 15px 14px 19px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--character-dialogue-color, #5d978b) 28%, rgba(107, 90, 69, 0.12));
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--character-dialogue-color, #5d978b) 15%, transparent), transparent 50%),
    rgba(255, 253, 248, 0.76);
}

.character-legend-debug::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--character-dialogue-color, #5d978b);
  content: "";
}

.character-legend-debug-label {
  color: color-mix(in srgb, var(--character-dialogue-color, #5d978b) 72%, #4b3c30);
}

.character-legend-debug strong {
  font-size: 1.16rem;
}

.character-legend-empty {
  padding: 24px 18px;
  border-radius: 18px;
  background: rgba(255, 253, 248, 0.58);
  line-height: 1.42;
}

html.theme-dark .character-legend-panel,
body.theme-dark .character-legend-panel {
  background: rgba(0, 0, 0, 0.5);
}

html.theme-dark .character-legend-sheet,
body.theme-dark .character-legend-sheet {
  border-color: rgba(237, 218, 185, 0.11);
  background:
    radial-gradient(circle at 88% 2%, rgba(87, 157, 142, 0.13), transparent 34%),
    radial-gradient(circle at 8% 0%, rgba(215, 102, 81, 0.1), transparent 30%),
    linear-gradient(155deg, rgba(35, 31, 26, 0.99), rgba(20, 18, 15, 0.99));
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 244, 226, 0.06);
}

html.theme-dark .character-legend-title-mark,
body.theme-dark .character-legend-title-mark {
  border-color: rgba(121, 194, 179, 0.14);
  background: rgba(91, 163, 148, 0.1);
  color: rgba(121, 198, 181, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.theme-dark .character-legend-header > small,
body.theme-dark .character-legend-header > small {
  border-color: rgba(237, 218, 185, 0.1);
  background: rgba(255, 244, 226, 0.055);
  color: rgba(221, 207, 184, 0.7);
}

html.theme-dark .character-legend-intro,
body.theme-dark .character-legend-intro {
  color: rgba(218, 205, 184, 0.67);
}

html.theme-dark .character-legend-item,
body.theme-dark .character-legend-item,
html.theme-dark .character-legend-health,
body.theme-dark .character-legend-health,
html.theme-dark .character-legend-debug,
body.theme-dark .character-legend-debug,
html.theme-dark .character-legend-empty,
body.theme-dark .character-legend-empty {
  background-color: rgba(255, 244, 226, 0.055);
  box-shadow: inset 0 1px 0 rgba(255, 244, 226, 0.055);
}

html.theme-dark .character-legend-health-label,
body.theme-dark .character-legend-health-label,
html.theme-dark .character-legend-health .character-legend-health-copy strong,
body.theme-dark .character-legend-health .character-legend-health-copy strong {
  color: color-mix(in srgb, var(--legend-status) 74%, #f4eadc);
}

@media (max-width: 520px) {
  .character-legend-panel {
    padding:
      max(10px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
  }

  .character-legend-sheet {
    max-height: min(78dvh, 680px);
    padding: 22px 17px 18px;
    border-radius: 28px;
  }

  .character-legend-title-mark {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
}

/* Compact non-modal placement keeps the reader and its toggle visible behind the guide. */
.character-legend-panel,
html.theme-dark .character-legend-panel,
body.theme-dark .character-legend-panel {
  display: block;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none;
}

.character-legend-panel[hidden] {
  display: none;
}

.character-legend-sheet {
  position: absolute;
  right: var(--character-popover-right, max(10px, env(safe-area-inset-right)));
  bottom: var(--character-popover-bottom, max(86px, calc(env(safe-area-inset-bottom) + 72px)));
  width: min(350px, calc(100vw - 20px));
  max-height: min(430px, 58dvh);
  padding: 16px;
  border-radius: 23px;
  gap: 11px;
  pointer-events: auto;
  box-shadow:
    0 24px 58px rgba(42, 31, 21, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.character-legend-close {
  top: 11px;
  right: 11px;
  width: 29px;
  height: 29px;
}

.character-legend-close::before,
.character-legend-close::after {
  left: 8px;
  right: 8px;
  top: 13px;
}

.character-legend-header {
  padding-right: 32px;
}

.character-legend-title-row {
  gap: 10px;
}

.character-legend-title-mark {
  width: 39px;
  height: 39px;
  flex-basis: 39px;
  border-radius: 13px;
}

.character-legend-title-mark svg {
  width: 24px;
  height: 24px;
}

.character-legend-kicker {
  font-size: 0.55rem;
  letter-spacing: 0.16em;
}

.character-legend-header h2 {
  font-size: clamp(1.3rem, 4.8vw, 1.55rem);
  line-height: 1.02;
}

.character-legend-header > small {
  margin-top: 8px;
  padding: 5px 8px;
  font-size: 0.61rem;
}

.character-legend-intro {
  display: none;
}

.character-legend-list {
  gap: 7px;
}

.character-legend-item {
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 2px 9px;
  min-height: 51px;
  padding: 8px 10px;
  border-radius: 15px;
}

.character-legend-swatch {
  width: 30px;
  height: 30px;
  border-width: 2px;
}

.character-legend-swatch::after {
  margin-top: 4px;
  font-size: 1.15rem;
}

.character-legend-name {
  font-size: 0.94rem;
}

.character-legend-item small {
  font-size: 0.62rem;
}

.character-legend-health,
.character-legend-debug {
  padding: 10px 11px;
  border-radius: 15px;
}

.character-legend-health {
  gap: 6px;
}

.character-legend-health-label,
.character-legend-debug-label {
  font-size: 0.57rem;
}

.character-legend-health .character-legend-health-copy strong {
  font-size: 0.76rem;
}

.character-legend-coverage-track {
  height: 4px;
}

.character-legend-health small,
.character-legend-debug small {
  font-size: 0.68rem;
  line-height: 1.28;
}

.character-legend-debug strong {
  font-size: 1rem;
}

.character-legend-empty {
  padding: 17px 13px;
  border-radius: 15px;
  font-size: 0.76rem;
}

@media (max-width: 520px) {
  .character-legend-sheet {
    width: min(340px, calc(100vw - 16px));
    max-height: min(420px, 56dvh);
    padding: 15px;
    border-radius: 22px;
  }

  .character-legend-title-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}

/* Final cascade for the structured Discover empty states. */
.discover-browse-grid > .discover-empty-state,
.discover-search-empty {
  place-items: initial;
  justify-items: start;
  text-align: left;
}

.discover-browse-grid > .discover-empty-state {
  grid-column: 1 / -1;
}

/* PDF source reader: treat the original document as a first-class Rhythm reader mode. */
body.pdf-source-mode {
  overflow: hidden;
  background: var(--reader-surface);
}

.pdf-source-panel {
  position: fixed;
  inset: 0;
  z-index: 147;
  display: block;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -16%, rgba(255, 255, 255, 0.26), transparent 42%),
    var(--reader-surface);
  color: var(--ink);
  touch-action: none;
}

.pdf-source-panel[hidden] {
  display: none !important;
}

.pdf-source-sheet {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.pdf-source-header {
  position: fixed;
  inset: var(--screen-pad-top) var(--screen-pad-right) auto var(--screen-pad-left);
  z-index: 6;
  min-height: var(--top-control-size);
  display: grid;
  grid-template-columns: var(--top-control-size) minmax(0, 1fr) var(--top-control-size);
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.pdf-source-header > button,
.pdf-source-top-actions {
  pointer-events: auto;
}

.pdf-source-frame {
  position: absolute;
  inset:
    calc(var(--screen-pad-top) + var(--top-control-size) + 18px)
    max(14px, var(--screen-pad-right))
    max(164px, calc(env(safe-area-inset-bottom) + 154px))
    max(14px, var(--screen-pad-left));
  z-index: 1;
  width: auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  touch-action: none;
  overscroll-behavior: contain;
}

.pdf-source-page-wrap {
  overflow: hidden;
  border-radius: clamp(4px, 1.2vw, 8px);
  background: #fff;
  box-shadow:
    0 22px 52px rgba(44, 35, 24, 0.18),
    0 3px 12px rgba(44, 35, 24, 0.10),
    0 0 0 1px rgba(96, 77, 53, 0.10);
  transition: box-shadow 180ms ease;
}

.pdf-source-panel.is-page-loading.has-visible-page .pdf-source-page-wrap {
  pointer-events: none;
}

.pdf-source-page-wrap canvas {
  background: #fff;
}

.pdf-source-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  color: rgba(91, 87, 80, 0.68);
  font-family: var(--reading-font);
  font-size: clamp(0.94rem, 3.7vw, 1.08rem);
  text-align: center;
}

.pdf-source-panel.has-visible-page .pdf-source-status:empty {
  display: none;
}

.pdf-source-actions.controls {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 16px));
  z-index: 6;
  width: min(560px, calc(100% - var(--screen-pad-left) - var(--screen-pad-right)));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  justify-items: center;
  pointer-events: none;
  transform: translateX(-50%);
}

.pdf-source-actions .round-side-button,
.pdf-source-actions .round-side-button:hover,
.pdf-source-actions .round-side-button:focus,
.pdf-source-actions .round-side-button:focus-visible {
  width: var(--bottom-control-size);
  min-width: var(--bottom-control-size);
  height: var(--bottom-control-size);
  min-height: var(--bottom-control-size);
  padding: 0;
  border: 0;
  border-radius: 42% 58% 49% 51% / 54% 43% 57% 46%;
  background:
    radial-gradient(circle at 50% 58%, rgba(132, 93, 52, 0.08), transparent 56%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(97, 71, 38, 0.025));
  color: rgba(51, 44, 35, 0.96);
  filter: none;
  transform: none;
  box-shadow:
    inset 0 2px 7px rgba(92, 66, 35, 0.11),
    inset 0 -1px 2px rgba(255, 255, 255, 0.22);
}

.pdf-source-actions .play-control-button,
.pdf-source-actions .play-control-button:hover,
.pdf-source-actions .play-control-button:focus,
.pdf-source-actions .play-control-button:focus-visible,
.pdf-source-actions .play-control-button:active {
  border: 0;
  border-radius: 47% 53% 50% 50% / 51% 47% 53% 49%;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.28), transparent 42%),
    radial-gradient(circle at 50% 72%, rgba(123, 88, 48, 0.15), transparent 62%),
    linear-gradient(180deg, rgba(255, 253, 247, 0.12), rgba(173, 143, 98, 0.07));
  color: rgba(202, 76, 55, 0.98);
  filter: none;
  transform: none;
  box-shadow:
    inset 0 5px 11px rgba(101, 73, 38, 0.15),
    inset 0 -2px 3px rgba(255, 255, 255, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.12);
}

.pdf-source-actions button:disabled {
  opacity: 0.34;
}

.pdf-source-panel.is-handoff-exiting .pdf-source-header,
.pdf-source-panel.is-handoff-exiting .pdf-source-bottom-bar,
.pdf-source-panel.is-handoff-exiting .pdf-source-actions,
.pdf-source-panel.is-handoff-entering .pdf-source-header,
.pdf-source-panel.is-handoff-entering .pdf-source-bottom-bar,
.pdf-source-panel.is-handoff-entering .pdf-source-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 100ms ease;
}

html.theme-dark .pdf-source-panel,
body.theme-dark .pdf-source-panel {
  background:
    radial-gradient(circle at 50% -14%, rgba(255, 232, 190, 0.045), transparent 42%),
    var(--reader-surface);
}

html.theme-dark .pdf-source-page-wrap,
body.theme-dark .pdf-source-page-wrap {
  box-shadow:
    0 26px 58px rgba(0, 0, 0, 0.50),
    0 4px 14px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 235, 204, 0.10);
}

html.theme-dark .pdf-source-actions .round-side-button,
body.theme-dark .pdf-source-actions .round-side-button {
  background:
    radial-gradient(circle at 50% 58%, rgba(0, 0, 0, 0.20), transparent 56%),
    linear-gradient(180deg, rgba(255, 232, 190, 0.035), rgba(0, 0, 0, 0.12));
  color: rgba(245, 229, 199, 0.92);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.30),
    inset 0 -1px 2px rgba(255, 232, 190, 0.08);
}

html.theme-dark .pdf-source-actions .play-control-button,
body.theme-dark .pdf-source-actions .play-control-button {
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 230, 190, 0.10), transparent 42%),
    radial-gradient(circle at 50% 72%, rgba(0, 0, 0, 0.24), transparent 62%),
    linear-gradient(180deg, rgba(255, 226, 180, 0.045), rgba(0, 0, 0, 0.18));
  color: rgba(235, 87, 62, 0.98);
  box-shadow:
    inset 0 5px 12px rgba(0, 0, 0, 0.34),
    inset 0 -1px 2px rgba(255, 232, 190, 0.08),
    0 1px 0 rgba(255, 232, 190, 0.04);
}

@media (max-width: 520px) {
  .pdf-source-frame {
    inset:
      calc(var(--screen-pad-top) + var(--top-control-size) + 12px)
      max(10px, var(--screen-pad-right))
      max(154px, calc(env(safe-area-inset-bottom) + 146px))
      max(10px, var(--screen-pad-left));
  }

  .pdf-source-actions.controls {
    width: min(390px, calc(100% - var(--screen-pad-left) - var(--screen-pad-right)));
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-source-progress-fill,
  .pdf-source-page-wrap,
  .pdf-source-header,
  .pdf-source-bottom-bar,
  .pdf-source-actions {
    transition-duration: 0.01ms !important;
  }
}

/* PDF chrome parity: inherit the live reader system; these rules only place it. */
body.pdf-source-mode .pdf-source-panel.reader-panel {
  display: block !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

.pdf-source-panel .pdf-source-actions.controls {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: min(560px, 100%) !important;
  transform: none !important;
  pointer-events: auto !important;
}

.pdf-source-panel #pdfSourcePrevButton .arrow-symbol,
.pdf-source-panel #pdfSourceNextButton .arrow-symbol {
  width: 29px !important;
  height: 29px !important;
  stroke-width: 2.65 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.22)) !important;
}

.pdf-source-panel .pdf-source-frame {
  bottom: max(224px, calc(env(safe-area-inset-bottom) + 214px)) !important;
}

@media (max-width: 520px) {
  .pdf-source-panel .pdf-source-frame {
    bottom: max(214px, calc(env(safe-area-inset-bottom) + 204px)) !important;
  }
}

/* Dark graphite palette: neutral darkness, warm light, and coral rather than brown for warmth. */
html.theme-dark,
body.theme-dark {
  --rhythm-night-deep: #0d0e11;
  --rhythm-night: #111216;
  --rhythm-night-soft: #17181c;
  --rhythm-night-raised: #1d1e22;
  --rhythm-night-card: #222327;
  --rhythm-night-line: rgba(235, 228, 217, 0.14);
  --paper: var(--rhythm-night);
  --reader-surface: #0f1013;
  --panel: var(--rhythm-night-raised);
  --ink: #f1ede6;
  --muted: #b5b1aa;
  --line: var(--rhythm-night-line);
  --progress-track-soft: rgba(151, 153, 158, 0.24);
  --rhythm-control-ink: rgba(241, 237, 230, 0.9);
  --rhythm-control-muted: rgba(190, 187, 181, 0.7);
  --rhythm-dock-surface: rgba(20, 21, 24, 0.99);
  --play-button-rest-bg:
    radial-gradient(circle at 50% 18%, rgba(247, 238, 224, 0.08), transparent 48%),
    linear-gradient(180deg, rgba(39, 40, 44, 0.98), rgba(24, 25, 29, 0.99));
}

html.theme-dark body,
body.theme-dark,
html.theme-dark .app-shell,
body.theme-dark .app-shell {
  background: var(--rhythm-night-deep) !important;
  color: var(--ink);
}

/* Home, Library, Stats, and Settings retain one shared world with a deeper graphite base. */
html.theme-dark #inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen),
body.theme-dark #inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen),
html.theme-dark #inputPanel.is-open:has(#collectionView:not([hidden])),
body.theme-dark #inputPanel.is-open:has(#collectionView:not([hidden])),
html.theme-dark #inputPanel.is-open:has(#statsView:not([hidden])),
body.theme-dark #inputPanel.is-open:has(#statsView:not([hidden])),
html.theme-dark #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])),
body.theme-dark #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) {
  background:
    radial-gradient(circle at 82% -2%, rgba(210, 84, 73, 0.105), transparent 24rem),
    radial-gradient(circle at 8% 5%, rgba(104, 112, 142, 0.045), transparent 20rem),
    linear-gradient(180deg, #15161a 0%, #111216 56%, #0e0f12 100%) !important;
}

html.theme-dark #inputPanel.home-ambient-active .home-resume-card,
body.theme-dark #inputPanel.home-ambient-active .home-resume-card,
html.theme-dark #inputPanel.home-ambient-active .home-progress-book,
body.theme-dark #inputPanel.home-ambient-active .home-progress-book,
html.theme-dark #inputPanel.home-ambient-active .home-empty-progress,
body.theme-dark #inputPanel.home-ambient-active .home-empty-progress,
html.theme-dark #inputPanel.home-ambient-active .home-action-panel,
body.theme-dark #inputPanel.home-ambient-active .home-action-panel,
html.theme-dark #inputPanel.home-ambient-active .home-reading-panel,
body.theme-dark #inputPanel.home-ambient-active .home-reading-panel,
html.theme-dark .home-topic-card,
body.theme-dark .home-topic-card {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(248, 239, 224, 0.055), transparent 42%),
    linear-gradient(145deg, rgba(33, 34, 39, 0.76), rgba(23, 24, 28, 0.7)) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(248, 239, 224, 0.045) !important;
}

html.theme-dark .home-bottom-nav,
body.theme-dark .home-bottom-nav {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(248, 239, 224, 0.07), transparent 48%),
    rgba(27, 28, 32, 0.9) !important;
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(248, 239, 224, 0.055) !important;
}

/* Library surfaces use neutral elevation; selected states keep coral warmth. */
html.theme-dark #collectionView .library-search,
body.theme-dark #collectionView .library-search,
html.theme-dark #collectionView .library-category-chip,
body.theme-dark #collectionView .library-category-chip,
html.theme-dark #collectionView .library-stack-list,
body.theme-dark #collectionView .library-stack-list,
html.theme-dark #collectionView .library-section-empty,
body.theme-dark #collectionView .library-section-empty,
html.theme-dark #collectionView .library-book-card.home-progress-book,
body.theme-dark #collectionView .library-book-card.home-progress-book {
  border-color: rgba(235, 228, 217, 0.12) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(248, 239, 224, 0.045), transparent 42%),
    linear-gradient(180deg, rgba(33, 34, 39, 0.84), rgba(24, 25, 29, 0.82)) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

html.theme-dark #collectionView .library-category-chip.is-selected,
body.theme-dark #collectionView .library-category-chip.is-selected,
html.theme-dark #collectionView .library-section-sort-control,
body.theme-dark #collectionView .library-section-sort-control {
  border-color: rgba(222, 104, 90, 0.25) !important;
  background: rgba(65, 31, 37, 0.72) !important;
}

/* Stats cards become graphite layers instead of umber panels. */
html.theme-dark #statsView .stats-tabs,
body.theme-dark #statsView .stats-tabs,
html.theme-dark #statsView .stats-editorial-card,
body.theme-dark #statsView .stats-editorial-card,
html.theme-dark #statsView .stats-card,
body.theme-dark #statsView .stats-card,
html.theme-dark #statsView .stats-insight-card,
body.theme-dark #statsView .stats-insight-card,
html.theme-dark #statsView .stats-insight-tile,
body.theme-dark #statsView .stats-insight-tile,
html.theme-dark #statsView .stats-bottom-banner,
body.theme-dark #statsView .stats-bottom-banner {
  border-color: rgba(235, 228, 217, 0.12) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(248, 239, 224, 0.045), transparent 42%),
    linear-gradient(145deg, rgba(34, 35, 40, 0.86), rgba(23, 24, 28, 0.88)) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

/* Focus, Context, and Ebook modes use the quietest and most neutral blacks. */
html.theme-dark .reader-panel,
body.theme-dark .reader-panel,
html.theme-dark .focus-stage,
body.theme-dark .focus-stage,
html.theme-dark .ebook-reader,
body.theme-dark .ebook-reader,
html.theme-dark .ebook-page,
body.theme-dark .ebook-page {
  background:
    radial-gradient(circle at 50% 34%, rgba(205, 82, 72, 0.025), transparent 44%),
    #0f1013 !important;
  color: var(--ink);
}

html.theme-dark body:not(.ebook-mode) .reader-panel .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel .bottom-dock {
  background:
    linear-gradient(color-mix(in srgb, var(--rhythm-amber) 20%, transparent), color-mix(in srgb, var(--rhythm-amber) 20%, transparent)) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(27, 28, 32, 0.99), var(--rhythm-dock-surface)) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.34) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:is(:hover, :focus, :focus-visible),
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .play-control-button:is(:hover, :focus, :focus-visible) {
  border-color: rgba(235, 228, 217, 0.1) !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(248, 239, 224, 0.075), transparent 46%),
    linear-gradient(180deg, rgba(39, 40, 44, 0.99), rgba(23, 24, 28, 0.99)) !important;
  box-shadow:
    0 16px 27px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(248, 239, 224, 0.055),
    inset 0 -4px 8px rgba(0, 0, 0, 0.25) !important;
}

html.theme-dark .font-size-popover,
body.theme-dark .font-size-popover {
  border-color: rgba(235, 228, 217, 0.12) !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(248, 239, 224, 0.07), transparent 48%),
    rgba(27, 28, 32, 0.98) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(248, 239, 224, 0.045) !important;
}

html.theme-dark .context-line.is-current-line::before,
body.theme-dark .context-line.is-current-line::before,
html.theme-dark .context-sentence-card.is-current-sentence-card::before,
body.theme-dark .context-sentence-card.is-current-sentence-card::before {
  background: rgba(29, 30, 34, 0.64) !important;
}

/* Splash stays warm through its light and coral halo, not through a brown base. */
html.theme-dark .onboarding-overlay,
body.theme-dark .onboarding-overlay {
  background:
    radial-gradient(circle at 50% 12%, rgba(205, 83, 72, 0.085), transparent 44%),
    linear-gradient(180deg, #131418 0%, #101115 58%, #0d0e11 100%) !important;
}

html.theme-dark .rhythm-intro-stage,
body.theme-dark .rhythm-intro-stage {
  background:
    radial-gradient(circle at 50% 64%, rgba(211, 91, 82, 0.115), transparent 35%),
    radial-gradient(circle at 18% 16%, rgba(105, 114, 143, 0.04), transparent 32%),
    linear-gradient(180deg, rgba(19, 20, 24, 0.99), rgba(15, 16, 20, 1) 58%, rgba(12, 13, 16, 0.99)) !important;
}

html.theme-dark .rhythm-intro-stage::after,
body.theme-dark .rhythm-intro-stage::after {
  background:
    linear-gradient(180deg, rgba(17, 18, 22, 0.9) 0%, rgba(17, 18, 22, 0) 28%),
    linear-gradient(180deg, rgba(17, 18, 22, 0) 70%, rgba(8, 9, 11, 0.58) 100%) !important;
}

/* Small reader overlays follow the same temperature. */
html.theme-dark .character-legend-sheet,
body.theme-dark .character-legend-sheet,
html.theme-dark .chapter-sheet,
body.theme-dark .chapter-sheet {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 88% 2%, rgba(87, 157, 142, 0.1), transparent 34%),
    radial-gradient(circle at 8% 0%, rgba(215, 102, 81, 0.08), transparent 30%),
    linear-gradient(155deg, rgba(31, 32, 37, 0.99), rgba(18, 19, 23, 0.99)) !important;
}

/* Book Info joins the graphite dark world while retaining book art and coral actions. */
html.theme-dark .book-details-panel,
body.theme-dark .book-details-panel {
  background:
    radial-gradient(circle at 82% -2%, rgba(210, 84, 73, 0.105), transparent 24rem),
    radial-gradient(circle at 8% 5%, rgba(104, 112, 142, 0.045), transparent 20rem),
    linear-gradient(180deg, #15161a 0%, #111216 56%, #0e0f12 100%) !important;
  color: var(--ink) !important;
}

html.theme-dark .book-details-sheet,
body.theme-dark .book-details-sheet {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .book-details-close.collection-back,
body.theme-dark .book-details-close.collection-back {
  border: 1px solid rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(248, 239, 224, 0.07), transparent 58%),
    linear-gradient(180deg, rgba(38, 39, 44, 0.96), rgba(23, 24, 28, 0.96)) !important;
  color: rgba(238, 233, 225, 0.78) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(248, 239, 224, 0.05) !important;
}

html.theme-dark .book-details-title-wrap textarea,
body.theme-dark .book-details-title-wrap textarea {
  background: transparent !important;
  color: rgba(245, 241, 234, 0.96) !important;
}

html.theme-dark .book-details-cover,
body.theme-dark .book-details-cover {
  background:
    radial-gradient(circle at 50% 22%, rgba(248, 239, 224, 0.055), transparent 56%),
    linear-gradient(155deg, rgba(35, 36, 41, 0.96), rgba(22, 23, 27, 0.96)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(235, 228, 217, 0.1),
    0 14px 30px rgba(0, 0, 0, 0.24) !important;
}

html.theme-dark .book-details-cover.has-image,
body.theme-dark .book-details-cover.has-image {
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .book-details-meta,
body.theme-dark .book-details-meta,
html.theme-dark .book-details-quote-card,
body.theme-dark .book-details-quote-card,
html.theme-dark .book-details-topics-card,
body.theme-dark .book-details-topics-card,
html.theme-dark .book-details-source-card,
body.theme-dark .book-details-source-card,
html.theme-dark .book-details-insights-card,
body.theme-dark .book-details-insights-card,
html.theme-dark .book-details-insight-tile,
body.theme-dark .book-details-insight-tile,
html.theme-dark .book-details-week-strip,
body.theme-dark .book-details-week-strip {
  --topic-card-bg: linear-gradient(145deg, rgba(34, 35, 40, 0.88), rgba(23, 24, 28, 0.9));
  --topic-card-border: rgba(235, 228, 217, 0.12);
  --topic-card-shadow:
    0 16px 34px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(248, 239, 224, 0.04);
  border-color: rgba(235, 228, 217, 0.12) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(248, 239, 224, 0.045), transparent 42%),
    linear-gradient(145deg, rgba(34, 35, 40, 0.88), rgba(23, 24, 28, 0.9)) !important;
  color: rgba(241, 237, 230, 0.92) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

html.theme-dark .book-details-meta div + div,
body.theme-dark .book-details-meta div + div,
html.theme-dark .book-details-source-list div,
body.theme-dark .book-details-source-list div,
html.theme-dark .book-details-source-card,
body.theme-dark .book-details-source-card {
  border-color: rgba(235, 228, 217, 0.11) !important;
}

html.theme-dark .book-details-meta dt,
body.theme-dark .book-details-meta dt,
html.theme-dark .book-details-source-list dt,
body.theme-dark .book-details-source-list dt,
html.theme-dark .book-details-insight-tile small,
body.theme-dark .book-details-insight-tile small,
html.theme-dark .book-details-insight-tile em,
body.theme-dark .book-details-insight-tile em {
  color: rgba(185, 182, 176, 0.68) !important;
}

html.theme-dark .book-details-meta dd,
body.theme-dark .book-details-meta dd,
html.theme-dark .book-details-source-list dd,
body.theme-dark .book-details-source-list dd,
html.theme-dark .book-details-insight-tile strong,
body.theme-dark .book-details-insight-tile strong,
html.theme-dark .book-details-insights-head h3,
body.theme-dark .book-details-insights-head h3 {
  color: rgba(241, 237, 230, 0.92) !important;
}

html.theme-dark .book-details-quote-card blockquote p,
html.theme-dark .book-details-quote-empty p,
body.theme-dark .book-details-quote-card blockquote p,
body.theme-dark .book-details-quote-empty p {
  color: rgba(245, 241, 234, 0.95) !important;
}

html.theme-dark .book-details-quote-card blockquote small,
body.theme-dark .book-details-quote-card blockquote small,
html.theme-dark .book-details-summary,
body.theme-dark .book-details-summary,
html.theme-dark .book-details-status,
body.theme-dark .book-details-status {
  color: rgba(190, 187, 181, 0.72) !important;
}

html.theme-dark .book-details-quote-motif,
body.theme-dark .book-details-quote-motif {
  opacity: 0.24 !important;
  mix-blend-mode: screen !important;
  filter: invert(1) grayscale(0.35) saturate(0.45) brightness(1.03) contrast(0.96) !important;
}

html.theme-dark .book-details-topic-chip,
body.theme-dark .book-details-topic-chip {
  border-color: color-mix(in srgb, var(--topic-color, #73b5a8) 32%, rgba(235, 228, 217, 0.12)) !important;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--topic-color, #73b5a8) 14%, transparent), transparent 60%),
    rgba(35, 36, 41, 0.72) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

html.theme-dark .book-details-resume-actions button,
body.theme-dark .book-details-resume-actions button,
html.theme-dark .book-details-secondary-actions button,
body.theme-dark .book-details-secondary-actions button {
  border-color: rgba(235, 228, 217, 0.12) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(248, 239, 224, 0.055), transparent 58%),
    linear-gradient(180deg, rgba(38, 39, 44, 0.96), rgba(23, 24, 28, 0.96)) !important;
  color: rgba(241, 237, 230, 0.9) !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(248, 239, 224, 0.05) !important;
}

html.theme-dark .book-details-resume-actions .book-details-primary,
body.theme-dark .book-details-resume-actions .book-details-primary {
  border-color: rgba(232, 119, 105, 0.2) !important;
  background: linear-gradient(180deg, rgba(190, 78, 67, 0.92), rgba(143, 51, 48, 0.96)) !important;
  color: rgba(255, 249, 240, 0.97) !important;
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.25),
    0 8px 18px rgba(151, 49, 44, 0.16),
    inset 0 1px 0 rgba(255, 235, 222, 0.13) !important;
}

html.theme-dark .book-details-secondary-actions .book-details-danger,
body.theme-dark .book-details-secondary-actions .book-details-danger {
  color: rgba(242, 132, 119, 0.94) !important;
}

/* Medium Who’s Speaking popover: roomier than the compact pass without returning to a modal sheet. */
.character-legend-sheet {
  width: min(430px, calc(100vw - 20px));
  max-height: min(540px, 66dvh);
  padding: 20px;
  border-radius: 27px;
  gap: 14px;
}

.character-legend-close {
  top: 13px;
  right: 13px;
  width: 33px;
  height: 33px;
}

.character-legend-close::before,
.character-legend-close::after {
  left: 9px;
  right: 9px;
  top: 15px;
}

.character-legend-header {
  padding-right: 38px;
}

.character-legend-title-row {
  gap: 12px;
}

.character-legend-title-mark {
  width: 45px;
  height: 45px;
  flex-basis: 45px;
  border-radius: 15px;
}

.character-legend-title-mark svg {
  width: 27px;
  height: 27px;
}

.character-legend-kicker {
  font-size: 0.6rem;
}

.character-legend-header h2 {
  font-size: clamp(1.48rem, 5.1vw, 1.82rem);
}

.character-legend-header > small {
  margin-top: 10px;
  padding: 5px 9px;
  font-size: 0.66rem;
}

.character-legend-list {
  gap: 9px;
}

.character-legend-item {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 3px 11px;
  min-height: 59px;
  padding: 10px 12px;
  border-radius: 17px;
}

.character-legend-swatch {
  width: 34px;
  height: 34px;
}

.character-legend-swatch::after {
  font-size: 1.3rem;
}

.character-legend-name {
  font-size: 1rem;
}

.character-legend-item small {
  font-size: 0.67rem;
}

.character-legend-health,
.character-legend-debug {
  padding: 12px 13px;
  border-radius: 17px;
}

.character-legend-health {
  gap: 8px;
}

.character-legend-health small,
.character-legend-debug small {
  font-size: 0.74rem;
}

.character-legend-debug strong {
  font-size: 1.08rem;
}

@media (max-width: 520px) {
  .character-legend-sheet {
    width: min(400px, calc(100vw - 16px));
    max-height: min(500px, 64dvh);
    padding: 18px;
    border-radius: 25px;
  }

  .character-legend-title-mark {
    width: 43px;
    height: 43px;
    flex-basis: 43px;
  }
}

/* Home discovery keeps its colour identity on the shared graphite foundation. */

/* Papers receive their own neutral slate panel rather than the older brown list surface. */
html.theme-dark #collectionView [data-library-section="papers"] .library-stack-list,
body.theme-dark #collectionView [data-library-section="papers"] .library-stack-list {
  border-color: rgba(204, 214, 224, 0.13) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(91, 136, 151, 0.07), transparent 38%),
    radial-gradient(circle at 12% 0%, rgba(248, 239, 224, 0.035), transparent 42%),
    linear-gradient(180deg, rgba(32, 34, 40, 0.9), rgba(22, 24, 29, 0.9)) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(248, 239, 224, 0.035) !important;
}

html.theme-dark #collectionView .library-stack-row.is-papers,
body.theme-dark #collectionView .library-stack-row.is-papers {
  background: rgba(29, 31, 37, 0.54) !important;
}

html.theme-dark #collectionView .library-stack-row.is-papers + .library-stack-row.is-papers,
body.theme-dark #collectionView .library-stack-row.is-papers + .library-stack-row.is-papers {
  border-top-color: rgba(204, 214, 224, 0.11) !important;
}

html.theme-dark #collectionView .library-stack-row.is-papers .collection-cover,
body.theme-dark #collectionView .library-stack-row.is-papers .collection-cover {
  border-color: rgba(204, 214, 224, 0.11) !important;
  background:
    radial-gradient(circle at 28% 16%, rgba(248, 239, 224, 0.06), transparent 45%),
    linear-gradient(145deg, rgba(47, 50, 58, 0.92), rgba(29, 31, 37, 0.94)) !important;
  color: rgba(213, 218, 222, 0.82) !important;
}

/* PDF source layout boundary: shared reader chrome, independent fixed geometry. */
body.pdf-source-mode #pdfSourcePanel.reader-panel {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

body.pdf-source-mode #pdfSourcePanel.reader-panel > .pdf-source-sheet > .pdf-source-header {
  position: fixed !important;
  inset:
    var(--screen-pad-top)
    var(--screen-pad-right)
    auto
    var(--screen-pad-left) !important;
  z-index: 120 !important;
  width: auto !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  pointer-events: none !important;
}

body.pdf-source-mode #pdfSourcePanel.reader-panel > .pdf-source-sheet > .pdf-source-header > button,
body.pdf-source-mode #pdfSourcePanel.reader-panel > .pdf-source-sheet > .pdf-source-header > .pdf-source-top-actions {
  pointer-events: auto !important;
}

body.pdf-source-mode #pdfSourcePanel.reader-panel #pdfSourceFrame.pdf-source-frame {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  min-height: 120px !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.pdf-source-text-word.is-selected.is-recentering::before {
  animation: pdf-source-word-recentre 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pdf-source-word-recentre {
  0% {
    background: color-mix(in srgb, var(--rhythm-coral) 10%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--rhythm-coral) 12%, transparent);
    opacity: 0.82;
    transform: scale(0.94);
  }
  28% {
    background: color-mix(in srgb, var(--rhythm-amber) 28%, transparent);
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--rhythm-amber) 13%, transparent),
      0 0 18px color-mix(in srgb, var(--rhythm-amber) 22%, transparent);
    opacity: 1;
    transform: scale(1.045);
  }
  68% {
    background: color-mix(in srgb, var(--rhythm-amber) 17%, transparent);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--rhythm-amber) 12%, transparent),
      0 0 9px color-mix(in srgb, var(--rhythm-amber) 12%, transparent);
    transform: scale(0.995);
  }
  100% {
    background: rgba(225, 158, 56, 0.32);
    box-shadow:
      0 0 0 1px rgba(203, 124, 34, 0.22),
      0 0 9px rgba(225, 158, 56, 0.13);
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdf-source-text-word.is-selected.is-recentering::before {
    animation: none;
  }
}

body.pdf-source-mode #pdfSourcePanel.reader-panel[hidden],
#pdfSourcePanel[hidden],
body:not(.pdf-source-mode) #pdfSourcePanel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Main reader corner controls share the cooler graphite dark material. */
html.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
html.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton),
html.theme-dark #pdfSourcePanel .pdf-source-header :is(#closePdfSourceButton, #pdfSourceFocusButton),
body.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
body.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton),
body.theme-dark #pdfSourcePanel .pdf-source-header :is(#closePdfSourceButton, #pdfSourceFocusButton) {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(248, 239, 224, 0.07), transparent 52%),
    linear-gradient(180deg, rgba(36, 37, 42, 0.98), rgba(23, 24, 28, 0.98)) !important;
  color: rgba(239, 235, 228, 0.84) !important;
  box-shadow:
    0 11px 24px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(248, 239, 224, 0.05) !important;
}

html.theme-dark :is(#textPanelButton, #ebookBackButton) .home-symbol,
html.theme-dark #closePdfSourceButton .home-symbol,
html.theme-dark :is(#ebookModeButton, #ebookSpeedModeButton, #pdfSourceFocusButton) .mode-switch-symbol,
body.theme-dark :is(#textPanelButton, #ebookBackButton, #closePdfSourceButton) .home-symbol,
body.theme-dark :is(#ebookModeButton, #ebookSpeedModeButton, #pdfSourceFocusButton) .mode-switch-symbol {
  color: inherit !important;
}

html.theme-dark :is(#textPanelButton, #ebookBackButton, #closePdfSourceButton):is(:hover, :focus-visible),
body.theme-dark :is(#textPanelButton, #ebookBackButton, #closePdfSourceButton):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--rhythm-coral) 27%, transparent) !important;
  color: var(--rhythm-coral) !important;
}

html.theme-dark :is(#ebookModeButton, #ebookSpeedModeButton, #pdfSourceFocusButton):is(:hover, :focus-visible),
body.theme-dark :is(#ebookModeButton, #ebookSpeedModeButton, #pdfSourceFocusButton):is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--teal) 34%, transparent) !important;
  color: var(--teal) !important;
}

/* The open-book mark should feel lighter than the surrounding control. */
#ebookModeButton .mode-switch-symbol {
  width: 26px !important;
  height: 26px !important;
  stroke-width: 1.72 !important;
  opacity: 0.84;
}

/* Contents v2: a compact reading map with the chapter list as the destination. */
.chapter-panel {
  --contents-column-width: 760px;
  --contents-body-clearance: clamp(18px, 3vh, 30px);
}

.chapter-panel .chapter-sheet {
  --chapter-row-height: 64px;
  padding-top: calc(var(--contents-top-inset) + var(--contents-control-size) + var(--contents-body-clearance)) !important;
}

.chapter-panel :is(
  .chapter-screen-heading,
  .chapter-search,
  .chapter-current-card,
  .chapter-journey-card,
  .chapter-list-heading,
  .chapter-list
) {
  width: min(100%, var(--contents-column-width)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.chapter-panel .chapter-screen-heading {
  margin-bottom: clamp(14px, 2.2vh, 22px) !important;
}

.chapter-panel .chapter-screen-heading h2 {
  font-size: clamp(1.9rem, 5.6vw, 2.55rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.012em !important;
}

.chapter-panel .chapter-screen-heading p {
  margin-top: 5px !important;
  color: rgba(79, 74, 68, 0.66) !important;
  font-size: clamp(0.8rem, 2.25vw, 0.92rem) !important;
}

.chapter-panel .chapter-search {
  min-height: 44px !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 10px !important;
  margin-bottom: clamp(12px, 2vh, 18px) !important;
  border-color: rgba(108, 99, 87, 0.13) !important;
  background: linear-gradient(180deg, rgba(250, 248, 243, 0.94), rgba(241, 237, 230, 0.92)) !important;
  box-shadow:
    0 10px 24px rgba(43, 39, 34, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

.chapter-panel .chapter-search input {
  font-size: clamp(0.84rem, 2.35vw, 0.94rem) !important;
}

.chapter-panel .chapter-panel-kicker {
  color: rgba(176, 65, 56, 0.86) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.15em !important;
}

.chapter-panel .chapter-journey-card {
  padding: 14px 16px !important;
  gap: 12px !important;
  border-radius: 14px !important;
}

.chapter-panel .chapter-journey-meta {
  padding-top: 9px !important;
  font-size: clamp(0.7rem, 2.05vw, 0.8rem) !important;
}

.chapter-panel .chapter-list-heading {
  margin-top: clamp(15px, 2.2vh, 22px) !important;
  margin-bottom: 7px !important;
  padding: 0 4px !important;
  color: rgba(67, 61, 53, 0.72) !important;
}

.chapter-panel .chapter-list {
  --chapter-row-gap: 0px;
}

.chapter-panel .chapter-option-card {
  position: relative !important;
  min-height: var(--chapter-row-height) !important;
  grid-template-columns: 27px minmax(0, 1fr) 14px !important;
  gap: 11px !important;
  margin: 0 !important;
  padding: 0 7px 0 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(112, 102, 89, 0.11) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-option-number {
  width: 27px !important;
  height: 27px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(83, 104, 98, 0.72) !important;
  font-family: var(--reading-font) !important;
  font-size: 0.8rem !important;
  font-weight: 580 !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-option-copy {
  gap: 4px !important;
}

.chapter-panel .chapter-option-copy strong {
  font-size: clamp(0.92rem, 2.7vw, 1.04rem) !important;
  font-weight: 520 !important;
}

.chapter-panel .chapter-option-copy small {
  color: rgba(91, 83, 72, 0.58) !important;
  font-size: clamp(0.67rem, 1.95vw, 0.76rem) !important;
}

.chapter-panel .chapter-option.is-current .chapter-option-card {
  min-height: var(--chapter-row-height) !important;
  border-bottom-color: rgba(190, 76, 65, 0.14) !important;
  background: linear-gradient(90deg, rgba(190, 76, 65, 0.075), rgba(45, 117, 107, 0.035), transparent 82%) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rhythm-coral) 78%, transparent) !important;
}

.chapter-panel .chapter-option.is-current .chapter-option-number,
.chapter-panel .chapter-option.is-current .chapter-option-copy strong,
.chapter-panel .chapter-option.is-current .chapter-option-chevron {
  color: var(--rhythm-coral) !important;
}

.chapter-panel .chapter-volume-divider {
  min-height: 30px !important;
  padding: 14px 4px 6px !important;
  border-bottom-color: rgba(112, 102, 89, 0.11) !important;
  background: transparent !important;
}

.chapter-panel .chapter-volume-divider span {
  color: rgba(65, 76, 72, 0.68) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.66rem, 1.95vw, 0.75rem) !important;
  font-weight: 730 !important;
  letter-spacing: 0.14em !important;
}

.chapter-panel .chapter-volume-divider.is-level-2 {
  padding-left: 16px !important;
}

.chapter-panel .chapter-volume-divider.is-level-3 {
  padding-left: 28px !important;
}

/* Contents corner controls join the graphite reader chrome. */
html.theme-dark .chapter-panel :is(#closeChapterButton, #chapterModeButton),
body.theme-dark .chapter-panel :is(#closeChapterButton, #chapterModeButton) {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(248, 239, 224, 0.07), transparent 52%),
    linear-gradient(180deg, rgba(36, 37, 42, 0.98), rgba(23, 24, 28, 0.98)) !important;
  color: rgba(239, 235, 228, 0.82) !important;
  box-shadow:
    0 11px 24px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(248, 239, 224, 0.05) !important;
}

html.theme-dark .chapter-panel #closeChapterButton:is(:hover, :focus-visible),
body.theme-dark .chapter-panel #closeChapterButton:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--rhythm-coral) 27%, transparent) !important;
  color: var(--rhythm-coral) !important;
}

html.theme-dark .chapter-panel #chapterModeButton:is(:hover, :focus-visible),
body.theme-dark .chapter-panel #chapterModeButton:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--teal) 34%, transparent) !important;
  color: var(--teal) !important;
}

html.theme-dark .chapter-panel,
html.theme-dark .chapter-panel .chapter-sheet,
body.theme-dark .chapter-panel,
body.theme-dark .chapter-panel .chapter-sheet {
  background:
    radial-gradient(circle at 86% -8%, rgba(70, 112, 119, 0.075), transparent 36%),
    radial-gradient(circle at 10% 10%, rgba(196, 78, 66, 0.035), transparent 29%),
    linear-gradient(180deg, #111216, #0e0f12) !important;
  color: var(--ink) !important;
}

html.theme-dark .chapter-panel .chapter-screen-heading p,
body.theme-dark .chapter-panel .chapter-screen-heading p {
  color: rgba(190, 187, 180, 0.68) !important;
}

html.theme-dark .chapter-panel .chapter-search,
body.theme-dark .chapter-panel .chapter-search {
  border-color: rgba(235, 228, 217, 0.10) !important;
  background: linear-gradient(180deg, rgba(34, 35, 40, 0.96), rgba(24, 25, 29, 0.96)) !important;
  box-shadow:
    0 11px 25px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(248, 239, 224, 0.045) !important;
}

html.theme-dark .chapter-panel .chapter-journey-card,
body.theme-dark .chapter-panel .chapter-journey-card {
  border-color: rgba(235, 228, 217, 0.10) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(126, 177, 166, 0.055), transparent 44%),
    linear-gradient(180deg, rgba(31, 33, 38, 0.94), rgba(23, 24, 28, 0.94)) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

html.theme-dark .chapter-panel .chapter-current-text strong,
body.theme-dark .chapter-panel .chapter-current-text strong,
html.theme-dark .chapter-panel .chapter-option-copy strong,
body.theme-dark .chapter-panel .chapter-option-copy strong {
  color: rgba(239, 235, 228, 0.91) !important;
}

html.theme-dark .chapter-panel .chapter-current-text small,
body.theme-dark .chapter-panel .chapter-current-text small,
html.theme-dark .chapter-panel .chapter-option-copy small,
body.theme-dark .chapter-panel .chapter-option-copy small,
html.theme-dark .chapter-panel .chapter-list-heading,
body.theme-dark .chapter-panel .chapter-list-heading,
html.theme-dark .chapter-panel .chapter-list-heading small,
body.theme-dark .chapter-panel .chapter-list-heading small {
  color: rgba(187, 183, 176, 0.64) !important;
}

html.theme-dark .chapter-panel .chapter-option-card,
body.theme-dark .chapter-panel .chapter-option-card,
html.theme-dark .chapter-panel .chapter-volume-divider,
body.theme-dark .chapter-panel .chapter-volume-divider {
  border-bottom-color: rgba(235, 228, 217, 0.09) !important;
}

html.theme-dark .chapter-panel .chapter-option-number,
body.theme-dark .chapter-panel .chapter-option-number,
html.theme-dark .chapter-panel .chapter-volume-divider span,
body.theme-dark .chapter-panel .chapter-volume-divider span {
  color: rgba(126, 177, 166, 0.72) !important;
}

html.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-card {
  background: linear-gradient(90deg, rgba(112, 49, 47, 0.24), rgba(31, 59, 58, 0.15), transparent 84%) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rhythm-coral) 82%, transparent) !important;
}

html.theme-dark .chapter-panel .chapter-option.is-current :is(.chapter-option-number, .chapter-option-copy strong, .chapter-option-chevron),
body.theme-dark .chapter-panel .chapter-option.is-current :is(.chapter-option-number, .chapter-option-copy strong, .chapter-option-chevron) {
  color: var(--rhythm-coral) !important;
}

@media (max-width: 520px) {
  .chapter-panel {
    --contents-body-clearance: clamp(14px, 2.4vh, 22px);
  }

  .chapter-panel .chapter-sheet {
    --chapter-row-height: 62px;
  }

  }

/* Contents v3: quieter editorial finish. */
.chapter-panel {
  --contents-column-width: 720px;
}

.chapter-panel::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  background:
    repeating-linear-gradient(112deg, transparent 0 6px, rgba(74, 67, 58, 0.016) 6px 7px),
    radial-gradient(circle at 76% -8%, rgba(45, 117, 107, 0.055), transparent 38%);
}

.chapter-panel .chapter-sheet {
  z-index: 1 !important;
  background: transparent !important;
  background-image: none !important;
}

.chapter-panel #chapterBookTitle {
  font-family: var(--reading-font) !important;
  font-size: clamp(0.88rem, 2.65vw, 1rem) !important;
  font-weight: 570 !important;
  letter-spacing: 0.006em !important;
}

.chapter-panel #chapterBookMeta {
  color: rgba(87, 80, 70, 0.58) !important;
  font-size: clamp(0.69rem, 2vw, 0.77rem) !important;
  font-weight: 550 !important;
  letter-spacing: 0.025em !important;
}

.chapter-panel .chapter-screen-heading h2 {
  font-size: clamp(1.72rem, 5vw, 2.2rem) !important;
  font-weight: 510 !important;
}

.chapter-panel .chapter-screen-heading p {
  font-size: clamp(0.77rem, 2.15vw, 0.87rem) !important;
}

.chapter-panel .chapter-search {
  min-height: 43px !important;
  border-color: rgba(104, 95, 83, 0.10) !important;
  background: rgba(245, 241, 234, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

.chapter-panel .chapter-journey-card {
  padding: 12px 4px 9px !important;
  gap: 9px !important;
  border: 0 !important;
  border-top: 1px solid rgba(106, 97, 85, 0.10) !important;
  border-bottom: 1px solid rgba(106, 97, 85, 0.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-journey-track {
  --chapter-journey-stage-width: clamp(88px, 24vw, 108px);
  --chapter-journey-gap: clamp(8px, 2.2vw, 14px);
  padding-bottom: 5px;
}

.chapter-panel .chapter-journey-node {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.chapter-panel .chapter-journey-track::before {
  top: 8px;
  height: 1px;
}

.chapter-panel .chapter-journey-stage {
  gap: 6px;
}

.chapter-panel .chapter-journey-stage strong {
  font-size: clamp(0.78rem, 2.35vw, 0.9rem);
}

.chapter-panel .chapter-journey-meta {
  display: none !important;
}

.chapter-panel .chapter-list-heading {
  margin-top: clamp(20px, 3vh, 30px) !important;
  margin-bottom: 9px !important;
}

.chapter-panel .chapter-option,
.chapter-panel .chapter-option-card {
  min-height: 68px !important;
}

.chapter-panel .chapter-option-card {
  grid-template-columns: 28px minmax(0, 1fr) auto 12px !important;
  gap: 12px !important;
  padding: 5px 5px 5px 7px !important;
  overflow: visible !important;
  background: transparent !important;
  transition: color 160ms ease, box-shadow 160ms ease !important;
}

.chapter-panel .chapter-option-number {
  align-self: center !important;
  color: rgba(63, 104, 94, 0.62) !important;
  font-size: 0.76rem !important;
  font-variant-numeric: tabular-nums;
}

.chapter-panel .chapter-option-copy {
  align-self: center !important;
  gap: 5px !important;
}

.chapter-panel .chapter-option-copy strong {
  font-family: var(--reading-font) !important;
  font-size: clamp(0.98rem, 2.9vw, 1.11rem) !important;
  font-weight: 500 !important;
  line-height: 1.14 !important;
}

.chapter-panel .chapter-option-copy small:empty {
  display: none !important;
}

.chapter-option-page {
  align-self: center;
  color: rgba(88, 80, 69, 0.52);
  font-family: var(--ui-font);
  font-size: clamp(0.68rem, 1.9vw, 0.75rem);
  font-variant-numeric: tabular-nums;
  font-weight: 560;
  white-space: nowrap;
}

.chapter-panel .chapter-option-chevron {
  align-self: center !important;
  opacity: 0 !important;
  transform: translateX(-3px);
  transition: opacity 150ms ease, transform 150ms ease !important;
}

.chapter-panel .chapter-option:is(:hover, :focus-visible, .is-current) .chapter-option-chevron {
  opacity: 0.64 !important;
  transform: translateX(0);
}

.chapter-panel .chapter-option:is(.is-current, .is-complete) .chapter-option-progress {
  opacity: 0.72 !important;
}

.chapter-panel .chapter-option.is-current .chapter-option-card {
  border-bottom-color: rgba(103, 94, 82, 0.11) !important;
  background: transparent !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rhythm-coral) 78%, transparent) !important;
}

.chapter-panel .chapter-option.is-current .chapter-option-page {
  color: rgba(177, 67, 58, 0.75);
}

.chapter-panel .chapter-volume-divider {
  position: relative !important;
  min-height: 38px !important;
  margin-top: 12px !important;
  padding: 17px 4px 6px !important;
  gap: 12px;
  border-bottom: 0 !important;
}

.chapter-panel .chapter-volume-divider::after {
  content: "";
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, rgba(91, 104, 98, 0.18), transparent);
}

.chapter-panel .chapter-volume-divider span {
  flex: 0 1 auto;
  max-width: 76%;
  font-size: clamp(0.62rem, 1.8vw, 0.7rem) !important;
  letter-spacing: 0.16em !important;
}

html.theme-dark .chapter-panel::before,
body.theme-dark .chapter-panel::before {
  opacity: 0.34;
  background:
    repeating-linear-gradient(112deg, transparent 0 6px, rgba(238, 232, 223, 0.008) 6px 7px),
    radial-gradient(circle at 76% -8%, rgba(62, 118, 117, 0.075), transparent 38%);
}

html.theme-dark .chapter-panel .chapter-sheet,
body.theme-dark .chapter-panel .chapter-sheet {
  background: transparent !important;
  background-image: none !important;
}

html.theme-dark .chapter-panel #chapterBookTitle,
body.theme-dark .chapter-panel #chapterBookTitle {
  color: rgba(239, 235, 228, 0.9) !important;
}

html.theme-dark .chapter-panel #chapterBookMeta,
body.theme-dark .chapter-panel #chapterBookMeta {
  color: rgba(182, 179, 172, 0.58) !important;
}

html.theme-dark .chapter-panel .chapter-search,
body.theme-dark .chapter-panel .chapter-search {
  border-color: rgba(235, 228, 217, 0.075) !important;
  background: rgba(28, 29, 34, 0.72) !important;
  box-shadow: inset 0 1px 0 rgba(248, 239, 224, 0.035) !important;
}

html.theme-dark .chapter-panel .chapter-journey-card,
body.theme-dark .chapter-panel .chapter-journey-card {
  border: 0 !important;
  border-top: 1px solid rgba(235, 228, 217, 0.08) !important;
  border-bottom: 1px solid rgba(235, 228, 217, 0.08) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark .chapter-option-page,
body.theme-dark .chapter-option-page {
  color: rgba(182, 179, 172, 0.52) !important;
}

html.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-card {
  background: transparent !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--rhythm-coral) 82%, transparent) !important;
}

html.theme-dark .chapter-panel .chapter-volume-divider::after,
body.theme-dark .chapter-panel .chapter-volume-divider::after {
  background: linear-gradient(90deg, rgba(126, 177, 166, 0.17), transparent);
}

@media (max-width: 520px) {
  .chapter-panel .chapter-option-card {
    grid-template-columns: 25px minmax(0, 1fr) auto 10px !important;
    gap: 9px !important;
  }

  .chapter-panel .chapter-option-page {
    font-size: 0.66rem;
  }
}

/* Loading surfaces use the same cool graphite and teal motion language. */
html.theme-dark .global-load-indicator,
body.theme-dark .global-load-indicator {
  border-color: rgba(235, 228, 217, 0.10) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(248, 239, 224, 0.055), transparent 46%),
    linear-gradient(180deg, rgba(35, 36, 41, 0.96), rgba(22, 23, 27, 0.97)) !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(248, 239, 224, 0.045) !important;
  color: rgba(239, 235, 228, 0.9) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.04) !important;
  backdrop-filter: blur(18px) saturate(1.04) !important;
}

html.theme-dark .global-load-indicator::before,
body.theme-dark .global-load-indicator::before {
  background:
    linear-gradient(
      90deg,
      #c35b51 0 var(--load-progress),
      rgba(235, 228, 217, 0.10) var(--load-progress),
      rgba(235, 228, 217, 0.10) 100%
    ) !important;
}

html.theme-dark .global-load-indicator::after,
body.theme-dark .global-load-indicator::after {
  background: linear-gradient(90deg, transparent, rgba(248, 239, 224, 0.52), transparent) !important;
  opacity: 0.3 !important;
}

html.theme-dark .global-load-mark,
body.theme-dark .global-load-mark {
  color: rgba(239, 235, 228, 0.9);
}

html.theme-dark .global-load-label,
body.theme-dark .global-load-label {
  color: rgba(239, 235, 228, 0.88) !important;
}

html.theme-dark .global-load-value,
body.theme-dark .global-load-value {
  border: 1px solid rgba(215, 102, 91, 0.12);
  background: rgba(195, 91, 81, 0.09) !important;
  color: rgba(225, 116, 105, 0.94) !important;
}

html.theme-dark .global-load-cancel,
body.theme-dark .global-load-cancel {
  border-color: rgba(115, 181, 168, 0.16) !important;
  background: rgba(115, 181, 168, 0.07) !important;
  color: rgba(164, 211, 202, 0.9) !important;
}

html.theme-dark .discover-loading span,
body.theme-dark .discover-loading span {
  background: var(--teal) !important;
  box-shadow: 0 0 0 4px rgba(115, 181, 168, 0.07), 0 0 13px rgba(115, 181, 168, 0.14);
}

html.theme-dark .discover-loading span:nth-child(2),
body.theme-dark .discover-loading span:nth-child(2) {
  background: color-mix(in srgb, var(--teal) 72%, #8f82cf) !important;
}

html.theme-dark .topic-live-status.is-loading,
body.theme-dark .topic-live-status.is-loading {
  border-color: rgba(115, 181, 168, 0.10) !important;
  background: rgba(27, 29, 33, 0.72) !important;
  color: rgba(196, 201, 195, 0.74) !important;
}

html.theme-dark .topic-live-status.is-loading span,
body.theme-dark .topic-live-status.is-loading span {
  background: var(--teal) !important;
  box-shadow: 0 0 0 4px rgba(115, 181, 168, 0.08), 0 0 12px rgba(115, 181, 168, 0.15) !important;
}

html.theme-dark .discover-gutenberg-loading > span,
body.theme-dark .discover-gutenberg-loading > span {
  border-color: rgba(235, 228, 217, 0.075) !important;
  background: linear-gradient(180deg, rgba(31, 32, 37, 0.90), rgba(23, 24, 28, 0.92)) !important;
  box-shadow: inset 0 1px 0 rgba(248, 239, 224, 0.025) !important;
}

html.theme-dark .discover-gutenberg-loading :is(i, b, small),
body.theme-dark .discover-gutenberg-loading :is(i, b, small) {
  background:
    linear-gradient(
      100deg,
      rgba(51, 53, 60, 0.78) 20%,
      rgba(92, 126, 124, 0.42) 42%,
      rgba(51, 53, 60, 0.78) 64%
    ) !important;
  background-size: 220% 100% !important;
}

html.theme-dark .gutenberg-details-loading,
body.theme-dark .gutenberg-details-loading {
  color: rgba(137, 202, 190, 0.78) !important;
}

html.theme-dark .gutenberg-details-loading::before,
body.theme-dark .gutenberg-details-loading::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(115, 181, 168, 0.07);
  animation: topic-source-pulse 1.6s ease-in-out infinite;
  vertical-align: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-dark .gutenberg-details-loading::before,
  body.theme-dark .gutenberg-details-loading::before {
    animation: none;
  }
}

/* Focus/context surface parity: context must not introduce separate chrome layers. */
html.theme-dark body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context),
body.theme-dark:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) {
  background: var(--reader-surface) !important;
  background-color: var(--reader-surface) !important;
  background-image: none !important;
}

html.theme-dark body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) > .top-bar,
body.theme-dark:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) > .top-bar,
html.theme-dark body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) > .focus-stage,
body.theme-dark:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) > .focus-stage {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.theme-dark body:not(.ebook-mode) .reader-panel .focus-stage:has(#wordDisplay.has-context)::before,
body.theme-dark:not(.ebook-mode) .reader-panel .focus-stage:has(#wordDisplay.has-context)::before {
  display: block !important;
  content: "" !important;
  background: linear-gradient(
    to bottom,
    var(--reader-surface) 0%,
    color-mix(in srgb, var(--reader-surface) 88%, transparent) 42%,
    transparent 100%
  ) !important;
}

/* One shared translucent graphite dock keeps both modes on the same material. */
html.theme-dark body:not(.ebook-mode) .reader-panel .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel .bottom-dock,
html.theme-dark body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) .bottom-dock {
  border: 0 !important;
  border-radius: 34px 34px 0 0 / 30px 30px 0 0 !important;
  background:
    linear-gradient(color-mix(in srgb, var(--rhythm-amber) 20%, transparent), color-mix(in srgb, var(--rhythm-amber) 20%, transparent)) top / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(29, 30, 35, 0.78), rgba(20, 21, 25, 0.68)) !important;
  box-shadow:
    0 -12px 30px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(248, 239, 224, 0.035) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
}

html.theme-dark body:not(.ebook-mode) .reader-panel .bottom-dock::before,
html.theme-dark body:not(.ebook-mode) .reader-panel .bottom-dock::after,
body.theme-dark:not(.ebook-mode) .reader-panel .bottom-dock::before,
body.theme-dark:not(.ebook-mode) .reader-panel .bottom-dock::after {
  display: none !important;
  content: none !important;
}

/* The central Play control keeps its coral outline in both reader modes. */
body.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button:is(:hover, :focus, :focus-visible, :active) {
  border: 1.5px solid color-mix(in srgb, var(--rhythm-coral) 64%, transparent) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.15),
    0 0 0 1px color-mix(in srgb, var(--rhythm-coral) 8%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--rhythm-coral) 82%, transparent) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button {
  border-color: rgba(221, 91, 76, 0.68) !important;
  box-shadow:
    0 11px 26px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(221, 91, 76, 0.075),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

/* Reader corner controls use one clean neutral edge in both themes. */
.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton) {
  border: 1px solid rgba(86, 76, 63, 0.11) !important;
  border-radius: 32% !important;
  outline: 0 !important;
  box-shadow:
    0 8px 18px rgba(60, 48, 33, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.48) !important;
}

html.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
html.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton),
body.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
body.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton) {
  border-color: rgba(235, 228, 217, 0.09) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.27),
    inset 0 1px 0 rgba(248, 239, 224, 0.035) !important;
}

/* The reader-mode glyph remains coral regardless of theme. */
:is(#ebookModeButton, #ebookSpeedModeButton),
:is(#ebookModeButton, #ebookSpeedModeButton) .mode-switch-symbol,
:is(#ebookModeButton, #ebookSpeedModeButton) .mode-switch-symbol path {
  color: var(--rhythm-coral) !important;
  stroke: currentColor !important;
}

html.theme-dark body #ebookModeButton.top-mode-button,
html.theme-dark body #ebookSpeedModeButton.top-mode-button,
body.theme-dark #ebookModeButton.top-mode-button,
body.theme-dark #ebookSpeedModeButton.top-mode-button,
html.theme-dark body #ebookModeButton .mode-switch-symbol,
html.theme-dark body #ebookSpeedModeButton .mode-switch-symbol,
body.theme-dark #ebookModeButton .mode-switch-symbol,
body.theme-dark #ebookSpeedModeButton .mode-switch-symbol,
html.theme-dark body #ebookModeButton .mode-switch-symbol use,
html.theme-dark body #ebookSpeedModeButton .mode-switch-symbol use,
body.theme-dark #ebookModeButton .mode-switch-symbol use,
body.theme-dark #ebookSpeedModeButton .mode-switch-symbol use {
  color: var(--rhythm-coral) !important;
  stroke: var(--rhythm-coral) !important;
}

/* Keep the dock translucent, but remove the amber edge line. */
body:not(.ebook-mode) .reader-panel .bottom-dock,
body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) .bottom-dock {
  background: linear-gradient(180deg, rgba(246, 242, 233, 0.78), rgba(239, 232, 218, 0.68)) !important;
  box-shadow: 0 -12px 30px rgba(56, 43, 27, 0.10) !important;
}

html.theme-dark body:not(.ebook-mode) .reader-panel .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel .bottom-dock,
html.theme-dark body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) .bottom-dock,
body.theme-dark:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context) .bottom-dock {
  background: linear-gradient(180deg, rgba(29, 30, 35, 0.78), rgba(20, 21, 25, 0.68)) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.30) !important;
}

/* Borderless reader marks: full tap targets, visually quiet at rest. */
.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton) {
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: radial-gradient(circle, rgba(87, 70, 49, 0.045) 0 42%, transparent 72%) !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: background 160ms ease, transform 130ms ease, color 160ms ease !important;
}

.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton):is(:hover, :focus),
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton):is(:hover, :focus) {
  border: 0 !important;
  background: radial-gradient(circle, rgba(87, 70, 49, 0.10) 0 43%, rgba(87, 70, 49, 0.035) 58%, transparent 74%) !important;
  box-shadow: none !important;
}

.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton):focus-visible,
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton):focus-visible {
  outline: 1px solid color-mix(in srgb, var(--rhythm-coral) 46%, transparent) !important;
  outline-offset: 2px !important;
}

.reader-panel > .top-bar #textPanelButton .home-symbol,
.ebook-reader > .ebook-top-bar #ebookBackButton .home-symbol {
  color: rgba(37, 33, 28, 0.86) !important;
  stroke: currentColor !important;
}

html.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
html.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton),
body.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
body.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton) {
  border: 0 !important;
  background: radial-gradient(circle, rgba(248, 239, 224, 0.045) 0 42%, transparent 72%) !important;
  box-shadow: none !important;
}

html.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton):is(:hover, :focus),
html.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton):is(:hover, :focus),
body.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton):is(:hover, :focus),
body.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton):is(:hover, :focus) {
  background: radial-gradient(circle, rgba(248, 239, 224, 0.10) 0 43%, rgba(248, 239, 224, 0.025) 60%, transparent 74%) !important;
}

html.theme-dark .reader-panel > .top-bar #textPanelButton .home-symbol,
html.theme-dark .ebook-reader > .ebook-top-bar #ebookBackButton .home-symbol,
body.theme-dark .reader-panel > .top-bar #textPanelButton .home-symbol,
body.theme-dark .ebook-reader > .ebook-top-bar #ebookBackButton .home-symbol {
  color: rgba(239, 235, 228, 0.82) !important;
  stroke: currentColor !important;
}

/* Library collection surface: calm inventory, clear hierarchy, and Home-shell parity. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview {
  background:
    radial-gradient(circle at 82% 0%, rgba(188, 72, 64, 0.075), transparent 24rem),
    linear-gradient(180deg, #fffdf8 0%, #f8f2e9 100%) !important;
}

html.theme-dark body:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview,
body.theme-dark:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview {
  background:
    radial-gradient(circle at 82% 0%, rgba(210, 84, 73, 0.105), transparent 24rem),
    radial-gradient(circle at 8% 5%, rgba(104, 112, 142, 0.045), transparent 20rem),
    linear-gradient(180deg, #15161a 0%, #111216 56%, #0e0f12 100%) !important;
}

#inputPanel.home-ambient-active:has(#collectionView:not([hidden])) .home-ambient-canvas {
  opacity: 0.72;
}

#collectionView.collection-view {
  --library-content-width: 1160px;
  --library-gutter: clamp(16px, 3.5vw, 34px);
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(8px, 1.8vh, 18px) 0 clamp(116px, 16vh, 148px) !important;
  gap: clamp(13px, 1.8vh, 18px) !important;
  color: rgba(30, 28, 25, 0.94);
}

#collectionView > .collection-header,
#collectionView > .library-search,
#collectionView > .library-category-row,
#collectionView > .library-section {
  width: min(var(--library-content-width), calc(100vw - (var(--library-gutter) * 2))) !important;
  max-width: var(--library-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#collectionView > .collection-header.library-header {
  position: relative;
  min-height: 76px;
  margin-bottom: 0 !important;
  padding: 0 0 4px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
}

#collectionView > .collection-header h2 {
  font-size: clamp(2.35rem, 6vw, 3.15rem) !important;
}

#collectionView > .collection-header p {
  margin-top: 4px !important;
  font-size: clamp(0.94rem, 2.4vw, 1.08rem) !important;
}

#collectionView .library-add-button {
  min-width: 92px;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid rgba(185, 50, 44, 0.18);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background:
    radial-gradient(circle at 32% 0%, rgba(255, 255, 255, 0.34), transparent 50%),
    linear-gradient(180deg, rgba(201, 70, 62, 0.96), rgba(179, 48, 43, 0.96));
  color: #fffaf4;
  font-family: var(--ui-font);
  font-size: 0.9rem;
  font-weight: 720;
  box-shadow:
    0 11px 24px rgba(153, 42, 36, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

#collectionView .library-add-button > span {
  position: relative;
  width: 13px;
  height: 13px;
}

#collectionView .library-add-button > span::before,
#collectionView .library-add-button > span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

#collectionView .library-add-button > span::before {
  width: 13px;
  height: 1.8px;
}

#collectionView .library-add-button > span::after {
  width: 1.8px;
  height: 13px;
}

#collectionView .library-add-button:is(:hover, :focus-visible) {
  transform: translateY(-1px);
  box-shadow:
    0 14px 28px rgba(153, 42, 36, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

#collectionView .library-add-button:focus-visible {
  outline: 2px solid rgba(190, 52, 44, 0.28);
  outline-offset: 3px;
}

#collectionView .library-add-menu {
  position: absolute;
  z-index: 30;
  right: 0;
  top: calc(50% + 28px);
  width: min(310px, calc(100vw - (var(--library-gutter) * 2)));
  padding: 8px;
  border: 1px solid rgba(214, 202, 186, 0.68);
  border-radius: 18px;
  display: grid;
  gap: 3px;
  background:
    radial-gradient(circle at 22% -12%, rgba(255, 255, 255, 0.96), transparent 48%),
    rgba(255, 252, 246, 0.97);
  box-shadow:
    0 24px 58px rgba(53, 42, 28, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
  backdrop-filter: blur(20px) saturate(1.08);
}

#collectionView .library-add-menu[hidden] {
  display: none;
}

#collectionView .library-add-menu button {
  min-height: 58px;
  padding: 8px 10px;
  border: 0;
  border-radius: 13px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  background: transparent;
  color: rgba(40, 36, 31, 0.92);
  text-align: left;
}

#collectionView .library-add-menu button:is(:hover, :focus-visible) {
  background: rgba(193, 62, 54, 0.07);
  outline: 0;
}

#collectionView .library-add-menu svg {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 10px;
  background: rgba(193, 62, 54, 0.08);
  color: rgba(185, 50, 44, 0.9);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

#collectionView .library-add-menu button > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#collectionView .library-add-menu strong {
  font-family: var(--reading-font);
  font-size: 0.98rem;
  font-weight: 570;
}

#collectionView .library-add-menu small {
  color: rgba(92, 83, 73, 0.68);
  font-family: var(--ui-font);
  font-size: 0.7rem;
}

#collectionView > .library-search {
  min-height: 52px;
  padding: 0 12px 0 17px;
  border: 1px solid rgba(210, 200, 186, 0.54);
  border-radius: 17px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  background: rgba(255, 253, 249, 0.76);
  box-shadow:
    0 12px 30px rgba(51, 42, 30, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(17px) saturate(1.04);
  backdrop-filter: blur(17px) saturate(1.04);
}

#collectionView > .library-search:focus-within {
  border-color: rgba(192, 58, 51, 0.28);
  box-shadow:
    0 13px 32px rgba(51, 42, 30, 0.055),
    0 0 0 3px rgba(192, 58, 51, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

#collectionView > .library-search > span {
  width: 17px;
  height: 17px;
  border: 1.7px solid rgba(74, 70, 64, 0.62);
  border-radius: 50%;
}

#collectionView > .library-search > span::after {
  right: -5px;
  bottom: -3px;
  width: 7px;
  height: 1.7px;
  background: rgba(74, 70, 64, 0.62);
  transform: rotate(45deg);
}

#collectionView > .library-search input {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: rgba(35, 32, 28, 0.92);
  font-family: var(--reading-font);
  font-size: 0.98rem;
}

#collectionView .library-search-clear {
  position: relative;
  width: 29px;
  height: 29px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(96, 84, 70, 0.08);
  color: rgba(77, 69, 60, 0.58);
}

#collectionView .library-search-clear[hidden] {
  display: none;
}

#collectionView .library-search-clear::before,
#collectionView .library-search-clear::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 14px;
  height: 1.6px;
  border-radius: 999px;
  background: currentColor;
}

#collectionView .library-search-clear::before {
  transform: rotate(45deg);
}

#collectionView .library-search-clear::after {
  transform: rotate(-45deg);
}

#collectionView > .library-category-row {
  min-height: 42px;
  display: grid;
  grid-template-columns: repeat(4, minmax(84px, 1fr));
  gap: 7px;
  overflow-x: auto;
  padding: 1px;
  scrollbar-width: none;
}

#collectionView > .library-category-row::-webkit-scrollbar {
  display: none;
}

#collectionView .library-category-chip {
  min-width: 84px;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid rgba(210, 200, 186, 0.46);
  border-radius: 13px;
  gap: 7px;
  background: rgba(255, 253, 249, 0.52);
  color: rgba(78, 72, 64, 0.73);
  font-family: var(--ui-font);
  font-size: 0.78rem;
  font-weight: 640;
  box-shadow: none;
  white-space: nowrap;
}

#collectionView .library-category-chip .library-category-icon {
  width: 17px;
  height: 17px;
}

#collectionView .library-category-chip.is-selected {
  border-color: rgba(190, 52, 44, 0.22);
  background: rgba(255, 244, 241, 0.76);
  color: rgba(181, 44, 38, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

#collectionView .library-category-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: rgba(76, 67, 57, 0.07);
  color: rgba(78, 72, 64, 0.58);
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1;
}

#collectionView .library-category-chip.is-selected .library-category-count {
  background: rgba(190, 52, 44, 0.1);
  color: rgba(181, 44, 38, 0.86);
}

#collectionView > .library-section {
  display: grid;
  gap: 13px;
}

#collectionView > .library-section > .library-section-heading {
  min-height: 36px;
  padding: 0 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  gap: 16px;
}

#collectionView .library-section-heading h3 {
  margin: 0;
  color: rgba(31, 28, 25, 0.9);
  font-family: var(--reading-font);
  font-size: clamp(1.1rem, 2.8vw, 1.28rem);
  font-weight: 530;
}

#collectionView .library-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

#collectionView .library-heading-actions #collectionCountLabel {
  color: rgba(91, 82, 72, 0.58);
  font-family: var(--ui-font);
  font-size: 0.7rem;
  font-weight: 650;
}

#collectionView .library-sort-control {
  position: relative;
  min-height: 34px;
  padding: 0 26px 0 10px;
  border: 1px solid rgba(210, 200, 186, 0.52);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 253, 249, 0.6);
  color: rgba(65, 59, 52, 0.76);
  font-family: var(--ui-font);
  font-size: 0.72rem;
}

#collectionView .library-sort-control::after {
  content: "";
  position: absolute;
  right: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

#collectionView .library-sort-control > span {
  color: rgba(98, 88, 76, 0.55);
  font-size: 0.66rem;
  font-weight: 660;
}

#collectionView .library-sort-control select {
  max-width: 118px;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 680;
  outline: 0;
}

#collectionView .collection-list {
  display: grid;
  gap: clamp(22px, 3.3vh, 34px);
  overflow: visible;
}

#collectionView .library-continue-section {
  display: grid;
  gap: 9px;
}

#collectionView .library-eyebrow-heading {
  padding-inline: 2px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#collectionView .library-eyebrow-heading > span {
  color: rgba(174, 48, 42, 0.92);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#collectionView .library-eyebrow-heading > small {
  color: rgba(92, 83, 73, 0.56);
  font-family: var(--ui-font);
  font-size: 0.68rem;
}

#collectionView .library-continue-card {
  min-height: 132px;
  padding: 12px 13px;
  border: 1px solid rgba(201, 177, 158, 0.42);
  border-radius: 20px;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 5% -18%, rgba(255, 255, 255, 0.92), transparent 44%),
    linear-gradient(105deg, rgba(255, 250, 243, 0.84), rgba(250, 235, 229, 0.62));
  box-shadow:
    0 16px 40px rgba(75, 49, 33, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
}

#collectionView .library-continue-cover {
  width: 76px;
  height: 106px;
  border-radius: 7px;
}

#collectionView .library-continue-cover.has-image img {
  object-fit: cover;
}

#collectionView .library-continue-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#collectionView .library-continue-copy > strong {
  overflow: hidden;
  color: rgba(30, 27, 24, 0.94);
  font-family: var(--reading-font);
  font-size: clamp(1.12rem, 3vw, 1.42rem);
  font-weight: 560;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collectionView .library-continue-copy > small {
  overflow: hidden;
  color: rgba(86, 77, 68, 0.66);
  font-family: var(--reading-font);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collectionView .library-continue-progress {
  margin-top: 6px;
  display: grid;
  grid-template-columns: minmax(80px, 240px) auto;
  align-items: center;
  gap: 9px;
}

#collectionView .library-continue-progress > span {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(116, 101, 84, 0.16);
}

#collectionView .library-continue-progress > span > span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(181, 49, 43, 0.94), rgba(207, 91, 77, 0.82));
}

#collectionView .library-continue-progress small {
  color: rgba(156, 53, 47, 0.78);
  font-family: var(--ui-font);
  font-size: 0.66rem;
  font-weight: 720;
  white-space: nowrap;
}

#collectionView .library-continue-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#collectionView .library-resume-button {
  min-height: 42px;
  padding: 0 15px;
  border: 0;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(181, 49, 43, 0.94);
  color: #fffaf4;
  font-family: var(--ui-font);
  font-size: 0.78rem;
  font-weight: 720;
  box-shadow: 0 9px 20px rgba(155, 43, 37, 0.16);
}

#collectionView .library-resume-button > span {
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}

#collectionView .library-details-button,
#collectionView .library-book-card > .collection-menu-toggle {
  position: relative;
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(99, 86, 72, 0.12);
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  background: rgba(255, 253, 248, 0.58);
  color: rgba(88, 75, 62, 0.64);
}

#collectionView .library-details-button > span,
#collectionView .library-book-card > .collection-menu-toggle > span {
  width: 16px;
  height: 4px;
  background:
    radial-gradient(circle at 2px 2px, currentColor 0 1.8px, transparent 1.9px),
    radial-gradient(circle at 8px 2px, currentColor 0 1.8px, transparent 1.9px),
    radial-gradient(circle at 14px 2px, currentColor 0 1.8px, transparent 1.9px);
}

#collectionView .library-details-button > span::before,
#collectionView .library-details-button > span::after,
#collectionView .library-book-card > .collection-menu-toggle > span::before,
#collectionView .library-book-card > .collection-menu-toggle > span::after {
  display: none;
}

#collectionView .library-content-section {
  display: grid;
  gap: 11px;
}

#collectionView .library-content-section + .library-content-section {
  margin-top: 0;
}

#collectionView .library-content-section.is-isolated .library-content-heading {
  display: none;
}

#collectionView .library-content-heading {
  min-height: 31px;
  padding-inline: 2px;
}

#collectionView .library-content-title {
  gap: 8px;
}

#collectionView .library-content-title h4 {
  font-size: clamp(1.17rem, 3.4vw, 1.42rem);
  font-weight: 540;
}

#collectionView .library-section-icon {
  width: 19px;
  height: 19px;
}

#collectionView .library-see-all {
  min-height: 32px;
  font-family: var(--ui-font);
  font-size: 0.74rem;
  font-weight: 720;
}

#collectionView .library-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 172px));
  justify-content: start;
  gap: clamp(12px, 2vw, 18px);
}

#collectionView .library-book-card.collection-item {
  position: relative;
  min-width: 0;
  width: 100% !important;
  padding: 7px 7px 10px;
  border: 1px solid rgba(208, 197, 182, 0.45);
  border-radius: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  background: rgba(255, 253, 248, 0.66);
  box-shadow:
    0 14px 30px rgba(50, 40, 28, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  transform: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.03);
  backdrop-filter: blur(14px) saturate(1.03);
}

#collectionView .library-book-open {
  min-width: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
}

#collectionView .library-grid-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 0.7;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(197, 74, 64, 0.9), rgba(125, 90, 72, 0.78));
  font-size: 2rem;
}

#collectionView .library-grid-cover.has-image {
  background: rgba(245, 239, 229, 0.84);
}

#collectionView .library-grid-cover.has-image img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

#collectionView .library-book-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#collectionView .library-book-card-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(29, 27, 24, 0.94);
  font-family: var(--reading-font);
  font-size: 0.94rem;
  font-weight: 560;
  line-height: 1.13;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#collectionView .library-book-card-copy > small {
  overflow: hidden;
  color: rgba(91, 81, 70, 0.62);
  font-family: var(--reading-font);
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collectionView .library-book-card-status {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: rgba(99, 88, 76, 0.52);
  font-family: var(--ui-font);
  font-size: 0.61rem;
  font-weight: 640;
}

#collectionView .library-book-card-status span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collectionView .library-book-card-status span:last-child {
  color: rgba(177, 52, 46, 0.8);
}

#collectionView .library-book-card .collection-progress {
  height: 3px;
  margin-top: 2px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(109, 95, 80, 0.13);
}

#collectionView .library-book-card .collection-progress > span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: rgba(190, 55, 48, 0.82);
}

#collectionView .library-book-card > .collection-menu-toggle {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 12px;
  width: 31px;
  min-width: 31px;
  height: 31px;
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(30, 26, 22, 0.58);
  color: rgba(255, 252, 246, 0.94);
  box-shadow: 0 5px 13px rgba(30, 25, 20, 0.16);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

#collectionView .library-stack-list {
  border: 1px solid rgba(208, 197, 182, 0.46);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 253, 248, 0.64);
  box-shadow:
    0 14px 34px rgba(50, 40, 28, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  -webkit-backdrop-filter: blur(14px) saturate(1.03);
  backdrop-filter: blur(14px) saturate(1.03);
}

#collectionView .library-stack-row.collection-item {
  min-height: 88px;
  padding: 9px 10px 9px 9px;
  grid-template-columns: minmax(0, 1fr) 36px;
}

#collectionView .library-stack-row .collection-open {
  min-height: 68px;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
}

#collectionView .library-stack-row.is-books .collection-open {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

#collectionView .library-stack-row .collection-menu-wrap,
#collectionView .library-stack-row .collection-meta {
  display: grid !important;
}

#collectionView .library-stack-row .collection-menu-toggle {
  width: 34px;
  min-width: 34px;
}

#collectionView .library-zero-state {
  min-height: clamp(260px, 42vh, 380px);
  padding: 36px 22px;
  border: 1px dashed rgba(198, 181, 162, 0.62);
  border-radius: 22px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  background: rgba(255, 253, 248, 0.44);
  color: rgba(39, 35, 30, 0.9);
  text-align: center;
  -webkit-backdrop-filter: blur(12px) saturate(1.02);
  backdrop-filter: blur(12px) saturate(1.02);
}

#collectionView .library-zero-mark {
  width: 54px;
  height: 54px;
  margin-bottom: 3px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(191, 56, 49, 0.09);
  color: rgba(183, 49, 43, 0.88);
}

#collectionView .library-zero-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

#collectionView .library-zero-state > strong {
  font-family: var(--reading-font);
  font-size: 1.28rem;
  font-weight: 560;
}

#collectionView .library-zero-state > p {
  max-width: 390px;
  margin: 0;
  color: rgba(91, 81, 70, 0.65);
  font-family: var(--reading-font);
  font-size: 0.92rem;
  line-height: 1.4;
}

#collectionView .library-zero-state > button {
  min-height: 40px;
  margin-top: 8px;
  padding: 0 16px;
  border: 1px solid rgba(187, 52, 46, 0.2);
  border-radius: 999px;
  background: rgba(255, 244, 241, 0.76);
  color: rgba(177, 43, 38, 0.94);
  font-family: var(--ui-font);
  font-size: 0.78rem;
  font-weight: 720;
}

html.theme-dark #collectionView.collection-view,
body.theme-dark #collectionView.collection-view {
  color: rgba(244, 239, 232, 0.94);
}

html.theme-dark #collectionView > .library-search,
body.theme-dark #collectionView > .library-search,
html.theme-dark #collectionView .library-category-chip,
body.theme-dark #collectionView .library-category-chip,
html.theme-dark #collectionView .library-continue-card,
body.theme-dark #collectionView .library-continue-card,
html.theme-dark #collectionView .library-book-card.collection-item,
body.theme-dark #collectionView .library-book-card.collection-item,
html.theme-dark #collectionView .library-stack-list,
body.theme-dark #collectionView .library-stack-list,
html.theme-dark #collectionView .library-zero-state,
body.theme-dark #collectionView .library-zero-state {
  border-color: rgba(235, 228, 217, 0.115) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(248, 239, 224, 0.05), transparent 44%),
    linear-gradient(145deg, rgba(33, 34, 39, 0.8), rgba(23, 24, 28, 0.78)) !important;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

html.theme-dark #collectionView .library-add-menu,
body.theme-dark #collectionView .library-add-menu {
  border-color: rgba(235, 228, 217, 0.13);
  background:
    radial-gradient(circle at 20% -10%, rgba(248, 239, 224, 0.075), transparent 46%),
    rgba(29, 30, 34, 0.97);
  box-shadow: 0 26px 62px rgba(0, 0, 0, 0.42);
}

html.theme-dark #collectionView .library-add-menu button,
body.theme-dark #collectionView .library-add-menu button,
html.theme-dark #collectionView .library-continue-copy > strong,
body.theme-dark #collectionView .library-continue-copy > strong,
html.theme-dark #collectionView .library-book-card-copy > strong,
body.theme-dark #collectionView .library-book-card-copy > strong,
html.theme-dark #collectionView .library-section-heading h3,
body.theme-dark #collectionView .library-section-heading h3,
html.theme-dark #collectionView .library-zero-state,
body.theme-dark #collectionView .library-zero-state {
  color: rgba(246, 241, 233, 0.94) !important;
}

html.theme-dark #collectionView .library-add-menu small,
body.theme-dark #collectionView .library-add-menu small,
html.theme-dark #collectionView .library-continue-copy > small,
body.theme-dark #collectionView .library-continue-copy > small,
html.theme-dark #collectionView .library-book-card-copy > small,
body.theme-dark #collectionView .library-book-card-copy > small,
html.theme-dark #collectionView .library-zero-state > p,
body.theme-dark #collectionView .library-zero-state > p,
html.theme-dark #collectionView .library-eyebrow-heading > small,
body.theme-dark #collectionView .library-eyebrow-heading > small {
  color: rgba(205, 198, 187, 0.67) !important;
}

html.theme-dark #collectionView > .library-search input,
body.theme-dark #collectionView > .library-search input {
  color: rgba(246, 241, 233, 0.94);
}

html.theme-dark #collectionView .library-category-chip.is-selected,
body.theme-dark #collectionView .library-category-chip.is-selected,
html.theme-dark #collectionView .library-sort-control,
body.theme-dark #collectionView .library-sort-control {
  border-color: rgba(222, 104, 90, 0.24) !important;
  background: rgba(65, 31, 37, 0.68) !important;
  color: rgba(236, 137, 123, 0.94) !important;
}

html.theme-dark #collectionView .library-add-menu button:is(:hover, :focus-visible),
body.theme-dark #collectionView .library-add-menu button:is(:hover, :focus-visible) {
  background: rgba(222, 104, 90, 0.1);
}

@media (max-width: 700px) {
  #collectionView.collection-view {
    --library-gutter: clamp(12px, 3.7vw, 18px);
    padding-top: 4px !important;
  }

  #collectionView > .collection-header.library-header {
    min-height: 70px;
  }

  #collectionView .library-add-button {
    min-width: 78px;
    min-height: 40px;
    padding-inline: 13px;
  }

  #collectionView > .library-category-row {
    grid-template-columns: repeat(4, minmax(80px, 1fr));
    gap: 6px;
  }

  #collectionView .library-category-chip {
    min-width: 80px;
    padding-inline: 8px;
    gap: 6px;
  }

  #collectionView .library-category-chip .library-category-icon {
    display: none;
  }

  #collectionView .library-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
  }

  #collectionView .library-continue-card {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 12px;
  }

  #collectionView .library-continue-cover {
    width: 62px;
    height: 88px;
  }

  #collectionView .library-continue-progress {
    grid-template-columns: minmax(64px, 1fr) auto;
  }

  #collectionView .library-resume-button {
    min-width: 42px;
    width: 42px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }

  #collectionView .library-resume-button > span {
    margin-left: 2px;
  }

  #collectionView .library-details-button {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }
}

@media (max-width: 430px) {
  #collectionView > .collection-header h2 {
    font-size: clamp(2.22rem, 11vw, 2.72rem) !important;
  }

  #collectionView > .collection-header p {
    max-width: 230px !important;
    font-size: 0.88rem !important;
  }

  #collectionView > .library-search {
    min-height: 49px;
  }

  #collectionView > .library-section > .library-section-heading {
    align-items: center !important;
  }

  #collectionView .library-heading-actions {
    gap: 7px;
  }

  #collectionView .library-heading-actions #collectionCountLabel {
    display: none;
  }

  #collectionView .library-sort-control {
    min-height: 32px;
  }

  #collectionView .library-continue-card {
    min-height: 118px;
    padding: 10px;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
  }

  #collectionView .library-continue-cover {
    width: 58px;
    height: 84px;
  }

  #collectionView .library-continue-copy > strong {
    font-size: 1rem;
  }

  #collectionView .library-continue-copy > small {
    font-size: 0.72rem;
  }

  #collectionView .library-continue-progress small {
    display: none;
  }

  #collectionView .library-continue-progress {
    grid-template-columns: minmax(60px, 1fr);
  }

  #collectionView .library-continue-actions {
    display: grid;
    gap: 7px;
  }

  #collectionView .library-book-card.collection-item {
    padding: 6px 6px 9px;
    border-radius: 12px;
  }

  #collectionView .library-grid-cover {
    border-radius: 7px;
  }

  #collectionView .library-book-card-copy > strong {
    font-size: 0.88rem;
  }

  #collectionView .library-book-card-status {
    font-size: 0.57rem;
  }

  #collectionView .library-book-card > .collection-menu-toggle {
    right: 10px;
    top: 10px;
  }
}

@media (max-width: 350px) {
  #collectionView .library-add-button {
    width: 42px;
    min-width: 42px;
    padding: 0;
    font-size: 0;
  }

  #collectionView .library-add-button > span {
    margin: 0;
  }

  #collectionView .library-continue-card {
    grid-template-columns: 54px minmax(0, 1fr) 40px;
  }

  #collectionView .library-continue-cover {
    width: 54px;
    height: 78px;
  }
}

/* Reader corner controls are icons only; their tap targets remain full size. */
.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton),
.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton):is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton):is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
html.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
html.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton),
body.theme-dark .reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
body.theme-dark .ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton) {
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton),
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton) {
  transition: transform 120ms ease !important;
}

.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton) :is(.home-symbol, .mode-switch-symbol),
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton) :is(.home-symbol, .mode-switch-symbol) {
  opacity: 0.86 !important;
  transition: opacity 140ms ease !important;
}

.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton):is(:hover, :focus-visible) :is(.home-symbol, .mode-switch-symbol),
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton):is(:hover, :focus-visible) :is(.home-symbol, .mode-switch-symbol) {
  opacity: 1 !important;
}

.reader-panel > .top-bar :is(#textPanelButton, #ebookModeButton):focus-visible,
.ebook-reader > .ebook-top-bar :is(#ebookBackButton, #ebookSpeedModeButton):focus-visible {
  outline: 1px solid color-mix(in srgb, var(--rhythm-coral) 42%, transparent) !important;
  outline-offset: 2px !important;
}

/* Keep the title ornament visually attached to the title stack. */
.reader-panel > .top-bar #chapterButton::before,
body.ebook-mode #ebookChapterButton::before,
body.ebook-mode .ebook-title-block::before {
  top: calc(100% + 5px) !important;
}

/* Library v6 final optical overrides. Keep this last so legacy Library passes cannot restyle it. */
#collectionView > .collection-header.library-header {
  min-height: 66px !important;
  padding-bottom: 1px !important;
  gap: 14px !important;
}

#collectionView .library-add-button {
  min-width: 84px !important;
  min-height: 39px !important;
  padding: 0 14px !important;
  border-color: rgba(184, 55, 48, 0.2) !important;
  gap: 8px !important;
  background:
    radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.74), transparent 52%),
    rgba(255, 247, 243, 0.86) !important;
  color: rgba(177, 46, 40, 0.94) !important;
  font-size: 0.8rem !important;
  font-weight: 740 !important;
  box-shadow:
    0 8px 20px rgba(91, 54, 43, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

#collectionView .library-add-button:is(:hover, :focus-visible) {
  border-color: rgba(184, 55, 48, 0.3) !important;
  background: rgba(255, 241, 237, 0.96) !important;
  box-shadow:
    0 10px 24px rgba(91, 54, 43, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

#collectionView .library-add-button > span {
  width: 12px !important;
  height: 12px !important;
}

#collectionView > .library-search {
  min-height: 46px !important;
  padding: 0 11px 0 16px !important;
  border-radius: 14px !important;
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  gap: 9px !important;
  box-shadow:
    0 8px 22px rgba(51, 42, 30, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

#collectionView > .library-search > span {
  position: relative !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  border-width: 1.55px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView > .library-search > span::before {
  content: none !important;
  display: none !important;
}

#collectionView > .library-search > span::after {
  left: 11px !important;
  top: 11px !important;
  right: auto !important;
  bottom: auto !important;
  width: 7px !important;
  height: 1.55px !important;
  transform: rotate(45deg) !important;
  transform-origin: left center !important;
}

#collectionView > .library-search input {
  height: 32px !important;
  font-size: 0.91rem !important;
}

#collectionView > .library-category-row {
  min-height: 38px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#collectionView .library-category-chip {
  min-width: 108px !important;
  min-height: 36px !important;
  padding: 0 11px !important;
  border-radius: 12px !important;
  flex: 0 0 auto !important;
  gap: 6px !important;
  font-size: 0.73rem !important;
}

#collectionView .library-category-chip .library-category-icon {
  width: 15px !important;
  height: 15px !important;
}

#collectionView .library-category-count {
  min-width: 18px !important;
  height: 18px !important;
  padding-inline: 5px !important;
  font-size: 0.61rem !important;
}

#collectionView > .library-section {
  gap: 8px !important;
}

#collectionView > .library-section > .library-section-heading {
  min-height: 32px !important;
}

#collectionView .collection-list {
  gap: clamp(18px, 2.7vh, 26px) !important;
}

#collectionView .library-content-section {
  gap: 8px !important;
}

#collectionView .library-content-heading {
  min-height: 28px !important;
}

html.theme-dark #collectionView .library-add-button,
body.theme-dark #collectionView .library-add-button {
  border-color: rgba(222, 104, 90, 0.22) !important;
  background: rgba(58, 33, 36, 0.72) !important;
  color: rgba(239, 142, 128, 0.96) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(248, 239, 224, 0.045) !important;
}

@media (max-width: 700px) {
  #collectionView > .collection-header.library-header {
    min-height: 60px !important;
  }

  #collectionView .library-add-button {
    min-width: 75px !important;
    min-height: 37px !important;
    padding-inline: 12px !important;
  }

  #collectionView > .library-search {
    min-height: 44px !important;
  }

  #collectionView > .library-category-row {
    gap: 5px !important;
  }

  #collectionView .library-category-chip {
    min-width: 78px !important;
    min-height: 35px !important;
    padding-inline: 8px !important;
  }
}

/* Generated raster artwork is temporarily disabled. Source covers remain visible. */
.discover-topic-suggestion-art.is-code-native {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--suggestion-tone) 15%, transparent) 0 4%, transparent 5%),
    radial-gradient(circle at 23% 74%, color-mix(in srgb, var(--topic-color) 13%, transparent) 0 3%, transparent 4%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color) 8%, var(--discover-surface-soft)), var(--discover-surface));
}

.discover-topic-suggestion-art.is-code-native > span {
  color: color-mix(in srgb, var(--topic-color) 17%, transparent);
  font: 500 clamp(4.5rem, 10vw, 7rem)/1 var(--reading-font);
  transform: translateY(-2px);
}

.discover-topic-suggestion-art.is-code-native > i {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 1px solid color-mix(in srgb, var(--suggestion-tone) 25%, transparent);
  border-radius: 50%;
}

.discover-topic-suggestion-art.is-code-native > i:first-of-type {
  top: 18px;
  right: 17px;
}

.discover-topic-suggestion-art.is-code-native > i:last-of-type {
  bottom: 17px;
  left: 16px;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  transform: rotate(32deg);
}

.book-details-quote-card blockquote.book-details-quote-plain {
  max-width: min(100%, 680px) !important;
}

.book-details-quote-card:has(.book-details-quote-plain) {
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--rhythm-coral) 8%, transparent), transparent 34%),
    var(--topic-card-bg, var(--panel)) !important;
}

/* Topics: a compact chooser followed by finite, mixed-format shelves. */
.discover-topics-view {
  --discover-topic-rail-left-bleed: max(24px, env(safe-area-inset-left));
  --discover-topic-rail-right-bleed: max(24px, env(safe-area-inset-right));
  min-width: 0;
  display: grid;
  gap: clamp(28px, 5vw, 44px);
}

.discover-topics-compact-intro {
  max-width: 680px;
  display: grid;
  gap: 5px;
}

.discover-topics-compact-intro p,
.discover-topic-choices > header p,
.discover-topic-content-shelf > header p {
  margin: 0;
  color: var(--discover-coral-strong);
  font-family: var(--ui-font);
  font-size: 0.62rem;
  font-weight: 790;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.discover-topics-compact-intro h1 {
  margin: 0;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(2.25rem, 6vw, 3.75rem);
  font-weight: 510;
  letter-spacing: -0.055em;
  line-height: 0.98;
}

.discover-topics-compact-intro h1 > span {
  color: var(--discover-coral-strong);
}

.discover-topics-compact-intro > span,
.discover-topic-choices > header span {
  color: var(--discover-muted);
  font-family: var(--reading-font);
  font-size: clamp(0.78rem, 1.8vw, 0.94rem);
  line-height: 1.4;
}

.discover-topic-choices,
.discover-topic-content-shelves,
.discover-topic-content-shelf {
  min-width: 0;
  display: grid;
}

.discover-topic-choices {
  gap: 13px;
}

.discover-topic-choices > header,
.discover-topic-content-shelf > header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.discover-topic-choices > header > div,
.discover-topic-content-shelf > header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.discover-topic-choices > header > button,
.discover-topic-content-shelf > header > button {
  min-height: 38px;
  padding: 0 3px 0 10px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  color: color-mix(in srgb, #9a78ec 82%, var(--discover-text));
  font-family: var(--ui-font);
  font-size: 0.69rem;
  font-weight: 740;
  white-space: nowrap;
  cursor: pointer;
}

.discover-topic-choices > header > button i {
  width: 15px;
  height: 15px;
  border: 1.5px solid currentColor;
  border-left-color: transparent;
  border-radius: 50%;
  position: relative;
}

.discover-topic-choices > header > button i::after {
  content: "";
  position: absolute;
  top: -1px;
  right: -2px;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(18deg);
}

.discover-topic-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(7px, 1.5vw, 12px);
}

.discover-topic-choice-card {
  min-width: 0;
  min-height: 137px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 28%, var(--discover-line));
  border-radius: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 8px 7px;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--topic-color) 16%, transparent), transparent 43%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color) 5%, transparent), transparent 64%),
    color-mix(in srgb, var(--discover-surface) 91%, transparent);
  color: var(--discover-text);
  text-align: left;
  cursor: pointer;
}

.discover-topic-choice-mark {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 34%, var(--discover-line));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 10%, var(--discover-surface-soft));
  color: color-mix(in srgb, var(--topic-color) 78%, var(--discover-text));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--topic-color) 10%, transparent);
  font: 520 1.2rem/1 var(--reading-font);
  grid-column: 1 / -1;
}

.discover-topic-choice-card > small {
  color: color-mix(in srgb, var(--topic-color) 72%, var(--discover-muted));
  font-family: var(--ui-font);
  font-size: 0.54rem;
  font-weight: 730;
  line-height: 1.22;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  white-space: normal;
}

.discover-topic-choice-card > strong {
  font-family: var(--reading-font);
  font-size: clamp(1.04rem, 2.4vw, 1.34rem);
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 1.05;
  grid-column: 1 / -1;
  overflow-wrap: anywhere;
}

.discover-topic-choice-card > i,
.discover-topic-content-shelf > header > button i {
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  align-self: center;
  transform: rotate(45deg);
}

.discover-topic-choice-card.is-atlas-only {
  border-style: solid;
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--topic-color) 20%, transparent), transparent 42%),
    radial-gradient(circle at 12% 92%, color-mix(in srgb, #9a78ec 8%, transparent), transparent 48%),
    color-mix(in srgb, var(--discover-surface) 91%, transparent);
}

.discover-topic-choice-card.is-atlas-only .discover-topic-choice-mark {
  border-style: dashed;
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--topic-color) 4%, transparent),
    0 9px 22px color-mix(in srgb, var(--topic-color) 10%, transparent);
}

.discover-topic-choice-card.is-atlas-only > small {
  color: color-mix(in srgb, #9a78ec 70%, var(--discover-muted));
}

.discover-topic-choice-card.is-atlas-only:active {
  transform: none !important;
  filter: none !important;
}

.discover-topic-content-shelves {
  gap: clamp(30px, 5vw, 46px);
}

.discover-topic-content-shelf {
  gap: 12px;
}

.discover-topic-content-shelf > header h2 {
  margin: 0;
  overflow: hidden;
  color: var(--discover-text);
  font-family: var(--reading-font);
  font-size: clamp(1.45rem, 3.4vw, 2rem);
  font-weight: 520;
  letter-spacing: -0.045em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-topic-content-shelf > header > button {
  color: color-mix(in srgb, var(--topic-color) 76%, var(--discover-text));
}

.discover-topic-content-rail {
  box-sizing: border-box;
  width: calc(100% + var(--discover-topic-rail-left-bleed) + var(--discover-topic-rail-right-bleed));
  max-width: none;
  margin-left: calc(-1 * var(--discover-topic-rail-left-bleed));
  margin-right: calc(-1 * var(--discover-topic-rail-right-bleed));
  padding:
    1px
    var(--discover-topic-rail-right-bleed)
    5px
    var(--discover-topic-rail-left-bleed);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(174px, 24%);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-left: var(--discover-topic-rail-left-bleed);
  scroll-padding-right: var(--discover-topic-rail-right-bleed);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.discover-topic-content-rail::-webkit-scrollbar {
  display: none;
}

.discover-topic-content-card {
  min-width: 0;
  min-height: 246px;
  padding: 11px;
  border: 1px solid var(--discover-line);
  border-radius: 17px;
  display: grid;
  grid-template-rows: 108px auto 1fr auto auto;
  gap: 7px;
  background: color-mix(in srgb, var(--discover-surface) 91%, transparent);
  color: var(--discover-text);
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
}

.discover-topic-content-art {
  width: 100%;
  height: 108px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--topic-color) 12%, transparent), transparent 33%),
    color-mix(in srgb, var(--topic-color) 7%, var(--discover-surface-soft));
  color: color-mix(in srgb, var(--topic-color) 34%, var(--discover-muted));
}

.discover-topic-content-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.discover-topic-content-art > span {
  font: 510 2.7rem/1 var(--reading-font);
}

.discover-topic-content-format {
  color: color-mix(in srgb, var(--topic-color) 72%, var(--discover-coral));
  font-family: var(--ui-font);
  font-size: 0.56rem;
  font-weight: 790;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.discover-topic-content-card > strong {
  overflow: hidden;
  color: var(--discover-text);
  display: -webkit-box;
  font-family: var(--reading-font);
  font-size: 0.98rem;
  font-weight: 540;
  letter-spacing: -0.028em;
  line-height: 1.1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-topic-content-card > small {
  overflow: hidden;
  color: var(--discover-muted);
  font-family: var(--ui-font);
  font-size: 0.61rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-topic-content-card > i {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--topic-color) 9%, var(--discover-surface-soft));
}

.discover-topic-content-card > i::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.discover-topic-choice-grid button,
.discover-topic-choice-grid button *,
.discover-topic-content-rail button,
.discover-topic-content-rail button * {
  touch-action: pan-x pan-y !important;
}

html.theme-dark .discover-topic-choice-card,
body.theme-dark .discover-topic-choice-card,
html.theme-dark .discover-topic-content-card,
body.theme-dark .discover-topic-content-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

@media (max-width: 760px) {
  .discover-topics-view {
    --discover-topic-rail-left-bleed: max(14px, env(safe-area-inset-left));
    --discover-topic-rail-right-bleed: max(14px, env(safe-area-inset-right));
    gap: 27px;
  }

  .discover-topics-compact-intro h1 {
    font-size: clamp(2.1rem, 10vw, 2.85rem);
  }

  .discover-topic-choice-card {
    min-height: 145px;
    padding: 12px;
    border-radius: 18px;
  }

  .discover-topic-choice-mark {
    width: 38px;
    height: 38px;
    font-size: 1.08rem;
  }

  .discover-topic-choice-card > small {
    font-size: 0.5rem;
  }

  .discover-topic-choice-card > strong {
    font-size: clamp(0.98rem, 4vw, 1.15rem);
  }

  .discover-topic-content-rail {
    grid-auto-columns: minmax(154px, 43vw);
  }

  .discover-topic-content-card {
    min-height: 232px;
    grid-template-rows: 96px auto 1fr auto auto;
  }

  .discover-topic-content-art {
    height: 96px;
  }
}

/* Topics owns a calm, inline Knowledge Atlas; the full overlay is an optional continuation. */
.discover-inline-atlas {
  --inline-atlas-line: color-mix(in srgb, var(--inline-atlas-color) 22%, var(--discover-line));
  position: relative;
  min-width: 0;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--inline-atlas-line);
  border-radius: clamp(22px, 4vw, 30px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--inline-atlas-color) 11%, transparent), transparent 36%),
    radial-gradient(circle at 22% 82%, color-mix(in srgb, #8b78c9 7%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--discover-surface) 93%, transparent), color-mix(in srgb, var(--discover-surface-soft) 88%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--discover-text) 4%, transparent);
}

.discover-inline-atlas.is-expanded {
  box-sizing: border-box;
  width: calc(100% + var(--discover-topic-rail-left-bleed) + var(--discover-topic-rail-right-bleed));
  max-width: none;
  margin-inline:
    calc(-1 * var(--discover-topic-rail-left-bleed))
    calc(-1 * var(--discover-topic-rail-right-bleed));
  padding-inline: var(--discover-topic-rail-left-bleed) var(--discover-topic-rail-right-bleed);
  border-inline: 0;
  border-radius: 0;
}

.discover-inline-atlas-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.discover-inline-atlas-header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.discover-inline-atlas-header p,
.discover-inline-atlas-why p,
.discover-inline-atlas-reading header p {
  margin: 0;
  color: color-mix(in srgb, var(--inline-atlas-color) 72%, var(--discover-coral-strong));
  font: 790 0.59rem/1.2 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-inline-atlas-header h2 {
  margin: 0;
  color: var(--discover-text);
  font: 520 clamp(1.55rem, 4vw, 2.35rem)/1 var(--reading-font);
  letter-spacing: -0.045em;
}

.discover-inline-atlas-header > div > span {
  color: var(--discover-muted);
  font: 520 0.72rem/1.35 var(--ui-font);
}

.discover-inline-atlas-header > button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 5px 0 13px;
  border: 1px solid var(--inline-atlas-line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--discover-surface-soft) 85%, transparent);
  color: var(--discover-text);
  font: 690 0.66rem/1 var(--ui-font);
  cursor: pointer;
}

.discover-inline-atlas-header > button i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--inline-atlas-color) 11%, var(--discover-surface));
  color: color-mix(in srgb, var(--inline-atlas-color) 75%, var(--discover-text));
  font: 500 1rem/1 var(--ui-font);
  font-style: normal;
}

.discover-inline-atlas-path {
  position: relative;
  z-index: 3;
  display: flex;
  gap: 2px;
  margin-top: 13px;
  padding-bottom: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.discover-inline-atlas-path::-webkit-scrollbar { display: none; }

.discover-inline-atlas-path button {
  flex: 0 0 auto;
  padding: 7px 8px;
  border: 0;
  background: transparent;
  color: var(--discover-muted);
  font: 630 0.61rem/1 var(--ui-font);
}

.discover-inline-atlas-path button + button::before {
  content: "›";
  margin-right: 10px;
  color: color-mix(in srgb, var(--discover-muted) 48%, transparent);
}

.discover-inline-atlas-path button[aria-current="page"] {
  color: var(--discover-text);
}

.discover-inline-atlas-stage {
  position: relative;
  z-index: 1;
  min-height: clamp(285px, 48vw, 360px);
  margin-top: 8px;
  overflow: hidden;
}

.discover-inline-atlas.is-expanded .discover-inline-atlas-stage {
  min-height: clamp(400px, 64vw, 540px);
  margin-top: 2px;
}

.discover-inline-atlas-stage::before,
.discover-inline-atlas-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vw, 370px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--inline-atlas-color) 9%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.discover-inline-atlas-stage::after {
  width: min(72vw, 570px);
  border-color: color-mix(in srgb, var(--discover-text) 3.5%, transparent);
}

.discover-inline-atlas-stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.discover-inline-atlas-stage line {
  stroke: color-mix(in srgb, var(--inline-atlas-color) 38%, var(--discover-line));
  stroke-width: 0.34;
  stroke-dasharray: 1.1 1.2;
  vector-effect: non-scaling-stroke;
}

.discover-inline-atlas-stage line:is([data-relation-type="strong"], [data-relation-type="authored"]) {
  stroke-width: 0.58;
  stroke-dasharray: none;
}

.discover-inline-atlas-center,
.discover-inline-atlas-node {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--discover-text);
  text-align: center;
  transform: translate(-50%, -50%);
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.discover-inline-atlas-center *,
.discover-inline-atlas-node * {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.discover-inline-atlas-center {
  left: 50%;
  top: 50%;
  width: min(140px, 32vw);
}

.discover-inline-atlas-center:is(:active, .is-tactile-press),
.discover-inline-atlas-node:is(:active, .is-tactile-press) {
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Atlas nodes use their transform to centre absolute coordinates. Keep that
   positioning transform stronger than the generic topic-surface press reset. */
:is(.discover-topics-view, .topic-discovery-panel) button.discover-inline-atlas-center:is(:active, .is-tactile-press),
:is(.discover-topics-view, .topic-discovery-panel) button.discover-inline-atlas-node:is(:active, .is-tactile-press) {
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  scale: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.discover-inline-atlas-center > span {
  display: grid;
  place-items: center;
  width: clamp(66px, 13vw, 86px);
  aspect-ratio: 1;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--inline-atlas-color) 62%, var(--discover-line));
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 31%, color-mix(in srgb, var(--inline-atlas-color) 25%, transparent), transparent 51%),
    color-mix(in srgb, var(--discover-surface) 94%, transparent);
  box-shadow:
    0 0 0 7px color-mix(in srgb, var(--inline-atlas-color) 5%, transparent),
    0 17px 34px color-mix(in srgb, #000 15%, transparent);
  color: color-mix(in srgb, var(--inline-atlas-color) 58%, var(--discover-text));
  font: 520 clamp(1.25rem, 4vw, 1.75rem)/1 var(--reading-font);
}

.discover-inline-atlas-center strong,
.discover-inline-atlas-node strong {
  max-width: 14ch;
  font-family: var(--reading-font);
  font-weight: 560;
  overflow-wrap: anywhere;
}

.discover-inline-atlas-center strong { font-size: clamp(0.88rem, 2vw, 1.08rem); }

.discover-inline-atlas-center small,
.discover-inline-atlas-node small {
  margin-top: 3px;
  color: var(--discover-muted);
  font: 680 0.5rem/1 var(--ui-font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.discover-inline-atlas-node {
  left: var(--node-x);
  top: var(--node-y);
  width: min(112px, 24vw);
}

.discover-inline-atlas-node > span {
  display: grid;
  place-items: center;
  width: clamp(40px, 8vw, 53px);
  aspect-ratio: 1;
  margin-bottom: 5px;
  border: 1px solid color-mix(in srgb, var(--node-color) 46%, var(--discover-line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--node-color) 9%, var(--discover-surface));
  color: color-mix(in srgb, var(--node-color) 72%, var(--discover-text));
  box-shadow: 0 11px 26px color-mix(in srgb, #000 10%, transparent);
  font: 650 0.7rem/1 var(--reading-font);
}

.discover-inline-atlas-node strong {
  font-size: clamp(0.66rem, 1.5vw, 0.79rem);
  line-height: 1.08;
}

.discover-inline-atlas-hint {
  width: 100%;
  min-height: 39px;
  border: 0;
  border-top: 1px solid var(--inline-atlas-line);
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 10px;
  background: transparent;
  color: color-mix(in srgb, var(--inline-atlas-color) 72%, var(--discover-text));
  font: 680 0.67rem/1 var(--ui-font);
}

.discover-inline-atlas-detail {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.4fr);
  gap: 12px;
}

.discover-inline-atlas-why,
.discover-inline-atlas-reading {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--inline-atlas-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--discover-surface) 82%, transparent);
}

.discover-inline-atlas-why h3,
.discover-inline-atlas-reading h3 {
  margin: 4px 0 0;
  color: var(--discover-text);
  font: 560 1rem/1.15 var(--reading-font);
  letter-spacing: -0.02em;
}

.discover-inline-atlas-why > span,
.discover-inline-atlas-why > small {
  display: block;
  margin-top: 8px;
  color: var(--discover-muted);
  font: 500 0.68rem/1.48 var(--ui-font);
}

.discover-inline-atlas-why > small {
  padding-top: 8px;
  border-top: 1px solid var(--inline-atlas-line);
  font-size: 0.58rem;
}

.discover-inline-atlas-reading > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.discover-inline-atlas-reading > header > div { min-width: 0; }

.discover-inline-atlas-reading > header > span {
  color: var(--discover-muted);
  font: 640 0.59rem/1 var(--ui-font);
  white-space: nowrap;
}

.discover-inline-atlas-reading > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.discover-inline-atlas-source {
  position: relative;
  min-width: 0;
  min-height: 124px;
  padding: 12px 25px 12px 11px;
  border: 1px solid var(--discover-line);
  border-radius: 13px;
  display: grid;
  align-content: start;
  gap: 6px;
  background: color-mix(in srgb, var(--discover-surface-soft) 88%, transparent);
  color: var(--discover-text);
  text-align: left;
}

.discover-inline-atlas-source > span {
  color: color-mix(in srgb, var(--inline-atlas-color) 75%, var(--discover-coral-strong));
  font: 760 0.51rem/1 var(--ui-font);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.discover-inline-atlas-source > strong {
  display: -webkit-box;
  overflow: hidden;
  font: 560 0.76rem/1.12 var(--reading-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-inline-atlas-source > small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 520 0.55rem/1.25 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-inline-atlas-source > i {
  position: absolute;
  right: 9px;
  bottom: 9px;
  color: color-mix(in srgb, var(--inline-atlas-color) 75%, var(--discover-text));
  font: 600 0.8rem/1 var(--ui-font);
  font-style: normal;
}

.discover-inline-atlas-empty {
  margin: 12px 0 0;
  color: var(--discover-muted);
  font: 520 0.68rem/1.4 var(--ui-font);
}

.discover-inline-atlas-actions {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 12px;
}

.discover-inline-atlas-actions button {
  min-height: 39px;
  padding: 0 13px;
  border: 1px solid var(--inline-atlas-line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: color-mix(in srgb, var(--discover-surface-soft) 82%, transparent);
  color: var(--discover-text);
  font: 680 0.64rem/1 var(--ui-font);
}

.discover-inline-atlas-actions button:last-child {
  background: color-mix(in srgb, var(--inline-atlas-color) 12%, var(--discover-surface));
  color: color-mix(in srgb, var(--inline-atlas-color) 62%, var(--discover-text));
}

@media (max-width: 760px) {
  .discover-inline-atlas {
    padding: 15px 13px 12px;
    border-radius: 22px;
  }

  .discover-inline-atlas.is-expanded {
    padding-inline: var(--discover-topic-rail-left-bleed) var(--discover-topic-rail-right-bleed);
  }

  .discover-inline-atlas-header { align-items: center; }
  .discover-inline-atlas-header h2 { font-size: 1.45rem; }
  .discover-inline-atlas-header > div > span { font-size: 0.64rem; }
  .discover-inline-atlas-header > button { min-height: 34px; padding-left: 10px; }
  .discover-inline-atlas-header > button i { width: 25px; height: 25px; }

  .discover-inline-atlas-stage {
    min-height: 310px;
    margin-inline: -5px;
  }

  .discover-inline-atlas.is-expanded .discover-inline-atlas-stage {
    min-height: 430px;
    margin-inline: -10px;
  }

  .discover-inline-atlas-node {
    width: min(88px, 23vw);
  }

  .discover-inline-atlas-node > span { width: 39px; }
  .discover-inline-atlas-node strong { font-size: 0.62rem; }
  .discover-inline-atlas-node small { display: none; }
  .discover-inline-atlas-center { width: min(116px, 32vw); }
  .discover-inline-atlas-center > span { width: 64px; }

  .discover-inline-atlas-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .discover-inline-atlas-reading > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .discover-inline-atlas-source {
    min-height: 112px;
    padding: 10px 18px 10px 9px;
  }

  .discover-inline-atlas-source > strong { font-size: 0.68rem; }
  .discover-inline-atlas-source > small { display: none; }
  .discover-inline-atlas-actions { flex-wrap: wrap; }
}

@media (max-width: 390px) {
  .discover-inline-atlas-header > div > span { display: none; }
  .discover-inline-atlas-header > button { font-size: 0; gap: 0; padding: 3px; }
  .discover-inline-atlas-header > button i { font-size: 1rem; }
  .discover-inline-atlas.is-expanded .discover-inline-atlas-stage { min-height: 410px; }
  .discover-inline-atlas-node { width: 78px; }
  .discover-inline-atlas-node strong { font-size: 0.59rem; }
  .discover-inline-atlas-actions button { flex: 1 1 auto; justify-content: center; }
}

/* Speaker colour status: a small pill in the reader header that briefly
 * stands in for the book title, then shrinks to a corner spinner if
 * preparation runs long. It never sits over the page text. */
body .reader-toast[data-toast-kind="speaker-attribution-loading"] {
  --speaker-status-bg: rgba(255, 251, 244, 0.94);
  --speaker-status-border: rgba(105, 88, 65, 0.14);
  --speaker-status-ink: rgba(52, 43, 33, 0.9);
  --speaker-status-track: rgba(105, 88, 65, 0.18);
  --speaker-status-accent: #b64e44;
  top: calc(var(--reader-corner-control-top) + 6px) !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  z-index: 146 !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  max-width: calc(100vw - 132px) !important;
  min-height: 32px;
  padding: 6px 14px 6px 11px;
  border: 1px solid var(--speaker-status-border) !important;
  border-radius: 999px;
  background: var(--speaker-status-bg) !important;
  box-shadow: 0 6px 18px rgba(52, 40, 24, 0.1) !important;
  color: var(--speaker-status-ink) !important;
  font: 600 0.78rem/1.2 var(--ui-font);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none !important;
  transform: translate3d(-50%, -4px, 0) scale(0.97) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
}

body .reader-toast[data-toast-kind="speaker-attribution-loading"].is-visible {
  transform: translate3d(-50%, 0, 0) scale(1) !important;
}

html.theme-dark body .reader-toast[data-toast-kind="speaker-attribution-loading"],
html.theme-twilight body .reader-toast[data-toast-kind="speaker-attribution-loading"] {
  --speaker-status-bg: rgba(34, 34, 40, 0.94);
  --speaker-status-border: rgba(231, 226, 218, 0.1);
  --speaker-status-ink: rgba(240, 236, 229, 0.92);
  --speaker-status-track: rgba(228, 222, 214, 0.2);
  --speaker-status-accent: #e0604d;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3) !important;
}

html.theme-twilight body .reader-toast[data-toast-kind="speaker-attribution-loading"] {
  --speaker-status-bg: rgba(38, 30, 48, 0.94);
}

body .reader-toast[data-toast-kind="speaker-attribution-loading"]::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  box-sizing: border-box;
  border: 1.5px solid var(--speaker-status-track);
  border-top-color: var(--speaker-status-accent);
  border-radius: 50%;
  animation: speaker-attribution-spinner 820ms linear infinite;
}

/* Ready: a still tick instead of the spinner. */
body .reader-toast[data-toast-kind="speaker-attribution-loading"][data-toast-state="done"]::before {
  width: 9px;
  height: 5px;
  margin: 0 1px 3px;
  border: 0 solid var(--speaker-status-accent);
  border-width: 0 0 1.75px 1.75px;
  border-radius: 0;
  transform: rotate(-45deg);
  animation: none;
}

/* Unavailable: a quiet dash; ordinary dialogue styling carries on. */
body .reader-toast[data-toast-kind="speaker-attribution-loading"][data-toast-state="unavailable"]::before {
  width: 10px;
  height: 0;
  border: 0;
  border-top: 1.75px solid var(--speaker-status-ink);
  border-radius: 999px;
  opacity: 0.55;
  animation: none;
}

/* Long preparation: a quiet spinner in the empty top-right corner. */
body .reader-toast[data-toast-kind="speaker-attribution-loading"].is-collapsed {
  right: var(--reader-corner-control-right) !important;
  left: auto !important;
  width: 32px;
  min-width: 32px;
  padding: 0;
  gap: 0;
  justify-content: center;
  font-size: 0;
  transform: scale(0.9) !important;
}

body .reader-toast[data-toast-kind="speaker-attribution-loading"].is-collapsed.is-visible {
  transform: scale(1) !important;
}

/* The pill stands in for the title rather than sitting on top of it. */
.reader-panel > .top-bar > .reader-title-display {
  transition: opacity 180ms ease;
}

body:has(#readerToast[data-toast-kind="speaker-attribution-loading"].is-visible:not(.is-collapsed))
  .reader-panel > .top-bar > .reader-title-display {
  opacity: 0;
}

@keyframes speaker-attribution-spinner {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  body .reader-toast[data-toast-kind="speaker-attribution-loading"]::before {
    animation: none;
  }
}

/* The Who's Speaking control stays interactive while background attribution runs. */
.character-legend-button.is-speaker-loading {
  position: relative;
  isolation: isolate;
}

.character-legend-button.is-speaker-loading::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -5px;
  border: 1px solid rgba(214, 91, 76, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(214, 91, 76, 0.24), 0 0 16px rgba(214, 91, 76, 0.15);
  pointer-events: none;
  animation: speaker-attribution-control-pulse 1.85s ease-out infinite;
}

.character-legend-button.is-speaker-loading .character-legend-symbol {
  position: relative;
  z-index: 1;
  animation: speaker-attribution-symbol-breathe 1.85s ease-in-out infinite;
}

.character-legend-button.is-speaker-complete {
  position: relative;
  isolation: isolate;
}

.character-legend-button.is-speaker-complete::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -7px;
  border: 1px solid rgba(235, 166, 84, 0);
  border-radius: 50%;
  pointer-events: none;
  animation: speaker-attribution-complete-bloom 1.35s cubic-bezier(0.16, 0.78, 0.28, 1) both;
}

.character-legend-button.is-speaker-complete .character-legend-symbol {
  position: relative;
  z-index: 1;
  animation: speaker-attribution-complete-symbol 1.1s cubic-bezier(0.16, 0.78, 0.28, 1) both;
}

.character-legend-loading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(207, 91, 75, 0.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 0% 0%, rgba(211, 91, 75, 0.09), transparent 58%),
    rgba(255, 253, 247, 0.62);
}

.character-legend-loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(183, 103, 89, 0.18);
  border-top-color: rgba(199, 67, 58, 0.82);
  border-radius: 50%;
  animation: speaker-attribution-spinner 900ms linear infinite;
}

.character-legend-loading-copy {
  display: grid;
  gap: 3px;
}

.character-legend-loading-copy strong {
  color: rgba(34, 31, 27, 0.94);
  font-family: var(--ui-font);
  font-size: 0.92rem;
  font-weight: 680;
}

.character-legend-loading-copy small {
  color: rgba(84, 79, 70, 0.72);
  font-family: var(--ui-font);
  font-size: 0.76rem;
  line-height: 1.35;
}

html.theme-dark .character-legend-loading,
body.theme-dark .character-legend-loading {
  border-color: rgba(222, 104, 87, 0.16);
  background:
    radial-gradient(circle at 0% 0%, rgba(203, 84, 70, 0.1), transparent 60%),
    rgba(30, 31, 36, 0.72);
}

html.theme-dark .character-legend-loading-copy strong,
body.theme-dark .character-legend-loading-copy strong {
  color: rgba(241, 236, 228, 0.94);
}

html.theme-dark .character-legend-loading-copy small,
body.theme-dark .character-legend-loading-copy small {
  color: rgba(190, 184, 175, 0.72);
}

@keyframes speaker-attribution-control-pulse {
  0% { opacity: 0.38; transform: scale(0.94); box-shadow: 0 0 0 0 rgba(214, 91, 76, 0.24), 0 0 10px rgba(214, 91, 76, 0.1); }
  48% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.18); box-shadow: 0 0 0 8px rgba(214, 91, 76, 0), 0 0 22px rgba(214, 91, 76, 0); }
}

@keyframes speaker-attribution-symbol-breathe {
  0%, 100% { opacity: 0.78; transform: rotate(-6deg) scale(0.96); }
  50% { opacity: 1; transform: rotate(-6deg) scale(1.035); }
}

@keyframes speaker-attribution-complete-bloom {
  0% {
    opacity: 0;
    transform: scale(0.72);
    border-color: rgba(238, 173, 83, 0);
    box-shadow: 0 0 0 0 rgba(218, 91, 75, 0), 0 0 0 rgba(95, 178, 166, 0);
  }
  18% {
    opacity: 1;
    border-color: rgba(241, 184, 95, 0.72);
    box-shadow:
      0 0 0 3px rgba(219, 91, 75, 0.2),
      0 0 20px rgba(239, 159, 75, 0.42),
      0 0 34px rgba(84, 173, 162, 0.2);
  }
  48% {
    opacity: 0.82;
    transform: scale(1.12);
    border-color: rgba(105, 192, 179, 0.44);
    box-shadow:
      0 0 0 8px rgba(225, 100, 79, 0.08),
      0 0 24px rgba(239, 173, 82, 0.28),
      0 0 42px rgba(84, 173, 162, 0.18);
  }
  100% {
    opacity: 0;
    transform: scale(1.32);
    border-color: rgba(105, 192, 179, 0);
    box-shadow: 0 0 0 14px rgba(225, 100, 79, 0), 0 0 30px rgba(239, 173, 82, 0), 0 0 48px rgba(84, 173, 162, 0);
  }
}

@keyframes speaker-attribution-complete-symbol {
  0% { filter: brightness(1); transform: rotate(-6deg) scale(0.94); }
  24% { filter: brightness(1.34) saturate(1.18); transform: rotate(-3deg) scale(1.12); }
  52% { filter: brightness(1.12) saturate(1.08); transform: rotate(-7deg) scale(1.02); }
  100% { filter: brightness(1); transform: rotate(-6deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .character-legend-button.is-speaker-loading::after,
  .character-legend-button.is-speaker-loading .character-legend-symbol,
  .character-legend-button.is-speaker-complete::after,
  .character-legend-button.is-speaker-complete .character-legend-symbol,
  .character-legend-loading-spinner {
    animation: none;
  }

  .character-legend-button.is-speaker-loading::after {
    opacity: 0.72;
    box-shadow: 0 0 15px rgba(214, 91, 76, 0.2);
  }

  .character-legend-button.is-speaker-complete::after {
    opacity: 0.78;
    border-color: rgba(235, 166, 84, 0.48);
    box-shadow: 0 0 22px rgba(235, 166, 84, 0.3), 0 0 34px rgba(84, 173, 162, 0.14);
  }
}

/* Soft apricot light mode: oatmeal canvas, reading paper, and clay accents. */
html:not(.theme-dark) {
  color-scheme: light;
  --light-page: #eee2d3;
  --light-page-high: #f5ece2;
  --light-panel: #f5ece2;
  --light-raised: #f8f1e8;
  --light-cool-panel: #f1e9dd;
  --light-ink: #302c29;
  --light-muted: #685b51;
  --light-quiet: #6e5f54;
  --light-line: #d8cbbb;
  --light-line-strong: #bfae9a;
  --light-accent: #ad5734;
  --light-accent-ink: #85482f;
  --light-accent-soft: #e9d5c1;
  --light-on-accent: #fff6eb;
  --light-shadow: 0 8px 24px rgba(83, 59, 38, 0.05);
  --paper: var(--light-cool-panel);
  --reader-surface: var(--paper);
  --panel: var(--light-panel);
  --ink: var(--light-ink);
  --muted: var(--light-muted);
  --line: var(--light-line);
  --accent: var(--light-accent);
  --accent-dark: var(--light-accent-ink);
  --reader-anchor: var(--light-accent-ink);
  --title-red: var(--light-accent-ink);
  --teal: #4e8179;
}

html:not(.theme-dark) body:not(.theme-dark),
html:not(.theme-dark) body:not(.theme-dark) .app-shell {
  background: var(--light-page) !important;
  color: var(--light-ink) !important;
}

/* Shared Home, Library, Stats, and Settings parchment. */
html:not(.theme-dark) body:not(.theme-dark) #inputPanel,
html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open,
html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen),
html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:has(#collectionView:not([hidden])),
html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:has(#statsView:not([hidden])),
html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) {
  background: var(--light-page) !important;
  color: var(--light-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen):has(#menuMain:not([hidden])) {
  background:
    radial-gradient(circle at 84% -2%, rgba(201, 79, 69, 0.115), transparent 25rem),
    radial-gradient(circle at 96% 22%, rgba(168, 60, 54, 0.04), transparent 21rem),
    radial-gradient(circle at 7% 8%, rgba(103, 116, 143, 0.026), transparent 19rem),
    linear-gradient(180deg, #faf6ef 0%, #f3efe7 52%, #eee9e1 100%) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .home-dashboard .home-section-label {
  color: rgba(168, 60, 54, 0.78) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #inputPanel.home-ambient-active :is(
  .home-resume-card,
  .home-progress-book,
  .home-empty-progress,
  .home-action-panel,
  .home-reading-panel
),
html:not(.theme-dark) body:not(.theme-dark) .home-topic-card {
  border-color: var(--light-line) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.58), transparent 44%),
    linear-gradient(145deg, rgba(250, 247, 240, 0.91), rgba(245, 240, 231, 0.86)) !important;
  box-shadow:
    var(--light-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html:not(.theme-dark) body:not(.theme-dark) :is(
  .home-resume-copy h3,
  .home-discover-launch-copy > strong,
  #collectionView > .collection-header h2,
  #settingsView > .collection-header h2,
  #statsView > .collection-header h2
) {
  color: var(--light-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) :is(
  .home-resume-meta,
  .home-discover-launch-copy > small,
  #collectionView > .collection-header p,
  #statsView > .collection-header p
) {
  color: var(--light-muted) !important;
}

/* Library: neutral paper inventory with a slightly cooler research layer. */
html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view {
  color: var(--light-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView :is(
  .library-search,
  .library-category-chip,
  .library-book-card.collection-item,
  .library-zero-state
) {
  border-color: var(--light-line) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.5), transparent 44%),
    rgba(248, 244, 236, 0.88) !important;
  box-shadow:
    0 14px 34px rgba(61, 50, 36, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView .library-stack-list {
  border-color: rgba(82, 78, 70, 0.13) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(78, 129, 121, 0.045), transparent 38%),
    linear-gradient(145deg, rgba(247, 247, 242, 0.94), rgba(239, 241, 238, 0.92)) !important;
  box-shadow:
    0 16px 38px rgba(54, 57, 51, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView .library-category-chip {
  color: var(--light-muted) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView .library-category-chip.is-selected,
html:not(.theme-dark) body:not(.theme-dark) #collectionView .library-section-sort-control,
html:not(.theme-dark) body:not(.theme-dark) #collectionView .library-sort-control {
  border-color: rgba(201, 79, 69, 0.26) !important;
  background: rgba(201, 79, 69, 0.085) !important;
  color: var(--accent-dark) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView :is(
  .library-book-card-copy > strong,
  .library-section-heading h3,
  .library-content-title,
  .library-stack-row .collection-copy strong
) {
  color: var(--light-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView :is(
  .library-book-card-copy > small,
  .library-stack-row .collection-copy small,
  .library-zero-state > p
) {
  color: var(--light-muted) !important;
}

/* Discover: warm paper illuminated by a directional lavender-and-amber prism. */
html:not(.theme-dark) body:not(.theme-dark) .discover-panel {
  --discover-page: #f7f3eb;
  --discover-sheet: #fbf8f2;
  --discover-surface: #fcf9f3;
  --discover-surface-soft: #f0ebe6;
  --discover-text: #282622;
  --discover-muted: #746f67;
  --discover-soft: #989187;
  --discover-line: rgba(77, 69, 82, 0.13);
  --discover-coral: #c94f45;
  --discover-coral-strong: #a83c36;
  --discover-green: #4e8179;
  background:
    radial-gradient(circle at 90% -3%, rgba(235, 178, 112, 0.18) 0, rgba(229, 161, 113, 0.07) 17rem, transparent 30rem),
    radial-gradient(circle at 84% 1%, rgba(112, 88, 190, 0.22) 0, rgba(133, 108, 199, 0.105) 25rem, transparent 48rem),
    radial-gradient(ellipse at 72% 18%, rgba(205, 134, 143, 0.045), transparent 35rem),
    linear-gradient(145deg, #faf7f0 0%, #f7f3eb 57%, #f5f1e9 100%) !important;
  color: var(--discover-text) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-sheet {
  background: transparent !important;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-tabs {
  border-color: var(--discover-line) !important;
  background: rgba(248, 245, 239, 0.82) !important;
  box-shadow:
    0 14px 34px rgba(57, 49, 68, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.66) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-tabs button.is-active {
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.28), transparent 48%),
    linear-gradient(145deg, #d65f54, #bd473e) !important;
  color: #fffaf5 !important;
  box-shadow:
    0 9px 20px rgba(168, 60, 54, 0.19),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-format-switch {
  border-color: var(--discover-line) !important;
  background: rgba(248, 245, 239, 0.76) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-format-switch button.is-active {
  border-color: rgba(201, 79, 69, 0.2) !important;
  background: rgba(201, 79, 69, 0.085) !important;
  color: var(--discover-coral-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(201, 79, 69, 0.08) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-panel :is(
  .discover-search-bar > div,
  .discover-gutenberg-search,
  .discover-browse-card,
  .discover-recommendation-card,
  .discover-today-pick,
  .discover-topic-choice-card,
  .discover-topic-content-card,
  .discover-gutenberg-book-card
) {
  border-color: var(--discover-line) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.5), transparent 44%),
    rgba(250, 247, 241, 0.9) !important;
  box-shadow:
    0 15px 36px rgba(57, 49, 68, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-gutenberg-chip-rail button,
html:not(.theme-dark) body:not(.theme-dark) .discover-directory-grid button {
  border-color: var(--discover-line) !important;
  background: rgba(248, 245, 239, 0.76) !important;
  color: var(--discover-muted) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-gutenberg-chip-rail button.is-active {
  border-color: rgba(201, 79, 69, 0.42) !important;
  background: rgba(201, 79, 69, 0.075) !important;
  color: var(--discover-coral-strong) !important;
}

/* Topic detail: cool mineral paper with teal structure, not sage. */
html:not(.theme-dark) body:not(.theme-dark) .topic-discovery-panel {
  color-scheme: light !important;
  --topic-dossier-page: #e7ebed;
  --topic-dossier-sheet: #f0f2f2;
  --topic-dossier-surface: #f8f8f5;
  --topic-dossier-surface-soft: #e4e9eb;
  --topic-dossier-text: #25292a;
  --topic-dossier-muted: #687175;
  --topic-dossier-soft: #8a9398;
  --topic-dossier-line: color-mix(in srgb, #4f737d 15%, rgba(65, 73, 78, 0.12));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 48%, #416b74);
  --topic-dossier-accent-soft: color-mix(in srgb, #4f7b83 8%, transparent);
  --topic-dossier-shadow: 0 15px 34px rgba(43, 57, 65, 0.07);
  background:
    radial-gradient(circle at 76% -4%, rgba(72, 113, 125, 0.095), transparent 35%),
    radial-gradient(circle at 5% 72%, rgba(99, 83, 128, 0.035), transparent 37%),
    linear-gradient(180deg, #f0f2f2, #e7ebed) !important;
  color: var(--topic-dossier-text) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .topic-discovery-sheet {
  background:
    radial-gradient(circle at 74% -3%, rgba(72, 113, 125, 0.07), transparent 32%),
    linear-gradient(180deg, var(--topic-dossier-sheet), var(--topic-dossier-page)) !important;
}

/* Stats uses the same paper ladder as Home and Library. */
html:not(.theme-dark) body:not(.theme-dark) #statsView :is(
  .stats-tabs,
  .stats-editorial-card,
  .stats-card,
  .stats-insight-card,
  .stats-insight-tile,
  .stats-bottom-banner
) {
  border-color: var(--light-line) !important;
  background: var(--light-panel) !important;
  box-shadow: none !important;
}

/* Reader, book information, and splash retain warmth through light rather than yellow bases. */
html:not(.theme-dark) body:not(.theme-dark) :is(
  .reader-panel,
  .focus-stage,
  .ebook-reader,
  .ebook-page
) {
  background:
    radial-gradient(circle at 50% 32%, rgba(201, 79, 69, 0.026), transparent 44%),
    var(--light-page) !important;
  color: var(--light-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .book-details-panel {
  background:
    radial-gradient(circle at 82% -2%, rgba(201, 79, 69, 0.05), transparent 24rem),
    linear-gradient(180deg, #f9f6ef 0%, #f3efe7 58%, #eeeae2 100%) !important;
  color: var(--light-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) :is(.onboarding-overlay, .rhythm-intro-stage) {
  background:
    radial-gradient(circle at 50% 16%, rgba(201, 79, 69, 0.055), transparent 42%),
    linear-gradient(180deg, #faf7f0 0%, #f3efe7 60%, #eeeae2 100%) !important;
}

/* Bottom navigation: translucent stone, neutral inactive marks, coral as the sole active colour. */
html:not(.theme-dark) body:not(.theme-dark) .home-bottom-nav {
  border-color: rgba(82, 70, 55, 0.11) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.52), transparent 48%),
    rgba(243, 239, 231, 0.93) !important;
  box-shadow:
    0 -1px 0 rgba(82, 70, 55, 0.07),
    0 14px 38px rgba(61, 50, 36, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.56) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.01) !important;
  backdrop-filter: blur(18px) saturate(1.01) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .home-bottom-nav button {
  color: #756f66 !important;
}

html:not(.theme-dark) body:not(.theme-dark) .home-bottom-nav button.is-active {
  color: var(--accent) !important;
}

/* Library book shelf parity: reuse the compact Home in-progress card language. */
#collectionView .library-book-strip {
  --library-shelf-card-width: clamp(138px, 31vw, 176px);
  --library-shelf-card-height: clamp(184px, 37vw, 232px);
  grid-auto-columns: var(--library-shelf-card-width) !important;
  gap: clamp(16px, 3.8vw, 26px) !important;
  padding-block: 2px 8px !important;
}

#collectionView .library-book-strip .library-book-card.collection-item {
  width: var(--library-shelf-card-width) !important;
  min-width: var(--library-shelf-card-width) !important;
  height: var(--library-shelf-card-height) !important;
  min-height: var(--library-shelf-card-height) !important;
  max-height: var(--library-shelf-card-height) !important;
  padding: 6px !important;
  border: 1px solid rgba(82, 70, 55, 0.12) !important;
  border-radius: 13px !important;
  display: grid !important;
  overflow: hidden !important;
  background: rgba(255, 253, 248, 0.52) !important;
  box-shadow: 0 14px 34px rgba(92, 73, 48, 0.08) !important;
  scroll-snap-align: start;
}

#collectionView .library-book-strip .library-book-open {
  height: 100%;
  min-height: 0;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: clamp(8px, 1.8vw, 12px) !important;
  overflow: hidden !important;
}

#collectionView .library-book-strip .library-grid-cover,
#collectionView .library-book-strip .library-grid-cover.has-image,
#collectionView .library-book-strip .library-grid-cover.has-title-fallback {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 0.64 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

#collectionView .library-book-strip .library-grid-cover.has-image img {
  object-fit: fill !important;
  object-position: center !important;
}

#collectionView .library-book-strip .library-book-card-copy {
  width: 100% !important;
  height: auto !important;
  padding: 0 1px !important;
  display: grid !important;
  grid-template-rows: auto !important;
  align-content: start !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#collectionView .library-book-strip .library-book-card .collection-progress {
  display: block !important;
  width: 100% !important;
  height: 4px !important;
  margin: 4px 0 0 !important;
  background: rgba(100, 88, 70, 0.22) !important;
}

#collectionView .library-book-strip .library-book-card .collection-progress > span {
  background: #c8423d !important;
}

#collectionView .library-book-strip .library-book-card > .collection-menu-toggle {
  display: none !important;
}

html.theme-dark #collectionView .library-book-strip .library-book-card.collection-item,
body.theme-dark #collectionView .library-book-strip .library-book-card.collection-item {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(248, 239, 224, 0.045), transparent 42%),
    linear-gradient(145deg, rgba(33, 34, 39, 0.76), rgba(23, 24, 28, 0.7)) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

html.theme-dark #collectionView .library-book-strip .library-book-card .collection-progress,
body.theme-dark #collectionView .library-book-strip .library-book-card .collection-progress {
  background: rgba(244, 236, 224, 0.18) !important;
}

@media (max-width: 430px), (max-height: 880px) and (max-width: 520px) {
  #collectionView .library-book-strip {
    --library-shelf-card-width: 86px;
    --library-shelf-card-height: 144px;
    grid-auto-columns: var(--library-shelf-card-width) !important;
    gap: 10px !important;
    padding-block: 0 4px !important;
  }

  #collectionView .library-book-strip .library-book-card.collection-item {
    width: var(--library-shelf-card-width) !important;
    min-width: var(--library-shelf-card-width) !important;
    height: var(--library-shelf-card-height) !important;
    min-height: var(--library-shelf-card-height) !important;
    max-height: var(--library-shelf-card-height) !important;
    padding: 6px !important;
    border-radius: 13px !important;
  }

  #collectionView .library-book-strip .library-book-open {
    gap: 8px !important;
  }

  #collectionView .library-book-strip .library-grid-cover,
  #collectionView .library-book-strip .library-grid-cover.has-image,
  #collectionView .library-book-strip .library-grid-cover.has-title-fallback {
    aspect-ratio: 0.64 !important;
  }

  #collectionView .library-book-strip .library-book-card .collection-progress {
    height: 3px !important;
  }
}

/* Topics live inside Discover: the same prism-lit paper, with topic colour kept local. */
html:not(.theme-dark) body:not(.theme-dark) .topic-discovery-panel {
  color-scheme: light !important;
  --topic-dossier-page: #f7f3eb;
  --topic-dossier-sheet: #fbf8f2;
  --topic-dossier-surface: rgba(252, 249, 243, 0.9);
  --topic-dossier-surface-soft: rgba(240, 235, 230, 0.9);
  --topic-dossier-text: #282622;
  --topic-dossier-muted: #746f67;
  --topic-dossier-soft: #989187;
  --topic-dossier-line: color-mix(in srgb, var(--topic-color) 5%, rgba(77, 69, 82, 0.13));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 68%, #6d5a94);
  --topic-dossier-accent-soft: color-mix(in srgb, var(--topic-color) 8%, transparent);
  --topic-dossier-shadow: 0 15px 36px rgba(57, 49, 68, 0.06);
  background:
    radial-gradient(circle at 90% -3%, rgba(235, 178, 112, 0.18) 0, rgba(229, 161, 113, 0.07) 17rem, transparent 30rem),
    radial-gradient(circle at 84% 1%, rgba(112, 88, 190, 0.22) 0, rgba(133, 108, 199, 0.105) 25rem, transparent 48rem),
    radial-gradient(ellipse at 72% 18%, color-mix(in srgb, var(--topic-color) 3.5%, transparent), transparent 35rem),
    linear-gradient(145deg, #faf7f0 0%, #f7f3eb 57%, #f5f1e9 100%) !important;
  color: var(--topic-dossier-text) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .topic-discovery-sheet {
  background: transparent !important;
}

html:not(.theme-dark) body:not(.theme-dark) .topic-discovery-panel .topic-discovery-close {
  border-color: rgba(96, 79, 151, 0.18) !important;
  background: rgba(248, 245, 239, 0.78) !important;
  color: var(--topic-dossier-accent) !important;
}

html.theme-dark .topic-discovery-panel,
body.theme-dark .topic-discovery-panel {
  color-scheme: dark !important;
  --topic-dossier-page: #101014;
  --topic-dossier-sheet: #15151c;
  --topic-dossier-surface: rgba(27, 26, 35, 0.9);
  --topic-dossier-surface-soft: rgba(35, 33, 49, 0.9);
  --topic-dossier-text: #f2f1ec;
  --topic-dossier-muted: #aaa9a3;
  --topic-dossier-soft: #7e807e;
  --topic-dossier-line: color-mix(in srgb, var(--topic-color) 6%, rgba(193, 181, 245, 0.13));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 62%, #c1b6f2);
  --topic-dossier-accent-soft: color-mix(in srgb, var(--topic-color) 9%, transparent);
  --topic-dossier-shadow: 0 17px 40px rgba(0, 0, 0, 0.25);
  background:
    radial-gradient(circle at 84% 0%, rgba(137, 105, 231, 0.19), transparent 25rem),
    radial-gradient(circle at 97% 22%, rgba(77, 139, 210, 0.11), transparent 25rem),
    radial-gradient(circle at 8% 72%, color-mix(in srgb, var(--topic-color) 4%, transparent), transparent 23rem),
    linear-gradient(180deg, #15131b 0%, #111015 58%, #0f0e13 100%) !important;
  color: var(--topic-dossier-text) !important;
}

html.theme-dark .topic-discovery-sheet,
body.theme-dark .topic-discovery-sheet {
  background: transparent !important;
}

html.theme-dark .topic-discovery-panel .topic-discovery-close,
body.theme-dark .topic-discovery-panel .topic-discovery-close {
  border-color: rgba(193, 181, 245, 0.15) !important;
  background: rgba(30, 28, 40, 0.74) !important;
  color: var(--topic-dossier-accent) !important;
}

/* Reader empty feedback follows the cool graphite dark-mode temperature. */
html.theme-dark .reader-toast:not([data-toast-kind="speaker-attribution-loading"]),
body.theme-dark .reader-toast:not([data-toast-kind="speaker-attribution-loading"]) {
  border-color: rgba(235, 228, 217, 0.1) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(248, 239, 224, 0.05), transparent 44%),
    linear-gradient(180deg, rgba(35, 36, 41, 0.97), rgba(22, 23, 27, 0.98)) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
  color: rgba(239, 235, 228, 0.92) !important;
}

html.theme-dark .empty-reader-title,
body.theme-dark .empty-reader-title {
  color: rgba(241, 237, 230, 0.94) !important;
}

html.theme-dark .empty-reader-action,
body.theme-dark .empty-reader-action {
  border: 1px solid rgba(235, 228, 217, 0.1) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(248, 239, 224, 0.045), transparent 44%),
    linear-gradient(180deg, rgba(33, 34, 39, 0.88), rgba(23, 24, 28, 0.9)) !important;
  color: rgba(239, 235, 228, 0.88) !important;
  box-shadow:
    0 13px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

/* Complete the blank Home state: every nested surface uses cool graphite, not umber. */
html.theme-dark #inputPanel.home-ambient-active .home-resume-card:not(.has-book),
body.theme-dark #inputPanel.home-ambient-active .home-resume-card:not(.has-book),
html.theme-dark #inputPanel.home-ambient-active .home-action-panel,
body.theme-dark #inputPanel.home-ambient-active .home-action-panel,
html.theme-dark #inputPanel.home-ambient-active .home-reading-panel,
body.theme-dark #inputPanel.home-ambient-active .home-reading-panel,
html.theme-dark #inputPanel.home-ambient-active .home-empty-progress,
body.theme-dark #inputPanel.home-ambient-active .home-empty-progress {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(248, 239, 224, 0.05), transparent 42%),
    linear-gradient(145deg, rgba(33, 34, 39, 0.78), rgba(23, 24, 28, 0.72)) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

html.theme-dark .home-cover-placeholder,
body.theme-dark .home-cover-placeholder {
  border-color: rgba(235, 228, 217, 0.1) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(248, 239, 224, 0.055), transparent 52%),
    linear-gradient(155deg, rgba(36, 37, 42, 0.94), rgba(22, 23, 27, 0.96)) !important;
  color: rgba(220, 112, 99, 0.82) !important;
  box-shadow: inset 0 0 0 1px rgba(235, 228, 217, 0.085) !important;
}

html.theme-dark :is(.home-action-icon, .home-empty-icon),
body.theme-dark :is(.home-action-icon, .home-empty-icon) {
  border-color: rgba(235, 228, 217, 0.1) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(248, 239, 224, 0.065), transparent 54%),
    linear-gradient(180deg, rgba(37, 38, 43, 0.96), rgba(23, 24, 28, 0.97)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(235, 228, 217, 0.075),
    0 10px 22px rgba(0, 0, 0, 0.25) !important;
}

html.theme-dark .home-secondary-action,
body.theme-dark .home-secondary-action {
  border-color: rgba(235, 228, 217, 0.11) !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(248, 239, 224, 0.045), transparent 54%),
    linear-gradient(180deg, rgba(37, 38, 43, 0.9), rgba(23, 24, 28, 0.92)) !important;
  color: rgba(241, 237, 230, 0.9) !important;
  box-shadow:
    0 12px 25px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

/* Papers keep one neutral slate layer from the group panel through each row and icon well. */
html.theme-dark #collectionView [data-library-section="papers"] .library-stack-list,
body.theme-dark #collectionView [data-library-section="papers"] .library-stack-list {
  border-color: rgba(204, 214, 224, 0.13) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(91, 136, 151, 0.065), transparent 38%),
    radial-gradient(circle at 12% 0%, rgba(248, 239, 224, 0.032), transparent 42%),
    linear-gradient(180deg, rgba(31, 33, 39, 0.92), rgba(21, 23, 28, 0.94)) !important;
  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(248, 239, 224, 0.035) !important;
}

html.theme-dark #collectionView [data-library-section="papers"] .library-stack-row.is-papers,
body.theme-dark #collectionView [data-library-section="papers"] .library-stack-row.is-papers {
  background: linear-gradient(145deg, rgba(30, 32, 38, 0.72), rgba(22, 24, 29, 0.68)) !important;
}

html.theme-dark #collectionView [data-library-section="papers"] .library-stack-row.is-papers + .library-stack-row.is-papers,
body.theme-dark #collectionView [data-library-section="papers"] .library-stack-row.is-papers + .library-stack-row.is-papers {
  border-top-color: rgba(204, 214, 224, 0.11) !important;
}

html.theme-dark #collectionView [data-library-section="papers"] .collection-cover,
body.theme-dark #collectionView [data-library-section="papers"] .collection-cover,
html.theme-dark #collectionView [data-library-section="papers"] .collection-menu-toggle,
body.theme-dark #collectionView [data-library-section="papers"] .collection-menu-toggle {
  border-color: rgba(204, 214, 224, 0.11) !important;
  background:
    radial-gradient(circle at 28% 16%, rgba(248, 239, 224, 0.055), transparent 45%),
    linear-gradient(145deg, rgba(45, 48, 56, 0.94), rgba(27, 29, 35, 0.96)) !important;
  color: rgba(213, 218, 222, 0.82) !important;
}

/* Dock controls and Library reading rows stay anchored under the finger. */
:is(.home-bottom-nav, .gutenberg-bottom-nav, .bottom-dock) button:is(:active, .is-tactile-press),
#collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  :is(.library-stack-row, .collection-open):is(:active, .is-tactile-press) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
}

/* Articles share the cooler graphite material already established for papers. */
html.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"]) .library-stack-list,
body.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"]) .library-stack-list {
  border-color: rgba(204, 214, 224, 0.13) !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(91, 136, 151, 0.065), transparent 38%),
    radial-gradient(circle at 12% 0%, rgba(248, 239, 224, 0.032), transparent 42%),
    linear-gradient(180deg, rgba(31, 33, 39, 0.92), rgba(21, 23, 28, 0.94)) !important;
  box-shadow:
    0 15px 34px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(248, 239, 224, 0.035) !important;
}

html.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .library-stack-row:is(.is-articles, .is-papers),
body.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .library-stack-row:is(.is-articles, .is-papers) {
  background: linear-gradient(145deg, rgba(30, 32, 38, 0.72), rgba(22, 24, 29, 0.68)) !important;
}

html.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .library-stack-row:is(.is-articles, .is-papers) + .library-stack-row:is(.is-articles, .is-papers),
body.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .library-stack-row:is(.is-articles, .is-papers) + .library-stack-row:is(.is-articles, .is-papers) {
  border-top-color: rgba(204, 214, 224, 0.11) !important;
}

html.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .collection-cover,
body.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .collection-cover {
  border-color: rgba(204, 214, 224, 0.11) !important;
  background:
    radial-gradient(circle at 28% 16%, rgba(248, 239, 224, 0.055), transparent 45%),
    linear-gradient(145deg, rgba(45, 48, 56, 0.94), rgba(27, 29, 35, 0.96)) !important;
  color: rgba(213, 218, 222, 0.82) !important;
}

html.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .collection-menu-toggle,
body.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .collection-menu-toggle {
  border-color: transparent !important;
  border-radius: 50% !important;
  background: transparent !important;
  background-image: none !important;
  color: rgba(205, 210, 214, 0.72) !important;
  box-shadow: none !important;
}

html.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .collection-menu-toggle:is(:active, [aria-expanded="true"]),
body.theme-dark #collectionView :is([data-library-section="articles"], [data-library-section="papers"])
  .collection-menu-toggle:is(:active, [aria-expanded="true"]) {
  background: transparent !important;
  color: rgba(229, 112, 97, 0.9) !important;
}

/* Fade dock contents individually so essential controls can remain slightly clearer. */
.reader-panel.is-playing:not(:has(.word-display.has-context)) .bottom-dock {
  opacity: 1 !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .slider-row {
  opacity: 0.64 !important;
  transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .progress-meta,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .progress-track {
  opacity: 0.46 !important;
  transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing :is(
  .text-size-button,
  .round-side-button,
  .bottom-right-actions,
  .control-helper
) {
  opacity: 0.46 !important;
  transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing #playButton.play-control-button {
  opacity: 0.7 !important;
  border-color: color-mix(in srgb, var(--rhythm-coral) 76%, transparent) !important;
  box-shadow:
    0 9px 21px rgba(0, 0, 0, 0.14),
    0 0 0 1px color-mix(in srgb, var(--rhythm-coral) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

html.theme-dark body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing #playButton.play-control-button,
body.theme-dark.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing #playButton.play-control-button {
  border-color: rgba(228, 99, 82, 0.76) !important;
  box-shadow:
    0 10px 23px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(228, 99, 82, 0.09),
    inset 0 1px 0 rgba(248, 239, 224, 0.04) !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing.is-adjusting-speed .slider-row,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .slider-row:focus-within,
body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing #playButton.play-control-button:focus-visible {
  opacity: 1 !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .bottom-dock {
  background: linear-gradient(180deg, rgba(246, 242, 233, 0.42), rgba(239, 232, 218, 0.34)) !important;
  box-shadow: 0 -9px 24px rgba(56, 43, 27, 0.055) !important;
}

html.theme-dark body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .bottom-dock,
body.theme-dark.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .bottom-dock {
  background: linear-gradient(180deg, rgba(29, 30, 35, 0.42), rgba(20, 21, 25, 0.34)) !important;
  box-shadow: 0 -9px 24px rgba(0, 0, 0, 0.17) !important;
}

/* Touch focus must not leave a halo behind on the reader corner controls. */
:is(#textPanelButton, #ebookBackButton, #ebookModeButton, #ebookSpeedModeButton):is(:focus, :focus-visible),
html.theme-dark :is(#textPanelButton, #ebookBackButton, #ebookModeButton, #ebookSpeedModeButton):is(:focus, :focus-visible),
body.theme-dark :is(#textPanelButton, #ebookBackButton, #ebookModeButton, #ebookSpeedModeButton):is(:focus, :focus-visible) {
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Ebook speaker attribution uses the current cool graphite control material. */

html.theme-dark body.ebook-mode #ebookCharacterLegendButton:is(:hover, :focus, :focus-visible, :active),
body.theme-dark.ebook-mode #ebookCharacterLegendButton:is(:hover, :focus, :focus-visible, :active) {
  background:
    radial-gradient(circle at 50% 16%, rgba(248, 239, 224, 0.085), transparent 48%),
    linear-gradient(180deg, rgba(42, 43, 48, 0.97), rgba(25, 26, 30, 0.99)) !important;
  box-shadow:
    0 12px 25px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(248, 239, 224, 0.055) !important;
}

/* Contents v4: a calm, book-index treatment. The shared reader title chrome is intentionally untouched. */
.chapter-panel {
  --contents-column-width: 700px;
  --contents-accent: var(--teal);
}

.chapter-panel .chapter-sheet {
  --chapter-row-height: 64px;
}

.chapter-panel :is(
  .chapter-screen-heading,
  .chapter-search,
  .chapter-current-card,
  .chapter-journey-card,
  .chapter-list-heading,
  .chapter-list
) {
  width: min(100%, var(--contents-column-width)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

.chapter-panel::before {
  opacity: 0.12 !important;
  background: radial-gradient(circle at 76% -8%, color-mix(in srgb, var(--contents-accent) 6%, transparent), transparent 38%) !important;
}

.chapter-panel .chapter-screen-heading {
  margin-bottom: clamp(15px, 2.2vh, 21px) !important;
  padding-left: 0 !important;
}

.chapter-panel .chapter-screen-heading h2 {
  font-size: clamp(1.82rem, 5.2vw, 2.28rem) !important;
  font-weight: 510 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.014em !important;
}

.chapter-panel .chapter-screen-heading h2 span {
  color: inherit !important;
}

.chapter-panel .chapter-screen-heading p {
  margin-top: 7px !important;
  color: rgba(78, 73, 66, 0.7) !important;
  font-size: clamp(0.79rem, 2.2vw, 0.89rem) !important;
}

.chapter-panel .chapter-search {
  min-height: 46px !important;
  margin-bottom: clamp(13px, 2vh, 18px) !important;
  padding-inline: 14px !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 10px !important;
  border: 1px solid rgba(103, 95, 84, 0.12) !important;
  border-radius: 14px !important;
  background: rgba(244, 240, 232, 0.62) !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-search input {
  font-size: clamp(0.84rem, 2.3vw, 0.94rem) !important;
}

.chapter-panel .chapter-list-heading {
  margin-top: 0 !important;
  margin-bottom: 5px !important;
  padding: 0 4px 7px !important;
  border-bottom: 1px solid rgba(104, 96, 85, 0.1) !important;
  color: rgba(63, 58, 51, 0.68) !important;
}

.chapter-panel .chapter-list-heading span,
.chapter-panel .chapter-list-heading small {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.64rem, 1.8vw, 0.72rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase;
}

.chapter-panel .chapter-list-heading small {
  color: rgba(80, 74, 65, 0.62) !important;
  letter-spacing: 0.02em !important;
  text-transform: none;
}

.chapter-panel .chapter-list {
  --chapter-row-gap: 0px;
}

.chapter-panel .chapter-option,
.chapter-panel .chapter-option-card {
  min-height: var(--chapter-row-height) !important;
}

.chapter-panel .chapter-option-card {
  grid-template-columns: 30px minmax(0, 1fr) auto 10px !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 5px 6px 5px 4px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(104, 96, 85, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-option-number {
  width: 30px !important;
  height: auto !important;
  align-self: center !important;
  justify-content: start !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(60, 98, 90, 0.66) !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(0.76rem, 2.2vw, 0.85rem) !important;
  font-weight: 540 !important;
  font-variant-numeric: tabular-nums;
  box-shadow: none !important;
}

.chapter-panel .chapter-option-copy {
  align-self: center !important;
  gap: 3px !important;
}

.chapter-panel .chapter-option-copy strong {
  color: rgba(30, 28, 25, 0.88) !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(0.98rem, 2.9vw, 1.1rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

.chapter-panel .chapter-option-page {
  align-self: center !important;
  color: rgba(80, 74, 65, 0.58) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.68rem, 1.9vw, 0.76rem) !important;
  font-weight: 560 !important;
}

.chapter-panel .chapter-option-chevron {
  align-self: center !important;
  color: var(--contents-accent) !important;
  opacity: 0 !important;
}

.chapter-panel .chapter-option:is(:hover, :focus-visible, .is-current) .chapter-option-chevron {
  opacity: 0.72 !important;
}

.chapter-panel .chapter-option.is-current .chapter-option-card {
  border-bottom-color: color-mix(in srgb, var(--contents-accent) 13%, transparent) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--contents-accent) 10%, transparent), color-mix(in srgb, var(--contents-accent) 3%, transparent) 68%, transparent) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--contents-accent) 78%, transparent) !important;
}

.chapter-panel .chapter-option.is-current :is(.chapter-option-number, .chapter-option-page, .chapter-option-chevron) {
  color: color-mix(in srgb, var(--contents-accent) 84%, black) !important;
}

.chapter-panel .chapter-volume-divider {
  min-height: 34px !important;
  margin-top: 10px !important;
  padding: 15px 4px 6px !important;
  gap: 11px !important;
  border: 0 !important;
  background: transparent !important;
}

html.theme-dark .chapter-panel .chapter-volume-divider,
body.theme-dark .chapter-panel .chapter-volume-divider {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-volume-divider::after {
  height: 1px !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--contents-accent) 18%, transparent), transparent) !important;
}

.chapter-panel .chapter-volume-divider span {
  color: color-mix(in srgb, var(--contents-accent) 66%, rgba(44, 41, 36, 0.68)) !important;
  font-size: clamp(0.63rem, 1.85vw, 0.72rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0.15em !important;
}

html.theme-dark .chapter-panel::before,
body.theme-dark .chapter-panel::before {
  opacity: 0.18 !important;
  background: radial-gradient(circle at 76% -8%, rgba(88, 154, 145, 0.07), transparent 38%) !important;
}

html.theme-dark .chapter-panel .chapter-screen-heading p,
body.theme-dark .chapter-panel .chapter-screen-heading p {
  color: rgba(201, 197, 190, 0.68) !important;
}

html.theme-dark .chapter-panel .chapter-search,
body.theme-dark .chapter-panel .chapter-search {
  border-color: rgba(235, 228, 217, 0.1) !important;
  background: rgba(29, 30, 34, 0.74) !important;
  box-shadow: none !important;
}

html.theme-dark .chapter-panel .chapter-search,
body.theme-dark .chapter-panel .chapter-search,
html.theme-dark .chapter-panel .chapter-search input,
body.theme-dark .chapter-panel .chapter-search input {
  color: rgba(226, 222, 215, 0.82) !important;
}

html.theme-dark .chapter-panel .chapter-search input::placeholder,
body.theme-dark .chapter-panel .chapter-search input::placeholder {
  color: rgba(201, 197, 190, 0.62) !important;
}

html.theme-dark .chapter-panel .chapter-current-text strong,
body.theme-dark .chapter-panel .chapter-current-text strong,
html.theme-dark .chapter-panel .chapter-option-copy strong,
body.theme-dark .chapter-panel .chapter-option-copy strong {
  color: rgba(239, 235, 228, 0.91) !important;
}

html.theme-dark .chapter-panel .chapter-list-heading,
body.theme-dark .chapter-panel .chapter-list-heading,
html.theme-dark .chapter-panel .chapter-option-card,
body.theme-dark .chapter-panel .chapter-option-card {
  border-bottom-color: rgba(235, 228, 217, 0.09) !important;
}

html.theme-dark .chapter-panel .chapter-list-heading,
body.theme-dark .chapter-panel .chapter-list-heading,
html.theme-dark .chapter-panel .chapter-list-heading small,
body.theme-dark .chapter-panel .chapter-list-heading small,
html.theme-dark .chapter-panel .chapter-option-page,
body.theme-dark .chapter-panel .chapter-option-page {
  color: rgba(191, 187, 180, 0.64) !important;
}

html.theme-dark .chapter-panel .chapter-option-number,
body.theme-dark .chapter-panel .chapter-option-number,
html.theme-dark .chapter-panel .chapter-volume-divider span,
body.theme-dark .chapter-panel .chapter-volume-divider span {
  color: rgba(126, 177, 166, 0.7) !important;
}

html.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-card {
  border-bottom-color: rgba(126, 177, 166, 0.12) !important;
  background: linear-gradient(90deg, rgba(73, 124, 115, 0.16), rgba(73, 124, 115, 0.045) 68%, transparent) !important;
  box-shadow: inset 2px 0 0 rgba(126, 177, 166, 0.76) !important;
}

html.theme-dark .chapter-panel .chapter-option.is-current :is(.chapter-option-number, .chapter-option-page, .chapter-option-chevron),
body.theme-dark .chapter-panel .chapter-option.is-current :is(.chapter-option-number, .chapter-option-page, .chapter-option-chevron) {
  color: rgba(139, 195, 183, 0.94) !important;
}

@media (max-width: 520px) {
  .chapter-panel .chapter-sheet {
    --chapter-row-height: 62px;
  }

  .chapter-panel .chapter-option-card {
    grid-template-columns: 27px minmax(0, 1fr) auto 9px !important;
    gap: 8px !important;
  }

  .chapter-panel .chapter-option-number {
    width: 27px !important;
  }
}

/* Contents v5: defeat the older dark-theme number badges and leave ordinals as quiet type. */
html.theme-dark body .chapter-panel .chapter-option-number,
body.theme-dark .chapter-panel .chapter-option-number,
html.theme-dark body .chapter-panel .chapter-option.is-current .chapter-option-number,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-number {
  width: 27px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  justify-content: start !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.chapter-panel .chapter-option.is-current .chapter-option-copy strong {
  color: rgba(30, 28, 25, 0.9) !important;
}

html.theme-dark body .chapter-panel .chapter-option.is-current .chapter-option-copy strong,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-copy strong {
  color: rgba(239, 235, 228, 0.92) !important;
}

/* Chapter rows stay on the scroll plane instead of depressing like chrome buttons. */
html body .chapter-panel .chapter-option:is(:active, .is-tactile-press),
html.theme-dark body .chapter-panel .chapter-option:is(:active, .is-tactile-press),
body.theme-dark .chapter-panel .chapter-option:is(:active, .is-tactile-press) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Contents v6: a warmer literary index with a clearly composed current location. */
.chapter-panel .chapter-screen-heading {
  margin-bottom: clamp(18px, 2.6vh, 25px) !important;
}

.chapter-panel .chapter-screen-heading h2 span {
  color: color-mix(in srgb, var(--rhythm-coral) 78%, var(--ink)) !important;
}

.chapter-panel .chapter-screen-heading::after {
  content: "";
  width: 68px;
  height: 2px;
  display: block;
  margin-top: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rhythm-coral), var(--rhythm-amber) 42%, var(--teal)) !important;
  opacity: 0.72;
}

.chapter-panel .chapter-search {
  min-height: 48px !important;
  border-radius: 16px !important;
  border-color: color-mix(in srgb, var(--teal) 14%, rgba(103, 95, 84, 0.1)) !important;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--teal) 3%, transparent), transparent 45%),
    rgba(244, 240, 232, 0.62) !important;
}

.chapter-panel .chapter-search-icon {
  color: color-mix(in srgb, var(--teal) 70%, rgba(64, 59, 52, 0.72)) !important;
}

.chapter-panel .chapter-list-heading {
  margin-bottom: 0 !important;
  padding: 0 5px 10px !important;
  border-bottom: 0 !important;
}

.chapter-panel .chapter-list-heading span {
  color: color-mix(in srgb, var(--teal) 58%, rgba(63, 58, 51, 0.72)) !important;
}

.chapter-panel .chapter-option-card {
  position: relative !important;
  padding: 5px 8px 5px 8px !important;
  border-bottom: 0 !important;
}

.chapter-panel .chapter-option-card::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 0;
  left: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgba(104, 96, 85, 0.12), rgba(104, 96, 85, 0.035)) !important;
  pointer-events: none;
}

.chapter-panel .chapter-option-number {
  width: 25px !important;
  padding-left: 2px !important;
  color: color-mix(in srgb, var(--teal) 58%, rgba(73, 67, 59, 0.7)) !important;
  font-size: clamp(0.78rem, 2.2vw, 0.87rem) !important;
  font-weight: 560 !important;
}

.chapter-panel .chapter-option-copy strong {
  font-size: clamp(1rem, 3vw, 1.13rem) !important;
  letter-spacing: 0.002em !important;
}

.chapter-panel .chapter-option-page {
  padding-right: 2px;
  letter-spacing: 0.015em;
}

.chapter-panel .chapter-option.is-current .chapter-option-card {
  min-height: calc(var(--chapter-row-height) - 8px) !important;
  margin: 4px 0 !important;
  padding-right: 10px !important;
  padding-left: 14px !important;
  border: 1px solid color-mix(in srgb, var(--teal) 14%, transparent) !important;
  border-radius: 12px !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 10%, transparent), color-mix(in srgb, var(--teal) 3%, transparent) 72%, transparent) !important;
  box-shadow: none !important;
}

.chapter-panel .chapter-option.is-current .chapter-option-card::after {
  content: none !important;
}

.chapter-panel .chapter-option.is-current .chapter-option-number,
.chapter-panel .chapter-option.is-current .chapter-option-page,
.chapter-panel .chapter-option.is-current .chapter-option-chevron {
  color: color-mix(in srgb, var(--teal) 88%, rgba(30, 28, 25, 0.9)) !important;
}

html.theme-dark body .chapter-panel .chapter-screen-heading h2 span,
body.theme-dark .chapter-panel .chapter-screen-heading h2 span {
  color: rgba(222, 104, 88, 0.92) !important;
}

html.theme-dark body .chapter-panel .chapter-search,
body.theme-dark .chapter-panel .chapter-search {
  border-color: rgba(126, 177, 166, 0.14) !important;
  background:
    linear-gradient(100deg, rgba(74, 126, 117, 0.055), transparent 45%),
    rgba(29, 30, 34, 0.72) !important;
}

html.theme-dark body .chapter-panel .chapter-search-icon,
body.theme-dark .chapter-panel .chapter-search-icon {
  color: rgba(139, 195, 183, 0.82) !important;
}

html.theme-dark body .chapter-panel .chapter-list-heading span,
body.theme-dark .chapter-panel .chapter-list-heading span {
  color: rgba(139, 195, 183, 0.72) !important;
}

html.theme-dark body .chapter-panel .chapter-option-card::after,
body.theme-dark .chapter-panel .chapter-option-card::after {
  background: linear-gradient(90deg, rgba(235, 228, 217, 0.1), rgba(235, 228, 217, 0.025)) !important;
}

html.theme-dark body .chapter-panel .chapter-option-number,
body.theme-dark .chapter-panel .chapter-option-number {
  width: 25px !important;
  padding-left: 2px !important;
  color: rgba(126, 177, 166, 0.68) !important;
}

html.theme-dark body .chapter-panel .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-card {
  border: 1px solid rgba(126, 177, 166, 0.13) !important;
  background: linear-gradient(90deg, rgba(73, 124, 115, 0.15), rgba(73, 124, 115, 0.045) 72%, transparent) !important;
  box-shadow: none !important;
}

html.theme-dark body .chapter-panel .chapter-option.is-current .chapter-option-number,
html.theme-dark body .chapter-panel .chapter-option.is-current .chapter-option-page,
html.theme-dark body .chapter-panel .chapter-option.is-current .chapter-option-chevron,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-number,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-page,
body.theme-dark .chapter-panel .chapter-option.is-current .chapter-option-chevron {
  color: rgba(139, 195, 183, 0.94) !important;
}

@media (max-width: 520px) {
  .chapter-panel .chapter-option-card {
    grid-template-columns: 25px minmax(0, 1fr) auto 9px !important;
    gap: 10px !important;
  }

  .chapter-panel .chapter-option.is-current .chapter-option-card {
    grid-template-columns: 25px minmax(0, 1fr) auto 9px !important;
    gap: 10px !important;
  }
}

/* Contents v7 final authority: keep the mockup palette above the older iterative contents rules. */
.chapter-panel .chapter-screen-heading h2 span {
  color: var(--contents-coral) !important;
}

.chapter-panel .chapter-screen-heading::after {
  width: 42px !important;
  height: 2px !important;
  margin-top: 13px !important;
  background: linear-gradient(90deg, var(--contents-coral) 0 72%, var(--contents-teal) 72% 100%) !important;
  opacity: 0.9 !important;
}

.chapter-panel .chapter-search {
  min-height: 48px !important;
  margin-top: 0 !important;
  margin-bottom: 13px !important;
  padding: 0 7px 0 14px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  border: 1px solid rgba(104, 96, 85, 0.13) !important;
  border-radius: 16px !important;
  background: rgba(246, 242, 234, 0.82) !important;
  box-shadow: none !important;
}

html.theme-dark body .chapter-panel .chapter-search,
body.theme-dark .chapter-panel .chapter-search {
  border-color: rgba(196, 203, 201, 0.12) !important;
  background: rgba(22, 26, 30, 0.86) !important;
}

/* Final popup surface authority: later iterative rules must not restore the legacy umber dark palette. */
html.theme-dark .font-size-popover,
body.theme-dark .font-size-popover,
html.theme-dark .ebook-page-shuttle-card,
body.theme-dark .ebook-page-shuttle-card {
  border-color: rgba(225, 230, 237, 0.12) !important;
  background:
    radial-gradient(circle at 91% 0%, rgba(213, 91, 75, 0.09), transparent 34%),
    radial-gradient(circle at 6% -4%, rgba(91, 153, 141, 0.075), transparent 38%),
    linear-gradient(155deg, rgba(31, 32, 37, 0.995), rgba(18, 19, 23, 0.995)) !important;
  color: rgba(245, 241, 234, 0.94) !important;
  box-shadow:
    0 32px 82px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(248, 244, 236, 0.055) !important;
}

html.theme-dark .reader-appearance-heading,
html.theme-dark .reader-appearance-size,
html.theme-dark .reader-appearance-font,
html.theme-dark .reader-appearance-options,
body.theme-dark .reader-appearance-heading,
body.theme-dark .reader-appearance-size,
body.theme-dark .reader-appearance-font,
body.theme-dark .reader-appearance-options {
  border-color: rgba(225, 230, 237, 0.105) !important;
}

/* The two reader mode-switch marks are visually invariant on touch and focus. */
:is(#ebookModeButton, #ebookSpeedModeButton),
:is(#ebookModeButton, #ebookSpeedModeButton):is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
html.theme-dark :is(#ebookModeButton, #ebookSpeedModeButton),
html.theme-dark :is(#ebookModeButton, #ebookSpeedModeButton):is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.theme-dark :is(#ebookModeButton, #ebookSpeedModeButton),
body.theme-dark :is(#ebookModeButton, #ebookSpeedModeButton):is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}

:is(#ebookModeButton, #ebookSpeedModeButton) .mode-switch-symbol,
:is(#ebookModeButton, #ebookSpeedModeButton):is(:hover, :focus, :focus-visible, :active, .is-tactile-press) .mode-switch-symbol {
  opacity: 0.86 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* Knowledge Atlas — a navigable evidence map, kept deliberately quieter than the concept mockups. */
.discover-open-atlas {
  width: fit-content;
  min-height: 2.55rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(220, 225, 234, 0.14);
  border-radius: 999px;
  background: rgba(19, 21, 27, 0.68);
  color: rgba(242, 237, 229, 0.88);
  font: 650 0.7rem/1 var(--font-sans, sans-serif);
  -webkit-tap-highlight-color: transparent;
}

.discover-open-atlas i {
  color: var(--accent, #cf6658);
  font-style: normal;
}

.discover-open-atlas:is(:active, .is-tactile-press) { transform: none !important; }

.topic-atlas-entry,
.topic-context-atlas {
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.topic-atlas-entry {
  width: 100%;
  min-height: 5.35rem;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, var(--topic-color, #bd6758) 30%, rgba(223, 228, 236, 0.12));
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 13% 12%, color-mix(in srgb, var(--topic-color, #bd6758) 14%, transparent), transparent 34%),
    linear-gradient(145deg, rgba(33, 35, 42, 0.9), rgba(20, 22, 28, 0.9));
  color: #f3eee6;
  text-align: left;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 18px 44px rgba(0, 0, 0, 0.14);
}

.topic-atlas-entry:is(:active, .is-tactile-press),
.topic-context-atlas:is(:active, .is-tactile-press) {
  transform: none !important;
}

.topic-atlas-entry-mark {
  position: relative;
  width: 3.2rem;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--topic-color, #bd6758) 42%, rgba(255, 255, 255, 0.12));
  border-radius: 50%;
  background: color-mix(in srgb, var(--topic-color, #bd6758) 9%, rgba(13, 15, 20, 0.9));
}

.topic-atlas-entry-mark i {
  position: absolute;
  width: 0.36rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--topic-color, #bd6758);
  box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--topic-color, #bd6758) 13%, transparent);
}

.topic-atlas-entry-mark i:nth-child(1) { inset: 22% auto auto 46%; }
.topic-atlas-entry-mark i:nth-child(2) { inset: 48% auto auto 23%; }
.topic-atlas-entry-mark i:nth-child(3) { inset: 51% 21% auto auto; }
.topic-atlas-entry-mark i:nth-child(4) { inset: auto auto 18% 47%; }

.topic-atlas-entry > span:not(.topic-atlas-entry-mark) {
  min-width: 0;
  display: grid;
  gap: 0.13rem;
}

.topic-atlas-entry small,
.topic-atlas-entry em {
  color: rgba(215, 211, 205, 0.65);
  font: 600 0.69rem/1.35 var(--font-sans, sans-serif);
  font-style: normal;
  letter-spacing: 0.02em;
}

.topic-atlas-entry small {
  color: color-mix(in srgb, var(--topic-color, #bd6758) 70%, #f2ded4);
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.topic-atlas-entry strong {
  overflow-wrap: anywhere;
  font: 600 1.05rem/1.2 var(--font-serif, serif);
}

.topic-atlas-entry > b {
  color: var(--topic-color, #bd6758);
  font: 400 1.25rem/1 var(--font-sans, sans-serif);
}

.topic-context-atlas {
  width: 100%;
  min-height: 2.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.35rem;
  padding: 0.72rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--topic-color, #bd6758) 38%, rgba(255, 255, 255, 0.1));
  border-radius: 0.95rem;
  background: color-mix(in srgb, var(--topic-color, #bd6758) 8%, rgba(18, 20, 26, 0.88));
  color: rgba(244, 240, 233, 0.9);
  font: 650 0.78rem/1 var(--font-sans, sans-serif);
}

.topic-context-atlas span { color: var(--topic-color, #bd6758); }

.topic-discovery-content.is-knowledge-atlas,
.topic-discovery-content.is-entity-dossier {
  padding-inline: clamp(0.9rem, 3.5vw, 1.4rem);
}

.knowledge-atlas button:is(:active, .is-tactile-press),
.knowledge-entity-dossier button:is(:active, .is-tactile-press) {
  filter: none;
}

.knowledge-atlas-collapse:is(:active, .is-tactile-press),
.knowledge-atlas-compact-open:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

.knowledge-atlas-center:is(:active, .is-tactile-press) {
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  scale: none !important;
}

.knowledge-atlas-node:is(:active, .is-tactile-press) {
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  scale: none !important;
}

:is(.discover-topics-view, .topic-discovery-panel) button.knowledge-atlas-center:is(:active, .is-tactile-press),
:is(.discover-topics-view, .topic-discovery-panel) button.knowledge-atlas-node:is(:active, .is-tactile-press) {
  transform: translate(-50%, -50%) !important;
  translate: none !important;
  scale: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Entity dossier */

/* Entity dossier pilot: an evidence-backed person page grown from the Atlas. */

.is-person-pilot button,
.is-person-pilot button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Reader control hierarchy: dialogue top-left, Home bottom-left, appearance bottom-right. */
.character-legend-sheet {
  left: var(--character-popover-left, auto) !important;
  top: var(--character-popover-top, auto) !important;
  right: var(--character-popover-right, auto) !important;
  bottom: var(--character-popover-bottom, auto) !important;
  height: auto;
  max-height: min(680px, calc(100dvh - 20px));
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.character-legend-header {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.character-legend-close {
  position: absolute;
  z-index: 6;
}

.character-legend-list {
  flex: 0 1 auto;
  min-height: 0;
  align-content: start;
  padding-right: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.reader-panel > .top-bar > .top-dialogue-button,
.ebook-reader > .ebook-top-bar > .top-dialogue-button,
.reader-panel > .top-bar > .top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
.ebook-reader > .ebook-top-bar > .top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  grid-column: 1 !important;
  width: var(--top-control-size) !important;
  min-width: var(--top-control-size) !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin-inline-start: var(--top-corner-inset) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.88;
  -webkit-tap-highlight-color: transparent !important;
}

body:not(.ebook-mode) .reader-panel .controls > #textPanelButton.bottom-home-button,
body:not(.ebook-mode) .reader-panel .controls > #textPanelButton.bottom-home-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.ebook-mode .ebook-reader #ebookBackButton.ebook-bottom-home-button,
body.ebook-mode .ebook-reader #ebookBackButton.ebook-bottom-home-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--rhythm-control-ink) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1;
  -webkit-tap-highlight-color: transparent !important;
}

body:not(.ebook-mode) .reader-panel .controls > #textPanelButton.bottom-home-button {
  grid-column: 1 !important;
  justify-self: start !important;
}

body.ebook-mode .ebook-reader .ebook-bottom-actions {
  position: static !important;
  transform: none !important;
  pointer-events: none !important;
}

body.ebook-mode .ebook-reader #ebookBackButton.ebook-bottom-home-button {
  position: fixed !important;
  left: max(24px, calc(env(safe-area-inset-left) + 24px)) !important;
  right: auto !important;
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 26px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

:is(#textPanelButton, #ebookBackButton) .home-symbol {
  width: 27px !important;
  height: 27px !important;
  stroke-width: 2 !important;
  filter: none !important;
  transform: none !important;
}

body:not(.ebook-mode) .reader-panel .controls > #textSizeButton,
body:not(.ebook-mode) .reader-panel .controls > #textSizeButton:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--rhythm-control-ink) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}

body:not(.ebook-mode) .reader-panel .controls > #textSizeButton.is-open {
  color: var(--rhythm-coral) !important;
}

body:not(.ebook-mode) .reader-panel .controls > #fontSizePopover {
  top: auto !important;
  right: 0 !important;
  bottom: calc(100% + 10px) !important;
  left: auto !important;
}

body.ebook-mode .reader-panel #textSizeButton,
body.ebook-mode .reader-panel #textSizeButton:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  right: max(24px, calc(env(safe-area-inset-right) + 24px)) !important;
  left: auto !important;
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 26px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: rgba(45, 39, 31, 0.96) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

html.theme-dark body.ebook-mode .reader-panel #textSizeButton,
body.theme-dark.ebook-mode .reader-panel #textSizeButton {
  color: rgba(241, 237, 230, 0.9) !important;
}

body.ebook-mode .reader-panel #fontSizePopover {
  right: max(12px, calc(env(safe-area-inset-right) + 10px)) !important;
  left: auto !important;
  bottom: max(86px, calc(env(safe-area-inset-bottom) + 80px)) !important;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .controls > #textPanelButton.bottom-home-button {
  opacity: 0.46 !important;
  transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

/* Who's Speaking mark: a quiet connected-speaker constellation, never a material tile. */

html.theme-dark body .reader-panel > .top-bar > .top-dialogue-button,
html.theme-dark body .ebook-reader > .ebook-top-bar > .top-dialogue-button,
body.theme-dark .reader-panel > .top-bar > .top-dialogue-button,
body.theme-dark .ebook-reader > .ebook-top-bar > .top-dialogue-button,
html.theme-dark body .reader-panel > .top-bar > .top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
html.theme-dark body .ebook-reader > .ebook-top-bar > .top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.theme-dark .reader-panel > .top-bar > .top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.theme-dark .ebook-reader > .ebook-top-bar > .top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.reader-panel > .top-bar > .top-dialogue-button:is(:hover, :focus-visible, [aria-expanded="true"]),
.ebook-reader > .ebook-top-bar > .top-dialogue-button:is(:hover, :focus-visible, [aria-expanded="true"]) {
  opacity: 1 !important;
}

.top-dialogue-button:is(:hover, :focus-visible, [aria-expanded="true"]) .character-legend-symbol {
  opacity: 1;
}

@keyframes speaker-constellation-halo {
  0%, 100% { opacity: 0.2; transform: scale(0.86); }
  50% { opacity: 0.8; transform: scale(1.12); }
}

@keyframes speaker-constellation-breathe {
  0%, 100% { opacity: 0.78; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.035); }
}

@keyframes speaker-constellation-complete-halo {
  0% { opacity: 0; transform: scale(0.72); }
  30% { opacity: 0.95; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.42); }
}

@keyframes speaker-constellation-complete-mark {
  0% { filter: brightness(1); transform: scale(0.94); }
  28% { filter: brightness(1.3) saturate(1.12); transform: scale(1.1); }
  100% { filter: brightness(1); transform: scale(1); }
}

@keyframes speaker-constellation-open-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes speaker-constellation-open-flourish {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes speaker-constellation-node-pulse {
  0%, 24%, 68%, 100% {
    opacity: 0.62;
    filter: brightness(0.86) saturate(0.9);
    transform: scale(0.9);
  }
  36% {
    opacity: 0.82;
    filter: brightness(1.04) saturate(1.06);
    transform: scale(1);
  }
  46% {
    opacity: 1;
    filter: brightness(1.42) saturate(1.38) drop-shadow(0 0 2.8px var(--legend-node-glow));
    transform: scale(1.2);
  }
  56% {
    opacity: 0.8;
    filter: brightness(1.03) saturate(1.06);
    transform: scale(0.99);
  }
}

/* Ebook final authority: never restore the legacy material behind the constellation. */
body.ebook-mode #ebookCharacterLegendButton.top-dialogue-button,
body.ebook-mode #ebookCharacterLegendButton.top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
html.theme-dark body.ebook-mode #ebookCharacterLegendButton.top-dialogue-button,
html.theme-dark body.ebook-mode #ebookCharacterLegendButton.top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.theme-dark.ebook-mode #ebookCharacterLegendButton.top-dialogue-button,
body.theme-dark.ebook-mode #ebookCharacterLegendButton.top-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Ebook selection uses the same candlelight family as the Context word highlight. */
body.ebook-mode .ebook-word.is-current {
  border-radius: 0.36em 0.31em 0.4em 0.33em / 0.32em 0.39em 0.31em 0.37em !important;
  background: rgba(255, 231, 148, 0.5) !important;
  color: var(--ink) !important;
  box-shadow:
    inset 0 0 0 1px rgba(217, 53, 44, 0.18),
    0 0 0 0.12em rgba(255, 224, 132, 0.12),
    0 0.3em 0.78em rgba(217, 53, 44, 0.08) !important;
  text-shadow: 0.012em 0 0 rgba(22, 22, 22, 0.42) !important;
}

html.theme-dark body.ebook-mode .ebook-word.is-current,
body.theme-dark.ebook-mode .ebook-word.is-current {
  background:
    radial-gradient(ellipse at 48% 46%, rgba(232, 160, 60, 0.63), rgba(178, 103, 34, 0.5) 68%, rgba(106, 59, 22, 0.37) 100%) !important;
  color: rgba(255, 248, 230, 0.99) !important;
  box-shadow:
    inset 0 0 0 1px rgba(246, 191, 92, 0.44),
    inset 0 1px 2px rgba(255, 232, 166, 0.14),
    0 0 0 0.1em rgba(225, 147, 50, 0.13),
    0 0 0.72em rgba(230, 143, 45, 0.27),
    0 0.35em 0.9em rgba(0, 0, 0, 0.21) !important;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.35),
    0 0 0.46em rgba(244, 188, 94, 0.16) !important;
}

body.ebook-mode .ebook-word.is-current::after {
  display: none !important;
  content: none !important;
}

/* Reading appearance shares the dialogue guide's anchored, editorial popover language. */
.font-size-popover {
  width: min(420px, calc(100vw - 20px)) !important;
  height: min(650px, calc(100dvh - 110px));
  max-height: min(680px, calc(100dvh - 110px)) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(108, 88, 64, 0.14) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(93, 151, 139, 0.13), transparent 32%),
    radial-gradient(circle at 6% -2%, rgba(202, 91, 72, 0.09), transparent 30%),
    linear-gradient(155deg, rgba(255, 253, 247, 0.995), rgba(245, 237, 224, 0.99)) !important;
  box-shadow:
    0 30px 76px rgba(42, 31, 21, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.05);
  backdrop-filter: blur(22px) saturate(1.05);
}

.reader-appearance-heading {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 15px 57px 14px 20px;
  border-bottom: 1px solid rgba(91, 76, 56, 0.115);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.56), rgba(255, 253, 248, 0.16));
}

.reader-appearance-heading > span {
  min-width: 0;
  color: rgba(35, 32, 28, 0.92);
  font-family: var(--reading-font);
  font-size: clamp(1.18rem, 4.8vw, 1.42rem);
  font-weight: 560;
  letter-spacing: -0.025em;
  line-height: 1;
}

.reader-appearance-heading > small {
  width: fit-content;
  margin-left: auto;
  padding: 5px 8px;
  border: 1px solid rgba(102, 86, 67, 0.1);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.52);
  color: rgba(75, 67, 57, 0.68);
  font-family: var(--ui-font);
  font-size: 0.59rem;
  font-weight: 690;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.reader-appearance-scroll {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 0;
  padding: 0 19px 19px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scroll-padding-bottom: 18px;
  -webkit-overflow-scrolling: touch;
}

.reader-appearance-size-scale {
  --appearance-size-progress: 0%;
  position: relative;
  grid-column: 1 / -1;
  height: 28px;
  display: grid;
  grid-template-columns: repeat(var(--appearance-size-count, 8), minmax(0, 1fr));
  align-items: center;
  margin: 2px 5px 0;
  isolation: isolate;
}

.reader-appearance-size-scale::before,
.reader-appearance-size-scale::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 13px;
  height: 2px;
  border-radius: 999px;
  pointer-events: none;
}

.reader-appearance-size-scale::before {
  right: 10px;
  z-index: -2;
  background: rgba(107, 96, 81, 0.18);
}

.reader-appearance-size-scale::after {
  z-index: -1;
  width: var(--appearance-size-progress);
  background: linear-gradient(90deg, var(--rhythm-coral), var(--rhythm-amber-bright));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rhythm-coral) 14%, transparent);
}

.reader-appearance-size-stop {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.reader-appearance-size-stop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(107, 96, 81, 0.46);
  transform: translate(-50%, -50%);
  transition: width 160ms ease, height 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.reader-appearance-size-stop.is-active::after {
  width: 15px;
  height: 15px;
  border: 3px solid rgba(255, 253, 247, 0.92);
  background: var(--rhythm-coral);
  box-shadow:
    0 0 0 1px rgba(113, 74, 45, 0.12),
    0 4px 10px rgba(92, 52, 34, 0.18);
}

.reader-appearance-dialogue-colours {
  gap: 11px;
  padding: 15px 4px 12px;
}

.reader-appearance-dialogue-colours .dialogue-color-options {
  gap: 9px 5px;
}

.reader-appearance-dialogue-colours .dialogue-color-option {
  min-height: 55px;
  gap: 5px;
}

.reader-appearance-dialogue-colours .dialogue-color-dot {
  width: 22px;
  height: 22px;
}

html.theme-dark .font-size-popover,
body.theme-dark .font-size-popover {
  border-color: rgba(225, 230, 237, 0.12) !important;
  background:
    radial-gradient(circle at 91% 0%, rgba(213, 91, 75, 0.1), transparent 34%),
    radial-gradient(circle at 6% -4%, rgba(91, 153, 141, 0.085), transparent 38%),
    linear-gradient(155deg, rgba(31, 32, 37, 0.995), rgba(18, 19, 23, 0.995)) !important;
  color: rgba(245, 241, 234, 0.94) !important;
  box-shadow:
    0 32px 82px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(248, 244, 236, 0.055) !important;
}

html.theme-dark .reader-appearance-heading,
body.theme-dark .reader-appearance-heading {
  border-color: rgba(225, 230, 237, 0.105) !important;
  background: linear-gradient(180deg, rgba(248, 244, 236, 0.025), transparent);
}

html.theme-dark .reader-appearance-heading > span,
body.theme-dark .reader-appearance-heading > span {
  color: rgba(246, 241, 234, 0.95);
}

html.theme-dark .reader-appearance-heading > small,
body.theme-dark .reader-appearance-heading > small {
  border-color: rgba(225, 230, 237, 0.1);
  background: rgba(229, 234, 240, 0.035);
  color: rgba(205, 207, 211, 0.66);
}

html.theme-dark .reader-appearance-size-scale::before,
body.theme-dark .reader-appearance-size-scale::before {
  background: rgba(218, 221, 226, 0.18);
}

html.theme-dark .reader-appearance-size-stop::after,
body.theme-dark .reader-appearance-size-stop::after {
  background: rgba(218, 221, 226, 0.32);
}

html.theme-dark .reader-appearance-size-stop.is-active::after,
body.theme-dark .reader-appearance-size-stop.is-active::after {
  border-color: rgba(246, 241, 234, 0.92);
  background: var(--rhythm-coral);
  box-shadow:
    0 0 0 1px rgba(225, 230, 237, 0.1),
    0 0 14px rgba(224, 108, 91, 0.2);
}

@media (max-width: 430px) {
  .font-size-popover {
    width: min(400px, calc(100vw - 16px)) !important;
    border-radius: 26px !important;
  }

  .reader-appearance-heading {
    padding-left: 17px;
  }

  .reader-appearance-scroll {
    padding-inline: 16px;
  }
}

/* Stats calm hierarchy: one hero, one rhythm, and restrained supporting detail. */
#statsView.stats-view {
  --stats-calm-coral: #d86859;
  --stats-calm-sage: #708f82;
  --stats-calm-gold: #aa9168;
  --stats-calm-ink: rgba(37, 35, 31, 0.96);
  --stats-calm-muted: rgba(83, 79, 72, 0.68);
  --stats-calm-line: rgba(77, 68, 57, 0.1);
  --stats-calm-surface: rgba(255, 253, 248, 0.82);
  gap: 14px;
}

#statsView > .collection-header {
  margin-bottom: 0;
}

#statsView > .collection-header h2 {
  font-size: clamp(2.15rem, 8vw, 2.65rem);
  line-height: 1;
}

#statsView .stats-tabs {
  min-height: 44px;
  padding: 4px;
  border-color: var(--stats-calm-line);
  background: rgba(239, 235, 226, 0.74);
  box-shadow: none;
}

#statsView .stats-tab {
  min-height: 34px;
  color: var(--stats-calm-muted);
  font-size: clamp(0.7rem, 2.5vw, 0.78rem);
  font-weight: 610;
}

#statsView .stats-tab.is-active {
  color: var(--stats-calm-ink);
  background: rgba(255, 253, 248, 0.96);
  box-shadow:
    0 5px 14px rgba(54, 45, 35, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

#statsView .stats-calm-dashboard {
  display: grid;
  gap: 11px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}

#statsView .stats-calm-card,
#statsView .stats-calm-metrics,
#statsView .stats-calm-more {
  border: 1px solid var(--stats-calm-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.7), transparent 40%),
    var(--stats-calm-surface);
  box-shadow:
    0 10px 24px rgba(48, 40, 30, 0.042),
    inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

#statsView .stats-calm-card h3 {
  margin: 0;
  color: var(--stats-calm-ink);
  font-family: var(--reading-font);
  font-size: clamp(1.02rem, 3.6vw, 1.2rem);
  font-weight: 430;
  line-height: 1.1;
}

#statsView .stats-calm-hero {
  min-height: 172px;
  padding: 19px 18px 16px;
  display: grid;
  grid-template-columns: minmax(122px, 0.78fr) minmax(0, 1.22fr);
  gap: 18px;
  align-items: end;
  overflow: hidden;
}

#statsView .stats-calm-hero-copy {
  min-width: 0;
  align-self: center;
}

#statsView .stats-calm-hero-copy > span {
  display: block;
  margin-bottom: 8px;
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 660;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

#statsView .stats-calm-hero-copy > strong {
  display: block;
  color: var(--stats-calm-ink);
  font-family: var(--reading-font);
  font-size: clamp(2.1rem, 8.4vw, 3.15rem);
  font-weight: 410;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 0.94;
  white-space: nowrap;
}

#statsView .stats-calm-hero-copy p {
  margin: 12px 0 0;
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: clamp(0.66rem, 2.4vw, 0.76rem);
  font-weight: 540;
  line-height: 1.4;
}

#statsView .stats-calm-hero-copy p i {
  width: 3px;
  height: 3px;
  margin: 0 0.36em 0.15em;
  display: inline-block;
  border-radius: 50%;
  background: var(--stats-calm-gold);
  vertical-align: middle;
}

#statsView .stats-calm-hero .stats-editorial-bars {
  height: 104px;
  margin: 0;
  grid-template-columns: repeat(var(--stats-point-count), minmax(0, 1fr));
  gap: clamp(3px, 1.3vw, 7px);
}

#statsView .stats-calm-hero .stats-editorial-bars span {
  gap: 7px;
}

#statsView .stats-calm-hero .stats-editorial-bars i {
  width: min(100%, 11px);
  min-height: 3px;
  border-radius: 999px 999px 3px 3px;
  background: rgba(112, 143, 130, 0.52);
}

#statsView .stats-calm-hero .stats-editorial-bars .is-active i {
  background: var(--stats-calm-coral);
}

#statsView .stats-calm-hero .stats-editorial-bars small {
  color: var(--stats-calm-muted);
  font-size: clamp(0.44rem, 1.9vw, 0.56rem);
}

#statsView .stats-calm-metrics small,
#statsView .stats-calm-more article > small {
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: clamp(0.62rem, 2.2vw, 0.7rem);
  font-weight: 590;
  line-height: 1.18;
}

#statsView .stats-calm-metrics strong,
#statsView .stats-calm-more article > strong {
  min-width: 0;
  color: var(--stats-calm-ink);
  font-family: var(--ui-font);
  font-size: clamp(1.08rem, 4.4vw, 1.42rem);
  font-weight: 620;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
}

#statsView .stats-calm-metrics strong span,
#statsView .stats-calm-more article > strong span {
  color: var(--stats-calm-muted);
  font-size: 0.56em;
  font-weight: 580;
  letter-spacing: 0;
}

#statsView .stats-calm-rhythm-card {
  padding: 17px 18px 16px;
  display: grid;
  gap: 17px;
}

#statsView .stats-calm-section-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

#statsView .stats-calm-section-heading p {
  margin: 5px 0 0;
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 540;
}

#statsView .stats-calm-rhythm-feature {
  min-width: 118px;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(112, 143, 130, 0.18);
  border-radius: 12px;
  background: rgba(112, 143, 130, 0.08);
}

#statsView .stats-calm-rhythm-feature .stats-time-icon {
  flex: 0 0 auto;
  color: var(--stats-calm-sage);
}

#statsView .stats-calm-rhythm-feature span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#statsView .stats-calm-rhythm-feature small {
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: 0.54rem;
  font-weight: 570;
  line-height: 1;
}

#statsView .stats-calm-rhythm-feature strong {
  overflow: hidden;
  color: var(--stats-calm-ink);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statsView .stats-calm-day-dots {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

#statsView .stats-calm-day-dots > span {
  min-width: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
}

#statsView .stats-calm-day-dots i {
  width: 100%;
  max-width: 34px;
  height: 6px;
  border-radius: 999px;
  background: rgba(132, 126, 117, 0.18);
}

#statsView .stats-calm-day-dots .is-active i {
  background: var(--stats-calm-sage);
}

#statsView .stats-calm-day-dots small {
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: 0.54rem;
  font-weight: 620;
}

#statsView .stats-calm-book-card {
  min-height: 122px;
  padding: 17px 18px;
}

#statsView .stats-calm-book-card .stats-book-spotlight {
  margin-top: 13px;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 13px;
}

#statsView .stats-calm-book-card .stats-book-cover {
  width: 52px;
  border-radius: 8px;
}

#statsView .stats-calm-book-card .stats-book-spotlight strong {
  color: var(--stats-calm-ink);
  font-family: var(--ui-font);
  font-size: clamp(0.92rem, 3.5vw, 1.08rem);
  font-weight: 650;
  letter-spacing: -0.012em;
  line-height: 1.24;
}

#statsView .stats-calm-book-card .stats-book-spotlight p,
#statsView .stats-calm-book-card .stats-empty-line {
  margin-top: 6px;
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: clamp(0.64rem, 2.35vw, 0.73rem);
  line-height: 1.35;
}

#statsView .stats-calm-more {
  overflow: hidden;
}

#statsView .stats-calm-more summary {
  min-height: 54px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--stats-calm-ink);
  cursor: pointer;
  font-family: var(--ui-font);
  font-size: 0.76rem;
  font-weight: 640;
  list-style: none;
}

#statsView .stats-calm-more summary::-webkit-details-marker {
  display: none;
}

#statsView .stats-calm-more summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--stats-calm-muted);
  border-bottom: 1.5px solid var(--stats-calm-muted);
  transform: rotate(45deg) translate(-2px, 2px);
  transition: transform 180ms ease;
}

#statsView .stats-calm-more[open] summary::after {
  transform: rotate(225deg) translate(-2px, 2px);
}

#statsView .stats-calm-more[open] summary {
  border-bottom: 1px solid var(--stats-calm-line);
}

#statsView .stats-calm-more-grid {
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

#statsView .stats-calm-more-grid > article {
  min-width: 0;
  min-height: 91px;
  padding: 13px;
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid var(--stats-calm-line);
  border-radius: 14px;
  background: rgba(112, 143, 130, 0.045);
}

#statsView .stats-calm-more-grid .stats-calm-time-card {
  grid-column: 1 / -1;
}

#statsView .stats-calm-more .stats-pace-range {
  margin-top: 1px;
}

#statsView .stats-calm-more .stats-pace-range > span {
  background:
    linear-gradient(
      90deg,
      rgba(132, 126, 117, 0.16) 0 var(--pace-start),
      var(--stats-calm-sage) var(--pace-start) var(--pace-end),
      rgba(132, 126, 117, 0.16) var(--pace-end) 100%
    );
}

#statsView .stats-calm-more .stats-pace-range > i,
#statsView .stats-calm-more .stats-pace-range > em {
  background: var(--stats-calm-gold);
}

#statsView .stats-calm-more .stats-pace-range small {
  color: var(--stats-calm-muted);
}

#statsView .stats-calm-time-card > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

#statsView .stats-calm-time-card > div > span {
  min-width: 0;
  padding: 7px 4px;
  display: grid;
  gap: 3px;
  border-radius: 9px;
  background: rgba(132, 126, 117, 0.08);
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: 0.54rem;
  font-weight: 550;
  text-align: center;
}

#statsView .stats-calm-time-card > div > span strong {
  color: var(--stats-calm-ink);
  font-size: 0.68rem;
}

#statsView .stats-calm-time-card > div > span.is-highlighted {
  background: rgba(112, 143, 130, 0.13);
  color: var(--stats-calm-sage);
}

html.theme-dark #statsView.stats-view,
body.theme-dark #statsView.stats-view {
  --stats-calm-coral: #dc725f;
  --stats-calm-sage: #86a99b;
  --stats-calm-gold: #baa078;
  --stats-calm-ink: rgba(245, 241, 234, 0.95);
  --stats-calm-muted: rgba(197, 198, 201, 0.62);
  --stats-calm-line: rgba(225, 230, 237, 0.1);
  --stats-calm-surface: rgba(30, 32, 38, 0.84);
  --stats-red: var(--stats-calm-coral);
  background:
    radial-gradient(circle at 92% 2%, rgba(220, 114, 95, 0.07), transparent 31%),
    radial-gradient(circle at 5% 12%, rgba(134, 169, 155, 0.065), transparent 34%),
    linear-gradient(180deg, #17181c 0%, #121317 100%) !important;
}

html.theme-dark #statsView > .collection-header h2,
body.theme-dark #statsView > .collection-header h2 {
  color: var(--stats-calm-ink) !important;
}

html.theme-dark #statsView .stats-tabs,
body.theme-dark #statsView .stats-tabs {
  border-color: var(--stats-calm-line) !important;
  background: rgba(29, 31, 36, 0.84) !important;
  box-shadow: inset 0 1px 0 rgba(248, 244, 236, 0.035) !important;
}

html.theme-dark #statsView .stats-tab,
body.theme-dark #statsView .stats-tab {
  color: var(--stats-calm-muted) !important;
}

html.theme-dark #statsView .stats-tab.is-active,
body.theme-dark #statsView .stats-tab.is-active {
  color: rgba(30, 31, 35, 0.96) !important;
  background: rgba(241, 237, 229, 0.94) !important;
  box-shadow:
    0 7px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html.theme-dark #statsView :is(.stats-calm-card, .stats-calm-metrics, .stats-calm-more),
body.theme-dark #statsView :is(.stats-calm-card, .stats-calm-metrics, .stats-calm-more) {
  border-color: var(--stats-calm-line) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(248, 244, 236, 0.035), transparent 40%),
    linear-gradient(145deg, rgba(33, 34, 39, 0.94), rgba(24, 25, 30, 0.94)) !important;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(248, 244, 236, 0.035) !important;
}

html.theme-dark #statsView :is(.stats-calm-card h3, .stats-calm-hero-copy > strong, .stats-calm-metrics strong, .stats-calm-more article > strong, .stats-calm-rhythm-feature strong),
body.theme-dark #statsView :is(.stats-calm-card h3, .stats-calm-hero-copy > strong, .stats-calm-metrics strong, .stats-calm-more article > strong, .stats-calm-rhythm-feature strong) {
  color: var(--stats-calm-ink) !important;
}

html.theme-dark #statsView :is(.stats-calm-hero-copy > span, .stats-calm-hero-copy p, .stats-calm-metrics small, .stats-calm-metrics strong span, .stats-calm-section-heading p, .stats-calm-rhythm-feature small, .stats-calm-day-dots small, .stats-calm-more article > small, .stats-calm-more article > strong span, .stats-calm-more .stats-pace-range small),
body.theme-dark #statsView :is(.stats-calm-hero-copy > span, .stats-calm-hero-copy p, .stats-calm-metrics small, .stats-calm-metrics strong span, .stats-calm-section-heading p, .stats-calm-rhythm-feature small, .stats-calm-day-dots small, .stats-calm-more article > small, .stats-calm-more article > strong span, .stats-calm-more .stats-pace-range small) {
  color: var(--stats-calm-muted) !important;
}

html.theme-dark #statsView .stats-calm-hero .stats-editorial-bars i,
body.theme-dark #statsView .stats-calm-hero .stats-editorial-bars i {
  background: rgba(134, 169, 155, 0.48) !important;
}

html.theme-dark #statsView .stats-calm-hero .stats-editorial-bars .is-active i,
body.theme-dark #statsView .stats-calm-hero .stats-editorial-bars .is-active i {
  background: var(--stats-calm-coral) !important;
}

html.theme-dark #statsView .stats-calm-hero .stats-editorial-bars small,
body.theme-dark #statsView .stats-calm-hero .stats-editorial-bars small {
  color: var(--stats-calm-muted) !important;
}

html.theme-dark #statsView .stats-calm-rhythm-feature,
body.theme-dark #statsView .stats-calm-rhythm-feature {
  border-color: rgba(134, 169, 155, 0.16);
  background: rgba(134, 169, 155, 0.07);
}

html.theme-dark #statsView .stats-calm-day-dots i,
body.theme-dark #statsView .stats-calm-day-dots i {
  background: rgba(225, 230, 237, 0.11);
}

html.theme-dark #statsView .stats-calm-day-dots .is-active i,
body.theme-dark #statsView .stats-calm-day-dots .is-active i {
  background: var(--stats-calm-sage);
}

html.theme-dark #statsView .stats-calm-book-card .stats-book-spotlight strong,
body.theme-dark #statsView .stats-calm-book-card .stats-book-spotlight strong {
  color: var(--stats-calm-ink) !important;
}

html.theme-dark #statsView .stats-calm-book-card :is(.stats-book-spotlight p, .stats-empty-line),
body.theme-dark #statsView .stats-calm-book-card :is(.stats-book-spotlight p, .stats-empty-line) {
  color: var(--stats-calm-muted) !important;
}

html.theme-dark #statsView .stats-calm-more summary,
body.theme-dark #statsView .stats-calm-more summary {
  color: var(--stats-calm-ink);
}

html.theme-dark #statsView .stats-calm-more-grid > article,
body.theme-dark #statsView .stats-calm-more-grid > article {
  border-color: var(--stats-calm-line);
  background: rgba(229, 234, 240, 0.025);
}

html.theme-dark #statsView .stats-calm-time-card > div > span,
body.theme-dark #statsView .stats-calm-time-card > div > span {
  background: rgba(225, 230, 237, 0.055);
  color: var(--stats-calm-muted);
}

html.theme-dark #statsView .stats-calm-time-card > div > span strong,
body.theme-dark #statsView .stats-calm-time-card > div > span strong {
  color: var(--stats-calm-ink);
}

html.theme-dark #statsView .stats-calm-time-card > div > span.is-highlighted,
body.theme-dark #statsView .stats-calm-time-card > div > span.is-highlighted {
  background: rgba(134, 169, 155, 0.12);
  color: var(--stats-calm-sage);
}

@media (max-width: 430px) {
  #statsView .stats-calm-hero {
    min-height: 166px;
    padding: 17px 15px 15px;
    grid-template-columns: minmax(116px, 0.82fr) minmax(0, 1.18fr);
    gap: 12px;
  }

  #statsView .stats-calm-hero .stats-editorial-bars {
    height: 94px;
    gap: 3px;
  }

  #statsView .stats-calm-rhythm-card,
  #statsView .stats-calm-book-card {
    padding-inline: 15px;
  }
}

@media (max-width: 365px) {
  #statsView .stats-calm-hero {
    grid-template-columns: minmax(108px, 0.9fr) minmax(0, 1.1fr);
    gap: 8px;
  }

  #statsView .stats-calm-hero-copy p {
    max-width: 16ch;
  }

  #statsView .stats-calm-rhythm-feature {
    min-width: 105px;
    padding-inline: 8px;
  }
}

/* Stats visual snapshot: speaker-palette signals brought into the first viewport. */
#statsView.stats-view {
  --stats-speaker-cobalt: #45698f;
  --stats-speaker-coral: #a94e47;
  --stats-speaker-forest: #477b72;
  --stats-speaker-violet: #735b91;
  --stats-speaker-amber: #98713b;
  --stats-speaker-rose: #956078;
}

#statsView .stats-tab.is-active::after {
  width: 24px;
  height: 2px;
  inset: auto 50% 2px auto;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--stats-speaker-coral), var(--stats-speaker-forest));
  opacity: 0.72;
  transform: translateX(50%);
}

#statsView .stats-calm-hero {
  position: relative;
  min-height: 204px;
  padding: 16px 18px 17px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  background:
    radial-gradient(circle at 93% 4%, color-mix(in srgb, var(--stats-speaker-coral) 10%, transparent), transparent 31%),
    radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--stats-speaker-cobalt) 9%, transparent), transparent 36%),
    linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(246, 241, 232, 0.89));
}

#statsView .stats-calm-hero-heading {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

#statsView .stats-calm-hero-heading > span:first-child {
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: 0.66rem;
  font-weight: 680;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

#statsView .stats-calm-change {
  max-width: 60%;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stats-speaker-cobalt) 15%, var(--stats-calm-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--stats-speaker-cobalt) 6%, var(--stats-calm-surface));
  color: color-mix(in srgb, var(--stats-speaker-cobalt) 84%, var(--stats-calm-ink));
  font-family: var(--ui-font);
  font-size: clamp(0.54rem, 2vw, 0.62rem);
  font-weight: 630;
  letter-spacing: 0.01em;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statsView .stats-calm-change.is-positive {
  border-color: color-mix(in srgb, var(--stats-speaker-forest) 18%, var(--stats-calm-line));
  background: color-mix(in srgb, var(--stats-speaker-forest) 7%, var(--stats-calm-surface));
  color: color-mix(in srgb, var(--stats-speaker-forest) 88%, var(--stats-calm-ink));
}

#statsView .stats-calm-change.is-negative {
  border-color: color-mix(in srgb, var(--stats-speaker-coral) 18%, var(--stats-calm-line));
  background: color-mix(in srgb, var(--stats-speaker-coral) 7%, var(--stats-calm-surface));
  color: color-mix(in srgb, var(--stats-speaker-coral) 88%, var(--stats-calm-ink));
}

#statsView .stats-calm-hero-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(112px, 0.76fr) minmax(0, 1.24fr);
  gap: clamp(14px, 4vw, 24px);
  align-items: end;
}

#statsView .stats-calm-hero-copy {
  align-self: center;
}

#statsView .stats-calm-hero-copy > small {
  display: block;
  margin-bottom: 7px;
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: 0.58rem;
  font-weight: 620;
}

#statsView .stats-calm-hero-copy > strong {
  font-size: clamp(2rem, 8.1vw, 3.05rem);
}

#statsView .stats-calm-hero-copy p {
  margin-top: 11px;
}

#statsView .stats-calm-hero-chart {
  min-width: 0;
  display: grid;
  gap: 6px;
}

#statsView .stats-calm-hero-chart > div:first-child {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
}

#statsView .stats-calm-hero-chart > div:first-child small {
  font-size: 0.56rem;
  font-weight: 650;
}

#statsView .stats-calm-hero-chart > div:first-child span {
  overflow: hidden;
  color: color-mix(in srgb, var(--stats-speaker-forest) 72%, var(--stats-calm-muted));
  font-size: 0.5rem;
  font-weight: 610;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statsView .stats-calm-hero .stats-editorial-bars {
  height: 105px;
}

#statsView .stats-calm-hero .stats-editorial-bars i {
  --stats-bar-color: var(--stats-speaker-cobalt);
  width: min(100%, 12px);
  background: color-mix(in srgb, var(--stats-bar-color) 58%, rgba(255, 253, 248, 0.5));
  box-shadow: 0 4px 10px color-mix(in srgb, var(--stats-bar-color) 8%, transparent);
}

#statsView .stats-calm-hero .stats-editorial-bars span:nth-child(7n + 2) i {
  --stats-bar-color: var(--stats-speaker-coral);
}

#statsView .stats-calm-hero .stats-editorial-bars span:nth-child(7n + 3) i {
  --stats-bar-color: var(--stats-speaker-forest);
}

#statsView .stats-calm-hero .stats-editorial-bars span:nth-child(7n + 4) i {
  --stats-bar-color: var(--stats-speaker-violet);
}

#statsView .stats-calm-hero .stats-editorial-bars span:nth-child(7n + 5) i {
  --stats-bar-color: var(--stats-speaker-amber);
}

#statsView .stats-calm-hero .stats-editorial-bars span:nth-child(7n + 6) i {
  --stats-bar-color: var(--stats-speaker-rose);
}

#statsView .stats-calm-hero .stats-editorial-bars span:nth-child(7n + 7) i {
  --stats-bar-color: var(--stats-speaker-forest);
}

#statsView .stats-calm-hero .stats-editorial-bars .is-active i {
  background: var(--stats-bar-color);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--stats-bar-color) 9%, transparent),
    0 5px 12px color-mix(in srgb, var(--stats-bar-color) 15%, transparent);
}

#statsView .stats-calm-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#statsView .stats-calm-quick {
  --stats-quick-accent: var(--stats-speaker-cobalt);
  position: relative;
  min-width: 0;
  min-height: 116px;
  padding: 13px 13px 36px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--stats-quick-accent) 16%, var(--stats-calm-line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--stats-quick-accent) 11%, transparent), transparent 43%),
    linear-gradient(145deg, var(--stats-calm-surface), color-mix(in srgb, var(--stats-quick-accent) 4%, var(--stats-calm-surface)));
  box-shadow:
    0 8px 20px rgba(48, 40, 30, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

#statsView .stats-calm-quick-streak {
  --stats-quick-accent: var(--stats-speaker-coral);
}

#statsView .stats-calm-quick-mode {
  --stats-quick-accent: var(--stats-speaker-forest);
}

#statsView .stats-calm-quick-session {
  --stats-quick-accent: var(--stats-speaker-violet);
}

#statsView .stats-calm-quick-label {
  min-width: 0;
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: clamp(0.56rem, 2.1vw, 0.64rem);
  font-weight: 620;
  line-height: 1.1;
}

#statsView .stats-calm-quick-label > i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--stats-quick-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stats-quick-accent) 9%, transparent);
}

#statsView .stats-calm-quick > strong {
  max-width: calc(100% - 40px);
  margin-top: 10px;
  display: block;
  color: var(--stats-calm-ink);
  font-family: var(--ui-font);
  font-size: clamp(1.28rem, 5vw, 1.65rem);
  font-weight: 630;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 0.95;
  white-space: nowrap;
}

#statsView .stats-calm-quick > strong span {
  color: var(--stats-calm-muted);
  font-size: 0.48em;
  font-weight: 590;
  letter-spacing: 0;
}

#statsView .stats-calm-quick > small {
  max-width: calc(100% - 40px);
  margin-top: 7px;
  display: block;
  overflow: hidden;
  color: var(--stats-calm-muted);
  font-family: var(--ui-font);
  font-size: clamp(0.5rem, 1.9vw, 0.58rem);
  font-weight: 550;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statsView .stats-quick-sparkline {
  position: absolute;
  right: 10px;
  bottom: 9px;
  width: min(76px, 47%);
  height: 29px;
  overflow: visible;
}

#statsView svg.stats-quick-sparkline path {
  fill: none;
  stroke: var(--stats-quick-accent);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
}

#statsView svg.stats-quick-sparkline circle {
  fill: var(--stats-calm-surface);
  stroke: var(--stats-quick-accent);
  stroke-width: 1.8;
}

#statsView span.stats-quick-sparkline.is-empty {
  display: flex;
  gap: 4px;
  align-items: end;
  justify-content: flex-end;
}

#statsView span.stats-quick-sparkline.is-empty i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--stats-quick-accent) 32%, transparent);
}

#statsView span.stats-quick-sparkline.is-empty i:nth-child(2),
#statsView span.stats-quick-sparkline.is-empty i:nth-child(6) {
  height: 8px;
  border-radius: 999px;
}

#statsView .stats-quick-ring {
  position: absolute;
  right: 12px;
  bottom: 11px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    conic-gradient(var(--stats-quick-accent) 0 var(--stats-ring-progress), color-mix(in srgb, var(--stats-quick-accent) 12%, transparent) var(--stats-ring-progress) 360deg);
}

#statsView .stats-quick-ring::before {
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--stats-calm-surface) 96%, transparent);
  content: "";
}

#statsView .stats-quick-ring i {
  position: relative;
  z-index: 1;
  color: color-mix(in srgb, var(--stats-quick-accent) 88%, var(--stats-calm-ink));
  font-family: var(--ui-font);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
}

#statsView .stats-quick-mode-bar,
#statsView .stats-quick-session-meter {
  position: absolute;
  inset: auto 12px 13px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--stats-quick-accent) 12%, transparent);
}

#statsView .stats-quick-mode-bar {
  background:
    linear-gradient(
      90deg,
      var(--stats-speaker-cobalt) 0 var(--stats-focus-share),
      var(--stats-speaker-forest) var(--stats-focus-share) 100%
    );
  opacity: 0.82;
}

#statsView .stats-quick-mode-bar.is-empty {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--stats-speaker-cobalt) 22%, transparent) 0 50%,
      color-mix(in srgb, var(--stats-speaker-forest) 22%, transparent) 50% 100%
    );
}

#statsView .stats-quick-session-meter i {
  width: var(--stats-session-progress);
  height: 100%;
  display: block;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--stats-speaker-violet), var(--stats-speaker-rose));
}

html.theme-dark #statsView.stats-view,
body.theme-dark #statsView.stats-view {
  --stats-speaker-cobalt: #5d87b4;
  --stats-speaker-coral: #cc6258;
  --stats-speaker-forest: #58a093;
  --stats-speaker-violet: #a58ac6;
  --stats-speaker-amber: #c79b59;
  --stats-speaker-rose: #bd718c;
}

html.theme-dark #statsView .stats-calm-hero,
body.theme-dark #statsView .stats-calm-hero {
  background:
    radial-gradient(circle at 93% 4%, color-mix(in srgb, var(--stats-speaker-coral) 10%, transparent), transparent 31%),
    radial-gradient(circle at 4% 96%, color-mix(in srgb, var(--stats-speaker-cobalt) 9%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(34, 36, 42, 0.96), rgba(24, 25, 30, 0.96)) !important;
}

html.theme-dark #statsView .stats-calm-change,
body.theme-dark #statsView .stats-calm-change {
  background: color-mix(in srgb, var(--stats-speaker-cobalt) 9%, rgba(30, 32, 38, 0.96));
}

html.theme-dark #statsView .stats-calm-change.is-positive,
body.theme-dark #statsView .stats-calm-change.is-positive {
  background: color-mix(in srgb, var(--stats-speaker-forest) 9%, rgba(30, 32, 38, 0.96));
}

html.theme-dark #statsView .stats-calm-change.is-negative,
body.theme-dark #statsView .stats-calm-change.is-negative {
  background: color-mix(in srgb, var(--stats-speaker-coral) 9%, rgba(30, 32, 38, 0.96));
}

html.theme-dark #statsView .stats-calm-hero .stats-editorial-bars i,
body.theme-dark #statsView .stats-calm-hero .stats-editorial-bars i {
  background: color-mix(in srgb, var(--stats-bar-color) 58%, rgba(30, 32, 38, 0.7)) !important;
}

html.theme-dark #statsView .stats-calm-hero .stats-editorial-bars .is-active i,
body.theme-dark #statsView .stats-calm-hero .stats-editorial-bars .is-active i {
  background: var(--stats-bar-color) !important;
}

html.theme-dark #statsView .stats-calm-quick,
body.theme-dark #statsView .stats-calm-quick {
  border-color: color-mix(in srgb, var(--stats-quick-accent) 18%, rgba(225, 230, 237, 0.08));
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--stats-quick-accent) 10%, transparent), transparent 44%),
    linear-gradient(145deg, rgba(33, 34, 39, 0.92), rgba(25, 26, 31, 0.94));
  box-shadow:
    0 12px 26px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(248, 244, 236, 0.03);
}

html.theme-dark #statsView .stats-calm-quick > strong,
body.theme-dark #statsView .stats-calm-quick > strong {
  color: var(--stats-calm-ink);
}

html.theme-dark #statsView svg.stats-quick-sparkline circle,
body.theme-dark #statsView svg.stats-quick-sparkline circle {
  fill: rgba(28, 29, 34, 0.96);
}

html.theme-dark #statsView .stats-quick-ring::before,
body.theme-dark #statsView .stats-quick-ring::before {
  background: rgba(28, 29, 34, 0.96);
}

@media (min-width: 720px) {
  #statsView .stats-calm-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  #statsView .stats-calm-hero {
    min-height: 198px;
    padding: 15px 15px 16px;
  }

  #statsView .stats-calm-hero-body {
    grid-template-columns: minmax(108px, 0.78fr) minmax(0, 1.22fr);
    gap: 11px;
  }

  #statsView .stats-calm-hero .stats-editorial-bars {
    height: 98px;
  }

  #statsView .stats-calm-quick {
    min-height: 111px;
    padding-inline: 12px;
  }
}

@media (max-width: 365px) {
  #statsView .stats-calm-hero {
    min-height: 194px;
    gap: 12px;
  }

  #statsView .stats-calm-hero-body {
    grid-template-columns: minmax(103px, 0.85fr) minmax(0, 1.15fr);
    gap: 8px;
  }

  #statsView .stats-calm-change {
    max-width: 55%;
  }

  #statsView .stats-calm-quick {
    min-height: 108px;
    padding-inline: 10px;
  }

  #statsView .stats-calm-quick > small {
    max-width: calc(100% - 32px);
  }
}

/* Final compact authority for the mockup-scale appearance sheet. */
.font-size-popover,
body.ebook-mode .reader-panel #fontSizePopover {
  width: min(310px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: none !important;
  border-radius: 22px !important;
}

.font-size-popover[hidden],
body:not(.ebook-mode) .reader-panel .controls > #fontSizePopover[hidden],
body.ebook-mode .reader-panel #fontSizePopover[hidden] {
  display: none !important;
}

.reader-appearance-heading {
  min-height: 48px;
  gap: 9px;
  padding: 11px 15px 10px;
}

.reader-appearance-heading > span {
  font-size: 1.02rem;
  font-weight: 590;
}

.reader-appearance-heading > small {
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.56rem;
  letter-spacing: 0.1em;
}

.reader-appearance-scroll {
  padding: 0 15px 14px;
  overflow: visible !important;
}

.reader-appearance-size-scale {
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -1px 2px 0;
}

.reader-appearance-size-scale::before,
.reader-appearance-size-scale::after {
  top: 11px;
}

.reader-appearance-size .reader-appearance-size-stop,
.reader-appearance-size .reader-appearance-size-stop:is(:hover, :focus, :focus-visible, :active) {
  flex: 0 0 20px;
  width: 20px !important;
  min-width: 20px !important;
  height: 23px !important;
  min-height: 23px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.reader-appearance-size-stop::after {
  width: 5px;
  height: 5px;
}

.reader-appearance-size-stop.is-active::after {
  width: 12px;
  height: 12px;
  border-width: 2px;
}

.reader-appearance-dialogue-colours {
  gap: 7px;
  padding: 10px 2px 8px;
}

.reader-appearance-dialogue-colours .dialogue-color-options { gap: 5px 3px; }

.reader-appearance-dialogue-colours .dialogue-color-option,
.reader-appearance-dialogue-colours .dialogue-color-option:is(:hover, :focus, :focus-visible, :active) {
  min-height: 40px;
  padding: 3px 1px;
  gap: 3px;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.reader-appearance-dialogue-colours .dialogue-color-dot {
  width: 18px;
  height: 18px;
}

.reader-appearance-dialogue-colours .dialogue-color-option span:last-child { font-size: 0.53rem; }

@media (max-height: 700px) {
  .reader-appearance-heading {
    min-height: 44px;
    padding-block: 9px;
  }

  .reader-appearance-dialogue-colours { padding-block: 8px 6px; }
  }

/* Discover compact catalogue: restrained violet atmosphere and large-phone density. */
.discover-panel .discover-ambient-canvas {
  opacity: 0.34;
  filter: saturate(1.14);
}

.discover-header {
  min-height: 78px;
  padding:
    max(12px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    5px
    max(18px, env(safe-area-inset-left));
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.discover-header-copy {
  gap: 3px;
}

.discover-header-copy h2 {
  font-size: clamp(1.72rem, 5.6vw, 2.05rem);
  line-height: 1;
}

.discover-header-copy p {
  display: block;
  color: var(--discover-muted);
  font-size: clamp(0.58rem, 1.8vw, 0.67rem);
  font-weight: 560;
  letter-spacing: 0.015em;
  line-height: 1.25;
  text-transform: none;
}

.discover-panel .discover-search-toggle {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
}

.discover-tabs {
  width: min(920px, calc(100% - 32px));
  min-height: 48px;
  margin-bottom: 13px;
  padding: 4px;
  border-radius: 18px;
  box-shadow: none;
}

.discover-tabs button {
  min-height: 38px;
  border-radius: 14px;
  font-size: 0.66rem;
}

.discover-content {
  padding-top: 0;
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(74px, calc(env(safe-area-inset-bottom) + 54px));
  padding-left: max(16px, env(safe-area-inset-left));
  gap: clamp(25px, 4vw, 38px);
}

.discover-gutenberg-browser,
.discover-browse-catalogue,
.discover-catalogue-shell {
  gap: 11px;
}

.discover-gutenberg-search {
  min-height: 48px;
  padding-inline: 15px 8px;
  border-radius: 17px;
  box-shadow: none;
}

.discover-gutenberg-search input {
  height: 46px;
  font-size: 0.69rem;
}

.discover-catalogue-shell > .discover-format-switch {
  width: 100%;
  min-height: 47px;
  margin: 0;
  padding: 4px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--discover-surface) 82%, transparent);
}

.discover-catalogue-shell > .discover-format-switch button {
  min-height: 37px;
  border-radius: 14px;
  font-size: 0.64rem;
}

.discover-gutenberg-compact-head {
  min-height: 48px;
  align-items: center;
}

.discover-gutenberg-compact-head.is-source-heading {
  min-height: 24px;
}

.discover-gutenberg-compact-head.is-source-heading > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.discover-gutenberg-compact-head.is-source-heading span {
  font-size: 0.61rem;
}

.discover-gutenberg-compact-head.is-source-heading i {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  color: var(--discover-coral);
  font-style: normal;
}

.discover-gutenberg-compact-head.is-source-heading svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.discover-gutenberg-results-head {
  min-height: 52px;
  gap: 12px;
}

.discover-gutenberg-results-head > div {
  gap: 2px;
}

.discover-gutenberg-results-head p {
  font-size: 0.52rem;
  letter-spacing: 0.14em;
}

.discover-gutenberg-results-head h2 {
  font-size: clamp(1.42rem, 4.8vw, 1.9rem);
}

.discover-gutenberg-results-head span {
  font-size: 0.56rem;
}

.discover-gutenberg-results-head > button,
.discover-research-sort {
  min-height: 34px;
  font-size: 0.57rem;
}

.discover-gutenberg-chip-rail {
  gap: 7px;
  padding-bottom: 2px;
}

.discover-gutenberg-chip-rail button {
  min-height: 32px;
  padding-inline: 12px;
  font-size: 0.58rem;
}

.discover-gutenberg-grid,
.discover-gutenberg-loading {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.discover-gutenberg-book,
.discover-gutenberg-loading > span {
  min-height: 222px;
  border-radius: 16px;
  box-shadow: none;
}

.discover-gutenberg-book-main {
  padding: 8px 6px 43px;
  gap: 6px;
}

.discover-gutenberg-cover,
.discover-gutenberg-cover img,
.discover-gutenberg-loading i {
  width: 76px;
  height: 110px;
}

.discover-gutenberg-cover {
  box-shadow: 0 8px 18px rgba(5, 7, 16, 0.2);
}

.discover-gutenberg-book-copy {
  gap: 3px;
}

.discover-gutenberg-book-copy > strong {
  font-size: clamp(0.72rem, 2.8vw, 0.88rem);
  line-height: 1.05;
}

.discover-gutenberg-book-copy > small {
  font-size: clamp(0.49rem, 1.8vw, 0.57rem);
}

.discover-gutenberg-add {
  right: 7px;
  bottom: 7px;
  left: 7px;
  min-height: 30px;
  border-radius: 11px;
}

.discover-gutenberg-add strong {
  font-size: 0.58rem;
}

html.theme-dark .discover-panel,
body.theme-dark .discover-panel {
  --discover-page: #080a15;
  --discover-sheet: #0b0d19;
  --discover-surface: #121521;
  --discover-surface-soft: #191c2a;
  --discover-text: #f0eee8;
  --discover-muted: #9f9da9;
  --discover-soft: #747483;
  --discover-line: rgba(190, 184, 229, 0.12);
  background:
    radial-gradient(ellipse 72% 24% at 52% -4%, rgba(87, 76, 161, 0.12), transparent 72%),
    linear-gradient(180deg, #0b0d1b 0%, #090b17 42%, #070914 100%) !important;
}

html.theme-dark .discover-panel .discover-ambient-canvas,
body.theme-dark .discover-panel .discover-ambient-canvas {
  opacity: 0.28;
}

html.theme-dark .discover-tabs,
html.theme-dark .discover-gutenberg-search,
html.theme-dark .discover-catalogue-shell > .discover-format-switch,
body.theme-dark .discover-tabs,
body.theme-dark .discover-gutenberg-search,
body.theme-dark .discover-catalogue-shell > .discover-format-switch {
  border-color: rgba(190, 184, 229, 0.11);
  background: rgba(16, 18, 31, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

html.theme-dark .discover-gutenberg-book,
body.theme-dark .discover-gutenberg-book {
  border-color: rgba(190, 184, 229, 0.105);
  background:
    radial-gradient(circle at 82% 1%, rgba(91, 76, 158, 0.04), transparent 38%),
    rgba(17, 20, 32, 0.84);
}

html.theme-dark .discover-gutenberg-results-head > button,
html.theme-dark .discover-gutenberg-chip-rail button,
body.theme-dark .discover-gutenberg-results-head > button,
body.theme-dark .discover-gutenberg-chip-rail button {
  background: rgba(16, 18, 30, 0.72);
}

@media (max-width: 760px) {
  .discover-header {
    min-height: 76px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .discover-header-copy p {
    display: block;
  }

  .discover-tabs {
    top: 0;
    width: calc(100% - 32px);
    margin-bottom: 12px;
  }

  .discover-content {
    gap: 25px;
  }
}

@media (max-width: 370px) {
  .discover-content {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .discover-gutenberg-grid,
  .discover-gutenberg-loading {
    gap: 6px;
  }

  .discover-gutenberg-book,
  .discover-gutenberg-loading > span {
    min-height: 207px;
  }

  .discover-gutenberg-cover,
  .discover-gutenberg-cover img,
  .discover-gutenberg-loading i {
    width: 66px;
    height: 97px;
  }
}

/* Topic destinations inherit Discover's quieter violet-black atmosphere. */
html.theme-dark .topic-discovery-panel,
body.theme-dark .topic-discovery-panel {
  --topic-dossier-page: #080a15;
  --topic-dossier-sheet: #0b0d19;
  --topic-dossier-surface: rgba(18, 21, 33, 0.88);
  --topic-dossier-surface-soft: rgba(25, 28, 42, 0.9);
  --topic-dossier-text: #f0eee8;
  --topic-dossier-muted: #9f9da9;
  --topic-dossier-soft: #747483;
  --topic-dossier-line: color-mix(in srgb, var(--topic-color) 4%, rgba(190, 184, 229, 0.12));
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 58%, #bbb2ef);
  --topic-dossier-accent-soft: color-mix(in srgb, var(--topic-color) 7%, transparent);
  background:
    radial-gradient(ellipse 72% 24% at 52% -4%, rgba(87, 76, 161, 0.12), transparent 72%),
    linear-gradient(180deg, #0b0d1b 0%, #090b17 42%, #070914 100%) !important;
}

html.theme-dark .topic-discovery-panel .topic-ambient-canvas,
body.theme-dark .topic-discovery-panel .topic-ambient-canvas {
  opacity: 0.28;
  filter: saturate(1.14);
}

html.theme-dark .topic-discovery-panel .topic-discovery-close,
body.theme-dark .topic-discovery-panel .topic-discovery-close {
  border-color: rgba(190, 184, 229, 0.11) !important;
  background: rgba(16, 18, 31, 0.78) !important;
}

/* Centre the Atlas orb itself, rather than the orb-plus-label button box. */

.knowledge-atlas-center:is(:active, .is-tactile-press),
:is(.discover-topics-view, .topic-discovery-panel) button.knowledge-atlas-center:is(:active, .is-tactile-press) {
  transform: translate(-50%, calc(0px - var(--atlas-center-radius))) !important;
}

.discover-inline-atlas-center {
  --atlas-inline-center-radius: clamp(33px, 6.5vw, 43px);
  transform: translate(-50%, calc(0px - var(--atlas-inline-center-radius)));
}

.discover-inline-atlas-center:is(:active, .is-tactile-press),
:is(.discover-topics-view, .topic-discovery-panel) button.discover-inline-atlas-center:is(:active, .is-tactile-press) {
  transform: translate(-50%, calc(0px - var(--atlas-inline-center-radius))) !important;
}

@media (max-width: 760px) {
  .discover-inline-atlas-center {
    --atlas-inline-center-radius: 32px;
  }
}

/* Reader mode switches are glyph-only, including after touch and coaching states. */
:is(#ebookModeButton, #ebookSpeedModeButton),
:is(#ebookModeButton, #ebookSpeedModeButton):is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.is-coaching-ebook-switch #ebookModeButton {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent !important;
}

:is(#ebookModeButton, #ebookSpeedModeButton)::before,
:is(#ebookModeButton, #ebookSpeedModeButton)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

:is(#ebookModeButton, #ebookSpeedModeButton) .mode-switch-symbol,
:is(#ebookModeButton, #ebookSpeedModeButton) .mode-switch-symbol :is(path, use) {
  color: var(--rhythm-coral) !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

:is(#ebookModeButton, #ebookSpeedModeButton):focus-visible .mode-switch-symbol {
  filter: brightness(1.1) saturate(1.06) !important;
}

/* Scroll and Scrub share the same measured, book-like Context typography. */
.context-sentence-scroll.context-line-scroll {
  width: min(760px, 100%);
  max-width: 100%;
  padding-inline: 0;
  align-items: center;
  gap: clamp(3px, 0.55vh, 8px);
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

.context-sentence-scroll.context-line-scroll .context-line {
  flex: 0 0 auto;
}

/* Context appearance: sentence cards are independent from Scroll/Scrub controls. */

body:not(.ebook-mode) .reader-panel:has(.word-display.has-context.has-context-scrub-controls),
body:not(.ebook-mode) .reader-panel:has(.word-display.has-context.has-context-scrub-controls) .focus-stage,
body:not(.ebook-mode) .reader-panel .word-display.has-context.has-context-scrub-controls,
body:not(.ebook-mode) .reader-panel .word-display.has-context.has-context-scrub-controls .context-sentence-scroll,
body:not(.ebook-mode) .reader-panel .word-display.has-context.has-context-scrub-controls :is(.context-sentence-card, .context-line, .context-token) {
  touch-action: none !important;
}

body:not(.ebook-mode) .reader-panel .word-display.has-context.has-context-scrub-controls .context-sentence-scroll {
  overflow-y: hidden !important;
  overscroll-behavior: none !important;
}

/* Reader control placement: appearance top-left, Who's Speaking bottom-right. */
.reader-panel > .top-bar > .top-appearance-button,
.ebook-reader > .ebook-top-bar > .top-appearance-button,
.reader-panel > .top-bar > .top-appearance-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
.ebook-reader > .ebook-top-bar > .top-appearance-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: var(--top-control-size) !important;
  min-width: var(--top-control-size) !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin-inline-start: var(--top-corner-inset) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--rhythm-control-ink) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.9 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.reader-panel > .top-bar > .top-appearance-button.is-open,
.ebook-reader > .ebook-top-bar > .top-appearance-button.is-open {
  color: var(--rhythm-coral) !important;
  opacity: 1 !important;
}

html.theme-dark .reader-panel > .top-bar > .top-appearance-button,
body.theme-dark .reader-panel > .top-bar > .top-appearance-button,
html.theme-dark .ebook-reader > .ebook-top-bar > .top-appearance-button,
body.theme-dark .ebook-reader > .ebook-top-bar > .top-appearance-button {
  color: rgba(241, 237, 230, 0.9) !important;
}

html.theme-dark .reader-panel > .top-bar > .top-appearance-button.is-open,
body.theme-dark .reader-panel > .top-bar > .top-appearance-button.is-open,
html.theme-dark .ebook-reader > .ebook-top-bar > .top-appearance-button.is-open,
body.theme-dark .ebook-reader > .ebook-top-bar > .top-appearance-button.is-open {
  color: var(--rhythm-coral) !important;
  opacity: 1 !important;
}

.reader-panel > .top-bar > #fontSizePopover,
.ebook-reader > .ebook-top-bar > #fontSizePopover {
  position: fixed !important;
  top: calc(var(--screen-pad-top) + var(--top-control-size) + 8px) !important;
  right: auto !important;
  bottom: auto !important;
  left: max(12px, calc(env(safe-area-inset-left) + 10px)) !important;
  z-index: 1300 !important;
}

body:not(.ebook-mode) .reader-panel .controls > #characterLegendButton.bottom-dialogue-button,
body:not(.ebook-mode) .reader-panel .controls > #characterLegendButton.bottom-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  inset: auto !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.92 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.ebook-mode .ebook-reader .ebook-bottom-actions > #ebookCharacterLegendButton.bottom-dialogue-button,
body.ebook-mode .ebook-reader .ebook-bottom-actions > #ebookCharacterLegendButton.bottom-dialogue-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  right: max(24px, calc(env(safe-area-inset-right) + 24px)) !important;
  left: auto !important;
  top: auto !important;
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 26px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.92 !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.ebook-mode .reader-panel > .top-bar > #textSizeButton {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Reader corner cleanup v2. This block stays last to outrank legacy reader chrome. */
body.ebook-mode #ebookTextSizeButton,
body.ebook-mode #ebookTextSizeButton:is(:hover, :focus, :focus-visible, :active, .is-tactile-press, .is-open) {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.ebook-mode #ebookTextSizeButton::before,
body.ebook-mode #ebookTextSizeButton::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.ebook-mode #ebookTextSizeButton .reader-aa-mark {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
}

html body :is(#ebookModeButton, #ebookSpeedModeButton),
html body :is(#ebookModeButton, #ebookSpeedModeButton):is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.is-coaching-ebook-switch #ebookModeButton {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body :is(#ebookModeButton, #ebookSpeedModeButton)::before,
html body :is(#ebookModeButton, #ebookSpeedModeButton)::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

html body :is(#ebookModeButton, #ebookSpeedModeButton) .mode-switch-symbol,
html body :is(#ebookModeButton, #ebookSpeedModeButton) .mode-switch-symbol :is(path, use) {
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* Reader corner geometry v3: one anchor in every reading mode, no legacy button material. */
:root {
  --reader-corner-control-top: var(--screen-pad-top);
  --reader-corner-control-left: calc(var(--screen-pad-left) + var(--top-corner-inset));
  --reader-corner-control-right: calc(var(--screen-pad-right) + var(--top-corner-inset));
}

.reader-panel > .top-bar > #textSizeButton.top-appearance-button,
.ebook-reader > .ebook-top-bar > #ebookTextSizeButton.top-appearance-button,
.reader-panel > .top-bar > #textSizeButton.top-appearance-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
.ebook-reader > .ebook-top-bar > #ebookTextSizeButton.top-appearance-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  top: var(--reader-corner-control-top) !important;
  left: var(--reader-corner-control-left) !important;
  right: auto !important;
  inset-inline-start: var(--reader-corner-control-left) !important;
  inset-inline-end: auto !important;
  width: var(--top-control-size) !important;
  min-width: var(--top-control-size) !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1201 !important;
  transform: none !important;
}

.reader-panel > .top-bar > #fontSizePopover,
.ebook-reader > .ebook-top-bar > #fontSizePopover {
  top: calc(var(--reader-corner-control-top) + var(--top-control-size) + 8px) !important;
  left: var(--reader-corner-control-left) !important;
}

.reader-panel > .top-bar > .top-actions,
.ebook-reader > .ebook-top-bar > .ebook-actions,
.reader-panel > .top-bar > .top-actions:is(:hover, :focus, :focus-within, :active),
.ebook-reader > .ebook-top-bar > .ebook-actions:is(:hover, :focus, :focus-within, :active) {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.reader-panel > .top-bar > .top-actions::before,
.reader-panel > .top-bar > .top-actions::after,
.ebook-reader > .ebook-top-bar > .ebook-actions::before,
.ebook-reader > .ebook-top-bar > .ebook-actions::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body:not(.ebook-mode) #ebookModeButton.reader-mode-icon-button,
body.ebook-mode #ebookSpeedModeButton.reader-mode-icon-button,
body:not(.ebook-mode) #ebookModeButton.reader-mode-icon-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.ebook-mode #ebookSpeedModeButton.reader-mode-icon-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  top: var(--reader-corner-control-top) !important;
  right: var(--reader-corner-control-right) !important;
  bottom: auto !important;
  left: auto !important;
  width: var(--top-control-size) !important;
  min-width: var(--top-control-size) !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1201 !important;
  overflow: visible !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.ebook-mode #ebookModeButton,
body:not(.ebook-mode) #ebookSpeedModeButton {
  visibility: hidden !important;
  pointer-events: none !important;
}

:is(#ebookModeButton, #ebookSpeedModeButton).reader-mode-icon-button::before,
:is(#ebookModeButton, #ebookSpeedModeButton).reader-mode-icon-button::after {
  content: none !important;
  display: none !important;
}

/* Reader corner optical parity v4. */
.reader-panel > .top-bar > #textSizeButton .reader-aa-mark,
.ebook-reader > .ebook-top-bar > #ebookTextSizeButton .reader-aa-mark {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  font-family: var(--reading-font) !important;
  font-size: 0.98rem !important;
  font-weight: 660 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
  translate: none !important;
  filter: none !important;
  text-shadow: none !important;
}

body:not(.ebook-mode) #ebookModeButton.reader-mode-icon-button,
body.ebook-mode #ebookSpeedModeButton.reader-mode-icon-button {
  isolation: isolate !important;
}

body:not(.ebook-mode) #ebookModeButton.reader-mode-icon-button::before,
body.ebook-mode #ebookSpeedModeButton.reader-mode-icon-button::before {
  content: "" !important;
  position: absolute !important;
  inset: -20px !important;
  z-index: 0 !important;
  display: block !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: var(--reader-surface) !important;
  background-color: var(--reader-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body:not(.ebook-mode) #ebookModeButton.reader-mode-icon-button .mode-switch-symbol,
body.ebook-mode #ebookSpeedModeButton.reader-mode-icon-button .mode-switch-symbol {
  position: relative !important;
  z-index: 1 !important;
}

/* Supported reader header: keep the original Who's Speaking control and motion at the top right. */
body:not(.ebook-mode) .reader-panel > .top-bar > #characterLegendButton.reader-header-dialogue-button:not([hidden]),
body:not(.ebook-mode) .reader-panel > .top-bar > #characterLegendButton.reader-header-dialogue-button:not([hidden]):is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  top: var(--reader-corner-control-top) !important;
  right: var(--reader-corner-control-right) !important;
  bottom: auto !important;
  left: auto !important;
  grid-column: 3 !important;
  justify-self: end !important;
  z-index: 1201 !important;
  display: grid !important;
  place-items: center !important;
  width: var(--top-control-size) !important;
  min-width: var(--top-control-size) !important;
  height: var(--top-control-size) !important;
  min-height: var(--top-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  overflow: visible !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Speaker tint runtime hardening: content-free status, purge, and reset controls. */
.speaker-runtime-panel {
  display: grid;
  gap: 9px;
  padding: 12px;
  border-top: 1px solid rgba(63, 56, 50, 0.14);
  color: #302a26;
  background: rgba(255, 255, 255, 0.42);
}

.speaker-runtime-details {
  border-top: 1px solid rgba(63, 56, 50, 0.14);
}

.speaker-runtime-details > summary {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 9px 30px 9px 12px;
  color: #302a26;
  cursor: pointer;
  list-style: none;
}

.speaker-runtime-details > summary::-webkit-details-marker {
  display: none;
}

.speaker-runtime-details > summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  transition: transform 160ms ease;
}

.speaker-runtime-details[open] > summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.speaker-runtime-details > summary span {
  font-size: 0.72rem;
  font-weight: 720;
}

.speaker-runtime-details > summary small {
  color: #655d57;
  font-size: 0.6rem;
}

.speaker-runtime-details > .speaker-runtime-panel {
  border-top: 0;
  padding-top: 6px;
}

.speaker-runtime-status {
  display: grid;
  gap: 3px;
  padding-inline-start: 10px;
  border-inline-start: 3px solid #5b6f87;
}

.speaker-runtime-status[data-status="ready"],
.speaker-runtime-status[data-status="chapter_ready"] {
  border-inline-start-color: #26705d;
}

.speaker-runtime-status[data-status="error"],
.speaker-runtime-status[data-status="unsupported"],
.speaker-runtime-status[data-status="resource_limited"],
.speaker-runtime-status[data-status="cache_rejected"] {
  border-inline-start-color: #a0443c;
}

.speaker-runtime-status strong {
  font-size: 0.77rem;
  line-height: 1.25;
}

.speaker-runtime-status small,
.speaker-runtime-privacy {
  color: #655d57;
  font-size: 0.64rem;
  line-height: 1.4;
}

.speaker-runtime-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.speaker-runtime-actions button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(63, 56, 50, 0.24);
  border-radius: 10px;
  color: #352f2b;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.speaker-runtime-actions button:hover {
  border-color: rgba(63, 56, 50, 0.4);
  background: rgba(255, 255, 255, 0.94);
}

.speaker-runtime-actions button:focus-visible {
  outline: 3px solid rgba(36, 86, 147, 0.42);
  outline-offset: 2px;
}

html.theme-dark .speaker-runtime-panel,
body.theme-dark .speaker-runtime-panel {
  border-top-color: rgba(230, 232, 238, 0.15);
  color: #f1f2f5;
  background: rgba(30, 32, 38, 0.74);
}

html.theme-dark .speaker-runtime-details,
body.theme-dark .speaker-runtime-details {
  border-top-color: rgba(230, 232, 238, 0.15);
}

html.theme-dark .speaker-runtime-details > summary,
body.theme-dark .speaker-runtime-details > summary {
  color: #f1f2f5;
}

html.theme-dark .speaker-runtime-details > summary small,
body.theme-dark .speaker-runtime-details > summary small {
  color: #c9cbd2;
}

html.theme-dark .speaker-runtime-status small,
html.theme-dark .speaker-runtime-privacy,
body.theme-dark .speaker-runtime-status small,
body.theme-dark .speaker-runtime-privacy {
  color: #c9cbd2;
}

html.theme-dark .speaker-runtime-actions button,
body.theme-dark .speaker-runtime-actions button {
  border-color: rgba(230, 232, 238, 0.24);
  color: #f4f5f7;
  background: rgba(42, 44, 51, 0.96);
}

html.theme-dark .speaker-runtime-actions button:hover,
body.theme-dark .speaker-runtime-actions button:hover {
  border-color: rgba(230, 232, 238, 0.42);
  background: rgba(49, 52, 60, 0.98);
}

@media (max-width: 390px) {
  .speaker-runtime-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .speaker-runtime-panel,
  .speaker-runtime-status,
  .speaker-runtime-actions button {
    animation: none !important;
    transition: none !important;
  }
}

/* Home navigation: use the same edge-to-edge material and shoulder curve as the reader dock. */
#homeBottomNav,
.home-bottom-nav {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 34px 34px 0 0 / 30px 30px 0 0 !important;
  background: linear-gradient(
    180deg,
    rgba(246, 242, 233, 0.78),
    rgba(239, 232, 218, 0.68)
  ) !important;
  box-shadow: 0 -12px 30px rgba(56, 43, 27, 0.10) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
}

#homeBottomNav::before,
#homeBottomNav::after,
.home-bottom-nav::before,
.home-bottom-nav::after {
  content: none !important;
  display: none !important;
}

html.theme-dark #homeBottomNav,
body.theme-dark #homeBottomNav,
html.theme-dark .home-bottom-nav,
body.theme-dark .home-bottom-nav {
  background: linear-gradient(
    180deg,
    rgba(29, 30, 35, 0.78),
    rgba(20, 21, 25, 0.68)
  ) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.30) !important;
}

/* Page Mode: retain the existing controls while presenting familiar book flow. */
.word-display.has-context.has-context-page-style {
  align-items: stretch !important;
  justify-content: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.word-display.has-context.has-context-page-style .context-ebook-scroll {
  width: min(640px, 100%) !important;
  max-width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  align-items: stretch !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.word-display.has-context.has-context-page-style .context-ebook-page.ebook-page {
  position: relative !important;
  isolation: isolate;
  width: min(640px, 100%) !important;
  height: auto !important;
  min-height: 100% !important;
  flex: 0 0 auto;
  padding-bottom: calc(
    clamp(18px, 2.8vh, 32px) + var(--context-dock-underlap, 0px)
  ) !important;
  overflow: visible !important;
  background: transparent !important;
  white-space: normal !important;
}

/* One page profile for ebook rendering, pagination measurement, and Page Mode. */
#ebookPage,
.ebook-measure-page,
.word-display.has-context.has-context-page-style .context-ebook-page.ebook-page {
  padding-left: var(--reader-page-margin, clamp(28px, 7vw, 58px)) !important;
  padding-right: var(--reader-page-margin, clamp(28px, 7vw, 58px)) !important;
}

#ebookPage,
.ebook-measure-page,
.word-display.has-context.has-context-page-style.has-context-paged-view .context-ebook-page.ebook-page {
  padding-bottom: clamp(18px, 2.8vh, 32px) !important;
}

.word-display.has-context.has-context-page-style .context-ebook-page .ebook-paragraph.context-ebook-paragraph {
  --context-line-opacity: 0.58;
  position: relative;
  display: block !important;
  /* Auto width subtracts block and publisher margins from the line measure. */
  width: auto !important;
  min-width: 0 !important;
  opacity: var(--context-line-opacity);
  transform: none !important;
  transition:
    opacity 220ms cubic-bezier(0.22, 0.72, 0.22, 1),
    color 160ms ease !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-current-line {
  --context-line-opacity: 0.98;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-near-line {
  --context-line-opacity: 0.9;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-near-line.is-previous-line {
  --context-line-opacity: 0.97;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-near-line.is-next-line {
  --context-line-opacity: 0.88;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-mid-line {
  --context-line-opacity: 0.78;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-mid-line.is-previous-line {
  --context-line-opacity: 0.86;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-mid-line.is-next-line {
  --context-line-opacity: 0.74;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-far-line {
  --context-line-opacity: 0.58;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-far-line.is-previous-line {
  --context-line-opacity: 0.7;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-far-line.is-next-line {
  --context-line-opacity: 0.58;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-near-line.is-recent-previous-line {
  --context-line-opacity: 1;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-mid-line.is-recent-previous-line {
  --context-line-opacity: 0.96;
}

.word-display.has-context.has-context-page-style .context-ebook-page .context-ebook-paragraph.is-far-line.is-recent-previous-line {
  --context-line-opacity: 0.88;
}

.word-display.has-context.has-context-page-style.is-context-revealing .context-ebook-page .context-ebook-paragraph:not(.is-current-line) {
  animation: contextLineBloom var(--context-line-reveal-duration, 300ms) cubic-bezier(0.2, 0.72, 0.22, 1) both;
  animation-delay: var(--context-line-reveal-delay, 35ms);
}

.word-display.has-context.has-context-page-style.is-context-revealing .context-ebook-page .context-ebook-paragraph.is-current-line {
  animation: contextCurrentSentenceBloom 190ms cubic-bezier(0.2, 0.78, 0.24, 1) both;
}

.word-display.has-context.has-context-page-style.is-context-exiting .context-ebook-page .context-ebook-paragraph {
  --context-line-opacity: 1 !important;
  opacity: 1 !important;
  animation: none !important;
}

.word-display.has-context.has-context-page-style.is-context-exiting .context-ebook-page {
  animation: pageStyleContextPageExit 260ms cubic-bezier(0.22, 0.72, 0.22, 1) both !important;
}

@keyframes pageStyleContextPageExit {
  0%,
  12% {
    opacity: 1;
  }

  58% {
    opacity: 0.6;
  }

  100% {
    opacity: 0;
  }
}

.word-display.has-context.has-context-page-style .context-ebook-page .ebook-paragraph.context-ebook-paragraph::before,
.word-display.has-context.has-context-page-style .context-ebook-page .ebook-paragraph.context-ebook-paragraph::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
}

.word-display.has-context.has-context-page-style .context-ebook-page .ebook-word.context-token {
  display: inline !important;
  max-width: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: inherit !important;
  vertical-align: baseline !important;
  transform: none !important;
  transition:
    background-color 140ms ease,
    box-shadow 180ms ease,
    color 120ms ease,
    opacity 200ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

.word-display.has-context.has-context-page-style .context-ebook-page .ebook-word.context-token:not(.is-current) {
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.word-display.has-context.has-context-page-style .context-ebook-page .ebook-word.context-token.is-current {
  border-radius: 0.36em 0.31em 0.4em 0.33em / 0.32em 0.39em 0.31em 0.37em !important;
}

.word-display.has-context.has-context-page-style .context-ebook-page .ebook-word.context-token::before,
.word-display.has-context.has-context-page-style .context-ebook-page .ebook-word.context-token::after {
  content: none !important;
  display: none !important;
}

html.theme-dark .word-display.has-context.has-context-page-style .context-ebook-page.ebook-page,
body.theme-dark .word-display.has-context.has-context-page-style .context-ebook-page.ebook-page {
  background: transparent !important;
  color: var(--ink) !important;
}

/* Page Mode defaults to a settled page; Infinite scroll remains an Aa option. */
.word-display.has-context.has-context-page-style.has-context-paged-view {
  overflow: visible !important;
  touch-action: none !important;
}

.word-display.has-context.has-context-page-style.has-context-paged-view .context-ebook-paged-view {
  width: min(640px, 100%);
  max-width: 100%;
  height: var(
    --context-ebook-page-height,
    calc(100% + var(--context-dock-underlap, var(--shared-bottom-dock-underlap, 0px)))
  );
  min-height: var(
    --context-ebook-page-height,
    calc(100% + var(--context-dock-underlap, var(--shared-bottom-dock-underlap, 0px)))
  );
  padding: 0 !important;
  gap: 0 !important;
  display: block !important;
  margin-inline: auto;
  margin-bottom: calc(-1 * var(--context-dock-underlap, var(--shared-bottom-dock-underlap, 0px)));
  overflow: hidden;
  position: relative;
  z-index: 1;
  touch-action: none;
  overscroll-behavior: none;
  white-space: normal;
}

.word-display.has-context.has-context-page-style.has-context-paged-view .context-ebook-page.ebook-page {
  width: min(640px, 100%) !important;
  height: 100% !important;
  min-height: 0 !important;
  padding-bottom: clamp(18px, 2.8vh, 32px) !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Page Mode keeps ebook contrast; only colour, not brightness, conveys dialogue. */
.word-display.has-context.has-context-page-style:not(.is-context-exiting)
  .context-ebook-page
  .ebook-paragraph.context-ebook-paragraph {
  --context-line-opacity: 1 !important;
  opacity: 1 !important;
  animation: none !important;
}

.word-display.has-context.has-context-page-style:not(.is-context-exiting)
  .context-ebook-page
  .ebook-word.context-token {
  opacity: 1 !important;
}

/*
 * Imported justification creates distracting rivers on narrow screens. Keep
 * Page Mode prose softly ragged and every interactive word indivisible so the
 * selected-word flight always has one stable source rectangle.
 */
.word-display.has-context.has-context-page-style
  .context-ebook-page
  .context-ebook-paragraph.is-epub-align-justify:not(
    .is-epub-verse,
    .is-epub-drama,
    .is-letter-title,
    .is-letter-recipient,
    .is-letter-date
  ) {
  text-align: start !important;
  text-align-last: auto !important;
  text-justify: auto !important;
  text-wrap: pretty;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

.word-display.has-context.has-context-page-style
  .context-ebook-page
  .context-ebook-paragraph.is-epub-align-justify:not(
    .is-epub-verse,
    .is-epub-drama,
    .is-letter-title,
    .is-letter-recipient,
    .is-letter-date
  )
  .ebook-word.context-token {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
}

/* Keep the active page word as an empty layout slot until its flight lands. */
.word-display.has-context.has-context-page-style.is-context-entry-prep
  .context-ebook-page
  .ebook-word.context-token.is-current,
.word-display.has-context.has-context-page-style.is-context-entering
  .context-ebook-page
  .ebook-word.context-token.is-current {
  visibility: hidden !important;
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: none !important;
}

/* The travelling copy and live word exchange ownership in one paint. */
.word-display.has-context.has-context-page-style.is-context-entry-handoff
  .context-ebook-page
  .ebook-word.context-token.is-current {
  visibility: visible !important;
  opacity: 1 !important;
  transition: none !important;
}

.word-display.has-context.has-context-page-style:not(.is-context-exiting).is-context-revealing
  .context-ebook-page
  .ebook-paragraph.context-ebook-paragraph {
  animation: none !important;
  animation-delay: 0ms !important;
}

/*
 * Let the travelling word establish the Speed-to-Page transition before the
 * surrounding page arrives. The active word remains an empty layout slot
 * above, so the fade never creates a duplicate underneath the flight.
 */
.word-display.has-context.has-context-page-style.is-context-entry-prep:not(.is-context-entering)
  .context-ebook-page {
  opacity: 0 !important;
}

.word-display.has-context.has-context-page-style.is-context-entering
  .context-ebook-page {
  opacity: 1 !important;
  animation: none !important;
}

/*
 * Fade a paint-only veil instead of the text layer itself. Keeping the page
 * glyphs out of an opacity animation prevents the browser from re-rasterizing
 * them at the end of the word flight, which could look like nearby words
 * shifted by a fraction of a pixel at some font sizes.
 */
.word-display.has-context.has-context-page-style.is-context-entering
  .context-ebook-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--reader-surface);
  animation: pageStyleContextPageVeilDismiss 215ms cubic-bezier(0.22, 0.68, 0.22, 1) 80ms both;
}

@keyframes pageStyleContextPageVeilDismiss {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@media (max-width: 360px) and (max-height: 600px) {
  #ebookPage,
  .ebook-measure-page,
  .word-display.has-context.has-context-page-style.has-context-paged-view .context-ebook-page.ebook-page {
    padding-bottom: max(58px, calc(env(safe-area-inset-bottom) + 48px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word-display.has-context.has-context-page-style .context-ebook-page .ebook-word.context-token {
    transition: none !important;
  }

  .word-display.has-context.has-context-page-style.is-context-entry-prep .context-ebook-page,
  .word-display.has-context.has-context-page-style.is-context-entering .context-ebook-page,
  .word-display.has-context.has-context-page-style.is-context-exiting .context-ebook-page {
    opacity: 1 !important;
    animation: none !important;
  }

  .word-display.has-context.has-context-page-style.is-context-entering .context-ebook-page::after {
    content: none !important;
    animation: none !important;
  }
}

/* Page Mode is a literal book page: no legacy edge fade or top veil. */
body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context-page-style) .focus-stage::before,
html.theme-dark body:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context-page-style) .focus-stage::before,
body.theme-dark:not(.ebook-mode) .reader-panel:has(#wordDisplay.has-context-page-style) .focus-stage::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}

#wordDisplay.has-context.has-context-page-style,
#wordDisplay.has-context.has-context-page-style .context-ebook-paged-view,
#wordDisplay.has-context.has-context-page-style .context-ebook-page {
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.word-display.has-context.has-context-page-style.has-context-paged-view {
  --context-ebook-top-lift: 0px;
}

.word-display.has-context.has-context-page-style.has-context-paged-view .context-ebook-paged-view {
  height: var(
    --context-ebook-page-height,
    calc(100% + var(--context-dock-underlap, var(--shared-bottom-dock-underlap, 0px)))
  ) !important;
  min-height: var(
    --context-ebook-page-height,
    calc(100% + var(--context-dock-underlap, var(--shared-bottom-dock-underlap, 0px)))
  ) !important;
  top: calc(-1 * var(--context-ebook-top-lift)) !important;
  margin-top: 0 !important;
  transform: none !important;
}

/* The pagination probe lives outside #wordDisplay, so it takes the Page Mode
 * face directly; otherwise pages would be measured in the Speed Mode sans. */
.ebook-measure-page.is-context-page-measure {
  --reading-font: var(--page-reading-font);
}

/* The visible sheet and its pagination probe must share identical edge spacing.
 * This also supersedes the old extra bottom padding on small screens.
 */
.ebook-measure-page.is-context-page-measure,
.word-display.has-context.has-context-page-style.has-context-paged-view .context-ebook-page.ebook-page,
.word-display.has-context.has-context-page-style .context-ebook-scroll .context-ebook-page.ebook-page {
  padding-top: clamp(24px, 3vh, 32px) !important;
  padding-bottom: clamp(24px, 3vh, 32px) !important;
}

/* Collapsible reader dock: expand the reading plane when the dock surface closes. */
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(246, 242, 233, 0.78), rgba(239, 232, 218, 0.68)) !important;
  box-shadow: 0 -12px 30px rgba(56, 43, 27, 0.1) !important;
  opacity: 1;
  pointer-events: none !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.06) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
  transition: opacity 300ms cubic-bezier(0.22, 0.78, 0.23, 1) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before {
  background: linear-gradient(180deg, rgba(29, 30, 35, 0.78), rgba(20, 21, 25, 0.68)) !important;
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.3) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock > * {
  position: relative;
  z-index: 1;
}

body.reader-focus-mode:not(.ebook-mode) .reader-panel.is-playing .bottom-dock::before {
  opacity: 0.52;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .controls > #dockCollapseButton,
body.has-loaded-text:not(.ebook-mode) .reader-panel .controls > #dockCollapseButton:is(
  :hover,
  :focus,
  :focus-visible,
  :active,
  .is-tactile-press
) {
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: center !important;
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--rhythm-control-ink) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 0.92 !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .controls > #dockCollapseButton:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--rhythm-coral) 48%, transparent) !important;
  outline-offset: 1px !important;
}

.dock-collapse-symbol {
  width: 29px;
  height: 29px;
  overflow: visible;
  transform-origin: 50% 50%;
}

.dock-collapse-symbol :is(path, circle) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock-collapse-symbol .dock-controls-glyph,
.dock-collapse-symbol .dock-close-glyph {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 240ms cubic-bezier(0.22, 0.78, 0.23, 1),
    transform 360ms cubic-bezier(0.22, 0.78, 0.23, 1);
}

.dock-collapse-symbol .dock-controls-glyph {
  opacity: 0;
  transform: scale(0.72) rotate(-24deg);
}

.dock-collapse-symbol .dock-close-glyph {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

body.ebook-mode #dockCollapseButton {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.reader-panel .bottom-dock :is(
  .slider-row,
  .progress-wrap,
  #prevButton,
  #nextButton,
  #contextButton,
  .bottom-right-actions,
  .control-helper
) {
  transition:
    opacity 220ms cubic-bezier(0.22, 0.78, 0.23, 1),
    visibility 0s linear 0s !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel {
  grid-template-rows: auto minmax(0, 1fr) !important;
  --context-visual-dock-underlap: 0px !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  z-index: 1200 !important;
}

body:not(.ebook-mode) .reader-panel.is-dock-collapsed .bottom-dock {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  display: block !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
}

body:not(.ebook-mode) .reader-panel.is-dock-collapsed .bottom-dock::before {
  opacity: 0 !important;
}

body:not(.ebook-mode) .reader-panel.is-dock-collapsed .bottom-dock :is(
  .slider-row,
  .progress-wrap,
  #prevButton,
  #nextButton,
  #contextButton,
  .bottom-right-actions,
  .control-helper
) {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition:
    opacity 180ms cubic-bezier(0.22, 0.78, 0.23, 1),
    visibility 0s linear 180ms !important;
}

body:not(.ebook-mode) .reader-panel.is-dock-collapsed .transport-controls,
body:not(.ebook-mode) .reader-panel.is-dock-collapsed .controls {
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body:not(.ebook-mode) .reader-panel.is-dock-collapsed .controls > #textPanelButton.bottom-home-button,
body:not(.ebook-mode) .reader-panel.is-dock-collapsed .controls > #textPanelButton.bottom-home-button:is(
  :hover,
  :focus,
  :focus-visible,
  :active,
  .is-tactile-press
) {
  position: fixed !important;
  left: var(
    --reader-collapsed-home-center-x,
    max(45px, calc(env(safe-area-inset-left) + 45px))
  ) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(
    --reader-collapsed-home-center-bottom,
    max(57px, calc(env(safe-area-inset-bottom) + 47px))
  ) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 50%) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel.is-dock-collapsed .controls > #dockCollapseButton,
body.has-loaded-text:not(.ebook-mode) .reader-panel.is-dock-collapsed .controls > #dockCollapseButton:is(
  :hover,
  :focus,
  :focus-visible,
  :active,
  .is-tactile-press
) {
  position: fixed !important;
  left: auto !important;
  right: max(24px, calc(env(safe-area-inset-right) + 24px)) !important;
  top: auto !important;
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 26px)) !important;
  z-index: 1202 !important;
  pointer-events: auto !important;
}

body:not(.ebook-mode) .reader-panel.is-dock-collapsed #dockCollapseButton .dock-controls-glyph {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

body:not(.ebook-mode) .reader-panel.is-dock-collapsed #dockCollapseButton .dock-close-glyph {
  opacity: 0;
  transform: scale(0.72) rotate(24deg);
}

body.has-loaded-text:not(.ebook-mode) .reader-panel.is-dock-collapsed #playButton.play-control-button,
body.has-loaded-text:not(.ebook-mode) .reader-panel.is-dock-collapsed #playButton.play-control-button:is(
  :hover,
  :focus,
  :focus-visible,
  :active
) {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(17px, calc(env(safe-area-inset-bottom) + 7px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  transform: translateX(-50%) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

@media (max-width: 390px) {
  body.has-loaded-text:not(.ebook-mode) .reader-panel.is-dock-collapsed #playButton.play-control-button,
  body.has-loaded-text:not(.ebook-mode) .reader-panel.is-dock-collapsed #playButton.play-control-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active
  ) {
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before,
  .reader-panel .bottom-dock :is(
    .slider-row,
    .progress-wrap,
    #prevButton,
    #nextButton,
    #contextButton,
    .bottom-right-actions,
    .control-helper
  ),
  .dock-collapse-symbol .dock-controls-glyph,
  .dock-collapse-symbol .dock-close-glyph {
    transition: none !important;
  }
}

/* Compact reader instrument tray: opening controls never changes reader geometry. */
body.has-loaded-text:not(.ebook-mode) .reader-panel {
  --reader-tray-bottom: max(112px, calc(env(safe-area-inset-bottom) + 102px));
  --reader-tray-height: clamp(128px, 16vh, 146px);
  grid-template-rows: auto minmax(0, 1fr) !important;
  --context-dock-underlap: 0px !important;
  --context-visual-dock-underlap: 0px !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel > .focus-stage {
  grid-row: 2 !important;
  grid-column: 1 !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock,
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock.is-collapsed {
  grid-row: 2 !important;
  grid-column: 1 !important;
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 1200 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  isolation: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset:
    auto
    max(12px, env(safe-area-inset-right))
    var(--reader-tray-bottom)
    max(12px, env(safe-area-inset-left)) !important;
  z-index: 0 !important;
  width: auto !important;
  height: var(--reader-tray-height) !important;
  border: 1px solid rgba(111, 91, 67, 0.10) !important;
  border-radius: 27px !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.38), transparent 44%),
    linear-gradient(155deg, rgba(250, 246, 238, 0.84), rgba(226, 217, 202, 0.72)) !important;
  box-shadow:
    0 16px 38px rgba(50, 39, 25, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.46) !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transform-origin: 84% 100% !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
  transition:
    opacity 220ms cubic-bezier(0.22, 0.78, 0.23, 1),
    transform 320ms cubic-bezier(0.22, 0.78, 0.23, 1) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before,
body.theme-dark.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before {
  border-color: rgba(255, 238, 210, 0.075) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 243, 222, 0.12), transparent 46%),
    linear-gradient(155deg, rgba(53, 55, 64, 0.84), rgba(24, 25, 30, 0.70)) !important;
  box-shadow:
    0 17px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 242, 218, 0.105),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock.is-collapsed::before {
  display: block !important;
  content: "" !important;
  opacity: 0 !important;
  transform: translateY(18px) scale(0.97) !important;
  visibility: hidden !important;
  transition:
    opacity 180ms cubic-bezier(0.22, 0.78, 0.23, 1),
    transform 260ms cubic-bezier(0.22, 0.78, 0.23, 1),
    visibility 0s linear 260ms !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock > .slider-row,
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock > .progress-wrap {
  position: fixed !important;
  left: max(32px, calc(env(safe-area-inset-left) + 20px)) !important;
  right: max(32px, calc(env(safe-area-inset-right) + 20px)) !important;
  z-index: 1201 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition:
    opacity 190ms cubic-bezier(0.22, 0.78, 0.23, 1),
    transform 300ms cubic-bezier(0.22, 0.78, 0.23, 1),
    visibility 0s linear 0s !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock > .slider-row {
  bottom: calc(var(--reader-tray-bottom) + 76px) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock > .progress-wrap {
  bottom: calc(var(--reader-tray-bottom) + 20px) !important;
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .bottom-dock.is-collapsed
  > :is(.slider-row, .progress-wrap) {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(14px) !important;
  pointer-events: none !important;
  transition:
    opacity 160ms cubic-bezier(0.22, 0.78, 0.23, 1),
    transform 230ms cubic-bezier(0.22, 0.78, 0.23, 1),
    visibility 0s linear 230ms !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock > .controls {
  position: static !important;
  display: block !important;
  width: 0 !important;
  max-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock .transport-controls {
  position: static !important;
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock :is(
  #prevButton,
  #nextButton,
  #contextButton,
  .bottom-right-actions,
  .control-helper
) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .controls
  > #textPanelButton.bottom-home-button,
body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .controls
  > #textPanelButton.bottom-home-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  left: var(
    --reader-collapsed-home-center-x,
    max(45px, calc(env(safe-area-inset-left) + 45px))
  ) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(
    --reader-collapsed-home-center-bottom,
    max(57px, calc(env(safe-area-inset-bottom) + 47px))
  ) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  transform: translate(-50%, 50%) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button,
body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #playButton.play-control-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(17px, calc(env(safe-area-inset-bottom) + 7px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel .controls > #dockCollapseButton,
body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .controls
  > #dockCollapseButton:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  left: auto !important;
  right: max(24px, calc(env(safe-area-inset-right) + 24px)) !important;
  top: auto !important;
  bottom: max(36px, calc(env(safe-area-inset-bottom) + 26px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 0.92 !important;
  margin: 0 !important;
  pointer-events: auto !important;
  transform: none !important;
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .bottom-dock.is-collapsed
  #dockCollapseButton
  .dock-controls-glyph {
  opacity: 1 !important;
  transform: scale(1) rotate(0deg) !important;
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .bottom-dock.is-collapsed
  #dockCollapseButton
  .dock-close-glyph {
  opacity: 0 !important;
  transform: scale(0.72) rotate(24deg) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #wordDisplay:not(.has-context):not(.has-chapter-title) {
  translate: 0 var(--reader-speed-word-lift) !important;
}

/*
 * Context exit flights must use the same optical centre as the settled Speed
 * word. `translate` remains independent of the flight's animated `transform`,
 * so its measured destination and final resting position stay identical.
 */
.context-flight-word.is-speed-flight-target {
  translate: 0 var(--reader-speed-word-lift) !important;
}

/* The travelling word owns the handoff until it reaches Speed's optical centre. */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  #wordDisplay.is-context-speed-handoff
  .focus-word {
  visibility: hidden !important;
}

/* The tray is governed only by its own toggle, regardless of reader mode. */
body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay)
  .bottom-dock:not(.is-collapsed)::before,
body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-context)
  .bottom-dock:not(.is-collapsed)::before {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

html.theme-dark
  body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay)
  .bottom-dock:not(.is-collapsed)::before,
body.theme-dark.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay)
  .bottom-dock:not(.is-collapsed)::before,
html.theme-dark
  body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-context)
  .bottom-dock:not(.is-collapsed)::before,
body.theme-dark.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-context)
  .bottom-dock:not(.is-collapsed)::before {
  border-color: rgba(255, 238, 210, 0.09) !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 243, 222, 0.125), transparent 46%),
    linear-gradient(155deg, rgba(53, 55, 64, 0.84), rgba(24, 25, 30, 0.70)) !important;
  box-shadow:
    0 17px 42px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 242, 218, 0.105),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.08) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
}

@media (max-width: 390px) {
  body.has-loaded-text:not(.ebook-mode) .reader-panel {
    --reader-tray-bottom: max(108px, calc(env(safe-area-inset-bottom) + 98px));
    --reader-tray-height: 126px;
  }

  body.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button,
  body.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #playButton.play-control-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 10px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before,
  body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock > .slider-row,
  body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock > .progress-wrap {
    transition: none !important;
  }
}

/* Mode-owned controls: Speed floats the instruments; Context clears the page. */
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock::before,
body.has-loaded-text:not(.ebook-mode) .reader-panel .bottom-dock.is-collapsed::before,
body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay)
  .bottom-dock:not(.is-collapsed)::before,
body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-context)
  .bottom-dock:not(.is-collapsed)::before {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .bottom-dock
  > :is(.slider-row, .progress-wrap) {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .bottom-dock
  > :is(.slider-row, .progress-wrap) {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .controls
  > #dockCollapseButton {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* A lower, quieter transport control leaves more visual room for the text. */
body.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button,
body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #playButton.play-control-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  width: clamp(96px, 27vw, 112px) !important;
  min-width: clamp(96px, 27vw, 112px) !important;
  max-width: 112px !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  border-radius: 17px !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel #playButton.play-control-button::before {
  border-radius: 16px !important;
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #playButton.play-control-button
  .play-symbol {
  width: 24px !important;
  height: 24px !important;
}

/*
 * Reader controls, step one:
 * Speed owns the original full dock. Page view keeps only the quiet home and
 * play affordances. Motion is deliberately disabled until the dock transition
 * is designed as a separate pass.
 */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed {
  --speed-dock-play-size: clamp(64px, 16.5vw, 68px);
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 1200 !important;
  isolation: isolate !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding:
    clamp(14px, 1.7vh, 18px)
    max(20px, calc(env(safe-area-inset-right) + 8px))
    max(24px, calc(env(safe-area-inset-bottom) + 16px))
    max(20px, calc(env(safe-area-inset-left) + 8px)) !important;
  gap: 8px !important;
  overflow: hidden !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border: 0 !important;
  border-radius: 34px 34px 0 0 / 30px 30px 0 0 !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, 0.20), transparent 41%),
    radial-gradient(circle at 88% 92%, rgba(201, 93, 72, 0.09), transparent 47%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.54), rgba(232, 221, 202, 0.31)) !important;
  box-shadow: 0 -18px 44px rgba(45, 38, 28, 0.09) !important;
  -webkit-backdrop-filter: blur(19px) saturate(1.08) !important;
  backdrop-filter: blur(19px) saturate(1.08) !important;
  transition: none !important;
}

html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 244, 226, 0.065), transparent 41%),
    radial-gradient(circle at 88% 92%, rgba(211, 91, 82, 0.075), transparent 47%),
    linear-gradient(145deg, rgba(40, 42, 48, 0.78), rgba(18, 19, 23, 0.67)) !important;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, 0.25) !important;
  -webkit-backdrop-filter: blur(19px) saturate(1.13) !important;
  backdrop-filter: blur(19px) saturate(1.13) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock::before,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock::after,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed::before,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed::after {
  content: none !important;
  display: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > :is(.slider-row, .progress-wrap),
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  > :is(.slider-row, .progress-wrap) {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  > .slider-row {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) !important;
  column-gap: 12px !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  .speed-control {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  width: 100% !important;
  min-width: 0 !important;
  gap: 12px !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  #wpmSlider {
  width: 100% !important;
  min-width: 0 !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .progress-wrap,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  > .progress-wrap {
  display: block !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .progress-wrap
  .progress-meta {
  margin-top: 5px !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .controls,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  > .controls {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transition: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .transport-controls,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  .transport-controls {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: 44px var(--speed-dock-play-size) 44px !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(22px, 6.8vw, 36px) !important;
  justify-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  transition: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  :is(#prevButton, #nextButton),
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  :is(#prevButton, #nextButton) {
  position: static !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .controls
  > #textPanelButton.bottom-home-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  .controls
  > #textPanelButton.bottom-home-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .controls
  > #textPanelButton.bottom-home-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: static !important;
  inset: auto !important;
  justify-self: start !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  transform: none !important;
  pointer-events: auto !important;
  transition: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  place-items: center !important;
  width: var(--speed-dock-play-size) !important;
  min-width: var(--speed-dock-play-size) !important;
  max-width: var(--speed-dock-play-size) !important;
  height: var(--speed-dock-play-size) !important;
  min-height: var(--speed-dock-play-size) !important;
  max-height: var(--speed-dock-play-size) !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  border-radius: 50% !important;
  pointer-events: auto !important;
  transition: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button::before {
  border-radius: 50% !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .bottom-right-actions {
  display: block !important;
  justify-self: end !important;
  width: 44px !important;
  height: 44px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  :is(#contextButton, #dockCollapseButton, .control-helper) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Page view: the dock surface and instruments disappear completely. */
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed {
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 1200 !important;
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock::before,
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock::after {
  content: none !important;
  display: none !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  :is(
    .slider-row,
    .progress-wrap,
    #prevButton,
    #nextButton,
    #contextButton,
    #dockCollapseButton,
    .bottom-right-actions,
    .control-helper
  ) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .controls,
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .transport-controls {
  position: static !important;
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: none !important;
}

/*
 * A restrained outlined glyph preserves the route back to Speed without
 * competing with the page. The button remains a comfortable tap target.
 */
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 0.48 !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(79, 68, 54, 0.20) !important;
  border-radius: 15px !important;
  background: rgba(255, 252, 245, 0.07) !important;
  color: rgba(178, 76, 58, 0.76) !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none !important;
}

html.theme-dark
  body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.theme-dark.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button {
  border-color: rgba(245, 227, 200, 0.14) !important;
  background: rgba(245, 227, 200, 0.018) !important;
  color: rgba(224, 91, 69, 0.72) !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button::before {
  content: none !important;
  display: none !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button
  .play-symbol {
  width: 17px !important;
  height: 17px !important;
  filter: none !important;
}

/* Home owns the screen when its panel is open; no reader dock may bleed over it. */
body:has(#inputPanel.is-open) .reader-panel #readerBottomDock,
body:has(#inputPanel.is-open) .reader-panel #readerBottomDock.is-collapsed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/*
 * Dockless Speed controls
 * -----------------------
 * The instruments retain their familiar locations without reading as a
 * separate panel. Page view remains unchanged and continues to own its quiet
 * single-glyph route back to Speed.
 */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock,
html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed {
  --speed-dock-play-width: clamp(112px, 31vw, 132px);
  --speed-dock-play-height: 52px;
  position: fixed !important;
  inset: auto 0 0 0 !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  padding:
    0
    max(28px, calc(env(safe-area-inset-right) + 18px))
    max(20px, calc(env(safe-area-inset-bottom) + 12px))
    max(28px, calc(env(safe-area-inset-left) + 18px)) !important;
  gap: clamp(12px, 1.8vh, 16px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  > .slider-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 10px !important;
  align-items: center !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  .speed-control {
  display: contents !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  #wpmSlider {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  #wpmOutput {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .progress-wrap {
  padding-top: 1px !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .progress-wrap
  .progress-meta {
  margin-top: 7px !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .controls,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  > .controls {
  display: grid !important;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
  min-height: 58px !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .transport-controls,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  .transport-controls {
  display: contents !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  :is(#prevButton, #nextButton, .bottom-right-actions),
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  :is(#prevButton, #nextButton, .bottom-right-actions) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .controls
  > #textPanelButton.bottom-home-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  .controls
  > #textPanelButton.bottom-home-button {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press, .is-paused) {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  width: var(--speed-dock-play-width) !important;
  min-width: var(--speed-dock-play-width) !important;
  max-width: var(--speed-dock-play-width) !important;
  height: var(--speed-dock-play-height) !important;
  min-height: var(--speed-dock-play-height) !important;
  max-height: var(--speed-dock-play-height) !important;
  border: 1px solid rgba(185, 62, 53, 0.62) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.12), transparent 48%),
    linear-gradient(135deg, rgba(184, 65, 55, 0.14), rgba(215, 77, 67, 0.24)) !important;
  color: rgba(193, 62, 52, 0.94) !important;
  box-shadow:
    0 12px 28px rgba(77, 40, 32, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
  transform: none !important;
  filter: none !important;
}

html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button {
  border-color: rgba(229, 91, 76, 0.67) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(246, 232, 218, 0.055), transparent 48%),
    linear-gradient(135deg, rgba(73, 37, 37, 0.42), rgba(92, 42, 40, 0.54)) !important;
  color: rgba(235, 102, 84, 0.96) !important;
  box-shadow:
    0 13px 30px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(248, 239, 224, 0.055) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button::before {
  content: none !important;
  display: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button
  .play-symbol {
  width: 23px !important;
  height: 23px !important;
}

/* A local pool of light gives the word depth without recreating a dock. */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .focus-stage::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 0 !important;
  width: min(86vw, 490px) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 20%,
      rgba(156, 102, 67, 0.052) 20.2% 20.45%,
      transparent 20.7% 28%
    ),
    radial-gradient(
      circle,
      rgba(195, 125, 72, 0.105) 0%,
      rgba(174, 104, 65, 0.052) 35%,
      transparent 68%
    ) !important;
  opacity: 0.66 !important;
  transform:
    translate(-50%, -50%)
    translateY(clamp(-104px, -11.5vh, -82px)) !important;
  pointer-events: none !important;
}

html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .focus-stage::before,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .focus-stage::before {
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 20%,
      rgba(222, 145, 83, 0.045) 20.2% 20.45%,
      transparent 20.7% 28%
    ),
    radial-gradient(
      circle,
      rgba(214, 135, 76, 0.092) 0%,
      rgba(177, 91, 67, 0.042) 38%,
      transparent 69%
    ) !important;
  opacity: 0.72 !important;
}

/* Playback quietens the instruments while preserving immediate access. */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock
  > :is(.slider-row, .progress-wrap) {
  opacity: 0.42 !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock
  > .controls {
  opacity: 0.54 !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing.is-adjusting-speed
  #readerBottomDock
  > .slider-row,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock
  > .slider-row:focus-within,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock
  > .controls:focus-within {
  opacity: 1 !important;
}

@media (max-height: 760px) {
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock,
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock.is-collapsed {
    padding-inline:
      max(24px, calc(env(safe-area-inset-right) + 14px))
      max(24px, calc(env(safe-area-inset-left) + 14px)) !important;
    gap: 10px !important;
  }

  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock
    > .slider-row {
    row-gap: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock
    > :is(.slider-row, .progress-wrap, .controls) {
    transition: none !important;
  }
}

/*
 * Dockless mode transition
 * ------------------------
 * Light establishes the reading centre first; the instruments then arrive in
 * two restrained beats. Independent `translate` and `filter` animations avoid
 * competing with the word-flight transform.
 */
@keyframes reader-speed-rings-enter {
  0% {
    filter: opacity(0) blur(3px);
    scale: 0.94;
  }
  52% {
    filter: opacity(0.62) blur(0.7px);
  }
  100% {
    filter: opacity(1) blur(0);
    scale: 1;
  }
}

@keyframes reader-speed-glow-enter {
  0% {
    filter: opacity(0) blur(8px);
    scale: 0.9;
  }
  100% {
    filter: opacity(1) blur(0);
    scale: 1;
  }
}

@keyframes reader-speed-instrument-enter {
  0% {
    filter: opacity(0) blur(1.5px);
    translate: 0 14px;
  }
  100% {
    filter: opacity(1) blur(0);
    translate: 0 0;
  }
}

@keyframes reader-speed-progress-reveal {
  0% {
    clip-path: inset(0 100% 0 0 round 999px);
    filter: opacity(0.25);
  }
  100% {
    clip-path: inset(0 0 0 0 round 999px);
    filter: opacity(1);
  }
}

@keyframes reader-speed-controls-exit {
  0% {
    filter: opacity(1);
  }
  100% {
    filter: opacity(0);
  }
}

@keyframes reader-speed-rings-exit {
  0% {
    filter: opacity(1) blur(0);
    scale: 1;
  }
  100% {
    filter: opacity(0) blur(2.5px);
    scale: 0.965;
  }
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .focus-stage::before {
  animation: reader-speed-rings-enter 520ms cubic-bezier(0.2, 0.72, 0.22, 1) both !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #wordDisplay:not(.has-context)::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: -1 !important;
  width: min(66vw, 350px) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background:
    radial-gradient(
      circle,
      rgba(202, 136, 76, 0.105) 0%,
      rgba(187, 112, 70, 0.048) 42%,
      transparent 71%
    ) !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  animation:
    reader-speed-glow-enter
    560ms
    55ms
    cubic-bezier(0.2, 0.72, 0.22, 1)
    both !important;
}

html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #wordDisplay:not(.has-context)::before,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #wordDisplay:not(.has-context)::before {
  background:
    radial-gradient(
      circle,
      rgba(222, 144, 78, 0.095) 0%,
      rgba(182, 93, 68, 0.038) 44%,
      transparent 72%
    ) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row {
  animation:
    reader-speed-instrument-enter
    210ms
    0ms
    cubic-bezier(0.2, 0.76, 0.22, 1)
    both !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .progress-wrap {
  animation:
    reader-speed-instrument-enter
    225ms
    12ms
    cubic-bezier(0.2, 0.76, 0.22, 1)
    both !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .controls {
  animation:
    reader-speed-instrument-enter
    330ms
    165ms
    cubic-bezier(0.2, 0.76, 0.22, 1)
    both !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .progress-fill {
  animation:
    reader-speed-progress-reveal
    240ms
    28ms
    cubic-bezier(0.2, 0.76, 0.22, 1)
    both !important;
}

/*
 * Page entry changes the body mode immediately so its destination can be
 * measured. This short-lived body class keeps the floating controls painted
 * over that layout just long enough to complete their fade.
 */
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed {
  --speed-dock-play-width: clamp(112px, 31vw, 132px);
  --speed-dock-play-height: 52px;
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 1200 !important;
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding:
    0
    max(28px, calc(env(safe-area-inset-right) + 18px))
    max(20px, calc(env(safe-area-inset-bottom) + 12px))
    max(28px, calc(env(safe-area-inset-left) + 18px)) !important;
  gap: clamp(12px, 1.8vh, 16px) !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  animation:
    reader-speed-controls-exit
    165ms
    cubic-bezier(0.4, 0, 1, 1)
    both !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-rows: auto auto !important;
  column-gap: 16px !important;
  row-gap: 10px !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  .speed-control {
  display: contents !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  #wpmSlider {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row
  #wpmOutput {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .progress-wrap {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding-top: 1px !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .progress-wrap
  .progress-meta {
  margin-top: 7px !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .controls {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .transport-controls {
  display: contents !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  :is(#prevButton, #nextButton, .bottom-right-actions, #dockCollapseButton) {
  display: none !important;
  visibility: hidden !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .controls
  > #textPanelButton.bottom-home-button {
  position: static !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button {
  position: static !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: var(--speed-dock-play-width) !important;
  min-width: var(--speed-dock-play-width) !important;
  max-width: var(--speed-dock-play-width) !important;
  height: var(--speed-dock-play-height) !important;
  min-height: var(--speed-dock-play-height) !important;
  max-height: var(--speed-dock-play-height) !important;
  margin: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 1px solid rgba(229, 91, 76, 0.67) !important;
  border-radius: 17px !important;
  background:
    linear-gradient(135deg, rgba(73, 37, 37, 0.42), rgba(92, 42, 40, 0.54)) !important;
  color: rgba(235, 102, 84, 0.96) !important;
  box-shadow: 0 13px 30px rgba(0, 0, 0, 0.20) !important;
  transform: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button::before {
  content: none !important;
  display: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .focus-stage::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 0 !important;
  width: min(86vw, 490px) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background:
    repeating-radial-gradient(
      circle,
      transparent 0 20%,
      rgba(222, 145, 83, 0.045) 20.2% 20.45%,
      transparent 20.7% 28%
    ),
    radial-gradient(
      circle,
      rgba(214, 135, 76, 0.092) 0%,
      rgba(177, 91, 67, 0.042) 38%,
      transparent 69%
    ) !important;
  opacity: 0.72 !important;
  transform:
    translate(-50%, -50%)
    translateY(clamp(-104px, -11.5vh, -82px)) !important;
  pointer-events: none !important;
  animation:
    reader-speed-rings-exit
    210ms
    cubic-bezier(0.34, 0, 0.72, 0.24)
    both !important;
}

@media (prefers-reduced-motion: reduce) {
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    .focus-stage::before,
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #wordDisplay:not(.has-context)::before,
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock
    > .slider-row,
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock
    > .progress-wrap,
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock
    > .controls,
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock
    .progress-fill,
  body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock,
  body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
    .reader-panel
    .focus-stage::before {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/*
 * Keep the Page controls in their final screen coordinates during the Speed
 * instrument fade. Their size/position interpolation is handled by the shared
 * DOM controls, so neither Home nor play enters a temporary grid position.
 */
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed,
html.theme-dark
  body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
html.theme-dark
  body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed,
body.theme-dark.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock,
body.theme-dark.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  translate: none !important;
  animation: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > :is(.slider-row, .progress-wrap) {
  animation:
    reader-speed-controls-exit
    165ms
    cubic-bezier(0.4, 0, 1, 1)
    both !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .controls {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .transport-controls {
  position: static !important;
  display: block !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  .controls
  > #textPanelButton.bottom-home-button,
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  .controls
  > #textPanelButton.bottom-home-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press
  ) {
  position: fixed !important;
  left: var(
    --reader-collapsed-home-center-x,
    max(45px, calc(env(safe-area-inset-left) + 45px))
  ) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(
    --reader-collapsed-home-center-bottom,
    max(57px, calc(env(safe-area-inset-bottom) + 47px))
  ) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  width: var(--bottom-control-size) !important;
  min-width: var(--bottom-control-size) !important;
  height: var(--bottom-control-size) !important;
  min-height: var(--bottom-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: translate(-50%, 50%) !important;
  pointer-events: none !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button,
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 0.48 !important;
  transform: translateX(-50%) !important;
  border: 1px solid rgba(79, 68, 54, 0.20) !important;
  border-radius: 15px !important;
  background: rgba(255, 252, 245, 0.07) !important;
  color: rgba(178, 76, 58, 0.76) !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
}

html.theme-dark
  body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button,
body.theme-dark.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button {
  border-color: rgba(245, 227, 200, 0.14) !important;
  background: rgba(245, 227, 200, 0.018) !important;
  color: rgba(224, 91, 69, 0.72) !important;
}

/* Local dialogue experiment and learning-ledger controls. */
.dialogue-experimental-panel,
.dialogue-learning-panel {
  border: 1px solid rgba(63, 56, 50, 0.12);
  border-radius: 13px;
}

.speaker-runtime-status[data-status="experimental_ready"],
.speaker-runtime-status[data-status="ready"] {
  border-inline-start-color: #26705d;
}

.speaker-runtime-status[data-status="fallback"],
.speaker-runtime-status[data-status="unavailable"] {
  border-inline-start-color: #a05f34;
}

.speaker-runtime-status[data-status="excluded"] {
  border-inline-start-color: #6f6a64;
}

.dialogue-learning-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Keep long-press attribution review centred, including above the iOS keyboard. */
.character-legend-sheet {
  position: fixed !important;
  left: var(--character-popover-left, 50vw) !important;
  top: var(--character-popover-top, 50dvh) !important;
  right: auto !important;
  bottom: auto !important;
  box-sizing: border-box;
  max-width: calc(100vw - 20px);
  max-height: min(
    680px,
    var(--character-popover-max-height, calc(100dvh - 20px))
  ) !important;
  transform: translate(-50%, -50%) !important;
}

.character-legend-feedback {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.character-legend-feedback button {
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid rgba(63, 56, 50, 0.2);
  border-radius: 10px;
  color: #352f2b;
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
}

.character-legend-feedback
  button[data-dialogue-feedback="alias"] {
  grid-column: 1 / -1;
}

.character-legend-feedback-editor {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 11px;
  border-top: 1px solid rgba(63, 56, 50, 0.14);
}

.character-legend-panel.is-dialogue-editing
  .character-legend-sheet {
  padding-top: 50px;
}

.character-legend-panel.is-dialogue-editing
  .character-legend-header,
.character-legend-panel.is-dialogue-editing
  .character-legend-health,
.character-legend-panel.is-dialogue-editing
  .character-legend-item,
.character-legend-panel.is-dialogue-editing
  .character-legend-empty {
  display: none;
}

.character-legend-panel.is-dialogue-editing
  .character-legend-list {
  flex: 1 1 auto;
  scroll-padding-block: 8px;
}

.character-legend-panel.is-dialogue-editing
  .character-legend-debug {
  min-height: 0;
  padding: 12px;
}

.character-legend-panel.is-dialogue-editing
  .character-legend-debug::before,
.character-legend-panel.is-dialogue-editing
  .character-legend-debug
  > .character-legend-debug-label,
.character-legend-panel.is-dialogue-editing
  .character-legend-debug
  > strong,
.character-legend-panel.is-dialogue-editing
  .character-legend-debug
  > small {
  display: none;
}

.character-legend-panel.is-dialogue-editing
  .character-legend-feedback-editor {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.character-legend-feedback-editor > label {
  color: #352f2b;
  font-size: 0.76rem;
  font-weight: 760;
}

.character-legend-feedback-quote {
  display: block;
  max-height: 5.7em;
  padding: 10px 12px;
  overflow-y: auto;
  border-inline-start: 3px solid rgba(38, 112, 93, 0.42);
  border-radius: 4px 10px 10px 4px;
  background: rgba(38, 112, 93, 0.07);
  color: rgba(53, 47, 43, 0.9);
  font-size: 0.78rem;
  line-height: 1.45;
  quotes: "\201c" "\201d" "\2018" "\2019";
}

.character-legend-feedback-editor > input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(63, 56, 50, 0.24);
  border-radius: 12px;
  outline: 0;
  background: rgba(255, 255, 255, 0.86);
  color: #352f2b;
  font: inherit;
  font-size: 1rem;
}

.character-legend-feedback-editor > input:focus {
  border-color: rgba(38, 112, 93, 0.62);
  box-shadow: 0 0 0 3px rgba(38, 112, 93, 0.13);
}

.character-legend-feedback-editor > small {
  color: rgba(63, 56, 50, 0.68);
  font-size: 0.68rem;
  line-height: 1.35;
}

.character-legend-speaker-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 122px;
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.character-legend-speaker-options button,
.character-legend-feedback-editor-actions button {
  min-width: 0;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(63, 56, 50, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: #352f2b;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 720;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.character-legend-speaker-options button:hover,
.character-legend-speaker-options button:focus-visible,
.character-legend-feedback-editor-actions button:hover,
.character-legend-feedback-editor-actions button:focus-visible {
  border-color: rgba(38, 112, 93, 0.46);
  outline: 0;
  background: rgba(240, 248, 244, 0.96);
}

.character-legend-feedback-editor-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 2px;
}

.character-legend-feedback-editor-actions
  button[type="submit"] {
  border-color: rgba(38, 112, 93, 0.28);
  background: rgba(38, 112, 93, 0.11);
  color: #1f5d4d;
}

.character-legend-feedback button:hover {
  border-color: rgba(63, 56, 50, 0.38);
  background: rgba(255, 255, 255, 0.94);
}

.character-legend-feedback button:focus-visible {
  outline: 3px solid rgba(36, 86, 147, 0.42);
  outline-offset: 2px;
}

html.theme-dark .dialogue-experimental-panel,
html.theme-dark .dialogue-learning-panel,
body.theme-dark .dialogue-experimental-panel,
body.theme-dark .dialogue-learning-panel {
  border-color: rgba(230, 232, 238, 0.13);
}

html.theme-dark .character-legend-feedback button,
body.theme-dark .character-legend-feedback button,
html.theme-dark .character-legend-speaker-options button,
body.theme-dark .character-legend-speaker-options button,
html.theme-dark .character-legend-feedback-editor-actions button,
body.theme-dark .character-legend-feedback-editor-actions button {
  border-color: rgba(230, 232, 238, 0.22);
  color: #f4f5f7;
  background: rgba(42, 44, 51, 0.96);
}

html.theme-dark .character-legend-feedback button:hover,
body.theme-dark .character-legend-feedback button:hover,
html.theme-dark .character-legend-speaker-options button:hover,
body.theme-dark .character-legend-speaker-options button:hover,
html.theme-dark .character-legend-feedback-editor-actions button:hover,
body.theme-dark .character-legend-feedback-editor-actions button:hover {
  border-color: rgba(230, 232, 238, 0.4);
  background: rgba(49, 52, 60, 0.98);
}

html.theme-dark .character-legend-feedback-editor,
body.theme-dark .character-legend-feedback-editor {
  border-top-color: rgba(230, 232, 238, 0.13);
}

html.theme-dark .character-legend-feedback-editor > label,
body.theme-dark .character-legend-feedback-editor > label {
  color: rgba(244, 245, 247, 0.94);
}

html.theme-dark .character-legend-feedback-editor > small,
body.theme-dark .character-legend-feedback-editor > small {
  color: rgba(202, 204, 211, 0.7);
}

html.theme-dark .character-legend-feedback-quote,
body.theme-dark .character-legend-feedback-quote {
  border-inline-start-color: rgba(83, 163, 143, 0.54);
  background: rgba(83, 163, 143, 0.1);
  color: rgba(244, 245, 247, 0.92);
}

html.theme-dark .character-legend-feedback-editor > input,
body.theme-dark .character-legend-feedback-editor > input {
  border-color: rgba(230, 232, 238, 0.2);
  background: rgba(30, 32, 38, 0.98);
  color: rgba(246, 247, 249, 0.96);
}

html.theme-dark
  .character-legend-feedback-editor-actions
  button[type="submit"],
body.theme-dark
  .character-legend-feedback-editor-actions
  button[type="submit"] {
  border-color: rgba(83, 163, 143, 0.32);
  background: rgba(56, 127, 109, 0.18);
  color: rgba(183, 228, 216, 0.96);
}

@media (max-width: 520px) {
  .dialogue-learning-actions {
    grid-template-columns: 1fr;
  }

  .character-legend-speaker-options {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-legend-feedback button {
    animation: none !important;
    transition: none !important;
  }
}

.dialogue-voice-review {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid rgba(38, 112, 93, 0.22);
  border-radius: 15px;
  background: rgba(240, 248, 244, 0.72);
  color: #352f2b;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .dialogue-voice-review {
  grid-column: 1 / -1;
  margin-block: 3px 6px;
}

.dialogue-voice-review-kicker {
  color: #26705d;
  font-size: 0.64rem;
  font-weight: 820;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.dialogue-voice-review > strong {
  font-size: 0.9rem;
  line-height: 1.25;
}

.dialogue-voice-review-location {
  justify-self: start;
  padding: 5px 8px;
  border: 1px solid rgba(38, 112, 93, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #26705d;
  font-size: 0.66rem;
  font-weight: 760;
  line-height: 1.2;
}

.dialogue-voice-review > small {
  color: rgba(63, 56, 50, 0.72);
  font-size: 0.69rem;
  line-height: 1.4;
}

.dialogue-voice-review-preview {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dialogue-voice-review-preview li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 7px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.dialogue-voice-review-preview li > span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 999px;
  background: rgba(38, 112, 93, 0.12);
  color: #26705d;
  font-size: 0.61rem;
  font-weight: 800;
}

.dialogue-voice-review-preview q {
  color: rgba(53, 47, 43, 0.9);
  font-size: 0.71rem;
  line-height: 1.42;
}

.dialogue-voice-review-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.dialogue-voice-review-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.dialogue-voice-review-actions button,
.dialogue-voice-review-navigation button,
.dialogue-voice-review-undo,
.dialogue-voice-review-browse {
  min-width: 0;
  min-height: 39px;
  padding: 7px 9px;
  border: 1px solid rgba(63, 56, 50, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.76);
  color: #352f2b;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 740;
  cursor: pointer;
}

.dialogue-voice-review-actions
  button[data-dialogue-voice-review-action="confirm"] {
  border-color: rgba(38, 112, 93, 0.3);
  background: rgba(38, 112, 93, 0.12);
  color: #1f5d4d;
}

.dialogue-voice-review-actions button:hover,
.dialogue-voice-review-actions button:focus-visible,
.dialogue-voice-review-navigation button:hover,
.dialogue-voice-review-navigation button:focus-visible,
.dialogue-voice-review-undo:hover,
.dialogue-voice-review-undo:focus-visible,
.dialogue-voice-review-browse:hover,
.dialogue-voice-review-browse:focus-visible {
  border-color: rgba(38, 112, 93, 0.48);
  outline: 0;
  background: rgba(255, 255, 255, 0.96);
}

.dialogue-voice-review-navigation
  button[data-dialogue-voice-review-action="jump"],
.dialogue-voice-review-browse {
  border-color: rgba(38, 112, 93, 0.3);
  background: rgba(38, 112, 93, 0.12);
  color: #1f5d4d;
}

.dialogue-voice-review-browse {
  justify-self: start;
  padding-inline: 12px;
}

.dialogue-voice-review-undo {
  justify-self: start;
  min-height: 34px;
  padding-inline: 10px;
  color: rgba(53, 47, 43, 0.74);
  background: transparent;
}

.dialogue-voice-review-progress {
  padding-top: 2px;
  border-top: 1px solid rgba(38, 112, 93, 0.13);
}

.dialogue-voice-review.is-editor
  .character-legend-feedback-editor {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

html.theme-dark .dialogue-voice-review,
body.theme-dark .dialogue-voice-review {
  border-color: rgba(83, 163, 143, 0.25);
  background: rgba(30, 32, 38, 0.96);
  color: rgba(246, 247, 249, 0.96);
}

html.theme-dark .dialogue-voice-review-kicker,
body.theme-dark .dialogue-voice-review-kicker {
  color: rgba(132, 205, 186, 0.94);
}

html.theme-dark .dialogue-voice-review-location,
body.theme-dark .dialogue-voice-review-location {
  border-color: rgba(83, 163, 143, 0.25);
  background: rgba(42, 44, 51, 0.94);
  color: rgba(183, 228, 216, 0.96);
}

html.theme-dark .dialogue-voice-review > small,
body.theme-dark .dialogue-voice-review > small {
  color: rgba(202, 204, 211, 0.74);
}

html.theme-dark .dialogue-voice-review-preview li,
body.theme-dark .dialogue-voice-review-preview li {
  background: rgba(42, 44, 51, 0.94);
}

html.theme-dark .dialogue-voice-review-preview li > span,
body.theme-dark .dialogue-voice-review-preview li > span {
  background: rgba(83, 163, 143, 0.16);
  color: rgba(183, 228, 216, 0.96);
}

html.theme-dark .dialogue-voice-review-preview q,
body.theme-dark .dialogue-voice-review-preview q {
  color: rgba(239, 240, 243, 0.9);
}

html.theme-dark .dialogue-voice-review-actions button,
body.theme-dark .dialogue-voice-review-actions button,
html.theme-dark .dialogue-voice-review-navigation button,
body.theme-dark .dialogue-voice-review-navigation button,
html.theme-dark .dialogue-voice-review-undo,
body.theme-dark .dialogue-voice-review-undo {
  border-color: rgba(230, 232, 238, 0.2);
  background: rgba(42, 44, 51, 0.96);
  color: rgba(244, 245, 247, 0.94);
}

html.theme-dark
  .dialogue-voice-review-actions
  button[data-dialogue-voice-review-action="confirm"],
body.theme-dark
  .dialogue-voice-review-actions
  button[data-dialogue-voice-review-action="confirm"] {
  border-color: rgba(83, 163, 143, 0.34);
  background: rgba(56, 127, 109, 0.2);
  color: rgba(183, 228, 216, 0.96);
}

html.theme-dark
  .dialogue-voice-review-navigation
  button[data-dialogue-voice-review-action="jump"],
body.theme-dark
  .dialogue-voice-review-navigation
  button[data-dialogue-voice-review-action="jump"],
html.theme-dark .dialogue-voice-review-browse,
body.theme-dark .dialogue-voice-review-browse {
  border-color: rgba(83, 163, 143, 0.34);
  background: rgba(56, 127, 109, 0.2);
  color: rgba(183, 228, 216, 0.96);
}

html.theme-dark .dialogue-voice-review-actions button:hover,
body.theme-dark .dialogue-voice-review-actions button:hover,
html.theme-dark .dialogue-voice-review-navigation button:hover,
body.theme-dark .dialogue-voice-review-navigation button:hover,
html.theme-dark .dialogue-voice-review-undo:hover,
body.theme-dark .dialogue-voice-review-undo:hover,
html.theme-dark .dialogue-voice-review-browse:hover,
body.theme-dark .dialogue-voice-review-browse:hover {
  border-color: rgba(230, 232, 238, 0.4);
  background: rgba(49, 52, 60, 0.98);
}

/*
 * Compact Who's Speaking legend
 * -----------------------------
 * A small translucent key over the page, using the same paper/graphite
 * material and quiet coral/teal accents as Home and Library.
 */
.character-legend-panel.is-compact-legend:not(.is-dialogue-editing),
html.theme-dark .character-legend-panel.is-compact-legend:not(.is-dialogue-editing),
body.theme-dark .character-legend-panel.is-compact-legend:not(.is-dialogue-editing) {
  padding: 0 !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
  will-change: opacity;
  animation: chapter-popup-backdrop-in 170ms ease-out both !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-sheet {
  position: fixed !important;
  top: max(66px, calc(env(safe-area-inset-top) + 54px)) !important;
  right: max(12px, calc(env(safe-area-inset-right) + 10px)) !important;
  bottom: auto !important;
  left: auto !important;
  width: min(368px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: min(390px, calc(100dvh - 144px)) !important;
  padding: 14px 14px 12px !important;
  border: 1px solid rgba(77, 65, 51, 0.14) !important;
  border-radius: 19px !important;
  gap: 9px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.42), transparent 44%),
    rgba(247, 243, 235, 0.82) !important;
  box-shadow:
    0 18px 42px rgba(38, 31, 24, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  transform: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(0.92) !important;
  backdrop-filter: blur(14px) saturate(0.92) !important;
  pointer-events: auto !important;
  will-change: opacity;
  animation: chapter-popup-sheet-in 210ms cubic-bezier(0.22, 0.78, 0.23, 1) both !important;
}

.character-legend-panel.is-compact-legend.is-closing:not(.is-dialogue-editing) {
  pointer-events: none !important;
  animation: chapter-popup-backdrop-in 170ms ease-in reverse both !important;
}

.character-legend-panel.is-compact-legend.is-closing:not(.is-dialogue-editing)
  .character-legend-sheet {
  pointer-events: none !important;
  animation: chapter-popup-sheet-in 210ms cubic-bezier(0.22, 0.78, 0.23, 1) reverse both !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-close {
  top: 9px !important;
  right: 9px !important;
  width: 27px !important;
  height: 27px !important;
  border: 1px solid rgba(77, 65, 51, 0.1) !important;
  border-radius: 50% !important;
  background: rgba(255, 252, 246, 0.38) !important;
  color: rgba(63, 57, 50, 0.58) !important;
  box-shadow: none !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-close::before,
.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-close::after {
  top: 12px !important;
  right: 7px !important;
  left: 7px !important;
  height: 1.5px !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header {
  min-width: 0;
  padding: 0 31px 9px 1px !important;
  border-bottom: 1px solid rgba(77, 65, 51, 0.1);
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header h2 {
  margin: 0 !important;
  color: rgba(35, 31, 27, 0.94) !important;
  font-family: var(--reading-font) !important;
  font-size: 1.18rem !important;
  font-weight: 560 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.05 !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header > small {
  display: block !important;
  width: auto !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(82, 74, 65, 0.62) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.64rem !important;
  font-weight: 620 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-list {
  min-height: 0 !important;
  padding: 0 3px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(var(--character-legend-columns, 2), minmax(0, 1fr)) !important;
  gap: 3px 11px !important;
  align-content: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-item {
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 7px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-columns: 19px minmax(0, 1fr) !important;
  gap: 7px !important;
  align-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-item + .character-legend-item {
  border-top: 0 !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-swatch {
  position: static !important;
  grid-row: auto !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  border: 1.5px solid rgba(255, 253, 248, 0.7) !important;
  border-radius: 50% !important;
  background: var(--character-dialogue-color, #5d978b) !important;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--character-dialogue-color, #5d978b) 28%, transparent) !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-swatch::after {
  content: none !important;
  display: none !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-name {
  min-width: 0;
  color: var(--character-dialogue-color, #5d978b) !important;
  font-family: var(--reading-font) !important;
  font-size: 1.14rem !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-debug,
.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-loading,
.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-empty {
  grid-column: 1 / -1 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(82, 74, 65, 0.68) !important;
  box-shadow: none !important;
  font-family: var(--ui-font) !important;
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-loading {
  display: flex !important;
  gap: 9px !important;
  align-items: center !important;
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-unnamed-action {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 5px 0 2px !important;
  padding: 9px 11px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border: 1px solid color-mix(in srgb, var(--line) 74%, transparent) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--dialogue-word-color) 5%, transparent) !important;
  color: var(--ink) !important;
  text-align: left !important;
  box-shadow: none !important;
}

.character-legend-unnamed-action > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.character-legend-unnamed-action strong {
  font: 650 0.78rem/1.2 var(--ui-font);
}

.character-legend-unnamed-action small {
  color: var(--muted);
  font: 500 0.67rem/1.25 var(--ui-font);
}

.character-legend-unnamed-action > b {
  min-width: 29px;
  min-height: 29px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dialogue-word-color) 12%, transparent);
  color: var(--dialogue-word-color);
  font: 700 0.7rem/1 var(--ui-font);
}

.character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-loading-spinner {
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
}

html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-sheet,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-sheet {
  border-color: rgba(235, 228, 217, 0.12) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(248, 239, 224, 0.07), transparent 44%),
    linear-gradient(145deg, rgba(33, 34, 39, 0.82), rgba(23, 24, 28, 0.78)) !important;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(248, 239, 224, 0.05) !important;
}

/* Supported reader: the legend is solid so page text never competes with it. */
body:not(.ebook-mode)
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-sheet {
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.42), transparent 44%),
    #f7f3eb !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.theme-dark
  body:not(.ebook-mode)
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-sheet,
body.theme-dark:not(.ebook-mode)
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-sheet {
  background:
    radial-gradient(circle at 14% 0%, rgba(248, 239, 224, 0.07), transparent 44%),
    linear-gradient(145deg, #212227, #17181c) !important;
}

html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-close,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-close {
  border-color: rgba(235, 228, 217, 0.1) !important;
  background: rgba(248, 239, 224, 0.035) !important;
  color: rgba(224, 219, 211, 0.64) !important;
}

html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header {
  border-bottom-color: rgba(235, 228, 217, 0.09) !important;
}

html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header h2,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header h2 {
  color: rgba(241, 237, 230, 0.94) !important;
}

html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header > small,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-header > small,
html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-loading,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-loading,
html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-empty,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-empty {
  color: rgba(190, 187, 181, 0.7) !important;
}

html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-item + .character-legend-item,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-item + .character-legend-item {
  border-top-color: rgba(235, 228, 217, 0.055) !important;
}

html.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-swatch,
body.theme-dark
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-swatch {
  border-color: rgba(18, 19, 22, 0.74) !important;
}

@media (max-width: 520px) {
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
    .character-legend-sheet {
    top: max(62px, calc(env(safe-area-inset-top) + 52px)) !important;
    right: max(10px, calc(env(safe-area-inset-right) + 8px)) !important;
    width: min(356px, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(372px, calc(100dvh - 132px)) !important;
    padding: 13px 13px 11px !important;
    border-radius: 18px !important;
  }
}

/* Keep the central RSVP word clear while the legend is open in Speed Mode. */
body:not(.ebook-mode):not(:has(#wordDisplay.has-context))
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
  .character-legend-sheet {
  max-height: max(
    118px,
    min(
      320px,
      calc(
        50dvh
        - max(66px, calc(env(safe-area-inset-top) + 54px))
        - 18px
      )
    )
  ) !important;
}

@media (orientation: landscape) and (max-height: 520px) {
  body:not(.ebook-mode):not(:has(#wordDisplay.has-context))
    .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
    .character-legend-sheet {
    width: min(274px, calc(100vw - 24px)) !important;
    max-height: min(178px, calc(100dvh - 84px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing),
  .character-legend-panel.is-compact-legend:not(.is-dialogue-editing)
    .character-legend-sheet {
    animation: none !important;
  }
}

/*
 * Chapter interstitial
 * --------------------
 * Centre the pause between chapters against the viewport rather than the
 * reader grid (whose header otherwise pushes it visibly low).
 */
body.has-loaded-text:not(.ebook-mode) .word-display.has-chapter-title {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding:
    max(88px, calc(env(safe-area-inset-top) + 72px))
    max(24px, env(safe-area-inset-right))
    max(112px, calc(env(safe-area-inset-bottom) + 94px))
    max(24px, env(safe-area-inset-left)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  white-space: normal !important;
  pointer-events: none !important;
}

body.has-loaded-text:not(.ebook-mode) .speed-chapter-card {
  width: min(100%, 520px) !important;
  display: grid !important;
  gap: clamp(9px, 1.35vh, 13px) !important;
  justify-items: center !important;
  padding: 0 clamp(8px, 4vw, 28px) !important;
  color: rgba(42, 38, 33, 0.82) !important;
  text-align: center !important;
}

body.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  color: rgba(190, 68, 57, 0.88) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.67rem, 2.25vw, 0.78rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

body.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker::before,
body.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker::after {
  content: "" !important;
  width: clamp(24px, 8vw, 46px) !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(190, 68, 57, 0.46)) !important;
}

body.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker::after {
  transform: scaleX(-1) !important;
}

body.has-loaded-text:not(.ebook-mode) .speed-chapter-card strong {
  max-width: min(100%, 15ch) !important;
  color: var(--ink) !important;
  font-family: var(--reading-font) !important;
  font-size: clamp(2.15rem, 9.2vw, 4.45rem) !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: -0.018em !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance !important;
}

body.has-loaded-text:not(.ebook-mode) .speed-chapter-card.is-long-title strong {
  max-width: min(100%, 17ch) !important;
  font-size: clamp(1.9rem, 7.9vw, 3.8rem) !important;
  line-height: 1.06 !important;
}

body.has-loaded-text:not(.ebook-mode) .speed-chapter-card.is-very-long-title strong {
  max-width: min(100%, 19ch) !important;
  font-size: clamp(1.68rem, 6.9vw, 3.2rem) !important;
  line-height: 1.08 !important;
}

body.has-loaded-text:not(.ebook-mode) .speed-chapter-card small {
  color: rgba(92, 86, 78, 0.68) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.7rem, 2.35vw, 0.82rem) !important;
  font-weight: 620 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .speed-chapter-card,
body.theme-dark.has-loaded-text:not(.ebook-mode) .speed-chapter-card {
  color: rgba(232, 226, 214, 0.82) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker,
body.theme-dark.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker {
  color: rgba(231, 103, 86, 0.92) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker::before,
html.theme-dark body.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker::after,
body.theme-dark.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker::before,
body.theme-dark.has-loaded-text:not(.ebook-mode) .speed-chapter-kicker::after {
  background: linear-gradient(90deg, transparent, rgba(231, 103, 86, 0.38)) !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode) .speed-chapter-card small,
body.theme-dark.has-loaded-text:not(.ebook-mode) .speed-chapter-card small {
  color: rgba(194, 190, 183, 0.66) !important;
}

@media (max-height: 720px) {
  body.has-loaded-text:not(.ebook-mode) .word-display.has-chapter-title {
    padding-top: max(76px, calc(env(safe-area-inset-top) + 62px)) !important;
    padding-bottom: max(86px, calc(env(safe-area-inset-bottom) + 70px)) !important;
  }

  body.has-loaded-text:not(.ebook-mode) .speed-chapter-card {
    gap: 8px !important;
  }
}

/*
 * Persistent Page ↔ Speed controls
 * --------------------------------
 * Home remains at one geographic coordinate. Play is the only persistent
 * control that changes size; its shared DOM node is morphed by WAAPI.
 */
body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .controls
  > #textPanelButton.bottom-home-button,
body.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .controls
  > #textPanelButton.bottom-home-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press
  ) {
  position: fixed !important;
  left: var(
    --reader-collapsed-home-center-x,
    max(45px, calc(env(safe-area-inset-left) + 45px))
  ) !important;
  right: auto !important;
  top: auto !important;
  bottom: var(
    --reader-collapsed-home-center-bottom,
    max(57px, calc(env(safe-area-inset-bottom) + 47px))
  ) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  transform: translate(-50%, 50%) !important;
  pointer-events: auto !important;
  transition: none !important;
}

/*
 * Page view keeps a quiet but deliberately horizontal play affordance. The
 * wider silhouette reads as a miniature transport control rather than a
 * floating square.
 */
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ),
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button,
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px)) !important;
  z-index: 1202 !important;
  display: grid !important;
  place-items: center !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 0.46 !important;
  transform: translateX(-50%) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  filter: none !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button
  .play-symbol,
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock.is-collapsed
  #playButton.play-control-button
  .play-symbol {
  width: 16px !important;
  height: 16px !important;
}

/*
 * Never animate the controls container: doing so momentarily hides Home and
 * compounds the play-button morph. Speed's instruments arrive independently.
 */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .controls,
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .controls {
  animation: none !important;
  filter: none !important;
  translate: none !important;
}

@keyframes reader-speed-instruments-drop {
  0% {
    filter: opacity(1);
  }

  100% {
    filter: opacity(0);
  }
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .slider-row {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  animation:
    reader-speed-instruments-drop
    165ms
    cubic-bezier(0.4, 0, 1, 1)
    both !important;
}

body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  > .progress-wrap {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none !important;
  animation:
    reader-speed-instruments-drop
    165ms
    12ms
    cubic-bezier(0.4, 0, 1, 1)
    both !important;
}

@media (prefers-reduced-motion: reduce) {
  body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
    .reader-panel
    #readerBottomDock
    > :is(.slider-row, .progress-wrap) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

/*
 * Chapter optical centre
 * ----------------------
 * The rings formerly used the remaining stage while the glow/card used the
 * viewport. Give every layer one fixed anchor so their centres cannot drift.
 */
body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-chapter-title) {
  --chapter-optical-center-y: 47dvh;
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-chapter-title)
  .focus-stage::before {
  position: fixed !important;
  left: 50% !important;
  top: var(--chapter-optical-center-y) !important;
  transform: translate(-50%, -50%) !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title::before {
  left: 50% !important;
  top: var(--chapter-optical-center-y) !important;
  transform: translate(-50%, -50%) !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-card {
  position: fixed !important;
  left: 50% !important;
  top: var(--chapter-optical-center-y) !important;
  width: min(calc(100vw - 48px), 520px) !important;
  transform: translate(-50%, -50%) !important;
}

/*
 * Atlas-first topic destinations
 * ------------------------------
 * Topics now use the Knowledge Atlas as their primary reading surface. The
 * surrounding editorial modules stay quiet so the map, titles, and speaker-
 * palette accents carry the hierarchy.
 */
.topic-discovery-content:has(.topic-atlas-first) {
  width: min(1120px, 100%) !important;
  max-width: none !important;
  padding:
    calc(72px + env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(54px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left)) !important;
}

.topic-atlas-first {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: clamp(28px, 5vw, 52px);
}

.topic-atlas-first-hero {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(10px, 2vw, 24px) clamp(4px, 1.4vw, 16px) 0;
}

.topic-atlas-first-hero > div:first-child {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.topic-atlas-first-hero p,
.topic-editorial-reading > header p,
.topic-signature-section > header p,
.topic-atlas-first-footer p {
  margin: 0;
  color: color-mix(in srgb, var(--topic-color) 72%, var(--topic-dossier-accent));
  font: 780 0.64rem/1.15 var(--ui-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.topic-atlas-first-hero h2 {
  max-width: 15ch;
  margin: 0;
  color: var(--topic-dossier-text);
  font: 470 clamp(3.25rem, 8vw, 6.8rem)/0.88 var(--reading-font);
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.topic-atlas-first-hero > div:first-child > span {
  max-width: 48ch;
  color: var(--topic-dossier-muted);
  font: 500 clamp(0.86rem, 1.5vw, 1.02rem)/1.48 var(--ui-font);
}

.topic-atlas-first-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding-bottom: 5px;
}

.topic-atlas-first-actions .topic-follow-button,
.topic-atlas-first-actions > button:last-child {
  position: static !important;
  inset: auto !important;
  min-height: 42px;
  margin: 0;
  border: 1px solid var(--topic-dossier-line);
  background: color-mix(in srgb, var(--topic-dossier-surface) 82%, transparent);
  color: var(--topic-dossier-text);
  box-shadow: none;
}

.topic-atlas-first-actions .topic-follow-button {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.topic-atlas-first-actions > button:last-child {
  padding: 0 16px;
  border-radius: 999px;
  font: 690 0.68rem/1 var(--ui-font);
}

.topic-atlas-first-actions :is(button:hover, button:focus-visible) {
  border-color: color-mix(in srgb, var(--topic-color) 38%, var(--topic-dossier-line));
  color: var(--topic-dossier-accent);
}

.topic-atlas-first-actions button:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

.topic-editorial-reading,
.topic-signature-section {
  min-width: 0;
  display: grid;
  gap: 15px;
}

.topic-editorial-reading > header,
.topic-signature-section > header,
.topic-atlas-first-footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding-inline: clamp(3px, 1.2vw, 12px);
}

.topic-editorial-reading > header > div,
.topic-signature-section > header {
  min-width: 0;
}

.topic-editorial-reading > header h3,
.topic-signature-section > header h3,
.topic-atlas-first-footer h3 {
  margin: 4px 0 0;
  color: var(--topic-dossier-text);
  font: 520 clamp(1.8rem, 4vw, 3rem)/0.98 var(--reading-font);
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.topic-editorial-reading > header > span,
.topic-signature-section > header > span {
  color: var(--topic-dossier-muted);
  font: 600 0.68rem/1.3 var(--ui-font);
}

.topic-signature-section > header {
  display: grid;
  justify-content: start;
  gap: 0;
}

.topic-signature-section > header > span {
  margin-top: 8px;
}

.topic-editorial-reading-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
}

.topic-editorial-reading-grid > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.topic-editorial-read {
  --read-color: rgb(36, 86, 147);
  position: relative;
  min-width: 0;
  min-height: 96px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 11px 13px 11px 11px;
  border: 1px solid color-mix(in srgb, var(--read-color) 24%, var(--topic-dossier-line));
  border-radius: 19px;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--read-color) 9%, transparent), transparent 42%),
    color-mix(in srgb, var(--topic-dossier-surface) 92%, transparent);
  color: var(--topic-dossier-text);
  text-align: left;
  box-shadow: var(--topic-dossier-shadow);
}

.topic-editorial-read[data-read-stage="orient"] { --read-color: rgb(36, 86, 147); }
.topic-editorial-read[data-read-stage="ground"] { --read-color: rgb(112, 68, 18); }
.topic-editorial-read[data-read-stage="evidence"] { --read-color: rgb(38, 100, 92); }
.topic-editorial-read[data-read-stage="connect"] { --read-color: rgb(90, 55, 135); }

.topic-editorial-read.is-featured {
  min-height: 302px;
  grid-template-columns: minmax(150px, 0.72fr) minmax(0, 1.28fr) auto;
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(16px, 2.3vw, 24px);
  border-radius: 26px;
}

.topic-editorial-read-art {
  width: 72px;
  aspect-ratio: 0.78;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--read-color) 34%, var(--topic-dossier-line));
  border-radius: 11px;
  overflow: hidden;
  background:
    radial-gradient(circle at 38% 20%, color-mix(in srgb, var(--read-color) 18%, transparent), transparent 52%),
    var(--topic-dossier-surface-soft);
  color: color-mix(in srgb, var(--read-color) 74%, var(--topic-dossier-text));
  font: 560 1.25rem/1 var(--reading-font);
}

.topic-editorial-read.is-featured .topic-editorial-read-art {
  width: 100%;
  max-width: 190px;
  aspect-ratio: 0.72;
  justify-self: center;
  border-radius: 15px;
}

.topic-editorial-read-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.topic-editorial-read-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
}

.topic-editorial-read-copy small {
  color: color-mix(in srgb, var(--read-color) 82%, var(--topic-dossier-text));
  font: 780 0.57rem/1 var(--ui-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.topic-editorial-read-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--topic-dossier-text);
  font: 550 1rem/1.1 var(--reading-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.topic-editorial-read.is-featured .topic-editorial-read-copy strong {
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  -webkit-line-clamp: 3;
}

.topic-editorial-read-copy em {
  display: -webkit-box;
  overflow: hidden;
  color: var(--topic-dossier-muted);
  font: 500 0.78rem/1.42 var(--ui-font);
  font-style: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.topic-editorial-read-copy > span {
  overflow: hidden;
  color: var(--topic-dossier-muted);
  font: 590 0.61rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-editorial-read > i {
  color: color-mix(in srgb, var(--read-color) 78%, var(--topic-dossier-text));
  font: 500 1rem/1 var(--ui-font);
  font-style: normal;
}

.topic-signature-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.topic-signature-grid > button {
  --signature-color: var(--signature-color-light, var(--topic-color));
  min-width: 0;
  min-height: 184px;
  padding: 16px 14px;
  border: 1px solid color-mix(in srgb, var(--signature-color) 26%, var(--topic-dossier-line));
  border-radius: 20px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  justify-items: start;
  gap: 7px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--signature-color) 11%, transparent), transparent 49%),
    color-mix(in srgb, var(--topic-dossier-surface) 91%, transparent);
  color: var(--topic-dossier-text);
  text-align: left;
  box-shadow: var(--topic-dossier-shadow);
}

.topic-signature-grid > button > span {
  width: 42px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--signature-color) 42%, var(--topic-dossier-line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--signature-color) 8%, var(--topic-dossier-surface));
  color: color-mix(in srgb, var(--signature-color) 78%, var(--topic-dossier-text));
  font: 620 0.78rem/1 var(--reading-font);
}

.topic-signature-grid > button small {
  color: color-mix(in srgb, var(--signature-color) 76%, var(--topic-dossier-text));
  font: 760 0.53rem/1 var(--ui-font);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.topic-signature-grid > button strong {
  display: -webkit-box;
  overflow: hidden;
  font: 560 1rem/1.08 var(--reading-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.topic-signature-grid > button em {
  display: -webkit-box;
  align-self: end;
  overflow: hidden;
  color: var(--topic-dossier-muted);
  font: 500 0.65rem/1.34 var(--ui-font);
  font-style: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.topic-signature-section.is-history .topic-signature-grid > button {
  border-top-color: color-mix(in srgb, var(--signature-color) 58%, var(--topic-dossier-line));
}

.topic-signature-section.is-technology .topic-signature-grid,
.topic-signature-section.is-history .topic-signature-grid {
  counter-reset: topic-signature;
}

.topic-signature-section:is(.is-technology, .is-history) .topic-signature-grid > button {
  counter-increment: topic-signature;
}

.topic-signature-section:is(.is-technology, .is-history) .topic-signature-grid > button::after {
  content: "0" counter(topic-signature);
  position: absolute;
  opacity: 0;
}

.topic-atlas-first .topic-discovery-section:has(.topic-research-list) {
  margin: 0;
}

.topic-atlas-first-footer {
  min-height: 118px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid color-mix(in srgb, var(--topic-color) 22%, var(--topic-dossier-line));
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 30%, color-mix(in srgb, var(--topic-color) 9%, transparent), transparent 38%),
    color-mix(in srgb, var(--topic-dossier-surface) 89%, transparent);
}

.topic-atlas-first-footer h3 {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.topic-atlas-first-footer > button {
  min-height: 43px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--topic-color) 34%, var(--topic-dossier-line));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--topic-color) 8%, var(--topic-dossier-surface));
  color: var(--topic-dossier-text);
  font: 690 0.69rem/1 var(--ui-font);
}

.topic-atlas-first :is(.topic-editorial-read, .topic-signature-grid > button, .topic-atlas-first-footer > button):is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

.topic-atlas-first :is(button, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--topic-color) 52%, transparent);
  outline-offset: 3px;
}

html.theme-dark .topic-signature-grid > button,
body.theme-dark .topic-signature-grid > button {
  --signature-color: var(--signature-color-dark, var(--topic-color));
}

html.theme-dark .topic-editorial-read,
body.theme-dark .topic-editorial-read {
  border-color: color-mix(in srgb, var(--read-color) 30%, rgba(202, 210, 229, 0.12));
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--read-color) 12%, transparent), transparent 42%),
    linear-gradient(145deg, rgba(27, 30, 42, 0.86), rgba(16, 18, 27, 0.9));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

html.theme-dark .topic-editorial-read[data-read-stage="orient"],
body.theme-dark .topic-editorial-read[data-read-stage="orient"] { --read-color: rgb(132, 207, 255); }
html.theme-dark .topic-editorial-read[data-read-stage="ground"],
body.theme-dark .topic-editorial-read[data-read-stage="ground"] { --read-color: rgb(255, 212, 118); }
html.theme-dark .topic-editorial-read[data-read-stage="evidence"],
body.theme-dark .topic-editorial-read[data-read-stage="evidence"] { --read-color: rgb(112, 235, 220); }
html.theme-dark .topic-editorial-read[data-read-stage="connect"],
body.theme-dark .topic-editorial-read[data-read-stage="connect"] { --read-color: rgb(207, 184, 255); }

html.theme-dark .topic-signature-grid > button,
body.theme-dark .topic-signature-grid > button,
html.theme-dark .topic-atlas-first-footer,
body.theme-dark .topic-atlas-first-footer {
  border-color: color-mix(in srgb, var(--signature-color, var(--topic-color)) 25%, rgba(202, 210, 229, 0.12));
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--signature-color, var(--topic-color)) 10%, transparent), transparent 48%),
    linear-gradient(145deg, rgba(27, 30, 42, 0.82), rgba(15, 18, 27, 0.86));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

/* Person dossiers share the richer timeline/works template, but keep their
   secondary labels subordinate to names, works, and dates. */

@media (max-width: 820px) {
  .topic-discovery-content:has(.topic-atlas-first) {
    padding-right: max(13px, env(safe-area-inset-right)) !important;
    padding-left: max(13px, env(safe-area-inset-left)) !important;
  }

  .topic-atlas-first {
    gap: 31px;
  }

  .topic-atlas-first-hero {
    align-items: start;
    padding-inline: 4px;
  }

  .topic-atlas-first-hero h2 {
    font-size: clamp(3.15rem, 13vw, 5.3rem);
  }

  .topic-atlas-first-hero > div:first-child > span {
    max-width: 38ch;
  }

  .topic-atlas-first-actions > button:last-child {
    width: 42px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
  }

  .topic-atlas-first-actions > button:last-child::before {
    content: "↗";
    color: var(--topic-dossier-text);
    font: 650 0.9rem/1 var(--ui-font);
  }

  
  
  
  
  
  
  .topic-editorial-reading-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .topic-editorial-read.is-featured {
    min-height: 248px;
  }

  .topic-signature-grid {
    grid-auto-columns: minmax(154px, 42vw);
    grid-template-columns: none;
    grid-auto-flow: column;
    overflow-x: auto;
    padding: 1px 3px 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .topic-signature-grid::-webkit-scrollbar { display: none; }
  .topic-signature-grid > button { scroll-snap-align: start; }
}

@media (max-width: 520px) {
  .topic-atlas-first-hero {
    gap: 12px;
  }

  .topic-atlas-first-hero h2 {
    font-size: clamp(2.8rem, 15vw, 4.35rem);
  }

  .topic-atlas-first-hero > div:first-child > span {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .topic-atlas-first-actions {
    gap: 6px;
  }

  .topic-atlas-first-actions .topic-follow-button,
  .topic-atlas-first-actions > button:last-child {
    width: 38px;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    flex-basis: 38px;
  }

  
  
  
  
  
  
  
  .topic-editorial-reading > header,
  .topic-signature-section > header {
    padding-inline: 3px;
  }

  .topic-editorial-reading > header h3,
  .topic-signature-section > header h3 {
    font-size: 1.72rem;
  }

  .topic-editorial-read.is-featured {
    min-height: 218px;
    grid-template-columns: 90px minmax(0, 1fr) auto;
    gap: 13px;
    padding: 13px;
    border-radius: 21px;
  }

  .topic-editorial-read.is-featured .topic-editorial-read-art {
    width: 90px;
  }

  .topic-editorial-read.is-featured .topic-editorial-read-copy strong {
    font-size: 1.35rem;
  }

  .topic-editorial-read-copy em {
    display: none;
  }

  .topic-editorial-read:not(.is-featured) {
    grid-template-columns: 58px minmax(0, 1fr) auto;
    min-height: 82px;
  }

  .topic-editorial-read:not(.is-featured) .topic-editorial-read-art {
    width: 58px;
  }

  .topic-signature-grid {
    grid-auto-columns: minmax(145px, 45vw);
  }

  .topic-signature-grid > button {
    min-height: 166px;
  }

  .topic-atlas-first-footer {
    min-height: 0;
    align-items: start;
    flex-direction: column;
  }

  .topic-atlas-first-footer > button {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  .topic-atlas-first *,
  .topic-atlas-first *::before,
  .topic-atlas-first *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

/*
 * Atlas-first art direction v2
 * ----------------------------
 * A quieter editorial frame, semantic Atlas colour, and topic-family
 * compositions that do not all resolve into the same row of cards.
 */
.topic-atlas-first {
  --topic-atmosphere-a: 132, 207, 255;
  --topic-atmosphere-b: 207, 184, 255;
  position: relative;
  isolation: isolate;
}

.topic-atlas-first[data-topic-variant="nature"] {
  --topic-atmosphere-a: 112, 235, 220;
  --topic-atmosphere-b: 121, 188, 126;
}

.topic-atlas-first[data-topic-variant="literature"] {
  --topic-atmosphere-a: 207, 184, 255;
  --topic-atmosphere-b: 255, 212, 118;
}

.topic-atlas-first[data-topic-variant="history"] {
  --topic-atmosphere-a: 255, 154, 139;
  --topic-atmosphere-b: 255, 212, 118;
}

.topic-atlas-first[data-topic-variant="technology"] {
  --topic-atmosphere-a: 132, 207, 255;
  --topic-atmosphere-b: 112, 235, 220;
}

.topic-atlas-first::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -8rem;
  right: -10vw;
  left: -10vw;
  height: 43rem;
  pointer-events: none;
  opacity: 0.64;
  background:
    radial-gradient(circle at 20% 12%, rgba(var(--topic-atmosphere-a), 0.12), transparent 27%),
    radial-gradient(circle at 74% 18%, rgba(var(--topic-atmosphere-b), 0.095), transparent 25%);
  mask-image: linear-gradient(to bottom, #000 0 54%, transparent 100%);
}

.topic-atlas-first[data-topic-variant="technology"]::before {
  background:
    linear-gradient(rgba(var(--topic-atmosphere-a), 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--topic-atmosphere-a), 0.028) 1px, transparent 1px),
    radial-gradient(circle at 22% 10%, rgba(var(--topic-atmosphere-a), 0.14), transparent 27%),
    radial-gradient(circle at 76% 18%, rgba(var(--topic-atmosphere-b), 0.1), transparent 24%);
  background-size: 42px 42px, 42px 42px, auto, auto;
}

.topic-atlas-first[data-topic-variant="history"]::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(var(--topic-atmosphere-b), 0.027) 31px 32px),
    radial-gradient(circle at 18% 8%, rgba(var(--topic-atmosphere-a), 0.13), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(var(--topic-atmosphere-b), 0.08), transparent 25%);
}

.topic-atlas-first-hero {
  min-height: clamp(185px, 24vw, 260px);
  align-items: center;
  padding-top: clamp(18px, 3vw, 34px);
}

.topic-atlas-first-hero > div:first-child {
  flex: 1 1 auto;
}

.topic-atlas-first-hero h2 {
  max-width: 16ch;
  font-size: clamp(3rem, 7vw, 5.9rem);
  line-height: 0.91;
}

.topic-atlas-first-hero > div:first-child > span {
  max-width: 45ch;
}

.topic-atlas-first-hero-mark {
  position: relative;
  width: clamp(68px, 8vw, 92px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--topic-atmosphere-a), 0.26);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(var(--topic-atmosphere-a), 0.16), transparent 48%),
    color-mix(in srgb, var(--topic-dossier-surface) 58%, transparent);
  box-shadow:
    0 0 0 12px rgba(var(--topic-atmosphere-b), 0.025),
    inset 0 1px rgba(255, 255, 255, 0.035);
}

.topic-atlas-first-hero-mark::before,
.topic-atlas-first-hero-mark::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--topic-atmosphere-b), 0.16);
  border-radius: 50%;
}

.topic-atlas-first-hero-mark::before { inset: 12%; }
.topic-atlas-first-hero-mark::after { inset: -16%; border-style: dashed; opacity: 0.42; }

.topic-atlas-first-hero-mark b {
  color: rgba(var(--topic-atmosphere-a), 0.92);
  font: 520 clamp(1rem, 2vw, 1.45rem)/1 var(--reading-font);
  letter-spacing: -0.035em;
}

.topic-atlas-first-hero-mark i {
  position: absolute;
  bottom: -21px;
  color: color-mix(in srgb, var(--topic-dossier-muted) 86%, transparent);
  font: 720 0.48rem/1 var(--ui-font);
  font-style: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.knowledge-atlas.is-topic-embedded .knowledge-atlas-stage line:is([data-relation-type="historical"], [data-relation-type="biographical"]) {
  stroke-dasharray: 2.3 0.9;
}

.knowledge-atlas.is-topic-embedded .knowledge-atlas-node:is(:hover, :focus-visible) > span {
  border-color: color-mix(in srgb, var(--node-color) 84%, rgba(255, 255, 255, 0.2));
  background:
    radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--node-color) 24%, transparent), transparent 58%),
    color-mix(in srgb, var(--node-color) 13%, rgba(13, 16, 24, 0.97));
}

.topic-editorial-reading,
.topic-signature-section {
  gap: 20px;
}

.topic-editorial-reading::before,
.topic-signature-section::before {
  content: "";
  width: clamp(46px, 7vw, 82px);
  height: 2px;
  margin-left: clamp(3px, 1.2vw, 12px);
  background: linear-gradient(90deg, rgba(var(--topic-atmosphere-a), 0.86), rgba(var(--topic-atmosphere-b), 0.12));
}

.topic-editorial-reading-grid {
  grid-template-columns: minmax(0, 1.34fr) minmax(280px, 0.66fr);
  gap: clamp(20px, 3.4vw, 40px);
  align-items: stretch;
}

.topic-editorial-reading-grid > div {
  gap: 0;
  align-content: center;
}

.topic-editorial-read:not(.is-featured) {
  min-height: 102px;
  padding: 13px 4px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--read-color) 23%, var(--topic-dossier-line));
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.topic-editorial-read:not(.is-featured):last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--read-color) 18%, var(--topic-dossier-line));
}

.topic-editorial-read.is-featured {
  min-height: 318px;
  border: 0;
  overflow: visible;
  background:
    radial-gradient(circle at 7% 70%, color-mix(in srgb, var(--read-color) 13%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--topic-dossier-surface) 86%, transparent), color-mix(in srgb, var(--topic-dossier-surface-soft) 62%, transparent));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 26px 62px color-mix(in srgb, var(--read-color) 8%, transparent);
}

.topic-editorial-read.is-featured .topic-editorial-read-art {
  margin-block: -14px;
  border: 0;
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.27),
    0 0 0 1px color-mix(in srgb, var(--read-color) 28%, rgba(255, 255, 255, 0.08));
}

.topic-editorial-read:not(.is-featured) .topic-editorial-read-art {
  border: 0;
  background: color-mix(in srgb, var(--read-color) 7%, var(--topic-dossier-surface-soft));
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.13);
}

html.theme-dark .topic-editorial-read:not(.is-featured),
body.theme-dark .topic-editorial-read:not(.is-featured) {
  background: transparent;
  box-shadow: none;
}

.topic-signature-grid > button {
  position: relative;
  border: 0;
  border-top: 2px solid color-mix(in srgb, var(--signature-color) 62%, var(--topic-dossier-line));
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--signature-color) 8%, transparent), transparent 56%),
    color-mix(in srgb, var(--topic-dossier-surface) 54%, transparent);
  box-shadow: none;
}

html.theme-dark .topic-signature-grid > button,
body.theme-dark .topic-signature-grid > button {
  border-color: color-mix(in srgb, var(--signature-color) 58%, rgba(202, 210, 229, 0.12));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--signature-color) 10%, transparent), transparent 58%),
    rgba(20, 23, 32, 0.44);
  box-shadow: none;
}

.topic-signature-grid > button > span {
  border-width: 1.5px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--signature-color) 9%, transparent);
}

.topic-signature-section.is-literature .topic-signature-grid {
  grid-template-columns: minmax(180px, 1.35fr) repeat(4, minmax(0, 1fr));
  align-items: end;
}

.topic-signature-section.is-literature .topic-signature-grid > button:first-child {
  min-height: 232px;
  border-radius: 0 24px 24px 0;
}

.topic-signature-section.is-literature .topic-signature-grid > button:first-child > span {
  width: 62px;
  border-radius: 13px;
}

.topic-signature-section.is-nature .topic-signature-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.topic-signature-section.is-nature .topic-signature-grid > button:nth-child(-n + 2) {
  min-height: 205px;
  grid-column: span 3;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: 15px;
}

.topic-signature-section.is-nature .topic-signature-grid > button:nth-child(-n + 2) > span {
  grid-row: 1 / 4;
  width: 62px;
}

.topic-signature-section.is-nature .topic-signature-grid > button:nth-child(n + 3) {
  grid-column: span 2;
  min-height: 156px;
}

.topic-signature-section.is-history .topic-signature-grid {
  position: relative;
  gap: 0;
  padding-top: 34px;
}

.topic-signature-section.is-history .topic-signature-grid::before {
  content: "";
  position: absolute;
  top: 10px;
  right: 4%;
  left: 4%;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--topic-atmosphere-a), 0.25), rgba(var(--topic-atmosphere-b), 0.66), rgba(var(--topic-atmosphere-a), 0.2));
}

.topic-signature-section.is-history .topic-signature-grid > button {
  min-height: 172px;
  padding-top: 20px;
  border-top-width: 1px;
  border-radius: 0;
  background: transparent;
}

.topic-signature-section.is-history .topic-signature-grid > button::before {
  content: "0" counter(topic-signature);
  position: absolute;
  top: -31px;
  left: 15px;
  color: color-mix(in srgb, var(--signature-color) 76%, var(--topic-dossier-text));
  font: 760 0.56rem/1 var(--ui-font);
  letter-spacing: 0.08em;
}

.topic-signature-section.is-history .topic-signature-grid > button::after {
  content: "";
  top: -28px;
  left: 14px;
  width: 8px;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--signature-color) 76%, var(--topic-dossier-surface));
  border-radius: 50%;
  background: var(--topic-dossier-surface);
  opacity: 1;
  transform: translateY(17px);
}

.topic-signature-section.is-technology .topic-signature-grid > button {
  min-height: 170px;
  border-top-width: 1px;
  border-left: 2px solid color-mix(in srgb, var(--signature-color) 54%, var(--topic-dossier-line));
  border-radius: 0 18px 18px 0;
}

.topic-signature-section.is-technology .topic-signature-grid > button:nth-child(even) {
  margin-top: 24px;
}

.topic-signature-section.is-technology .topic-signature-grid > button::after {
  content: "0" counter(topic-signature);
  top: 14px;
  right: 14px;
  color: color-mix(in srgb, var(--signature-color) 48%, var(--topic-dossier-muted));
  font: 720 0.52rem/1 var(--ui-font);
  opacity: 1;
}

.topic-atlas-first-footer {
  border-width: 0 0 0 2px;
  border-radius: 0 24px 24px 0;
  box-shadow: none;
}

html.theme-dark .topic-atlas-first-footer,
body.theme-dark .topic-atlas-first-footer {
  box-shadow: none;
}

@media (max-width: 820px) {
  .topic-atlas-first-hero {
    min-height: 160px;
  }

  .topic-atlas-first-hero h2 {
    font-size: clamp(2.95rem, 12vw, 4.75rem);
  }

  .topic-atlas-first-hero-mark {
    width: 58px;
  }

  .topic-atlas-first-hero-mark i {
    display: none;
  }

  .topic-editorial-reading-grid {
    gap: 12px;
  }

  .topic-editorial-read:not(.is-featured) {
    padding-inline: 7px;
  }

  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid {
    grid-auto-columns: minmax(154px, 42vw);
    grid-template-columns: none;
    grid-auto-flow: column;
    align-items: stretch;
    gap: 9px;
    padding-top: 1px;
  }

  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid::before {
    display: none;
  }

  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button,
  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button:first-child,
  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button:nth-child(-n + 2),
  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button:nth-child(n + 3) {
    min-height: 172px;
    grid-column: auto;
    display: grid;
    grid-template-columns: none;
    grid-template-rows: auto auto auto 1fr;
    margin-top: 0;
    padding: 16px 14px;
    border: 0;
    border-top: 2px solid color-mix(in srgb, var(--signature-color) 58%, var(--topic-dossier-line));
    border-radius: 0 0 18px 18px;
  }

  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button > span,
  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button:first-child > span,
  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button:nth-child(-n + 2) > span {
    width: 42px;
    grid-row: auto;
    border-radius: 50%;
  }

  .topic-signature-section:is(.is-history, .is-technology) .topic-signature-grid > button::before,
  .topic-signature-section:is(.is-history, .is-technology) .topic-signature-grid > button::after {
    display: none;
  }
}

@media (max-width: 560px) {
  .topic-atlas-first-hero-mark {
    display: none;
  }

  
  
  .topic-editorial-read.is-featured .topic-editorial-read-art {
    margin-block: -7px;
  }
}

/*
 * Reader title hierarchy and dedicated Chapters action
 * ----------------------------------------------------
 * The title is informational, not a hidden navigation target. It is allowed
 * to wrap in its own centre column while Chapters remains explicit and
 * reachable in the lower-right corner in both reading modes.
 */
.reader-panel > .top-bar > .reader-title-display,
.ebook-reader > .ebook-top-bar > .reader-title-display {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  width: min(100%, 760px) !important;
  max-width: calc(100vw - 116px) !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 3px 4px 15px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--reader-header-title-color, rgba(33, 29, 24, 0.9)) !important;
  text-align: center !important;
  transform: none !important;
  pointer-events: none !important;
}

/* Page Mode top-bar idle fade; the dock's matching fade lives in reader-controls.css. */
body.reader-context-mode .reader-panel > .top-bar {
  transition: opacity 160ms ease-out !important;
}

body.reader-context-mode:where(.is-page-chrome-idle) .reader-panel > .top-bar {
  opacity: 0.18 !important;
  transition: opacity 800ms ease-in-out !important;
}

@media (prefers-reduced-motion: reduce) {
  body.reader-context-mode .reader-panel > .top-bar {
    transition: none !important;
  }
}

.reader-panel > .top-bar > .reader-title-display.is-chapter-interstitial-trigger {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.reader-panel > .top-bar > .reader-title-display.is-chapter-interstitial-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 4px;
}

.reader-panel > .top-bar > .reader-title-display > span,
.ebook-reader > .ebook-top-bar > .reader-title-display > span {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  color: inherit !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(1rem, 2.9vw, 1.28rem) !important;
  font-style: normal !important;
  font-weight: 620 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.006em !important;
  text-align: center !important;
  text-wrap: balance;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.reader-panel > .top-bar > .reader-title-display > small,
.ebook-reader > .ebook-top-bar > .reader-title-display > small {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: visible !important;
  color: var(--reader-header-meta-color, rgba(86, 78, 69, 0.68)) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.7rem, 2.15vw, 0.82rem) !important;
  font-style: normal !important;
  font-weight: 620 !important;
  line-height: 1.22 !important;
  letter-spacing: 0.035em !important;
  text-align: center !important;
  text-wrap: balance;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.reader-panel > .top-bar > .reader-title-display > small[hidden],
.ebook-reader > .ebook-top-bar > .reader-title-display > small[hidden] {
  display: none !important;
}

.reader-panel > .top-bar > .reader-title-display::after,
.ebook-reader > .ebook-top-bar > .reader-title-display::after,
.reader-panel > .top-bar > .reader-title-display > small::after,
.ebook-reader > .ebook-top-bar > .reader-title-display > small::after {
  content: none !important;
  display: none !important;
}

html.theme-dark .reader-panel > .top-bar > .reader-title-display,
body.theme-dark .reader-panel > .top-bar > .reader-title-display,
html.theme-dark .ebook-reader > .ebook-top-bar > .reader-title-display,
body.theme-dark .ebook-reader > .ebook-top-bar > .reader-title-display {
  color: rgba(241, 238, 232, 0.92) !important;
}

html.theme-dark .reader-panel > .top-bar > .reader-title-display > small,
body.theme-dark .reader-panel > .top-bar > .reader-title-display > small,
html.theme-dark .ebook-reader > .ebook-top-bar > .reader-title-display > small,
body.theme-dark .ebook-reader > .ebook-top-bar > .reader-title-display > small {
  color: rgba(198, 201, 208, 0.68) !important;
}

#speedChaptersButton.chapters-dock-button,
#ebookChaptersButton.chapters-dock-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: fixed !important;
  right: max(18px, calc(env(safe-area-inset-right) + 18px)) !important;
  bottom: max(29px, calc(env(safe-area-inset-bottom) + 19px)) !important;
  left: auto !important;
  top: auto !important;
  z-index: 1204 !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: rgba(58, 50, 41, 0.84) !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition:
    color 180ms ease,
    opacity 180ms ease !important;
  pointer-events: auto !important;
  -webkit-tap-highlight-color: transparent !important;
}

#speedChaptersButton .chapters-dock-symbol,
#ebookChaptersButton .chapters-dock-symbol {
  width: 27px !important;
  height: 27px !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 0.92 !important;
}

#speedChaptersButton.chapters-dock-button:is(:hover, :focus-visible),
#ebookChaptersButton.chapters-dock-button:is(:hover, :focus-visible),
#speedChaptersButton.chapters-dock-button[aria-expanded="true"],
#ebookChaptersButton.chapters-dock-button[aria-expanded="true"] {
  border: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--rhythm-coral) 82%, rgba(48, 42, 35, 1)) !important;
  box-shadow: none !important;
  transform: none !important;
}

#speedChaptersButton.chapters-dock-button:is(:active, .is-tactile-press),
#ebookChaptersButton.chapters-dock-button:is(:active, .is-tactile-press) {
  transform: none !important;
}

#speedChaptersButton.chapters-dock-button:focus-visible,
#ebookChaptersButton.chapters-dock-button:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--rhythm-coral) 54%, transparent) !important;
  outline-offset: 3px !important;
}

#speedChaptersButton.chapters-dock-button:disabled,
#ebookChaptersButton.chapters-dock-button:disabled {
  opacity: 0.38 !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

body:has(#inputPanel.is-open) #speedChaptersButton.chapters-dock-button {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.theme-dark #speedChaptersButton.chapters-dock-button,
body.theme-dark #speedChaptersButton.chapters-dock-button,
html.theme-dark #ebookChaptersButton.chapters-dock-button,
body.theme-dark #ebookChaptersButton.chapters-dock-button {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: rgba(235, 232, 226, 0.9) !important;
  box-shadow: none !important;
}

html.theme-dark #speedChaptersButton.chapters-dock-button:is(:hover, :focus-visible, [aria-expanded="true"]),
body.theme-dark #speedChaptersButton.chapters-dock-button:is(:hover, :focus-visible, [aria-expanded="true"]),
html.theme-dark #ebookChaptersButton.chapters-dock-button:is(:hover, :focus-visible, [aria-expanded="true"]),
body.theme-dark #ebookChaptersButton.chapters-dock-button:is(:hover, :focus-visible, [aria-expanded="true"]) {
  color: rgba(247, 171, 158, 0.96) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel #dockCollapseButton {
  right: max(78px, calc(env(safe-area-inset-right) + 78px)) !important;
}

@media (max-width: 390px) {
  .reader-panel > .top-bar > .reader-title-display,
  .ebook-reader > .ebook-top-bar > .reader-title-display {
    max-width: calc(100vw - 102px) !important;
    padding-inline: 0 !important;
  }

  #speedChaptersButton.chapters-dock-button,
  #ebookChaptersButton.chapters-dock-button {
    right: max(12px, calc(env(safe-area-inset-right) + 12px)) !important;
  }

  body.has-loaded-text:not(.ebook-mode) .reader-panel #dockCollapseButton,
  body.ebook-mode .ebook-reader .ebook-bottom-actions > #ebookCharacterLegendButton.bottom-dialogue-button {
    right: max(68px, calc(env(safe-area-inset-right) + 68px)) !important;
  }
}

/* Final reader-title and Chapters-popup authority. */
.reader-panel > .top-bar > .reader-title-display,
.ebook-reader > .ebook-top-bar > .reader-title-display {
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  grid-column: 1 / -1 !important;
  width: min(calc(100% - 104px), 760px) !important;
  padding: 0 4px !important;
  transform: translate(-50%, -50%) !important;
}

.reader-panel > .top-bar > .reader-title-display > span,
.ebook-reader > .ebook-top-bar > .reader-title-display > span {
  display: -webkit-box !important;
  /* The clamp limits lines; a tight em cap clips the final line's descenders. */
  max-height: none !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body.has-loaded-text:not(.ebook-mode) .reader-panel > .top-bar > .reader-title-display::after,
body.ebook-mode .ebook-reader > .ebook-top-bar > .reader-title-display::after {
  content: "" !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 50% !important;
  display: block !important;
  width: 48px !important;
  height: 2px !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
  opacity: 0.5 !important;
  background: var(--rhythm-amber, #c9954d) !important;
  filter: none !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode)
  .reader-panel > .top-bar > .reader-title-display::after,
body.theme-dark.has-loaded-text:not(.ebook-mode)
  .reader-panel > .top-bar > .reader-title-display::after,
html.theme-dark body.ebook-mode
  .ebook-reader > .ebook-top-bar > .reader-title-display::after,
body.theme-dark.ebook-mode
  .ebook-reader > .ebook-top-bar > .reader-title-display::after {
  opacity: 0.65 !important;
  filter: none !important;
}

html body .chapter-panel.chapter-popup {
  --contents-accent: var(--rhythm-coral, #c65c50);
  --contents-teal: var(--rhythm-coral, #c65c50);
  --contents-coral: var(--rhythm-coral, #c65c50);
  --teal: var(--rhythm-coral, #c65c50);
  --chapter-popup-accent: var(--rhythm-coral, #c65c50);
  --chapter-popup-warm: var(--rhythm-amber, #c9954d);
  --chapter-popup-ink: rgba(39, 34, 29, 0.94);
  --chapter-popup-muted: rgba(79, 72, 64, 0.66);
  --chapter-popup-line: rgba(105, 94, 80, 0.13);
  position: fixed !important;
  inset: 0 !important;
  z-index: 1400 !important;
  display: block !important;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(31, 27, 22, 0.14) !important;
  color: var(--chapter-popup-ink) !important;
  touch-action: none !important;
  -webkit-backdrop-filter: blur(5px) saturate(0.94) !important;
  backdrop-filter: blur(5px) saturate(0.94) !important;
  animation: chapter-popup-backdrop-in 170ms ease-out both !important;
}

html body .chapter-panel.chapter-popup[hidden] {
  display: none !important;
}

html body .chapter-panel.chapter-popup::before,
html body .chapter-panel.chapter-popup::after {
  content: none !important;
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-sheet {
  --chapter-row-height: 58px;
  --chapter-row-gap: 0px;
  position: absolute !important;
  top: auto !important;
  right: max(14px, calc(env(safe-area-inset-right) + 14px)) !important;
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 78px)) !important;
  left: auto !important;
  inset: auto max(14px, calc(env(safe-area-inset-right) + 14px)) max(88px, calc(env(safe-area-inset-bottom) + 78px)) auto !important;
  width: min(430px, calc(100vw - 28px)) !important;
  max-width: none !important;
  height: min(72dvh, 620px) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 112px) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(119, 105, 86, 0.17) !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 8% -7%, rgba(255, 255, 255, 0.9), transparent 37%),
    radial-gradient(circle at 100% 4%, color-mix(in srgb, var(--chapter-popup-accent) 5%, transparent), transparent 32%),
    linear-gradient(155deg, rgba(251, 248, 241, 0.995), rgba(242, 236, 225, 0.992)) !important;
  box-shadow:
    0 32px 86px rgba(42, 34, 24, 0.25),
    0 7px 24px rgba(42, 34, 24, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  touch-action: pan-y !important;
  transform-origin: calc(100% - 28px) 100% !important;
  animation: chapter-popup-sheet-in 210ms cubic-bezier(0.22, 0.78, 0.23, 1) both !important;
}

html body .chapter-panel.chapter-popup .chapter-menu-header.chapter-top-bar {
  position: relative !important;
  inset: auto !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  min-height: 74px !important;
  margin: 0 !important;
  padding: 16px 15px 8px 19px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  gap: 12px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .chapter-panel.chapter-popup .chapter-menu-header::before,
html body .chapter-panel.chapter-popup .chapter-menu-header::after,
html body .chapter-panel.chapter-popup .chapter-top-bar::before,
html body .chapter-panel.chapter-popup .chapter-top-bar::after {
  content: none !important;
  display: none !important;
}

html body .chapter-panel.chapter-popup #chapterTitleButton {
  position: static !important;
  inset: auto !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: stretch !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--chapter-popup-ink) !important;
  box-shadow: none !important;
  text-align: left !important;
  transform: none !important;
  pointer-events: none !important;
}

html body .chapter-panel.chapter-popup #chapterTitleButton::before,
html body .chapter-panel.chapter-popup #chapterTitleButton::after {
  content: none !important;
  display: none !important;
}

html body .chapter-panel.chapter-popup #chapterBookTitle {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--chapter-popup-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(1rem, 3.2vw, 1.18rem) !important;
  font-weight: 620 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.004em !important;
  text-align: left !important;
  white-space: normal !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body .chapter-panel.chapter-popup #chapterBookMeta {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  color: var(--chapter-popup-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.66rem !important;
  font-weight: 660 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.065em !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton,
html body .chapter-panel.chapter-popup .chapter-menu-header #closeChapterButton {
  position: static !important;
  inset: auto !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  color: rgba(68, 60, 51, 0.7) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  translate: none !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton::before,
html body .chapter-panel.chapter-popup #closeChapterButton::after {
  content: none !important;
  display: none !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton > span {
  position: relative !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton > span::before,
html body .chapter-panel.chapter-popup #closeChapterButton > span::after {
  content: "" !important;
  position: absolute !important;
  top: 8px !important;
  left: 1px !important;
  width: 16px !important;
  height: 1.6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton > span::before {
  transform: rotate(45deg) !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton > span::after {
  transform: rotate(-45deg) !important;
}

html body .chapter-panel.chapter-popup .chapter-actions {
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-screen-heading {
  position: static !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 5px 20px 13px !important;
  display: block !important;
  border: 0 !important;
  background: transparent !important;
  transform: none !important;
}

html body .chapter-panel.chapter-popup .chapter-screen-heading h2 {
  margin: 0 !important;
  color: var(--chapter-popup-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(1.72rem, 5.6vw, 2.05rem) !important;
  font-weight: 570 !important;
  line-height: 1 !important;
  letter-spacing: -0.018em !important;
}

html body .chapter-panel.chapter-popup .chapter-screen-heading h2 span {
  color: var(--chapter-popup-accent) !important;
}

html body .chapter-panel.chapter-popup .chapter-screen-heading p {
  margin: 6px 0 0 !important;
  color: var(--chapter-popup-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}

html body .chapter-panel.chapter-popup .chapter-screen-heading::after {
  content: "" !important;
  width: 38px !important;
  height: 2px !important;
  margin-top: 11px !important;
  display: block !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--chapter-popup-accent) 0 68%, var(--chapter-popup-warm) 68% 100%) !important;
  opacity: 0.88 !important;
}

html body .chapter-panel.chapter-popup .chapter-tools,
html body .chapter-panel.chapter-popup .chapter-search,
html body .chapter-panel.chapter-popup .chapter-current-card,
html body .chapter-panel.chapter-popup .chapter-journey-card {
  position: static !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-right: 16px !important;
  margin-left: 16px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

html body .chapter-panel.chapter-popup .chapter-tools {
  min-height: 42px !important;
  margin-top: 0 !important;
  margin-bottom: 11px !important;
  padding: 0 8px 0 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  border: 1px solid var(--chapter-popup-line) !important;
  background: rgba(255, 253, 248, 0.46) !important;
}

html body .chapter-panel.chapter-popup .chapter-tools-summary {
  color: var(--chapter-popup-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.66rem !important;
  font-weight: 720 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
}

html body .chapter-panel.chapter-popup .chapter-search-toggle {
  min-height: 36px !important;
  padding: 0 4px 0 9px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--chapter-popup-accent) !important;
  box-shadow: none !important;
  font-family: var(--ui-font) !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  transform: none !important;
}

html body .chapter-panel.chapter-popup .chapter-search-toggle .chapter-search-icon {
  width: 17px !important;
  height: 17px !important;
  color: currentColor !important;
}

html body .chapter-panel.chapter-popup .chapter-search {
  min-height: 44px !important;
  margin-top: 0 !important;
  margin-bottom: 11px !important;
  padding: 0 7px 0 12px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid color-mix(in srgb, var(--chapter-popup-accent) 16%, var(--chapter-popup-line)) !important;
  background: rgba(255, 253, 248, 0.68) !important;
}

html body .chapter-panel.chapter-popup .chapter-search[hidden] {
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-search-icon {
  color: var(--chapter-popup-accent) !important;
}

html body .chapter-panel.chapter-popup .chapter-search input {
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--chapter-popup-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.82rem !important;
  box-shadow: none !important;
}

html body .chapter-panel.chapter-popup .chapter-search-clear {
  color: var(--chapter-popup-accent) !important;
}

html body .chapter-panel.chapter-popup .chapter-current-card[hidden],
html body .chapter-panel.chapter-popup .chapter-journey-card[hidden] {
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-journey-card {
  max-height: 112px !important;
  margin-top: 0 !important;
  margin-bottom: 11px !important;
  padding: 11px 13px !important;
  overflow: hidden !important;
  border: 1px solid var(--chapter-popup-line) !important;
  background: rgba(255, 253, 248, 0.44) !important;
}

html body .chapter-panel.chapter-popup .chapter-index {
  position: relative !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 0 !important;
  border-top: 1px solid var(--chapter-popup-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 253, 248, 0.24) !important;
  box-shadow: none !important;
}

html body .chapter-panel.chapter-popup .chapter-list-heading {
  flex: 0 0 auto !important;
  width: auto !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 10px 17px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(105, 94, 80, 0.09) !important;
  background: rgba(247, 243, 234, 0.82) !important;
  color: var(--chapter-popup-muted) !important;
}

html body .chapter-panel.chapter-popup .chapter-list-heading span,
html body .chapter-panel.chapter-popup .chapter-list-heading small {
  color: var(--chapter-popup-muted) !important;
  font-family: var(--ui-font) !important;
}

html body .chapter-panel.chapter-popup .chapter-list {
  --chapter-row-gap: 0px;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px 9px max(13px, env(safe-area-inset-bottom)) !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

html body .chapter-panel.chapter-popup .chapter-option,
html body .chapter-panel.chapter-popup .chapter-option-card {
  min-height: var(--chapter-row-height) !important;
}

html body .chapter-panel.chapter-popup .chapter-option {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

html body .chapter-panel.chapter-popup .chapter-option-status,
html body .chapter-panel.chapter-popup .chapter-option-chevron {
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-option-card,
html body .chapter-panel.chapter-popup .chapter-index .chapter-option-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  display: grid !important;
  grid-template-columns: 25px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(105, 94, 80, 0.09) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .chapter-panel.chapter-popup .chapter-option-card::after {
  content: none !important;
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-option-number {
  width: 25px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--chapter-popup-accent) 62%, var(--chapter-popup-muted)) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.78rem !important;
  font-weight: 580 !important;
  box-shadow: none !important;
}

html body .chapter-panel.chapter-popup .chapter-option-copy strong {
  overflow: hidden !important;
  color: var(--chapter-popup-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.91rem, 2.8vw, 1.02rem) !important;
  font-weight: 560 !important;
  line-height: 1.13 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body .chapter-panel.chapter-popup .chapter-option-page {
  color: var(--chapter-popup-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.62rem !important;
  white-space: nowrap !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-card,
html body .chapter-panel.chapter-popup .chapter-index .chapter-option.is-current .chapter-option-card {
  min-height: var(--chapter-row-height) !important;
  margin: 3px 0 !important;
  padding: 7px 9px 7px 11px !important;
  border: 1px solid color-mix(in srgb, var(--chapter-popup-accent) 18%, transparent) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--chapter-popup-accent) 9%, transparent), color-mix(in srgb, var(--chapter-popup-warm) 3%, transparent)) !important;
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--chapter-popup-accent) 78%, transparent) !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current :is(.chapter-option-number, .chapter-option-page) {
  color: var(--chapter-popup-accent) !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-copy strong {
  color: var(--chapter-popup-ink) !important;
  font-weight: 630 !important;
}

html body .chapter-panel.chapter-popup .chapter-volume-divider {
  min-height: 30px !important;
  margin: 6px 0 0 !important;
  padding: 11px 8px 5px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .chapter-panel.chapter-popup .chapter-volume-divider::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--chapter-popup-accent) 20%, transparent), transparent) !important;
}

html body .chapter-panel.chapter-popup .chapter-volume-divider span {
  padding: 0 !important;
  color: color-mix(in srgb, var(--chapter-popup-accent) 60%, var(--chapter-popup-muted)) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.59rem !important;
  font-weight: 740 !important;
  letter-spacing: 0.11em !important;
}

html body .chapter-panel.chapter-popup .chapter-journey-node,
html body .chapter-panel.chapter-popup .chapter-journey-track::before {
  background: color-mix(in srgb, var(--chapter-popup-warm) 58%, rgba(119, 105, 86, 0.2)) !important;
  box-shadow: none !important;
}

html.theme-dark body .chapter-panel.chapter-popup {
  --chapter-popup-ink: rgba(242, 239, 233, 0.93);
  --chapter-popup-muted: rgba(194, 197, 204, 0.64);
  --chapter-popup-line: rgba(214, 220, 230, 0.1);
  background: rgba(5, 6, 8, 0.34) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-sheet {
  border-color: rgba(219, 224, 233, 0.12) !important;
  background:
    radial-gradient(circle at 8% -7%, rgba(255, 255, 255, 0.055), transparent 37%),
    radial-gradient(circle at 100% 3%, rgba(224, 108, 91, 0.075), transparent 34%),
    linear-gradient(155deg, rgba(31, 32, 38, 0.995), rgba(18, 19, 23, 0.995)) !important;
  box-shadow:
    0 36px 92px rgba(0, 0, 0, 0.5),
    0 9px 26px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

html.theme-dark body .chapter-panel.chapter-popup :is(
  .chapter-tools,
  .chapter-search,
  .chapter-journey-card
) {
  border-color: rgba(214, 220, 230, 0.1) !important;
  background: rgba(38, 40, 47, 0.48) !important;
}

html.theme-dark body .chapter-panel.chapter-popup :is(
  .chapter-search-toggle,
  .chapter-search-icon,
  .chapter-current-action
) {
  color: rgba(241, 135, 119, 0.94) !important;
}

html.theme-dark body .chapter-panel.chapter-popup :is(
  .chapter-tools-summary,
  .chapter-list-heading,
  .chapter-option-page
) {
  color: var(--chapter-popup-muted) !important;
}

html.theme-dark body .chapter-panel.chapter-popup :is(
  .chapter-option-number,
  .chapter-volume-divider span
) {
  color: rgba(226, 119, 102, 0.76) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-current-text strong,
html.theme-dark body .chapter-panel.chapter-popup .chapter-option-copy strong {
  color: var(--chapter-popup-ink) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-index {
  border-top-color: rgba(214, 220, 230, 0.09) !important;
  background: rgba(18, 19, 23, 0.24) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-list-heading {
  border-bottom-color: rgba(214, 220, 230, 0.075) !important;
  background: rgba(29, 30, 35, 0.84) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option-card {
  border-bottom-color: rgba(214, 220, 230, 0.075) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-card {
  border-color: rgba(229, 111, 95, 0.15) !important;
  background: linear-gradient(90deg, rgba(226, 105, 88, 0.12), rgba(202, 149, 77, 0.025)) !important;
  box-shadow: inset 2px 0 0 rgba(229, 111, 95, 0.76) !important;
}

@keyframes chapter-popup-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes chapter-popup-sheet-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 520px) {
  html body .chapter-panel.chapter-popup .chapter-sheet {
    right: max(10px, calc(env(safe-area-inset-right) + 10px)) !important;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px)) !important;
    inset: auto max(10px, calc(env(safe-area-inset-right) + 10px)) max(82px, calc(env(safe-area-inset-bottom) + 72px)) auto !important;
    width: calc(100vw - 20px) !important;
    height: min(74dvh, 640px) !important;
    max-height: calc(100dvh - 98px) !important;
    border-radius: 23px !important;
  }

  }

@media (max-height: 650px) {
  html body .chapter-panel.chapter-popup .chapter-sheet {
    bottom: max(72px, calc(env(safe-area-inset-bottom) + 62px)) !important;
    inset: auto max(10px, calc(env(safe-area-inset-right) + 10px)) max(72px, calc(env(safe-area-inset-bottom) + 62px)) auto !important;
    height: calc(100dvh - max(88px, calc(env(safe-area-inset-bottom) + 78px))) !important;
    max-height: none !important;
  }

  html body .chapter-panel.chapter-popup .chapter-screen-heading p,
  html body .chapter-panel.chapter-popup .chapter-screen-heading::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .chapter-panel.chapter-popup,
  html body .chapter-panel.chapter-popup .chapter-sheet {
    animation: none !important;
  }
}

/*
 * Candlelight Chapters
 * --------------------
 * A compact, cover-led contents sheet with the familiar clarity of a native
 * book index, expressed through Rithim's warm paper, ink, and amber palette.
 */
html body .chapter-panel.chapter-popup {
  --contents-accent: #bd8736;
  --contents-teal: #bd8736;
  --contents-coral: #bd8736;
  --teal: #bd8736;
  --chapter-popup-accent: #bd8736;
  --chapter-popup-warm: #dda94b;
  --chapter-popup-candle: #edc66d;
  --chapter-popup-ink: rgba(48, 38, 26, 0.95);
  --chapter-popup-muted: rgba(91, 74, 53, 0.64);
  --chapter-popup-line: rgba(150, 112, 59, 0.16);
  background: rgba(29, 22, 13, 0.24) !important;
  -webkit-backdrop-filter: blur(10px) saturate(0.88) !important;
  backdrop-filter: blur(10px) saturate(0.88) !important;
}

html body .chapter-panel.chapter-popup .chapter-sheet {
  --chapter-row-height: 64px;
  width: min(470px, calc(100vw - 28px)) !important;
  height: min(78dvh, 700px) !important;
  max-height: calc(100dvh - 108px) !important;
  border-color: rgba(161, 119, 58, 0.24) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 14% -8%, rgba(255, 248, 220, 0.96), transparent 34%),
    radial-gradient(circle at 92% 2%, rgba(228, 175, 75, 0.16), transparent 31%),
    linear-gradient(155deg, rgba(250, 243, 226, 0.995), rgba(232, 218, 190, 0.992)) !important;
  box-shadow:
    0 34px 92px rgba(50, 34, 13, 0.3),
    0 8px 24px rgba(64, 43, 17, 0.13),
    inset 0 1px 0 rgba(255, 252, 238, 0.9),
    inset 0 0 0 1px rgba(236, 193, 104, 0.06) !important;
  transform-origin: calc(100% - 28px) 100% !important;
}

html body .chapter-panel.chapter-popup .chapter-menu-header.chapter-top-bar {
  min-height: 112px !important;
  padding: 17px 17px 16px 18px !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 14px !important;
}

html body .chapter-panel.chapter-popup .chapter-menu-header::after {
  content: "" !important;
  position: absolute !important;
  right: 18px !important;
  bottom: 0 !important;
  left: 18px !important;
  display: block !important;
  height: 1px !important;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb, var(--chapter-popup-warm) 44%, transparent) 16%,
      color-mix(in srgb, var(--chapter-popup-warm) 72%, transparent) 50%,
      color-mix(in srgb, var(--chapter-popup-warm) 44%, transparent) 84%,
      transparent
    ) !important;
  opacity: 0.82 !important;
}

html body .chapter-panel.chapter-popup #chapterTitleButton {
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 14px !important;
}

html body .chapter-panel.chapter-popup .chapter-book-cover {
  position: relative !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 76px !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1px solid rgba(126, 88, 38, 0.22) !important;
  border-radius: 5px 8px 8px 5px !important;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 247, 213, 0.58), transparent 32%),
    linear-gradient(145deg, #d7ad5a, #8f5f24) !important;
  color: rgba(255, 248, 222, 0.94) !important;
  font-family: "Iowan Old Style", Palatino, Georgia, serif !important;
  font-size: 1.34rem !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  box-shadow:
    0 8px 18px rgba(66, 42, 12, 0.18),
    inset 3px 0 0 rgba(255, 246, 211, 0.16),
    inset -1px 0 0 rgba(77, 47, 12, 0.18) !important;
}

html body .chapter-panel.chapter-popup .chapter-book-cover::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  display: block !important;
  border: 1px solid rgba(255, 241, 197, 0.24) !important;
  border-radius: 2px 5px 5px 2px !important;
  pointer-events: none !important;
}

html body .chapter-panel.chapter-popup .chapter-book-cover.has-image::after {
  border-color: rgba(255, 247, 220, 0.14) !important;
}

html body .chapter-panel.chapter-popup .chapter-book-cover img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

html body .chapter-panel.chapter-popup .chapter-book-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

html body .chapter-panel.chapter-popup #chapterBookTitle {
  font-size: clamp(1.04rem, 3.5vw, 1.24rem) !important;
  font-weight: 625 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.006em !important;
}

html body .chapter-panel.chapter-popup #chapterBookMeta {
  color: var(--chapter-popup-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 620 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton,
html body .chapter-panel.chapter-popup .chapter-menu-header #closeChapterButton {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  align-self: start !important;
  border: 1px solid rgba(157, 115, 53, 0.2) !important;
  background:
    radial-gradient(circle at 36% 24%, rgba(255, 250, 231, 0.72), transparent 44%),
    rgba(184, 137, 65, 0.1) !important;
  color: rgba(105, 76, 37, 0.76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 238, 0.7),
    0 5px 13px rgba(83, 54, 18, 0.08) !important;
}

html body .chapter-panel.chapter-popup .chapter-screen-heading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

html body .chapter-panel.chapter-popup .chapter-tools {
  min-height: 43px !important;
  margin: 0 17px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--chapter-popup-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

html body .chapter-panel.chapter-popup .chapter-tools-summary {
  color: color-mix(in srgb, var(--chapter-popup-accent) 76%, var(--chapter-popup-muted)) !important;
  font-size: 0.65rem !important;
  font-weight: 740 !important;
  letter-spacing: 0.085em !important;
}

html body .chapter-panel.chapter-popup .chapter-search-toggle {
  min-height: 38px !important;
  padding: 0 3px 0 9px !important;
  color: color-mix(in srgb, var(--chapter-popup-accent) 86%, rgba(79, 54, 24, 1)) !important;
  font-size: 0.7rem !important;
}

html body .chapter-panel.chapter-popup .chapter-search {
  min-height: 44px !important;
  margin: 8px 14px 9px !important;
  border-color: rgba(174, 128, 56, 0.24) !important;
  border-radius: 13px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 247, 215, 0.62), transparent 46%),
    rgba(219, 184, 113, 0.14) !important;
}

html body .chapter-panel.chapter-popup .chapter-journey-card {
  margin: 9px 14px !important;
  border-color: rgba(166, 119, 49, 0.2) !important;
  background: rgba(223, 188, 115, 0.12) !important;
}

html body .chapter-panel.chapter-popup .chapter-index {
  border: 0 !important;
  background: transparent !important;
}

html body .chapter-panel.chapter-popup .chapter-list-heading {
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-list {
  --chapter-row-gap: 0px;
  padding: 5px 13px max(16px, env(safe-area-inset-bottom)) !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(190, 139, 58, 0.46) transparent !important;
}

html body .chapter-panel.chapter-popup .chapter-list::-webkit-scrollbar {
  width: 4px !important;
}

html body .chapter-panel.chapter-popup .chapter-list::-webkit-scrollbar-track {
  background: transparent !important;
}

html body .chapter-panel.chapter-popup .chapter-list::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(190, 139, 58, 0.46) !important;
}

html body .chapter-panel.chapter-popup .chapter-option-card,
html body .chapter-panel.chapter-popup .chapter-index .chapter-option-card {
  min-height: var(--chapter-row-height) !important;
  padding: 9px 12px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  border-bottom-color: var(--chapter-popup-line) !important;
}

html body .chapter-panel.chapter-popup .chapter-option-number {
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-option-copy {
  min-width: 0 !important;
}

html body .chapter-panel.chapter-popup .chapter-option-copy strong {
  display: -webkit-box !important;
  max-height: none !important;
  overflow: hidden !important;
  color: var(--chapter-popup-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.84rem, 2.8vw, 0.94rem) !important;
  font-weight: 630 !important;
  line-height: 1.19 !important;
  letter-spacing: -0.005em !important;
  text-overflow: clip !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

html body .chapter-panel.chapter-popup .chapter-option-page {
  color: var(--chapter-popup-muted) !important;
  font-size: 0.7rem !important;
  font-weight: 590 !important;
  font-variant-numeric: tabular-nums !important;
}

html body .chapter-panel.chapter-popup .chapter-option:is(:hover, :focus-visible) .chapter-option-card {
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--chapter-popup-warm) 8%, transparent) !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-card,
html body .chapter-panel.chapter-popup .chapter-index .chapter-option.is-current .chapter-option-card {
  min-height: var(--chapter-row-height) !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(188, 136, 52, 0.28) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 235, 172, 0.38), transparent 42%),
    linear-gradient(105deg, rgba(214, 164, 78, 0.22), rgba(191, 133, 48, 0.11)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 205, 0.36),
    0 4px 14px rgba(108, 70, 20, 0.07) !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-copy strong {
  color: rgba(78, 53, 20, 0.98) !important;
  font-weight: 700 !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-page {
  color: rgba(134, 89, 29, 0.9) !important;
  font-weight: 700 !important;
}

html body .chapter-panel.chapter-popup .chapter-volume-divider {
  min-height: 34px !important;
  margin: 5px 0 0 !important;
  padding: 12px 12px 6px !important;
}

html body .chapter-panel.chapter-popup .chapter-volume-divider span {
  color: color-mix(in srgb, var(--chapter-popup-accent) 80%, var(--chapter-popup-muted)) !important;
  font-size: 0.62rem !important;
  font-weight: 780 !important;
  letter-spacing: 0.105em !important;
}

html body .chapter-panel.chapter-popup .chapter-volume-divider::after {
  background:
    linear-gradient(90deg, rgba(198, 146, 61, 0.42), rgba(198, 146, 61, 0.04), transparent) !important;
}

html.theme-dark body .chapter-panel.chapter-popup {
  --chapter-popup-accent: #d4a34a;
  --chapter-popup-warm: #e6b95d;
  --chapter-popup-candle: #f0cb78;
  --chapter-popup-ink: rgba(245, 239, 225, 0.94);
  --chapter-popup-muted: rgba(205, 190, 163, 0.62);
  --chapter-popup-line: rgba(221, 183, 112, 0.13);
  background: rgba(4, 4, 3, 0.5) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-sheet {
  border-color: rgba(222, 178, 91, 0.19) !important;
  background:
    radial-gradient(circle at 14% -7%, rgba(238, 190, 91, 0.16), transparent 35%),
    radial-gradient(circle at 94% 3%, rgba(255, 220, 142, 0.055), transparent 30%),
    linear-gradient(155deg, rgba(44, 40, 32, 0.995), rgba(22, 21, 18, 0.995) 74%) !important;
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.58),
    0 10px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 229, 169, 0.09),
    inset 0 0 0 1px rgba(231, 188, 101, 0.025) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-menu-header::after {
  opacity: 0.66 !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-book-cover {
  border-color: rgba(235, 193, 109, 0.22) !important;
  box-shadow:
    0 9px 20px rgba(0, 0, 0, 0.34),
    inset 3px 0 0 rgba(255, 233, 181, 0.13),
    inset -1px 0 0 rgba(0, 0, 0, 0.24) !important;
}

html.theme-dark body .chapter-panel.chapter-popup #closeChapterButton,
html.theme-dark body .chapter-panel.chapter-popup .chapter-menu-header #closeChapterButton {
  border-color: rgba(221, 178, 93, 0.17) !important;
  background:
    radial-gradient(circle at 35% 23%, rgba(255, 229, 167, 0.12), transparent 46%),
    rgba(214, 165, 73, 0.075) !important;
  color: rgba(229, 199, 142, 0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 189, 0.07),
    0 7px 16px rgba(0, 0, 0, 0.16) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-tools,
html.theme-dark body .chapter-panel.chapter-popup .chapter-index,
html.theme-dark body .chapter-panel.chapter-popup .chapter-option-card {
  background: transparent !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-search,
html.theme-dark body .chapter-panel.chapter-popup .chapter-journey-card {
  border-color: rgba(224, 181, 94, 0.17) !important;
  background: rgba(213, 163, 69, 0.075) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option-card {
  border-bottom-color: var(--chapter-popup-line) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option-copy strong {
  color: var(--chapter-popup-ink) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-card {
  border-color: rgba(229, 179, 81, 0.23) !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(239, 194, 103, 0.17), transparent 44%),
    linear-gradient(105deg, rgba(202, 151, 58, 0.17), rgba(136, 92, 28, 0.1)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 222, 150, 0.08),
    0 5px 18px rgba(0, 0, 0, 0.13) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-copy strong {
  color: rgba(250, 232, 190, 0.98) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-page {
  color: rgba(231, 188, 105, 0.9) !important;
}

@media (max-width: 520px) {
  html body .chapter-panel.chapter-popup .chapter-sheet {
    right: max(10px, calc(env(safe-area-inset-right) + 10px)) !important;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px)) !important;
    inset: auto max(10px, calc(env(safe-area-inset-right) + 10px)) max(82px, calc(env(safe-area-inset-bottom) + 72px)) auto !important;
    width: calc(100vw - 20px) !important;
    height: min(79dvh, 700px) !important;
    max-height: calc(100dvh - 98px) !important;
    border-radius: 27px !important;
  }

  html body .chapter-panel.chapter-popup .chapter-menu-header.chapter-top-bar {
    min-height: 106px !important;
    padding: 15px 15px 14px !important;
  }

  html body .chapter-panel.chapter-popup #chapterTitleButton {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html body .chapter-panel.chapter-popup .chapter-book-cover {
    width: 52px !important;
    min-width: 52px !important;
    height: 70px !important;
  }
}

/*
 * Chapters popup refinement
 * -------------------------
 * Keep candlelight as jewellery rather than material: neutral paper/graphite
 * carries the sheet, while amber is reserved for the cover and current place.
 */
html body .chapter-panel.chapter-popup {
  --contents-accent: #a87938;
  --contents-teal: #a87938;
  --contents-coral: #a87938;
  --teal: #a87938;
  --chapter-popup-accent: #a87938;
  --chapter-popup-warm: #bf9658;
  --chapter-popup-candle: #d8b56f;
  --chapter-popup-ink: rgba(38, 39, 42, 0.95);
  --chapter-popup-muted: rgba(78, 79, 84, 0.64);
  --chapter-popup-line: rgba(72, 74, 80, 0.12);
  background: rgba(17, 18, 21, 0.25) !important;
  -webkit-backdrop-filter: blur(11px) saturate(0.78) !important;
  backdrop-filter: blur(11px) saturate(0.78) !important;
}

html body .chapter-panel.chapter-popup .chapter-sheet {
  border-color: rgba(73, 75, 80, 0.18) !important;
  background:
    radial-gradient(circle at 9% -10%, rgba(255, 255, 255, 0.86), transparent 35%),
    radial-gradient(circle at 94% 1%, rgba(184, 137, 64, 0.045), transparent 31%),
    linear-gradient(158deg, rgba(248, 247, 243, 0.997), rgba(232, 231, 227, 0.994)) !important;
  box-shadow:
    0 34px 92px rgba(20, 21, 24, 0.31),
    0 8px 24px rgba(20, 21, 24, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
}

html body .chapter-panel.chapter-popup .chapter-menu-header::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(74, 75, 80, 0.08) 15%,
      color-mix(in srgb, var(--chapter-popup-accent) 34%, rgba(74, 75, 80, 0.14)) 50%,
      rgba(74, 75, 80, 0.08) 85%,
      transparent
    ) !important;
  opacity: 1 !important;
}

html body .chapter-panel.chapter-popup .chapter-book-cover {
  border-color: rgba(63, 58, 50, 0.22) !important;
  background:
    radial-gradient(circle at 32% 18%, rgba(251, 237, 204, 0.34), transparent 32%),
    linear-gradient(145deg, #b58b4d, #6d5332) !important;
  color: rgba(252, 247, 234, 0.95) !important;
  box-shadow:
    0 8px 18px rgba(27, 28, 31, 0.16),
    inset 3px 0 0 rgba(255, 248, 226, 0.12),
    inset -1px 0 0 rgba(31, 27, 21, 0.2) !important;
}

html body .chapter-panel.chapter-popup .chapter-book-cover::after {
  border-color: rgba(255, 247, 223, 0.18) !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton,
html body .chapter-panel.chapter-popup .chapter-menu-header #closeChapterButton {
  width: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  align-self: center !important;
  border: 1px solid rgba(67, 69, 74, 0.14) !important;
  background: rgba(255, 255, 255, 0.38) !important;
  color: rgba(60, 61, 65, 0.7) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 5px 14px rgba(25, 26, 29, 0.065) !important;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton .chapter-close-symbol {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--chapter-popup-accent) 34%, rgba(67, 69, 74, 0.16)) !important;
  background: rgba(255, 255, 255, 0.64) !important;
  color: color-mix(in srgb, var(--chapter-popup-accent) 68%, rgba(54, 55, 59, 1)) !important;
  outline: 1px solid color-mix(in srgb, var(--chapter-popup-accent) 34%, transparent) !important;
  outline-offset: 2px !important;
}

html body .chapter-panel.chapter-popup #closeChapterButton:is(:active, .is-tactile-press) {
  transform: none !important;
  translate: none !important;
}

html body .chapter-panel.chapter-popup .chapter-tools {
  border-bottom-color: var(--chapter-popup-line) !important;
}

html body .chapter-panel.chapter-popup .chapter-tools-summary {
  color: var(--chapter-popup-muted) !important;
}

html body .chapter-panel.chapter-popup .chapter-search-toggle {
  color: color-mix(in srgb, var(--chapter-popup-accent) 72%, rgba(64, 65, 69, 1)) !important;
}

html body .chapter-panel.chapter-popup .chapter-search,
html body .chapter-panel.chapter-popup .chapter-journey-card {
  border-color: rgba(72, 74, 80, 0.14) !important;
  background: rgba(255, 255, 255, 0.34) !important;
}

html body .chapter-panel.chapter-popup .chapter-list {
  padding-right: 0 !important;
  padding-left: 0 !important;
  scrollbar-color: rgba(90, 91, 96, 0.3) transparent !important;
}

html body .chapter-panel.chapter-popup .chapter-list::-webkit-scrollbar-thumb {
  background: rgba(90, 91, 96, 0.3) !important;
}

html body .chapter-panel.chapter-popup .chapter-option-card,
html body .chapter-panel.chapter-popup .chapter-index .chapter-option-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding-right: 25px !important;
  padding-left: 25px !important;
  border-bottom: 0 !important;
}

html body .chapter-panel.chapter-popup .chapter-option-card::after,
html body .chapter-panel.chapter-popup .chapter-index .chapter-option-card::after {
  content: "" !important;
  position: absolute !important;
  right: 25px !important;
  bottom: 0 !important;
  left: 25px !important;
  display: block !important;
  height: 1px !important;
  border: 0 !important;
  background: var(--chapter-popup-line) !important;
  pointer-events: none !important;
}

html body .chapter-panel.chapter-popup .chapter-option {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current {
  padding-right: 13px !important;
  padding-left: 13px !important;
}

html body .chapter-panel.chapter-popup .chapter-volume-divider {
  padding-right: 25px !important;
  padding-left: 25px !important;
}

html body .chapter-panel.chapter-popup .chapter-option:is(:hover, :focus-visible) .chapter-option-card {
  background: rgba(63, 65, 70, 0.045) !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-card,
html body .chapter-panel.chapter-popup .chapter-index .chapter-option.is-current .chapter-option-card {
  padding-right: 12px !important;
  padding-left: 12px !important;
  border-color: rgba(75, 77, 82, 0.14) !important;
  background: rgba(66, 68, 73, 0.075) !important;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--chapter-popup-accent) 76%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-card::after,
html body .chapter-panel.chapter-popup .chapter-index .chapter-option.is-current .chapter-option-card::after {
  content: none !important;
  display: none !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-copy strong {
  color: var(--chapter-popup-ink) !important;
}

html body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-page {
  color: color-mix(in srgb, var(--chapter-popup-accent) 72%, var(--chapter-popup-muted)) !important;
}

html body.is-chapter-panel-open #speedChaptersButton.chapters-dock-button,
html body.is-chapter-panel-open #ebookChaptersButton.chapters-dock-button {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .chapter-panel.chapter-popup .chapter-popup-toggle {
  -webkit-appearance: none !important;
  appearance: none !important;
  position: fixed !important;
  right: max(18px, calc(env(safe-area-inset-right) + 18px)) !important;
  bottom: max(29px, calc(env(safe-area-inset-bottom) + 19px)) !important;
  z-index: 1455 !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  visibility: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #a87938 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 4px rgba(14, 15, 18, 0.18)) !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

html body .chapter-panel.chapter-popup .chapter-popup-toggle .reader-menu-close-symbol {
  width: 27px !important;
  height: 27px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none !important;
}

html body .chapter-panel.chapter-popup .chapter-popup-toggle:is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--chapter-popup-accent) 88%, rgba(50, 51, 55, 1)) !important;
  outline: 1px solid color-mix(in srgb, var(--chapter-popup-accent) 42%, transparent) !important;
  outline-offset: 2px !important;
}

html body .chapter-panel.chapter-popup .chapter-popup-toggle:is(:active, .is-tactile-press) {
  transform: none !important;
}

@media (max-width: 390px) {
  html body .chapter-panel.chapter-popup .chapter-popup-toggle {
    right: max(12px, calc(env(safe-area-inset-right) + 12px)) !important;
  }
}

html.theme-dark body .chapter-panel.chapter-popup,
body.theme-dark .chapter-panel.chapter-popup {
  --chapter-popup-accent: #c49a52;
  --chapter-popup-warm: #cdb078;
  --chapter-popup-candle: #ddbd7b;
  --chapter-popup-ink: rgba(243, 241, 236, 0.94);
  --chapter-popup-muted: rgba(190, 192, 199, 0.62);
  --chapter-popup-line: rgba(211, 215, 224, 0.085);
  background: rgba(4, 5, 7, 0.56) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-sheet,
body.theme-dark .chapter-panel.chapter-popup .chapter-sheet {
  border-color: rgba(211, 215, 224, 0.12) !important;
  background:
    radial-gradient(circle at 10% -8%, rgba(255, 255, 255, 0.065), transparent 36%),
    radial-gradient(circle at 94% 1%, rgba(204, 157, 78, 0.055), transparent 30%),
    linear-gradient(158deg, rgba(33, 34, 39, 0.997), rgba(18, 19, 23, 0.997)) !important;
  box-shadow:
    0 38px 100px rgba(0, 0, 0, 0.58),
    0 10px 28px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-menu-header::after,
body.theme-dark .chapter-panel.chapter-popup .chapter-menu-header::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(211, 215, 224, 0.055) 15%,
      color-mix(in srgb, var(--chapter-popup-accent) 26%, rgba(211, 215, 224, 0.075)) 50%,
      rgba(211, 215, 224, 0.055) 85%,
      transparent
    ) !important;
}

html.theme-dark body .chapter-panel.chapter-popup #closeChapterButton,
html.theme-dark body .chapter-panel.chapter-popup .chapter-menu-header #closeChapterButton,
body.theme-dark .chapter-panel.chapter-popup #closeChapterButton,
body.theme-dark .chapter-panel.chapter-popup .chapter-menu-header #closeChapterButton {
  border-color: rgba(211, 215, 224, 0.11) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 228, 233, 0.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 6px 16px rgba(0, 0, 0, 0.16) !important;
}

html.theme-dark body .chapter-panel.chapter-popup #closeChapterButton:is(:hover, :focus-visible),
body.theme-dark .chapter-panel.chapter-popup #closeChapterButton:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--chapter-popup-accent) 32%, rgba(211, 215, 224, 0.12)) !important;
  background: rgba(255, 255, 255, 0.075) !important;
  color: rgba(242, 224, 188, 0.9) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-search,
html.theme-dark body .chapter-panel.chapter-popup .chapter-journey-card,
body.theme-dark .chapter-panel.chapter-popup .chapter-search,
body.theme-dark .chapter-panel.chapter-popup .chapter-journey-card {
  border-color: rgba(211, 215, 224, 0.1) !important;
  background: rgba(45, 47, 54, 0.46) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option:is(:hover, :focus-visible) .chapter-option-card,
body.theme-dark .chapter-panel.chapter-popup .chapter-option:is(:hover, :focus-visible) .chapter-option-card {
  background: rgba(255, 255, 255, 0.035) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-card,
html.theme-dark body .chapter-panel.chapter-popup .chapter-index .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-card,
body.theme-dark .chapter-panel.chapter-popup .chapter-index .chapter-option.is-current .chapter-option-card {
  border-color: rgba(211, 215, 224, 0.105) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 2px 0 0 color-mix(in srgb, var(--chapter-popup-accent) 78%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-copy strong,
body.theme-dark .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-copy strong {
  color: var(--chapter-popup-ink) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-page,
body.theme-dark .chapter-panel.chapter-popup .chapter-option.is-current .chapter-option-page {
  color: rgba(210, 174, 111, 0.82) !important;
}

html.theme-dark body .chapter-panel.chapter-popup .chapter-popup-toggle,
body.theme-dark .chapter-panel.chapter-popup .chapter-popup-toggle {
  color: #d0a55c !important;
  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.48)) !important;
}

/*
 * Topic atlas phone layout
 * ------------------------
 * The v2 art-direction rules intentionally follow the original responsive
 * block, so their desktop reading grid was winning again on narrow screens.
 * Keep every editorial module within one mobile column and give horizontal
 * topic cards enough width to remain legible.
 */
@media (max-width: 820px) {
  .topic-atlas-first,
  .topic-editorial-reading,
  .topic-editorial-reading-grid,
  .topic-editorial-reading-grid > div,
  .topic-signature-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .topic-editorial-reading-grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .topic-editorial-read.is-featured {
    width: 100%;
    max-width: none;
    min-height: 248px;
  }
}

@media (max-width: 560px) {
  .topic-discovery-content:has(.topic-atlas-first) {
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
  }

  .topic-atlas-first {
    gap: 30px;
  }

  
  
  
  
  
  
  
  
  
  
  
  
  
  .topic-editorial-reading {
    gap: 16px;
  }

  .topic-editorial-reading > header {
    gap: 12px;
  }

  .topic-editorial-reading > header h3,
  .topic-signature-section > header h3 {
    font-size: clamp(1.9rem, 9.5vw, 2.5rem);
    line-height: 0.98;
  }

  .topic-editorial-reading > header > span {
    flex: 0 0 auto;
    padding-bottom: 4px;
  }

  .topic-editorial-read.is-featured {
    min-height: 0;
    grid-template-columns: minmax(88px, 29%) minmax(0, 1fr) 18px;
    gap: 12px;
    padding: 14px 11px;
    border-radius: 20px;
    overflow: hidden;
  }

  .topic-editorial-read.is-featured .topic-editorial-read-art {
    width: 100%;
    max-width: 112px;
    height: 154px;
    aspect-ratio: auto;
    margin: 0;
    justify-self: stretch;
    border-radius: 12px;
  }

  .topic-editorial-read.is-featured .topic-editorial-read-copy {
    gap: 6px;
  }

  .topic-editorial-read.is-featured .topic-editorial-read-copy strong {
    font-size: clamp(1.25rem, 6.8vw, 1.65rem);
    line-height: 1.02;
    -webkit-line-clamp: 3;
  }

  .topic-editorial-read.is-featured .topic-editorial-read-copy em {
    display: -webkit-box;
    font-size: 0.69rem;
    line-height: 1.35;
    -webkit-line-clamp: 2;
  }

  .topic-editorial-reading-grid > div {
    gap: 0;
  }

  .topic-editorial-read:not(.is-featured) {
    width: 100%;
    min-height: 108px;
    grid-template-columns: 68px minmax(0, 1fr) 18px;
    gap: 12px;
    padding: 11px 6px;
    overflow: hidden;
  }

  .topic-editorial-read:not(.is-featured) .topic-editorial-read-art {
    width: 68px;
    height: 86px;
    aspect-ratio: auto;
  }

  .topic-editorial-read:not(.is-featured) .topic-editorial-read-copy strong {
    font-size: 1.02rem;
    line-height: 1.08;
  }

  .topic-editorial-read > i {
    justify-self: end;
  }

  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid,
  .topic-signature-grid {
    grid-auto-columns: clamp(230px, 76vw, 290px);
    gap: 11px;
    padding-right: 18px;
    scroll-padding-inline: 3px;
  }

  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button,
  .topic-signature-grid > button {
    min-height: 210px;
    padding: 17px 15px;
  }

  .topic-signature-grid > button strong {
    font-size: 1.16rem;
    line-height: 1.06;
    -webkit-line-clamp: 3;
  }

  .topic-signature-grid > button em {
    font-size: 0.7rem;
    line-height: 1.38;
    -webkit-line-clamp: 3;
  }
}

/*
 * Person dossier visual pass
 * --------------------------
 * People share one portrait treatment. A quiet silhouette stands in for
 * missing artwork, while the phone layout becomes full-bleed and content-led
 * instead of reserving most of the first screen for an empty hero.
 */

@media (max-width: 640px) {
  .topic-discovery-content.is-entity-dossier {
    width: 100% !important;
    max-width: none !important;
    padding:
      calc(54px + env(safe-area-inset-top))
      0
      max(34px, env(safe-area-inset-bottom)) !important;
  }

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  }

/*
 * Continuous home canvas
 * ----------------------
 * The dashboard now reads as one editorial surface. Covers, type, rules, and
 * actions provide the hierarchy; containers no longer need to look like a
 * stack of floating panels.
 */
#inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen),
html.theme-dark #inputPanel.is-open,
body.theme-dark #inputPanel.is-open {
  --home-canvas: #080b0c;
  --home-canvas-deep: #050708;
  --home-cream: #eee5d8;
  --home-cream-soft: rgba(222, 211, 197, 0.66);
  --home-coral: #df5548;
  --home-amber: #d49643;
  --home-hairline: rgba(226, 211, 190, 0.095);
  color-scheme: dark;
  background:
    radial-gradient(ellipse 72% 38% at 106% 0%, rgba(221, 152, 65, 0.25) 0%, rgba(184, 104, 38, 0.105) 36%, transparent 72%),
    radial-gradient(circle at 84% 13%, rgba(255, 194, 105, 0.07), transparent 19rem),
    linear-gradient(155deg, var(--home-canvas) 0%, #090c0e 43%, var(--home-canvas-deep) 100%) !important;
}

#inputPanel.home-ambient-active .home-ambient-canvas {
  opacity: 0.54;
}

#inputPanel:not(.is-menu-subview):not(.is-settings-screen) > .menu-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  padding:
    max(26px, calc(env(safe-area-inset-top) + 18px))
    0
    max(132px, calc(env(safe-area-inset-bottom) + 104px)) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.menu-main.home-dashboard {
  --home-page-gutter: clamp(22px, 5.4vw, 52px);
  width: min(100%, 980px) !important;
  max-width: 980px !important;
  margin-inline: auto !important;
  padding-inline: var(--home-page-gutter) !important;
  gap: clamp(24px, 4vh, 42px) !important;
  color: var(--home-cream) !important;
}

.home-hero {
  position: relative;
  min-height: clamp(106px, 16vw, 150px);
  display: grid !important;
  align-content: start;
  gap: 0 !important;
  margin: 0 !important;
  padding: clamp(12px, 2.4vh, 28px) 0 0 !important;
}

.home-wordmark {
  margin: 0 !important;
  color: var(--home-cream) !important;
  font: 470 clamp(3.55rem, 12.4vw, 6.6rem)/0.88 var(--reading-font) !important;
  letter-spacing: -0.045em !important;
}

.home-greeting {
  display: none !important;
}

.home-subtitle {
  max-width: calc(100% - 86px);
  margin: clamp(16px, 2.7vh, 26px) 0 0 !important;
  color: var(--home-cream-soft) !important;
  font: 450 clamp(0.92rem, 2.7vw, 1.22rem)/1.25 var(--reading-font) !important;
}

.home-amber-mark {
  position: absolute;
  top: clamp(18px, 3vh, 34px);
  right: 0;
  width: clamp(50px, 10vw, 68px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  box-shadow: none;
}

.home-amber-mark::before {
  content: "✦";
  color: #efb16f;
  font: 400 clamp(1.15rem, 3vw, 1.55rem)/1 var(--reading-font);
  text-shadow:
    0 0 9px rgba(255, 194, 126, 0.68),
    0 0 28px rgba(219, 139, 58, 0.34);
}

.home-section {
  margin: 0 !important;
}

.home-section-label {
  color: var(--home-coral) !important;
  font: 720 clamp(0.64rem, 1.8vw, 0.78rem)/1 var(--reading-font) !important;
  letter-spacing: 0.22em !important;
}

.home-resume-card,
#inputPanel.home-ambient-active .home-resume-card,
html.theme-dark #inputPanel.home-ambient-active .home-resume-card,
body.theme-dark #inputPanel.home-ambient-active .home-resume-card {
  --home-resume-pad-x: 0px;
  --home-resume-pad-y: 0px;
  --home-resume-cover-w: clamp(132px, 28vw, 218px);
  --home-resume-gap: clamp(26px, 5vw, 58px);
  position: relative !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.home-resume-card.has-book > .home-section-label {
  top: 2px !important;
  left: calc(var(--home-resume-cover-w) + var(--home-resume-gap)) !important;
  max-width: calc(100% - var(--home-resume-cover-w) - var(--home-resume-gap)) !important;
  color: var(--home-coral) !important;
}

.home-resume-info-button {
  display: none !important;
}

.home-resume-card.has-book .home-resume-body,
.home-resume-body {
  grid-template-columns: var(--home-resume-cover-w) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: var(--home-resume-gap) !important;
}

.home-resume-card.has-book .home-resume-cover {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
  align-self: start !important;
}

.home-resume-card.has-book .home-book-cover,
.home-resume-card.has-book .home-book-cover.has-image,
.home-resume-card.has-book .home-book-cover.has-title-fallback,
.home-book-cover,
.home-book-cover.has-image,
.home-book-cover.has-title-fallback {
  width: var(--home-resume-cover-w) !important;
  max-width: 100% !important;
  aspect-ratio: 0.64 !important;
  border-radius: 7px !important;
  background: rgba(27, 25, 21, 0.72) !important;
  box-shadow:
    0 25px 45px rgba(0, 0, 0, 0.42),
    0 7px 14px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(229, 205, 168, 0.08) !important;
}

.home-resume-card.has-book .home-resume-copy,
.home-resume-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  align-content: start !important;
  align-self: start !important;
  gap: 10px !important;
  padding-top: clamp(30px, 5vw, 44px) !important;
}

.home-resume-copy :is(h3, p, .home-resume-progress) {
  grid-column: 1 / -1;
}

.home-resume-actions {
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px clamp(16px, 3vw, 28px);
}

#inputPanel.home-ambient-active .home-resume-card.has-book .home-resume-actions > :is(.home-primary-action, .home-secondary-action) {
  width: auto !important;
  flex: 1 1 0 !important;
}

.home-resume-copy h3,
html.theme-dark .home-resume-copy h3,
body.theme-dark .home-resume-copy h3 {
  max-width: 13ch !important;
  color: var(--home-cream) !important;
  font: 470 clamp(2.1rem, 6.8vw, 4.15rem)/0.98 var(--reading-font) !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
}

.home-resume-copy p,
html.theme-dark .home-resume-copy p,
body.theme-dark .home-resume-copy p {
  color: var(--home-cream-soft) !important;
  font: 450 clamp(0.96rem, 2.5vw, 1.22rem)/1.28 var(--reading-font) !important;
}

.home-resume-progress {
  width: 100%;
  gap: 9px !important;
  margin: clamp(8px, 1.6vw, 14px) 0 6px !important;
}

.home-progress-track,
html.theme-dark .home-progress-track,
body.theme-dark .home-progress-track {
  height: 4px !important;
  background: rgba(223, 213, 199, 0.13) !important;
}

.home-progress-track > span,
.home-progress-track span {
  background: linear-gradient(90deg, #e04e42, #ce443d) !important;
}

.home-progress-meta,
html.theme-dark .home-progress-meta,
body.theme-dark .home-progress-meta {
  color: rgba(220, 209, 194, 0.55) !important;
  font: 450 clamp(0.78rem, 2vw, 0.96rem)/1 var(--reading-font) !important;
}

.home-resume-card.has-book .home-progress-meta,
html.theme-dark .home-resume-card.has-book .home-progress-meta,
body.theme-dark .home-resume-card.has-book .home-progress-meta {
  color: rgba(220, 209, 194, 0.58) !important;
}

.home-primary-action,
.home-secondary-action,
html.theme-dark .home-primary-action,
body.theme-dark .home-primary-action,
html.theme-dark .home-secondary-action,
body.theme-dark .home-secondary-action,
.home-resume-card.has-book .home-primary-action,
.home-resume-card.has-book .home-secondary-action,
html.theme-dark .home-resume-card.has-book .home-primary-action,
body.theme-dark .home-resume-card.has-book .home-primary-action,
html.theme-dark .home-resume-card.has-book .home-secondary-action,
body.theme-dark .home-resume-card.has-book .home-secondary-action {
  width: max-content !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  display: inline-flex !important;
  flex-direction: row-reverse;
  justify-content: flex-end !important;
  justify-self: start;
  gap: 11px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--home-cream) !important;
  box-shadow: none !important;
  font: 470 clamp(0.92rem, 2.4vw, 1.12rem)/1.05 var(--reading-font) !important;
  text-align: left;
}

.home-primary-action .home-action-symbol,
.home-secondary-action .home-action-symbol,
.home-resume-card.has-book .home-primary-action .home-action-symbol,
.home-resume-card.has-book .home-secondary-action .home-action-symbol {
  position: static !important;
  inset: auto !important;
  box-sizing: content-box;
  width: 17px !important;
  height: 17px !important;
  padding: 13px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.home-primary-action .home-action-symbol {
  background: linear-gradient(145deg, #e35a4d, #bc3d36);
  color: #fff4e8;
  box-shadow:
    0 9px 21px rgba(186, 58, 49, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.2);
}

.home-secondary-action .home-action-symbol {
  border: 1px solid rgba(224, 207, 184, 0.2);
  background: rgba(18, 20, 20, 0.52);
  color: rgba(226, 212, 193, 0.78);
}

.home-resume-action-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.home-resume-action-detail {
  color: rgba(226, 216, 202, 0.68);
  font: 450 clamp(0.62rem, 1.55vw, 0.76rem)/1.08 var(--reading-font);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.home-resume-action-detail[hidden] {
  display: none !important;
}

.home-progress-section {
  padding-top: clamp(2px, 1vw, 8px);
}

.home-progress-section .home-section-head {
  display: none !important;
}

.home-progress-rail {
  gap: clamp(18px, 4.5vw, 34px) !important;
  padding-top: 4px !important;
  padding-bottom: 18px !important;
}

.home-progress-book,
#inputPanel.home-ambient-active .home-progress-book,
html.theme-dark #inputPanel.home-ambient-active .home-progress-book,
body.theme-dark #inputPanel.home-ambient-active .home-progress-book {
  flex: 0 0 clamp(96px, 23vw, 142px) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  gap: 11px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-progress-book-copy,
#inputPanel.home-ambient-active .home-progress-book-copy {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-progress-cover,
.home-progress-cover.has-image,
.home-progress-cover.has-title-fallback {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 0.64 !important;
  border-radius: 5px !important;
  background: rgba(24, 23, 20, 0.72) !important;
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.31),
    0 0 0 1px rgba(229, 205, 168, 0.07) !important;
}

.home-progress-cover.has-title-fallback {
  color: #d58170 !important;
}

.home-progress-book .home-progress-track {
  margin-top: 3px !important;
}

.home-empty-progress,
#inputPanel.home-ambient-active .home-empty-progress,
html.theme-dark #inputPanel.home-ambient-active .home-empty-progress,
body.theme-dark #inputPanel.home-ambient-active .home-empty-progress {
  padding: 24px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--home-hairline) !important;
  border-bottom: 1px solid var(--home-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home-discover-section {
  padding: clamp(22px, 4.5vw, 42px) 0 clamp(8px, 2vw, 18px);
  border-top: 1px solid var(--home-hairline);
}

.home-discover-section > .home-section-label {
  display: none !important;
}

.home-action-panel,
.home-reading-panel,
#inputPanel.home-ambient-active .home-action-panel,
#inputPanel.home-ambient-active .home-reading-panel,
html.theme-dark #inputPanel.home-ambient-active .home-action-panel,
body.theme-dark #inputPanel.home-ambient-active .home-action-panel,
html.theme-dark #inputPanel.home-ambient-active .home-reading-panel,
body.theme-dark #inputPanel.home-ambient-active .home-reading-panel {
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--home-hairline) !important;
  border-bottom: 1px solid var(--home-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.home-action-card,
.home-reading-card,
.home-add-panel .home-action-card,
.home-reading-panel .home-reading-card {
  height: auto !important;
  min-height: 84px !important;
  max-height: none !important;
  padding: 16px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--home-cream) !important;
  box-shadow: none !important;
}

.home-add-panel .home-action-card {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 12px !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 14px !important;
}

.home-action-card + .home-action-card,
.home-reading-card + .home-reading-card,
.home-add-panel .home-action-card + .home-action-card {
  border-left: 1px solid var(--home-hairline) !important;
}

.home-action-card :is(strong, small),
.home-reading-card :is(strong, small) {
  color: inherit !important;
}

.home-action-card small,
.home-reading-card small {
  color: var(--home-cream-soft) !important;
}

.home-action-icon,
.home-empty-icon,
html.theme-dark #inputPanel .home-action-icon,
body.theme-dark #inputPanel .home-action-icon,
html.theme-dark #inputPanel .home-empty-icon,
body.theme-dark #inputPanel .home-empty-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(222, 165, 99, 0.78) !important;
  box-shadow: none !important;
}

@media (max-width: 620px) {
  #inputPanel:not(.is-menu-subview):not(.is-settings-screen) > .menu-card {
    padding-top: max(22px, calc(env(safe-area-inset-top) + 12px)) !important;
  }

  .menu-main.home-dashboard {
    --home-page-gutter: clamp(20px, 5.2vw, 26px);
    gap: clamp(16px, 2.2vh, 20px) !important;
  }

  .home-hero {
    min-height: 100px;
    padding-top: 4px !important;
  }

  .home-wordmark {
    font-size: clamp(3.45rem, 15.2vw, 4.35rem) !important;
  }

  .home-subtitle {
    margin-top: 12px !important;
    font-size: 0.94rem !important;
  }

  .home-resume-card.has-book,
  .home-resume-card,
  #inputPanel.home-ambient-active .home-resume-card {
    --home-resume-cover-w: clamp(108px, 29vw, 122px) !important;
    --home-resume-gap: clamp(18px, 5vw, 22px) !important;
  }

  .home-resume-card.has-book .home-resume-body,
  .home-resume-body {
    grid-template-columns: var(--home-resume-cover-w) minmax(0, 1fr) !important;
    column-gap: var(--home-resume-gap) !important;
    row-gap: 4px !important;
  }

  .home-resume-card.has-book .home-resume-copy,
  .home-resume-copy {
    display: grid !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    gap: 10px !important;
    padding-top: 28px !important;
  }

  .home-resume-card.has-book .home-resume-cover {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    align-self: start !important;
  }

  .home-resume-copy :is(h3, p, .home-resume-progress),
  .home-primary-action,
  .home-secondary-action {
    grid-column: 1;
  }

  .home-resume-copy h3,
  html.theme-dark .home-resume-copy h3,
  body.theme-dark .home-resume-copy h3 {
    font-size: clamp(1.72rem, 7.8vw, 2.45rem) !important;
    line-height: 0.98 !important;
  }

  .home-resume-copy p,
  html.theme-dark .home-resume-copy p,
  body.theme-dark .home-resume-copy p {
    font-size: 0.9rem !important;
  }

  .home-progress-meta {
    font-size: 0.73rem !important;
  }

  #inputPanel.home-ambient-active .home-resume-actions .home-primary-action,
  #inputPanel.home-ambient-active .home-resume-actions .home-secondary-action {
    height: 43px !important;
    min-height: 43px !important;
    align-items: center !important;
    font-size: 0.85rem !important;
  }

  .home-resume-actions {
    grid-column: 2 !important;
    grid-row: 2 !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 0 !important;
  }

  #inputPanel.home-ambient-active .home-resume-actions .home-primary-action,
  #inputPanel.home-ambient-active .home-resume-actions .home-secondary-action {
    flex: 0 0 auto;
    justify-self: start !important;
    gap: 7px !important;
  }

  .home-resume-card.has-book .home-resume-action-copy {
    display: grid;
    gap: 2px;
    white-space: nowrap;
  }

  .home-resume-card.has-book .home-resume-action-detail {
    color: rgba(232, 221, 207, 0.72);
    font-size: 0.52rem;
    line-height: 1.08;
  }

  .home-resume-card.has-book #homeResumeSecondaryText {
    width: 32px;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.05;
    white-space: normal !important;
  }

  .home-primary-action .home-action-symbol,
  .home-secondary-action .home-action-symbol,
  .home-resume-card.has-book .home-primary-action .home-action-symbol,
  .home-resume-card.has-book .home-secondary-action .home-action-symbol {
    width: 14px !important;
    height: 14px !important;
    padding: 9px;
    align-self: center !important;
    transform: none !important;
  }

  #inputPanel.home-ambient-active .home-progress-book,
  html.theme-dark #inputPanel.home-ambient-active .home-progress-book,
  body.theme-dark #inputPanel.home-ambient-active .home-progress-book {
    flex: 0 0 clamp(64px, 16.5vw, 78px) !important;
  }

  .home-progress-rail {
    gap: clamp(14px, 3.5vw, 20px) !important;
    padding-bottom: 4px !important;
  }

  .home-action-panel {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .home-action-card + .home-action-card,
  .home-reading-card + .home-reading-card,
  .home-add-panel .home-action-card + .home-action-card {
    border-left: 0 !important;
    border-top: 1px solid var(--home-hairline) !important;
  }
}

@media (max-width: 410px) {
  .menu-main.home-dashboard {
    --home-page-gutter: 18px;
  }

  .home-resume-card.has-book,
  .home-resume-card,
  #inputPanel.home-ambient-active .home-resume-card {
    --home-resume-cover-w: clamp(108px, 29vw, 114px) !important;
    --home-resume-gap: 18px !important;
  }

  .home-resume-card.has-book > .home-section-label {
    font-size: 0.58rem !important;
    letter-spacing: 0.19em !important;
  }

  .home-resume-copy h3,
  html.theme-dark .home-resume-copy h3,
  body.theme-dark .home-resume-copy h3 {
    font-size: clamp(1.52rem, 7.4vw, 2rem) !important;
  }

  }

@media (prefers-reduced-motion: reduce) {
  #inputPanel.home-ambient-active .home-ambient-canvas {
    opacity: 0.38;
  }
}

/*
 * Home editorial polish
 * ---------------------
 * Preserve the continuous, panel-free canvas while sharpening the light,
 * reading rail, section transitions, and navigation material.
 */
#inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen),
html.theme-dark #inputPanel.is-open,
body.theme-dark #inputPanel.is-open {
  background:
    radial-gradient(ellipse 86% 46% at 110% -4%, rgba(225, 151, 62, 0.29) 0%, rgba(184, 105, 39, 0.12) 37%, transparent 73%),
    radial-gradient(circle at 86% 12%, rgba(255, 198, 116, 0.075), transparent 18rem),
    linear-gradient(155deg, var(--home-canvas) 0%, #090c0e 43%, var(--home-canvas-deep) 100%) !important;
}

#inputPanel.home-ambient-active .home-ambient-canvas {
  opacity: 0.76;
}

.home-amber-mark {
  border: 0;
  background: none;
  box-shadow: none;
}

.home-resume-card.has-book .home-resume-cover {
  position: relative;
  isolation: isolate;
}

.home-progress-section {
  position: relative;
}

.home-progress-section .home-section-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(13px, 2.2vw, 20px);
}

#inputPanel.home-ambient-active .home-progress-section #homeProgressLabel {
  color: rgba(226, 91, 75, 0.96) !important;
  font-size: clamp(0.61rem, 1.7vw, 0.73rem) !important;
  letter-spacing: 0.23em !important;
}

.home-progress-section .home-view-all {
  display: none !important;
}

.home-progress-rail {
  position: relative;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.home-progress-rail::-webkit-scrollbar {
  display: none;
}

.home-progress-book {
  scroll-snap-align: start;
}

.home-progress-cover,
.home-progress-cover.has-image,
.home-progress-cover.has-title-fallback {
  border-radius: 6px !important;
  box-shadow:
    0 16px 27px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(229, 205, 168, 0.065) !important;
}

.home-progress-book .home-progress-track {
  height: 3px !important;
  background: rgba(224, 215, 202, 0.105) !important;
}

.home-discover-section {
  position: relative;
  border-top: 0;
}

.home-discover-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(221, 84, 71, 0.48), rgba(211, 139, 61, 0.18) 46%, transparent 92%);
}

#homeBottomNav,
.home-bottom-nav,
html.theme-dark #homeBottomNav,
body.theme-dark #homeBottomNav,
html.theme-dark .home-bottom-nav,
body.theme-dark .home-bottom-nav {
  min-height: 70px !important;
  padding:
    7px
    12px
    max(8px, calc(env(safe-area-inset-bottom) * 0.28)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(235, 228, 217, 0.075) !important;
  border-radius: 28px 28px 0 0 !important;
  background:
    linear-gradient(180deg, rgba(29, 30, 35, 0.74), rgba(20, 21, 25, 0.66)) !important;
  box-shadow:
    0 -10px 28px rgba(0, 0, 0, 0.24),
    inset 0 1px rgba(248, 239, 224, 0.035) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.02) !important;
  backdrop-filter: blur(16px) saturate(1.02) !important;
}

.home-bottom-nav button,
html.theme-dark .home-bottom-nav button,
body.theme-dark .home-bottom-nav button {
  min-height: 48px;
  gap: 3px;
  color: rgba(224, 211, 190, 0.57);
  font-size: 0.68rem;
}

.home-bottom-nav button svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.72;
}

.home-bottom-nav button:nth-child(4) svg,
.home-bottom-nav button:nth-child(5) svg {
  width: 23px;
  height: 23px;
}

.home-bottom-nav button.is-active,
html.theme-dark .home-bottom-nav button.is-active,
body.theme-dark .home-bottom-nav button.is-active {
  color: rgba(226, 82, 68, 0.98);
}

.home-bottom-nav button:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: brightness(1.06);
}

@media (max-width: 620px) {
  .menu-main.home-dashboard {
    gap: clamp(17px, 2.35vh, 21px) !important;
  }

  .home-progress-section .home-section-head {
    margin-bottom: 12px;
  }

  #homeBottomNav,
  .home-bottom-nav {
    min-height: 70px !important;
    border-radius: 25px 25px 0 0 !important;
  }
}

/* Home viewport lock: the page pans vertically; only the reading rail pans sideways. */
html:has(#inputPanel.is-open),
body:has(#inputPanel.is-open) {
  max-width: 100%;
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

#inputPanel.is-open {
  width: 100%;
  max-width: 100vw !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none !important;
}

#inputPanel.is-open > .menu-card,
#inputPanel.is-open .menu-main.home-dashboard {
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
  overflow-x: clip;
}

#inputPanel.is-open .home-progress-rail {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* Speed Mode keeps the selected word crisp, without a radial light pool. */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay:not(.has-context):not(.has-chapter-title))
  .focus-stage::before,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #wordDisplay:not(.has-context):not(.has-chapter-title)::before,
body.reader-speed-controls-exiting.has-loaded-text:not(.ebook-mode)
  .reader-panel
  .focus-stage::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

/*
 * Book information — editorial, cover-led detail page
 * --------------------------------------------------
 * Book art and reading actions establish the hierarchy. Supporting metadata
 * stays on the open page and edition-management controls remain tucked into
 * one disclosure at the end.
 */
.book-details-panel {
  --book-info-bg: var(--light-page);
  --book-info-surface: var(--light-panel);
  --book-info-surface-soft: var(--light-cool-panel);
  --book-info-ink: var(--light-ink);
  --book-info-muted: var(--light-muted);
  --book-info-soft: var(--light-quiet);
  --book-info-line: var(--light-line);
  --book-info-line-strong: var(--light-line-strong);
  --book-info-coral: var(--light-accent-ink);
  --book-info-gold: var(--light-accent-ink);
  --book-info-quote: rgba(118, 94, 65, 0.055);
  place-items: start center !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--book-info-bg) !important;
  color: var(--book-info-ink) !important;
  color-scheme: light;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.theme-dark .book-details-panel,
body.theme-dark .book-details-panel {
  --book-info-bg: #0b0d10;
  --book-info-surface: #15171b;
  --book-info-surface-soft: rgba(27, 30, 35, 0.86);
  --book-info-ink: #f2ede3;
  --book-info-muted: rgba(213, 205, 194, 0.69);
  --book-info-soft: rgba(213, 205, 194, 0.5);
  --book-info-line: rgba(231, 223, 211, 0.11);
  --book-info-line-strong: rgba(231, 223, 211, 0.19);
  --book-info-coral: #df5d51;
  --book-info-gold: #c79556;
  --book-info-quote: rgba(255, 248, 237, 0.045);
  background:
    radial-gradient(ellipse 76% 34% at 108% -2%, rgba(204, 139, 67, 0.09), transparent 70%),
    linear-gradient(155deg, #101216 0%, var(--book-info-bg) 56%, #090b0e 100%) !important;
  color-scheme: dark;
}

.book-details-sheet,
html.theme-dark .book-details-sheet,
body.theme-dark .book-details-sheet {
  box-sizing: border-box;
  width: min(100%, 920px) !important;
  max-height: none !important;
  min-height: 100dvh;
  margin: 0 auto !important;
  padding:
    max(20px, calc(env(safe-area-inset-top) + 12px))
    clamp(22px, 5.5vw, 58px)
    max(48px, calc(env(safe-area-inset-bottom) + 32px)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  gap: clamp(26px, 4.2vw, 44px) !important;
  overflow: visible !important;
  background: transparent !important;
  color: var(--book-info-ink) !important;
  box-shadow: none !important;
}

.book-info-header {
  min-height: 44px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
}

.book-info-header-title {
  margin: 0;
  color: var(--book-info-muted);
  font: 720 0.72rem/1 var(--ui-font);
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
}

.book-details-close,
html.theme-dark .book-details-close.collection-back,
body.theme-dark .book-details-close.collection-back {
  position: relative !important;
  inset: auto !important;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--book-info-ink) !important;
  box-shadow: none !important;
}

.book-details-close::before,
.book-details-close::after {
  left: 8px !important;
  right: auto !important;
  top: 21px !important;
  width: 17px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: left center !important;
}

.book-details-close::before {
  transform: rotate(-43deg) !important;
}

.book-details-close::after {
  transform: rotate(43deg) !important;
}

.book-info-more {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  background: transparent;
  color: var(--book-info-ink);
}

.book-info-more > span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}

.book-details-hero {
  width: 100%;
  min-height: 0 !important;
  grid-template-columns: clamp(150px, 29vw, 220px) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: clamp(28px, 6vw, 62px) !important;
  padding: 0 !important;
}

.book-details-cover,
html.theme-dark .book-details-cover,
body.theme-dark .book-details-cover {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: 0.64 !important;
  border: 1px solid var(--book-info-line) !important;
  border-radius: 9px !important;
  background: var(--book-info-surface) !important;
  color: var(--book-info-coral) !important;
  box-shadow:
    0 28px 52px rgba(60, 43, 24, 0.15),
    0 7px 16px rgba(60, 43, 24, 0.09) !important;
}

html.theme-dark .book-details-cover,
body.theme-dark .book-details-cover {
  box-shadow:
    0 28px 54px rgba(0, 0, 0, 0.43),
    0 7px 16px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(229, 205, 168, 0.06) !important;
}

.book-details-cover.has-image,
html.theme-dark .book-details-cover.has-image,
body.theme-dark .book-details-cover.has-image {
  border-color: color-mix(in srgb, var(--book-info-line) 75%, transparent) !important;
  background: transparent !important;
}

.book-details-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.book-details-title-wrap {
  min-width: 0;
  align-content: center !important;
  gap: clamp(10px, 1.8vw, 16px) !important;
  padding: 0 !important;
}

.book-details-source-pill {
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--book-info-coral) !important;
  font: 720 clamp(0.65rem, 1.8vw, 0.82rem)/1.2 var(--ui-font) !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: normal !important;
  box-shadow: none !important;
}

.book-details-title-wrap textarea,
html.theme-dark .book-details-title-wrap textarea,
body.theme-dark .book-details-title-wrap textarea {
  box-sizing: border-box;
  width: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  resize: none !important;
  background: transparent !important;
  color: var(--book-info-ink) !important;
  font: 470 clamp(2rem, 5.5vw, 4rem)/1.03 var(--ui-font) !important;
  letter-spacing: -0.035em !important;
  field-sizing: content;
  box-shadow: none !important;
}

.book-details-author,
html.theme-dark .book-details-author,
body.theme-dark .book-details-author {
  margin: 0 !important;
  color: var(--book-info-muted) !important;
  font: 470 clamp(0.95rem, 2.3vw, 1.18rem)/1.25 var(--ui-font) !important;
}

.book-details-progress-card,
html.theme-dark .book-details-progress-card,
body.theme-dark .book-details-progress-card {
  margin: clamp(4px, 1vw, 10px) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: grid !important;
  gap: 11px !important;
  background: transparent !important;
  color: var(--book-info-muted) !important;
  box-shadow: none !important;
}

.book-details-progress-head {
  min-height: 0 !important;
}

.book-details-progress-head strong,
html.theme-dark .book-details-progress-head strong,
body.theme-dark .book-details-progress-head strong {
  color: var(--book-info-muted) !important;
  font: 570 clamp(0.78rem, 1.9vw, 0.96rem)/1.25 var(--ui-font) !important;
  letter-spacing: 0.01em !important;
}

.book-details-progress-line,
html.theme-dark .book-details-progress-line,
body.theme-dark .book-details-progress-line {
  height: 3px !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: var(--book-info-line) !important;
}

.book-details-progress-line > span {
  border-radius: inherit;
  background: var(--book-info-coral) !important;
}

.book-details-progress-card p,
html.theme-dark .book-details-progress-card p,
body.theme-dark .book-details-progress-card p {
  margin: 0 !important;
  color: var(--book-info-soft) !important;
  font: 470 clamp(0.76rem, 1.8vw, 0.9rem)/1.25 var(--ui-font) !important;
}

.book-details-resume-actions,
html.theme-dark .book-details-resume-actions,
body.theme-dark .book-details-resume-actions {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 clamp(22px, 3.4vw, 32px) !important;
  border-bottom: 1px solid var(--book-info-line) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: clamp(8px, 1.6vw, 12px) !important;
}

.book-details-resume-actions :is(.home-primary-action, .home-secondary-action),
html.theme-dark .book-details-resume-actions :is(.home-primary-action, .home-secondary-action),
body.theme-dark .book-details-resume-actions :is(.home-primary-action, .home-secondary-action) {
  width: 100% !important;
  min-width: 0 !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 clamp(10px, 2vw, 17px) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.5vw, 11px) !important;
  font: 500 clamp(0.9rem, 2.1vw, 1.06rem)/1.05 var(--ui-font) !important;
  box-shadow: none !important;
  transform: none !important;
}

.book-details-resume-actions :is(.home-primary-action, .home-secondary-action) .home-action-symbol {
  position: static !important;
  inset: auto !important;
  order: -1;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  flex: 0 0 auto;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.book-details-resume-actions .home-primary-action {
  border-color: var(--book-info-coral) !important;
  background: var(--book-info-coral) !important;
  color: #fff8ef !important;
}

.book-details-resume-actions .home-primary-action .home-action-symbol {
  color: #fff8ef !important;
}

.book-details-resume-actions .home-secondary-action {
  border-color: var(--book-info-line-strong) !important;
  background: var(--book-info-surface-soft) !important;
  color: var(--book-info-ink) !important;
}

.book-details-resume-actions .home-secondary-action .home-action-symbol {
  color: var(--book-info-muted) !important;
}

.book-info-about,
.book-info-reading {
  display: grid;
  gap: 14px;
}

.book-info-about h2,
.book-info-reading h2 {
  margin: 0;
  color: var(--book-info-ink);
  font: 470 clamp(2rem, 5vw, 3.1rem)/1 var(--ui-font);
  letter-spacing: -0.035em;
}

.book-details-summary,
html.theme-dark .book-details-summary,
body.theme-dark .book-details-summary {
  max-width: 66ch;
  margin: 0 !important;
  color: var(--book-info-muted) !important;
  font: 450 clamp(1rem, 2.3vw, 1.22rem)/1.52 var(--ui-font) !important;
}

.book-details-topics-card,
html.theme-dark .book-details-topics-card,
body.theme-dark .book-details-topics-card {
  min-width: 0;
  margin: -8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  gap: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.book-details-topics-card > .book-details-section-head {
  min-height: 0 !important;
}

.book-details-topics-card .book-details-section-head > span,
html.theme-dark .book-details-topics-card .book-details-section-head > span,
body.theme-dark .book-details-topics-card .book-details-section-head > span {
  color: var(--book-info-muted) !important;
  font: 720 0.7rem/1 var(--ui-font) !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase;
}

.book-details-topic-chips {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
}

.book-details-topic-chip,
html.theme-dark .book-details-topic-chip,
body.theme-dark .book-details-topic-chip {
  min-height: 38px !important;
  padding: 0 16px !important;
  border: 1px solid var(--book-info-line-strong) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--book-info-muted) !important;
  font: 540 clamp(0.78rem, 1.8vw, 0.9rem)/1 var(--ui-font) !important;
  box-shadow: none !important;
  transform: none !important;
}

.book-info-connections {
  position: relative;
  width: 100%;
  min-height: 76px;
  padding: 0 50% 0 clamp(18px, 3vw, 28px);
  border: 1px solid var(--book-info-line-strong);
  border-radius: 14px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--book-info-surface-soft);
  color: var(--book-info-ink);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.book-info-connections > span {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  font: 500 clamp(1.12rem, 3.1vw, 1.48rem)/1 var(--ui-font);
  letter-spacing: -0.02em;
}

.book-info-constellation {
  position: absolute;
  z-index: 1;
  top: 8px;
  right: 42px;
  width: min(46%, 330px);
  height: calc(100% - 16px);
  overflow: visible;
}

.book-info-constellation path {
  fill: none;
  stroke: color-mix(in srgb, var(--book-info-muted) 64%, transparent);
  stroke-width: 1.3;
  vector-effect: non-scaling-stroke;
}

.book-info-row-chevron {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.book-info-connections > .book-info-row-chevron {
  position: absolute;
  z-index: 3;
  right: 17px;
  color: var(--book-info-gold);
}

.book-info-contents {
  width: 100%;
  min-height: 96px;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--book-info-line);
  border-bottom: 1px solid var(--book-info-line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--book-info-ink);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.book-info-contents-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.book-info-contents-copy small {
  color: var(--book-info-muted);
  font: 720 0.68rem/1 var(--ui-font);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.book-info-contents-copy strong {
  overflow: hidden;
  color: var(--book-info-ink);
  font: 480 clamp(1.08rem, 2.8vw, 1.36rem)/1.15 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-info-contents-action {
  color: var(--book-info-coral);
  font: 650 clamp(0.78rem, 1.9vw, 0.92rem)/1 var(--ui-font);
  white-space: nowrap;
}

.book-info-contents > .book-info-row-chevron {
  justify-self: end;
  color: var(--book-info-muted);
}

.book-info-reading {
  padding-top: 2px;
}

.book-details-insights-card,
html.theme-dark .book-details-insights-card,
body.theme-dark .book-details-insights-card {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.book-info-reading-stats {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--book-info-muted);
  font: 500 clamp(0.84rem, 2vw, 1rem)/1.3 var(--ui-font);
}

.book-info-reading-stats i {
  color: var(--book-info-soft);
  font-style: normal;
}

.book-details-quote-card,
html.theme-dark .book-details-quote-card,
body.theme-dark .book-details-quote-card {
  min-width: 0;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  overflow: hidden;
  background: var(--book-info-quote) !important;
  box-shadow: none !important;
}

.book-details-quote-card blockquote,
.book-details-quote-card blockquote.book-details-quote-plain {
  min-height: 68px;
  margin: 0 !important;
  padding: 18px 22px 18px 26px !important;
  border-left: 3px solid var(--book-info-coral);
  display: grid;
  gap: 7px;
  background: transparent !important;
}

.book-details-quote-card blockquote p,
html.theme-dark .book-details-quote-card blockquote p,
body.theme-dark .book-details-quote-card blockquote p {
  margin: 0 !important;
  color: var(--book-info-ink) !important;
  font: italic 470 clamp(1.08rem, 2.7vw, 1.34rem)/1.35 var(--ui-font) !important;
}

.book-details-quote-card blockquote small,
html.theme-dark .book-details-quote-card blockquote small,
body.theme-dark .book-details-quote-card blockquote small {
  color: var(--book-info-soft) !important;
  font: 650 0.68rem/1.2 var(--ui-font) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.book-info-edition {
  border-top: 1px solid var(--book-info-line);
  border-bottom: 1px solid var(--book-info-line);
}

.book-info-edition > summary {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  color: var(--book-info-ink);
  cursor: pointer;
  list-style: none;
  font: 480 clamp(1.08rem, 2.8vw, 1.35rem)/1.2 var(--ui-font);
}

.book-info-edition > summary::-webkit-details-marker {
  display: none;
}

.book-info-edition > summary .book-info-row-chevron {
  justify-self: end;
  color: var(--book-info-muted);
  transition: transform 160ms ease;
}

.book-info-edition[open] > summary .book-info-row-chevron {
  transform: rotate(90deg);
}

.book-info-edition-body {
  display: grid;
  gap: 18px;
  padding: 2px 0 24px;
}

.book-info-edition .book-info-reading {
  gap: 12px !important;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--book-info-line);
}

.book-info-edition .book-details-meta,
html.theme-dark .book-info-edition .book-details-meta,
body.theme-dark .book-info-edition .book-details-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--book-info-line) !important;
  border-radius: 12px !important;
  overflow: hidden;
  background: var(--book-info-surface-soft) !important;
  box-shadow: none !important;
}

.book-info-edition .book-details-meta > div,
html.theme-dark .book-info-edition .book-details-meta > div,
body.theme-dark .book-info-edition .book-details-meta > div {
  min-width: 0;
  padding: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--book-info-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.book-info-edition .book-details-meta > div:nth-child(odd) {
  border-right: 1px solid var(--book-info-line) !important;
}

.book-info-edition .book-details-meta > div:nth-last-child(-n + 2) {
  border-bottom: 0 !important;
}

.book-info-edition .book-details-meta dt,
.book-info-edition .book-details-source-list dt,
html.theme-dark .book-info-edition :is(.book-details-meta dt, .book-details-source-list dt),
body.theme-dark .book-info-edition :is(.book-details-meta dt, .book-details-source-list dt) {
  color: var(--book-info-soft) !important;
}

.book-info-edition .book-details-meta dd,
.book-info-edition .book-details-source-list dd,
html.theme-dark .book-info-edition :is(.book-details-meta dd, .book-details-source-list dd),
body.theme-dark .book-info-edition :is(.book-details-meta dd, .book-details-source-list dd) {
  color: var(--book-info-ink) !important;
}

.book-info-edition .book-details-source-card,
html.theme-dark .book-info-edition .book-details-source-card,
body.theme-dark .book-info-edition .book-details-source-card {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.book-info-edition .book-details-source-list {
  margin: 0;
}

.book-info-edition .book-details-source-list > div {
  padding: 11px 0 !important;
  border-color: var(--book-info-line) !important;
  background: transparent !important;
}

.book-details-secondary-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.book-details-secondary-actions button,
html.theme-dark .book-details-secondary-actions button,
body.theme-dark .book-details-secondary-actions button {
  min-height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid var(--book-info-line-strong) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--book-info-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

.book-details-secondary-actions .book-details-danger,
html.theme-dark .book-details-secondary-actions .book-details-danger,
body.theme-dark .book-details-secondary-actions .book-details-danger {
  color: var(--book-info-coral) !important;
}

.book-details-status,
html.theme-dark .book-details-status,
body.theme-dark .book-details-status {
  min-height: 0;
  margin: -24px 0 0 !important;
  color: var(--book-info-muted) !important;
}

.book-details-status:empty {
  display: none;
}

.book-details-panel :is(button, summary):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--book-info-coral) 72%, transparent) !important;
  outline-offset: 4px !important;
}

.book-details-panel :is(button, summary):active {
  transform: none !important;
  filter: none !important;
  box-shadow: none;
}

@media (max-width: 620px) {
  .book-details-sheet,
  html.theme-dark .book-details-sheet,
  body.theme-dark .book-details-sheet {
    width: 100% !important;
    min-height: 100dvh;
    padding:
      max(12px, calc(env(safe-area-inset-top) + 6px))
      max(20px, calc(env(safe-area-inset-right) + 18px))
      max(36px, calc(env(safe-area-inset-bottom) + 26px))
      max(20px, calc(env(safe-area-inset-left) + 18px)) !important;
    gap: 28px !important;
  }

  .book-details-hero {
    grid-template-columns: clamp(104px, 34vw, 142px) minmax(0, 1fr) !important;
    gap: clamp(18px, 5vw, 28px) !important;
  }

  .book-details-title-wrap {
    gap: 9px !important;
  }

  .book-details-title-wrap textarea,
  html.theme-dark .book-details-title-wrap textarea,
  body.theme-dark .book-details-title-wrap textarea {
    font-size: clamp(1.62rem, 7vw, 2.35rem) !important;
    line-height: 1.02 !important;
  }

  .book-details-source-pill {
    font-size: clamp(0.58rem, 2.4vw, 0.7rem) !important;
  }

  .book-details-resume-actions {
    gap: 8px !important;
  }

  .book-details-resume-actions :is(.home-primary-action, .home-secondary-action),
  html.theme-dark .book-details-resume-actions :is(.home-primary-action, .home-secondary-action),
  body.theme-dark .book-details-resume-actions :is(.home-primary-action, .home-secondary-action) {
    font-size: clamp(0.84rem, 3.2vw, 0.98rem) !important;
  }

  .book-info-connections {
    min-height: 72px;
    padding-left: 18px;
    padding-right: 49%;
  }

  .book-info-connections > span {
    font-size: clamp(1.02rem, 4.4vw, 1.25rem);
  }

  .book-info-constellation {
    right: 36px;
    width: 47%;
  }

  .book-info-contents {
    min-height: 90px;
  }
}

@media (max-width: 370px) {
  .book-details-sheet,
  html.theme-dark .book-details-sheet,
  body.theme-dark .book-details-sheet {
    padding-inline: max(16px, env(safe-area-inset-left)) !important;
  }

  .book-details-hero {
    grid-template-columns: 98px minmax(0, 1fr) !important;
    gap: 15px !important;
  }

  .book-details-resume-actions :is(.home-primary-action, .home-secondary-action) .home-action-symbol {
    width: 14px !important;
    height: 14px !important;
  }

  .book-details-resume-actions {
    gap: 7px !important;
  }

  .book-info-connections > span {
    font-size: 0.98rem;
  }

  .book-info-contents-action {
    display: none;
  }

  .book-info-contents {
    grid-template-columns: minmax(0, 1fr) 20px;
  }
}

/* Missing source imagery becomes a deterministic editorial cover, never a broken-looking placeholder. */
.discover-editorial-cover {
  --cover-bg: #3c4650;
  --cover-ink: #f5efe5;
  --cover-line: rgba(245, 239, 229, 0.34);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: clamp(10px, 7%, 22px);
  border: 0 !important;
  border-radius: inherit;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  place-items: initial !important;
  align-content: stretch;
  gap: clamp(6px, 3%, 11px);
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 13px, color-mix(in srgb, var(--cover-ink) 3%, transparent) 14px),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--cover-ink) 8%, transparent), transparent 35%),
    var(--cover-bg) !important;
  color: var(--cover-ink) !important;
  box-shadow: none !important;
  text-align: left;
  container-type: inline-size;
}

.discover-editorial-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--cover-ink) 15%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.discover-editorial-cover.is-coral {
  --cover-bg: #c97560;
  --cover-ink: #2f201d;
  --cover-line: rgba(47, 32, 29, 0.34);
}

.discover-editorial-cover.is-green {
  --cover-bg: #35483b;
  --cover-ink: #f1eadc;
  --cover-line: rgba(241, 234, 220, 0.32);
}

.discover-editorial-cover.is-blue {
  --cover-bg: #405562;
  --cover-ink: #f3ede2;
  --cover-line: rgba(243, 237, 226, 0.34);
}

.discover-editorial-cover.is-violet {
  --cover-bg: #55465b;
  --cover-ink: #f3ece3;
  --cover-line: rgba(243, 236, 227, 0.34);
}

.discover-editorial-cover.is-graphite {
  --cover-bg: #3b3f46;
  --cover-ink: #f1ece3;
  --cover-line: rgba(241, 236, 227, 0.31);
}

.discover-editorial-cover.is-amber {
  --cover-bg: #e3c995;
  --cover-ink: #3b2c20;
  --cover-line: rgba(59, 44, 32, 0.3);
}

.discover-editorial-cover > small,
.discover-editorial-cover > em {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: inherit !important;
  font-family: var(--ui-font) !important;
  font-style: normal !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-editorial-cover > small {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cover-line);
  font-size: clamp(0.5rem, 4.6cqi, 0.68rem) !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.discover-editorial-cover > strong {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: -webkit-box;
  align-self: start;
  color: inherit !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.86rem, 10.5cqi, 1.68rem) !important;
  font-weight: 480 !important;
  letter-spacing: -0.025em !important;
  line-height: 0.98 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.discover-editorial-cover > em {
  font-size: clamp(0.46rem, 3.8cqi, 0.61rem) !important;
  font-weight: 560 !important;
  letter-spacing: 0.04em;
  line-height: 1.1 !important;
  opacity: 0.78;
}

.discover-editorial-cover-motif {
  position: relative;
  z-index: 1;
  min-height: 28px;
  display: grid;
  overflow: hidden;
  opacity: 0.82;
}

.discover-editorial-cover-motif > i {
  display: block;
  background: var(--cover-line);
}

.discover-editorial-cover.is-article .discover-editorial-cover-motif {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1px;
  align-content: space-between;
  gap: 4px 9px;
}

.discover-editorial-cover.is-article .discover-editorial-cover-motif > i:nth-child(3n) {
  width: 72%;
}

.discover-editorial-cover.is-book .discover-editorial-cover-motif {
  border-top: 1px solid var(--cover-line);
  border-bottom: 1px solid var(--cover-line);
  grid-template-columns: 1fr 0.25fr 1fr 0.4fr;
  gap: 8px;
}

.discover-editorial-cover.is-book .discover-editorial-cover-motif > i {
  width: 1px;
  height: 100%;
}

.discover-editorial-cover.is-document {
  background:
    linear-gradient(90deg, transparent 0 17%, color-mix(in srgb, #b65649 34%, transparent) 17% calc(17% + 1px), transparent calc(17% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 16px, color-mix(in srgb, var(--cover-ink) 9%, transparent) 17px),
    var(--cover-bg) !important;
}

.discover-editorial-cover.is-document .discover-editorial-cover-motif {
  border-top: 1px solid var(--cover-line);
  grid-template-rows: repeat(3, 1px);
  align-content: space-evenly;
  transform: rotate(-2deg);
}

.discover-editorial-cover.is-document .discover-editorial-cover-motif > i:nth-child(n + 4) {
  display: none;
}

.discover-editorial-cover.is-transcript .discover-editorial-cover-motif {
  grid-template-columns: repeat(11, 1fr);
  align-items: center;
  gap: 3px;
}

.discover-editorial-cover.is-transcript .discover-editorial-cover-motif > i {
  width: 1px;
  height: 28%;
  justify-self: center;
}

.discover-editorial-cover.is-transcript .discover-editorial-cover-motif > i:nth-child(2n) { height: 72%; }
.discover-editorial-cover.is-transcript .discover-editorial-cover-motif > i:nth-child(3n) { height: 100%; }
.discover-editorial-cover.is-transcript .discover-editorial-cover-motif > i:nth-child(5n) { height: 48%; }

.discover-editorial-cover.is-research {
  --research-accent: #d6b075;
  min-height: inherit;
  aspect-ratio: auto;
}

.discover-editorial-cover.is-research .discover-editorial-cover-motif {
  border-bottom: 1px solid var(--cover-line);
  border-left: 1px solid var(--cover-line);
  background:
    linear-gradient(var(--cover-line), var(--cover-line)) 15% 72% / 42% 1px no-repeat,
    linear-gradient(31deg, transparent 48%, var(--cover-line) 49% 51%, transparent 52%) 17% 25% / 66% 58% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--cover-ink) 8%, transparent) 1px, transparent 1px) 0 0 / 22% 100%,
    linear-gradient(0deg, color-mix(in srgb, var(--cover-ink) 8%, transparent) 1px, transparent 1px) 0 0 / 100% 33%;
}

.discover-editorial-cover.is-research .discover-editorial-cover-motif > i {
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid var(--cover-ink);
  border-radius: 50%;
  background: var(--cover-bg);
}

.discover-editorial-cover.is-research .discover-editorial-cover-motif > i:nth-child(1) { left: 12%; bottom: 19%; }
.discover-editorial-cover.is-research .discover-editorial-cover-motif > i:nth-child(2) { left: 29%; bottom: 47%; }
.discover-editorial-cover.is-research .discover-editorial-cover-motif > i:nth-child(3) { left: 48%; bottom: 34%; }
.discover-editorial-cover.is-research .discover-editorial-cover-motif > i:nth-child(4) { left: 67%; bottom: 70%; }
.discover-editorial-cover.is-research .discover-editorial-cover-motif > i:nth-child(5) { left: 82%; bottom: 55%; }
.discover-editorial-cover.is-research .discover-editorial-cover-motif > i:nth-child(n + 6) { display: none; }

.discover-editorial-cover.has-image {
  padding: 0;
  background: var(--discover-surface-soft) !important;
}

.discover-editorial-cover.has-image > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

html.theme-dark .discover-editorial-cover,
body.theme-dark .discover-editorial-cover {
  box-shadow: inset 0 0 0 1px rgba(239, 235, 226, 0.05) !important;
}

@container (max-width: 92px) {
  .discover-editorial-cover > small,
  .discover-editorial-cover > em {
    display: none;
  }

  .discover-editorial-cover > strong {
    font-size: clamp(0.62rem, 13cqi, 0.78rem) !important;
    line-height: 1.02 !important;
    -webkit-line-clamp: 3;
  }

  .discover-editorial-cover-motif {
    min-height: 20px;
  }
}

.discover-article-row-art .discover-editorial-cover,
.topic-library-cover .discover-editorial-cover,
.topic-article-thumb .discover-editorial-cover {
  padding: 8px;
  grid-template-rows: minmax(0, 1fr) auto;
}

.discover-article-row-art .discover-editorial-cover > small,
.discover-article-row-art .discover-editorial-cover > em,
.topic-library-cover .discover-editorial-cover > small,
.topic-library-cover .discover-editorial-cover > em,
.topic-article-thumb .discover-editorial-cover > small,
.topic-article-thumb .discover-editorial-cover > em {
  display: none;
}

.discover-article-row-art .discover-editorial-cover > strong,
.topic-library-cover .discover-editorial-cover > strong,
.topic-article-thumb .discover-editorial-cover > strong {
  font-size: clamp(0.58rem, 12cqi, 0.78rem) !important;
  -webkit-line-clamp: 3;
}

.discover-article-row-art .discover-editorial-cover-motif,
.topic-library-cover .discover-editorial-cover-motif,
.topic-article-thumb .discover-editorial-cover-motif {
  min-height: 17px;
}

/*
 * Discover Topics + topic dossiers: continuous editorial canvas
 * --------------------------------------------------------------
 * These views now share Home and Library's panel-free hierarchy. The
 * Knowledge Atlas component is deliberately excluded from this pass.
 */
.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) {
  --discover-page: #f4efe6;
  --discover-sheet: #f4efe6;
  --discover-surface: #faf6ef;
  --discover-surface-soft: #ece5da;
  --discover-text: #292620;
  --discover-muted: #777066;
  --discover-soft: #958c80;
  --discover-line: rgba(64, 55, 43, 0.13);
  --discover-coral: #c65349;
  --discover-coral-strong: #ad4139;
  --discover-amber: #bc8038;
  background:
    radial-gradient(ellipse 88% 38% at 92% 10%, rgba(215, 151, 72, 0.21), transparent 68%),
    radial-gradient(circle at 89% 17%, rgba(225, 171, 94, 0.1) 0 1px, transparent 2px),
    linear-gradient(155deg, #f8f3eb 0%, #f4efe6 48%, #efe9df 100%) !important;
  color: var(--discover-text);
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-ambient-canvas {
  opacity: 0.1 !important;
  filter: sepia(0.5) saturate(0.72) brightness(1.08) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) :is(.discover-sheet, .discover-header) {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header {
  position: relative !important;
  top: auto !important;
  z-index: 4 !important;
  width: min(1160px, 100%) !important;
  min-height: clamp(118px, 18vh, 166px) !important;
  padding:
    max(22px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    14px
    max(22px, env(safe-area-inset-left)) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 18px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header-copy {
  grid-column: 1 !important;
  min-width: 0;
  display: grid !important;
  justify-items: start !important;
  gap: 7px !important;
  text-align: left !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header-copy h2 {
  color: var(--discover-text) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(3.2rem, 9vw, 5rem) !important;
  font-weight: 470 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.045em !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header-copy h2 .brand-red-letter {
  color: inherit !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header-copy p {
  max-width: 48ch;
  color: var(--discover-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.86rem, 2.2vw, 1rem) !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-search-toggle {
  grid-column: 2 !important;
  align-self: end !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-coral) !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 12 !important;
  width: min(1160px, calc(100% - max(38px, calc(env(safe-area-inset-left) + env(safe-area-inset-right))))) !important;
  min-height: 47px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--discover-page) 95%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs button {
  position: relative;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs button::after {
  content: "";
  position: absolute;
  right: 20%;
  bottom: -1px;
  left: 20%;
  height: 2px;
  background: transparent;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs button.is-active {
  color: var(--discover-coral-strong) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs button.is-active::after {
  background: var(--discover-coral) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-content {
  width: min(1160px, 100%) !important;
  max-width: 1160px !important;
  padding:
    4px
    max(20px, env(safe-area-inset-right))
    max(92px, calc(env(safe-area-inset-bottom) + 68px))
    max(20px, env(safe-area-inset-left)) !important;
  gap: 22px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-view {
  gap: clamp(30px, 5vw, 48px) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro {
  max-width: 760px;
  gap: 7px;
  padding: clamp(6px, 1.4vw, 16px) 0 2px;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro h1 {
  max-width: 12ch;
  color: var(--discover-text);
  font-size: clamp(2.7rem, 7vw, 4.8rem);
  font-weight: 470;
  line-height: 0.91;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-grid {
  gap: clamp(13px, 2.2vw, 24px);
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
  min-height: 122px;
  padding: 16px 4px 10px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--topic-color) 50%, var(--discover-line));
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark {
  width: auto;
  height: auto;
  min-height: 26px;
  border: 0;
  border-radius: 0;
  place-items: start;
  background: transparent;
  box-shadow: none;
  font-size: 1rem;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
  font-size: clamp(1.22rem, 3vw, 1.72rem);
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-card {
  min-height: 228px;
  padding: 4px 0 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-art {
  border-radius: 7px;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-card > i {
  width: auto;
  height: auto;
  justify-self: start;
  border-radius: 0;
  background: transparent;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]),
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) {
  --discover-page: #101216;
  --discover-sheet: #101216;
  --discover-surface: #1b1d21;
  --discover-surface-soft: #24262b;
  --discover-text: #f0e9df;
  --discover-muted: #a49d93;
  --discover-soft: #76736f;
  --discover-line: rgba(239, 226, 206, 0.105);
  --discover-coral: #df695d;
  --discover-coral-strong: #eb877a;
  --discover-amber: #daa04f;
  background:
    radial-gradient(ellipse 90% 40% at 92% 10%, rgba(210, 137, 54, 0.18), transparent 68%),
    radial-gradient(circle at 89% 17%, rgba(244, 184, 94, 0.13) 0 1px, transparent 2px),
    linear-gradient(155deg, #13151a 0%, #101216 50%, #0b0d10 100%) !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs {
  background: color-mix(in srgb, var(--discover-page) 94%, transparent) !important;
}

/* Topic pages and dossiers share the same canvas, but Atlas itself is not restyled. */
.topic-discovery-panel:has(.topic-discovery-content:not(.is-knowledge-atlas)) {
  --topic-dossier-page: #f4efe6;
  --topic-dossier-sheet: #f4efe6;
  --topic-dossier-surface: #faf6ef;
  --topic-dossier-surface-soft: #ece5da;
  --topic-dossier-text: #292620;
  --topic-dossier-muted: #777066;
  --topic-dossier-soft: #958c80;
  --topic-dossier-line: rgba(64, 55, 43, 0.13);
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 68%, #ad4139);
  --topic-dossier-shadow: none;
  background:
    radial-gradient(ellipse 88% 38% at 92% 9%, rgba(215, 151, 72, 0.2), transparent 68%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--topic-color) 8%, transparent), transparent 18rem),
    linear-gradient(155deg, #f8f3eb 0%, #f4efe6 48%, #efe9df 100%) !important;
}

html.theme-dark .topic-discovery-panel:has(.topic-discovery-content:not(.is-knowledge-atlas)),
body.theme-dark .topic-discovery-panel:has(.topic-discovery-content:not(.is-knowledge-atlas)) {
  --topic-dossier-page: #101216;
  --topic-dossier-sheet: #101216;
  --topic-dossier-surface: #1b1d21;
  --topic-dossier-surface-soft: #24262b;
  --topic-dossier-text: #f0e9df;
  --topic-dossier-muted: #a49d93;
  --topic-dossier-soft: #76736f;
  --topic-dossier-line: rgba(239, 226, 206, 0.105);
  --topic-dossier-accent: color-mix(in srgb, var(--topic-color) 58%, #eb877a);
  background:
    radial-gradient(ellipse 90% 40% at 92% 9%, rgba(210, 137, 54, 0.18), transparent 68%),
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--topic-color) 7%, transparent), transparent 18rem),
    linear-gradient(155deg, #13151a 0%, #101216 50%, #0b0d10 100%) !important;
}

.topic-discovery-panel:has(.topic-discovery-content:not(.is-knowledge-atlas)) .topic-ambient-canvas {
  opacity: 0.1 !important;
  filter: sepia(0.42) saturate(0.78) !important;
}

.topic-discovery-panel:has(.topic-discovery-content:not(.is-knowledge-atlas)) .topic-discovery-sheet {
  background: transparent !important;
}

.topic-discovery-panel:has(.topic-discovery-content:not(.is-knowledge-atlas)) .topic-discovery-close {
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--topic-dossier-text) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.topic-discovery-content:has(.topic-atlas-first) {
  width: min(1080px, 100%) !important;
  padding:
    calc(66px + env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(56px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left)) !important;
}

.topic-atlas-first {
  gap: clamp(30px, 5vw, 48px) !important;
}

.topic-atlas-first::before,
.topic-atlas-first-hero-mark::before,
.topic-atlas-first-hero-mark::after,
.topic-editorial-reading::before,
.topic-signature-section::before {
  display: none !important;
}

.topic-atlas-first-hero {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 18px 32px !important;
  padding: clamp(18px, 4vw, 38px) 0 3px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topic-atlas-first-hero > div:first-child {
  gap: 9px !important;
}

.topic-atlas-first-hero h2 {
  max-width: 14ch !important;
  font-size: clamp(3.4rem, 8vw, 6.4rem) !important;
  font-weight: 470 !important;
  line-height: 0.88 !important;
}

.topic-atlas-first-hero > div:first-child > span {
  max-width: 46ch !important;
  color: var(--topic-dossier-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.92rem, 1.8vw, 1.08rem) !important;
  font-weight: 450 !important;
  line-height: 1.42 !important;
}

.topic-atlas-first-hero-mark {
  width: auto !important;
  min-width: 76px;
  height: auto !important;
  align-self: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  justify-items: end !important;
  gap: 5px !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 0.42;
}

.topic-atlas-first-hero-mark b {
  color: color-mix(in srgb, var(--topic-color) 56%, var(--topic-dossier-muted)) !important;
  font-size: clamp(2rem, 5vw, 4rem) !important;
  font-weight: 470 !important;
}

.topic-atlas-first-hero-mark i {
  color: var(--topic-dossier-soft) !important;
  font-size: 0.5rem !important;
  letter-spacing: 0.16em !important;
}

.topic-atlas-first-actions {
  grid-column: 1 / -1 !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

.topic-atlas-first-actions .topic-follow-button,
.topic-atlas-first-actions > button:last-child {
  min-height: 40px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--topic-color) 42%, var(--topic-dossier-line)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topic-atlas-first-actions .topic-follow-button {
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
}

.topic-atlas-first-actions > button:last-child {
  padding: 0 4px !important;
}

.topic-editorial-reading,
.topic-signature-section {
  gap: 14px !important;
}

.topic-editorial-reading > header,
.topic-signature-section > header,
.topic-atlas-first-footer {
  padding-inline: 0 !important;
}

.topic-editorial-read {
  min-height: 92px !important;
  padding: 11px 2px !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--read-color) 30%, var(--topic-dossier-line)) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topic-editorial-read.is-featured {
  min-height: 276px !important;
  padding: 16px 2px !important;
}

.topic-editorial-read-art {
  border: 0 !important;
  border-radius: 7px !important;
  background: color-mix(in srgb, var(--read-color) 7%, var(--topic-dossier-surface-soft)) !important;
}

.topic-editorial-read-copy em {
  -webkit-line-clamp: 2 !important;
}

.topic-signature-grid {
  gap: clamp(12px, 2vw, 22px) !important;
}

.topic-signature-grid > button {
  min-height: 148px !important;
  padding: 14px 2px !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--signature-color) 48%, var(--topic-dossier-line)) !important;
  border-radius: 0 !important;
  grid-template-rows: auto auto 1fr !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topic-signature-grid > button > span {
  width: auto !important;
  min-height: 27px;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  justify-content: start !important;
  background: transparent !important;
}

.topic-signature-grid > button em {
  display: none !important;
}

.topic-atlas-first .topic-discovery-section:has(.topic-research-list) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topic-atlas-first .topic-discovery-section:has(.topic-research-list) > h3 {
  margin-bottom: 9px;
  color: var(--topic-dossier-text) !important;
  font-size: clamp(1.65rem, 4vw, 2.3rem) !important;
}

.topic-atlas-first .topic-library-row {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topic-atlas-first-footer {
  min-height: 90px !important;
  padding: 20px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--topic-dossier-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.topic-atlas-first-footer > button {
  min-height: 40px !important;
  padding: 0 3px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--topic-color) 42%, var(--topic-dossier-line)) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Entity and people dossiers: editorial biography/source pages, not panels. */
.topic-discovery-content.is-entity-dossier {
  width: min(980px, 100%) !important;
  max-width: 980px !important;
  padding:
    calc(66px + env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    max(54px, env(safe-area-inset-bottom))
    max(22px, env(safe-area-inset-left)) !important;
}

@media (max-width: 760px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header {
    min-height: 96px !important;
    padding-top: max(13px, env(safe-area-inset-top)) !important;
    padding-bottom: 7px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header-copy h2 {
    font-size: clamp(2.75rem, 12vw, 3.55rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-content {
    padding-right: max(14px, env(safe-area-inset-right)) !important;
    padding-left: max(14px, env(safe-area-inset-left)) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-grid {
    gap: 12px;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
    min-height: 118px;
    padding-top: 13px;
  }

  .topic-discovery-content:has(.topic-atlas-first),
  .topic-discovery-content.is-entity-dossier {
    padding-top: calc(54px + env(safe-area-inset-top)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  .topic-atlas-first {
    gap: 28px !important;
  }

  .topic-atlas-first-hero {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 14px !important;
    padding-top: 18px !important;
  }

  .topic-atlas-first-hero h2 {
    font-size: clamp(3rem, 14vw, 4.65rem) !important;
  }

  .topic-atlas-first-hero-mark {
    min-width: 52px;
  }

  .topic-atlas-first-actions > button:last-child {
    width: auto !important;
    padding: 0 3px !important;
    color: var(--topic-dossier-text) !important;
    font-size: 0.67rem !important;
  }

  .topic-atlas-first-actions > button:last-child::before {
    content: none !important;
  }

  .topic-editorial-reading-grid {
    gap: 0 !important;
  }

  .topic-editorial-read.is-featured {
    min-height: 0 !important;
    grid-template-columns: minmax(82px, 27%) minmax(0, 1fr) 16px !important;
    padding: 13px 1px !important;
    border-radius: 0 !important;
  }

  .topic-editorial-read:not(.is-featured) {
    min-height: 98px !important;
    padding: 10px 1px !important;
  }

  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid,
  .topic-signature-grid {
    grid-auto-columns: clamp(160px, 49vw, 205px) !important;
    gap: 14px !important;
    padding-right: 18px !important;
  }

  .topic-signature-section:is(.is-literature, .is-nature, .is-history, .is-technology) .topic-signature-grid > button,
  .topic-signature-grid > button {
    min-height: 145px !important;
    padding: 13px 1px !important;
  }

  .topic-atlas-first-footer {
    align-items: start !important;
    gap: 14px !important;
  }

  .topic-atlas-first-footer > button {
    text-align: left;
  }

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  }

@media (max-width: 380px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  
  }

/* Final Topics tile cascade: follows the broader Topics visual pass above. */
.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
  position: relative !important;
  isolation: isolate;
  min-height: 150px !important;
  padding: 17px 12px 14px !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--topic-color) 54%, var(--discover-line)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--topic-color) 12%, var(--discover-line)) !important;
  border-radius: 0 !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 1fr auto !important;
  align-items: end !important;
  gap: 12px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 92% 13%, color-mix(in srgb, var(--topic-color) 13%, transparent), transparent 46%),
    linear-gradient(145deg, color-mix(in srgb, var(--topic-color) 3.5%, transparent), transparent 66%) !important;
  box-shadow: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card::before {
  content: "";
  position: absolute;
  top: -26px;
  right: -18px;
  z-index: -1;
  width: 112px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--topic-color) 16%, transparent);
  border-radius: 50%;
  opacity: 0.58;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark {
  position: absolute !important;
  top: 16px !important;
  right: 13px !important;
  width: 42px !important;
  height: 42px !important;
  min-height: 0 !important;
  border: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--topic-color) 68%, var(--discover-text)) !important;
  opacity: 0.72;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark svg {
  width: 31px !important;
  height: 31px !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
  position: relative;
  z-index: 1;
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: end !important;
  max-width: 11ch;
  color: var(--discover-text) !important;
  font-size: clamp(1.35rem, 3vw, 1.9rem) !important;
  font-weight: 520 !important;
  line-height: 0.98 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > small {
  display: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > i {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: end !important;
  margin: 0 3px 4px 0 !important;
  color: color-mix(in srgb, var(--topic-color) 72%, var(--discover-text)) !important;
}

@media (max-width: 760px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
    min-height: 138px !important;
    padding: 15px 10px 13px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark {
    top: 13px !important;
    right: 10px !important;
    width: 37px !important;
    height: 37px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark svg {
    width: 27px !important;
    height: 27px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
    font-size: clamp(1.08rem, 4.2vw, 1.35rem) !important;
  }
}

/* Final phone-density cascade for the Topics landing. */
.discover-panel .discover-tabs,
html.theme-dark .discover-panel .discover-tabs,
body.theme-dark .discover-panel .discover-tabs,
.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs {
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs {
  margin-bottom: 8px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-content {
  gap: 12px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-view {
  gap: 18px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro {
  gap: 4px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro h1 {
  font-size: clamp(2.55rem, 6.4vw, 4.35rem) !important;
  line-height: 0.92 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choices {
  gap: 7px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choices > header,
.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choices > header > button {
  min-height: 34px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-grid {
  gap: 9px 12px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
  min-height: 124px !important;
  padding: 13px 10px 11px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark {
  top: 11px !important;
  right: 9px !important;
  width: 35px !important;
  height: 35px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-mark svg {
  width: 25px !important;
  height: 25px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
  width: 100%;
  max-width: none !important;
  padding-right: 2px;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  font-size: clamp(1.13rem, 2.7vw, 1.55rem) !important;
  line-height: 1 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-shelves {
  gap: 24px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-content-shelf {
  gap: 8px !important;
}

@media (max-width: 760px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-header {
    min-height: 88px !important;
    padding-bottom: 4px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs {
    min-height: 43px !important;
    margin-bottom: 6px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-tabs button {
    min-height: 42px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-view {
    gap: 16px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro h1 {
    font-size: clamp(2.35rem, 10.5vw, 3.15rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topics-compact-intro > span {
    font-size: 0.77rem !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card {
    min-height: 118px !important;
    padding: 12px 9px 10px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="topics"][aria-selected="true"]) .discover-topic-choice-card > strong {
    font-size: clamp(1.02rem, 4vw, 1.24rem) !important;
  }
}

/*
 * Keep playback instruments dim from the first Page-word tap through the
 * Speed handoff. Once play begins, settle their playing opacities immediately
 * before releasing the temporary parent dim so no full-opacity frame appears.
 */
body.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-context-release-dimming
  #readerBottomDock {
  opacity: 0.42 !important;
  transition: opacity 220ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-context-release-dimming.is-playing
  #readerBottomDock
  > .slider-row {
  opacity: 0.64 !important;
  transition: opacity 240ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-context-release-dimming.is-playing
  #readerBottomDock
  :is(.progress-meta, .progress-track) {
  opacity: 0.46 !important;
  transition: opacity 240ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-context-release-dimming.is-playing
  #readerBottomDock
  .controls
  > #textPanelButton.bottom-home-button {
  opacity: 0.46 !important;
  transition: opacity 220ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-context-release-dimming.is-playing
  #readerBottomDock
  #playButton.play-control-button {
  opacity: 0.64 !important;
  transition: opacity 220ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

/* The progress keeps its real saved width and fades in with its row. */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  .progress-fill {
  animation: none !important;
  clip-path: none !important;
  filter: none !important;
}

/*
 * Page Mode selection
 * -------------------
 * One page-local ink stroke follows the word's text Range. It shares the
 * page's scroll/transition coordinates and never changes the text layout.
 */
body:not(.ebook-mode)
  .word-display.has-context:not(.is-context-highlight-gliding)
  .context-token.is-current,
body:not(.ebook-mode) > .context-selection-glider {
  --page-selection-line-strong: rgba(195, 59, 53, 0.92);
  --page-selection-line-soft: rgba(220, 92, 75, 0.44);
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--page-selection-line-soft) 5%,
      var(--page-selection-line-strong) 19%,
      var(--page-selection-line-strong) 76%,
      var(--page-selection-line-soft) 94%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 8%,
      var(--page-selection-line-soft) 28%,
      var(--page-selection-line-soft) 72%,
      transparent 94%
    ) !important;
  background-repeat: no-repeat !important;
  background-position:
    center calc(100% - 0.02em),
    center 100% !important;
  background-size:
    100% max(2px, 0.105em),
    82% max(1px, 0.04em) !important;
  color: inherit !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html.theme-dark
  body:not(.ebook-mode)
  .word-display.has-context:not(.is-context-highlight-gliding)
  .context-token.is-current,
body.theme-dark:not(.ebook-mode)
  .word-display.has-context:not(.is-context-highlight-gliding)
  .context-token.is-current,
html.theme-dark body:not(.ebook-mode) > .context-selection-glider,
body.theme-dark:not(.ebook-mode) > .context-selection-glider {
  --page-selection-line-strong: rgba(235, 100, 91, 0.95);
  --page-selection-line-soft: rgba(205, 66, 60, 0.55);
  background-color: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

html.theme-dark
  body:not(.ebook-mode)
  .word-display.has-context:not(.is-context-highlight-gliding)
  .context-token.is-current.is-dialogue,
body.theme-dark:not(.ebook-mode)
  .word-display.has-context:not(.is-context-highlight-gliding)
  .context-token.is-current.is-dialogue,
body:not(.ebook-mode)
  .word-display.has-context:not(.is-context-highlight-gliding)
  .context-token.is-current.is-dialogue {
  color: var(--dialogue-word-color, inherit) !important;
}

body:not(.ebook-mode)
  .word-display.has-context
  .context-token.is-current
  .context-token-pivot {
  color: inherit !important;
  text-shadow: none !important;
}

body:not(.ebook-mode)
  .word-display.has-context.is-context-landing
  .context-token.is-current {
  animation: none !important;
}

body:not(.ebook-mode)
  .word-display.has-context.is-context-landing
  .context-token.is-current::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body:not(.ebook-mode)
  .word-display.has-context:not(.is-context-highlight-gliding)
  .context-token.is-current::before {
  content: none !important;
  display: none !important;
  pointer-events: none !important;
  animation: none !important;
}

body:not(.ebook-mode)
  .word-display.has-context.is-context-exiting
  .context-token.is-current {
  background: transparent !important;
  box-shadow: none !important;
  transition: background-color 90ms ease-out, box-shadow 90ms ease-out !important;
}

body:not(.ebook-mode)
  .word-display.has-context.is-context-exiting
  .context-token.is-current::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body:not(.ebook-mode) .word-display.has-context.has-context-page-style .context-token.is-current {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.context-page-word-marker {
  --page-marker-ink: rgba(185, 75, 67, 0.94);
  --page-marker-edge: rgba(185, 75, 67, 0.42);
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(90deg, transparent, var(--page-marker-edge) 5%,
    var(--page-marker-ink) 17%, var(--page-marker-ink) 83%, var(--page-marker-edge) 95%, transparent);
  box-shadow: none;
  z-index: 1;
}

html.theme-dark .context-page-word-marker,
body.theme-dark .context-page-word-marker {
  --page-marker-ink: rgba(232, 135, 122, 0.94);
  --page-marker-edge: rgba(232, 135, 122, 0.42);
}

.word-display:is(.is-context-entry-prep, .is-context-entering, .is-context-exiting)
  .context-page-word-marker {
  visibility: hidden;
}

/* Book Info: exact Home resume composition, without the Home card shell. */
.book-details-sheet,
html.theme-dark .book-details-sheet,
body.theme-dark .book-details-sheet {
  gap: clamp(18px, 2.6vw, 26px) !important;
}

.book-info-resume,
html.theme-dark .book-info-resume,
body.theme-dark .book-info-resume {
  --home-resume-cover-w: clamp(126px, 24vw, 188px);
  --home-resume-gap: clamp(20px, 3.6vw, 38px);
  position: relative !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.book-info-resume::before,
.book-info-resume::after {
  display: none !important;
}

.book-info-resume > .home-section-label {
  position: absolute !important;
  z-index: 2;
  top: 0 !important;
  left: calc(var(--home-resume-cover-w) + var(--home-resume-gap)) !important;
  max-width: calc(100% - var(--home-resume-cover-w) - var(--home-resume-gap)) !important;
  margin: 0 !important;
  color: var(--book-info-coral) !important;
  font: 720 clamp(0.64rem, 1.65vw, 0.75rem)/1 var(--ui-font) !important;
  letter-spacing: 0.21em !important;
  text-transform: uppercase;
}

.book-info-resume > .home-resume-body {
  display: grid !important;
  grid-template-columns: var(--home-resume-cover-w) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: clamp(18px, 2.8vw, 25px) var(--home-resume-gap) !important;
  min-width: 0;
  width: 100%;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.book-info-resume.home-resume-card.has-book .home-resume-cover {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  min-width: 0;
}

.book-info-resume :is(.book-details-cover, .home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback),
html.theme-dark .book-info-resume :is(.book-details-cover, .home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback),
body.theme-dark .book-info-resume :is(.book-details-cover, .home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback) {
  width: var(--home-resume-cover-w) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  aspect-ratio: 0.64 !important;
  border-radius: 8px !important;
  background: rgba(31, 29, 25, 0.08) !important;
  box-shadow:
    0 17px 30px rgba(38, 31, 24, 0.18),
    0 0 0 1px rgba(67, 56, 43, 0.08) !important;
}

html.theme-dark .book-info-resume :is(.book-details-cover, .home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback),
body.theme-dark .book-info-resume :is(.book-details-cover, .home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback) {
  background: rgba(27, 27, 27, 0.72) !important;
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(229, 220, 207, 0.07) !important;
}

.book-info-resume .book-details-title-wrap.home-resume-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  align-self: stretch !important;
  gap: clamp(11px, 1.8vw, 17px) !important;
  min-width: 0;
  width: 100%;
  padding: clamp(31px, 4vw, 43px) 0 0 !important;
}

.book-info-resume .home-resume-copy > h1 {
  max-width: 15ch !important;
  margin: 0 !important;
  color: var(--book-info-ink) !important;
  font: 470 clamp(2rem, 5.4vw, 3.45rem)/0.99 var(--ui-font) !important;
  letter-spacing: -0.033em !important;
  text-wrap: balance;
}

.book-info-resume .home-resume-copy > .book-details-author,
html.theme-dark .book-info-resume .home-resume-copy > .book-details-author,
body.theme-dark .book-info-resume .home-resume-copy > .book-details-author {
  margin: 0 !important;
  overflow: hidden;
  color: var(--book-info-muted) !important;
  font: 450 clamp(0.9rem, 2vw, 1.08rem)/1.3 var(--ui-font) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-info-resume .book-details-progress-card.home-resume-progress,
html.theme-dark .book-info-resume .book-details-progress-card.home-resume-progress,
body.theme-dark .book-info-resume .book-details-progress-card.home-resume-progress {
  width: 100% !important;
  margin: clamp(8px, 1.3vw, 13px) 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: grid !important;
  gap: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.book-info-resume .home-progress-track,
html.theme-dark .book-info-resume .home-progress-track,
body.theme-dark .book-info-resume .home-progress-track {
  width: 100%;
  height: 3px !important;
  border-radius: 99px !important;
  overflow: hidden;
  background: var(--book-info-line) !important;
}

.book-info-resume .home-progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit !important;
  background: var(--book-info-coral) !important;
}

.book-info-resume .home-progress-meta,
html.theme-dark .book-info-resume .home-progress-meta,
body.theme-dark .book-info-resume .home-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--book-info-soft) !important;
  font: 450 clamp(0.72rem, 1.7vw, 0.88rem)/1.2 var(--ui-font) !important;
}

.book-info-resume .home-progress-meta > :first-child {
  color: var(--book-info-coral) !important;
}

.book-info-resume .home-resume-actions,
html.theme-dark .book-info-resume .home-resume-actions,
body.theme-dark .book-info-resume .home-resume-actions {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(14px, 2.2vw, 20px) 0 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: stretch !important;
  gap: clamp(8px, 1.6vw, 12px) !important;
}

.book-info-resume .home-resume-actions > :is(.home-primary-action, .home-secondary-action),
html.theme-dark .book-info-resume .home-resume-actions > :is(.home-primary-action, .home-secondary-action),
body.theme-dark .book-info-resume .home-resume-actions > :is(.home-primary-action, .home-secondary-action) {
  grid-row: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 clamp(10px, 2vw, 17px) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.5vw, 11px) !important;
  color: #fff8ef !important;
  font: 470 clamp(0.94rem, 2.1vw, 1.1rem)/1.08 var(--ui-font) !important;
  box-shadow: none !important;
  transform: none !important;
}

.book-info-resume .home-resume-actions > .home-primary-action {
  grid-column: 1 !important;
  border-color: var(--book-info-coral) !important;
  background: var(--book-info-coral) !important;
}

.book-info-resume .home-resume-actions > .home-secondary-action {
  grid-column: 2 !important;
  width: clamp(118px, 22vw, 150px) !important;
  border-color: var(--book-info-line-strong) !important;
  background: var(--book-info-surface-soft) !important;
  color: var(--book-info-ink) !important;
}

.book-info-resume .home-resume-actions .home-action-symbol {
  position: static !important;
  inset: auto !important;
  order: -1;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.book-info-resume .home-primary-action .home-action-symbol {
  color: #fff8ef !important;
}

.book-info-resume .home-secondary-action .home-action-symbol {
  color: var(--book-info-muted) !important;
}

.book-info-about,
.book-info-reading {
  gap: 10px !important;
}

.book-info-about .book-details-summary {
  display: block !important;
}

.book-info-about h2,
.book-info-reading h2 {
  font-size: clamp(1.82rem, 4.5vw, 2.7rem) !important;
}

.book-details-topics-card,
html.theme-dark .book-details-topics-card,
body.theme-dark .book-details-topics-card {
  margin-top: -2px !important;
  gap: 10px !important;
}

.book-info-connections {
  min-height: 68px !important;
}

.book-info-contents {
  min-height: 82px !important;
  padding-block: 14px !important;
}

@media (max-width: 620px) {
  .book-details-sheet,
  html.theme-dark .book-details-sheet,
  body.theme-dark .book-details-sheet {
    gap: 20px !important;
  }

  .book-info-resume {
    --home-resume-cover-w: clamp(102px, 27vw, 119px);
    --home-resume-gap: clamp(15px, 4.1vw, 19px);
  }

  .book-info-resume > .home-resume-body {
    row-gap: 15px !important;
  }

  .book-info-resume .book-details-title-wrap.home-resume-copy {
    gap: 10px !important;
    padding-top: 27px !important;
  }

  .book-info-resume .home-resume-copy > h1 {
    max-width: 12ch !important;
    font-size: clamp(1.55rem, 7.3vw, 2.18rem) !important;
    line-height: 0.99 !important;
  }

  .book-info-resume .home-resume-copy > .book-details-author {
    font-size: clamp(0.77rem, 3.25vw, 0.9rem) !important;
  }

  .book-info-resume .book-details-progress-card.home-resume-progress {
    gap: 6px !important;
    margin-top: 6px !important;
  }

  .book-info-resume .home-progress-meta {
    gap: 7px !important;
    font-size: clamp(0.61rem, 2.65vw, 0.72rem) !important;
  }

  .book-info-resume .home-progress-meta > :last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .book-info-resume .home-resume-actions {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding-top: 13px !important;
  }

  .book-info-resume .home-resume-actions > :is(.home-primary-action, .home-secondary-action) {
    grid-row: 1 !important;
    min-height: 48px !important;
    height: 48px !important;
    gap: 8px !important;
    padding-inline: 9px !important;
    font-size: clamp(0.78rem, 3.15vw, 0.91rem) !important;
  }

  .book-info-resume .home-resume-actions > .home-primary-action {
    grid-column: 1 !important;
  }

  .book-info-resume .home-resume-actions > .home-secondary-action {
    grid-column: 2 !important;
    width: clamp(108px, 30vw, 126px) !important;
  }

  .book-info-resume .home-resume-actions .home-action-symbol {
    width: 14px !important;
    height: 14px !important;
  }
}

@media (max-width: 370px) {
  .book-info-resume {
    --home-resume-cover-w: 94px;
    --home-resume-gap: 13px;
  }

  .book-info-resume .home-resume-copy > h1 {
    font-size: 1.42rem !important;
  }
}

/* Shared destination masthead: one stable title position across primary tabs. */
:root {
  --destination-page-gutter: clamp(18px, 4.9vw, 48px);
  --destination-page-top: max(14px, calc(env(safe-area-inset-top) + 5px));
  --destination-title-size: clamp(3.55rem, 15.2vw, 6rem);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) > .menu-card {
  padding-top: var(--destination-page-top) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
  --home-page-gutter: var(--destination-page-gutter) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero,
.discover-panel .discover-header {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero {
  padding-top: 0 !important;
  padding-bottom: 2px !important;
  align-content: start !important;
  align-items: start !important;
}

.discover-panel .discover-header,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header {
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  width: min(920px, 100%) !important;
  margin-inline: auto !important;
  padding:
    var(--destination-page-top)
    var(--destination-page-gutter)
    4px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-content: start !important;
  align-items: start !important;
}

/* Discover is not nested inside the menu card, so give it the small optical
   inset that Home and Library inherit from their shared shell. */
.discover-panel .discover-header,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header {
  padding-top: calc(var(--destination-page-top) + 4px) !important;
}

.discover-panel .discover-header-copy,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header-copy {
  grid-column: 1 !important;
  min-width: 0;
  display: grid !important;
  justify-items: start !important;
  gap: 0 !important;
  text-align: left !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-wordmark,
.discover-panel .discover-header-copy h2,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header-copy h2 {
  margin: 0 !important;
  font-family: var(--ui-font) !important;
  font-size: var(--destination-title-size) !important;
  font-weight: 470 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.047em !important;
}

.discover-panel .discover-header-copy h2 .brand-red-letter {
  color: var(--discover-coral) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle,
.discover-panel .discover-header-copy p,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header-copy p {
  min-height: 1.25em;
  margin: 10px 0 0 !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.88rem, 2.4vw, 1rem) !important;
  font-weight: 450 !important;
  line-height: 1.25 !important;
}

#inputPanel.is-open:has(
  > .menu-card > #menuMain:not([hidden]):not(.is-destination-cascading)
) .home-hero,
.discover-panel:not([hidden]):not(.is-destination-cascading) .discover-header {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.discover-panel .discover-search-toggle,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-search-toggle {
  margin-top: 5px !important;
  align-self: start !important;
}

/* Book Info resume controls: keep the Home button surfaces authoritative.
   IDs deliberately isolate these rules from the older Book Info button stack. */
#bookDetailsPanel #bookDetailsResumeFocusButton,
#bookDetailsPanel #bookDetailsResumePageButton {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 clamp(10px, 2vw, 17px) !important;
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.5vw, 11px) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  font: 470 clamp(0.94rem, 2.1vw, 1.1rem)/1.08 var(--ui-font) !important;
  transform: none !important;
}

#bookDetailsPanel #bookDetailsResumeFocusButton {
  border-color: #c95549 !important;
  background: #c95549 !important;
  color: #fff8ef !important;
  -webkit-text-fill-color: #fff8ef !important;
}

#bookDetailsPanel #bookDetailsResumePageButton {
  width: clamp(118px, 22vw, 150px) !important;
  border-color: rgba(82, 68, 51, 0.22) !important;
  background: #f7f2e9 !important;
  color: #24211e !important;
  -webkit-text-fill-color: #24211e !important;
}

#bookDetailsPanel #bookDetailsResumeFocusButton .home-action-symbol,
#bookDetailsPanel #bookDetailsResumePageButton .home-action-symbol {
  position: static !important;
  inset: auto !important;
  order: -1 !important;
  box-sizing: border-box !important;
  width: 16px !important;
  height: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#bookDetailsPanel #bookDetailsResumeFocusButton .home-action-symbol {
  color: #fff8ef !important;
}

#bookDetailsPanel #bookDetailsResumePageButton .home-action-symbol {
  color: #746d64 !important;
}

html.theme-dark #bookDetailsPanel #bookDetailsResumeFocusButton,
body.theme-dark #bookDetailsPanel #bookDetailsResumeFocusButton {
  border-color: #df5d51 !important;
  background: #df5d51 !important;
  color: #fff8ef !important;
  -webkit-text-fill-color: #fff8ef !important;
}

html.theme-dark #bookDetailsPanel #bookDetailsResumePageButton,
body.theme-dark #bookDetailsPanel #bookDetailsResumePageButton {
  border-color: rgba(231, 223, 211, 0.2) !important;
  background: #1b1e23 !important;
  color: #f2ede3 !important;
  -webkit-text-fill-color: #f2ede3 !important;
}

html.theme-dark #bookDetailsPanel #bookDetailsResumePageButton .home-action-symbol,
body.theme-dark #bookDetailsPanel #bookDetailsResumePageButton .home-action-symbol {
  color: rgba(213, 205, 194, 0.69) !important;
}

@media (max-width: 620px) {
  #bookDetailsPanel #bookDetailsResumeFocusButton,
  #bookDetailsPanel #bookDetailsResumePageButton {
    min-height: 48px !important;
    height: 48px !important;
    gap: 8px !important;
    padding-inline: 9px !important;
    font-size: clamp(0.78rem, 3.15vw, 0.91rem) !important;
  }

  #bookDetailsPanel #bookDetailsResumeFocusButton .home-action-symbol,
  #bookDetailsPanel #bookDetailsResumePageButton .home-action-symbol {
    width: 14px !important;
    height: 14px !important;
  }

  #bookDetailsPanel #bookDetailsResumePageButton {
    width: clamp(108px, 30vw, 126px) !important;
  }
}

/* Book Info chosen quote: size the panel from its actual contents. */
#bookDetailsQuote,
html.theme-dark #bookDetailsQuote,
body.theme-dark #bookDetailsQuote {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  align-self: start !important;
}

#bookDetailsQuote > blockquote,
#bookDetailsQuote > blockquote.book-details-quote-plain {
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  padding: clamp(11px, 2vw, 15px) 20px clamp(11px, 2vw, 15px) 23px !important;
}

/* Shared related-reading shelf for saved Book Info and Discover book previews. */
.book-info-related {
  min-width: 0;
  display: grid;
  gap: clamp(28px, 5vw, 44px);
}

.related-reading-module {
  --related-ink: var(--book-info-ink, #24211e);
  --related-muted: var(--book-info-muted, #756e65);
  --related-soft: var(--book-info-soft, #9a9288);
  --related-line: var(--book-info-line, rgba(73, 61, 47, 0.15));
  --related-line-strong: var(--book-info-line-strong, rgba(83, 69, 52, 0.22));
  --related-surface: var(--book-info-surface-soft, rgba(255, 252, 246, 0.7));
  --related-accent: var(--book-info-coral, #c95549);
  min-width: 0;
  display: grid;
  gap: clamp(15px, 2.5vw, 22px);
}

.related-reading-header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.related-reading-header h2 {
  margin: 0;
  color: var(--related-ink);
  font: 470 clamp(1.82rem, 4.5vw, 2.7rem)/1 var(--ui-font);
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.related-reading-header > div {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.related-reading-header > div > small {
  color: var(--related-accent);
  font: 650 0.65rem/1.3 var(--ui-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.related-reading-header > button {
  min-width: 0;
  min-height: 40px;
  margin: 0 -10px -7px 0;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--related-accent);
  box-shadow: none;
  font: 650 0.78rem/1 var(--ui-font);
  white-space: nowrap;
  transform: none;
}

.related-reading-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(148px, 28vw, 188px);
  align-items: start;
  gap: clamp(14px, 2.6vw, 22px);
  padding-block: 2px 9px;
  scroll-snap-type: x proximity;
}

.related-reading-card {
  --related-card-accent: var(--related-accent);
  appearance: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  align-content: start;
  gap: 7px;
  background: transparent;
  color: var(--related-ink);
  box-shadow: none;
  text-align: left;
  scroll-snap-align: start;
  transform: none;
}

.related-reading-card.is-articles {
  --related-card-accent: #a36d2c;
}

.related-reading-card.is-research {
  --related-card-accent: #657d6c;
}

.related-reading-art {
  position: relative;
  width: 100%;
  aspect-ratio: 0.73;
  margin-bottom: 3px;
  border: 1px solid var(--related-line-strong);
  border-radius: 9px;
  overflow: hidden;
  display: block;
  background: var(--related-surface);
  box-shadow: 0 13px 25px rgba(48, 38, 27, 0.12);
}

html.theme-dark .related-reading-art,
body.theme-dark .related-reading-art {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
}

.related-reading-art > img,
.related-reading-art > .discover-editorial-cover {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  object-fit: cover;
  box-shadow: none !important;
}

.related-reading-kind {
  color: var(--related-card-accent);
  font: 720 0.61rem/1 var(--ui-font);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.related-reading-card > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--related-ink);
  font: 540 clamp(0.97rem, 2.3vw, 1.1rem)/1.16 var(--ui-font);
  letter-spacing: -0.015em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.related-reading-card > small {
  display: -webkit-box;
  min-height: 2.4em;
  overflow: hidden;
  color: var(--related-soft);
  font: 560 0.65rem/1.25 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.related-reading-card.is-books > strong {
  font-family: var(--ui-font);
  font-weight: 650;
  letter-spacing: -0.012em;
}

.related-reading-card.is-books > small {
  font-family: var(--ui-font);
  font-weight: 540;
  letter-spacing: 0;
}

.related-reading-reason {
  align-self: start;
  display: -webkit-box;
  overflow: hidden;
  color: var(--related-muted);
  font: 500 0.71rem/1.35 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.related-reading-card:is(:hover, :focus-visible) .related-reading-art {
  border-color: color-mix(in srgb, var(--related-card-accent) 46%, var(--related-line-strong));
}

.related-reading-card:focus-visible,
.related-reading-header > button:focus-visible,
.related-reading-fallback:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--related-accent) 64%, transparent);
  outline-offset: 4px;
}

.related-reading-card:is(:active, .is-tactile-press),
.related-reading-header > button:is(:active, .is-tactile-press),
.related-reading-fallback:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

.related-reading-fallback {
  width: 100%;
  min-height: 74px;
  padding: 15px 17px;
  border: 1px solid var(--related-line-strong);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--related-surface);
  color: var(--related-ink);
  box-shadow: none;
  text-align: left;
  transform: none;
}

.related-reading-fallback > span {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.related-reading-fallback strong {
  font: 520 clamp(1rem, 2.5vw, 1.18rem)/1.15 var(--ui-font);
}

.related-reading-fallback small {
  color: var(--related-muted);
  font: 520 0.7rem/1.3 var(--ui-font);
}

.related-reading-fallback > i {
  color: var(--related-accent);
  font: 500 1.2rem/1 var(--ui-font);
  font-style: normal;
}

.related-reading-card.is-placeholder {
  min-height: 286px;
  border: 1px solid var(--related-line);
  border-radius: 10px;
  background:
    linear-gradient(var(--related-line), var(--related-line)) 12px calc(100% - 58px) / 72% 10px no-repeat,
    linear-gradient(var(--related-line), var(--related-line)) 12px calc(100% - 37px) / 48% 7px no-repeat,
    var(--related-surface);
  pointer-events: none;
}

@media (max-width: 620px) {
  .related-reading-module {
    gap: 14px;
  }

  .related-reading-header h2 {
    font-size: clamp(1.5rem, 7vw, 1.88rem);
  }

  .related-reading-rail {
    grid-auto-columns: clamp(142px, 42vw, 168px);
    gap: 14px;
  }

  .related-reading-card.is-placeholder {
    min-height: 264px;
  }
}

/* Chapters: rise from the dock control with a soft, native-feeling pop. */
@keyframes chapter-menu-backdrop-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes chapter-menu-sheet-pop {
  0% {
    opacity: 0;
    transform: translate3d(12px, 22px, 0) scale(0.94);
  }
  68% {
    opacity: 1;
    transform: translate3d(-1px, -2px, 0) scale(1.008);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

html body .chapter-panel.chapter-popup:not([hidden]) {
  animation: chapter-menu-backdrop-reveal 190ms ease-out both !important;
}

html body .chapter-panel.chapter-popup:not([hidden]) .chapter-sheet {
  transform-origin: calc(100% - 28px) 100% !important;
  will-change: opacity, transform;
  animation: chapter-menu-sheet-pop 330ms cubic-bezier(0.2, 0.82, 0.24, 1) both !important;
}

@media (prefers-reduced-motion: reduce) {
  html body .chapter-panel.chapter-popup:not([hidden]),
  html body .chapter-panel.chapter-popup:not([hidden]) .chapter-sheet {
    animation: none !important;
  }
}

/* Reader menu: separate minimal material actions. */
body.has-loaded-text .reader-panel > .top-bar > #textSizeButton,
body.has-loaded-text .ebook-reader > .ebook-top-bar > #ebookTextSizeButton,
body.ebook-mode .reader-panel #textSizeButton {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.reader-menu-symbol,
.reader-menu-symbol :is(path, circle) {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.75 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.reader-quick-menu {
  position: fixed !important;
  right: max(18px, calc(env(safe-area-inset-right) + 18px)) !important;
  bottom: max(90px, calc(env(safe-area-inset-bottom) + 80px)) !important;
  z-index: 1390 !important;
  width: min(268px, calc(100vw - 28px)) !important;
  padding: 0 !important;
  display: grid !important;
  gap: 8px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform-origin: calc(100% - 20px) 100% !important;
  opacity: 1 !important;
  transition: none !important;
  animation: reader-quick-menu-pop 90ms cubic-bezier(0.22, 0.72, 0.2, 1) both !important;
}

.reader-quick-menu[hidden],
body:has(#inputPanel.is-open) .reader-quick-menu {
  display: none !important;
}

.reader-quick-menu-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reader-quick-menu-tile,
.reader-quick-menu-content {
  position: relative !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  border-radius: 17px !important;
  background: rgba(32, 33, 37, 0.91) !important;
  color: inherit !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.3),
    0 3px 9px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
  backdrop-filter: blur(28px) saturate(145%) !important;
  animation: none !important;
  transition: background-color 130ms ease, border-color 130ms ease !important;
}

.reader-quick-menu-tile strong,
.reader-quick-menu-content strong {
  color: rgba(255, 255, 255, 0.94) !important;
  font: 590 0.72rem/1.08 var(--ui-font) !important;
  letter-spacing: -0.01em;
}

.reader-quick-menu-source strong {
  max-width: 66px;
}

.reader-quick-menu-speaking {
  --legend-line: rgba(214, 216, 224, 0.48);
  --legend-node-ring: rgba(242, 239, 232, 0.4);
  --legend-coral: #cc6258;
  --legend-blue: #5d87b4;
  --legend-teal: #58a093;
}

.reader-quick-menu-speaking::after {
  display: none !important;
  content: none !important;
}

.reader-quick-menu-speaking strong {
  max-width: 72px;
  font-size: 0.66rem !important;
  line-height: 1.06 !important;
}

.reader-quick-menu-speaking-icon,
.reader-quick-menu-speaking .character-legend-symbol {
  width: 26px;
  height: 26px;
  overflow: visible;
}

.reader-quick-menu-speaking .legend-constellation-line {
  fill: none !important;
  stroke: var(--legend-line) !important;
  stroke-width: 1.25 !important;
}

.reader-quick-menu-speaking .legend-speaker-node {
  stroke: var(--legend-node-ring) !important;
  stroke-width: 0.95 !important;
}

.reader-quick-menu-speaking .legend-speaker-node-coral {
  fill: var(--legend-coral) !important;
}

.reader-quick-menu-speaking .legend-speaker-node-blue {
  fill: var(--legend-blue) !important;
}

.reader-quick-menu-speaking .legend-speaker-node-teal {
  fill: var(--legend-teal) !important;
}

.reader-quick-menu-content {
  width: 100% !important;
  min-height: 56px !important;
  padding: 0 14px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 9px !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
}

.reader-quick-menu-content strong {
  font-size: 0.88rem !important;
}

.reader-quick-menu-tile:is(:hover, :focus-visible),
.reader-quick-menu-content:is(:hover, :focus-visible) {
  outline: 0 !important;
  border-color: rgba(255, 255, 255, 0.17) !important;
  background: rgba(43, 44, 49, 0.94) !important;
}

.reader-quick-menu-tile:is(:active, .is-tactile-press),
.reader-quick-menu-content:is(:active, .is-tactile-press) {
  background: rgba(49, 50, 55, 0.95) !important;
  filter: none !important;
}

.reader-quick-menu-chevron {
  width: 7px;
  height: 7px;
  justify-self: end;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: rgba(255, 255, 255, 0.42);
  transform: rotate(45deg);
}

html.theme-dark .reader-quick-menu,
body.theme-dark .reader-quick-menu {
  background: transparent !important;
}

body > #fontSizePopover {
  position: fixed !important;
  top: auto !important;
  right: max(12px, calc(env(safe-area-inset-right) + 10px)) !important;
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px)) !important;
  left: auto !important;
  z-index: 1500 !important;
}

body > #fontSizePopover[hidden] {
  display: none !important;
}

@keyframes reader-quick-menu-pop {
  0% {
    opacity: 1;
    transform: translate3d(0, 5px, 0) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 390px) {
  .reader-quick-menu {
    right: max(12px, calc(env(safe-area-inset-right) + 12px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reader-quick-menu {
    animation: none !important;
  }
}

/* Production wordmark splash: the approved wave-and-whip motion study. */
.onboarding-overlay[data-step="intro"],
html.theme-dark .onboarding-overlay[data-step="intro"],
body.theme-dark .onboarding-overlay[data-step="intro"] {
  background: #020202 !important;
  color: #f5f1e8 !important;
  animation: none !important;
}

.rhythm-intro-stage,
html.theme-dark .rhythm-intro-stage,
body.theme-dark .rhythm-intro-stage,
html:not(.theme-dark) body:not(.theme-dark) .rhythm-intro-stage {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.018) 0, transparent 32%),
    radial-gradient(circle at 78% 12%, rgba(195, 91, 81, 0.012) 0, transparent 24%),
    #020202 !important;
}

.rhythm-intro-stage::after,
html.theme-dark .rhythm-intro-stage::after,
body.theme-dark .rhythm-intro-stage::after {
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 24%, rgba(0, 0, 0, 0.72) 100%) !important;
}

.rhythm-intro-brand,
html.theme-dark .rhythm-intro-brand,
body.theme-dark .rhythm-intro-brand {
  top: 43%;
  display: grid;
  width: min(820px, calc(100vw - 32px));
  height: clamp(190px, 24vh, 230px);
  padding: 0;
  place-items: center;
  color: #f5f1e8 !important;
  transform: translate(-50%, -50%);
}

.onboarding-overlay.is-leaving .rhythm-intro-brand,
.onboarding-overlay[data-step="cards"] .rhythm-intro-brand {
  transform: translate(-50%, calc(-50% - 18px));
}

.rhythm-intro-hint,
html.theme-dark .rhythm-intro-hint,
body.theme-dark .rhythm-intro-hint {
  position: absolute;
  top: calc(50% + clamp(72px, 11vw, 104px));
  left: 50%;
  margin: 0;
  color: rgba(245, 241, 232, 0.48) !important;
  opacity: 0;
  animation: none !important;
  transform: translate(-50%, 4px);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.78, 0.26, 1);
}

.rhythm-intro-stage.is-wordmark-settled.is-app-ready .rhythm-intro-hint {
  opacity: 0.72;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  
  .rhythm-intro-hint {
    transition: none;
  }
}

/* Final shared wordmark and stable splash-to-Home contract. */

/* A close-set custom lockup: the serifs kiss without merging the counters. */

.home-wordmark.is-logo-handoff-target {
  visibility: hidden !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero .home-subtitle {
  margin-top: 16px !important;
}

.onboarding-overlay[data-step="intro"],
html.theme-dark .onboarding-overlay[data-step="intro"],
body.theme-dark .onboarding-overlay[data-step="intro"] {
  background: transparent !important;
}

.rhythm-intro-stage,
html.theme-dark .rhythm-intro-stage,
body.theme-dark .rhythm-intro-stage,
html:not(.theme-dark) body:not(.theme-dark) .rhythm-intro-stage {
  background: transparent !important;
}

.rhythm-intro-stage::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  z-index: -2 !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.018) 0, transparent 32%),
    radial-gradient(circle at 78% 12%, rgba(195, 91, 81, 0.012) 0, transparent 24%),
    #020202 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: opacity 500ms cubic-bezier(0.32, 0.02, 0.18, 1) !important;
}

.rhythm-intro-stage::after {
  z-index: -1 !important;
  opacity: 1 !important;
  transition: opacity 500ms cubic-bezier(0.32, 0.02, 0.18, 1) !important;
}

/* The app shell is always an ordinary, fully painted layer. The opaque splash
 * backdrop alone owns launch, so WebKit never reparents fixed descendants
 * between transformed and untransformed containing blocks. */
html.onboarding-primed .app-shell,
html.onboarding-revealing .app-shell {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.onboarding-overlay.is-logo-handoff .rhythm-intro-stage::before,
.onboarding-overlay.is-logo-handoff .rhythm-intro-stage::after {
  opacity: 0 !important;
}

.onboarding-overlay:is(.is-logo-handoff-flight, .is-logo-handoff) .rhythm-intro-hint,
.onboarding-overlay:is(.is-logo-handoff-flight, .is-logo-handoff) .rhythm-intro-wordmark-glow,
.onboarding-overlay:is(.is-logo-handoff-flight, .is-logo-handoff) .rhythm-intro-baseline-shadow {
  opacity: 0 !important;
  transition-duration: 120ms !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  opacity: 0.9 !important;
  border: 1px solid rgba(185, 74, 64, 0.36) !important;
  border-radius: 12px !important;
  background: rgba(201, 85, 73, 0.15) !important;
  color: rgba(177, 69, 60, 0.9) !important;
  box-shadow: none !important;
  filter: none !important;
}

html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button {
  border-color: rgba(223, 93, 81, 0.32) !important;
  background: rgba(223, 93, 81, 0.14) !important;
  color: rgba(235, 111, 97, 0.86) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button
  .play-symbol {
  width: 20px !important;
  height: 20px !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock
  #playButton.play-control-button {
  opacity: 0.64 !important;
  border-color: rgba(185, 74, 64, 0.26) !important;
  background: rgba(201, 85, 73, 0.1) !important;
  color: rgba(177, 69, 60, 0.78) !important;
}

html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock
  #playButton.play-control-button,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock
  #playButton.play-control-button {
  border-color: rgba(223, 93, 81, 0.23) !important;
  background: rgba(223, 93, 81, 0.09) !important;
  color: rgba(235, 111, 97, 0.72) !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  opacity: 0.42 !important;
  border: 1px solid rgba(116, 92, 69, 0.24) !important;
  border-radius: 12px !important;
  background: rgba(201, 85, 73, 0.06) !important;
  color: rgba(166, 69, 59, 0.68) !important;
  box-shadow: none !important;
  filter: none !important;
}

html.theme-dark
  body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button,
body.theme-dark.reader-context-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #readerBottomDock
  #playButton.play-control-button {
  border-color: rgba(224, 228, 236, 0.15) !important;
  background: rgba(223, 93, 81, 0.045) !important;
  color: rgba(231, 103, 86, 0.58) !important;
}

/*
 * Speed chapter interstitial — quiet reading pause
 * ------------------------------------------------
 * One chapter label, the shared display serif and reading time on the reader
 * surface. Keep the entrance opacity-only so the reader remains stable on
 * iOS Safari while a chapter boundary is paused.
 */
body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-chapter-title) {
  --chapter-optical-center-y: 46dvh;
  --speed-chapter-ink: var(--ink);
  --speed-chapter-muted: var(--light-muted);
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-chapter-title)
  .focus-stage::before,
body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

html.theme-dark body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #wordDisplay.has-chapter-title::before,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel
  #wordDisplay.has-chapter-title::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  animation: none !important;
}

body.has-loaded-text:not(.ebook-mode) .word-display.has-chapter-title {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding:
    max(78px, calc(env(safe-area-inset-top) + 62px))
    max(18px, env(safe-area-inset-right))
    max(106px, calc(env(safe-area-inset-bottom) + 88px))
    max(18px, env(safe-area-inset-left)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
  background: transparent !important;
  white-space: normal !important;
  pointer-events: none !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-card {
  box-sizing: border-box !important;
  position: fixed !important;
  left: 50% !important;
  top: var(--chapter-optical-center-y) !important;
  width: min(calc(100vw - 56px), 520px) !important;
  min-width: 0 !important;
  max-width: 520px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: clamp(12px, 2vw, 16px) !important;
  justify-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--speed-chapter-ink) !important;
  text-align: center !important;
  transform: translate(-50%, -50%) !important;
  filter: none !important;
  opacity: 1;
  animation:
    speed-chapter-editorial-arrive
    210ms
    cubic-bezier(0.22, 1, 0.36, 1)
    both !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-card::before {
  content: none !important;
  display: none !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-card::after {
  content: none !important;
  display: none !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-kicker {
  display: block !important;
  margin: 0 !important;
  color: var(--speed-chapter-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.78rem, 2.2vw, 0.85rem) !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-kicker::before,
body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-kicker::after {
  content: none !important;
  display: none !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-heading {
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  max-width: min(100%, 20ch) !important;
  margin: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
  color: var(--speed-chapter-ink) !important;
  font-family: var(--heading-font) !important;
  font-size: clamp(2rem, 6.6vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1.14 !important;
  letter-spacing: -0.02em !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-card.is-long-title
  .speed-chapter-heading {
  max-width: min(100%, 22ch) !important;
  font-size: clamp(1.8rem, 5.8vw, 2.6rem) !important;
  line-height: 1.18 !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-card.is-very-long-title
  .speed-chapter-heading {
  max-width: min(100%, 26ch) !important;
  font-size: clamp(1.55rem, 5.2vw, 2.2rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-meta {
  margin: 0 !important;
  color: var(--speed-chapter-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.8rem, 2.2vw, 0.87rem) !important;
  font-weight: 450 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

html.theme-dark body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-chapter-title),
body.theme-dark.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-chapter-title) {
  --speed-chapter-muted: #adb0b8;
}

@keyframes speed-chapter-editorial-arrive {
  from {
    opacity: 0.46;
  }

  to {
    opacity: 1;
  }
}

@media (max-height: 700px) {
  body.has-loaded-text:not(.ebook-mode)
    .reader-panel:has(#wordDisplay.has-chapter-title) {
    --chapter-optical-center-y: 45dvh;
  }

  body.has-loaded-text:not(.ebook-mode)
    #wordDisplay.has-chapter-title
    .speed-chapter-card {
    gap: 12px !important;
    padding-block: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.has-loaded-text:not(.ebook-mode)
    #wordDisplay.has-chapter-title
    .speed-chapter-card {
    animation: none !important;
  }
}

/* Book opening — the selected cover remains the visual anchor while the
 * saved package is read, then yields to the painted reader surface. */
.book-open-transition {
  --book-open-progress: 0%;
  position: fixed;
  inset: 0;
  z-index: 5200;
  overflow: hidden;
  isolation: isolate;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

.book-open-transition-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.72), transparent 42%),
    #f2eee5;
}

.book-open-transition-wash {
  position: absolute;
  inset: -14%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(68px) saturate(0.82);
  opacity: 0;
  transform: scale(1.12);
}

.book-open-transition.has-artwork-wash .book-open-transition-wash {
  opacity: 0.18;
}

.book-open-transition-stage {
  position: fixed;
  z-index: 2;
  box-sizing: border-box;
  border-radius: clamp(5px, 1.7vw, 10px);
  overflow: hidden;
  transform-origin: 0 0;
  will-change: transform, opacity;
}

.book-open-transition-artwork,
.book-open-transition-stage > :is(
  .book-details-cover,
  .home-book-cover,
  .home-progress-cover,
  .library-feature-cover,
  .collection-cover,
  .editorial-fallback-cover
) {
  position: relative !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  transform: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

.book-open-transition-artwork > img,
.book-open-transition-artwork.has-image > img,
.book-open-transition-stage img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Keep image edges visible while loading; only generated covers breathe. */
.book-open-transition-stage.is-holding .book-open-transition-artwork:not(.has-image) {
  animation: bookOpenCoverBreathe 1700ms ease-in-out infinite alternate;
}

.book-open-transition-stage::after {
  position: absolute;
  inset: -30% -70%;
  z-index: 3;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 58%
  );
  content: "";
  opacity: 0;
  transform: translateX(-36%);
  pointer-events: none;
}

.book-open-transition-stage.is-holding::after {
  animation: bookOpenCoverSheen 2100ms ease-in-out infinite;
}

.book-open-transition-copy {
  position: fixed;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 7px;
  color: rgba(38, 39, 43, 0.94);
  text-align: center;
  pointer-events: none;
}

.book-open-transition-copy strong,
.book-open-transition-copy span {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-open-transition-copy strong {
  font: 500 clamp(1rem, 3.2vw, 1.28rem)/1.08 var(--ui-font);
  letter-spacing: -0.018em;
}

.book-open-transition-copy span {
  color: rgba(67, 68, 73, 0.66);
  font: 650 0.7rem/1.1 var(--ui-font);
  letter-spacing: 0.045em;
}

.book-open-transition-copy > i {
  position: relative;
  width: min(112px, 62%);
  height: 2px;
  margin-top: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(59, 61, 66, 0.12);
}

.book-open-transition-copy > i::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #d86459;
  content: "";
  transform: translateX(calc(var(--book-open-progress) - 100%));
  transition: transform 220ms ease-out;
}

body.is-book-opening .global-load-indicator {
  opacity: 0 !important;
  pointer-events: none !important;
}

html.theme-dark .book-open-transition-backdrop,
body.theme-dark .book-open-transition-backdrop {
  background:
    radial-gradient(circle at 50% 42%, rgba(76, 79, 88, 0.26), transparent 44%),
    #111318;
}

html.theme-dark .book-open-transition.has-artwork-wash .book-open-transition-wash,
body.theme-dark .book-open-transition.has-artwork-wash .book-open-transition-wash {
  opacity: 0.14;
}

html.theme-dark .book-open-transition-copy,
body.theme-dark .book-open-transition-copy {
  color: rgba(240, 237, 231, 0.94);
}

html.theme-dark .book-open-transition-copy span,
body.theme-dark .book-open-transition-copy span {
  color: rgba(216, 213, 207, 0.58);
}

html.theme-dark .book-open-transition-copy > i,
body.theme-dark .book-open-transition-copy > i {
  background: rgba(235, 232, 225, 0.12);
}

html.theme-dark .book-open-transition-copy > i::after,
body.theme-dark .book-open-transition-copy > i::after {
  background: #e06f64;
}

@keyframes bookOpenCoverBreathe {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(0, -1.5px, 0) scale(1.012);
  }
}

@keyframes bookOpenCoverSheen {
  0%,
  38% {
    opacity: 0;
    transform: translateX(-36%);
  }

  52% {
    opacity: 0.52;
  }

  70%,
  100% {
    opacity: 0;
    transform: translateX(36%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-open-transition,
  .book-open-transition * {
    animation: none !important;
    transition: none !important;
  }
}

/*
 * Unified reader panel
 * --------------------
 * Appearance, Contents, and Who's Speaking share one quiet graphite surface.
 * The first view carries the frequent controls directly; deeper destinations
 * return to it instead of stacking another popover over the reader chrome.
 */
.reader-quick-menu {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1450 !important;
  width: auto !important;
  height: auto !important;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  display: grid !important;
  align-items: end !important;
  justify-items: end !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(8, 9, 12, 0.44) !important;
  color: rgba(244, 241, 235, 0.95) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(7px) saturate(0.82) !important;
  backdrop-filter: blur(7px) saturate(0.82) !important;
  transform: none !important;
  transform-origin: 100% 100% !important;
  animation: reader-panel-backdrop-in 170ms ease-out both !important;
}

.reader-quick-menu[hidden],
body:has(#inputPanel.is-open) .reader-quick-menu {
  display: none !important;
}

.reader-quick-menu-sheet {
  box-sizing: border-box;
  width: min(430px, calc(100vw - 24px));
  height: min(720px, calc(100dvh - 24px));
  min-height: min(560px, calc(100dvh - 24px));
  max-height: calc(100dvh - 24px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(224, 226, 233, 0.12);
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% -8%, rgba(255, 255, 255, 0.075), transparent 36%),
    radial-gradient(circle at 96% 2%, rgba(205, 99, 86, 0.06), transparent 28%),
    linear-gradient(158deg, rgba(33, 34, 39, 0.995), rgba(18, 19, 23, 0.995));
  box-shadow:
    0 36px 96px rgba(0, 0, 0, 0.52),
    0 9px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  animation: reader-panel-sheet-in 440ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.reader-quick-menu-header {
  min-height: 78px;
  padding: 17px 17px 15px 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(220, 222, 229, 0.09);
}

.reader-quick-menu-header > span {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.reader-quick-menu-header small {
  color: rgba(211, 105, 92, 0.84);
  font: 710 0.58rem/1 var(--ui-font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.reader-quick-menu-header h2 {
  margin: 0;
  color: rgba(245, 242, 237, 0.96);
  font: 560 1.34rem/1.08 var(--ui-font);
  letter-spacing: -0.018em;
}

.reader-quick-menu-close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(222, 224, 231, 0.11);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  color: rgba(230, 231, 235, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.reader-quick-menu-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}

.reader-quick-menu-close:is(:hover, :focus-visible) {
  border-color: rgba(226, 228, 234, 0.2);
  background: rgba(255, 255, 255, 0.075);
  color: rgba(247, 244, 238, 0.94);
  outline: 1px solid rgba(221, 223, 230, 0.16);
  outline-offset: 2px;
}

.reader-quick-menu-scroll {
  min-height: 0;
  padding: 0 16px 18px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(219, 221, 228, 0.18) transparent;
}

.reader-quick-menu-appearance {
  min-width: 0;
}

.reader-quick-menu #fontSizePopover.font-size-popover {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  display: grid !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-heading {
  min-height: 43px !important;
  padding: 15px 3px 8px !important;
  border: 0 !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-heading > span {
  color: rgba(239, 237, 232, 0.9) !important;
  font-size: 0.78rem !important;
  font-weight: 690 !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-heading > small {
  color: rgba(184, 185, 191, 0.58) !important;
  font-size: 0.56rem !important;
  font-weight: 620 !important;
  letter-spacing: 0.09em !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-scroll {
  padding: 0 !important;
  gap: 0 !important;
  display: grid !important;
  overflow: visible !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-size > button,
.reader-quick-menu #fontSizePopover .reader-appearance-size > button:is(:hover, :focus-visible, :active) {
  border: 1px solid rgba(222, 224, 231, 0.1) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(241, 239, 234, 0.9) !important;
  box-shadow: none !important;
  transform: none !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-size small,
.reader-quick-menu #fontSizePopover .reader-appearance-font small,
.reader-quick-menu #fontSizePopover .reader-appearance-more small,
.reader-quick-menu #fontSizePopover .theme-toggle-copy small {
  color: rgba(181, 182, 188, 0.62) !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-size-scale::before {
  background: rgba(215, 217, 224, 0.13) !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-size-scale::after,
.reader-quick-menu #fontSizePopover .reader-appearance-size-stop.is-active::after {
  background: rgba(211, 105, 92, 0.94) !important;
}

.reader-quick-menu #fontSizePopover .theme-toggle-copy strong,
.reader-quick-menu #fontSizePopover .reader-appearance-font strong,
.reader-quick-menu #fontSizePopover .reader-appearance-more strong {
  color: rgba(240, 238, 233, 0.92) !important;
}

.reader-quick-menu #fontSizePopover .theme-toggle-switch {
  border-color: rgba(220, 222, 229, 0.14) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.reader-quick-menu #fontSizePopover .font-size-theme-toggle.is-active .theme-toggle-switch {
  background: rgba(80, 143, 130, 0.52) !important;
}

.reader-quick-menu #fontSizePopover .reader-appearance-dialogue-colours {
  padding: 12px 3px 10px !important;
  border-bottom: 1px solid rgba(220, 222, 229, 0.075) !important;
}

.reader-quick-menu-actions {
  margin-top: 8px;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  border-top: 1px solid rgba(220, 222, 229, 0.075);
}

.reader-quick-menu-row,
.reader-quick-menu-content {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) 14px !important;
  align-items: center !important;
  gap: 11px !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(220, 222, 229, 0.075) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(241, 239, 234, 0.92) !important;
  box-shadow: none !important;
  text-align: left !important;
  transition: color 130ms ease, background-color 130ms ease !important;
}

.reader-quick-menu-row[hidden] {
  display: none !important;
}

.reader-quick-menu-row:is(:hover, :focus-visible),
.reader-quick-menu-content:is(:hover, :focus-visible) {
  border-color: rgba(220, 222, 229, 0.075) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: rgba(250, 248, 243, 0.98) !important;
  outline: 0 !important;
}

.reader-quick-menu-row:is(:active, .is-tactile-press),
.reader-quick-menu-content:is(:active, .is-tactile-press) {
  background: rgba(255, 255, 255, 0.035) !important;
  filter: none !important;
  transform: none !important;
}

.reader-quick-menu-row-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: rgba(204, 206, 214, 0.72);
}

.reader-quick-menu-row-icon svg {
  width: 23px;
  height: 23px;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reader-quick-menu-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.reader-quick-menu-row .reader-quick-menu-row-copy strong {
  max-width: none !important;
  color: inherit !important;
  font: 650 0.82rem/1.15 var(--ui-font) !important;
  letter-spacing: -0.006em;
}

.reader-quick-menu-row-copy small {
  color: rgba(179, 181, 188, 0.62);
  font: 520 0.62rem/1.2 var(--ui-font);
}

.reader-quick-menu-speaking-icon,
.reader-quick-menu-speaking .character-legend-symbol {
  width: 25px;
  height: 25px;
  overflow: visible;
}

.reader-quick-menu-speaking .legend-constellation-line {
  fill: none !important;
  stroke: rgba(207, 209, 216, 0.42) !important;
  stroke-width: 1.2 !important;
}

.reader-quick-menu-speaking .legend-speaker-node {
  stroke: rgba(238, 235, 230, 0.36) !important;
  stroke-width: 0.9 !important;
}

.reader-quick-menu-speaking .legend-speaker-node-coral { fill: #cc6258 !important; }
.reader-quick-menu-speaking .legend-speaker-node-blue { fill: #5d87b4 !important; }
.reader-quick-menu-speaking .legend-speaker-node-teal { fill: #58a093 !important; }

.reader-quick-menu-chevron {
  width: 7px;
  height: 7px;
  justify-self: end;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  color: rgba(211, 213, 220, 0.42);
  transform: rotate(45deg);
}

.reader-quick-menu-external {
  justify-self: end;
  color: rgba(211, 213, 220, 0.42);
  font: 560 0.9rem/1 var(--ui-font);
}

.reader-panel-back-mark {
  display: none;
}

body[data-reader-panel-subview="contents"]
  .chapter-panel.chapter-popup.is-reader-panel-subview
  .reader-panel-back-mark,
body[data-reader-panel-subview="speaking"]
  .character-legend-panel.is-reader-panel-subview
  .reader-panel-back-mark {
  display: block !important;
}

/* Contents and Who's Speaking occupy the same visual slot as the main panel. */
html body .chapter-panel.chapter-popup.is-reader-panel-subview,
#characterLegendPanel.character-legend-panel.is-reader-panel-subview,
html.theme-dark body .chapter-panel.chapter-popup.is-reader-panel-subview,
body.theme-dark .chapter-panel.chapter-popup.is-reader-panel-subview {
  z-index: 1450 !important;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  display: grid !important;
  align-items: end !important;
  justify-items: end !important;
  background: rgba(8, 9, 12, 0.44) !important;
  -webkit-backdrop-filter: blur(7px) saturate(0.82) !important;
  backdrop-filter: blur(7px) saturate(0.82) !important;
  pointer-events: auto !important;
}

html body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-sheet,
#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-sheet,
html.theme-dark body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-sheet,
body.theme-dark .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-sheet,
html.theme-dark #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-sheet,
body.theme-dark #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-sheet {
  position: static !important;
  inset: auto !important;
  box-sizing: border-box !important;
  width: min(430px, calc(100vw - 24px)) !important;
  max-width: calc(100vw - 24px) !important;
  height: min(720px, calc(100dvh - 24px)) !important;
  min-height: min(560px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  border: 1px solid rgba(224, 226, 233, 0.12) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 10% -8%, rgba(255, 255, 255, 0.075), transparent 36%),
    radial-gradient(circle at 96% 2%, rgba(205, 99, 86, 0.06), transparent 28%),
    linear-gradient(158deg, rgba(33, 34, 39, 0.995), rgba(18, 19, 23, 0.995)) !important;
  box-shadow:
    0 36px 96px rgba(0, 0, 0, 0.52),
    0 9px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
  transform: none !important;
  transform-origin: 100% 100% !important;
  pointer-events: auto !important;
  animation: reader-panel-sheet-in 440ms cubic-bezier(0.32, 0.72, 0, 1) both !important;
}

html body .chapter-panel.chapter-popup.is-reader-panel-subview {
  --chapter-popup-accent: #c49a52;
  --chapter-popup-warm: #cdb078;
  --chapter-popup-candle: #ddbd7b;
  --chapter-popup-ink: rgba(243, 241, 236, 0.94);
  --chapter-popup-muted: rgba(190, 192, 199, 0.62);
  --chapter-popup-line: rgba(211, 215, 224, 0.085);
}

html body .chapter-panel.chapter-popup.is-reader-panel-subview #closeChapterButton,
html body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-menu-header #closeChapterButton {
  border-color: rgba(211, 215, 224, 0.11) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(226, 228, 233, 0.76) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-search,
html body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-journey-card {
  border-color: rgba(211, 215, 224, 0.1) !important;
  background: rgba(45, 47, 54, 0.46) !important;
}

html body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-option-copy strong {
  color: var(--chapter-popup-ink) !important;
}

html body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-popup-toggle {
  display: none !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview {
  z-index: 1450 !important;
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left)) !important;
  display: grid !important;
  align-items: end !important;
  justify-items: end !important;
  background: rgba(8, 9, 12, 0.44) !important;
  -webkit-backdrop-filter: blur(7px) saturate(0.82) !important;
  backdrop-filter: blur(7px) saturate(0.82) !important;
  pointer-events: auto !important;
  animation: reader-panel-backdrop-in 170ms ease-out both !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-sheet {
  padding: 18px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  overflow: hidden !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-close {
  top: 19px !important;
  right: 18px !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(222, 224, 231, 0.11) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.045) !important;
  color: rgba(230, 231, 235, 0.76) !important;
  box-shadow: none !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-close::before,
#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-close::after {
  display: none !important;
  content: none !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-close svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-header {
  min-height: 60px !important;
  padding: 3px 50px 14px 1px !important;
  border-bottom-color: rgba(220, 222, 229, 0.09) !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-header h2 {
  color: rgba(245, 242, 237, 0.96) !important;
  font-size: 1.34rem !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-header > small,
#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-loading,
#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-empty {
  color: rgba(184, 185, 191, 0.66) !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-list {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding-right: 3px !important;
}

#characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-item {
  min-height: 54px !important;
  padding: 9px 4px !important;
  border-bottom: 1px solid rgba(220, 222, 229, 0.075) !important;
}

@keyframes reader-panel-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Grab handle for reader sheets that can be pulled down to dismiss. */
.has-sheet-grabber {
  position: relative;
}

.sheet-grabber {
  position: absolute;
  top: 7px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.2;
  pointer-events: none;
}

@keyframes reader-panel-sheet-in {
  from {
    opacity: 0;
    transform: translate3d(0, 64px, 0) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-height: 620px) {
  .reader-quick-menu-sheet,
  html body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-sheet,
  #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-sheet {
    height: calc(100dvh - 20px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 20px) !important;
  }
}

/* Reader appearance controls inside the shared settings sheet. */
.reader-quick-menu {
  background: rgba(8, 9, 12, 0.24) !important;
  -webkit-backdrop-filter: blur(1px) !important;
  backdrop-filter: blur(1px) !important;
}
.reader-quick-menu .reader-quick-menu-sheet {
  width: min(400px, calc(100vw - 24px));
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 24px) !important;
  border-radius: 24px;
}
.reader-quick-menu-header { min-height: 62px; padding: 12px 16px; }
.reader-quick-menu-close { width: 44px; height: 44px; flex-basis: 44px; }
.reader-quick-menu #fontSizePopover [hidden] { display: none !important; }
#fontSizePopover .reader-appearance-primary,
#fontSizePopover .reader-appearance-dialogue-view { display: grid; min-width: 0; }
.reader-quick-menu #fontSizePopover .reader-appearance-font small,
.reader-quick-menu #fontSizePopover .reader-appearance-theme small,
.reader-quick-menu .reader-quick-menu-row-copy small { display: none; }
#fontSizePopover .reader-dialogue-preview { padding: 14px; margin: 4px 0 10px; border-radius: 12px; background: #1e2026; color: #eae8e3; }
#fontSizePopover .reader-dialogue-preview small { display: block; color: #b9bbc3; font: 400 0.75rem/1.5 var(--ui-font); }
#fontSizePopover .reader-dialogue-preview p { margin: 9px 0 0; font: 400 1rem/1.5 var(--reading-font); }
#fontSizePopover .reader-dialogue-advanced { padding: 8px 0; color: #d1d3da; }
#fontSizePopover .reader-dialogue-advanced > summary { padding: 12px 3px; cursor: pointer; font: 500 0.8rem/1.4 var(--ui-font); }
#fontSizePopover .reader-dialogue-advanced > summary:focus-visible { outline: 2px solid #da9a8e; outline-offset: 2px; }
.reader-quick-menu .reader-quick-menu-row { min-height: 48px !important; }
@media (max-width: 600px) {
  .reader-quick-menu { justify-items: stretch !important; }
  .reader-quick-menu .reader-quick-menu-sheet { width: 100%; max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important; }
}

/* One reader settings sheet with theme previews and a persistent Contents action. */
.reader-quick-menu,
#fontSizePopover {
  --reader-settings-ink: var(--light-ink, #302c29);
  --reader-settings-muted: var(--light-muted, #685b51);
  --reader-settings-line: var(--light-line, #d8cbbb);
  --reader-settings-raised: var(--light-raised, #f8f1e8);
  --reader-settings-accent: var(--light-accent, #ad5734);
  --reader-settings-on-accent: var(--light-on-accent, #fff6eb);
}
:is(html.theme-dark, body.theme-dark) :is(.reader-quick-menu, #fontSizePopover) {
  --reader-settings-ink: #edeef2;
  --reader-settings-muted: #b3b6c2;
  --reader-settings-line: #41444e;
  --reader-settings-raised: #1e2026;
  --reader-settings-accent: #e1a092;
  --reader-settings-on-accent: #222329;
}
.reader-quick-menu .reader-quick-menu-sheet {
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.reader-quick-menu-header { padding: 16px 20px; }
.reader-quick-menu-header > span { gap: 7px; }
.reader-quick-menu-header small { font-size: 0.6rem; letter-spacing: 0.1em; }
.reader-quick-menu-header h2 { font-size: 1.4rem; }
.reader-quick-menu-scroll { padding: 0 20px 12px; }
#fontSizePopover .reader-appearance-scroll { overflow-y: auto !important; }
.reader-quick-menu #fontSizePopover .reader-appearance-scroll {
  max-height: none;
  scrollbar-gutter: auto;
  overflow: visible !important;
}
#fontSizePopover .reader-theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 4px 0 16px;
}
#fontSizePopover .reader-theme-card {
  position: relative;
  min-width: 0;
  padding: 6px 6px 10px;
  display: grid;
  align-content: start;
  gap: 4px;
  border: 2px solid var(--reader-settings-line);
  border-radius: 14px;
  background: var(--reader-settings-raised) !important;
  color: var(--reader-settings-ink);
  box-shadow: none !important;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease;
}
#fontSizePopover .reader-theme-card.is-active,
#fontSizePopover .reader-theme-card:not(:disabled):hover {
  border-color: var(--reader-settings-accent);
}
#fontSizePopover .reader-theme-card.is-active::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--reader-settings-accent);
  color: var(--reader-settings-on-accent);
  font: 700 0.68rem/1 var(--ui-font);
}
#fontSizePopover .reader-theme-card strong { font: 650 0.8rem/1.3 var(--ui-font); }
#fontSizePopover .reader-theme-card small {
  color: var(--reader-settings-muted);
  font: 450 0.62rem/1.3 var(--ui-font);
}
#fontSizePopover .reader-theme-card:disabled { opacity: 0.8; cursor: default; }
#fontSizePopover .reader-theme-sample {
  min-height: 66px;
  padding: 10px 12px;
  margin-bottom: 5px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
  border-radius: 8px;
  text-align: left;
}
#fontSizePopover .reader-theme-sample > span { font: 400 1.4rem/1 var(--heading-font); }
#fontSizePopover .reader-theme-sample i {
  width: 80%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.3;
}
#fontSizePopover .reader-theme-sample i:last-child { width: 56%; }
#fontSizePopover .reader-theme-sample-light { background: #f3e8d9; color: #47382f; }
#fontSizePopover .reader-theme-sample-dark { background: #292c34; color: #ececf3; }
#fontSizePopover .reader-theme-sample-twilight { background: linear-gradient(155deg, #48455d, #797086); color: #f3e7dd; }
#fontSizePopover .reader-appearance-section-heading { padding: 18px 0 12px; }
#fontSizePopover .reader-appearance-section-heading h3 {
  margin: 0;
  color: var(--reader-settings-ink);
  font: 650 0.9rem/1.4 var(--ui-font);
}
#fontSizePopover .reader-appearance-section-heading p {
  margin: 4px 0 0;
  color: var(--reader-settings-muted);
  font: 400 0.73rem/1.5 var(--ui-font);
}
#fontSizePopover .reader-appearance-dialogue-view { margin-top: 10px; border-top: 1px solid var(--reader-settings-line); }
#fontSizePopover .reader-dialogue-preview { margin-top: 0; }
.reader-quick-menu #fontSizePopover .theme-toggle-copy small { color: var(--reader-settings-muted) !important; }
#fontSizePopover .reader-appearance-dialogue-colours .dialogue-color-options {
  grid-template-columns: repeat(auto-fit, minmax(54px, 1fr));
  gap: 6px;
}
#fontSizePopover .reader-appearance-dialogue-colours .dialogue-color-option { min-height: 48px; }
#fontSizePopover .reader-appearance-dialogue-colours .dialogue-color-option span:last-child { font-size: 0.62rem; }
.reader-quick-menu .reader-quick-menu-actions { margin-top: 0; border-top: 0; }
.reader-quick-menu .reader-quick-menu-actions .reader-quick-menu-row { min-height: 52px !important; }
.reader-quick-menu .reader-quick-menu-actions .reader-quick-menu-row-copy strong { font-size: 0.8rem !important; }
.reader-quick-menu .reader-quick-menu-actions .reader-quick-menu-row:last-child { border-bottom: 0 !important; }
#readerQuickMenu :is(button, a, select, summary):focus-visible,
#fontSizePopover :is(button, select, summary):focus-visible {
  outline: 2px solid var(--reader-settings-accent) !important;
  outline-offset: 3px !important;
}
#readerQuickMenu :is(button, a):is(:active, .is-tactile-press),
#fontSizePopover .reader-theme-card:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}
#readerQuickMenu .reader-quick-menu-actions .reader-quick-menu-row:active { background: transparent !important; }
#readerQuickMenu .reader-quick-menu-close:active { box-shadow: none !important; }

/* Reader settings: visual choices, with the chapter's voices always in reach. */
#readerQuickMenu .reader-quick-menu-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  gap: 12px;
  padding-block: 12px;
}
#readerQuickMenu #readerMenuSpeakingButton {
  grid-column: 1 / -1;
  grid-template-columns: 48px minmax(0, 1fr) 12px !important;
  min-height: 80px !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  border: 1px solid color-mix(in srgb, var(--reader-settings-accent) 48%, var(--reader-settings-line)) !important;
  border-radius: 18px !important;
  background: linear-gradient(115deg, color-mix(in srgb, var(--reader-settings-accent) 11%, var(--reader-settings-raised)), var(--reader-settings-raised)) !important;
  color: var(--reader-settings-ink) !important;
  box-shadow: none !important;
}
#readerQuickMenu #readerMenuSpeakingButton[hidden] { display: none !important; }
#readerQuickMenu #readerMenuSpeakingButton:hover { border-color: var(--reader-settings-accent) !important; }
#readerQuickMenu #readerMenuSpeakingButton .reader-quick-menu-row-copy { gap: 6px; }
#readerQuickMenu #readerMenuSpeakingButton strong { font: 650 1.16rem/1.2 var(--ui-font) !important; }
#readerQuickMenu #readerMenuSpeakingButton small {
  display: block;
  color: var(--reader-settings-muted);
  font: 450 0.72rem/1.45 var(--ui-font);
  letter-spacing: normal;
  text-transform: none;
}
#readerQuickMenu #readerMenuSpeakingButton .reader-quick-menu-row-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--reader-settings-accent) 10%, transparent);
}
#readerQuickMenu #readerMenuSpeakingButton .character-legend-symbol { width: 38px; height: 38px; }
#readerQuickMenu #readerMenuSpeakingButton .legend-constellation-line { stroke: var(--reader-settings-muted) !important; }
#readerQuickMenu #readerMenuSpeakingButton .reader-quick-menu-chevron { color: var(--reader-settings-accent) !important; }
#fontSizePopover .reader-setting-section { min-width: 0; margin: 0 0 16px; }
#fontSizePopover .reader-setting-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--reader-settings-ink);
}
#fontSizePopover .reader-setting-heading h3 { margin: 0; font: 650 0.85rem/1.4 var(--ui-font); }
#fontSizePopover .reader-setting-heading > span { color: var(--reader-settings-muted); font: 450 0.68rem/1.4 var(--ui-font); }
#fontSizePopover .reader-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
#fontSizePopover .reader-font-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#fontSizePopover .reader-setting-card {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  border: 2px solid var(--reader-settings-line) !important;
  border-radius: 14px;
  background: var(--reader-settings-raised) !important;
  color: var(--reader-settings-ink) !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
#fontSizePopover .reader-setting-card[aria-pressed="true"] {
  border-color: var(--reader-settings-accent) !important;
  background: color-mix(in srgb, var(--reader-settings-accent) 7%, var(--reader-settings-raised)) !important;
}
#fontSizePopover .reader-setting-card:hover { border-color: var(--reader-settings-accent) !important; }
#fontSizePopover .reader-setting-card[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--reader-settings-accent);
  color: var(--reader-settings-on-accent);
  font: 700 0.65rem/1 var(--ui-font);
}
#fontSizePopover .reader-setting-card strong { font: 650 0.8rem/1.35 var(--ui-font); overflow-wrap: anywhere; }
#fontSizePopover .reader-setting-card small { color: var(--reader-settings-muted); font: 450 0.65rem/1.45 var(--ui-font); }
#fontSizePopover .reader-choice-sample { min-height: 32px; margin: 0; display: grid; align-content: center; }
#fontSizePopover .reader-font-card { text-align: center; padding-inline: 6px; }
#fontSizePopover .reader-font-sample { font-size: 1.55rem; line-height: 1.3; }
#fontSizePopover .reader-appearance-dialogue-view { margin-top: 0; border-top: 0; }
#fontSizePopover .reader-appearance-section-heading { padding-top: 0; }
#fontSizePopover .reader-setting-card:is(:active, .is-tactile-press) { transform: none !important; filter: none !important; box-shadow: none !important; }
#fontSizePopover .reader-dialogue-advanced {
  margin-block: 10px;
  padding: 0 12px;
  border: 1px solid var(--reader-settings-line);
  border-radius: 12px;
  color: var(--reader-settings-muted);
}
@media (max-height: 620px) {
  #readerQuickMenu .reader-quick-menu-header { gap: 10px 12px; padding-block: 10px; }
  #readerQuickMenu #readerMenuSpeakingButton { min-height: 64px !important; padding-block: 8px !important; }
  #readerQuickMenu #readerMenuSpeakingButton small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reader-quick-menu,
  .reader-quick-menu-sheet,
  html body .chapter-panel.chapter-popup.is-reader-panel-subview,
  html body .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-sheet,
  #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview,
  #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-sheet {
    animation: none !important;
  }
}

/* App typography stays independent of Original / custom reader typography. */
#inputPanel,
.book-details-panel,
.discover-panel,
.discover-preview-panel,
.chapter-panel,
.character-legend-panel,
.book-open-transition {
  --reading-font: var(--ui-font);
  --ui-serif: var(--ui-font);
  font-family: var(--ui-font);
}

/* Apricot materials for shared destinations and supported reader surfaces. */
html:not(.theme-dark) body:not(.theme-dark) {
  --rhythm-coral: var(--light-accent);
  --rhythm-amber: var(--light-accent-ink);
}

html:not(.theme-dark) body:not(.theme-dark) .reader-panel.reader-panel,
html:not(.theme-dark) body:not(.theme-dark) .reader-panel .focus-stage {
  background: var(--reader-surface) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #statsView :is(.stats-card, .stats-summary-card, .stats-heatmap-card),
html:not(.theme-dark) body:not(.theme-dark) .book-open-transition-backdrop {
  border-color: var(--light-line) !important;
  background: var(--light-panel) !important;
  box-shadow: none !important;
}

html:not(.theme-dark) body:not(.theme-dark) .book-info-resume .home-primary-action {
  border-color: var(--light-accent) !important;
  background: var(--light-accent) !important;
  color: var(--light-on-accent) !important;
}

/* Match the reader settings and its destinations to the active light palette. */
html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu .reader-quick-menu-sheet,
html:not(.theme-dark) body:not(.theme-dark) .chapter-panel.chapter-popup.is-reader-panel-subview .chapter-sheet,
html:not(.theme-dark) body:not(.theme-dark) #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-sheet {
  color-scheme: light;
  border-color: var(--light-line) !important;
  background: var(--light-panel) !important;
  color: var(--light-ink) !important;
  box-shadow: 0 18px 52px rgba(70, 42, 25, 0.16) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu .reader-quick-menu-close,
html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu #fontSizePopover :is(.reader-appearance-size > button, .reader-appearance-font select),
html:not(.theme-dark) body:not(.theme-dark) .chapter-panel.chapter-popup.is-reader-panel-subview :is(#closeChapterButton, .chapter-search, .chapter-journey-card),
html:not(.theme-dark) body:not(.theme-dark) #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-close {
  color-scheme: light;
  border-color: var(--light-line-strong) !important;
  background: var(--light-panel) !important;
  color: var(--light-ink) !important;
  box-shadow: none !important;
}

html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu :is(.reader-quick-menu-header, .reader-quick-menu-actions),
html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu #fontSizePopover :is(.reader-appearance-font, .font-size-theme-toggle, .reader-appearance-more, .reader-appearance-dialogue-colours) {
  border-color: var(--light-line) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu :is(.reader-quick-menu-header h2, .reader-quick-menu-row-copy strong, .reader-quick-menu-row-icon, .reader-quick-menu-chevron),
html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu #fontSizePopover :is(.reader-appearance-heading > span, .reader-appearance-size, .reader-appearance-font, .reader-appearance-more, .theme-toggle-copy strong, .reader-appearance-font strong, .reader-appearance-more strong, .reader-dialogue-advanced),
html:not(.theme-dark) body:not(.theme-dark) #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview .character-legend-header h2 {
  color: var(--light-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu #fontSizePopover :is(.reader-appearance-heading > small, .reader-appearance-size small, .reader-appearance-more small, .reader-appearance-dialogue-colours .font-size-section-label, .reader-appearance-dialogue-colours .font-size-section-label span, .reader-dialogue-preview small),
html:not(.theme-dark) body:not(.theme-dark) #characterLegendPanel.character-legend-panel.is-compact-legend.is-reader-panel-subview :is(.character-legend-header > small, .character-legend-loading, .character-legend-empty) {
  color: var(--light-muted) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu-header small {
  color: var(--light-accent-ink);
}

html:not(.theme-dark) body:not(.theme-dark) #fontSizePopover :is(.reader-type-preview:not(.is-dark), .reader-dialogue-preview) {
  border-color: var(--light-line);
  background: var(--reader-surface);
  color: var(--light-ink);
}

html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu #fontSizePopover .theme-toggle-switch,
html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu #fontSizePopover .reader-appearance-size-scale::before {
  border-color: var(--light-line-strong) !important;
  background: var(--light-line) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu #fontSizePopover .reader-appearance-size-scale::after,
html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu #fontSizePopover .reader-appearance-size-stop.is-active::after {
  background: var(--light-accent) !important;
}

html:not(.theme-dark) body:not(.theme-dark) .chapter-panel.chapter-popup.is-reader-panel-subview {
  --chapter-popup-accent: var(--light-accent-ink);
  --chapter-popup-warm: var(--light-accent);
  --chapter-popup-candle: var(--light-accent-soft);
  --chapter-popup-ink: var(--light-ink);
  --chapter-popup-muted: var(--light-muted);
  --chapter-popup-line: var(--light-line);
}

html:not(.theme-dark) body:not(.theme-dark) .reader-quick-menu :is(button, select, summary):focus-visible {
  outline: 2px solid var(--light-accent-ink) !important;
  outline-offset: 3px !important;
}

html:not(.theme-dark) body:not(.theme-dark) #statsView.stats-view {
  --stats-calm-coral: var(--light-accent-ink);
  --stats-red: var(--light-accent-ink);
  --stats-calm-ink: var(--light-ink);
  --stats-calm-muted: var(--light-muted);
  --stats-calm-line: var(--light-line);
  --stats-calm-surface: var(--light-panel);
}

/* Destination names retain a serif voice; controls and reading preferences
 * continue to use their independent sans / selected-reader font tokens. */
#statsView > .collection-header h2 {
  font-family: var(--heading-font) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
}

/* Give truncated interface text a full glyph line box, including descenders. */
html body .chapter-panel.chapter-popup :is(#chapterBookTitle, #chapterBookMeta, .chapter-option-copy strong),
.dialogue-color-option span:last-child,
.global-load-label,
.global-load-value,
.menu-row-copy small,
.onboarding-demo-library-row strong,
.book-details-title-wrap :is(input, textarea),
.book-details-source-pill,
.book-details-insight-tile small,
.stats-book-spotlight strong {
  line-height: 1.35 !important;
}

/* Destination headings need ink space even inside a clipped screen panel. */
#statsView > .collection-header h2 {
  padding-bottom: 0.14em !important;
}

/* Contents panel: book identity and a quiet, readable chapter index.
 * Scoped IDs keep this component above its historical visual passes without
 * changing the shared reader-panel placement or chapter virtualization. */
#chapterPanel.chapter-popup {
  --contents-surface: var(--light-raised, #f8f1e8);
  --contents-inset: var(--light-panel, #f5ece2);
  --contents-ink: var(--light-ink, #302c29);
  --contents-muted: var(--light-muted, #685b51);
  --contents-line: var(--light-line, #d8cbbb);
  --contents-accent: var(--light-accent-ink, #85482f);
  --contents-selected: #eee0d1;
  --contents-hover: rgba(133, 72, 47, 0.045);
  --contents-shadow: 0 24px 72px rgba(56, 40, 29, 0.2);
  --chapter-popup-ink: var(--contents-ink);
  --chapter-popup-muted: var(--contents-muted);
  --chapter-popup-line: var(--contents-line);
  --chapter-popup-accent: var(--contents-accent);
  --chapter-popup-warm: var(--contents-accent);
}

html.theme-dark #chapterPanel.chapter-popup,
body.theme-dark #chapterPanel.chapter-popup {
  --contents-surface: #212227;
  --contents-inset: #292b32;
  --contents-ink: #efeeeb;
  --contents-muted: #aeb1bc;
  --contents-line: #3a3d46;
  --contents-accent: #e5a18f;
  --contents-selected: #2e3037;
  --contents-hover: rgba(255, 255, 255, 0.04);
  --contents-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
}

#chapterPanel.chapter-popup .chapter-sheet {
  --chapter-row-height: 64px;
  border: 1px solid var(--contents-line) !important;
  border-radius: 26px !important;
  background: var(--contents-surface) !important;
  color: var(--contents-ink) !important;
  box-shadow: var(--contents-shadow) !important;
}

#chapterPanel .chapter-menu-header.chapter-top-bar {
  min-height: 80px !important;
  padding: 12px 16px !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  gap: 10px !important;
}

#chapterPanel .chapter-menu-header::after,
#chapterPanel .chapter-book-cover::after {
  content: none !important;
  display: none !important;
}

#chapterPanel #chapterTitleButton {
  grid-column: 2 !important;
  grid-row: 1 !important;
  grid-template-columns: 32px minmax(0, 1fr) !important;
  align-self: center !important;
  gap: 10px !important;
}

#chapterPanel .chapter-book-cover {
  width: 32px !important;
  min-width: 32px !important;
  height: 44px !important;
  border: 1px solid var(--contents-line) !important;
  border-radius: 3px 6px 6px 3px !important;
  background: var(--contents-inset) !important;
  color: var(--contents-accent) !important;
  font: 400 1.6rem/1 var(--heading-font) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

#chapterPanel .chapter-book-copy {
  gap: 4px !important;
}

#chapterPanel .chapter-book-eyebrow {
  color: var(--contents-muted);
  font: 650 0.62rem/1.3 var(--ui-font);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

#chapterPanel #chapterBookTitle {
  font: 550 0.94rem/1.3 var(--ui-font) !important;
  letter-spacing: -0.015em !important;
  overflow-wrap: anywhere !important;
}

/* Chapter counts already appear in the list tools. */
#chapterPanel #chapterBookMeta {
  display: none !important;
}

#chapterPanel #closeChapterButton {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  border: 1px solid var(--contents-line) !important;
  background: transparent !important;
  color: var(--contents-muted) !important;
  box-shadow: none !important;
}

#chapterPanel #chapterBackButton {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--contents-line);
  border-radius: 50%;
  background: transparent !important;
  color: var(--contents-ink) !important;
  box-shadow: none !important;
}
#chapterPanel #chapterBackButton[hidden] { display: none !important; }
#chapterPanel #chapterBackButton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#chapterPanel .chapter-menu-header:has(#chapterBackButton[hidden]) { grid-template-columns: minmax(0, 1fr) 44px !important; }
#chapterPanel .chapter-menu-header:has(#chapterBackButton[hidden]) #chapterTitleButton { grid-column: 1 !important; }
#chapterPanel .chapter-menu-header:has(#chapterBackButton[hidden]) #closeChapterButton { grid-column: 2 !important; }

#chapterPanel .chapter-tools {
  min-height: 46px !important;
  margin: 0 16px !important;
  padding: 0 !important;
  border-bottom: 1px solid var(--contents-line) !important;
}

#chapterPanel .chapter-tools-summary {
  color: var(--contents-muted) !important;
  font: 600 0.74rem/1.4 var(--ui-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#chapterPanel #chapterSearchToggle,
#chapterPanel #chapterSearchClear {
  min-height: 44px !important;
  color: var(--contents-accent) !important;
  font: 550 0.74rem/1.3 var(--ui-font) !important;
}

#chapterPanel #chapterSearchRegion {
  margin: 8px 16px 4px !important;
  border: 1px solid var(--contents-line) !important;
  border-radius: 12px !important;
  background: var(--contents-inset) !important;
}

#chapterPanel #chapterSearchInput {
  min-width: 0;
  color: var(--contents-ink) !important;
}

#chapterPanel #chapterSearchInput::placeholder {
  color: var(--contents-muted) !important;
  opacity: 1;
}

#chapterPanel .chapter-search-icon {
  color: var(--contents-muted) !important;
}

#chapterPanel #chapterList {
  --chapter-row-height: 64px;
  --chapter-row-gap: 0px;
  padding: 6px 10px 14px !important;
  scrollbar-color: var(--contents-line) transparent !important;
}

#chapterPanel #chapterList::-webkit-scrollbar-thumb {
  background: var(--contents-line) !important;
}

#chapterPanel .chapter-option,
#chapterPanel .chapter-option.is-current {
  padding: 0 !important;
}

#chapterPanel .chapter-option .chapter-option-card {
  min-height: var(--chapter-row-height) !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
}

#chapterPanel .chapter-option-card::after {
  right: 12px !important;
  left: 12px !important;
  background: var(--contents-line) !important;
  opacity: 0.5 !important;
}

#chapterPanel #chapterList .chapter-option-copy strong {
  color: var(--contents-ink) !important;
  font: 480 0.86rem/1.4 var(--ui-font) !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere;
}

#chapterPanel .chapter-option-page {
  color: var(--contents-muted) !important;
  font: 450 0.67rem/1.4 var(--ui-font) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap;
}

#chapterPanel .chapter-option.is-current .chapter-option-card {
  background: var(--contents-selected) !important;
}

#chapterPanel #chapterList .chapter-option.is-current .chapter-option-copy strong {
  font-weight: 480 !important;
}

#chapterPanel .chapter-option.is-current .chapter-option-page {
  color: var(--contents-muted) !important;
  font-weight: 450 !important;
}

/* Chapter titles lead; secondary actions appear only when requested. */
#chapterPanel .chapter-entry {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  height: var(--chapter-row-height);
  border-bottom: 1px solid color-mix(in srgb, var(--contents-line) 40%, transparent);
  border-radius: 0;
}
#chapterPanel .chapter-entry.is-current {
  border-color: transparent;
  border-radius: 10px;
  background: color-mix(in srgb, var(--contents-selected) 55%, var(--contents-surface));
}
#chapterPanel .chapter-entry .chapter-option { min-width: 0; width: 100%; min-height: 0 !important; height: calc(var(--chapter-row-height) - 1px); }
#chapterPanel .chapter-entry .chapter-option .chapter-option-card {
  min-height: calc(var(--chapter-row-height) - 1px) !important;
  height: calc(var(--chapter-row-height) - 1px);
  grid-template-columns: 22px minmax(0, 1fr) auto !important;
  padding: 6px 10px !important;
  gap: 10px !important;
  border-radius: 10px !important;
  background: transparent !important;
}
#chapterPanel .chapter-entry .chapter-option-card::after { display: none !important; }
#chapterPanel .chapter-entry .chapter-option-number {
  display: block !important;
  width: auto !important;
  height: auto !important;
  color: var(--contents-muted) !important;
  font: 500 0.7rem/1.4 var(--ui-font) !important;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#chapterPanel #chapterList .chapter-entry .chapter-option-copy { gap: 3px !important; }
#chapterPanel #chapterList .chapter-entry .chapter-option-copy strong { font-size: 0.86rem !important; line-height: 1.25 !important; }
#chapterPanel .chapter-option-state { display: block !important; font: 450 0.64rem/1.3 var(--ui-font) !important; }
#chapterPanel .chapter-option-state[hidden],
#chapterPanel .chapter-option-page[hidden],
#chapterPanel .chapter-entry-actions[hidden],
#chapterPanel .chapter-entry-popover[hidden] { display: none !important; }
#chapterPanel .chapter-entry-actions { align-self: center; }
#chapterPanel .chapter-more-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-right: 4px;
  border: 0;
  border-radius: 8px;
  background: transparent !important;
  color: var(--contents-muted) !important;
  box-shadow: none !important;
}
#chapterPanel .chapter-more-button svg { width: 20px; height: 20px; fill: currentColor; }
#chapterPanel .chapter-entry.has-open-actions,
#chapterPanel .chapter-virtual-row.has-open-actions { z-index: 2; }
#chapterPanel .chapter-entry-popover {
  position: absolute;
  z-index: 3;
  top: calc(100% - 4px);
  right: 4px;
  width: max-content;
  max-width: calc(100% - 8px);
  padding: 4px;
  border: 1px solid var(--contents-line);
  border-radius: 12px;
  background: var(--contents-surface);
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
}
#chapterPanel .chapter-entry-popover.opens-above { top: auto; bottom: calc(100% - 4px); }
#chapterPanel .chapter-start-over {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: transparent !important;
  color: var(--contents-ink) !important;
  box-shadow: none !important;
  font: 500 0.8rem/1.4 var(--ui-font);
  text-align: left;
}

#chapterPanel .chapter-volume-divider {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 12px 12px 6px !important;
}

#chapterPanel .chapter-volume-divider span {
  color: var(--contents-muted) !important;
  font: 650 0.61rem/1.3 var(--ui-font) !important;
  letter-spacing: 0.09em !important;
}

#chapterPanel .chapter-volume-divider::after {
  background: var(--contents-line) !important;
}

#chapterPanel #chapterJourneyCard {
  margin: 4px 20px 8px !important;
  border-color: var(--contents-line) !important;
  background: var(--contents-inset) !important;
}

#chapterPanel :is(.chapter-panel-kicker, .chapter-journey-stage strong, .chapter-journey-stage small, .chapter-journey-meta, .chapter-search-empty),
#chapterPanel .chapter-option-copy small {
  color: var(--contents-muted) !important;
}

#chapterPanel .chapter-journey-node,
#chapterPanel .chapter-journey-track::before {
  background: var(--contents-line) !important;
  border-color: var(--contents-line) !important;
}

#chapterPanel .chapter-journey-stage.is-current .chapter-journey-node {
  background: var(--contents-accent) !important;
  border-color: var(--contents-accent) !important;
}

#chapterPanel .chapter-result-match {
  background: var(--contents-selected) !important;
  color: var(--contents-ink) !important;
}

#chapterPanel .chapter-option.is-search-result .chapter-option-card {
  grid-template-columns: minmax(0, 1fr) !important;
}

@media (hover: hover) {
  #chapterPanel .chapter-option:not(.is-current):hover .chapter-option-card,
  #chapterPanel #closeChapterButton:hover {
    background: var(--contents-hover) !important;
  }
}

#chapterPanel :is(button, [role="button"]):focus-visible,
#chapterPanel #chapterSearchRegion:focus-within {
  outline: 2px solid var(--contents-accent) !important;
  outline-offset: -2px !important;
}

#chapterPanel :is(button, [role="button"]):is(:active, .is-tactile-press) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: none !important;
}

@media (max-height: 600px) {
  #chapterPanel .chapter-menu-header.chapter-top-bar {
    min-height: 64px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #chapterPanel .chapter-book-cover {
    height: 40px !important;
  }

  #chapterPanel #chapterJourneyCard {
    display: none !important;
  }
}

/* An actionable toast lets chapter exploration be reversed without a dialog. */
#readerToast.has-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 6px 4px 14px;
  border-radius: 14px;
  pointer-events: auto;
}
#readerToast.has-action .reader-toast-message { font: 500 0.78rem/1.4 var(--ui-font); }
#readerToast .reader-toast-action {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
  font: 650 0.78rem/1.3 var(--ui-font);
  white-space: nowrap;
}
#readerToast .reader-toast-action:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#readerToast .reader-toast-action:is(:active, .is-tactile-press) { transform: none !important; filter: none !important; box-shadow: none !important; }
html.theme-twilight body.theme-twilight #readerToast[data-toast-kind="chapter-jump"] { border-color: var(--twilight-line) !important; background: var(--twilight-panel) !important; color: var(--twilight-ink) !important; }

/* Twilight: a third saved appearance on the existing dark contrast foundation. */
html.theme-twilight,
body.theme-twilight {
  color-scheme: dark;
  --twilight-paper: #20192b;
  --twilight-chrome: #18121f;
  --twilight-panel: #2a2036;
  --twilight-raised: #382944;
  --twilight-ink: #f6ebdd;
  --twilight-muted: #baa8ca;
  --twilight-secondary: #d7c9df;
  /* Quiet plum edges; tracks stay one step clearer than decorative borders. */
  --twilight-line: #453b4f;
  --twilight-track: #4d4258;
  --twilight-accent: #e58199;
  --twilight-lavender: #bd98ed;
  --twilight-last-light: linear-gradient(90deg, var(--twilight-accent), var(--twilight-lavender));
  --rhythm-night-deep: var(--twilight-chrome);
  --rhythm-night: var(--twilight-paper);
  --rhythm-night-soft: var(--twilight-panel);
  --rhythm-night-raised: var(--twilight-raised);
  --rhythm-night-card: var(--twilight-panel);
  --rhythm-night-line: var(--twilight-line);
  --paper: var(--twilight-paper);
  --reader-surface: var(--twilight-paper);
  --panel: var(--twilight-panel);
  --ink: var(--twilight-ink);
  --muted: var(--twilight-muted);
  --line: var(--twilight-line);
  --accent: var(--twilight-accent);
  --accent-dark: var(--twilight-accent);
  --rhythm-coral: var(--twilight-accent);
  --rhythm-amber: var(--twilight-lavender);
  --rhythm-control-ink: var(--twilight-ink);
  --rhythm-control-muted: var(--twilight-muted);
  --rhythm-dock-surface: var(--twilight-chrome);
  --reader-anchor: var(--twilight-accent);
  --title-red: var(--twilight-accent);
  --speed-fill: var(--twilight-accent);
  --speed-track: var(--twilight-track);
  --progress-fill-soft: var(--twilight-lavender);
  --progress-track-soft: var(--twilight-track);
}

html.theme-twilight body.theme-twilight #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) {
  background: var(--twilight-chrome) !important;
}

html.theme-twilight body.theme-twilight .reader-panel,
html.theme-twilight body.theme-twilight .reader-panel .focus-stage {
  background: var(--twilight-paper) !important;
  color: var(--twilight-ink);
}
html.theme-twilight body.theme-twilight:not(.ebook-mode) .reader-panel #focusStage#focusStage::before {
  background: none !important;
}
html.theme-twilight body.theme-twilight #wordDisplay.has-context.has-context-page-style .context-ebook-page.ebook-page {
  background: transparent !important;
  color: var(--twilight-ink) !important;
}
html.theme-twilight body.theme-twilight :is(.context-token.is-current, .context-selection-glider, .context-page-word-marker) {
  --page-selection-line-strong: var(--twilight-accent);
  --page-selection-line-soft: color-mix(in srgb, var(--twilight-accent) 45%, transparent);
}
html.theme-twilight body.theme-twilight .context-page-word-marker {
  --page-marker-ink: var(--twilight-accent);
  --page-marker-edge: color-mix(in srgb, var(--twilight-accent) 45%, transparent);
}
html.theme-twilight body.theme-twilight :is(.speed-chapter-kicker, .chapter-screen-heading h2 > span) { color: var(--twilight-accent) !important; }

html.theme-twilight body.theme-twilight :is(.reader-quick-menu, #fontSizePopover) {
  --reader-settings-ink: var(--twilight-ink);
  --reader-settings-muted: var(--twilight-muted);
  --reader-settings-line: var(--twilight-line);
  --reader-settings-raised: var(--twilight-paper);
  --reader-settings-accent: var(--twilight-accent);
  --reader-settings-on-accent: var(--twilight-chrome);
}
html.theme-twilight body.theme-twilight #readerQuickMenu .reader-quick-menu-sheet,
html.theme-twilight body.theme-twilight > #fontSizePopover,
html.theme-twilight body.theme-twilight #pdfSourceActions #fontSizePopover,
html.theme-twilight body.theme-twilight #characterLegendPanel.character-legend-panel .character-legend-sheet,
html.theme-twilight body.theme-twilight :is(.memory-sheet, .book-note-sheet, .speaker-correction-sheet) {
  border-color: var(--twilight-line) !important;
  background: var(--twilight-panel) !important;
  color: var(--twilight-ink) !important;
}
html.theme-twilight body.theme-twilight #readerQuickMenu :is(.reader-quick-menu-header, .reader-quick-menu-footer, .reader-quick-menu-row),
html.theme-twilight body.theme-twilight #fontSizePopover :is(.reader-appearance-font, .font-size-theme-toggle, .reader-appearance-more, .reader-appearance-dialogue-colours) {
  border-color: var(--twilight-line) !important;
}
html.theme-twilight body.theme-twilight #readerQuickMenu :is(.reader-quick-menu-header h2, .reader-quick-menu-row-copy strong, .reader-quick-menu-row-icon),
html.theme-twilight body.theme-twilight #fontSizePopover :is(.reader-appearance-heading > span, .theme-toggle-copy strong, .reader-appearance-font strong, .reader-appearance-more strong, .reader-appearance-size) {
  color: var(--twilight-ink) !important;
}
html.theme-twilight body.theme-twilight #readerQuickMenu .reader-quick-menu-header small { color: var(--twilight-accent); }
html.theme-twilight body.theme-twilight #fontSizePopover :is(.reader-type-preview.is-dark, .reader-dialogue-preview) {
  background: var(--twilight-paper);
  color: var(--twilight-ink);
}
html.theme-twilight body.theme-twilight #fontSizePopover :is(.reader-appearance-font select, .reader-appearance-size > button, .speaker-runtime-panel) {
  background: var(--twilight-paper) !important;
  border-color: var(--twilight-line) !important;
  color: var(--twilight-ink) !important;
}
html.theme-twilight body.theme-twilight #fontSizePopover :is(.reader-dialogue-preview small, .reader-appearance-size small, .reader-appearance-heading > small, .font-size-section-label, .font-size-section-label span) {
  color: var(--twilight-muted) !important;
}
html.theme-twilight body.theme-twilight #fontSizePopover .reader-appearance-size-scale::after,
html.theme-twilight body.theme-twilight #fontSizePopover .reader-appearance-size-stop.is-active::after { background: var(--twilight-accent) !important; }
html.theme-twilight body.theme-twilight #fontSizePopover .font-size-theme-toggle.is-active .theme-toggle-switch {
  background: var(--twilight-accent) !important;
  border-color: var(--twilight-accent) !important;
}
html.theme-twilight body.theme-twilight #fontSizePopover .font-size-theme-toggle.is-active .theme-toggle-switch span { background: var(--twilight-chrome); }
#fontSizePopover .reader-theme-sample-twilight { background: #20192b; color: #f6ebdd; }

html.theme-twilight body.theme-twilight #chapterPanel.chapter-popup {
  --contents-surface: var(--twilight-panel);
  --contents-inset: var(--twilight-paper);
  --contents-ink: var(--twilight-ink);
  --contents-muted: var(--twilight-muted);
  --contents-line: var(--twilight-line);
  --contents-accent: var(--twilight-accent);
  --contents-selected: var(--twilight-raised);
  --contents-hover: color-mix(in srgb, var(--twilight-accent) 6%, transparent);
}
html.theme-twilight body.theme-twilight #characterLegendPanel {
  --legend-line: var(--twilight-line);
  --legend-node-ring: var(--twilight-muted);
}
html.theme-twilight body.theme-twilight #statsView :is(.stats-card, .stats-tabs, .stats-editorial-card, .stats-insight-card, .stats-insight-tile, .stats-bottom-banner) {
  background: var(--twilight-panel) !important;
  border-color: var(--twilight-line) !important;
  color: var(--twilight-ink);
}
html.theme-twilight body.theme-twilight :is(.book-details-panel, .book-details-sheet, .book-open-transition-backdrop) {
  --book-info-page: var(--twilight-chrome);
  --book-info-surface: var(--twilight-panel);
  --book-info-surface-soft: var(--twilight-paper);
  --book-info-ink: var(--twilight-ink);
  --book-info-muted: var(--twilight-muted);
  --book-info-soft: var(--twilight-muted);
  --book-info-line: var(--twilight-line);
  --book-info-line-strong: var(--twilight-line);
  --book-info-coral: var(--twilight-accent);
  background: var(--twilight-chrome) !important;
  color: var(--twilight-ink);
}
html.theme-twilight body.theme-twilight #bookDetailsPanel #bookDetailsResumeFocusButton {
  border-color: var(--twilight-accent) !important;
  background: var(--twilight-accent) !important;
  color: var(--twilight-chrome) !important;
  -webkit-text-fill-color: var(--twilight-chrome) !important;
}
html.theme-twilight body.theme-twilight #bookDetailsPanel #bookDetailsResumePageButton {
  border-color: var(--twilight-line) !important;
  background: var(--twilight-panel) !important;
  color: var(--twilight-ink) !important;
  -webkit-text-fill-color: var(--twilight-ink) !important;
}

/* Twilight's last light: one fine horizon, with breathing room around it. */
.twilight-chapter-horizon {
  display: none;
}

html.theme-twilight body.theme-twilight.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title .speed-chapter-card {
  --speed-chapter-ink: var(--twilight-ink);
  --speed-chapter-muted: var(--twilight-muted);
  gap: clamp(18px, 3vw, 24px) !important;
}

html.theme-twilight body.theme-twilight.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title .speed-chapter-kicker {
  color: var(--twilight-accent) !important;
  font-size: clamp(0.7rem, 2vw, 0.78rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

html.theme-twilight body.theme-twilight .twilight-chapter-horizon {
  display: block;
  width: clamp(88px, 22vw, 124px);
  height: 1px;
  background: var(--twilight-last-light);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  pointer-events: none;
}

/* Keep the Page Mode motif within the heading's existing bottom margin:
 * decoration must not alter measured pages or a reader's saved position. */
html.theme-twilight body.theme-twilight .context-ebook-page .ebook-page-title {
  position: relative;
}

html.theme-twilight body.theme-twilight .context-ebook-page .ebook-page-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: min(76px, 60%);
  height: 1px;
  transform: translateX(-50%);
  background: var(--twilight-last-light);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  pointer-events: none;
}

html.theme-twilight body.theme-twilight .context-ebook-page .ebook-page-title.is-letter-title::after {
  bottom: -6px;
}

@media (max-height: 600px) {
  html.theme-twilight body.theme-twilight.has-loaded-text:not(.ebook-mode)
    #wordDisplay.has-chapter-title .speed-chapter-card {
    gap: 12px !important;
  }
}

/* Reader settings sheet refinements (2026-09-25). One segmented choice per
 * setting, a live dialogue sample, and no sticky hover rings on touch. */
#fontSizePopover .reader-segmented {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--reader-settings-line);
  border-radius: 13px;
  background: var(--reader-settings-raised);
}
#fontSizePopover .reader-segmented > button {
  min-width: 0;
  min-height: 38px;
  margin: 0;
  padding: 0 6px;
  border: 0 !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--reader-settings-muted) !important;
  box-shadow: none !important;
  font: 600 0.76rem/1.2 var(--ui-font);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
#fontSizePopover .reader-segmented > button[aria-checked="true"] {
  background: color-mix(in srgb, var(--reader-settings-accent) 16%, var(--reader-settings-raised)) !important;
  color: var(--reader-settings-ink) !important;
}
#fontSizePopover .reader-dialogue-preview {
  margin: 12px 2px 4px;
  color: var(--reader-settings-muted);
  font: 400 1.02rem/1.45 var(--page-reading-font, var(--reading-font));
}
#fontSizePopover .reader-appearance-dialogue-colours { margin-top: 10px; }
@media (hover: none) {
  #fontSizePopover .reader-setting-card:hover:not([aria-pressed="true"]) {
    border-color: var(--reader-settings-line) !important;
  }
  #readerQuickMenu #readerMenuSpeakingButton:hover { border-color: var(--reader-settings-line) !important; }
}

/* Fonts: four quick choices plus a compact "More fonts" list. */
#fontSizePopover .reader-font-card[aria-pressed="true"]::after {
  top: 5px;
  right: 5px;
  width: 15px;
  height: 15px;
  font-size: 0.55rem;
}
#fontSizePopover .reader-font-more { margin-top: 8px; }
#fontSizePopover .reader-font-more > summary {
  width: fit-content;
  padding: 6px 2px;
  color: var(--reader-settings-accent);
  font: 600 0.76rem/1.3 var(--ui-font);
  list-style: none;
  cursor: pointer;
}
#fontSizePopover .reader-font-more > summary::-webkit-details-marker { display: none; }
#fontSizePopover .reader-font-more > summary::after { content: " ›"; }
#fontSizePopover .reader-font-more[open] > summary::after { content: " ⌄"; }
#fontSizePopover .reader-font-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
#fontSizePopover .reader-font-list > button {
  min-height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--reader-settings-line) !important;
  border-radius: 10px;
  background: var(--reader-settings-raised) !important;
  color: var(--reader-settings-ink) !important;
  box-shadow: none !important;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
#fontSizePopover .reader-font-list > button[aria-pressed="true"] {
  border-color: var(--reader-settings-accent) !important;
  background: color-mix(in srgb, var(--reader-settings-accent) 9%, var(--reader-settings-raised)) !important;
}

/* Text size: small A · slider · large A, changing the page behind live. */
#fontSizePopover .reader-size-row {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 4px;
  border: 1px solid var(--reader-settings-line);
  border-radius: 14px;
  background: var(--reader-settings-raised);
}
#fontSizePopover .reader-size-glyph {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 10px;
  background: transparent !important;
  color: var(--reader-settings-ink) !important;
  box-shadow: none !important;
  font-family: var(--page-reading-font, var(--reading-font));
  line-height: 1;
  cursor: pointer;
}
#fontSizePopover .reader-size-glyph.is-small { font-size: 0.85rem; }
#fontSizePopover .reader-size-glyph.is-large { font-size: 1.45rem; }
#fontSizePopover .reader-size-glyph:disabled { opacity: 0.35; cursor: default; }
#fontSizePopover .reader-size-row > .reader-size-glyph.is-small { grid-area: 1 / 1 !important; }
#fontSizePopover .reader-size-row > .reader-appearance-size-scale { grid-area: 1 / 2 !important; margin: 0 !important; }
#fontSizePopover .reader-size-row > .reader-size-glyph.is-large { grid-area: 1 / 3 !important; }
#fontSizePopover .reader-size-row .reader-appearance-size-stop,
#fontSizePopover .reader-size-row .reader-appearance-size-stop:is(:hover, :focus, :focus-visible, :active) {
  flex: 0 0 20px;
  width: 20px !important;
  min-width: 20px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
#fontSizePopover .reader-size-hint {
  display: block;
  margin: 6px 4px 0;
  color: var(--reader-settings-muted);
  font: 450 0.65rem/1.4 var(--ui-font);
}

/* "In this book": Who's Speaking as a calm list row. Contents opens from the
 * reader's top-right Chapters control, so an empty card is hidden. */
#readerQuickMenu .reader-sheet-nav:not(:has(> :not([hidden]))) { display: none; }
#readerQuickMenu .reader-sheet-nav {
  display: grid;
  margin: 0 0 18px;
  overflow: hidden;
  border: 1px solid var(--reader-settings-line);
  border-radius: 16px;
  background: var(--reader-settings-raised);
}
#readerQuickMenu .reader-sheet-nav #readerMenuSpeakingButton {
  grid-column: auto;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  align-items: center;
  gap: 12px !important;
  min-height: 60px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--reader-settings-ink) !important;
  box-shadow: none !important;
  text-align: left;
}
#readerQuickMenu .reader-sheet-nav #readerMenuSpeakingButton[hidden] { display: none !important; }
#readerQuickMenu .reader-sheet-nav #readerMenuSpeakingButton .reader-quick-menu-row-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--reader-settings-accent) 12%, transparent);
  color: var(--reader-settings-accent) !important;
}
#readerQuickMenu .reader-sheet-nav #readerMenuSpeakingButton .character-legend-symbol { width: 26px; height: 26px; }
#readerQuickMenu .reader-sheet-nav #readerMenuSpeakingButton strong {
  display: block;
  color: var(--reader-settings-ink) !important;
  font: 650 0.9rem/1.3 var(--ui-font) !important;
}
#readerQuickMenu .reader-sheet-nav #readerMenuSpeakingButton small {
  display: block;
  overflow: hidden;
  color: var(--reader-settings-muted) !important;
  font: 450 0.72rem/1.4 var(--ui-font) !important;
  opacity: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#readerQuickMenu .reader-sheet-nav #readerMenuSpeakingButton .reader-quick-menu-chevron {
  color: var(--reader-settings-muted) !important;
}

/* Source: a matching row naming where the text came from. */
#readerQuickMenu .reader-quick-menu-actions {
  margin: 4px 0 20px;
  overflow: hidden;
  border: 1px solid var(--reader-settings-line);
  border-radius: 16px;
  background: var(--reader-settings-raised);
}
#readerQuickMenu .reader-quick-menu-actions:not(:has(.reader-quick-menu-row:not([hidden]))) { display: none; }
#readerQuickMenu #readerMenuSourceButton {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 14px !important;
  align-items: center;
  gap: 12px !important;
  min-height: 60px !important;
  padding: 10px 14px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--reader-settings-ink) !important;
  text-decoration: none !important;
}
#readerQuickMenu #readerMenuSourceButton[hidden] { display: none !important; }
#readerQuickMenu #readerMenuSourceButton * { text-decoration: none !important; }
#readerQuickMenu #readerMenuSourceButton .reader-quick-menu-row-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--reader-settings-ink) 7%, transparent);
  color: var(--reader-settings-muted) !important;
}
#readerQuickMenu #readerMenuSourceButton .reader-quick-menu-row-icon svg { width: 17px; height: 17px; }
#readerQuickMenu #readerMenuSourceButton strong { display: block; font: 650 0.9rem/1.3 var(--ui-font) !important; }
#readerQuickMenu #readerMenuSourceButton small { display: block; color: var(--reader-settings-muted); font: 450 0.72rem/1.4 var(--ui-font); }
#readerQuickMenu #readerMenuSourceButton .reader-quick-menu-external { color: var(--reader-settings-muted); }

/* Reading pace: grouped switches like iOS Settings. */
#fontSizePopover .reader-pref-list {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--reader-settings-line);
  border-radius: 16px;
  background: var(--reader-settings-raised);
}
#fontSizePopover .reader-pref-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  margin: 0;
  padding: 10px 14px;
  border: 0 !important;
  border-top: 1px solid var(--reader-settings-line) !important;
  border-radius: 0;
  background: transparent !important;
  color: var(--reader-settings-ink) !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#fontSizePopover .reader-pref-row:first-child { border-top: 0 !important; }
#fontSizePopover .reader-pref-copy strong { display: block; font: 600 0.84rem/1.3 var(--ui-font); }
#fontSizePopover .reader-pref-copy small { display: block; color: var(--reader-settings-muted); font: 450 0.68rem/1.4 var(--ui-font); }
#fontSizePopover .reader-pref-link > span:last-child { color: var(--reader-settings-muted); font-size: 1.1rem; }
#fontSizePopover .reader-pref-switch {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--reader-settings-ink) 18%, transparent);
  transition: background-color 180ms ease;
}
#fontSizePopover .reader-pref-switch > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
#fontSizePopover .reader-pref-row[aria-checked="true"] .reader-pref-switch { background: var(--reader-settings-accent); }
#fontSizePopover .reader-pref-row[aria-checked="true"] .reader-pref-switch > span { transform: translateX(18px); }

/* Half-height reader settings on phones: the page stays visible above the
 * sheet, so theme, font and size changes are seen as they are made. Swipe
 * up for the full sheet; pull down to return to half height, then close. */
@media (max-width: 699px) {
  #readerQuickMenu.reader-quick-menu {
    background: rgba(0, 0, 0, 0.1) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  #readerQuickMenu .reader-quick-menu-sheet {
    width: 100% !important;
    height: min(56dvh, 560px) !important;
    min-height: 0 !important;
    max-height: none !important;
    transition: height 380ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  #readerQuickMenu.is-sheet-expanded .reader-quick-menu-sheet {
    height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom))) !important;
  }
  #readerQuickMenu .reader-quick-menu-header {
    min-height: 0 !important;
    padding-top: 18px !important;
    padding-bottom: 8px !important;
  }
  #readerQuickMenu .reader-quick-menu-header h2 { font-size: 1.35rem !important; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  #readerQuickMenu .reader-quick-menu-sheet { transition: none; }
}

/* The appearance block now sits under the Contents card, so it no longer
 * needs its own raised header band. */
#readerQuickMenu #fontSizePopover,
#readerQuickMenu #fontSizePopover .reader-appearance-heading {
  background: transparent !important;
  box-shadow: none !important;
}
@media (hover: none) {
  #fontSizePopover .reader-theme-card:hover:not(.is-active) {
    border-color: var(--reader-settings-line) !important;
  }
}

/* Page Mode line spacing and margins chosen in reader settings. */
body[data-reader-spacing="compact"] { --reader-line-height: 1.42; }
body[data-reader-spacing="relaxed"] { --reader-line-height: 1.78; }
body[data-reader-margins="narrow"] { --reader-page-margin: clamp(16px, 4.5vw, 40px); }
body[data-reader-margins="wide"] { --reader-page-margin: clamp(40px, 11vw, 84px); }
#fontSizePopover .reader-layout-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
#fontSizePopover .reader-layout-control {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
#fontSizePopover .reader-layout-control > span {
  color: var(--reader-settings-ink);
  font: 600 0.78rem/1.3 var(--ui-font);
}

/* Verified speaker-colour badges (app.js hasVerifiedSpeakerColours). */
.discover-gutenberg-book-copy i.discover-verified-colours {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.gutenberg-details-meta-list > .gutenberg-details-verified-colours {
  color: var(--accent);
}

.gutenberg-details-meta-list > .gutenberg-details-verified-colours > span {
  color: inherit;
}

/* Image viewer: pinch, double-tap and drag-to-close, larger photographs, and
 * the cool graphite dark mode rather than the older umber surface. */
.ebook-image-viewer {
  touch-action: none;
  overscroll-behavior: contain;
}

.ebook-image-viewer-frame img {
  transform-origin: 50% 50%;
  cursor: zoom-in;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.ebook-image-viewer.is-zoomed .ebook-image-viewer-frame img {
  cursor: grab;
  will-change: transform;
}

.ebook-image-viewer-frame img.is-settling {
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ebook-image-viewer-frame figcaption,
.ebook-image-viewer-close {
  transition: opacity 160ms ease;
}

.ebook-image-viewer-close {
  z-index: 2;
}

.ebook-image-viewer.is-zoomed .ebook-image-viewer-frame figcaption,
.ebook-image-viewer.is-dismissing .ebook-image-viewer-frame figcaption {
  opacity: 0;
}

.ebook-image-viewer.is-dismissing .ebook-image-viewer-close {
  opacity: calc(1 - var(--image-viewer-dismiss, 0));
}

/* Discover opens photographs above its pages, dock and book details. */
.ebook-image-viewer.is-photo {
  z-index: 900;
  padding-right: max(0px, env(safe-area-inset-right));
  padding-left: max(0px, env(safe-area-inset-left));
}

.ebook-image-viewer.is-photo .ebook-image-viewer-frame {
  width: min(100%, 1400px);
  max-height: none;
}

.ebook-image-viewer.is-photo .ebook-image-viewer-frame img {
  max-height: 74vh;
  border-radius: 0;
  box-shadow: none;
}

.ebook-image-viewer.is-photo .ebook-image-viewer-frame figcaption {
  display: grid;
  gap: 4px;
  padding: 0 24px;
}

.ebook-image-viewer-frame figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

.ebook-image-viewer-frame figcaption small {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}

@media (min-width: 720px) {
  .ebook-image-viewer.is-photo .ebook-image-viewer-frame img {
    border-radius: 4px;
    box-shadow: 0 22px 52px rgba(45, 36, 25, 0.16);
  }
}

/* A quiet ring beside the close button while the larger copy arrives. */
.ebook-image-viewer.is-loading-full::after {
  content: "";
  position: fixed;
  top: calc(max(18px, calc(env(safe-area-inset-top) + 10px)) + (var(--top-control-size) - 20px) / 2);
  right: max(32px, calc(env(safe-area-inset-right) + 26px));
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid rgba(76, 68, 58, 0.16);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: ebook-image-viewer-spin 900ms linear infinite;
  pointer-events: none;
}

@keyframes ebook-image-viewer-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ebook-image-viewer.is-loading-full::after { animation: none; }
  .ebook-image-viewer-frame img.is-settling { transition: none; }
}

html.theme-dark .ebook-image-viewer,
body.theme-dark .ebook-image-viewer {
  background:
    radial-gradient(circle at 50% -8%, rgba(248, 239, 224, 0.045), transparent 44%),
    linear-gradient(180deg, rgba(24, 25, 29, 0.97) 0%, rgba(20, 21, 25, 0.98) 56%, rgba(15, 16, 19, 0.99) 100%);
}

html.theme-dark .ebook-image-viewer-frame img,
body.theme-dark .ebook-image-viewer-frame img {
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.36);
}

html.theme-dark .ebook-image-viewer.is-photo .ebook-image-viewer-frame img,
body.theme-dark .ebook-image-viewer.is-photo .ebook-image-viewer-frame img {
  box-shadow: none;
}

html.theme-dark .ebook-image-viewer-frame figcaption,
body.theme-dark .ebook-image-viewer-frame figcaption {
  color: rgba(226, 222, 214, 0.66);
}

html.theme-dark .ebook-image-viewer-close,
body.theme-dark .ebook-image-viewer-close {
  background:
    radial-gradient(circle at 50% 16%, rgba(248, 239, 224, 0.085), transparent 48%),
    linear-gradient(180deg, rgba(42, 43, 48, 0.97), rgba(25, 26, 30, 0.99));
  color: rgba(236, 232, 224, 0.78);
  box-shadow:
    0 12px 25px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(248, 239, 224, 0.055);
}

html.theme-dark .ebook-image-viewer.is-loading-full::after,
body.theme-dark .ebook-image-viewer.is-loading-full::after {
  border-color: rgba(236, 232, 224, 0.14);
  border-top-color: var(--teal);
}


/*
 * Home screen ownership
 * =====================
 *
 * This stylesheet is the current visual authority for the Home destination.
 * It loads after the legacy feature cascade but before the shared shelf
 * blueprint and structural app-shell contract. Keep viewport ownership,
 * bottom navigation, splash, Library, Discover, and reader styling out.
 */

/*
 * Home editorial surface
 * ----------------------
 * One deliberate panel anchors the current read. Quiet individual shelf
 * cards group each cover with its title; discovery stays part of the page.
 */
:root {
  --home-light-canvas: #f1dfcb;
  --home-dark-canvas: #0b0d10;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])),
html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:not(.is-menu-subview):not(.is-settings-screen):has(> .menu-card > #menuMain:not([hidden])) {
  --home-canvas: var(--home-light-canvas);
  --home-panel: #f8eee2;
  --home-shelf-panel: color-mix(in srgb, var(--home-panel) 60%, var(--home-canvas));
  --home-ink: var(--light-ink);
  --home-muted: var(--light-muted);
  --home-soft: var(--light-quiet);
  --home-coral: var(--light-accent-ink);
  --home-amber: var(--light-accent-ink);
  --home-hairline: var(--light-line);
  --home-panel-line: var(--light-line);
  --home-panel-shadow: none;
  --home-secondary-button: var(--light-panel);
  --home-secondary-button-line: var(--light-line-strong);
  --home-cream: var(--home-ink);
  --home-cream-soft: var(--home-muted);
  color-scheme: light;
  background: var(--home-canvas) !important;
}
html.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])),
body.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) {
  --home-canvas: var(--home-dark-canvas);
  --home-panel: #15171b;
  --home-shelf-panel: color-mix(in srgb, var(--home-panel) 70%, var(--home-canvas));
  --home-ink: #f2ede3;
  --home-muted: rgba(225, 218, 207, 0.78);
  --home-soft: rgba(225, 218, 207, 0.62);
  --home-coral: #df5d51;
  --home-amber: #c79556;
  --home-hairline: rgba(231, 223, 211, 0.11);
  --home-panel-line: rgba(213, 176, 122, 0.2);
  --home-panel-shadow: 0 24px 52px rgba(0, 0, 0, 0.3);
  --home-secondary-button: #1b1e23;
  --home-secondary-button-line: rgba(231, 223, 211, 0.2);
  --home-cream: var(--home-ink);
  --home-cream-soft: var(--home-muted);
  color-scheme: dark;
  background: var(--home-canvas) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-ambient-canvas,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-amber-mark {
  display: none !important;
  opacity: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) > .menu-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  padding:
    max(22px, calc(env(safe-area-inset-top) + 14px))
    0
    max(124px, calc(env(safe-area-inset-bottom) + 98px)) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
  --home-page-gutter: clamp(22px, 5vw, 48px);
  width: min(100%, 920px) !important;
  max-width: 920px !important;
  margin-inline: auto !important;
  padding-inline: var(--home-page-gutter) !important;
  gap: clamp(24px, 3.4vh, 36px) !important;
  color: var(--home-ink) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero {
  min-height: 0 !important;
  margin: 0 !important;
  padding: clamp(8px, 1.8vh, 18px) 0 0 !important;
  gap: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-wordmark {
  margin: 0 !important;
  color: var(--home-ink) !important;
  font: 470 clamp(3.8rem, 12vw, 6.55rem)/0.88 "Rhythm Wordmark", Georgia, serif !important;
  letter-spacing: -0.047em !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle {
  max-width: none !important;
  margin: clamp(14px, 2vh, 21px) 0 0 !important;
  color: var(--home-muted) !important;
  font: 450 clamp(0.98rem, 2.5vw, 1.18rem)/1.25 var(--ui-font) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-section {
  margin: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-section-label {
  color: var(--home-coral) !important;
  font: 720 clamp(0.64rem, 1.65vw, 0.75rem)/1 var(--ui-font) !important;
  letter-spacing: 0.21em !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-section,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-section::before,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-section::after {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) {
  --home-resume-pad: clamp(19px, 3vw, 27px);
  --home-resume-cover-w: clamp(126px, 24vw, 188px);
  --home-resume-gap: clamp(20px, 3.6vw, 38px);
  position: relative !important;
  overflow: hidden !important;
  padding: var(--home-resume-pad) !important;
  border: 1px solid var(--home-panel-line) !important;
  border-radius: 20px !important;
  background: var(--home-panel) !important;
  box-shadow: var(--home-panel-shadow) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card::before,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card::after {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card > .home-section-label {
  position: absolute !important;
  z-index: 2;
  top: var(--home-resume-pad) !important;
  left: var(--home-resume-pad) !important;
  max-width: calc(100% - (var(--home-resume-pad) * 2)) !important;
  margin: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book > .home-section-label {
  left: calc(var(--home-resume-pad) + var(--home-resume-cover-w) + var(--home-resume-gap)) !important;
  max-width: calc(100% - (var(--home-resume-pad) * 2) - var(--home-resume-cover-w) - var(--home-resume-gap)) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-info-button {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-body,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book .home-resume-body {
  display: grid !important;
  grid-template-columns: var(--home-resume-cover-w) minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: clamp(18px, 2.8vw, 25px) var(--home-resume-gap) !important;
  min-width: 0;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book .home-resume-cover {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: start !important;
  position: relative;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book :is(.home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback) {
  width: var(--home-resume-cover-w) !important;
  max-width: 100% !important;
  aspect-ratio: 0.64 !important;
  border-radius: 8px !important;
  background: rgba(31, 29, 25, 0.08) !important;
  box-shadow:
    0 17px 30px rgba(38, 31, 24, 0.18),
    0 0 0 1px rgba(67, 56, 43, 0.08) !important;
}

html.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book :is(.home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback),
body.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book :is(.home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback) {
  background: rgba(27, 27, 27, 0.72) !important;
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(229, 220, 207, 0.07) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book .home-resume-copy {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-content: start !important;
  align-self: stretch !important;
  gap: clamp(11px, 1.8vw, 17px) !important;
  min-width: 0;
  width: 100%;
  padding: clamp(31px, 4vw, 43px) 0 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy h3 {
  grid-column: 1 !important;
  max-width: 15ch !important;
  margin: 0 !important;
  color: var(--home-ink) !important;
  font: 470 clamp(2rem, 5.4vw, 3.45rem)/0.99 var(--ui-font) !important;
  letter-spacing: -0.033em !important;
  text-wrap: balance;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy > p {
  grid-column: 1 !important;
  margin: 0 !important;
  color: var(--home-muted) !important;
  font: 450 clamp(0.9rem, 2vw, 1.08rem)/1.3 var(--ui-font) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-progress {
  grid-column: 1 !important;
  width: 100% !important;
  gap: 8px !important;
  margin: clamp(8px, 1.3vw, 13px) 0 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-track {
  height: 3px !important;
  border-radius: 99px !important;
  background: var(--home-hairline) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-track > span,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-track span {
  border-radius: inherit !important;
  background: var(--home-coral) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-meta {
  color: var(--home-soft) !important;
  font: 450 clamp(0.72rem, 1.7vw, 0.88rem)/1.2 var(--ui-font) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-meta > :first-child {
  color: var(--home-coral) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-actions {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(8px, 1.6vw, 12px) !important;
  width: 100%;
  margin: 0 !important;
  padding-top: clamp(14px, 2.2vw, 20px) !important;
  border-top: 1px solid var(--home-hairline) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-primary-action, .home-secondary-action),
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book :is(.home-primary-action, .home-secondary-action) {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.5vw, 11px) !important;
  padding: 0 clamp(10px, 2vw, 17px) !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  color: #fff8ef !important;
  box-shadow: none !important;
  font: 470 clamp(0.94rem, 2.1vw, 1.1rem)/1.08 var(--ui-font) !important;
  text-align: left !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-actions > .home-primary-action {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-actions > .home-secondary-action {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: stretch !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book .home-secondary-action,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-secondary-action {
  padding-inline: clamp(10px, 2vw, 17px) !important;
  border-color: var(--home-secondary-button-line) !important;
  background: var(--home-secondary-button) !important;
  color: var(--home-ink) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card :is(.home-secondary-action > span, .home-secondary-action #homeResumeSecondaryText) {
  color: var(--home-ink) !important;
  -webkit-text-fill-color: var(--home-ink) !important;
  opacity: 1 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-primary-action, .home-secondary-action) .home-action-symbol {
  position: static !important;
  inset: auto !important;
  order: -1;
  box-sizing: border-box;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-primary-action .home-action-symbol {
  color: #fff8ef !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card .home-secondary-action .home-action-symbol {
  color: var(--home-muted) !important;
  opacity: 1 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-primary-action {
  border-color: var(--home-coral) !important;
  background: var(--home-coral) !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-action-copy {
  display: grid !important;
  min-width: 0;
  gap: 3px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-action-detail {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(#homeResumePrimaryText, #homeResumeSecondaryText) {
  width: auto !important;
  overflow: visible !important;
  line-height: 1 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-body {
  grid-template-columns: minmax(0, 1fr) clamp(92px, 18vw, 142px) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-copy {
  grid-column: 1 !important;
  padding-top: clamp(30px, 4vw, 42px) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-copy h3 {
  max-width: 11ch !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-cover {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: clamp(132px, 23vw, 190px) !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-cover-placeholder {
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--home-amber) !important;
  opacity: 0.2;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-cover-placeholder > span {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section {
  padding-top: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 0 0 clamp(14px, 2vw, 19px) !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--home-hairline);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-view-all {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-rail {
  width: 100% !important;
  max-width: 100% !important;
  gap: clamp(13px, 2.4vw, 22px) !important;
  margin-inline: 0 !important;
  padding: 2px 0 9px !important;
  scroll-padding-inline: 0 !important;
  scrollbar-width: none;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-rail::-webkit-scrollbar {
  display: none;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book {
  flex: 0 0 clamp(82px, 18vw, 122px) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  scroll-snap-align: start;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book-copy {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-progress-cover, .home-progress-cover.has-image, .home-progress-cover.has-title-fallback) {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 0.64 !important;
  border-radius: 6px !important;
  background: rgba(31, 29, 25, 0.08) !important;
  box-shadow:
    0 11px 20px rgba(46, 37, 27, 0.15),
    0 0 0 1px rgba(67, 56, 43, 0.07) !important;
}

html.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-progress-cover, .home-progress-cover.has-image, .home-progress-cover.has-title-fallback),
body.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-progress-cover, .home-progress-cover.has-image, .home-progress-cover.has-title-fallback) {
  background: rgba(27, 27, 27, 0.72) !important;
  box-shadow:
    0 12px 21px rgba(0, 0, 0, 0.27),
    0 0 0 1px rgba(229, 220, 207, 0.06) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book .home-progress-track {
  height: 3px !important;
  margin-top: 2px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-empty-progress {
  width: 100%;
  min-height: 0 !important;
  padding: 10px 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--home-hairline) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--home-ink) !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-empty-progress small {
  color: var(--home-muted) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-empty-icon {
  border: 0 !important;
  background: transparent !important;
  color: var(--home-amber) !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section {
  position: relative;
  padding: clamp(24px, 4vw, 38px) 0 clamp(8px, 2vw, 16px) !important;
  border-top: 1px solid var(--home-hairline) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section::before,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section::after,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section > .home-section-label {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-action-panel, .home-reading-panel) {
  border-color: var(--home-hairline) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-action-card, .home-reading-card) {
  background: transparent !important;
  color: var(--home-ink) !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-action-card, .home-reading-card) small {
  color: var(--home-muted) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-primary-action, .home-secondary-action, .home-progress-book, .home-discover-launch):is(:active, .is-tactile-press) {
  transform: none !important;
}

@media (max-width: 620px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) > .menu-card {
    padding-top: max(18px, calc(env(safe-area-inset-top) + 10px)) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
    --home-page-gutter: clamp(18px, 4.9vw, 24px);
    gap: clamp(19px, 2.55vh, 25px) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero {
    padding-top: 3px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-wordmark {
    font-size: clamp(3.55rem, 15.8vw, 4.65rem) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle {
    margin-top: 12px !important;
    font-size: 0.94rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) {
    --home-resume-pad: 17px;
    --home-resume-cover-w: clamp(102px, 27vw, 119px);
    --home-resume-gap: clamp(15px, 4.1vw, 19px);
    border-radius: 17px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book .home-resume-body {
    row-gap: 15px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book .home-resume-copy {
    gap: 10px !important;
    padding-top: 27px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy h3 {
    max-width: 12ch !important;
    font-size: clamp(1.55rem, 7.3vw, 2.18rem) !important;
    line-height: 0.99 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy > p {
    overflow: hidden;
    font-size: clamp(0.77rem, 3.25vw, 0.9rem) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-progress {
    gap: 6px !important;
    margin-top: 6px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-meta {
    gap: 7px !important;
    font-size: clamp(0.61rem, 2.65vw, 0.72rem) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-meta > :last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-actions {
    padding-top: 13px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-primary-action, .home-secondary-action),
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book :is(.home-primary-action, .home-secondary-action) {
    min-height: 48px !important;
    height: 48px !important;
    gap: 8px !important;
    padding-inline: 9px !important;
    font-size: clamp(0.78rem, 3.15vw, 0.91rem) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-secondary-action {
    padding-inline: 9px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-primary-action, .home-secondary-action) .home-action-symbol {
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-action-detail {
    max-width: 19ch;
    font-size: clamp(0.53rem, 2.2vw, 0.64rem) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-body {
    grid-template-columns: minmax(0, 1fr) clamp(72px, 20vw, 92px) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-cover {
    min-height: 126px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-actions > .home-primary-action {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) .home-resume-actions > .home-secondary-action {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-section-head {
    margin-bottom: 12px !important;
    padding-bottom: 8px;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-rail {
    gap: 12px !important;
    padding-bottom: 6px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book {
    flex-basis: clamp(69px, 19.5vw, 82px) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section {
    padding-top: 22px !important;
  }

}

@media (max-width: 370px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
    --home-page-gutter: 16px;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) {
    --home-resume-pad: 15px;
    --home-resume-cover-w: 94px;
    --home-resume-gap: 13px;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy h3 {
    font-size: 1.42rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-action-detail {
    display: none !important;
  }
}

/* Home single-viewport dashboard: primary content only, with compact utilities. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-control {
  position: absolute;
  z-index: 40;
  top: clamp(15px, 2.4vh, 27px);
  right: 0;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero:has(.home-header-add-menu:not([hidden])) {
  z-index: 500 !important;
  isolation: isolate;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button {
  min-width: 62px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 2px 0 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--home-muted);
  box-shadow: none;
  font: 500 clamp(0.9rem, 2.2vw, 1.02rem)/1 var(--ui-font);
  transform: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button > span {
  font-family: var(--ui-font);
  font-size: 1.25em;
  font-weight: 360;
  line-height: 1;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button:focus-visible {
  outline: 1px solid var(--home-coral);
  outline-offset: 4px;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-menu {
  position: absolute;
  z-index: 1000;
  top: calc(100% + 5px);
  right: 0;
  width: min(250px, calc(100vw - (var(--home-page-gutter) * 2)));
  padding: 8px;
  border: 1px solid var(--home-panel-line);
  border-radius: 16px;
  background: var(--home-panel);
  box-shadow: var(--home-panel-shadow);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-menu[hidden] {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-menu > p {
  margin: 0;
  padding: 8px 10px 7px;
  color: var(--home-coral);
  font: 720 0.64rem/1 var(--ui-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-menu > button {
  width: 100%;
  min-height: 58px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  padding: 9px 10px;
  border: 0;
  border-top: 1px solid var(--home-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--home-ink);
  box-shadow: none;
  text-align: left;
  transform: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-menu > button:is(:hover, :focus-visible) {
  outline: 0;
  background: rgba(201, 85, 73, 0.07);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-menu strong {
  color: var(--home-ink);
  font: 500 0.98rem/1.08 var(--ui-font);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-menu small {
  color: var(--home-muted);
  font: 450 0.7rem/1.25 var(--ui-font);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-add-section,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-utility-section,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-empty-footer {
  display: none !important;
}

#inputPanel.is-open > .menu-card > #menuMain.home-dashboard.is-paste-editor-open > .home-hero {
  order: -2;
}

#inputPanel.is-open > .menu-card > #menuMain.home-dashboard.is-paste-editor-open > .home-add-section,
#inputPanel.is-open > .menu-card > #menuMain:not([hidden]) > .home-add-section.is-paste-editor-open,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-add-section:has(.home-paste-editor:not([hidden])) {
  order: -1;
  display: grid !important;
}

#inputPanel.is-open > .menu-card > #menuMain.home-dashboard.is-paste-editor-open > .home-add-section .home-action-panel,
#inputPanel.is-open > .menu-card > #menuMain:not([hidden]) > .home-add-section.is-paste-editor-open .home-action-panel,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-add-section:has(.home-paste-editor:not([hidden])) .home-action-panel {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-view-all {
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 1px 0 10px;
  border: 0;
  background: transparent;
  color: var(--home-coral);
  box-shadow: none;
  font: 500 clamp(0.78rem, 1.9vw, 0.92rem)/1 var(--ui-font);
  transform: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-view-all .menu-chevron {
  width: 7px;
  height: 7px;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section {
  padding: clamp(16px, 2.6vw, 23px) 0 clamp(4px, 1vw, 8px) !important;
}

@media (max-width: 620px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-control {
    top: 6px;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book {
    flex: 0 0 clamp(68px, calc((100% - 36px) / 4), 82px) !important;
  }

  }

@media (min-width: 380px) and (max-width: 620px) and (min-height: 780px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) > .menu-card {
    padding-top: max(14px, calc(env(safe-area-inset-top) + 5px)) !important;
    padding-bottom: max(94px, calc(env(safe-area-inset-bottom) + 78px)) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
    min-height: calc(100dvh - 126px);
    display: flex !important;
    flex-direction: column;
    gap: clamp(12px, 1.75vh, 16px) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero {
    padding-top: 0 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-wordmark {
    font-size: clamp(3.45rem, 15vw, 4.15rem) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle {
    margin-top: 8px !important;
    font-size: 0.88rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card:not(.has-book) {
    --home-resume-pad: 14px;
    --home-resume-cover-w: 100px;
    --home-resume-gap: 14px;
    border-radius: 16px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book .home-resume-body {
    row-gap: 11px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book .home-resume-copy {
    gap: 6px !important;
    padding-top: 23px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy h3 {
    font-size: clamp(1.52rem, 6.8vw, 1.92rem) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-progress {
    gap: 5px !important;
    margin-top: 3px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-actions {
    padding-top: 10px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-primary-action, .home-secondary-action),
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-book :is(.home-primary-action, .home-secondary-action) {
    min-height: 44px !important;
    height: 44px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-section-head {
    min-height: 32px;
    margin-bottom: 8px !important;
    padding-bottom: 6px;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-rail {
    gap: 12px !important;
    padding-top: 0 !important;
    padding-bottom: 3px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book {
    flex-basis: clamp(68px, calc((100% - 36px) / 4), 80px) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section {
    margin-top: 0 !important;
    padding-top: 13px !important;
    padding-bottom: 0 !important;
  }

  }

/* Home hierarchy refinement: a firmer hero edge and tighter shelf rhythm. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card:not(.has-book)) {
  border-color: color-mix(in srgb, var(--home-panel-line) 86%, var(--home-ink) 14%) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-resume-card > .home-section-label,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-discover-launch-kicker {
  font-size: clamp(0.72rem, 1.9vw, 0.84rem) !important;
  letter-spacing: 0.19em !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-rail {
  padding-bottom: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section {
  padding-bottom: 6px !important;
  border-bottom: 1px solid var(--home-hairline) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-section + .home-discover-section {
  margin-top: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section {
  padding-top: clamp(15px, 2.1vh, 20px) !important;
  border-top: 0 !important;
}

@media (min-width: 380px) and (max-width: 620px) and (min-height: 780px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-progress-section + .home-discover-section {
    margin-top: auto !important;
    padding-bottom: 2px !important;
  }

  }

/*
 * Home — iPhone 15 Pro Max portrait fit
 * --------------------------------------
 * Size the dashboard against the usable viewport so the three editorial
 * sections share the space evenly and Discover finishes above the dock.
 * Scrolling remains available if accessibility text makes the content taller.
 */
@media (min-width: 414px) and (max-width: 440px) and (min-height: 860px) and (max-height: 960px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) {
    --home-dock-clearance: max(106px, calc(env(safe-area-inset-bottom) + 78px));
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) > .menu-card {
    box-sizing: border-box !important;
    padding-top: var(--destination-page-top) !important;
    padding-bottom: var(--home-dock-clearance) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
    box-sizing: border-box !important;
    height: calc(100dvh - var(--destination-page-top) - var(--home-dock-clearance));
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(.home-hero, .home-resume-section, .home-progress-section, .home-discover-section) {
    flex: 0 0 auto;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-wordmark {
    font-size: 3.82rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle {
    margin-top: 6px !important;
    font-size: 0.82rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-control {
    top: 0 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button {
    min-height: 40px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card:not(.has-book)) {
    --home-resume-pad: 12px !important;
    --home-resume-cover-w: 112px !important;
    --home-resume-gap: 13px !important;
    border-radius: 16px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-resume-card.has-book .home-resume-body {
    row-gap: 7px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-resume-card.has-book .home-resume-copy {
    gap: 5px !important;
    padding-top: 20px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy h3 {
    font-size: clamp(1.7rem, 6.7vw, 1.84rem) !important;
    line-height: 0.98 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy > p {
    font-size: 0.9rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-progress {
    gap: 4px !important;
    margin-top: 2px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-meta {
    font-size: 0.75rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-actions {
    gap: 8px !important;
    padding-top: 7px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(.home-primary-action, .home-secondary-action),
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-resume-card.has-book :is(.home-primary-action, .home-secondary-action) {
    min-height: 40px !important;
    height: 40px !important;
    font-size: 0.84rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-resume-card:not(.has-book) .home-resume-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-resume-card:not(.has-book) .home-resume-actions > .home-primary-action {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-resume-card:not(.has-book) .home-resume-actions > .home-secondary-action {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-progress-section .home-section-head {
    min-height: 29px !important;
    margin-bottom: 6px !important;
    padding-bottom: 5px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-rail {
    gap: 12px !important;
    padding: 0 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book {
    flex-basis: 92px !important;
    gap: 7px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section {
    padding-bottom: 4px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    .home-progress-section + .home-discover-section {
    margin-top: 0 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-discover-section {
    padding: 10px 0 2px !important;
  }

  }

/* Library-matched typography for the current book card. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-resume-card.has-book
  .home-resume-copy
  h3 {
  font-family: var(--ui-font) !important;
  font-weight: 650 !important;
  letter-spacing: -0.012em !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-resume-card.has-book
  .home-resume-copy
  > p {
  font-family: var(--ui-font) !important;
  font-weight: 540 !important;
  letter-spacing: 0 !important;
  line-height: 1.24 !important;
}

/* Keep lower-case descenders clear of tight Home card title boxes. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(
  .home-resume-copy h3,
  .home-action-card strong,
  .home-reading-card strong,
  .home-discover-launch-copy > strong
) {
  box-sizing: content-box !important;
  padding-bottom: 0.14em !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy h3 {
  line-height: 1.06 !important;
}

/* Home adoption of the shared editorial fallback artwork. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(
  .home-book-cover,
  .home-progress-cover
).editorial-fallback-cover {
  padding: clamp(8px, 7%, 18px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) minmax(20px, 27%) auto !important;
  place-items: initial !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(5px, 3%, 9px) !important;
  background: var(--editorial-cover-material) !important;
  color: var(--editorial-cover-ink) !important;
  box-shadow:
    0 12px 22px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--editorial-cover-ink) 8%, transparent) !important;
  text-align: left !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-cover.editorial-fallback-cover > :is(
    .editorial-fallback-label,
    .editorial-fallback-title,
    .editorial-fallback-motif,
    .editorial-fallback-meta
  ) {
  max-width: none !important;
  overflow-wrap: normal !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-cover-placeholder.editorial-empty-art {
  width: clamp(78px, 16vw, 104px) !important;
  opacity: 0.58 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-cover-placeholder.editorial-empty-art > .editorial-empty-sheet {
  display: grid !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-empty-icon.editorial-empty-art {
  width: 46px !important;
  aspect-ratio: 0.78 !important;
  color: var(--home-muted) !important;
  opacity: 0.62;
}

html.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-resume-card.has-book .home-book-cover.editorial-fallback-cover.is-research,
body.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-resume-card.has-book .home-book-cover.editorial-fallback-cover.is-research,
html.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-cover.editorial-fallback-cover.is-research,
body.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-cover.editorial-fallback-cover.is-research {
  background: var(--editorial-cover-material) !important;
  color: var(--editorial-cover-ink) !important;
  box-shadow:
    0 13px 24px rgba(0, 0, 0, 0.27),
    0 0 0 1px rgba(238, 231, 217, 0.13) !important;
}

/* Home side of the shared destination masthead contract. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) > .menu-card {
  padding-top: var(--destination-page-top) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
  --home-page-gutter: var(--destination-page-gutter) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 2px !important;
  align-content: start !important;
  align-items: start !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-wordmark {
  margin: 0 !important;
  font-family: "Rhythm Wordmark", Georgia, serif !important;
  font-size: var(--destination-title-size) !important;
  font-weight: 470 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.047em !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle {
  min-height: 1.25em;
  margin: 10px 0 0 !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.88rem, 2.4vw, 1rem) !important;
  font-weight: 450 !important;
  line-height: 1.25 !important;
}

/* Keep the Pro Max Home masthead compact after the shared title contract. */
@media (min-width: 414px) and (max-width: 440px) and (min-height: 860px) and (max-height: 960px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-wordmark {
    font-size: 4rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle {
    margin-top: 6px !important;
    font-size: 0.82rem !important;
  }
}

/* Home shelf and Discover finish: open shelf, contained recommendation panel. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-section .home-section-head,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-section,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-empty-progress {
  border-bottom: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card:not(.has-book)) {
  border-color: var(--home-panel-line) !important;
  border-radius: 24px !important;
}

@media (max-width: 620px) {

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card:not(.has-book)) {
    border-radius: 21px !important;
  }
}

@media (min-width: 414px) and (max-width: 440px) and (min-height: 860px) and (max-height: 960px) {

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card:not(.has-book)) {
    border-radius: 20px !important;
  }
}

/* Your Reading cards: cover-edge progress with title and author below. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  text-align: left !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-cover-frame {
  position: relative;
  width: 100%;
  display: block;
  aspect-ratio: 0.64;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book.is-wide-cover {
  flex: 0 0 clamp(150px, 29vw, 204px) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-book.is-wide-cover .home-progress-cover-frame,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-book.is-wide-cover :is(.home-progress-cover, .home-progress-cover.has-image, .home-progress-cover.has-title-fallback) {
  aspect-ratio: 1.42 / 1 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-book.is-wide-cover .home-progress-cover.has-image img {
  object-fit: cover !important;
  object-position: center !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-cover-frame > .home-progress-track {
  position: absolute !important;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100% !important;
  height: 4px !important;
  margin: 0 !important;
  border-radius: 0 0 6px 6px !important;
  background: rgba(17, 18, 21, 0.34) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-cover-frame > .home-progress-track > span {
  border-radius: 0 !important;
  background: var(--home-coral) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book-copy {
  width: 100% !important;
  min-width: 0;
  display: grid !important;
  gap: 3px !important;
  padding: 0 1px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book-copy strong {
  min-height: 0 !important;
  display: -webkit-box !important;
  overflow: hidden;
  color: var(--home-ink) !important;
  font: 620 clamp(0.74rem, 1.8vw, 0.88rem)/1.14 var(--ui-font) !important;
  letter-spacing: -0.018em;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book-copy small {
  display: block !important;
  min-width: 0;
  overflow: hidden;
  color: var(--home-muted) !important;
  font: 470 clamp(0.65rem, 1.55vw, 0.76rem)/1.18 var(--ui-font) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 620px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book.is-wide-cover {
    flex: 0 0 clamp(142px, 39vw, 168px) !important;
  }
}

/*
 * Personal editorial Home
 * -----------------------
 * Home is a reading front page: one cover-led re-entry hero, one open shelf,
 * and one compact recommendation. Discover supplies the visual language while
 * Home keeps the hierarchy personal and deliberately less catalogue-dense.
 */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
  gap: clamp(28px, 4.3vh, 42px) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .menu-main.home-dashboard > :is(
    .home-hero,
    .home-resume-section,
    .home-progress-section,
    .home-tonight-section
  ) {
  flex: 0 0 auto !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-hero {
  position: relative !important;
  /* A fixed minimum let the dashboard row stop short of the subtitle; the
     wordmark and subtitle already exceed the old 62px floor. */
  min-height: auto !important;
  padding-bottom: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-control {
  top: 5px !important;
  right: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button {
  min-width: 0 !important;
  min-height: 44px !important;
  gap: 7px !important;
  padding: 0 2px 0 9px !important;
  color: var(--home-coral) !important;
  font: 500 clamp(0.92rem, 2.4vw, 1.04rem)/1 var(--ui-font) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button > span {
  position: relative;
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px;
  display: block;
  font-size: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button > span::before,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button > span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: translate(-50%, -50%);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button > span::before {
  width: 12px;
  height: 1.4px;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-header-add-button > span::after {
  width: 1.4px;
  height: 12px;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-header-add-button:is(:hover, :focus-visible) {
  color: color-mix(in srgb, var(--home-coral) 82%, white 18%) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle {
  margin-top: 9px !important;
  color: var(--home-muted) !important;
  font: 450 clamp(0.88rem, 2.4vw, 1rem)/1.25 var(--ui-font) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-section-title {
  min-width: 0;
  margin: 0;
  padding: 0 0 0.08em;
  color: var(--home-ink);
  font: 470 clamp(2.08rem, 6.5vw, 3.35rem)/0.94 var(--ui-font);
  letter-spacing: -0.043em;
  text-wrap: balance;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(#homeProgressLabel, #homeDiscoverLabel).home-section-title {
  font: 470 clamp(2.08rem, 6.5vw, 3.35rem)/0.94 var(--ui-font) !important;
  letter-spacing: -0.043em !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-section-head,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-tonight-head {
  margin: 0 0 clamp(14px, 2.2vw, 20px) !important;
  padding: 0 !important;
  border: 0 !important;
  align-items: end !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-view-all {
  min-height: 32px !important;
  padding: 0 1px 0 10px !important;
  color: var(--home-muted) !important;
  font: 570 clamp(0.82rem, 1.9vw, 0.9rem)/1 var(--ui-font) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card.is-recommendation) {
  --home-resume-pad: clamp(20px, 3.1vw, 28px) !important;
  --home-resume-cover-w: clamp(118px, 20vw, 156px) !important;
  --home-resume-gap: clamp(20px, 3.6vw, 34px) !important;
  isolation: isolate;
  min-height: clamp(252px, 31vw, 292px) !important;
  border-color: color-mix(in srgb, var(--home-ink) 7%, transparent) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(105deg, color-mix(in srgb, var(--home-panel) 96%, transparent) 0 55%, color-mix(in srgb, var(--home-panel) 82%, transparent)),
    var(--home-panel) !important;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--home-canvas) 68%, transparent) !important;
}

html.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card.is-recommendation),
body.theme-dark #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card.is-recommendation) {
  background:
    linear-gradient(105deg, rgba(19, 21, 25, 0.99) 0 54%, rgba(19, 21, 25, 0.86)),
    var(--home-panel) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-artwork-wash::before {
  position: absolute !important;
  z-index: 0;
  top: -18% !important;
  right: -7% !important;
  bottom: -18% !important;
  left: 43% !important;
  display: block !important;
  background-image: var(--home-hero-artwork) !important;
  background-position: center !important;
  background-size: cover !important;
  content: "" !important;
  filter: blur(22px) saturate(0.72) brightness(0.58);
  opacity: 0.24;
  transform: scale(1.16);
  pointer-events: none;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-artwork-wash::after {
  position: absolute !important;
  z-index: 1;
  inset: 0 !important;
  display: block !important;
  background: linear-gradient(90deg, var(--home-panel) 0 50%, color-mix(in srgb, var(--home-panel) 55%, transparent) 78%, color-mix(in srgb, var(--home-panel) 86%, transparent)) !important;
  content: "" !important;
  pointer-events: none;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card > :not(.home-section-label) {
  position: relative;
  z-index: 2;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) > .home-section-label {
  z-index: 3;
  top: var(--home-resume-pad) !important;
  left: var(--home-resume-pad) !important;
  max-width: calc(100% - (var(--home-resume-pad) * 2) - var(--home-resume-cover-w) - var(--home-resume-gap)) !important;
  color: var(--home-coral) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.68rem, 1.65vw, 0.78rem) !important;
  font-weight: 720 !important;
  letter-spacing: 0.18em !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-resume-body {
  grid-template-columns: minmax(0, 1fr) var(--home-resume-cover-w) !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px var(--home-resume-gap) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-resume-cover {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
  align-self: center !important;
  min-height: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation)
  :is(.home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback) {
  width: var(--home-resume-cover-w) !important;
  max-width: 100% !important;
  aspect-ratio: 0.64 !important;
  border: 1px solid color-mix(in srgb, var(--home-ink) 12%, transparent) !important;
  border-radius: 5px 9px 9px 5px !important;
  overflow: hidden !important;
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.32) !important;
  transform: rotate(0.65deg);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-book-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-resume-copy {
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-self: end !important;
  gap: clamp(8px, 1.35vw, 12px) !important;
  padding: clamp(28px, 3.9vw, 38px) 0 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy h3 {
  max-width: 16ch !important;
  color: var(--home-ink) !important;
  font: 650 clamp(1.75rem, 4.5vw, 2.65rem)/0.98 var(--ui-font) !important;
  letter-spacing: -0.042em !important;
  text-wrap: balance;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy > p {
  color: var(--home-muted) !important;
  font: 560 clamp(0.78rem, 1.85vw, 0.94rem)/1.2 var(--ui-font) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-progress {
  max-width: 31rem;
  gap: 9px !important;
  margin-top: 5px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-meta {
  color: var(--home-muted) !important;
  font: 540 clamp(0.66rem, 1.5vw, 0.78rem)/1.18 var(--ui-font) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-meta > :first-child {
  color: var(--home-muted) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-resume-actions {
  grid-column: 1 !important;
  grid-row: 2 !important;
  grid-template-columns: repeat(2, max-content) !important;
  justify-content: start !important;
  align-items: center !important;
  gap: clamp(18px, 3vw, 28px) !important;
  padding: 3px 0 0 !important;
  border: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation)
  :is(.home-primary-action, .home-secondary-action) {
  grid-column: auto !important;
  grid-row: auto !important;
  width: max-content !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  justify-self: start !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font: 650 clamp(0.82rem, 1.9vw, 0.96rem)/1 var(--ui-font) !important;
  transform: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-primary-action {
  color: var(--home-coral) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-primary-action::after {
  margin-left: 2px;
  color: currentColor;
  content: "→";
  font-size: 1.22em;
  font-weight: 430;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-secondary-action,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-secondary-action > span {
  color: var(--home-muted) !important;
  -webkit-text-fill-color: var(--home-muted) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-resume-card:not(.has-book) .home-resume-actions {
  grid-template-columns: max-content !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-resume-card:not(.has-book) .home-secondary-action {
  display: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-action-symbol {
  display: none !important;
}

/* First-run Home: a verified dialogue sample in the lead card, using the
 * reader's speaker palette (app.js renderHomeResumeDialogue), and a visible
 * import card while the library is empty. */
#inputPanel .home-resume-dialogue-line {
  --speaker-ink: var(--speaker-ink-dark);
}

html:not(.theme-dark) body:not(.theme-dark) #inputPanel .home-resume-dialogue-line {
  --speaker-ink: var(--speaker-ink-light);
}

:is(html, body).theme-twilight #inputPanel .home-resume-dialogue-line {
  --speaker-ink: var(--speaker-ink-twilight);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-dialogue {
  display: grid;
  gap: 5px;
  margin-top: 2px;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-dialogue[hidden] {
  display: none;
}

#inputPanel .home-resume-dialogue-line {
  display: -webkit-box;
  overflow: hidden;
  color: var(--speaker-ink);
  font: 480 clamp(0.76rem, 1.8vw, 0.9rem)/1.32 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#inputPanel .home-resume-dialogue-line > b {
  display: block;
  margin-bottom: 1px;
  font: 720 0.56rem/1.2 var(--ui-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

#inputPanel .home-resume-dialogue-line > q {
  quotes: "\201C" "\201D";
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-card.has-dialogue .home-resume-copy {
  padding-top: clamp(30px, 4vw, 40px) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-section:has(> .home-first-import:not([hidden])) {
  gap: 12px !important;
}

#inputPanel .home-first-import {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--home-hairline);
  border-radius: 16px;
  background: transparent;
  color: var(--home-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  touch-action: pan-y;
}

#inputPanel .home-first-import[hidden] { display: none; }

#inputPanel .home-first-import-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--home-panel);
  color: var(--home-coral);
}

#inputPanel .home-first-import-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#inputPanel .home-first-import-copy { display: grid; min-width: 0; gap: 3px; }
#inputPanel .home-first-import-copy > strong { font: 650 0.98rem/1.2 var(--ui-font); }
#inputPanel .home-first-import-copy > small { color: var(--home-muted); font: 500 0.8rem/1.25 var(--ui-font); }

#inputPanel .home-first-import-action {
  color: var(--home-coral);
  font: 650 0.9rem/1 var(--ui-font);
}

#inputPanel .home-first-import:focus-visible { outline: 2px solid var(--home-coral); outline-offset: 3px; }

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section {
  padding: 0 !important;
  border: 0 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-rail {
  gap: clamp(13px, 2.3vw, 20px) !important;
  padding-top: 2px !important;
  padding-bottom: 4px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book {
  flex: 0 0 clamp(112px, 15.5vw, 132px) !important;
  gap: 9px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book.is-wide-cover {
  flex: 0 0 clamp(164px, 25vw, 204px) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-cover-frame,
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-progress-cover, .home-progress-cover.has-image, .home-progress-cover.has-title-fallback) {
  border-radius: 5px 8px 8px 5px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-editorial-shelf-book .home-progress-cover-frame {
  overflow: visible;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book-copy strong {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.78rem, 1.8vw, 0.9rem) !important;
  font-weight: 650 !important;
  line-height: 1.16 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book-copy small {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.64rem, 1.45vw, 0.73rem) !important;
  font-weight: 520 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-tonight-book-cover, .home-tonight-book-cover.has-image, .home-tonight-book-cover.has-title-fallback) {
  width: 100% !important;
  height: 100% !important;
  border-radius: 5px 8px 8px 5px !important;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--home-panel);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.26) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-tonight-book-cover.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 620px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .menu-main.home-dashboard {
    gap: 27px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-subtitle {
    margin-top: 6px !important;
    font-size: 0.84rem !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-section-title {
    font-size: clamp(2rem, 9.1vw, 2.45rem) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(#homeProgressLabel, #homeDiscoverLabel).home-section-title {
    font-size: clamp(2rem, 9.1vw, 2.45rem) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card.is-recommendation) {
    --home-resume-pad: 17px !important;
    --home-resume-cover-w: clamp(105px, 28vw, 122px) !important;
    --home-resume-gap: clamp(15px, 4vw, 19px) !important;
    min-height: 234px !important;
    border-radius: 19px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-resume-copy {
    gap: 8px !important;
    padding-top: 28px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-resume-copy h3 {
    max-width: 11ch !important;
    font-size: clamp(1.45rem, 6.5vw, 1.8rem) !important;
    line-height: 0.98 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-meta > :last-child {
    display: none !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
    :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-resume-actions {
    gap: 17px !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book {
    flex: 0 0 clamp(132px, calc((100% - 18px) / 2.45), 150px) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book.is-wide-cover {
    flex: 0 0 clamp(176px, 48vw, 202px) !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book-copy strong {
    min-height: 2.36em !important;
    font-size: clamp(0.82rem, 3.5vw, 0.92rem) !important;
    line-height: 1.18 !important;
  }

  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-book-copy small {
    font-size: clamp(0.7rem, 2.9vw, 0.78rem) !important;
  }

  }

/* Match Discover's lively jacket treatment across every Home book surface. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(
  .home-book-cover,
  .home-progress-cover,
  .home-tonight-book-cover
).has-image > img {
  filter: saturate(1.18) contrast(1.04) brightness(1.06);
}

/* Vertical Home controls remain part of the page's native pan surface. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(
  .home-header-add-control,
  .home-resume-card,
  .home-progress-section .home-section-head,
  .home-discover-section
) :is(button, button *) {
  touch-action: pan-y !important;
}

/* Home recommendations: three independent reads and one finite collection. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-picks-section {
  display: grid !important;
  flex: 0 0 auto !important;
  gap: 16px !important;
  padding: 0 0 16px !important;
  border: 0 !important;
  /* The dashboard grid has a minimum viewport height; a zero minimum lets this
     row collapse and hides the collection card behind the bottom navigation. */
  min-height: auto !important;
}
#inputPanel .home-reading-picks { display: grid; min-width: 0; }
#inputPanel .home-reading-pick,
#inputPanel .home-bundle-card {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 16px;
  gap: 18px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--home-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--home-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  touch-action: pan-y;
}
#inputPanel .home-reading-pick:last-child { border-bottom: 1px solid var(--home-hairline); }
#inputPanel .home-reading-art {
  position: relative;
  display: grid;
  place-items: center;
  align-self: start;
  width: 88px;
  height: 96px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--home-panel);
}
#inputPanel .home-reading-art > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#inputPanel .home-reading-art > img[hidden] { display: none; }
#inputPanel .home-reading-art-fallback { font: 400 2.4rem/1 var(--heading-font); color: var(--home-coral); }
#inputPanel .home-reading-copy { display: grid; min-width: 0; gap: 6px; }
#inputPanel .home-reading-copy > small {
  color: var(--home-muted);
  font: 550 0.69rem/1.45 var(--ui-font);
}
#inputPanel .home-reading-copy > strong {
  color: var(--home-ink);
  font: 560 clamp(1.08rem, 2.5vw, 1.35rem)/1.16 var(--ui-font);
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
#inputPanel .home-reading-hook {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--home-muted);
  font: 440 0.82rem/1.42 var(--ui-font);
}
#inputPanel .home-reading-reason { color: var(--home-coral); font: 550 0.69rem/1.4 var(--ui-font); }
#inputPanel .home-reading-arrow { color: var(--home-coral); font-size: 1.1rem; }
#inputPanel .home-new-picks {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: -8px;
  padding: 0 2px;
  border: 0;
  background: transparent;
  color: var(--home-coral);
  font: 600 0.76rem/1.3 var(--ui-font);
  cursor: pointer;
}
#inputPanel .home-new-picks[hidden] { display: none; }
/* The day's collection is the last row of the picks list. */
#inputPanel .home-reading-bundle { min-width: 0; margin-top: -16px; } /* flush despite the section gap */
#inputPanel .home-reading-bundle:empty { display: none; }
#inputPanel .home-bundle-card { border-top: 0; border-bottom: 1px solid var(--home-hairline); }
#inputPanel .home-reading-empty { color: var(--home-muted); font: 450 0.9rem/1.5 var(--ui-font); }
#inputPanel .home-picks-section button:focus-visible { outline: 2px solid var(--home-coral); outline-offset: 4px; }
#inputPanel .home-picks-section button:is(:active, .is-tactile-press) {
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: none !important;
}
@media (hover: hover) {
  #inputPanel .home-reading-pick:hover strong,
  #inputPanel .home-bundle-card:hover strong { color: var(--home-coral); }
}
@media (max-width: 420px) {
  #inputPanel .home-reading-pick,
  #inputPanel .home-bundle-card { grid-template-columns: 74px minmax(0, 1fr) 12px; gap: 13px; }
  #inputPanel .home-reading-art { width: 74px; height: 88px; }
}
#inputPanel .home-reading-art.is-cover > img { object-fit: contain; }

/* Burnt orange actions on the apricot canvas; labels use deeper accent ink. */
html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-primary-action {
  border-color: var(--light-accent) !important;
  background: var(--light-accent) !important;
  color: var(--light-on-accent) !important;
}

/* Cream paper and a restrained warm shadow give the current book a softer setting. */
html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card, .home-resume-card.has-book, .home-resume-card.is-recommendation) {
  background:
    radial-gradient(ellipse at 88% 65%, color-mix(in srgb, var(--home-canvas) 60%, transparent), transparent 64%),
    var(--home-panel) !important;
  box-shadow: 0 10px 28px rgba(104, 67, 42, 0.065) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-resume-card.has-artwork-wash::before {
  filter: blur(24px) saturate(0.8) brightness(1);
  opacity: 0.14;
}

html:not(.theme-dark) body:not(.theme-dark) #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation)
  :is(.home-book-cover, .home-book-cover.has-image, .home-book-cover.has-title-fallback) {
  box-shadow: 0 12px 24px rgba(106, 64, 36, 0.17) !important;
}

/* Home's book and shelf headings share the destination serif in both themes. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) #homeResumeTitle {
  max-width: 18ch !important;
  font: 400 clamp(1.65rem, 4.5vw, 2.5rem)/1.09 var(--heading-font) !important;
  letter-spacing: -0.018em !important;
  overflow-wrap: anywhere;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(#homeProgressLabel, #homeDiscoverLabel).home-section-title {
  font: 400 clamp(1.9rem, 7.5vw, 2.85rem)/1.08 var(--heading-font) !important;
  letter-spacing: -0.022em !important;
}

/* Dark uses the same filled resume action as Light, in its coral accent. */
html.theme-dark:not(.theme-twilight) body.theme-dark:not(.theme-twilight) #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-primary-action {
  border-color: var(--home-coral) !important;
  background: var(--home-coral) !important;
  color: var(--home-canvas) !important;
}

/* Padded actions can wrap within the copy column on narrower phones. */
html:not(.theme-twilight) body:not(.theme-twilight) #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  :is(.home-resume-card.has-book, .home-resume-card.is-recommendation) .home-resume-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 12px !important;
  padding-top: 8px !important;
}

html:not(.theme-twilight) body:not(.theme-twilight) #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  #homeResumePrimaryButton {
  min-height: 44px !important;
  height: auto !important;
  max-width: 100%;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  gap: 10px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

html:not(.theme-twilight) body:not(.theme-twilight) #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  #homeResumeSecondaryButton {
  min-height: 44px !important;
  height: auto !important;
}

@media (max-width: 620px) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) #homeResumeTitle {
    font-size: clamp(1.45rem, 6vw, 1.75rem) !important;
  }
}

/* Keep shelf titles, bylines and resume text clear of their clipping edges. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(
  .home-progress-book-copy > strong,
  .home-progress-book-copy > small,
  .home-resume-copy > p,
  .home-progress-meta > span,
  .home-file-status,
  .home-reading-copy > strong
) {
  line-height: 1.35 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(#homeResumeTitle, #homeProgressLabel, #homeDiscoverLabel) {
  line-height: 1.2 !important;
  padding-bottom: 0.14em !important;
}

/* Twilight keeps Home on the same dusk palette as the reader. */
html.theme-twilight body.theme-twilight #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) {
  --home-canvas: var(--twilight-chrome);
  --home-panel: var(--twilight-panel);
  --home-shelf-panel: color-mix(in srgb, var(--twilight-panel) 55%, var(--twilight-chrome));
  --home-ink: var(--twilight-ink);
  --home-muted: var(--twilight-muted);
  --home-soft: var(--twilight-muted);
  --home-coral: var(--twilight-accent);
  --home-amber: var(--twilight-lavender);
  --home-hairline: var(--twilight-line);
  --home-panel-line: var(--twilight-line);
  --home-secondary-button: var(--twilight-raised);
  --home-secondary-button-line: var(--twilight-line);
}
html.theme-twilight body.theme-twilight #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) :is(.home-resume-card, .home-reading-empty) {
  background: var(--twilight-panel) !important;
  border-color: var(--twilight-line) !important;
}

/* Twilight reading desk: one cover-led focal point, two considered picks,
 * and compact tools. These rules follow theme classes on a retained Home. */
html.theme-twilight body.theme-twilight #inputPanel #homeWordmark .is-accent {
  color: var(--twilight-accent) !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard {
  --home-hairline: color-mix(in srgb, var(--twilight-muted) 19%, transparent);
  gap: clamp(30px, 4.5vw, 44px) !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-hero::after {
  content: "";
  display: block;
  width: 92px;
  height: 1px;
  margin-top: 19px;
  background: var(--twilight-last-light);
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, #000 60%, transparent);
  pointer-events: none;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-card {
  --home-resume-pad: clamp(22px, 3.5vw, 32px) !important;
  --home-resume-cover-w: clamp(140px, 22vw, 180px) !important;
  --home-resume-gap: clamp(20px, 3.6vw, 36px) !important;
  min-height: 290px !important;
  border: 1px solid var(--twilight-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(120deg, #2d203d, var(--twilight-panel) 58%, #211929) !important;
  box-shadow: 0 16px 36px rgba(12, 9, 19, 0.24) !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-card.has-artwork-wash::before {
  filter: blur(24px) saturate(1.2) brightness(0.72);
  opacity: 0.22;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-card.has-artwork-wash::after {
  background: linear-gradient(90deg, #2d203d 0 38%, rgba(42, 32, 54, 0.78) 68%, rgba(33, 25, 41, 0.55)) !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard #homeResumeTitle {
  max-width: 18ch !important;
  font-size: clamp(1.9rem, 4.6vw, 2.8rem) !important;
  line-height: 1.12 !important;
  color: var(--twilight-ink) !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-copy > p {
  white-space: normal !important;
  line-height: 1.5 !important;
  font-weight: 400 !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-card .home-resume-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px 18px !important;
  padding-top: 10px !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard #homeResumePrimaryButton {
  min-height: 46px !important;
  height: auto !important;
  max-width: 100%;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  background: var(--twilight-accent) !important;
  color: var(--twilight-chrome) !important;
  -webkit-text-fill-color: var(--twilight-chrome) !important;
  font: 600 0.9rem/1.4 var(--ui-font) !important;
  white-space: normal;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard #homeResumeSecondaryButton {
  min-height: 44px !important;
  height: auto !important;
  font-weight: 450 !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-progress .home-progress-track {
  height: 3px !important;
  background: var(--twilight-track) !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard #homeResumeProgressFill {
  background: var(--twilight-last-light) !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard :is(#homeProgressLabel, #homeDiscoverLabel) {
  font: 400 clamp(1.8rem, 5.7vw, 2.35rem)/1.2 var(--heading-font) !important;
  letter-spacing: -0.015em !important;
}

/* Keep the saved daily selection intact across theme changes; Twilight shows
 * its first two recommendations, with New picks retaining its usual action. */
html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-pick:nth-child(n + 3) {
  display: none;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-pick {
  grid-template-columns: 96px minmax(0, 1fr) 16px;
  gap: 20px;
  padding: 24px 0;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-pick:nth-child(2) {
  border-bottom: 1px solid var(--home-hairline);
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-pick .home-reading-art {
  width: 96px;
  height: 112px;
  border-radius: 5px;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-copy > strong {
  font: 400 clamp(1.2rem, 3vw, 1.55rem)/1.2 var(--heading-font);
  letter-spacing: -0.01em;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-hook {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  color: var(--twilight-secondary);
  line-height: 1.55;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-bundle {
  margin-top: 0;
  padding: 20px;
  border-left: 1px solid var(--twilight-lavender);
  border-radius: 0 12px 12px 0;
  background: color-mix(in srgb, var(--twilight-panel) 55%, transparent);
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-bundle-card {
  padding: 0;
  border-bottom: 0;
}

/* Utilities remain native controls, with the existing paste editor above Home
 * when opened. Only the closed editor exposes the compact import/paste pair. */
html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard :is(.home-add-section, .home-utility-section) {
  display: grid !important;
  flex: 0 0 auto;
  gap: 12px;
  padding: 0;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard
  .home-add-section:not(:has(.home-paste-editor:not([hidden]))) .home-add-panel,
html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-panel {
  display: grid !important;
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
  border: 0 !important;
  border-radius: 0;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard :is(.home-add-card, .home-reading-card) {
  position: relative;
  display: flex !important;
  flex: none !important;
  align-items: center;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 48px !important;
  height: auto !important;
  max-height: none !important;
  padding: 12px !important;
  border: 1px solid var(--home-hairline) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--twilight-muted) !important;
  text-align: left !important;
  cursor: pointer;
  touch-action: pan-y;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard :is(.home-add-card, .home-reading-card) strong {
  color: var(--twilight-ink) !important;
  font: 500 0.82rem/1.4 var(--ui-font) !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard :is(.home-add-card, .home-reading-card) :is(small, .menu-chevron),
html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-utility-section > .home-section-label {
  display: none;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard :is(.home-add-card, .home-reading-card) .home-action-icon {
  flex: 0 0 22px;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  color: var(--twilight-muted);
  background: none !important;
  box-shadow: none !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard :is(.home-add-card, .home-reading-card) .home-action-icon svg {
  width: 100%;
  height: 100%;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-card {
  padding: 4px 0 !important;
  border: 0 !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-card strong {
  color: var(--twilight-muted) !important;
  font-weight: 400 !important;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-card > span:has(strong) {
  display: block !important;
  min-width: 0;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard #fileInput {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-file-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard
  :is(.home-add-card, .home-reading-card, #homeResumePrimaryButton, #homeResumeSecondaryButton):focus-within {
  outline: 2px solid var(--twilight-lavender);
  outline-offset: 4px;
}

html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard
  :is(.home-add-card, .home-reading-card):is(:active, .is-tactile-press) {
  transform: none !important;
  scale: none !important;
  translate: none !important;
  filter: none !important;
  box-shadow: none !important;
}

@media (max-width: 620px) {
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-card {
    --home-resume-pad: 20px !important;
    --home-resume-cover-w: clamp(112px, 29vw, 144px) !important;
    --home-resume-gap: 18px !important;
    min-height: 0 !important;
  }
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-card .home-resume-cover {
    grid-row: 1 !important;
  }
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-card .home-resume-actions {
    grid-column: 1 / -1 !important;
    padding-top: 14px !important;
  }
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard #homeResumeTitle {
    font-size: clamp(1.5rem, 6vw, 2rem) !important;
  }
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-pick {
    grid-template-columns: 76px minmax(0, 1fr) 12px;
    gap: 14px;
  }
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-pick .home-reading-art {
    width: 76px;
    height: 94px;
  }
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-reading-bundle {
    padding: 16px;
  }
}

@media (max-width: 380px) {
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-resume-card {
    --home-resume-pad: 16px !important;
    --home-resume-cover-w: 94px !important;
    --home-resume-gap: 12px !important;
  }
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-bundle-card {
    grid-template-columns: 60px minmax(0, 1fr) 12px;
    gap: 12px;
  }
  html.theme-twilight body.theme-twilight #inputPanel.is-open #menuMain.home-dashboard .home-bundle-card .home-reading-art {
    width: 60px;
    height: 76px;
  }
}

/* Your reading with one or two books: list rows instead of a cover shelf
 * (app.js setHomeProgressRailCompact). The rail drops `app-shelf-rail`. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-rail.is-compact-list {
  display: grid !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
}
#inputPanel .home-progress-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 16px;
  gap: 16px;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid var(--home-hairline);
  border-radius: 0;
  background: transparent;
  color: var(--home-ink);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  touch-action: pan-y;
}
#inputPanel .home-progress-row:last-child { border-bottom: 1px solid var(--home-hairline); }
#inputPanel .home-progress-row-cover { display: block; width: 56px; height: 84px; }
#inputPanel .home-progress-row-cover > .home-progress-cover {
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  border-radius: 4px 6px 6px 4px;
}
#inputPanel .home-progress-row-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
#inputPanel .home-progress-row:focus-visible { outline: 2px solid var(--home-coral); outline-offset: 4px; }

/* Your reading: quiet cards with one compact artwork height across formats.
 * The shared shelf blueprint still owns the rail's edge bleed and scrolling.
 * Palette mappings above keep the same structure in Light, Dark and Twilight. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-rail {
  align-items: stretch !important;
  padding-block: 4px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book {
  box-sizing: border-box !important;
  flex: 0 0 clamp(160px, 39vw, 184px) !important;
  min-width: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto 1fr !important;
  gap: 12px !important;
  padding: 8px 8px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--home-shelf-panel) !important;
  box-shadow: none !important;
  transform: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book .home-progress-cover-frame {
  box-sizing: border-box;
  min-width: 0;
  aspect-ratio: 0.84 !important;
  overflow: hidden !important;
  border-radius: 3px !important;
  background: transparent;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book .home-progress-cover-frame > .home-progress-cover {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book .home-progress-cover.has-image {
  padding: 0 !important;
  background: transparent !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book .home-progress-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}

/* Article and research thumbnails fill their shelf slot instead of leaving
 * empty space above a landscape image. Book jackets and generated paper covers
 * keep their full artwork; the separate loading view also remains uncropped. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book.is-wide-cover .home-progress-cover.has-image img {
  object-fit: cover !important;
  object-position: center !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book-copy {
  align-content: start !important;
  gap: 6px !important;
  padding: 0 4px !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book-copy > strong {
  min-height: 2.7em !important;
  line-height: 1.35 !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-cover-frame > .home-progress-track {
  height: 2px !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--home-ink) 12%, var(--home-shelf-panel)) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book:focus-visible {
  outline: 2px solid var(--home-coral) !important;
  outline-offset: 2px !important;
}

@media (hover: hover) and (pointer: fine) {
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-section .home-progress-book:hover {
    background: color-mix(in srgb, var(--home-shelf-panel) 96%, var(--home-ink)) !important;
  }
}

/* One outlined lockup: the book is the R, followed by hythm and a red period.
 * Both SVGs retain the reference coordinates so the splash lands exactly. */
#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-brand {
  display: block;
  width: clamp(212px, 57vw, 300px);
  max-width: calc(100% - 72px);
  color: var(--home-ink);
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-brand-mark {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 25.5102040816%;
  height: 78%;
  aspect-ratio: 250 / 195;
  overflow: visible;
  fill: currentColor;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) #homeWordmark.rhythm-logo {
  position: relative;
  display: block !important;
  width: 100%;
  height: auto;
  aspect-ratio: 980 / 250;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  color: var(--home-ink) !important;
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-brand-word {
  position: absolute;
  top: 0;
  left: 24.4897959184%;
  display: block;
  width: 75.5102040816%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
}


/*
 * Library screen ownership
 * ========================
 *
 * This stylesheet owns the current Library destination: its catalogue
 * typography, filters, add menu, content cards, empty states, and responsive
 * component layout. It loads after Home but before shared shelf geometry and
 * the structural app shell. Keep Discover, reader, bottom-navigation, splash,
 * and viewport rules out of this file.
 */

/*
 * Library editorial catalogue
 * ---------------------------
 * Keep the existing Library information architecture and interactions, while
 * bringing its visual language in line with the panel-free Home screen.
 */
#collectionView.collection-view {
  --library-page: #f4f0e8;
  --library-page-deep: #ebe5db;
  --library-ink: #292620;
  --library-muted: #777066;
  --library-soft: #9a9185;
  --library-line: rgba(73, 65, 55, 0.16);
  --library-line-strong: rgba(73, 65, 55, 0.24);
  --library-accent: #c94f45;
  --library-accent-strong: #a93e37;
  --library-gold: #bb7c34;
  --library-menu: rgba(248, 244, 236, 0.97);
  --library-menu-shadow: 0 24px 58px rgba(61, 49, 34, 0.16);
  --library-gutter: clamp(18px, 4.5vw, 40px);
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(10px, 1.7vh, 18px) 0 clamp(112px, 15vh, 148px) !important;
  gap: clamp(13px, 1.9vh, 19px) !important;
  overflow: visible !important;
  background: transparent !important;
  color: var(--library-ink) !important;
}

html.theme-dark #collectionView.collection-view,
body.theme-dark #collectionView.collection-view {
  --library-page: #101216;
  --library-page-deep: #0b0d10;
  --library-ink: rgba(244, 239, 231, 0.95);
  --library-muted: rgba(201, 195, 185, 0.72);
  --library-soft: rgba(176, 170, 162, 0.52);
  --library-line: rgba(232, 226, 216, 0.115);
  --library-line-strong: rgba(232, 226, 216, 0.18);
  --library-accent: #df695d;
  --library-accent-strong: #ee8274;
  --library-gold: #e6ad67;
  --library-menu: rgba(27, 29, 34, 0.98);
  --library-menu-shadow: 0 25px 62px rgba(0, 0, 0, 0.4);
  color: var(--library-ink) !important;
}

body:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview {
  background:
    radial-gradient(ellipse 78% 40% at 110% -2%, rgba(218, 151, 75, 0.2), rgba(218, 151, 75, 0.065) 39%, transparent 72%),
    linear-gradient(150deg, #f4f0e8 0%, #f3efe7 48%, #ebe5db 100%) !important;
}

html.theme-dark body:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview,
body.theme-dark:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview {
  background:
    radial-gradient(ellipse 82% 42% at 110% -3%, rgba(208, 137, 61, 0.2), rgba(149, 86, 35, 0.07) 39%, transparent 72%),
    radial-gradient(circle at 80% 12%, rgba(238, 179, 105, 0.035), transparent 17rem),
    linear-gradient(155deg, #121419 0%, #101216 48%, #0b0d10 100%) !important;
}

#inputPanel.home-ambient-active:has(#collectionView:not([hidden])) .home-ambient-canvas {
  opacity: 0.24 !important;
}

html.theme-dark #inputPanel.home-ambient-active:has(#collectionView:not([hidden])) .home-ambient-canvas,
body.theme-dark #inputPanel.home-ambient-active:has(#collectionView:not([hidden])) .home-ambient-canvas {
  opacity: 0.66 !important;
}

#collectionView.collection-view::before {
  content: "✦";
  position: absolute;
  z-index: 2;
  top: clamp(9px, 1.8vh, 18px);
  right: var(--library-gutter);
  color: var(--library-gold);
  font: 400 clamp(1.02rem, 2.8vw, 1.34rem)/1 var(--ui-font);
  text-shadow:
    0 0 10px color-mix(in srgb, var(--library-gold) 54%, transparent),
    0 0 26px color-mix(in srgb, var(--library-gold) 22%, transparent);
  pointer-events: none;
}

#collectionView > .collection-header,
#collectionView > .library-search,
#collectionView > .library-category-row,
#collectionView > .library-section {
  width: min(1160px, calc(100vw - (var(--library-gutter) * 2))) !important;
  max-width: 1160px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#inputPanel.is-menu-subview:has(#collectionView:not([hidden])) > .menu-card {
  padding-top: max(8px, env(safe-area-inset-top)) !important;
}

#collectionView > .collection-header.library-header {
  position: relative;
  min-height: clamp(86px, 12vh, 112px) !important;
  margin-bottom: 0 !important;
  padding: clamp(13px, 2.2vh, 24px) 0 3px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 16px !important;
}

#collectionView > .collection-header h2 {
  margin: 0 !important;
  color: var(--library-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(2.7rem, 8vw, 4.35rem) !important;
  font-weight: 480 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.035em !important;
}

#collectionView > .collection-header h2 .brand-red-letter {
  color: inherit !important;
}

#collectionView > .collection-header p {
  margin: 9px 0 0 !important;
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.86rem, 2.3vw, 1rem) !important;
  line-height: 1.25 !important;
}

#collectionView .library-add-button {
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 2px 2px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 7px !important;
  align-self: end;
  background: transparent !important;
  color: var(--library-accent) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.9rem, 2.4vw, 1.02rem) !important;
  font-weight: 520 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

#collectionView .library-add-button > span {
  width: 12px !important;
  height: 12px !important;
}

#collectionView .library-add-button > span::before {
  width: 12px !important;
  height: 1.4px !important;
}

#collectionView .library-add-button > span::after {
  width: 1.4px !important;
  height: 12px !important;
}

#collectionView .library-add-button:is(:hover, :focus-visible) {
  color: var(--library-accent-strong) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#collectionView .library-add-button:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--library-accent) 48%, transparent) !important;
  outline-offset: 5px !important;
}

#collectionView .library-add-menu {
  top: calc(100% - 3px) !important;
  right: 0 !important;
  width: min(310px, calc(100vw - (var(--library-gutter) * 2))) !important;
  padding: 8px !important;
  border: 1px solid var(--library-line-strong) !important;
  border-radius: 17px !important;
  background: var(--library-menu) !important;
  box-shadow: var(--library-menu-shadow) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.04) !important;
  backdrop-filter: blur(22px) saturate(1.04) !important;
}

#collectionView .library-add-menu button {
  background: transparent !important;
  color: var(--library-ink) !important;
}

#collectionView .library-add-menu button:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--library-accent) 8%, transparent) !important;
}

#collectionView .library-add-menu small {
  color: var(--library-muted) !important;
}

#collectionView > .library-search {
  min-height: 50px !important;
  padding: 0 4px 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--library-line) !important;
  border-radius: 0 !important;
  grid-template-columns: 23px minmax(0, 1fr) auto !important;
  gap: 11px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#collectionView > .library-search:focus-within {
  border-bottom-color: color-mix(in srgb, var(--library-accent) 68%, transparent) !important;
  box-shadow: none !important;
}

#collectionView > .library-search > span {
  position: relative !important;
  width: 17px !important;
  height: 17px !important;
  margin-left: 2px !important;
  border: 1.45px solid var(--library-muted) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView > .library-search > span::before {
  content: none !important;
  display: none !important;
}

#collectionView > .library-search > span::after {
  right: -5px !important;
  bottom: -2px !important;
  width: 7px !important;
  height: 1.45px !important;
  background: var(--library-muted) !important;
}

#collectionView > .library-search input {
  height: 42px !important;
  color: var(--library-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.94rem, 2.6vw, 1.05rem) !important;
}

#collectionView > .library-search input::placeholder {
  color: var(--library-muted) !important;
  opacity: 0.86 !important;
}

#collectionView .library-search-clear {
  width: 32px !important;
  height: 32px !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--library-muted) !important;
}

#collectionView > .library-category-row {
  min-height: 46px !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: clamp(5px, 2vw, 16px) !important;
  overflow: visible !important;
}

#collectionView .library-category-chip {
  position: relative;
  min-width: 0 !important;
  min-height: 44px !important;
  padding: 0 3px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  background: transparent !important;
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.82rem, 2.4vw, 0.98rem) !important;
  font-weight: 480 !important;
  box-shadow: none !important;
  transform: none !important;
}

#collectionView .library-category-chip::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 0;
  left: 3px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

#collectionView .library-category-chip .library-category-icon {
  display: none !important;
}

#collectionView .library-category-count {
  min-width: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: inline !important;
  background: transparent !important;
  color: var(--library-soft) !important;
  font: 500 0.72em/1 var(--ui-font) !important;
}

#collectionView .library-category-chip.is-selected {
  border: 0 !important;
  background: transparent !important;
  color: var(--library-accent) !important;
  box-shadow: none !important;
}

#collectionView .library-category-chip.is-selected::after {
  background: var(--library-accent);
}

#collectionView .library-category-chip.is-selected .library-category-count {
  background: transparent !important;
  color: color-mix(in srgb, var(--library-accent) 64%, var(--library-muted)) !important;
}

#collectionView .library-category-chip:is(:hover, :focus-visible) {
  color: var(--library-accent-strong) !important;
  outline: 0 !important;
}

#collectionView > .library-section {
  gap: 12px !important;
}

#collectionView > .library-section > .library-section-heading {
  min-height: 41px !important;
  padding: 0 !important;
  align-items: baseline !important;
}

#collectionView .library-section-heading h3 {
  color: var(--library-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(1.52rem, 4vw, 2.1rem) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}

#collectionView .library-heading-actions {
  gap: 0 !important;
}

#collectionView .library-heading-actions #collectionCountLabel {
  display: none !important;
}

#collectionView .library-sort-control {
  min-height: 36px !important;
  padding: 0 18px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 7px !important;
  background: transparent !important;
  color: var(--library-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.72rem, 2vw, 0.83rem) !important;
  box-shadow: none !important;
}

#collectionView .library-sort-control::after {
  right: 2px !important;
  width: 7px !important;
  height: 7px !important;
  border-width: 1.25px !important;
  color: var(--library-accent) !important;
}

#collectionView .library-sort-control > span {
  color: var(--library-soft) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.94em !important;
  font-weight: 450 !important;
}

#collectionView .library-sort-control select {
  max-width: 136px !important;
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
  font-weight: 500 !important;
}

#collectionView .collection-list {
  display: grid !important;
  gap: clamp(22px, 3.2vh, 34px) !important;
  overflow: visible !important;
}

#collectionView .library-content-section {
  display: grid !important;
  gap: 12px !important;
}

#collectionView .library-content-section + .library-content-section {
  position: relative;
  margin-top: 0 !important;
  padding-top: clamp(20px, 3vh, 28px) !important;
  border-top: 1px solid var(--library-line) !important;
}

#collectionView .library-content-heading {
  min-height: 34px !important;
  padding: 0 1px !important;
  display: flex !important;
  align-items: center !important;
}

#collectionView .library-content-title {
  gap: 9px !important;
  color: var(--library-ink) !important;
}

#collectionView .library-content-title h4 {
  color: var(--library-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(1.25rem, 3.6vw, 1.72rem) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

#collectionView .library-section-icon {
  width: 20px !important;
  height: 20px !important;
  color: color-mix(in srgb, var(--library-gold) 82%, var(--library-muted)) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.45 !important;
}

#collectionView .library-see-all {
  min-height: 34px !important;
  padding: 0 !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.75rem, 2.1vw, 0.86rem) !important;
  font-weight: 500 !important;
}

#collectionView .library-see-all:is(:hover, :focus-visible) {
  color: var(--library-accent) !important;
  outline: 0 !important;
}

#collectionView .library-see-all > span:last-child {
  width: 7px !important;
  height: 7px !important;
  border-width: 1.25px !important;
}

#collectionView .library-book-strip {
  --library-shelf-card-width: clamp(92px, 11.5vw, 142px);
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--library-shelf-card-width) !important;
  justify-content: start !important;
  gap: clamp(12px, 2.4vw, 22px) !important;
  margin: 0 !important;
  padding: 1px 0 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-padding-inline: 0 !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
}

#collectionView .library-book-strip::-webkit-scrollbar,
#collectionView .library-stack-list::-webkit-scrollbar {
  display: none !important;
}

#collectionView .library-book-strip .library-book-card.collection-item {
  width: var(--library-shelf-card-width) !important;
  min-width: var(--library-shelf-card-width) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  scroll-snap-align: start;
}

#collectionView .library-book-strip .library-book-open {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
  gap: 8px !important;
  overflow: visible !important;
  background: transparent !important;
  text-align: left !important;
}

#collectionView .library-book-strip .library-grid-cover,
#collectionView .library-book-strip .library-grid-cover.has-image,
#collectionView .library-book-strip .library-grid-cover.has-title-fallback {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 0.68 !important;
  border: 1px solid color-mix(in srgb, var(--library-line-strong) 74%, transparent) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--library-gold) 12%, transparent), transparent 48%),
    color-mix(in srgb, var(--library-page-deep) 82%, var(--library-ink)) !important;
  box-shadow:
    0 12px 24px rgba(24, 21, 17, 0.13),
    0 0 0 1px color-mix(in srgb, var(--library-gold) 5%, transparent) !important;
}

#collectionView .library-book-strip .library-grid-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

#collectionView .library-book-strip .library-book-card-copy {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 1px !important;
  display: grid !important;
  gap: 2px !important;
  overflow: visible !important;
}

#collectionView .library-book-strip .library-book-card-copy > strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--library-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.68rem, 1.8vw, 0.82rem) !important;
  font-weight: 530 !important;
  line-height: 1.08 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#collectionView .library-book-strip .library-book-card-copy > small {
  display: block !important;
  overflow: hidden !important;
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.58rem, 1.55vw, 0.68rem) !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#collectionView .library-book-strip .library-book-card-status {
  display: none !important;
}

#collectionView .library-book-strip .library-book-card .collection-progress {
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  margin: 5px 0 0 !important;
  overflow: hidden !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--library-muted) 18%, transparent) !important;
}

#collectionView .library-book-strip .library-book-card .collection-progress > span {
  height: 100% !important;
  display: block !important;
  background: var(--library-accent) !important;
}

#collectionView .library-book-strip .library-book-card > .collection-menu-toggle {
  display: none !important;
}

#collectionView .library-stack-list {
  --library-document-width: clamp(108px, 13.5vw, 164px);
  display: grid !important;
  grid-auto-flow: column !important;
  grid-auto-columns: var(--library-document-width) !important;
  justify-content: start !important;
  gap: clamp(12px, 2.4vw, 22px) !important;
  margin: 0 !important;
  padding: 1px 0 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  scroll-snap-type: x proximity !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#collectionView .library-stack-row.collection-item {
  position: relative !important;
  width: var(--library-document-width) !important;
  min-width: var(--library-document-width) !important;
  min-height: 0 !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  scroll-snap-align: start;
}

#collectionView .library-stack-row.collection-item + .library-stack-row.collection-item {
  border: 0 !important;
}

#collectionView .library-stack-row .collection-open,
#collectionView .library-stack-row.is-books .collection-open {
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
}

#collectionView .library-stack-row .collection-cover {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 0.72 !important;
  border: 1px solid var(--library-line) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--library-page) 88%, white), color-mix(in srgb, var(--library-page-deep) 88%, #7b6d5d)) !important;
  color: var(--library-accent) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(1.3rem, 4vw, 2.15rem) !important;
  box-shadow: 0 11px 22px rgba(28, 25, 21, 0.1) !important;
}

html.theme-dark #collectionView .library-stack-row .collection-cover,
body.theme-dark #collectionView .library-stack-row .collection-cover {
  background:
    radial-gradient(circle at 28% 16%, rgba(248, 239, 224, 0.055), transparent 45%),
    linear-gradient(150deg, #34363d, #1d1f24) !important;
  color: rgba(231, 164, 93, 0.88) !important;
}

#collectionView .library-stack-row .collection-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(0.78) contrast(0.94) brightness(0.92);
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView .library-stack-row .collection-cover.has-image img {
  filter: saturate(0.78) contrast(0.93) brightness(0.94);
}

#collectionView .library-stack-row .collection-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 2px !important;
}

#collectionView .library-stack-row .collection-copy > strong {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: var(--library-ink) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.68rem, 1.8vw, 0.82rem) !important;
  font-weight: 530 !important;
  line-height: 1.08 !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#collectionView .library-stack-row .collection-copy > small {
  overflow: hidden !important;
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.58rem, 1.55vw, 0.68rem) !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#collectionView .library-stack-row .collection-progress {
  width: 100% !important;
  height: 3px !important;
  margin-top: 5px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--library-muted) 18%, transparent) !important;
}

#collectionView .library-stack-row .collection-progress > span {
  background: var(--library-accent) !important;
}

#collectionView .library-stack-row .collection-meta {
  display: none !important;
}

#collectionView .library-stack-row .collection-menu-wrap {
  position: absolute !important;
  z-index: 2;
  top: 6px !important;
  right: 5px !important;
  display: block !important;
}

#collectionView .library-stack-row .collection-menu-toggle {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--library-ink) 72%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#collectionView .library-stack-row .collection-menu-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) {
  color: var(--library-accent) !important;
  background: transparent !important;
  outline: 0 !important;
}

#collectionView .library-content-section.is-isolated .library-content-heading {
  display: none !important;
}

#collectionView .library-zero-state {
  min-height: clamp(240px, 40vh, 360px) !important;
  padding: 34px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--library-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#collectionView .library-zero-mark {
  border-radius: 50% !important;
  background: color-mix(in srgb, var(--library-accent) 8%, transparent) !important;
  color: var(--library-accent) !important;
}

#collectionView .library-zero-state > p {
  color: var(--library-muted) !important;
}

#collectionView .library-zero-state > button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--library-accent) !important;
}

#collectionView .library-section-empty {
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
}

@media (max-width: 700px) {
  #collectionView.collection-view {
    --library-gutter: clamp(17px, 4.6vw, 20px);
    padding-top: 4px !important;
    gap: 12px !important;
  }

  #collectionView > .collection-header.library-header {
    min-height: 88px !important;
    padding-top: 12px !important;
  }

  #collectionView > .collection-header h2 {
    font-size: clamp(2.65rem, 12vw, 3.35rem) !important;
  }

  #collectionView > .collection-header p {
    margin-top: 7px !important;
  }

  #collectionView > .library-search {
    min-height: 48px !important;
  }

  #collectionView > .library-category-row {
    gap: 5px !important;
  }

  #collectionView .library-category-chip {
    min-width: 0 !important;
    min-height: 42px !important;
    padding-inline: 2px !important;
    font-size: clamp(0.78rem, 3.4vw, 0.9rem) !important;
  }

  #collectionView > .library-section > .library-section-heading {
    min-height: 38px !important;
  }

  #collectionView .library-section-heading h3 {
    font-size: clamp(1.48rem, 7vw, 1.8rem) !important;
  }

  #collectionView .library-sort-control {
    max-width: 178px !important;
    font-size: 0.68rem !important;
  }

  #collectionView .library-sort-control select {
    max-width: 112px !important;
  }

  #collectionView .collection-list {
    gap: 23px !important;
  }

  #collectionView .library-content-title h4 {
    font-size: clamp(1.24rem, 6vw, 1.5rem) !important;
  }

  #collectionView .library-book-strip {
    --library-shelf-card-width: 92px;
    gap: 12px !important;
  }

  #collectionView .library-stack-list {
    --library-document-width: 108px;
    gap: 12px !important;
  }
}

@media (max-width: 360px) {
  #collectionView.collection-view {
    --library-gutter: 15px;
  }

  #collectionView::before {
    right: 15px;
  }

  #collectionView .library-category-chip {
    font-size: 0.76rem !important;
    gap: 4px !important;
  }

  #collectionView .library-sort-control > span {
    display: none !important;
  }

  #collectionView .library-sort-control {
    max-width: 128px !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #collectionView:not([hidden]) > .collection-header,
  #collectionView:not([hidden]) > .library-search,
  #collectionView:not([hidden]) > .library-category-row,
  #collectionView:not([hidden]) > .library-section {
    animation: library-editorial-arrive 420ms cubic-bezier(0.22, 0.72, 0.2, 1) both;
  }

  #collectionView:not([hidden]) > .library-search {
    animation-delay: 35ms;
  }

  #collectionView:not([hidden]) > .library-category-row {
    animation-delay: 70ms;
  }

  #collectionView:not([hidden]) > .library-section {
    animation-delay: 105ms;
  }
}

@keyframes library-editorial-arrive {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Defeat legacy theme-specific Library surfaces without affecting popover material. */
html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view :is(
  .library-category-chip,
  .library-book-card.collection-item,
  .library-stack-list,
  .library-stack-row.collection-item,
  .library-zero-state
),
html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view > .library-search {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view > .library-search {
  border-bottom-color: var(--library-line) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view .library-category-chip.is-selected,
html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view :is(
  .library-sort-control,
  .library-section-sort-control
) {
  border: 0 !important;
  background: transparent !important;
  color: inherit !important;
  box-shadow: none !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view .library-category-chip.is-selected {
  color: var(--library-accent) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view :is(
  .library-section-heading h3,
  .library-content-title,
  .library-book-card-copy > strong,
  .library-stack-row .collection-copy > strong
) {
  color: var(--library-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view :is(
  .library-book-card-copy > small,
  .library-stack-row .collection-copy > small,
  .library-zero-state > p
) {
  color: var(--library-muted) !important;
}

html.theme-dark #collectionView.collection-view :is(
  .library-category-chip,
  .library-book-card.collection-item,
  .library-stack-list,
  .library-stack-row.collection-item,
  .library-zero-state
),
body.theme-dark #collectionView.collection-view :is(
  .library-category-chip,
  .library-book-card.collection-item,
  .library-stack-list,
  .library-stack-row.collection-item,
  .library-zero-state
),
html.theme-dark #collectionView.collection-view > .library-search,
body.theme-dark #collectionView.collection-view > .library-search {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.theme-dark #collectionView.collection-view > .library-search,
body.theme-dark #collectionView.collection-view > .library-search {
  border-bottom-color: var(--library-line) !important;
}

html.theme-dark #collectionView.collection-view .library-category-chip.is-selected,
body.theme-dark #collectionView.collection-view .library-category-chip.is-selected,
html.theme-dark #collectionView.collection-view :is(.library-sort-control, .library-section-sort-control),
body.theme-dark #collectionView.collection-view :is(.library-sort-control, .library-section-sort-control) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark #collectionView.collection-view .library-category-chip.is-selected,
body.theme-dark #collectionView.collection-view .library-category-chip.is-selected {
  color: var(--library-accent) !important;
}

html.theme-dark #collectionView.collection-view :is(
  .library-section-heading h3,
  .library-content-title,
  .library-book-card-copy > strong,
  .library-stack-row .collection-copy > strong,
  .library-zero-state
),
body.theme-dark #collectionView.collection-view :is(
  .library-section-heading h3,
  .library-content-title,
  .library-book-card-copy > strong,
  .library-stack-row .collection-copy > strong,
  .library-zero-state
) {
  color: var(--library-ink) !important;
}

html.theme-dark #collectionView.collection-view :is(
  .library-book-card-copy > small,
  .library-stack-row .collection-copy > small,
  .library-zero-state > p
),
body.theme-dark #collectionView.collection-view :is(
  .library-book-card-copy > small,
  .library-stack-row .collection-copy > small,
  .library-zero-state > p
) {
  color: var(--library-muted) !important;
}

html.theme-dark #collectionView.collection-view :is([data-library-section="articles"], [data-library-section="papers"])
  :is(.library-stack-list, .library-stack-row.collection-item),
body.theme-dark #collectionView.collection-view :is([data-library-section="articles"], [data-library-section="papers"])
  :is(.library-stack-list, .library-stack-row.collection-item) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Library shelf edge and legacy-material corrections. */
#collectionView.collection-view .library-book-strip,
#collectionView.collection-view .library-stack-list {
  box-sizing: border-box !important;
  width: calc(100% + (var(--library-gutter) * 2)) !important;
  max-width: none !important;
  margin-right: calc(var(--library-gutter) * -1) !important;
  margin-left: calc(var(--library-gutter) * -1) !important;
  padding-right: var(--library-gutter) !important;
  padding-left: var(--library-gutter) !important;
  scroll-padding-right: var(--library-gutter) !important;
  scroll-padding-left: var(--library-gutter) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view
  .library-content-section.is-isolated[data-library-section="books"]
  :is(.library-stack-list, .library-stack-row.collection-item),
html.theme-dark #collectionView.collection-view
  .library-content-section.is-isolated[data-library-section="books"]
  :is(.library-stack-list, .library-stack-row.collection-item),
body.theme-dark #collectionView.collection-view
  .library-content-section.is-isolated[data-library-section="books"]
  :is(.library-stack-list, .library-stack-row.collection-item) {
  border-color: transparent !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view .library-add-button,
html.theme-dark #collectionView.collection-view .library-add-button,
body.theme-dark #collectionView.collection-view .library-add-button {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--library-accent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view .library-add-button:is(:hover, :focus-visible),
html.theme-dark #collectionView.collection-view .library-add-button:is(:hover, :focus-visible),
body.theme-dark #collectionView.collection-view .library-add-button:is(:hover, :focus-visible) {
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--library-accent-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Library add menu: solid editorial popover above the animated Library layers. */
#collectionView > .collection-header.library-header {
  isolation: isolate;
  overflow: visible !important;
}

#collectionView.is-add-menu-open > .collection-header.library-header,
#collectionView:has(.library-add-menu:not([hidden])) > .collection-header.library-header {
  z-index: 220 !important;
}

#collectionView .library-add-menu {
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 240 !important;
  width: min(326px, calc(100vw - (var(--library-gutter) * 2))) !important;
  padding: 8px 14px 10px !important;
  border: 1px solid rgba(89, 70, 45, 0.18) !important;
  border-radius: 20px !important;
  display: grid;
  gap: 0 !important;
  isolation: isolate;
  overflow: hidden;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 92% -8%, rgba(221, 155, 70, 0.15), transparent 46%),
    #f8f3ea !important;
  box-shadow:
    0 24px 54px rgba(42, 32, 20, 0.2),
    0 2px 8px rgba(42, 32, 20, 0.07) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

#collectionView .library-add-menu[hidden] {
  display: none !important;
}

#collectionView .library-add-menu:not([hidden]) {
  display: grid !important;
}

#collectionView .library-add-menu-heading {
  padding: 12px 8px 13px;
  display: grid;
  gap: 3px;
  border-bottom: 1px solid rgba(89, 70, 45, 0.13);
}

#collectionView .library-add-menu-heading > span {
  color: var(--library-accent);
  font: 740 0.58rem/1 var(--ui-font);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

#collectionView .library-add-menu-heading > strong {
  color: #2d2923;
  font: 520 1.2rem/1.12 var(--ui-font);
  letter-spacing: -0.018em;
}

#collectionView .library-add-menu button {
  position: relative;
  z-index: 1;
  min-height: 66px !important;
  padding: 10px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(89, 70, 45, 0.11) !important;
  border-radius: 0 !important;
  grid-template-columns: 30px minmax(0, 1fr) 12px !important;
  gap: 11px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: transparent !important;
  color: #2d2923 !important;
  box-shadow: none !important;
  transform: none !important;
}

#collectionView .library-add-menu button:last-child {
  border-bottom: 0 !important;
}

#collectionView .library-add-menu button::after {
  content: "";
  width: 7px;
  height: 7px;
  justify-self: end;
  border-top: 1.4px solid currentColor;
  border-right: 1.4px solid currentColor;
  opacity: 0.42;
  transform: rotate(45deg);
}

#collectionView .library-add-menu button:is(:hover, :focus-visible) {
  outline: 0 !important;
  background: rgba(202, 78, 67, 0.055) !important;
  color: var(--library-accent-strong) !important;
}

#collectionView .library-add-menu svg {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--library-accent) !important;
  stroke-width: 1.45 !important;
}

#collectionView .library-add-menu button > span {
  gap: 3px !important;
}

#collectionView .library-add-menu button strong {
  color: inherit !important;
  font-size: 0.98rem !important;
  font-weight: 560 !important;
  line-height: 1.12 !important;
}

#collectionView .library-add-menu button small {
  color: #777066 !important;
  font-size: 0.66rem !important;
  line-height: 1.3 !important;
}

html.theme-dark #collectionView .library-add-menu,
body.theme-dark #collectionView .library-add-menu {
  border-color: rgba(241, 224, 194, 0.12) !important;
  background:
    radial-gradient(circle at 92% -8%, rgba(224, 158, 72, 0.13), transparent 46%),
    #1b1d21 !important;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.24) !important;
}

html.theme-dark #collectionView .library-add-menu-heading,
body.theme-dark #collectionView .library-add-menu-heading {
  border-bottom-color: rgba(241, 224, 194, 0.1) !important;
}

html.theme-dark #collectionView .library-add-menu-heading > strong,
body.theme-dark #collectionView .library-add-menu-heading > strong,
html.theme-dark #collectionView .library-add-menu button,
body.theme-dark #collectionView .library-add-menu button {
  color: #f1eadf !important;
}

html.theme-dark #collectionView .library-add-menu button,
body.theme-dark #collectionView .library-add-menu button {
  border-bottom-color: rgba(241, 224, 194, 0.085) !important;
}

html.theme-dark #collectionView .library-add-menu button small,
body.theme-dark #collectionView .library-add-menu button small {
  color: #a7a096 !important;
}

html.theme-dark #collectionView .library-add-menu button:is(:hover, :focus-visible),
body.theme-dark #collectionView .library-add-menu button:is(:hover, :focus-visible) {
  background: rgba(222, 105, 91, 0.08) !important;
  color: #efaa9e !important;
}

/* Library aligned to the current Home editorial system. */
#collectionView.collection-view {
  --library-page: #f2eee5;
  --library-page-deep: #ece6dc;
  --library-ink: #24211e;
  --library-muted: #746d64;
  --library-soft: #9a9288;
  --library-line: rgba(73, 61, 47, 0.15);
  --library-line-strong: rgba(82, 68, 51, 0.22);
  --library-accent: #c95549;
  --library-accent-strong: #ac433a;
  --library-gold: #a9783c;
  --library-menu: #fbf8f1;
  --library-menu-shadow: 0 18px 42px rgba(75, 58, 37, 0.14);
  --library-gutter: clamp(22px, 5vw, 48px);
  padding-top: clamp(8px, 1.8vh, 18px) !important;
  gap: clamp(14px, 2vh, 20px) !important;
  color: var(--library-ink) !important;
}

html.theme-dark #collectionView.collection-view,
body.theme-dark #collectionView.collection-view {
  --library-page: #0b0d10;
  --library-page-deep: #15171b;
  --library-ink: #f2ede3;
  --library-muted: rgba(213, 205, 194, 0.69);
  --library-soft: rgba(213, 205, 194, 0.5);
  --library-line: rgba(231, 223, 211, 0.11);
  --library-line-strong: rgba(231, 223, 211, 0.2);
  --library-accent: #df5d51;
  --library-accent-strong: #ee7568;
  --library-gold: #c79556;
  --library-menu: #15171b;
  --library-menu-shadow: 0 24px 52px rgba(0, 0, 0, 0.34);
}

body:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview {
  background: var(--light-page) !important;
  background-image: none !important;
}

html.theme-dark body:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview,
body.theme-dark:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview {
  background: #0b0d10 !important;
  background-image: none !important;
}

#inputPanel.home-ambient-active:has(#collectionView:not([hidden])) .home-ambient-canvas,
html.theme-dark #inputPanel.home-ambient-active:has(#collectionView:not([hidden])) .home-ambient-canvas,
body.theme-dark #inputPanel.home-ambient-active:has(#collectionView:not([hidden])) .home-ambient-canvas,
#collectionView.collection-view::before {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
}

#collectionView > .collection-header,
#collectionView > .library-search,
#collectionView > .library-category-row,
#collectionView > .library-section {
  width: min(920px, calc(100vw - (var(--library-gutter) * 2))) !important;
  max-width: 920px !important;
}

#collectionView > .collection-header.library-header {
  min-height: 0 !important;
  padding: clamp(8px, 1.8vh, 18px) 0 2px !important;
  align-items: end !important;
}

#collectionView > .collection-header h2 {
  font-size: clamp(3.35rem, 12vw, 5.7rem) !important;
  font-weight: 470 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.047em !important;
}

#collectionView > .collection-header h2 .brand-red-letter {
  color: var(--library-accent) !important;
}

#collectionView > .collection-header p {
  margin-top: clamp(10px, 1.5vh, 15px) !important;
  color: var(--library-muted) !important;
  font-size: clamp(0.9rem, 2.5vw, 1.08rem) !important;
  line-height: 1.25 !important;
}

#collectionView .library-add-button {
  min-height: 44px !important;
  padding: 0 2px 0 9px !important;
  color: var(--library-accent) !important;
  font-size: clamp(0.92rem, 2.4vw, 1.04rem) !important;
  font-weight: 500 !important;
}

#collectionView > .library-search {
  min-height: 48px !important;
  padding: 0 3px 1px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--library-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView > .library-search input {
  color: var(--library-ink) !important;
  font-size: clamp(0.92rem, 2.5vw, 1.03rem) !important;
}

#collectionView > .library-category-row {
  min-height: 44px !important;
  border-bottom: 1px solid var(--library-line) !important;
  gap: clamp(4px, 1.5vw, 12px) !important;
}

#collectionView .library-category-chip {
  min-height: 43px !important;
  justify-content: center !important;
  padding: 0 2px 8px !important;
  color: var(--library-muted) !important;
  font-size: clamp(0.8rem, 2.35vw, 0.94rem) !important;
}

#collectionView .library-category-chip::after {
  right: 8px !important;
  bottom: -1px !important;
  left: 8px !important;
  height: 2px !important;
}

#collectionView > .library-section {
  gap: 11px !important;
  padding-top: 2px !important;
}

#collectionView > .library-section > .library-section-heading {
  min-height: 40px !important;
}

#collectionView .library-section-heading h3 {
  font-size: clamp(1.65rem, 5vw, 2.25rem) !important;
  font-weight: 480 !important;
  letter-spacing: -0.03em !important;
}

#collectionView .library-content-section {
  gap: 10px !important;
}

#collectionView .library-content-section + .library-content-section {
  padding-top: clamp(17px, 2.5vh, 24px) !important;
  border-top-color: var(--library-line) !important;
}

#collectionView .library-content-title h4 {
  font-size: clamp(1.28rem, 3.8vw, 1.68rem) !important;
  font-weight: 480 !important;
}

#collectionView .library-section-icon {
  color: var(--library-accent) !important;
  opacity: 0.9;
}

#collectionView .library-see-all {
  color: var(--library-muted) !important;
}

#collectionView .library-book-strip .library-grid-cover,
#collectionView .library-book-strip .library-grid-cover.has-image,
#collectionView .library-book-strip .library-grid-cover.has-title-fallback,
#collectionView .library-stack-row .collection-cover {
  border-color: color-mix(in srgb, var(--library-line-strong) 76%, transparent) !important;
  background: var(--library-page-deep) !important;
  box-shadow:
    0 12px 21px rgba(28, 25, 21, 0.12),
    0 0 0 1px color-mix(in srgb, var(--library-gold) 4%, transparent) !important;
}

html.theme-dark #collectionView .library-book-strip .library-grid-cover,
html.theme-dark #collectionView .library-stack-row .collection-cover,
body.theme-dark #collectionView .library-book-strip .library-grid-cover,
body.theme-dark #collectionView .library-stack-row .collection-cover {
  background: #15171b !important;
  box-shadow:
    0 13px 24px rgba(0, 0, 0, 0.27),
    0 0 0 1px rgba(229, 220, 207, 0.05) !important;
}

#collectionView .library-stack-row .collection-cover.has-image img,
html:not(.theme-dark) body:not(.theme-dark) #collectionView .library-stack-row .collection-cover.has-image img {
  filter: none !important;
}

#collectionView .library-book-strip .library-book-card .collection-progress,
#collectionView .library-stack-row .collection-progress {
  height: 3px !important;
  background: color-mix(in srgb, var(--library-muted) 18%, transparent) !important;
}

#collectionView .library-add-menu {
  border-color: var(--library-line-strong) !important;
  border-radius: 17px !important;
  background: var(--library-menu) !important;
  background-image: none !important;
  box-shadow: var(--library-menu-shadow) !important;
}

#collectionView .library-add-menu-heading {
  border-bottom-color: var(--library-line) !important;
}

#collectionView .library-add-menu-heading > strong,
#collectionView .library-add-menu button {
  color: var(--library-ink) !important;
}

#collectionView .library-add-menu button {
  border-bottom-color: var(--library-line) !important;
}

#collectionView .library-add-menu button small {
  color: var(--library-muted) !important;
}

/* The dedicated Books category is a full collection grid; Books within All remains a shelf. */
#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-list {
  --library-book-grid-min: 128px;
  grid-template-columns: repeat(auto-fill, minmax(var(--library-book-grid-min), 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  align-items: start !important;
  gap: clamp(20px, 3.2vw, 32px) clamp(14px, 2.4vw, 24px) !important;
  padding: 3px 0 18px !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  touch-action: pan-y !important;
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row.collection-item {
  width: 100% !important;
  min-width: 0 !important;
  padding-bottom: 0 !important;
  scroll-snap-align: none !important;
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row .collection-open {
  gap: 9px !important;
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row .collection-cover {
  aspect-ratio: 0.68 !important;
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row .collection-copy {
  padding-inline: 1px !important;
  gap: 3px !important;
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row .collection-copy > strong {
  font-size: clamp(0.76rem, 1.85vw, 0.92rem) !important;
}

#collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-row .collection-copy > small {
  font-size: clamp(0.63rem, 1.5vw, 0.74rem) !important;
}

@media (max-width: 700px) {
  #collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-list {
    --library-book-grid-min: 0px;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
    padding-bottom: 14px !important;
  }
}

@media (max-width: 350px) {
  #collectionView .library-content-section.is-isolated[data-library-section="books"] .library-stack-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
  }
}

/* Match Library categories to the compact format switch in Discover / Browse. */
#collectionView > .library-category-row {
  min-height: 50px !important;
  padding: 5px !important;
  border: 1px solid var(--library-line) !important;
  border-radius: 16px !important;
  gap: 0 !important;
  background: var(--library-menu) !important;
}

#collectionView .library-category-chip {
  min-height: 38px !important;
  height: 38px !important;
  align-self: center !important;
  padding: 0 5px !important;
  border-radius: 11px !important;
  justify-content: center !important;
  gap: 0 !important;
  font-family: var(--ui-font) !important;
  font-size: 0.74rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#collectionView .library-category-chip::after,
#collectionView .library-category-chip .library-category-icon,
#collectionView .library-category-chip .library-category-count {
  display: none !important;
}

#collectionView .library-category-chip.is-selected,
html.theme-dark #collectionView .library-category-chip.is-selected,
body.theme-dark #collectionView .library-category-chip.is-selected {
  background: color-mix(in srgb, var(--library-ink) 8%, var(--library-menu)) !important;
  color: var(--library-accent-strong) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--library-line-strong) 82%, transparent),
    0 1px 3px color-mix(in srgb, var(--library-ink) 7%, transparent) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view > .library-category-row .library-category-chip.is-selected,
html.theme-dark body #collectionView.collection-view > .library-category-row .library-category-chip.is-selected,
body.theme-dark #collectionView.collection-view > .library-category-row .library-category-chip.is-selected {
  border: 0 !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--library-ink) 8%, var(--library-menu)) !important;
  background-image: none !important;
  color: var(--library-accent-strong) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--library-line-strong) 82%, transparent),
    0 1px 3px color-mix(in srgb, var(--library-ink) 7%, transparent) !important;
}

#collectionView > .library-section > .library-section-heading:has(#collectionAllHeading.visually-hidden) {
  justify-content: flex-end !important;
}

#collectionView .library-see-all {
  min-height: 38px !important;
  gap: 10px !important;
  font-size: clamp(0.9rem, 2.5vw, 1.03rem) !important;
}

#collectionView .library-see-all > span:last-child {
  width: 8px !important;
  height: 8px !important;
  border-width: 1.5px !important;
}

#collectionView .library-sort-control {
  min-height: 40px !important;
  padding-right: 21px !important;
  gap: 8px !important;
  font-size: clamp(0.82rem, 2.3vw, 0.94rem) !important;
}

#collectionView .library-sort-control::after {
  width: 8px !important;
  height: 8px !important;
  border-width: 1.5px !important;
}

#collectionView .library-sort-control select {
  max-width: 150px !important;
  font-size: 1em !important;
}

@media (max-width: 700px) {
  #collectionView.collection-view {
    --library-gutter: clamp(18px, 4.9vw, 24px);
    padding-top: 3px !important;
    gap: 11px !important;
  }

  #collectionView > .collection-header h2 {
    font-size: clamp(3.3rem, 15vw, 4.15rem) !important;
  }

  #collectionView .library-book-strip {
    --library-shelf-card-width: clamp(88px, 23.5vw, 104px);
  }

  #collectionView .library-stack-list {
    --library-document-width: clamp(102px, 27vw, 118px);
  }
}

/*
 * Reader play actions
 * -------------------
 * Use the same solid coral action language as Home's Resume Focus control.
 * Speed retains its larger transport silhouette; Page keeps its compact size.
 */

/*
 * Library side of the shared destination masthead contract.
 * The cross-destination declaration remains in styles.css until Discover is
 * extracted; these declarations preserve Library's final cascade position.
 */
#inputPanel.is-menu-subview:has(#collectionView:not([hidden])) > .menu-card {
  padding-top: var(--destination-page-top) !important;
}

#inputPanel.is-menu-subview:has(#collectionView:not([hidden])) #collectionView.collection-view {
  --library-gutter: var(--destination-page-gutter) !important;
  padding-top: 0 !important;
  scrollbar-gutter: stable;
}

#collectionView > .collection-header.library-header {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding-top: 0 !important;
  padding-bottom: 2px !important;
  align-content: start !important;
  align-items: start !important;
}

#collectionView > .collection-header h2 {
  margin: 0 !important;
  font-family: var(--ui-font) !important;
  font-size: var(--destination-title-size) !important;
  font-weight: 470 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.047em !important;
}

#collectionView > .collection-header p {
  min-height: 1.25em;
  margin: 10px 0 0 !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.88rem, 2.4vw, 1rem) !important;
  font-weight: 450 !important;
  line-height: 1.25 !important;
}

#collectionHeaderSummary {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#collectionView:not([hidden]):not(.is-destination-cascading)
  > :is(.collection-header, .library-search, .library-category-row) {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* Keep the horizontal shelf geometrically stable while its parent renders. */
#collectionView .library-book-strip {
  scroll-snap-type: none !important;
  overflow-anchor: none !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
}

body:has(#collectionView:not([hidden])) #inputPanel,
#collectionView.collection-view,
#collectionView .library-section,
#collectionView .collection-list {
  overflow-anchor: none !important;
}

#collectionView .library-book-strip :is(
  .library-book-card.collection-item,
  .library-book-open,
  .library-grid-cover,
  .library-grid-cover img,
  .library-book-card-copy,
  .collection-progress
) {
  scroll-snap-align: none !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
}

#collectionView .library-content-heading {
  min-height: 40px !important;
}

#collectionView .library-content-title {
  gap: 11px !important;
}

#collectionView .library-content-title h4 {
  font-size: clamp(1.45rem, 4.4vw, 1.9rem) !important;
  line-height: 0.98 !important;
}

#collectionView .library-section-icon {
  width: 24px !important;
  height: 24px !important;
  stroke-width: 1.5 !important;
}

#collectionView .library-add-button {
  margin-top: 5px !important;
  align-self: start !important;
}

@media (max-width: 520px) {
  #collectionView .library-add-menu {
    top: calc(100% + 4px) !important;
  }
}

/*
 * Compact Library masthead
 * ------------------------
 * Mirror Discover's title/search geometry, then keep collection context and
 * sorting together beneath the category tabs so the control stack stays calm.
 */
#inputPanel.is-menu-subview:has(#collectionView:not([hidden])) > .menu-card {
  padding-top: calc(var(--destination-page-top) + 4px) !important;
}

#collectionView.collection-view {
  gap: 10px !important;
}

#collectionView > .collection-header.library-header {
  width: min(920px, 100%) !important;
  max-width: 920px !important;
  margin-bottom: -10px !important;
  padding: 0 var(--destination-page-gutter) 4px !important;
}

#collectionView > :is(.library-search, .library-category-row, .library-meta-row, .library-section) {
  width: min(920px, calc(100% - 40px)) !important;
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#collectionView > .library-meta-row {
  min-height: 32px;
  margin-top: -4px !important;
  margin-bottom: -6px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#collectionView > .library-meta-row #collectionHeaderSummary {
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.8rem, 2.25vw, 0.92rem) !important;
  font-weight: 450 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collectionView > .library-meta-row .library-heading-actions {
  flex: 0 0 auto;
}

#collectionView > .library-meta-row .library-sort-control {
  min-height: 32px !important;
}

#collectionView > .library-section > .library-section-heading:has(#collectionAllHeading.visually-hidden) {
  display: none !important;
  min-height: 0 !important;
}

#collectionView > .library-section > .library-section-heading {
  min-height: 34px !important;
}

#collectionView > .library-section {
  gap: 8px !important;
  padding-top: 0 !important;
}

#collectionView .collection-list {
  gap: clamp(18px, 2.5vh, 26px) !important;
}

#collectionView .library-content-section {
  gap: 8px !important;
}

#collectionView .library-content-section + .library-content-section {
  padding-top: clamp(14px, 2vh, 20px) !important;
}

#collectionView .library-content-heading {
  min-height: 36px !important;
}

@media (max-width: 620px) {
  #collectionView.collection-view {
    gap: 8px !important;
  }

  #collectionView > .collection-header.library-header {
    margin-bottom: -8px !important;
  }

  #collectionView > :is(.library-search, .library-category-row, .library-meta-row, .library-section) {
    width: calc(100% - 36px) !important;
  }
}

/*
 * Library / Discover masthead parity
 * -----------------------------------
 * Keep Library's own actions and filtering behaviour, but use the same final
 * title, search, and tab presentation as the current Discover destination.
 */
#collectionView > .collection-header h2 {
  font-family: var(--heading-font) !important;
  font-size: clamp(3.55rem, 15.2vw, 6rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}

#collectionView > .library-search,
html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view > .library-search {
  box-sizing: border-box !important;
  width: min(920px, calc(100% - 40px)) !important;
  min-height: 58px !important;
  margin: 0 auto !important;
  padding: 0 14px 0 16px !important;
  border: 1px solid color-mix(in srgb, var(--library-muted) 40%, transparent) !important;
  border-radius: 15px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) 32px !important;
  place-items: center stretch !important;
  gap: 12px !important;
  overflow: hidden !important;
  background: color-mix(in srgb, var(--library-menu) 82%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 32%, transparent),
    0 10px 28px color-mix(in srgb, var(--library-ink) 6%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(108%) !important;
  backdrop-filter: blur(16px) saturate(108%) !important;
}

#collectionView > .library-search:focus-within,
html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view > .library-search:focus-within {
  border-color: color-mix(in srgb, var(--library-accent) 68%, var(--library-line)) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 32%, transparent),
    0 0 0 3px color-mix(in srgb, var(--library-accent) 11%, transparent) !important;
}

#collectionView > .library-search > svg {
  width: 22px !important;
  height: 22px !important;
  justify-self: center !important;
  fill: none !important;
  stroke: var(--library-muted) !important;
  stroke-width: 1.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#collectionView > .library-search input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--library-ink) !important;
  font: 450 clamp(0.98rem, 2.7vw, 1.08rem)/1.2 var(--ui-font) !important;
  letter-spacing: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#collectionView > .library-search input::placeholder {
  color: var(--library-muted) !important;
  opacity: 0.94 !important;
}

#collectionView .library-search-clear {
  position: relative !important;
  box-sizing: border-box !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  background: transparent !important;
  color: var(--library-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

#collectionView .library-search-clear[hidden] {
  display: none !important;
}

#collectionView .library-search-clear::before,
#collectionView .library-search-clear::after {
  top: 50% !important;
  left: 50% !important;
  width: 14px !important;
  height: 1.4px !important;
  border-radius: 2px !important;
  background: currentColor !important;
}

#collectionView .library-search-clear::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

#collectionView .library-search-clear::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

#collectionView .library-search-clear:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

#collectionView > .library-category-row {
  box-sizing: border-box !important;
  width: min(920px, calc(100% - 40px)) !important;
  min-height: 54px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--library-line) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#collectionView > .library-category-row::-webkit-scrollbar {
  display: none;
}

#collectionView .library-category-chip {
  position: relative !important;
  flex: 1 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 53px !important;
  height: auto !important;
  padding: 0 clamp(14px, 2.4vw, 26px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--library-muted) !important;
  font: 480 clamp(0.92rem, 2.15vw, 1.08rem)/1 var(--ui-font) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
}

#collectionView .library-category-chip::after {
  position: absolute !important;
  right: 14% !important;
  bottom: -1px !important;
  left: 14% !important;
  height: 2px !important;
  border-radius: 2px 2px 0 0 !important;
  display: block !important;
  background: transparent !important;
  content: "" !important;
}

#collectionView .library-category-chip.is-selected,
html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view > .library-category-row .library-category-chip.is-selected,
html.theme-dark body #collectionView.collection-view > .library-category-row .library-category-chip.is-selected,
body.theme-dark #collectionView.collection-view > .library-category-row .library-category-chip.is-selected {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--library-accent-strong) !important;
  box-shadow: none !important;
}

#collectionView .library-category-chip.is-selected::after {
  display: block !important;
  background: var(--library-accent) !important;
}

#collectionView .library-category-chip:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--library-accent) 60%, transparent) !important;
  outline-offset: -6px !important;
}

#collectionView .library-category-chip:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

html.theme-dark #collectionView.collection-view > .library-search,
body.theme-dark #collectionView.collection-view > .library-search {
  border-color: rgba(226, 218, 207, 0.24) !important;
  background: rgba(27, 29, 34, 0.82) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 12px 34px rgba(0, 0, 0, 0.18) !important;
}

html.theme-dark #collectionView.collection-view > .library-search:focus-within,
body.theme-dark #collectionView.collection-view > .library-search:focus-within {
  border-color: rgba(225, 104, 93, 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 0 0 3px rgba(225, 104, 93, 0.1) !important;
}

html.theme-dark #collectionView > .library-category-row,
body.theme-dark #collectionView > .library-category-row {
  border-bottom-color: rgba(226, 218, 207, 0.14) !important;
  background: transparent !important;
}

html.theme-dark #collectionView .library-category-chip.is-selected,
body.theme-dark #collectionView .library-category-chip.is-selected {
  color: #e27b72 !important;
}

@media (max-width: 620px) {
  #inputPanel.is-menu-subview:has(#collectionView:not([hidden])) > .menu-card {
    padding-top: calc(var(--destination-page-top) + 1px) !important;
  }

  #collectionView > .collection-header.library-header {
    padding-bottom: 8px !important;
  }

  #collectionView > .collection-header h2 {
    font-size: clamp(2.9rem, 12.4vw, 3.35rem) !important;
    line-height: 1 !important;
  }

  #collectionView > :is(.library-search, .library-category-row, .library-meta-row, .library-section) {
    width: calc(100% - 36px) !important;
  }

  #collectionView > .library-search {
    min-height: 42px !important;
    padding-inline: 11px !important;
    border-radius: 11px !important;
    grid-template-columns: 19px minmax(0, 1fr) 28px !important;
    gap: 8px !important;
  }

  #collectionView > .library-search > svg {
    width: 17px !important;
    height: 17px !important;
  }

  #collectionView > .library-search input {
    height: 40px !important;
    font-size: clamp(0.9rem, 3.8vw, 0.98rem) !important;
  }

  #collectionView > .library-category-row {
    min-height: 45px !important;
  }

  #collectionView .library-category-chip {
    min-height: 44px !important;
    padding-inline: 11px !important;
    font-size: clamp(0.82rem, 3.55vw, 0.92rem) !important;
  }
}


/* Library adoption of the shared editorial fallback artwork. */
#collectionView :is(
  .library-grid-cover,
  .library-feature-cover,
  .collection-cover
).editorial-fallback-cover {
  padding: clamp(8px, 7%, 18px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) minmax(20px, 27%) auto !important;
  place-items: initial !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(5px, 3%, 9px) !important;
  border: 0 !important;
  background: var(--editorial-cover-material) !important;
  color: var(--editorial-cover-ink) !important;
  box-shadow:
    0 12px 21px rgba(0, 0, 0, 0.19),
    0 0 0 1px color-mix(in srgb, var(--editorial-cover-ink) 8%, transparent) !important;
  text-align: left !important;
}

#collectionView .library-zero-mark.editorial-empty-art {
  width: clamp(82px, 19vw, 106px) !important;
  height: auto !important;
  aspect-ratio: 0.78 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--library-muted) !important;
  box-shadow: none !important;
  opacity: 0.7;
}

html.theme-dark #collectionView .library-book-strip
  .library-grid-cover.editorial-fallback-cover.is-research,
body.theme-dark #collectionView .library-book-strip
  .library-grid-cover.editorial-fallback-cover.is-research,
html.theme-dark #collectionView .library-stack-row
  .collection-cover.editorial-fallback-cover.is-research,
body.theme-dark #collectionView .library-stack-row
  .collection-cover.editorial-fallback-cover.is-research,
html.theme-dark #collectionView
  .library-feature-cover.editorial-fallback-cover.is-research,
body.theme-dark #collectionView
  .library-feature-cover.editorial-fallback-cover.is-research {
  border-color: rgba(238, 231, 217, 0.14) !important;
  background: var(--editorial-cover-material) !important;
  color: var(--editorial-cover-ink) !important;
  box-shadow:
    0 13px 24px rgba(0, 0, 0, 0.27),
    0 0 0 1px rgba(238, 231, 217, 0.1) !important;
}

/*
 * Library editorial catalogue
 * ---------------------------
 * Discover's maintained catalogue language, adapted for owned items and
 * reading progress. Format navigation and behaviour remain Library-specific.
 */
#collectionView.collection-view {
  --library-page: var(--light-page);
  --library-page-deep: var(--light-accent-soft);
  --library-surface: var(--light-panel);
  --library-surface-soft: var(--light-cool-panel);
  --library-ink: var(--light-ink);
  --library-muted: var(--light-muted);
  --library-soft: var(--light-quiet);
  --library-line: var(--light-line);
  --library-line-strong: var(--light-line-strong);
  --library-accent: var(--light-accent-ink);
  --library-accent-strong: var(--light-accent-ink);
  --library-article-accent: #667f76;
  --library-research-accent: #8d7194;
  --library-menu: var(--library-surface);
}

html.theme-dark #collectionView.collection-view,
body.theme-dark #collectionView.collection-view {
  --library-page: #0b0d10;
  --library-page-deep: #15171b;
  --library-surface: #17191d;
  --library-surface-soft: #222429;
  --library-ink: #f2ede3;
  --library-muted: rgba(213, 205, 194, 0.7);
  --library-soft: rgba(213, 205, 194, 0.49);
  --library-line: rgba(231, 223, 211, 0.11);
  --library-line-strong: rgba(231, 223, 211, 0.18);
  --library-accent: #df6559;
  --library-accent-strong: #ef8578;
  --library-article-accent: #8eae9e;
  --library-research-accent: #a98bb5;
  --library-menu: var(--library-surface);
}

/* Quiet results context and sorting, matching Discover's compact browser heads. */
#collectionView > .library-meta-row {
  min-height: 30px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 2px !important;
  align-items: center !important;
}

#collectionView > .library-meta-row #collectionHeaderSummary {
  color: var(--library-muted) !important;
  font: 740 clamp(0.59rem, 1.45vw, 0.68rem)/1.2 var(--ui-font) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

#collectionView > .library-meta-row .library-sort-control {
  min-height: 30px !important;
  padding-right: 17px !important;
  gap: 5px !important;
  color: var(--library-muted) !important;
  font-family: var(--ui-font) !important;
}

#collectionView > .library-meta-row .library-sort-control > span {
  color: var(--library-soft) !important;
  font: 640 0.58rem/1 var(--ui-font) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#collectionView > .library-meta-row .library-sort-control select {
  max-width: 132px !important;
  color: var(--library-muted) !important;
  font: 560 0.66rem/1 var(--ui-font) !important;
}

#collectionView .collection-list {
  gap: clamp(22px, 3.6vw, 32px) !important;
}

#collectionView .library-content-section {
  gap: 8px !important;
}

#collectionView .library-content-section + .library-content-section {
  margin-top: 0 !important;
  padding-top: clamp(6px, 1.2vw, 12px) !important;
  border-top: 0 !important;
}

#collectionView .library-content-heading {
  min-height: 24px !important;
  padding: 0 !important;
}

#collectionView .library-content-title {
  gap: 0 !important;
}

#collectionView .library-section-icon {
  display: none !important;
}

#collectionView .library-content-title h4 {
  margin: 0 !important;
  color: var(--library-accent) !important;
  font: 760 clamp(0.78rem, 1.9vw, 0.9rem)/1 var(--ui-font) !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

#collectionView [data-library-section="articles"] .library-content-title h4 {
  color: var(--library-article-accent) !important;
}

#collectionView [data-library-section="papers"] .library-content-title h4 {
  color: var(--library-research-accent) !important;
}

#collectionView .library-see-all {
  min-height: 24px !important;
  color: var(--library-muted) !important;
  font: 560 0.66rem/1 var(--ui-font) !important;
}

#collectionView .library-see-all > span:last-child {
  width: 6px !important;
  height: 6px !important;
}

/* Books become the same compact, dark composite covers used in Discover. */
#collectionView .library-book-strip {
  --library-shelf-card-width: clamp(96px, 13.5vw, 126px);
  gap: clamp(10px, 1.7vw, 15px) !important;
  padding-top: 2px !important;
  padding-bottom: 8px !important;
  scroll-snap-type: x mandatory !important;
}

#collectionView .library-book-strip .library-book-card.collection-item {
  padding-bottom: 0 !important;
  scroll-snap-align: start !important;
}

#collectionView .library-book-strip .library-book-open {
  border: 1px solid color-mix(in srgb, var(--library-line) 38%, transparent) !important;
  border-radius: 7px 10px 10px 7px !important;
  grid-template-rows: auto 68px !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #101214 !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 9%, transparent) !important;
}

#collectionView .library-book-strip .library-grid-cover,
#collectionView .library-book-strip .library-grid-cover.has-image,
#collectionView .library-book-strip .library-grid-cover.has-title-fallback {
  aspect-ratio: 4 / 5 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 239, 226, 0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#collectionView .library-book-strip .library-book-card-copy {
  box-sizing: border-box !important;
  min-height: 68px !important;
  padding: 8px 8px 7px !important;
  align-content: start !important;
  gap: 3px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #121416, #0b0d0f) !important;
}

#collectionView .library-book-strip .library-book-card-copy > strong {
  color: #f3eee5 !important;
  font: 480 clamp(0.76rem, 2.05vw, 0.9rem)/1.06 var(--ui-font) !important;
  letter-spacing: -0.014em !important;
}

#collectionView .library-book-strip .library-book-card-copy > small {
  color: rgba(223, 215, 203, 0.68) !important;
  font: 560 0.54rem/1.2 var(--ui-font) !important;
}

#collectionView .library-book-strip .library-book-card .collection-progress {
  height: 2px !important;
  margin-top: 3px !important;
  background: rgba(240, 233, 221, 0.14) !important;
}

/* Articles and papers use Discover's mixed-format landscape shelves in All. */
#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .library-stack-list {
  --library-document-width: clamp(164px, 22vw, 204px);
  gap: clamp(10px, 1.7vw, 15px) !important;
  padding-top: 2px !important;
  padding-bottom: 8px !important;
  scroll-snap-type: x mandatory !important;
}

#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .library-stack-row.collection-item {
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--library-line) 38%, transparent) !important;
  border-radius: 7px 10px 10px 7px !important;
  overflow: hidden !important;
  background: #101214 !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 9%, transparent) !important;
  scroll-snap-align: start !important;
}

#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-open {
  grid-template-rows: auto minmax(76px, auto) !important;
  gap: 0 !important;
  overflow: hidden !important;
}

#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-cover {
  aspect-ratio: 1.42 / 1 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 239, 226, 0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy {
  box-sizing: border-box !important;
  min-height: 76px !important;
  padding: 8px !important;
  align-content: start !important;
  gap: 4px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #121416, #0b0d0f) !important;
}

#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > strong {
  color: #f3eee5 !important;
  font: 500 clamp(0.76rem, 2.05vw, 0.9rem)/1.05 var(--ui-font) !important;
  letter-spacing: -0.012em !important;
}

#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > small {
  color: rgba(223, 215, 203, 0.66) !important;
  font: 540 0.51rem/1.15 var(--ui-font) !important;
}

#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-progress {
  height: 2px !important;
  margin-top: 3px !important;
  background: rgba(240, 233, 221, 0.14) !important;
}

#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) :is(.collection-meta, .collection-menu-wrap) {
  display: none !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view
  .library-content-section:not(.is-isolated):is([data-library-section="articles"], [data-library-section="papers"])
  .library-stack-row.collection-item,
html.theme-dark #collectionView.collection-view
  .library-content-section:not(.is-isolated):is([data-library-section="articles"], [data-library-section="papers"])
  .library-stack-row.collection-item,
body.theme-dark #collectionView.collection-view
  .library-content-section:not(.is-isolated):is([data-library-section="articles"], [data-library-section="papers"])
  .library-stack-row.collection-item {
  border: 1px solid color-mix(in srgb, var(--library-line) 38%, transparent) !important;
  background: #101214 !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 9%, transparent) !important;
}

/* Focused article and paper tabs use Discover's readable editorial rows. */
#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .library-stack-list {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 1px solid var(--library-line) !important;
  display: grid !important;
  /* Fill the list instead of retaining the shelf's content-sized column. */
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 0 !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  touch-action: pan-y !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .library-stack-row.collection-item {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 112px !important;
  padding: 14px 38px 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--library-line) !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-open {
  grid-template-columns: 112px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 14px !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-cover {
  width: 112px !important;
  aspect-ratio: 4 / 3 !important;
  border: 1px solid var(--library-line) !important;
  border-radius: 10px !important;
  background: var(--library-surface-soft) !important;
  box-shadow: none !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="articles"] .collection-cover {
  color: var(--library-article-accent) !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="papers"] .collection-cover {
  border-color: color-mix(in srgb, var(--library-research-accent) 22%, var(--library-line)) !important;
  color: var(--library-research-accent) !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-cover.has-image img {
  filter: none !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy {
  gap: 7px !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > strong {
  color: var(--library-ink) !important;
  font: 500 clamp(1.05rem, 3vw, 1.3rem)/1.08 var(--ui-font) !important;
  letter-spacing: -0.012em !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > small {
  color: var(--library-muted) !important;
  font: 620 0.62rem/1.2 var(--ui-font) !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-progress {
  height: 2px !important;
  margin-top: 1px !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-meta {
  display: block !important;
  color: var(--library-muted) !important;
  font: 650 0.58rem/1 var(--ui-font) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

#collectionView.collection-view .library-content-section.is-isolated:is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-menu-wrap {
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
}

/* The focused Books tab keeps a cover grid, using the same composite cards. */
#collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .library-stack-list {
  width: 100% !important;
  margin: 0 !important;
  padding: 2px 0 18px !important;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important;
  gap: clamp(20px, 3.2vw, 32px) clamp(14px, 2.4vw, 24px) !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .library-stack-row.collection-item {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--library-line) 38%, transparent) !important;
  border-radius: 7px 10px 10px 7px !important;
  overflow: hidden !important;
  background: #101214 !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 9%, transparent) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #collectionView.collection-view
  .library-content-section.is-isolated[data-library-section="books"]
  .library-stack-row.collection-item,
html.theme-dark #collectionView.collection-view
  .library-content-section.is-isolated[data-library-section="books"]
  .library-stack-row.collection-item,
body.theme-dark #collectionView.collection-view
  .library-content-section.is-isolated[data-library-section="books"]
  .library-stack-row.collection-item {
  border: 1px solid color-mix(in srgb, var(--library-line) 38%, transparent) !important;
  border-radius: 7px 10px 10px 7px !important;
  overflow: hidden !important;
  background: #101214 !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 9%, transparent) !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .collection-open {
  grid-template-rows: auto 72px !important;
  gap: 0 !important;
  overflow: hidden !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .collection-cover {
  width: 100% !important;
  aspect-ratio: 4 / 5 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 239, 226, 0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .collection-copy {
  box-sizing: border-box !important;
  min-height: 72px !important;
  padding: 9px !important;
  align-content: start !important;
  gap: 4px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #121416, #0b0d0f) !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .collection-copy > strong {
  color: #f3eee5 !important;
  font: 500 clamp(0.76rem, 2.05vw, 0.9rem)/1.05 var(--ui-font) !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .collection-copy > small {
  color: rgba(223, 215, 203, 0.66) !important;
  font: 540 0.54rem/1.15 var(--ui-font) !important;
}

#collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] :is(
  .collection-meta,
  .collection-menu-wrap
) {
  display: none !important;
}

/* Composite cards stay ink-on-graphite above the older theme text contract. */
#collectionView#collectionView#collectionView .library-book-strip .library-book-card-copy > strong,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > strong,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-copy > strong {
  color: #f3eee5 !important;
}

#collectionView#collectionView#collectionView .library-book-strip .library-book-card-copy > small,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > small,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-copy > small {
  color: rgba(223, 215, 203, 0.68) !important;
}

/* Source menu, empty state, and progress details share Discover's materials. */
#collectionView .library-add-menu,
html.theme-dark #collectionView .library-add-menu,
body.theme-dark #collectionView .library-add-menu {
  padding: 8px !important;
  border: 1px solid var(--library-line-strong) !important;
  border-radius: 16px !important;
  background: var(--library-surface) !important;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--library-ink) 16%, transparent) !important;
}

#collectionView .library-add-menu-heading {
  margin: 0 6px !important;
  padding: 11px 4px 12px !important;
  border-bottom-color: var(--library-line) !important;
}

#collectionView .library-add-menu button {
  min-height: 62px !important;
  padding: 9px 10px !important;
  border-bottom-color: var(--library-line) !important;
  border-radius: 10px !important;
}

#collectionView .library-add-menu button:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--library-accent) 7%, var(--library-surface)) !important;
}

#collectionView .library-add-menu button small,
html.theme-dark #collectionView .library-add-menu button small,
body.theme-dark #collectionView .library-add-menu button small {
  color: var(--library-muted) !important;
}

#collectionView .library-zero-state {
  min-height: 220px !important;
  padding: clamp(28px, 6vw, 48px) 18px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 9px !important;
  text-align: center !important;
}

#collectionView .library-zero-state > strong {
  color: var(--library-ink) !important;
  font: 500 clamp(1.35rem, 4vw, 1.8rem)/1.05 var(--ui-font) !important;
  letter-spacing: -0.02em !important;
}

#collectionView .library-zero-state > p {
  max-width: 42ch !important;
  color: var(--library-muted) !important;
  font: 450 clamp(0.82rem, 2vw, 0.94rem)/1.42 var(--ui-font) !important;
}

#collectionView .library-zero-state > button {
  min-height: 38px !important;
  margin-top: 5px !important;
  padding: 0 14px !important;
  border: 1px solid var(--library-line) !important;
  border-radius: 12px !important;
  background: var(--library-surface) !important;
  color: var(--library-accent-strong) !important;
  font: 650 0.68rem/1 var(--ui-font) !important;
}

@media (max-width: 620px) {
  #collectionView .collection-list {
    gap: 22px !important;
  }

  #collectionView > .library-meta-row {
    min-height: 28px !important;
  }

  #collectionView > .library-meta-row #collectionHeaderSummary {
    font-size: 0.56rem !important;
    letter-spacing: 0.11em !important;
  }

  #collectionView > .library-meta-row .library-sort-control > span {
    display: none !important;
  }

  #collectionView .library-book-strip {
    --library-shelf-card-width: clamp(94px, 25vw, 108px);
    gap: 11px !important;
  }

  #collectionView .library-book-strip .library-book-open {
    grid-template-rows: auto 62px !important;
  }

  #collectionView .library-book-strip .library-book-card-copy {
    min-height: 62px !important;
    padding: 8px 7px 7px !important;
  }

  #collectionView .library-content-section:not(.is-isolated):is(
    [data-library-section="articles"],
    [data-library-section="papers"]
  ) .library-stack-list {
    --library-document-width: clamp(164px, 46vw, 190px);
    gap: 11px !important;
  }

  #collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .library-stack-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }

  #collectionView.collection-view .library-content-section.is-isolated:is(
    [data-library-section="articles"],
    [data-library-section="papers"]
  ) .library-stack-row.collection-item {
    padding-right: 32px !important;
  }

  #collectionView.collection-view .library-content-section.is-isolated:is(
    [data-library-section="articles"],
    [data-library-section="papers"]
  ) .collection-open {
    grid-template-columns: 106px minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  #collectionView.collection-view .library-content-section.is-isolated:is(
    [data-library-section="articles"],
    [data-library-section="papers"]
  ) .collection-cover {
    width: 106px !important;
  }

  #collectionView.collection-view .library-content-section.is-isolated:is(
    [data-library-section="articles"],
    [data-library-section="papers"]
  ) .collection-meta {
    display: none !important;
  }
}

@media (max-width: 360px) {
  #collectionView.collection-view .library-content-section.is-isolated[data-library-section="books"] .library-stack-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
  }

  #collectionView.collection-view .library-content-section.is-isolated:is(
    [data-library-section="articles"],
    [data-library-section="papers"]
  ) .collection-open {
    grid-template-columns: 96px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  #collectionView.collection-view .library-content-section.is-isolated:is(
    [data-library-section="articles"],
    [data-library-section="papers"]
  ) .collection-cover {
    width: 96px !important;
  }
}

/*
 * All catalogue shelves: cover-led, without dark card backplates.
 * Focused category views retain their stronger grid and row structures.
 */
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated) .library-book-open {
  border: 0 !important;
  border-radius: 0 !important;
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-strip .library-grid-cover {
  border: 1px solid var(--library-line-strong) !important;
  border-radius: 7px 10px 10px 7px !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 10%, transparent) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy {
  min-height: 0 !important;
  padding: 0 1px !important;
  gap: 2px !important;
  overflow: visible !important;
  background: transparent !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy > strong {
  color: var(--library-ink) !important;
  font-weight: 520 !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy > small {
  color: var(--library-muted) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card .collection-progress {
  height: 2px !important;
  margin-top: 4px !important;
  background: color-mix(in srgb, var(--library-muted) 18%, transparent) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .library-stack-row.collection-item {
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-open {
  grid-template-rows: auto auto !important;
  gap: 8px !important;
  overflow: visible !important;
  background: transparent !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-cover {
  border: 1px solid var(--library-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 9%, transparent) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy {
  min-height: 0 !important;
  padding: 0 1px !important;
  gap: 3px !important;
  overflow: visible !important;
  background: transparent !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > strong {
  color: var(--library-ink) !important;
  font-weight: 520 !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > small {
  color: var(--library-muted) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-progress {
  height: 2px !important;
  margin-top: 4px !important;
  background: color-mix(in srgb, var(--library-muted) 18%, transparent) !important;
}

/* Each All-page item is its own quiet Discover-style editorial panel. */
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-open {
  box-sizing: border-box !important;
  padding: 7px 7px 8px !important;
  border: 1px solid var(--library-line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--library-surface) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 28%, transparent),
    0 9px 22px color-mix(in srgb, var(--library-ink) 7%, transparent) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-strip .library-grid-cover {
  border-radius: 8px !important;
  box-shadow: none !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .library-stack-row.collection-item {
  box-sizing: border-box !important;
  padding: 7px 7px 8px !important;
  border: 1px solid var(--library-line) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--library-surface) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, white 28%, transparent),
    0 9px 22px color-mix(in srgb, var(--library-ink) 7%, transparent) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-cover {
  border-radius: 8px !important;
  box-shadow: none !important;
}

html.theme-dark #collectionView#collectionView#collectionView
  .library-content-section:not(.is-isolated) :is(
    .library-book-open,
    .library-stack-row.collection-item
  ),
body.theme-dark #collectionView#collectionView#collectionView
  .library-content-section:not(.is-isolated) :is(
    .library-book-open,
    .library-stack-row.collection-item
  ) {
  border-color: rgba(231, 223, 211, 0.11) !important;
  background: var(--library-surface) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

/* Exact Discover shelf-card parity for individual items in All. */
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-open {
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--library-line) 38%, transparent) !important;
  border-radius: 7px 10px 10px 7px !important;
  grid-template-rows: auto 68px !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #101214 !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 9%, transparent) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-strip .library-grid-cover {
  aspect-ratio: 4 / 5 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 239, 226, 0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy {
  box-sizing: border-box !important;
  min-height: 68px !important;
  padding: 8px 8px 9px !important;
  align-content: start !important;
  gap: 3px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #121416, #0b0d0f) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy > strong {
  color: #f3eee5 !important;
  font: 480 clamp(0.78rem, 2.1vw, 0.92rem)/1.06 var(--ui-font) !important;
  letter-spacing: -0.014em !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy > small {
  color: rgba(223, 215, 203, 0.68) !important;
  font: 560 0.54rem/1.2 var(--ui-font) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card .collection-progress {
  height: 2px !important;
  margin-top: 3px !important;
  background: rgba(240, 233, 221, 0.14) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .library-stack-row.collection-item {
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--library-line) 38%, transparent) !important;
  border-radius: 7px 10px 10px 7px !important;
  overflow: hidden !important;
  background: #101214 !important;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--library-ink) 9%, transparent) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-open {
  grid-template-rows: auto 72px !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #101214 !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-cover {
  aspect-ratio: 1.42 / 1 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(246, 239, 226, 0.07) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy {
  box-sizing: border-box !important;
  min-height: 72px !important;
  padding: 7px 8px 8px !important;
  align-content: start !important;
  gap: 3px !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, #121416, #0b0d0f) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > strong {
  color: #f3eee5 !important;
  font: 500 clamp(0.76rem, 2.05vw, 0.9rem)/1.05 var(--ui-font) !important;
  letter-spacing: -0.012em !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > small {
  color: rgba(223, 215, 203, 0.66) !important;
  font: 540 0.51rem/1.15 var(--ui-font) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-progress {
  height: 2px !important;
  margin-top: 3px !important;
  background: rgba(240, 233, 221, 0.14) !important;
}

html.theme-dark #collectionView#collectionView#collectionView
  .library-content-section:not(.is-isolated) :is(
    .library-book-open,
    .library-stack-row.collection-item
  ),
body.theme-dark #collectionView#collectionView#collectionView
  .library-content-section:not(.is-isolated) :is(
    .library-book-open,
    .library-stack-row.collection-item
  ) {
  border-color: rgba(236, 229, 216, 0.11) !important;
  background: #101214 !important;
  box-shadow: 0 12px 23px rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 620px) {
  #collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
    .library-book-open {
    grid-template-rows: auto 62px !important;
  }

  #collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
    .library-book-card-copy {
    min-height: 62px !important;
    padding: 8px 7px !important;
  }
}

/* Modern app typography for panel content. */
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy > strong,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > strong,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-copy > strong {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.72rem, 1.9vw, 0.86rem) !important;
  font-weight: 650 !important;
  line-height: 1.16 !important;
  letter-spacing: -0.012em !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy > small,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > small,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-copy > small {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.54rem, 1.4vw, 0.64rem) !important;
  font-weight: 540 !important;
  line-height: 1.24 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 620px) {
  #collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
    .library-book-card-copy > strong,
  #collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
    [data-library-section="articles"],
    [data-library-section="papers"]
  ) .collection-copy > strong,
  #collectionView#collectionView#collectionView
    .library-content-section.is-isolated[data-library-section="books"]
    .collection-copy > strong {
    font-size: clamp(0.7rem, 3vw, 0.8rem) !important;
  }
}

/* Preserve descenders inside clamped card titles and their single-line
 * bylines. Both elements may be clipped for truncation, so each needs its
 * own small ink-safe lower inset. */
#collectionView#collectionView#collectionView :is(
  .library-book-card-copy,
  .collection-copy
) > :is(strong, small) {
  box-sizing: content-box !important;
  padding-bottom: 0.12em !important;
}

#collectionView#collectionView#collectionView :is(
  .library-book-card-copy,
  .collection-copy
) > strong {
  padding-bottom: 0.14em !important;
  line-height: 1.24 !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-open {
  grid-template-rows: auto minmax(74px, auto) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy {
  min-height: 74px !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-open,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-open {
  grid-template-rows: auto minmax(76px, auto) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-copy {
  min-height: 76px !important;
}

/* Match Discover's more generous narrow-card title treatment. The existing
 * copy wells already reserve enough height, so this reveals a third line
 * without changing cover geometry or destabilising the shelf rows. */
#collectionView#collectionView#collectionView :is(
  .library-book-card-copy,
  .collection-copy
) > strong {
  -webkit-line-clamp: 3 !important;
}

/* Tileless Library cards — mirror the maintained Discover shelves. Artwork
 * remains the visual object; type, title, source and progress sit openly
 * beneath it instead of being enclosed by a second graphite panel. */
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-open,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .library-stack-row.collection-item,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .library-stack-row.collection-item {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

html.theme-dark #collectionView#collectionView#collectionView
  .library-content-section:not(.is-isolated) :is(
    .library-book-open,
    .library-stack-row.collection-item
  ),
body.theme-dark #collectionView#collectionView#collectionView
  .library-content-section:not(.is-isolated) :is(
    .library-book-open,
    .library-stack-row.collection-item
  ) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-open,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-open,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-open {
  grid-template-rows: auto auto !important;
  gap: 7px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-strip .library-grid-cover,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-cover,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-cover {
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-strip .library-grid-cover,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-cover {
  aspect-ratio: 5 / 8 !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-cover {
  aspect-ratio: 1.42 / 1 !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-copy {
  min-height: 0 !important;
  padding: 0 1px 3px !important;
  align-content: start !important;
  gap: 3px !important;
  overflow: visible !important;
  background: transparent !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy > strong,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > strong,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-copy > strong {
  color: var(--library-ink) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  .library-book-card-copy > small,
#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated):is(
  [data-library-section="articles"],
  [data-library-section="papers"]
) .collection-copy > small,
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-copy > small {
  color: var(--library-muted) !important;
}

#collectionView#collectionView#collectionView .library-content-section:not(.is-isolated)
  :is(.library-book-card .collection-progress, .library-stack-row .collection-progress),
#collectionView#collectionView#collectionView
  .library-content-section.is-isolated[data-library-section="books"]
  .collection-progress {
  height: 2px !important;
  margin-top: 4px !important;
  background: color-mix(in srgb, var(--library-muted) 18%, transparent) !important;
}

/* Book progress belongs to the artwork edge, matching Home's Continue
 * Reading shelf. Article and research progress remains in the copy area. */
#collectionView#collectionView#collectionView .library-book-cover-frame {
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  min-width: 0 !important;
  display: block !important;
}

#collectionView#collectionView#collectionView
  .library-book-cover-frame > :is(.collection-cover, .library-grid-cover) {
  display: block !important;
  width: 100% !important;
}

#collectionView#collectionView#collectionView
  .library-content-section .collection-item
  .library-book-cover-frame > .collection-progress {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 4px !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 0 0 8px 8px !important;
  background: rgba(17, 18, 21, 0.34) !important;
  pointer-events: none !important;
}

#collectionView#collectionView#collectionView
  .library-content-section .collection-item
  .library-book-cover-frame > .collection-progress > span {
  display: block !important;
  height: 100% !important;
  border-radius: 0 !important;
  background: var(--library-accent) !important;
}

/* Keep book jackets vivid across both the shelf and isolated Books view. */
#collectionView :is(
  .library-feature-cover,
  .library-book-strip .library-grid-cover,
  .library-stack-row.is-books .collection-cover
).has-image > img {
  filter: saturate(1.18) contrast(1.04) brightness(1.06) !important;
}

/* Personal collection: one ordered grid in All and Books. The catalogue has
 * its own card classes so horizontal-shelf geometry cannot shrink its covers.
 * Header, search and collection share an edge; artwork leads the page. */
#collectionView.collection-view {
  gap: 8px !important;
}

#collectionView > .collection-header.library-header {
  width: min(920px, calc(100% - 40px)) !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

#collectionView > .collection-header h2 {
  font-size: clamp(3.55rem, 13vw, 5.3rem) !important;
}

#collectionView .library-add-button {
  margin-top: 0 !important;
  align-self: center !important;
}

#collectionView#collectionView > .library-search {
  min-height: 44px !important;
  padding: 0 10px 0 13px !important;
  grid-template-columns: 20px minmax(0, 1fr) 32px !important;
  gap: 9px !important;
  border: 1px solid var(--library-line) !important;
  border-radius: 11px !important;
  background: color-mix(in srgb, var(--library-surface) 65%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#collectionView#collectionView > .library-search:focus-within {
  border-color: var(--library-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--library-accent) 12%, transparent) !important;
}

#collectionView > .library-search input {
  height: 42px !important;
  font-size: 0.94rem !important;
}

#collectionView > .library-search > svg {
  width: 18px !important;
  height: 18px !important;
}

#collectionView > .library-category-row {
  min-height: 44px !important;
}

#collectionView .library-category-chip {
  min-height: 44px !important;
  padding-inline: 10px !important;
  font-size: 0.92rem !important;
}

#collectionView > .library-meta-row {
  min-height: 36px !important;
  margin-top: -4px !important;
  gap: 8px !important;
}

#collectionView > .library-meta-row #collectionHeaderSummary {
  font: 450 0.76rem/1.3 var(--ui-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#collectionView > .library-meta-row .library-sort-control {
  min-height: 36px !important;
}

#collectionView > .library-meta-row .library-sort-control > span {
  display: none !important;
}

#collectionView > .library-meta-row .library-sort-control select {
  max-width: 145px !important;
  font: 450 0.76rem/1.3 var(--ui-font) !important;
}

#collectionView .library-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr));
  align-items: start;
  gap: 30px 24px;
  min-width: 0;
  padding: 2px 0 12px;
}

#collectionView#collectionView .library-catalogue-card.collection-item {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView .library-catalogue-open {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  align-content: start;
  background: transparent;
  color: var(--library-ink);
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

#collectionView .library-catalogue-art {
  position: relative;
  display: block;
  min-width: 0;
  width: 100%;
  aspect-ratio: 2 / 3;
}

#collectionView#collectionView .library-catalogue-cover {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 2 / 3 !important;
  border: 0 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}

/* Every jacket fills one 2:3 frame so rows share a top and bottom edge.
 * Jacket titles sit high, so a wider cover is trimmed at the sides and a
 * taller one at the foot. The frame is reserved before the image loads. */
#collectionView#collectionView .library-catalogue-cover.has-image {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#collectionView#collectionView .library-catalogue-cover.has-image > img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 2 / 3;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 7px !important;
  filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.18)) !important;
}

#collectionView .library-catalogue-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 0 0 7px 7px;
  background: color-mix(in srgb, var(--library-muted) 18%, transparent);
}

#collectionView .library-catalogue-progress > span {
  display: block;
  height: 100%;
  background: var(--library-accent);
}

#collectionView .library-catalogue-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

#collectionView .library-catalogue-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  padding-bottom: 0.14em;
  color: var(--library-ink);
  font: 600 0.94rem/1.3 var(--ui-font);
  letter-spacing: -0.012em;
  white-space: normal;
  overflow-wrap: anywhere;
}

#collectionView .library-catalogue-copy > small {
  overflow: hidden;
  padding-bottom: 0.12em;
  color: var(--library-muted);
  font: 450 0.8rem/1.35 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collectionView .library-catalogue-meta {
  min-height: 24px;
  padding: 3px 30px 0 0;
  color: var(--library-muted);
  font: 450 0.71rem/1.4 var(--ui-font);
}

#collectionView .library-catalogue-meta.is-finished {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--library-accent-strong);
}

#collectionView .library-catalogue-meta > svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#collectionView#collectionView :is(.library-catalogue-info, .library-row-info).collection-menu-toggle {
  position: absolute !important;
  top: auto !important;
  right: -10px !important;
  bottom: -7px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  color: var(--library-muted) !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-shadow: none !important;
  cursor: pointer;
}

#collectionView :is(.library-catalogue-info, .library-row-info)::before,
#collectionView :is(.library-catalogue-info, .library-row-info)::after {
  content: none !important;
}

#collectionView :is(.library-catalogue-info, .library-row-info) > svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

#collectionView :is(.library-catalogue-open, .library-catalogue-info, .library-row-open, .library-row-info):focus-visible {
  outline: 2px solid var(--library-accent) !important;
  outline-offset: 4px !important;
}

/* Touch browsers keep :hover after a tap, which would leave a tapped title
 * red; only a real pointer gets the hover colour. */
@media (hover: hover) and (pointer: fine) {
  #collectionView .library-catalogue-open:hover .library-catalogue-copy > strong,
  #collectionView .library-row-open:hover .library-row-copy > strong,
  #collectionView :is(.library-catalogue-info, .library-row-info):hover {
    color: var(--library-accent-strong) !important;
  }
}

/* Buttons opt out of browser panning app-wide; a Library card is mostly one
 * large button, so a scroll that starts on it must still move the page (or,
 * on a shelf, the rail). */
#collectionView :is(.library-catalogue-open, .library-catalogue-info, .library-row-open, .library-row-info) {
  touch-action: pan-x pan-y !important;
}

/* Covers are part of the card's button, not draggable images: no WebKit
 * image lift or callout, and no text selection on a long press. */
#collectionView :is(.library-catalogue-card, .library-row) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#collectionView :is(.library-catalogue-cover, .library-row-cover) img {
  pointer-events: none;
  -webkit-user-drag: none;
}

#collectionView :is(.library-catalogue-open, .library-catalogue-info, .library-row-open, .library-row-info):is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 620px) {
  #collectionView.collection-view {
    gap: 6px !important;
  }

  #collectionView > .collection-header.library-header {
    width: calc(100% - 36px) !important;
  }

  #collectionView .library-category-chip {
    font-size: 0.86rem !important;
  }

  #collectionView .library-catalogue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 14px;
  }

  #collectionView .library-catalogue-copy > strong {
    font-size: 0.86rem;
    -webkit-line-clamp: 2;
  }

  #collectionView .library-catalogue-grid .library-catalogue-copy > small {
    font-size: 0.76rem;
  }

  /* Three narrow columns: the progress bar carries the percentage. */
  #collectionView .library-catalogue-grid .library-status-percent {
    display: none;
  }

  #collectionView .library-catalogue-grid .library-catalogue-meta {
    padding-right: 24px;
    white-space: nowrap;
  }
}

/* All: one swipeable shelf per kind, built from catalogue cards. Cards share
 * one artwork height and take their width from the artwork, so jackets,
 * generated covers and landscape photos align without letterboxing. Rail
 * bleed and scroll padding come from styles/components/shelves.css. */
/* Artwork height follows the screen width so about two and a half jackets
 * show on any phone: the cut-off card at the edge says the shelf scrolls. */
#collectionView .library-shelf {
  --library-shelf-art-height: clamp(150px, 45vw, 204px);
  display: grid;
  gap: 6px;
  min-width: 0;
  /* The list's own gap separates shelves. */
  margin: 0;
}

#collectionView .library-shelf-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
}

#collectionView .library-shelf-heading > h3 {
  margin: 0;
  color: var(--library-ink);
  font: 650 1.32rem/1.2 var(--ui-font);
  letter-spacing: -0.018em;
}

#collectionView .library-shelf-see-all {
  min-height: 44px;
  margin-right: -8px;
  padding: 0 8px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--library-accent-strong);
  font: 600 0.9rem/1 var(--ui-font);
  cursor: pointer;
}

#collectionView .library-shelf-see-all > svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#collectionView .library-shelf-see-all:focus-visible {
  outline: 2px solid var(--library-accent) !important;
  outline-offset: 2px !important;
}

/* The rail only scrolls sideways; room below keeps the info button inside it
 * so the rail never gains a vertical scroll range of its own. */
#collectionView .library-shelf-rail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 2px 9px;
  overflow-y: hidden;
}

#collectionView#collectionView .library-shelf-rail > .library-catalogue-card.collection-item {
  flex: none;
  width: auto !important;
}

#collectionView .library-shelf-rail .library-catalogue-art {
  width: max-content;
  height: var(--library-shelf-art-height);
  aspect-ratio: auto;
}

#collectionView#collectionView .library-shelf-rail .library-catalogue-cover {
  width: auto !important;
  height: 100% !important;
  aspect-ratio: auto !important;
}

#collectionView#collectionView .library-shelf-rail .library-catalogue-cover.has-image > img {
  width: auto !important;
  min-width: calc(var(--library-shelf-art-height) * 0.72);
  max-width: calc(var(--library-shelf-art-height) * 1.5);
  height: var(--library-shelf-art-height) !important;
  aspect-ratio: auto;
  object-fit: cover !important;
  /* Jacket titles sit high; trim a too-narrow cover from the bottom. */
  object-position: center top !important;
}

/* Generated covers have no intrinsic size: a jacket for books, a landscape
 * panel for everything else. */
#collectionView#collectionView .library-shelf-rail .library-catalogue-cover.has-title-fallback {
  width: calc(var(--library-shelf-art-height) * 1.43) !important;
}

#collectionView#collectionView .library-shelf-rail.is-books .library-catalogue-cover.has-title-fallback {
  width: calc(var(--library-shelf-art-height) * 0.72) !important;
}

/* The shelf panel is short; the full title is repeated beneath it. Three ids
 * outrank the shared research-cover title rule in editorial-fallbacks.css. */
#collectionView#collectionView#collectionView .library-shelf-rail .library-catalogue-cover.has-title-fallback > .editorial-fallback-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 1 !important;
}

/* Text wraps to the artwork's width instead of widening the card. */
#collectionView .library-shelf-rail .library-catalogue-copy {
  width: 0;
  min-width: 100%;
}

#collectionView .library-shelf-rail .library-catalogue-copy > strong {
  -webkit-line-clamp: 2;
}

#collectionView .library-shelf-rail .library-catalogue-meta {
  padding-right: 26px;
  white-space: nowrap;
}

/* Short Reads and Research rows. A fixed 4:3 thumbnail keeps every title on
 * one edge; the status line and info button match the cards. */
#collectionView .library-row-list {
  display: grid;
  min-width: 0;
}

#collectionView#collectionView .library-row.collection-item {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--library-line) !important;
  border-radius: 0 !important;
  display: block !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView .library-row-open {
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 14px 40px 14px 0;
  border: 0;
  border-radius: 8px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  background: transparent;
  color: var(--library-ink);
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

#collectionView .library-row-art {
  position: relative;
  display: block;
  width: 96px;
  height: 72px;
}

#collectionView#collectionView .library-row-cover {
  box-sizing: border-box !important;
  width: 96px !important;
  height: 72px !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

#collectionView#collectionView .library-row-cover.has-image {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#collectionView#collectionView .library-row-cover.has-image > img {
  width: 96px !important;
  height: 72px !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 6px !important;
}

/* A thumbnail is too small for a generated cover's motif; keep its label and
 * title. Three ids outrank the shared rules in editorial-fallbacks.css. */
#collectionView#collectionView#collectionView .library-row-cover.has-title-fallback {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
}

#collectionView#collectionView#collectionView .library-row-cover.has-title-fallback > .editorial-fallback-motif {
  display: none !important;
}

#collectionView#collectionView#collectionView .library-row-cover.has-title-fallback > .editorial-fallback-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#collectionView .library-row-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#collectionView .library-row-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  padding-bottom: 0.1em;
  color: var(--library-ink);
  font: 600 0.98rem/1.3 var(--ui-font);
  letter-spacing: -0.012em;
  overflow-wrap: anywhere;
}

#collectionView .library-row-copy > small {
  overflow: hidden;
  padding-bottom: 0.1em;
  color: var(--library-muted);
  font: 450 0.8rem/1.35 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#collectionView .library-row-copy > .library-catalogue-meta {
  min-height: 0;
  padding: 1px 0 0;
}

#collectionView#collectionView .library-row-info.collection-menu-toggle {
  top: 50% !important;
  right: -12px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

/* Truncated catalogue text keeps the entire baseline and lower glyph ink. */
#collectionView#collectionView#collectionView :is(
  .library-book-card-copy,
  .collection-copy,
  .library-catalogue-copy
) > :is(strong, small),
#collectionView > .library-meta-row #collectionHeaderSummary {
  line-height: 1.35 !important;
}

#collectionView > .collection-header h2 {
  padding-bottom: 0.14em !important;
}

/* Twilight catalogue surfaces; book cover artwork retains its own colours. */
html.theme-twilight body.theme-twilight #collectionView.collection-view {
  --library-page: var(--twilight-chrome);
  --library-page-deep: var(--twilight-paper);
  --library-ink: var(--twilight-ink);
  --library-muted: var(--twilight-muted);
  --library-soft: var(--twilight-muted);
  --library-line: var(--twilight-line);
  --library-line-strong: var(--twilight-line);
  --library-accent: var(--twilight-accent);
  --library-accent-strong: var(--twilight-accent);
  --library-gold: var(--twilight-lavender);
  --library-menu: var(--twilight-panel);
}
html.theme-twilight body.theme-twilight:has(#collectionView:not([hidden])) #inputPanel.is-open.is-menu-subview {
  background: var(--twilight-chrome) !important;
}


/*
 * Current Discover ownership
 * --------------------------
 * Top-level Browse destinations only: For You, Books, Research, Short Reads,
 * the nested Cabinet of Curiosities, search, format controls, live-source
 * sheets, and item previews.
 *
 * Frozen boundary: Topics, topic dossiers, and the Atlas surface remain in
 * styles.css. Do not add their selectors here; those surfaces are expected to
 * be replaced or substantially redesigned.
 */

/* Discover · Browse: panel-free catalogue in the Home/Library editorial language. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) {
  --discover-page: #f4efe6;
  --discover-sheet: #f4efe6;
  --discover-surface: #faf6ef;
  --discover-surface-soft: #ece5da;
  --discover-text: #292620;
  --discover-muted: #777066;
  --discover-soft: #958c80;
  --discover-line: rgba(64, 55, 43, 0.13);
  --discover-coral: #c65349;
  --discover-coral-strong: #ad4139;
  --discover-amber: #bc8038;
  --discover-green: #55796f;
  background:
    radial-gradient(ellipse 72% 28% at 96% 1%, rgba(215, 151, 72, 0.2), transparent 68%),
    radial-gradient(circle at 91% 15%, rgba(225, 171, 94, 0.08) 0 1px, transparent 2px),
    linear-gradient(155deg, #f8f3eb 0%, #f4efe6 48%, #efe9df 100%) !important;
  color: var(--discover-text);
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-ambient-canvas {
  opacity: 0.1 !important;
  filter: sepia(0.5) saturate(0.72) brightness(1.08) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-sheet {
  background: transparent !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header {
  position: relative !important;
  top: auto !important;
  z-index: 4 !important;
  width: min(1160px, 100%) !important;
  min-height: clamp(118px, 18vh, 166px) !important;
  padding:
    max(22px, env(safe-area-inset-top))
    max(22px, env(safe-area-inset-right))
    14px
    max(22px, env(safe-area-inset-left)) !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy {
  grid-column: 1 !important;
  min-width: 0;
  display: grid !important;
  justify-items: start !important;
  gap: 7px !important;
  text-align: left !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy h2 {
  color: var(--discover-text) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(3.2rem, 9vw, 5rem) !important;
  font-weight: 470 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.045em !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy h2 .brand-red-letter {
  color: inherit !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy p {
  max-width: 48ch;
  color: var(--discover-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.86rem, 2.2vw, 1rem) !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-search-toggle {
  grid-column: 2 !important;
  align-self: end !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-coral) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-search-toggle:is(:hover, :focus-visible) {
  outline: 1px solid color-mix(in srgb, var(--discover-coral) 45%, transparent) !important;
  outline-offset: -5px !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs {
  position: sticky !important;
  top: 0 !important;
  z-index: 12 !important;
  width: min(1160px, calc(100% - max(38px, calc(env(safe-area-inset-left) + env(safe-area-inset-right))))) !important;
  min-height: 47px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--discover-page) 95%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs button {
  position: relative;
  min-height: 46px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs button::after {
  content: "";
  position: absolute;
  right: 20%;
  bottom: -1px;
  left: 20%;
  height: 2px;
  background: transparent;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs button.is-active {
  background: transparent !important;
  color: var(--discover-coral-strong) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs button.is-active::after {
  background: var(--discover-coral) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-search-bar {
  width: min(1160px, calc(100% - 40px)) !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-search-bar > div,
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-search {
  min-height: 50px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-search-bar > div:focus-within,
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-search:focus-within {
  border-bottom-color: color-mix(in srgb, var(--discover-coral) 70%, transparent) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-search-bar input,
  .discover-gutenberg-search input
) {
  color: var(--discover-text) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.9rem, 2.3vw, 1rem) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-search-bar input,
  .discover-gutenberg-search input
)::placeholder {
  color: var(--discover-soft) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-content {
  width: min(1160px, 100%) !important;
  max-width: 1160px !important;
  padding:
    0
    max(20px, env(safe-area-inset-right))
    max(106px, calc(env(safe-area-inset-bottom) + 86px))
    max(20px, env(safe-area-inset-left)) !important;
  gap: 22px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-gutenberg-browser,
  .discover-browse-catalogue,
  .discover-catalogue-shell
) {
  gap: 14px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch {
  width: 100% !important;
  min-height: 45px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button {
  position: relative;
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-muted) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.66rem !important;
  font-weight: 720 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button::after {
  content: "";
  position: absolute;
  right: 24%;
  bottom: -1px;
  left: 24%;
  height: 2px;
  background: transparent;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button.is-active {
  background: transparent !important;
  color: var(--discover-coral-strong) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button.is-active::after {
  background: var(--discover-coral) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head {
  min-height: 52px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head.is-source-heading {
  min-height: 25px !important;
  padding: 0 1px;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head h1 {
  color: var(--discover-text) !important;
  font-size: clamp(2.45rem, 7vw, 4.1rem) !important;
  font-weight: 490 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head :is(p, i) {
  color: var(--discover-coral) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head span {
  color: var(--discover-muted) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head {
  min-height: 58px !important;
  padding-top: 5px;
  align-items: end !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head h2 {
  color: var(--discover-text) !important;
  font-size: clamp(1.72rem, 5vw, 2.6rem) !important;
  font-weight: 510 !important;
  line-height: 1 !important;
  white-space: normal !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head :is(p, span) {
  color: var(--discover-muted) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head p {
  color: var(--discover-coral) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-gutenberg-results-head > button,
  .discover-research-sort
) {
  min-height: 36px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-muted) !important;
  box-shadow: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-sort select {
  height: 36px !important;
  padding-left: 0 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail {
  gap: 15px !important;
  padding-bottom: 5px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button {
  min-height: 32px !important;
  padding: 0 1px !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-muted) !important;
  font-size: 0.62rem !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button:is(
  .is-active,
  .discover-live-source-menu
) {
  border-bottom-color: color-mix(in srgb, var(--discover-coral) 58%, transparent) !important;
  background: transparent !important;
  color: var(--discover-text) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-grid,
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 25px 16px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book {
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  align-content: start !important;
  gap: 6px !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-main {
  min-height: 0 !important;
  padding: 0 !important;
  gap: 9px !important;
  align-content: start !important;
  background: transparent !important;
  text-align: left !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-gutenberg-cover,
  .discover-gutenberg-cover img,
  .discover-gutenberg-loading i
) {
  width: min(128px, 88%) !important;
  height: auto !important;
  aspect-ratio: 0.69 !important;
  border-radius: 5px 9px 9px 5px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-cover {
  box-shadow: 0 12px 25px rgba(34, 28, 20, 0.15) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy {
  gap: 4px !important;
  text-align: left !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > strong {
  display: -webkit-box;
  overflow: visible;
  color: var(--discover-text) !important;
  font-size: clamp(0.92rem, 3.6vw, 1.08rem) !important;
  line-height: 1.08 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > small {
  overflow: hidden;
  color: var(--discover-muted) !important;
  font-size: 0.59rem !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-add {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 34px !important;
  margin-top: 2px;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  justify-content: flex-start !important;
  background: transparent !important;
  color: var(--discover-coral) !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-add.is-in-library {
  color: var(--discover-green) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-browse-grid {
  gap: 0 !important;
  border-top: 1px solid var(--discover-line);
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-browse-card {
  min-height: 126px !important;
  padding: 14px 34px 14px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  grid-template-columns: 76px minmax(0, 1fr) !important;
  gap: 15px !important;
  background: transparent !important;
  color: var(--discover-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-browse-art,
  .discover-browse-art img
) {
  width: 76px !important;
  height: 98px !important;
  border-radius: 4px 8px 8px 4px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-browse-copy {
  gap: 4px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-browse-copy > strong {
  color: var(--discover-text) !important;
  font-size: clamp(1.05rem, 3.7vw, 1.28rem) !important;
  line-height: 1.08 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-browse-copy :is(small, p) {
  color: var(--discover-muted) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-browse-card > .discover-card-arrow {
  right: 7px !important;
  color: var(--discover-coral) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-empty-state,
  .discover-gutenberg-notice,
  .discover-live-source-status
) {
  border: 0 !important;
  border-top: 1px solid var(--discover-line) !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-muted) !important;
  box-shadow: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-more {
  width: auto !important;
  min-height: 40px !important;
  margin-top: 7px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--discover-coral) 55%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-coral-strong) !important;
  box-shadow: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-credit {
  padding-top: 6px;
  color: var(--discover-soft) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading > span {
  min-height: 250px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-directory-sheet {
  border-color: var(--discover-line) !important;
  background:
    radial-gradient(circle at 92% -8%, rgba(213, 148, 68, 0.12), transparent 43%),
    #f8f3ea !important;
  box-shadow: 0 28px 70px rgba(42, 32, 20, 0.22) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]),
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) {
  --discover-page: #101216;
  --discover-sheet: #101216;
  --discover-surface: #1b1d21;
  --discover-surface-soft: #24262b;
  --discover-text: #f0e9df;
  --discover-muted: #a49d93;
  --discover-soft: #76736f;
  --discover-line: rgba(239, 226, 206, 0.105);
  --discover-coral: #df695d;
  --discover-coral-strong: #eb877a;
  --discover-amber: #daa04f;
  --discover-green: #82a69a;
  background:
    radial-gradient(ellipse 76% 29% at 98% 0%, rgba(210, 137, 54, 0.17), transparent 67%),
    radial-gradient(circle at 91% 15%, rgba(244, 184, 94, 0.12) 0 1px, transparent 2px),
    linear-gradient(155deg, #13151a 0%, #101216 50%, #0b0d10 100%) !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs {
  background: color-mix(in srgb, var(--discover-page) 94%, transparent) !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-tabs,
  .discover-gutenberg-search,
  .discover-catalogue-shell > .discover-format-switch,
  .discover-gutenberg-results-head > button,
  .discover-gutenberg-chip-rail button,
  .discover-gutenberg-book,
  .discover-gutenberg-add,
  .discover-browse-card
),
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-tabs,
  .discover-gutenberg-search,
  .discover-catalogue-shell > .discover-format-switch,
  .discover-gutenberg-results-head > button,
  .discover-gutenberg-chip-rail button,
  .discover-gutenberg-book,
  .discover-gutenberg-add,
  .discover-browse-card
) {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-directory-sheet,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-directory-sheet {
  border-color: var(--discover-line) !important;
  background:
    radial-gradient(circle at 92% -8%, rgba(224, 158, 72, 0.13), transparent 43%),
    #1b1d21 !important;
  box-shadow: 0 32px 78px rgba(0, 0, 0, 0.5) !important;
}

@media (min-width: 720px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-grid,
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 32px 22px !important;
  }
}

@media (max-width: 520px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header {
    min-height: 116px !important;
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy h2 {
    font-size: clamp(3.05rem, 14vw, 4rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy p {
    max-width: 31ch;
    font-size: 0.84rem !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs {
    width: calc(100% - 36px) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-content {
    padding-right: max(18px, env(safe-area-inset-right)) !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head {
    gap: 10px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head h2 {
    font-size: clamp(1.55rem, 7.2vw, 2rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
    .discover-gutenberg-cover,
    .discover-gutenberg-cover img,
    .discover-gutenberg-loading i
  ) {
    width: min(118px, 90%) !important;
  }
}

/* Discover Browse density pass: tighter rhythm and cover-first shelves. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header {
  min-height: clamp(96px, 14vh, 128px) !important;
  padding-top: max(14px, env(safe-area-inset-top)) !important;
  padding-bottom: 7px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy {
  gap: 4px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy h2 {
  font-size: clamp(2.85rem, 8vw, 4.25rem) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs {
  min-height: 42px !important;
  margin-bottom: 7px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs button {
  min-height: 41px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-content {
  gap: 14px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-gutenberg-browser,
  .discover-browse-catalogue,
  .discover-catalogue-shell
) {
  gap: 8px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-search-bar > div,
  .discover-gutenberg-search
) {
  min-height: 44px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-search-bar input,
  .discover-gutenberg-search input
) {
  height: 42px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch {
  min-height: 40px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button {
  min-height: 39px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head {
  min-height: 43px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head.is-source-heading {
  min-height: 20px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head {
  min-height: 48px !important;
  padding-top: 1px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail {
  gap: 12px !important;
  padding-bottom: 2px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button {
  min-height: 29px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-grid,
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading {
  gap: 20px 12px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book {
  gap: 3px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-main {
  gap: 7px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-cover {
  width: min(122px, 92%) !important;
  height: auto !important;
  aspect-ratio: 0.69 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-cover.has-image img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: inherit !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy {
  gap: 2px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-add {
  min-height: 30px !important;
  margin-top: 0 !important;
}

@media (min-width: 390px) and (max-width: 719px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-grid,
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px 12px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-cover {
    width: min(104px, 96%) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > strong {
    font-size: clamp(0.8rem, 3.25vw, 0.94rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > small {
    font-size: 0.54rem !important;
  }
}

@media (max-width: 520px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header {
    min-height: 94px !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    padding-bottom: 5px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy h2 {
    font-size: clamp(2.75rem, 12vw, 3.55rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy p {
    font-size: 0.8rem !important;
  }
}

/* Discover book preview: one quiet canvas, one cover, and only decision-useful detail. */
.discover-preview-panel.is-book-preview-open {
  --discover-page: #f4efe6;
  --discover-sheet: #f4efe6;
  --discover-surface: #faf6ef;
  --discover-surface-soft: #ece5da;
  --discover-text: #292620;
  --discover-muted: #777066;
  --discover-soft: #958c80;
  --discover-line: rgba(64, 55, 43, 0.13);
  --discover-coral: #c65349;
  --discover-coral-strong: #ad4139;
  --discover-amber: #bc8038;
  inset: 0;
  padding: 0 !important;
  place-items: stretch !important;
  background:
    radial-gradient(ellipse 72% 28% at 96% 1%, rgba(215, 151, 72, 0.2), transparent 68%),
    linear-gradient(155deg, #f8f3eb 0%, #f4efe6 48%, #efe9df 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-preview-panel.is-book-preview-open .discover-preview-sheet {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.discover-preview-panel.is-book-preview-open .discover-preview-header {
  width: min(900px, 100%);
  min-height: 64px !important;
  margin: 0 auto;
  padding:
    max(10px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    6px
    max(18px, env(safe-area-inset-left)) !important;
  background: color-mix(in srgb, var(--discover-page) 94%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.discover-preview-panel.is-book-preview-open .discover-preview-header > p {
  color: var(--discover-coral) !important;
}

.discover-preview-panel.is-book-preview-open :is(.discover-preview-back, .discover-preview-save) {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-preview-panel.is-book-preview-open :is(.discover-preview-back, .discover-preview-save):focus-visible {
  outline: 1px solid color-mix(in srgb, var(--discover-coral) 48%, transparent) !important;
  outline-offset: -4px !important;
}

.discover-preview-panel.is-book-preview-open .discover-preview-save.is-saved {
  background: transparent !important;
  color: var(--discover-coral) !important;
}

.discover-preview-content.is-book-preview {
  width: min(900px, 100%);
  margin: 0 auto;
  padding:
    8px
    max(24px, env(safe-area-inset-right))
    max(42px, calc(env(safe-area-inset-bottom) + 28px))
    max(24px, env(safe-area-inset-left)) !important;
  gap: 18px !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-hero {
  overflow: visible !important;
  padding: 14px 0 24px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  grid-template-columns: 174px minmax(0, 1fr) !important;
  gap: clamp(26px, 5vw, 48px) !important;
  align-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-stage {
  min-height: 0 !important;
  overflow: visible !important;
  place-items: center !important;
  background: transparent !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-stage::before,
.discover-preview-content.is-book-preview .discover-preview-book-orbit,
.discover-preview-content.is-book-preview .discover-preview-book-source,
.discover-preview-content.is-book-preview .discover-preview-book-facts,
.discover-preview-content.is-book-preview .discover-preview-book-genres,
.discover-preview-content.is-book-preview .discover-preview-book-topics,
.discover-preview-content.is-book-preview .discover-preview-feedback,
.discover-preview-content.is-book-preview .discover-preview-note {
  display: none !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-cover {
  width: 174px !important;
  height: auto !important;
  aspect-ratio: 0.67 !important;
  border-radius: 5px 10px 10px 5px !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: 0 18px 38px rgba(30, 25, 19, 0.2) !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-copy {
  min-width: 0;
  padding: 0 !important;
  justify-content: center !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-copy > p {
  margin: 0 0 9px !important;
  color: var(--discover-coral) !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-copy h2 {
  color: var(--discover-text) !important;
  font-size: clamp(2.25rem, 6vw, 4.2rem) !important;
  font-weight: 490 !important;
  line-height: 0.94 !important;
  letter-spacing: -0.05em !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-author {
  margin-top: 13px !important;
  color: var(--discover-muted) !important;
  font-size: clamp(0.9rem, 2.2vw, 1.08rem) !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-meta {
  margin-top: 7px;
  color: var(--discover-soft);
  font: 650 0.61rem/1.35 var(--ui-font);
}

.discover-preview-content.is-book-preview .discover-preview-book-overview {
  padding: 9px 0 4px !important;
  grid-template-columns: 112px minmax(0, 1fr) !important;
  gap: 12px 22px !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-overview > p {
  margin-top: 4px !important;
  color: var(--discover-coral) !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-overview > div {
  color: var(--discover-text) !important;
  font-size: clamp(0.92rem, 2.2vw, 1.02rem) !important;
  line-height: 1.48 !important;
}

.discover-preview-content.is-book-preview .discover-preview-book-overview > span {
  display: none !important;
}

.discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions {
  position: static !important;
  bottom: auto !important;
  z-index: auto !important;
  margin: 0 !important;
  padding: 13px 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--discover-line) !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr) !important;
  gap: 12px !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions button {
  min-height: 48px !important;
  padding: 0 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  justify-content: flex-start !important;
  background: transparent !important;
  color: var(--discover-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions button.is-primary {
  gap: 12px !important;
}

.discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions button.is-primary i {
  position: relative;
  order: -1;
  width: 44px !important;
  min-width: 44px;
  height: 44px !important;
  border: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center;
  background: var(--discover-coral) !important;
  animation: none !important;
}

.discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions button.is-primary i::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #fff8ef;
}

.discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions button.is-primary.is-loading i::after {
  width: 12px;
  height: 12px;
  margin: 0;
  border: 2px solid rgba(255, 248, 239, 0.38);
  border-top-color: #fff8ef;
  border-radius: 50%;
  animation: discover-gutenberg-download-spin 0.75s linear infinite;
}

.discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions button:not(.is-primary) {
  border-left: 1px solid var(--discover-line) !important;
  padding-left: 18px !important;
  color: var(--discover-muted) !important;
}

.discover-preview-content.is-book-preview .discover-preview-source-details {
  border-top: 0 !important;
  border-bottom-color: var(--discover-line) !important;
}

.discover-preview-content.is-book-preview .discover-preview-source-details summary {
  padding: 12px 1px !important;
  color: var(--discover-muted) !important;
  font-size: 0.61rem !important;
}

html.theme-dark .discover-preview-panel.is-book-preview-open,
body.theme-dark .discover-preview-panel.is-book-preview-open {
  --discover-page: #101216;
  --discover-sheet: #101216;
  --discover-surface: #1b1d21;
  --discover-surface-soft: #24262b;
  --discover-text: #f0e9df;
  --discover-muted: #a49d93;
  --discover-soft: #76736f;
  --discover-line: rgba(239, 226, 206, 0.105);
  --discover-coral: #df695d;
  --discover-coral-strong: #eb877a;
  --discover-amber: #daa04f;
  background:
    radial-gradient(ellipse 76% 29% at 98% 0%, rgba(210, 137, 54, 0.17), transparent 67%),
    linear-gradient(155deg, #13151a 0%, #101216 50%, #0b0d10 100%) !important;
}

html.theme-dark .discover-preview-panel.is-book-preview-open .discover-preview-header,
body.theme-dark .discover-preview-panel.is-book-preview-open .discover-preview-header {
  background: color-mix(in srgb, var(--discover-page) 94%, transparent) !important;
}

@media (max-width: 620px) {
  .discover-preview-content.is-book-preview {
    padding-top: 2px !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    gap: 15px !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-hero {
    padding: 9px 0 20px !important;
    grid-template-columns: 122px minmax(0, 1fr) !important;
    gap: 20px !important;
    align-items: center !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-stage {
    min-height: 0 !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-cover {
    width: 122px !important;
    height: auto !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-copy h2 {
    font-size: clamp(1.75rem, 8.5vw, 2.55rem) !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-author {
    margin-top: 9px !important;
    font-size: 0.82rem !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-meta {
    margin-top: 5px;
    font-size: 0.56rem;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-overview {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-overview > p {
    margin: 0 !important;
  }
}

/* Books: keep source artwork lively against the graphite catalogue surface. */
#discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) :is(
  .discover-books-hero-cover,
  .discover-books-collection-cover,
  .discover-books-shelf-cover,
  .discover-gutenberg-cover
).has-image > img,
#discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active)
  .discover-preview-panel.is-discover-books-detail
  .discover-editorial-preview-hero.is-books
  .discover-editorial-preview-cover > img,
#discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active)
  .discover-book-cover-flight > img {
  filter: saturate(1.18) contrast(1.04) brightness(1.06);
}

/* Shared card-title descender safety for the maintained Discover formats. */
#discoverPanel :is(
  .discover-gutenberg-book-copy,
  .discover-browse-copy,
  .discover-for-you-rabbit-card-copy,
  .discover-for-you-shelf-copy,
  .discover-books-shelf-copy,
  .discover-article-row-copy,
  .discover-research-suggested-copy,
  .discover-curiosity-route-copy,
  .discover-originals-short-copy,
  .discover-originals-shelf-copy,
  .discover-oddity-card-copy
) > strong {
  box-sizing: content-box !important;
  padding-bottom: 0.14em !important;
  line-height: 1.2 !important;
}

/* The remaining editorial formats use the same clipped-title construction,
 * including larger feature cards and the research result panels. Keep their
 * established line-height while extending only the lower ink boundary. */
#discoverPanel :is(
  .discover-for-you-feature-copy,
  .discover-for-you-detour-copy,
  .discover-books-hero-copy,
  .discover-originals-feature-copy,
  .discover-oddities-feature-copy
) > strong,
#discoverPanel :is(
  .discover-for-you-shelf-card,
  .discover-research-shelf-card,
  .discover-originals-room-card
) > strong,
#discoverPanel .discover-research-search-result > h3 {
  box-sizing: content-box !important;
  padding-bottom: 0.14em !important;
}

#discoverPanel .discover-books-shelf-card {
  grid-template-rows: auto minmax(66px, auto) !important;
}

#discoverPanel .discover-books-shelf-copy {
  min-height: 66px !important;
}

#discoverPanel .discover-for-you-shelf-card {
  grid-template-rows: auto minmax(76px, auto) !important;
}

#discoverPanel .discover-for-you-shelf-copy {
  min-height: 76px !important;
}

/* Research destination: visual browse and precise scholarly search. */
.discover-panel .is-research-editorial .discover-research-mode-shell {
  display: grid;
  padding-top: 2px;
}

.discover-research-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--discover-surface-soft);
}

.discover-research-mode-switch > button {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--discover-muted);
  font: 650 0.74rem/1 var(--ui-font);
  box-shadow: none;
  transform: none !important;
}

.discover-research-mode-switch > button.is-active {
  background: var(--discover-surface);
  color: var(--discover-text);
  box-shadow: 0 1px 4px rgba(35, 28, 22, 0.09);
}

.discover-research-mode-switch > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--research-accent) 58%, transparent);
  outline-offset: 1px;
}

.discover-research-source-picker {
  display: grid;
  gap: 8px;
}

.discover-research-source-disclosure {
  width: 100%;
  min-height: 48px;
  padding: 7px 11px;
  border: 1px solid var(--discover-line);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 9px;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.discover-research-source-disclosure > span:first-child {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--research-accent) 10%, var(--discover-surface-soft));
  color: var(--research-accent);
}

.discover-research-source-disclosure > span:first-child svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
}

.discover-research-source-disclosure > span:nth-child(2) {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.discover-research-source-disclosure strong {
  font: 680 0.72rem/1 var(--ui-font);
}

.discover-research-source-disclosure small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 560 0.64rem/1 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-research-source-disclosure > i {
  color: var(--discover-muted);
  font: 600 0.72rem/1 var(--ui-font);
  text-align: center;
  transition: transform 150ms ease;
}

.discover-research-source-picker.is-open .discover-research-source-disclosure > i {
  transform: rotate(180deg);
}

.discover-research-source-disclosure:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--research-accent) 58%, transparent);
  outline-offset: 2px;
}

.discover-research-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.discover-research-source-grid[hidden] {
  display: none !important;
}

.discover-research-source-grid > button {
  position: relative;
  min-width: 0;
  min-height: 52px;
  padding: 9px 29px 9px 10px;
  border: 1px solid var(--discover-line);
  border-radius: 15px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  overflow: hidden;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.discover-research-source-grid > button > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--discover-surface-soft);
  color: var(--discover-muted);
}

.discover-research-source-grid > button > span svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
}

.discover-research-source-grid > button strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font: 680 0.72rem/1.1 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-research-source-grid > button > i {
  position: absolute;
  top: 50%;
  right: 11px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--discover-line);
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
}

.discover-research-source-grid > button.is-active {
  border-color: color-mix(in srgb, var(--research-accent) 58%, var(--discover-line));
  background: color-mix(in srgb, var(--research-accent) 7%, var(--discover-surface));
  color: var(--research-accent);
}

.discover-research-source-grid > button.is-active > span {
  background: color-mix(in srgb, var(--research-accent) 13%, var(--discover-surface));
  color: var(--research-accent);
}

.discover-research-source-grid > button.is-active > i {
  border-color: var(--research-accent);
  background: var(--research-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--research-accent) 12%, transparent);
}

.discover-research-source-grid > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--research-accent) 58%, transparent);
  outline-offset: 2px;
}

.discover-research-search-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.discover-research-search-toolbar :is(.discover-research-sort, .discover-research-filter-control, .discover-research-save-search) {
  min-height: 38px;
  margin: 0;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  background: var(--discover-surface);
  color: var(--discover-muted);
  box-shadow: none;
  transform: none !important;
}

.discover-research-search-toolbar .discover-research-sort {
  margin-left: auto;
  padding: 0 11px;
}

.discover-research-search-toolbar .discover-research-sort select {
  color: inherit !important;
}

.discover-research-search-toolbar .discover-research-filter-control,
.discover-research-save-search {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  font: 630 0.68rem/1 var(--ui-font);
}

.discover-research-search-toolbar svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
}

.discover-research-save-search.is-saved {
  border-color: color-mix(in srgb, var(--research-accent) 48%, var(--discover-line));
  background: color-mix(in srgb, var(--research-accent) 9%, var(--discover-surface));
  color: var(--research-accent);
}

.discover-research-save-search:disabled {
  opacity: 0.46;
  cursor: default;
}

.discover-research-search-start {
  display: grid;
  gap: 16px;
  padding-top: 3px;
}

.discover-research-search-start > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.discover-research-search-start > div:first-child > p,
.discover-research-saved-searches > p {
  margin: 0;
  color: var(--research-accent);
  font: 740 0.58rem/1 var(--ui-font);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.discover-research-search-start h2 {
  max-width: 22ch;
  margin: 0;
  color: var(--discover-text);
  font: 480 clamp(1.45rem, 4.5vw, 2rem)/1.02 var(--ui-font);
  letter-spacing: -0.035em;
}

.discover-research-search-start-head > button {
  min-height: 34px;
  padding: 0 4px 0 10px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--research-accent);
  font: 650 0.66rem/1 var(--ui-font);
  box-shadow: none;
  transform: none !important;
}

.discover-research-search-start-head > button i {
  font: 500 0.85rem/1 var(--ui-font);
}

.discover-research-search-start-head > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--research-accent) 58%, transparent);
  outline-offset: 2px;
}

.discover-research-search-start > div:first-child > span {
  color: var(--discover-muted);
  font: 470 0.78rem/1.42 var(--ui-font);
}

.discover-research-search-start > nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.discover-research-search-start > nav > button {
  position: relative;
  min-height: 82px;
  padding: 13px 34px 12px 13px;
  border: 1px solid var(--discover-line);
  border-radius: 15px;
  display: grid;
  align-content: center;
  gap: 5px;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.discover-research-search-start > nav > button strong {
  font: 660 0.73rem/1.2 var(--ui-font);
}

.discover-research-search-start > nav > button small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 510 0.61rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-research-search-start > nav > button i {
  position: absolute;
  top: 50%;
  right: 13px;
  color: var(--research-accent);
  font: 500 0.9rem/1 var(--ui-font);
  transform: translateY(-50%);
}

.discover-research-saved-searches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.discover-research-saved-searches > p {
  width: 100%;
}

.discover-research-saved-searches > button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--research-accent) 34%, var(--discover-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--research-accent) 6%, var(--discover-surface));
  color: var(--research-accent);
  font: 610 0.64rem/1 var(--ui-font);
  box-shadow: none;
  transform: none !important;
}

.discover-research-search-start > aside {
  padding: 13px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--research-accent) 7%, var(--discover-surface));
  color: var(--discover-muted);
  font: 470 0.72rem/1.45 var(--ui-font);
}

.discover-research-search-results {
  display: grid;
  gap: 7px;
}

.discover-research-search-results > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.discover-research-search-results > header > div {
  display: grid;
  gap: 4px;
}

.discover-research-search-results > header p {
  margin: 0;
  color: var(--research-accent);
  font: 740 0.58rem/1 var(--ui-font);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.discover-research-search-results > header h2 {
  margin: 0;
  color: var(--discover-text);
  font: 480 clamp(1.4rem, 4vw, 1.8rem)/1 var(--ui-font);
  letter-spacing: -0.03em;
}

.discover-research-search-results > header > span {
  max-width: 34ch;
  color: var(--discover-muted);
  font: 520 0.64rem/1.35 var(--ui-font);
  text-align: right;
}

.discover-research-search-results > header .discover-research-sort {
  flex: 0 0 auto;
  align-self: end;
  margin-left: auto !important;
}

.discover-research-search-results > header .discover-research-sort select {
  text-align: right;
  text-align-last: right;
}

.discover-research-search-results > div:last-of-type {
  display: grid;
  gap: 8px;
}

.discover-research-search-result {
  padding: 13px 14px;
  border: 1px solid var(--discover-line);
  border-radius: 15px;
  display: grid;
  gap: 7px;
  background: var(--discover-surface);
  box-shadow: none;
}

.discover-research-search-result > header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.discover-research-search-result > header > span:first-child {
  padding: 0;
  background: transparent;
  color: var(--research-accent);
  font: 730 0.55rem/1 var(--ui-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.discover-research-search-citation-count {
  color: var(--discover-muted);
  font: 620 0.6rem/1 var(--ui-font);
}

.discover-research-search-citation-count::before {
  margin-right: 8px;
  color: var(--discover-line);
  content: "•";
}

.discover-research-search-result > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 7px 12px;
}

.discover-research-search-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.discover-research-search-badges .research-access-badge {
  min-height: 20px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: var(--discover-surface-soft);
  color: var(--discover-green);
  font: 690 0.5rem/1 var(--ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.discover-research-search-result h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--discover-text);
  font: 500 clamp(1rem, 2.8vw, 1.18rem)/1.16 var(--ui-font);
  letter-spacing: -0.018em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-research-search-citation,
.discover-research-search-summary {
  margin: 0;
}

.discover-research-search-citation {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-muted);
  font: 540 0.65rem/1.35 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-research-search-summary {
  display: -webkit-box;
  overflow: hidden;
  color: color-mix(in srgb, var(--discover-text) 77%, var(--discover-muted));
  font: 470 0.72rem/1.4 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-research-search-result > footer > button {
  width: max-content;
  min-height: 36px;
  padding: 0 3px 0 8px;
  border: 0;
  background: transparent;
  color: var(--discover-coral-strong);
  font: 650 0.68rem/1 var(--ui-font);
  box-shadow: none;
  transform: none !important;
}

.discover-research-search-result > footer > button i {
  margin-left: 5px;
  font-style: normal;
}

html.theme-dark .discover-research-mode-switch,
body.theme-dark .discover-research-mode-switch {
  background: rgba(36, 37, 43, 0.96);
}

html.theme-dark .discover-research-mode-switch > button.is-active,
body.theme-dark .discover-research-mode-switch > button.is-active,
html.theme-dark .discover-research-source-disclosure,
body.theme-dark .discover-research-source-disclosure,
html.theme-dark .discover-research-source-grid > button,
body.theme-dark .discover-research-source-grid > button,
html.theme-dark .discover-research-search-start > nav > button,
body.theme-dark .discover-research-search-start > nav > button,
html.theme-dark .discover-research-search-result,
body.theme-dark .discover-research-search-result,
html.theme-dark .discover-research-search-toolbar :is(.discover-research-sort, .discover-research-filter-control, .discover-research-save-search),
body.theme-dark .discover-research-search-toolbar :is(.discover-research-sort, .discover-research-filter-control, .discover-research-save-search) {
  border-color: rgba(209, 211, 220, 0.13);
  background: rgba(27, 28, 33, 0.96);
}

html.theme-dark .discover-research-source-grid > button.is-active,
body.theme-dark .discover-research-source-grid > button.is-active,
html.theme-dark .discover-research-save-search.is-saved,
body.theme-dark .discover-research-save-search.is-saved {
  border-color: rgba(182, 150, 194, 0.44);
  background: rgba(182, 150, 194, 0.1);
}

html.theme-dark .discover-research-search-badges .research-access-badge,
body.theme-dark .discover-research-search-badges .research-access-badge {
  border: 0 !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: rgba(205, 211, 218, 0.7) !important;
}

@media (max-width: 620px) {
  .discover-panel .is-research-editorial .discover-research-mode-shell {
    padding-top: 0;
  }

  .discover-research-source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .discover-research-source-grid > button {
    min-height: 50px;
    padding: 9px 28px 9px 10px;
  }

  .discover-research-search-start > nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .discover-research-search-toolbar {
    gap: 7px;
  }

  .discover-research-search-toolbar :is(.discover-research-sort, .discover-research-filter-control, .discover-research-save-search) {
    min-height: 36px;
  }
}

@media (max-width: 369px) {
  .discover-preview-content.is-book-preview .discover-preview-book-hero {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-book-cover {
    width: 104px !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .discover-preview-content.is-book-preview .discover-preview-actions.is-book-actions button:not(.is-primary) {
    border-top: 1px solid var(--discover-line) !important;
    border-left: 0 !important;
    padding-left: 4px !important;
  }
}

/* Discover catalogue: one format bar, one reusable topic filter, no destination tabs. */
.discover-tabs[hidden] {
  display: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-content {
  padding-top: 3px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Research catalogue: disciplines first, technical controls second. */
.discover-panel .is-research-editorial .discover-research-subjects {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.discover-panel .is-research-editorial .discover-research-subjects > header {
  min-height: 18px;
  display: flex;
  align-items: center;
}

.discover-panel .is-research-editorial .discover-research-subjects > header p {
  margin: 0 2px;
  color: var(--discover-coral);
  font: 750 0.66rem/1 var(--ui-font);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.discover-panel .is-research-editorial .discover-research-subjects > nav {
  margin-inline: max(-20px, calc(env(safe-area-inset-left) * -1));
  padding: 0 max(20px, env(safe-area-inset-right)) 4px max(20px, env(safe-area-inset-left));
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: max(20px, env(safe-area-inset-left));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.discover-panel .is-research-editorial .discover-research-subjects > nav::-webkit-scrollbar {
  display: none;
}

.discover-panel .is-research-editorial .discover-research-subjects > nav button {
  flex: 0 0 auto;
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid var(--discover-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--discover-surface) 88%, transparent);
  color: var(--discover-muted);
  font: 620 0.72rem/1 var(--ui-font);
  white-space: nowrap;
  box-shadow: none;
  transform: none !important;
}

.discover-panel .is-research-editorial .discover-research-subjects > nav button.is-active,
html.theme-dark .discover-panel .is-research-editorial .discover-research-subjects > nav button.is-active,
body.theme-dark .discover-panel .is-research-editorial .discover-research-subjects > nav button.is-active {
  border-color: color-mix(in srgb, var(--discover-coral) 78%, var(--discover-line)) !important;
  background: color-mix(in srgb, var(--discover-coral) 7%, var(--discover-surface)) !important;
  color: var(--discover-coral-strong) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--discover-coral) 13%, transparent) !important;
}

.discover-panel .is-research-editorial .discover-research-control-bar {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.discover-panel .is-research-editorial .discover-research-control-bar :is(
  .discover-research-sort,
  .discover-research-source-control,
  .discover-research-filter-control
) {
  width: 100% !important;
  min-width: 0;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid var(--discover-line) !important;
  border-radius: 13px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--discover-surface) 90%, transparent) !important;
  color: var(--discover-text) !important;
  font: 620 0.72rem/1 var(--ui-font) !important;
  white-space: nowrap;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel .is-research-editorial .discover-research-control-bar .discover-research-sort select {
  width: 100% !important;
  height: 46px !important;
  min-width: 0;
  padding: 0 20px 0 0 !important;
  color: var(--discover-text) !important;
  font: inherit !important;
  text-align: center;
  text-align-last: center;
  text-overflow: ellipsis;
}

.discover-panel .is-research-editorial .discover-research-control-bar .discover-research-sort > i,
.discover-research-source-control > i {
  flex: 0 0 auto;
  color: var(--discover-muted);
  font-style: normal;
}

.discover-research-filter-control svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.discover-research-filter-control span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.discover-panel .is-research-editorial .discover-research-control-bar .discover-research-filter-control.is-active {
  border-color: color-mix(in srgb, var(--research-accent) 52%, var(--discover-line)) !important;
  color: var(--research-accent) !important;
}

.discover-research-results-head {
  min-height: 25px;
  display: flex;
  align-items: end;
}

.discover-research-results-head > p {
  margin: 0;
  color: var(--discover-muted);
  font: 730 0.66rem/1 var(--ui-font);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.discover-research-filter-directory .discover-research-filter-options > button.is-active,
html.theme-dark .discover-research-filter-directory .discover-research-filter-options > button.is-active,
body.theme-dark .discover-research-filter-directory .discover-research-filter-options > button.is-active {
  border-color: color-mix(in srgb, var(--research-accent) 50%, var(--discover-line)) !important;
  background: color-mix(in srgb, var(--research-accent) 7%, var(--discover-surface)) !important;
}

.discover-research-filter-directory .discover-research-filter-options > button.is-active > span:first-child,
.discover-research-filter-directory .discover-research-filter-options > button.is-active strong {
  color: var(--research-accent) !important;
}

html.theme-dark .discover-panel .is-research-editorial .discover-research-subjects > nav button,
body.theme-dark .discover-panel .is-research-editorial .discover-research-subjects > nav button,
html.theme-dark .discover-panel .is-research-editorial .discover-research-control-bar :is(.discover-research-sort, .discover-research-source-control, .discover-research-filter-control),
body.theme-dark .discover-panel .is-research-editorial .discover-research-control-bar :is(.discover-research-sort, .discover-research-source-control, .discover-research-filter-control) {
  background: rgba(30, 32, 38, 0.76) !important;
  border-color: rgba(225, 228, 234, 0.13) !important;
}

.discover-panel .is-research-editorial .discover-research-subjects > nav button:is(:active, .is-tactile-press),
.discover-research-control-bar button:is(:active, .is-tactile-press) {
  transform: none !important;
}

@media (max-width: 430px) {
  .discover-panel .is-research-editorial .discover-research-control-bar {
    gap: 7px;
  }

  .discover-panel .is-research-editorial .discover-research-control-bar :is(
    .discover-research-sort,
    .discover-research-source-control,
    .discover-research-filter-control
  ) {
    min-height: 45px !important;
    height: 45px !important;
    padding-inline: 8px !important;
    gap: 5px;
    font-size: 0.66rem !important;
  }

  .discover-research-filter-control svg {
    flex-basis: 16px;
    width: 16px;
    height: 16px;
  }
}

.discover-catalogue-topic-shelf {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.discover-catalogue-topic-shelf > header {
  min-height: 16px;
  display: flex;
  align-items: center;
}

.discover-catalogue-topic-shelf > header p {
  margin: 0;
  color: var(--discover-coral);
  font: 750 0.64rem/1 var(--ui-font);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.discover-catalogue-topic-shelf > nav {
  margin-inline: max(-20px, calc(env(safe-area-inset-left) * -1));
  padding: 0 max(20px, env(safe-area-inset-right)) 4px max(20px, env(safe-area-inset-left));
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: max(20px, env(safe-area-inset-left));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.discover-catalogue-topic-shelf > nav::-webkit-scrollbar {
  display: none;
}

.discover-catalogue-topic-shelf > nav button {
  flex: 0 0 clamp(88px, 22vw, 112px);
  min-height: 78px;
  padding: 10px 8px 9px;
  border: 1px solid var(--discover-line);
  border-radius: 14px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  background: color-mix(in srgb, var(--discover-surface) 86%, transparent);
  color: var(--discover-muted);
  box-shadow: none;
}

.discover-catalogue-topic-shelf > nav button > span {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--topic-filter-color) 64%, var(--discover-muted));
}

.discover-catalogue-topic-shelf > nav button svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.discover-catalogue-topic-shelf > nav button strong {
  font: 650 0.7rem/1.1 var(--ui-font);
  white-space: nowrap;
}

.discover-catalogue-topic-shelf > nav button.is-active {
  border-color: color-mix(in srgb, var(--discover-coral) 82%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 7%, var(--discover-surface));
  color: var(--discover-coral-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--discover-coral) 18%, transparent);
}

.discover-catalogue-topic-shelf > nav button.is-active > span {
  color: var(--discover-coral);
}

.discover-for-you-catalogue {
  gap: clamp(16px, 3.7vw, 26px) !important;
}

.discover-for-you-search {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--discover-line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--discover-surface);
  color: var(--discover-soft);
  text-align: left;
  box-shadow: none;
}

.discover-for-you-search > span {
  position: relative;
  width: 20px;
  height: 20px;
  border: 1.7px solid currentColor;
  border-radius: 50%;
}

.discover-for-you-search > span::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 8px;
  height: 1.7px;
  border-radius: 999px;
  background: currentColor;
  transform: rotate(45deg);
}

.discover-for-you-search > strong {
  font: 480 clamp(0.88rem, 2.5vw, 1rem)/1.2 var(--ui-font);
}

.discover-for-you-feature-section,
.discover-for-you-popular,
.discover-for-you-detour {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.discover-for-you-feature-section > header,
.discover-for-you-popular > header,
.discover-for-you-detour > header {
  min-height: 23px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.discover-for-you-mix-header > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.discover-for-you-mix-header h2 {
  margin: 0;
  color: var(--discover-text);
  font: 500 clamp(1.75rem, 6.4vw, 2.5rem)/1 var(--ui-font);
  letter-spacing: -0.025em;
}

html.theme-dark .discover-for-you-mix-header h2,
body.theme-dark .discover-for-you-mix-header h2 {
  color: #f5f2ec;
}

.discover-for-you-feature-section > header p,
.discover-for-you-popular > header p {
  margin: 0;
  color: var(--discover-coral);
  font: 750 0.66rem/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-for-you-feature-section > header span,
.discover-for-you-detour > header span {
  color: var(--discover-muted);
  font: 520 0.66rem/1.2 var(--ui-font);
}

.discover-for-you-mix-header > div > span {
  font-size: clamp(0.8rem, 2.7vw, 0.95rem);
  line-height: 1.3;
}

.discover-for-you-refresh {
  min-height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid color-mix(in srgb, var(--discover-coral) 32%, var(--discover-line));
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: color-mix(in srgb, var(--discover-coral) 6%, var(--discover-surface));
  color: var(--discover-coral-strong);
  box-shadow: none;
  font: 680 0.69rem/1 var(--ui-font);
  transform: none !important;
}

.discover-for-you-feature-section > header .discover-for-you-refresh > span {
  color: inherit;
  font: inherit;
}

.discover-for-you-refresh > svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.discover-for-you-refresh:is(:active, .is-tactile-press) {
  background: color-mix(in srgb, var(--discover-coral) 6%, var(--discover-surface));
  filter: none;
  transform: none !important;
}

.discover-for-you-refresh:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--discover-coral) 58%, transparent);
  outline-offset: 3px;
}

.discover-for-you-feature {
  position: relative;
  width: 100%;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--discover-coral) 18%, var(--discover-line));
  border-radius: 22px;
  display: grid;
  grid-template-columns: minmax(112px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
  overflow: hidden;
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--discover-amber) 10%, transparent), transparent 34%),
    var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--discover-text) 7%, transparent);
  transform: none !important;
}

.discover-for-you-feature:is(:active, .is-tactile-press) {
  filter: none;
  transform: none !important;
}

.discover-for-you-feature-art,
.discover-for-you-feature-art > img,
.discover-for-you-feature-art > span {
  width: 100%;
  height: clamp(164px, 30vw, 205px);
}

.discover-for-you-feature-art {
  display: block;
  overflow: hidden;
  background: var(--discover-surface-soft);
}

.discover-for-you-feature-art > img {
  display: block;
  object-fit: cover;
}

.discover-for-you-feature-art > span {
  display: grid;
  place-items: center;
  color: var(--discover-coral);
  font: 500 3rem/1 var(--ui-font);
}

.discover-for-you-feature-copy {
  min-width: 0;
  padding: clamp(13px, 2.8vw, 20px);
  display: grid;
  align-content: center;
  gap: 6px;
}

.discover-for-you-feature-copy > small {
  color: var(--discover-muted);
  font: 560 0.67rem/1.25 var(--ui-font);
}

.discover-for-you-feature-copy > strong {
  max-width: 22ch;
  overflow: hidden;
  display: -webkit-box;
  color: var(--discover-text);
  font: 500 clamp(1.16rem, 4.1vw, 1.85rem)/1.04 var(--ui-font);
  letter-spacing: -0.026em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-for-you-feature-description {
  max-width: 44ch;
  margin: 2px 0 3px;
  overflow: hidden;
  display: -webkit-box;
  color: var(--discover-muted);
  font: 470 clamp(0.68rem, 1.8vw, 0.8rem)/1.34 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-for-you-feature-copy > em {
  color: var(--discover-coral-strong);
  font: 650 0.75rem/1.2 var(--ui-font);
  font-style: normal;
}

.discover-for-you-popular > div {
  margin-inline: max(-20px, calc(env(safe-area-inset-left) * -1));
  padding: 0 max(20px, env(safe-area-inset-right)) 5px max(20px, env(safe-area-inset-left));
  display: flex;
  gap: 11px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: max(20px, env(safe-area-inset-left));
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.discover-for-you-popular > div::-webkit-scrollbar {
  display: none;
}

.discover-for-you-shelf-card {
  flex: 0 0 clamp(132px, 35vw, 182px);
  min-width: 0;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--discover-line);
  display: grid;
  align-content: start;
  gap: 6px;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  box-shadow: none;
}

.discover-for-you-shelf-art,
.discover-for-you-shelf-art > img,
.discover-for-you-shelf-art > span {
  width: 100%;
  aspect-ratio: 1 / 0.92;
  border-radius: 11px;
}

.discover-for-you-shelf-art {
  display: block;
  overflow: hidden;
  background: var(--discover-surface-soft);
}

.discover-for-you-shelf-art > img {
  display: block;
  object-fit: cover;
}

.discover-for-you-shelf-art > span {
  display: grid;
  place-items: center;
  color: var(--discover-coral);
  font: 500 2rem/1 var(--ui-font);
}

.discover-for-you-shelf-card > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-text);
  font: 510 clamp(0.92rem, 3.3vw, 1.12rem)/1.06 var(--ui-font);
  letter-spacing: -0.018em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-for-you-shelf-card > .discover-for-you-shelf-kind {
  margin-top: 2px;
  color: var(--discover-coral-strong);
  font: 740 0.55rem/1 var(--ui-font);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.discover-for-you-shelf-card > small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 520 0.59rem/1.25 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-for-you-popular > header.discover-for-you-secondary-heading {
  min-height: 18px;
  align-items: center;
}

.discover-for-you-popular > header.discover-for-you-secondary-heading > p {
  color: var(--discover-muted);
  font: 500 clamp(0.9rem, 2.8vw, 1.05rem)/1.2 var(--ui-font);
  letter-spacing: 0;
  text-transform: none;
}

.discover-for-you-detour > header > div {
  display: grid;
  gap: 4px;
}

.discover-for-you-detour > header h2 {
  margin: 0;
  color: var(--discover-text);
  font: 500 clamp(1.35rem, 4.5vw, 1.75rem)/1.05 var(--ui-font);
  letter-spacing: -0.02em;
}

.discover-for-you-detour > header span {
  font: 500 clamp(0.76rem, 2.3vw, 0.88rem)/1.25 var(--ui-font);
}

html.theme-dark .discover-for-you-detour > header h2,
body.theme-dark .discover-for-you-detour > header h2 {
  color: #f5f2ec;
}

.discover-for-you-detour-list {
  display: grid;
  border-top: 1px solid var(--discover-line);
}

.discover-for-you-detour-card {
  width: 100%;
  min-width: 0;
  min-height: 96px;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--discover-line);
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.discover-for-you-detour-card:is(:active, .is-tactile-press) {
  filter: none;
  transform: none !important;
}

.discover-for-you-detour-art,
.discover-for-you-detour-art > img,
.discover-for-you-detour-art > span {
  width: 74px;
  height: 78px;
  border-radius: 10px;
}

.discover-for-you-detour-art {
  display: block;
  overflow: hidden;
  background: var(--discover-surface-soft);
}

.discover-for-you-detour-art > img {
  display: block;
  object-fit: cover;
}

.discover-for-you-detour-art > span {
  display: grid;
  place-items: center;
  color: var(--discover-coral);
  font: 500 1.55rem/1 var(--ui-font);
}

.discover-for-you-detour-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.discover-for-you-detour-copy > strong {
  overflow: hidden;
  display: -webkit-box;
  color: var(--discover-text);
  font: 510 clamp(0.98rem, 3.4vw, 1.18rem)/1.1 var(--ui-font);
  letter-spacing: -0.014em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-for-you-detour-copy > small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 520 0.61rem/1.25 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-for-you-detour-card > i {
  color: var(--discover-coral-strong);
  font: 600 1rem/1 var(--ui-font);
  font-style: normal;
}

html.theme-dark .discover-catalogue-topic-shelf > nav button,
body.theme-dark .discover-catalogue-topic-shelf > nav button,
html.theme-dark .discover-for-you-search,
body.theme-dark .discover-for-you-search,
html.theme-dark .discover-for-you-feature,
body.theme-dark .discover-for-you-feature {
  background: rgba(30, 32, 38, 0.76) !important;
}

html.theme-dark .discover-for-you-refresh,
body.theme-dark .discover-for-you-refresh {
  border-color: rgba(223, 105, 93, 0.28);
  background: rgba(33, 34, 39, 0.82);
}

@media (hover: hover) {
  .discover-for-you-refresh:hover {
    border-color: color-mix(in srgb, var(--discover-coral) 58%, var(--discover-line));
    background: color-mix(in srgb, var(--discover-coral) 10%, var(--discover-surface));
  }

  .discover-for-you-feature:hover {
    border-color: color-mix(in srgb, var(--discover-coral) 34%, var(--discover-line));
  }
}

html.theme-dark .discover-catalogue-topic-shelf > nav button.is-active,
body.theme-dark .discover-catalogue-topic-shelf > nav button.is-active {
  background: rgba(223, 105, 93, 0.075) !important;
}

@media (min-width: 720px) {
  .discover-for-you-feature {
    grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  }

  .discover-for-you-feature-art,
  .discover-for-you-feature-art > img,
  .discover-for-you-feature-art > span {
    height: 240px;
  }

  .discover-for-you-feature-copy {
    align-content: center;
  }
}

@media (max-width: 380px) {
  .discover-for-you-mix-header {
    align-items: center !important;
  }

  .discover-for-you-refresh {
    width: 38px;
    min-width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
  }

  .discover-for-you-refresh > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(72px, 1fr)) !important;
    scrollbar-width: none;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch::-webkit-scrollbar {
    display: none;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button {
    font-size: 0.66rem !important;
  }
}

/* Keep the amber light source within the viewport instead of cropping it at y=0. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) {
  background:
    radial-gradient(ellipse 88% 38% at 92% 10%, rgba(215, 151, 72, 0.2), transparent 68%),
    radial-gradient(circle at 89% 17%, rgba(225, 171, 94, 0.09) 0 1px, transparent 2px),
    linear-gradient(155deg, #f8f3eb 0%, #f4efe6 48%, #efe9df 100%) !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]),
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) {
  background:
    radial-gradient(ellipse 90% 40% at 92% 10%, rgba(210, 137, 54, 0.18), transparent 68%),
    radial-gradient(circle at 89% 17%, rgba(244, 184, 94, 0.12) 0 1px, transparent 2px),
    linear-gradient(155deg, #13151a 0%, #101216 50%, #0b0d10 100%) !important;
}

.discover-preview-panel.is-book-preview-open {
  background:
    radial-gradient(ellipse 88% 38% at 92% 10%, rgba(215, 151, 72, 0.2), transparent 68%),
    linear-gradient(155deg, #f8f3eb 0%, #f4efe6 48%, #efe9df 100%) !important;
}

html.theme-dark .discover-preview-panel.is-book-preview-open,
body.theme-dark .discover-preview-panel.is-book-preview-open {
  background:
    radial-gradient(ellipse 90% 40% at 92% 10%, rgba(210, 137, 54, 0.18), transparent 68%),
    linear-gradient(155deg, #13151a 0%, #101216 50%, #0b0d10 100%) !important;
}

/*
 * Browse editorial finish
 * -----------------------
 * A calm, cover-led catalogue that shares Home's graphite and paper themes.
 * Interactive surfaces stay compact while typography and book art establish
 * the hierarchy.
 */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) {
  --discover-page: var(--light-page);
  --discover-sheet: var(--light-page);
  --discover-surface: var(--light-panel);
  --discover-surface-soft: var(--light-cool-panel);
  --discover-text: var(--light-ink);
  --discover-muted: var(--light-muted);
  --discover-soft: var(--light-quiet);
  --discover-line: var(--light-line);
  --discover-line-strong: var(--light-line-strong);
  --discover-coral: var(--light-accent-ink);
  --discover-coral-strong: var(--light-accent-ink);
  --discover-amber: var(--light-accent-ink);
  --discover-green: #667f76;
  color-scheme: light;
  background: var(--discover-page) !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]),
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) {
  --discover-page: #0b0d10;
  --discover-sheet: #0b0d10;
  --discover-surface: #17191d;
  --discover-surface-soft: #222429;
  --discover-text: #f2ede3;
  --discover-muted: rgba(213, 205, 194, 0.7);
  --discover-soft: rgba(213, 205, 194, 0.49);
  --discover-line: rgba(231, 223, 211, 0.11);
  --discover-line-strong: rgba(231, 223, 211, 0.18);
  --discover-coral: #df6559;
  --discover-coral-strong: #ef8578;
  --discover-amber: #c79556;
  --discover-green: #8ba99f;
  color-scheme: dark;
  background: var(--discover-page) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-ambient-canvas {
  display: none !important;
  opacity: 0 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header {
  min-height: clamp(124px, 18vh, 164px) !important;
  padding-top: max(20px, env(safe-area-inset-top)) !important;
  padding-bottom: 14px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy {
  gap: 7px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy h2 {
  font-size: clamp(3.25rem, 9vw, 5rem) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy p {
  color: var(--discover-muted) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs {
  min-height: 47px !important;
  margin-bottom: 14px !important;
  border-bottom: 0 !important;
  background: color-mix(in srgb, var(--discover-page) 94%, transparent) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs button {
  min-height: 46px !important;
  font-size: 0.88rem !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs button::after {
  right: 24% !important;
  bottom: 0 !important;
  left: 24% !important;
  height: 2px !important;
  border-radius: 2px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-content {
  gap: 18px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-gutenberg-browser,
  .discover-browse-catalogue,
  .discover-catalogue-shell
) {
  gap: 12px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-search-bar > div,
  .discover-gutenberg-search
) {
  min-height: 52px !important;
  padding: 0 14px !important;
  border: 1px solid var(--discover-line) !important;
  border-radius: 16px !important;
  background: var(--discover-surface) !important;
  box-shadow: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-search-bar > div,
  .discover-gutenberg-search
):focus-within {
  border-color: color-mix(in srgb, var(--discover-coral) 58%, var(--discover-line)) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--discover-coral) 9%, transparent) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-search-bar input,
  .discover-gutenberg-search input
) {
  height: 50px !important;
  font-family: var(--ui-font) !important;
  font-size: 0.9rem !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch {
  min-height: 50px !important;
  padding: 5px !important;
  border: 1px solid var(--discover-line) !important;
  border-radius: 16px !important;
  background: var(--discover-surface) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button {
  min-height: 40px !important;
  border-radius: 11px !important;
  font-size: 0.74rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button::after {
  display: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button.is-active,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button.is-active,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button.is-active {
  background: var(--discover-surface-soft) !important;
  color: var(--discover-coral-strong) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--discover-line) 70%, transparent) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head.is-source-heading {
  min-height: 22px !important;
  margin-top: 4px !important;
  padding: 0 2px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head.is-source-heading i {
  display: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-compact-head.is-source-heading span {
  color: var(--discover-coral) !important;
  font-family: var(--ui-font) !important;
  font-size: 0.63rem !important;
  font-weight: 740 !important;
  letter-spacing: 0.16em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head {
  min-height: 65px !important;
  padding-top: 2px !important;
  align-items: end !important;
  gap: 12px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head > div {
  gap: 4px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head p {
  display: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head h2 {
  color: var(--discover-text) !important;
  font-size: clamp(2rem, 5.7vw, 3rem) !important;
  font-weight: 490 !important;
  letter-spacing: -0.025em !important;
  line-height: 0.98 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head span {
  color: var(--discover-muted) !important;
  font-size: 0.7rem !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head > button {
  min-height: 34px !important;
  padding: 0 2px !important;
  color: var(--discover-muted) !important;
  font-size: 0.68rem !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail {
  gap: 8px !important;
  padding: 2px 0 6px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid var(--discover-line) !important;
  border-radius: 12px !important;
  background: var(--discover-surface) !important;
  color: var(--discover-muted) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button:is(
  .is-active,
  .discover-live-source-menu
),
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button:is(
  .is-active,
  .discover-live-source-menu
),
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-chip-rail button:is(
  .is-active,
  .discover-live-source-menu
) {
  border-color: color-mix(in srgb, var(--discover-coral) 62%, var(--discover-line)) !important;
  background: color-mix(in srgb, var(--discover-coral) 7%, var(--discover-surface)) !important;
  color: var(--discover-coral-strong) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-grid,
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 30px 18px !important;
  margin-top: 4px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book {
  width: min(146px, 100%) !important;
  justify-self: center !important;
  justify-items: stretch !important;
  gap: 6px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-main {
  width: 100% !important;
  justify-items: stretch !important;
  gap: 9px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book .discover-gutenberg-cover {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2 / 3 !important;
  border: 1px solid color-mix(in srgb, var(--discover-line) 78%, transparent) !important;
  border-radius: 6px 10px 10px 6px !important;
  background: var(--discover-surface-soft) !important;
  box-shadow: 0 14px 28px rgba(49, 39, 27, 0.13) !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-cover,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-cover {
  box-shadow:
    0 16px 31px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(242, 237, 227, 0.025) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book .discover-gutenberg-cover.has-image img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: inherit !important;
  border-radius: inherit !important;
  object-fit: cover !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy {
  width: 100% !important;
  align-self: stretch !important;
  gap: 4px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > strong {
  color: var(--discover-text) !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.9rem, 3.55vw, 1.08rem) !important;
  font-weight: 520 !important;
  line-height: 1.08 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > small {
  color: var(--discover-muted) !important;
  font-size: 0.65rem !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-add,
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-add.is-in-library {
  width: 100% !important;
  align-self: stretch !important;
  min-height: 30px !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  color: var(--discover-coral) !important;
  font-size: 0.7rem !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading > span {
  min-height: 280px !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading :is(i, b, small) {
  background-color: var(--discover-surface-soft) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-directory-sheet {
  border-color: var(--discover-line) !important;
  background: var(--discover-surface) !important;
  box-shadow: 0 28px 70px rgba(49, 39, 27, 0.2) !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-directory-sheet,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-directory-sheet {
  background: var(--discover-surface) !important;
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.52) !important;
}

@media (min-width: 720px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-grid,
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 36px 24px !important;
  }
}

@media (max-width: 520px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header {
    min-height: 120px !important;
    padding-top: max(18px, env(safe-area-inset-top)) !important;
    padding-bottom: 12px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-header-copy h2 {
    font-size: clamp(3.15rem, 14vw, 4rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-tabs {
    margin-bottom: 12px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-content {
    gap: 16px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-results-head h2 {
    font-size: clamp(1.95rem, 8.2vw, 2.35rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book,
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading > span {
    width: min(128px, 100%) !important;
    justify-self: center !important;
  }
}

@media (max-width: 360px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book,
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading > span {
    width: min(118px, 100%) !important;
  }
}

/* Articles: one feature, one browse rail, and title-first editorial rows. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-articles-editorial {
  gap: 18px !important;
}

.discover-article-feature-section {
  display: grid;
  gap: 10px;
}

.discover-article-feature-section > p {
  margin: 2px 2px 0;
  color: var(--discover-coral);
  font: 740 0.63rem/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-article-feature {
  width: 100%;
  padding: 0;
  border: 1px solid var(--discover-line);
  border-radius: 17px;
  display: grid;
  overflow: hidden;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  box-shadow: 0 16px 34px rgba(61, 47, 31, 0.08);
  transform: none !important;
}

.discover-article-feature:is(:active, .is-tactile-press) {
  filter: brightness(1.025);
  transform: none !important;
}

.discover-article-feature-art {
  position: relative;
  width: 100%;
  aspect-ratio: 2.65 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 24%, color-mix(in srgb, var(--discover-coral) 16%, transparent), transparent 32%),
    repeating-radial-gradient(ellipse at 24% 62%, transparent 0 16px, color-mix(in srgb, var(--discover-muted) 13%, transparent) 17px 18px),
    linear-gradient(145deg, #dce4df, #c8d3ce);
  color: color-mix(in srgb, var(--discover-coral) 70%, var(--discover-text));
}

.discover-article-feature-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 56%, rgba(7, 9, 11, 0.18)),
    linear-gradient(115deg, transparent 0 47%, color-mix(in srgb, var(--discover-coral) 26%, transparent) 48% 48.6%, transparent 49.5%),
    linear-gradient(18deg, transparent 0 68%, color-mix(in srgb, var(--discover-muted) 18%, transparent) 68.5% 69%, transparent 69.5%);
}

.discover-article-feature-art::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 24%;
  z-index: 1;
  width: 58px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--discover-muted) 34%, transparent);
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 0 14px color-mix(in srgb, var(--discover-muted) 11%, transparent),
    0 0 0 28px color-mix(in srgb, var(--discover-muted) 7%, transparent);
  transform: translate(-50%, -50%);
}

.discover-article-feature-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.discover-article-feature-art > span {
  opacity: 0;
  font: 500 clamp(3.2rem, 12vw, 6rem)/1 var(--ui-font);
}

.discover-article-feature-copy {
  padding: 17px 18px 19px;
  display: grid;
  gap: 8px;
}

.discover-article-feature-copy > strong {
  color: var(--discover-text);
  font: 490 clamp(1.45rem, 6vw, 2.35rem)/1.02 var(--ui-font);
  letter-spacing: -0.025em;
}

.discover-article-feature-copy > small {
  color: var(--discover-muted);
  font: 600 0.68rem/1.25 var(--ui-font);
}

.discover-article-feature-copy > em {
  margin-top: 4px;
  color: var(--discover-coral-strong);
  font: 520 0.92rem/1 var(--ui-font);
  font-style: normal;
}

.discover-article-feature-copy > em i {
  margin-left: 5px;
  font-style: normal;
}

.discover-article-browser {
  display: grid;
  gap: 12px;
}

.discover-article-browser-head {
  min-height: 45px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.discover-article-browser-head h2 {
  min-width: 0;
  margin: 0;
  color: var(--discover-text);
  font: 490 clamp(1.85rem, 6vw, 2.6rem)/1 var(--ui-font);
  letter-spacing: -0.028em;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-browser-head .discover-live-source-menu,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-browser-head .discover-live-source-menu,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-browser-head .discover-live-source-menu {
  min-height: 34px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto;
  background: transparent !important;
  color: var(--discover-muted) !important;
  font: 600 0.68rem/1 var(--ui-font) !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-topic-rail {
  gap: 8px !important;
  padding: 2px max(18px, env(safe-area-inset-right)) 6px 0 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-topic-rail button,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-topic-rail button,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-topic-rail button {
  min-height: 38px !important;
  padding: 0 15px !important;
  border: 1px solid var(--discover-line) !important;
  border-radius: 13px !important;
  background: var(--discover-surface) !important;
  color: var(--discover-muted) !important;
  font: 600 0.7rem/1 var(--ui-font) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-topic-rail button.is-active,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-topic-rail button.is-active,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-article-topic-rail button.is-active {
  border-color: color-mix(in srgb, var(--discover-coral) 68%, var(--discover-line)) !important;
  background: color-mix(in srgb, var(--discover-coral) 7%, var(--discover-surface)) !important;
  color: var(--discover-coral-strong) !important;
}

.discover-article-list {
  display: grid;
  border-top: 1px solid var(--discover-line);
}

.discover-article-row {
  width: 100%;
  min-height: 112px;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--discover-line);
  border-radius: 0;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.discover-article-row:is(:active, .is-tactile-press) {
  filter: brightness(1.04);
  transform: none !important;
}

.discover-article-row-art {
  width: 112px;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--discover-line);
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--discover-coral) 13%, transparent), transparent 40%),
    var(--discover-surface-soft);
  color: var(--discover-coral);
}

.discover-article-row-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.discover-article-row-art > span {
  font: 500 2.2rem/1 var(--ui-font);
}

.discover-article-row-copy {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.discover-article-row-copy > small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 620 0.62rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-article-row-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-text);
  font: 500 clamp(1.05rem, 4.25vw, 1.3rem)/1.08 var(--ui-font);
  letter-spacing: -0.012em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-article-row > .discover-card-arrow {
  display: none !important;
}

html.theme-dark .discover-article-feature,
body.theme-dark .discover-article-feature {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
}

html.theme-dark .discover-article-feature-art,
body.theme-dark .discover-article-feature-art {
  background:
    radial-gradient(circle at 80% 24%, color-mix(in srgb, var(--discover-coral) 17%, transparent), transparent 32%),
    repeating-radial-gradient(ellipse at 24% 62%, transparent 0 16px, rgba(158, 184, 178, 0.1) 17px 18px),
    linear-gradient(145deg, #16262c, #10181d);
}

@media (max-width: 520px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-articles-editorial {
    gap: 16px !important;
  }

  .discover-article-feature-art {
    aspect-ratio: 4.1 / 1;
  }

  .discover-article-feature-copy {
    padding: 12px 15px 14px;
    gap: 6px;
  }

  .discover-article-feature-copy > strong {
    font-size: clamp(1.22rem, 5.9vw, 1.55rem);
  }

  .discover-article-feature-copy > small {
    font-size: 0.63rem;
  }

  .discover-article-feature-copy > em {
    margin-top: 2px;
    font-size: 0.84rem;
  }

  .discover-article-browser-head h2 {
    font-size: clamp(1.72rem, 7.8vw, 2.15rem);
  }

  .discover-article-row {
    grid-template-columns: 106px minmax(0, 1fr);
    gap: 13px;
  }

  .discover-article-row-art {
    width: 106px;
  }
}

@media (max-width: 360px) {
  .discover-article-row {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 11px;
  }

  .discover-article-row-art {
    width: 96px;
  }
}

/* Source picker: a compact, safely inset editorial sheet. */
.discover-live-source-directory {
  box-sizing: border-box;
  padding: 18px;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-backdrop {
  background: rgba(10, 11, 13, 0.52) !important;
  -webkit-backdrop-filter: blur(10px) saturate(0.88);
  backdrop-filter: blur(10px) saturate(0.88);
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-sheet,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-sheet,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-sheet {
  width: min(620px, 100%);
  max-height: min(72dvh, 650px);
  padding: 0;
  border: 1px solid var(--discover-line) !important;
  border-radius: 26px !important;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  background: var(--discover-surface) !important;
  box-shadow: 0 28px 72px rgba(35, 27, 20, 0.24) !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-sheet,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-sheet {
  box-shadow: 0 30px 78px rgba(0, 0, 0, 0.54) !important;
}

.discover-live-source-directory .discover-gutenberg-directory-sheet > header {
  position: relative;
  z-index: 2;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--discover-line);
  align-items: center;
  background: var(--discover-surface);
}

.discover-live-source-directory .discover-gutenberg-directory-sheet > header > div {
  gap: 6px;
}

.discover-live-source-directory .discover-gutenberg-directory-sheet header p {
  color: var(--discover-coral-strong);
  font-size: 0.6rem;
  letter-spacing: 0.17em;
}

.discover-live-source-directory .discover-gutenberg-directory-sheet header h2 {
  color: var(--discover-text);
  font-size: clamp(1.8rem, 5.6vw, 2.35rem);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.discover-live-source-directory .discover-gutenberg-directory-sheet header span {
  max-width: 34rem;
  color: var(--discover-muted);
  font-size: 0.65rem;
  font-weight: 560;
}

.discover-live-source-directory .discover-gutenberg-directory-sheet header > button {
  width: 36px;
  height: 36px;
  border-color: var(--discover-line);
  flex-basis: 36px;
  background: transparent;
  color: var(--discover-muted);
  font: 400 1.25rem/1 var(--ui-font);
  transform: none !important;
}

.discover-live-source-directory .discover-live-source-grid {
  min-height: 0;
  padding: 8px 14px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.discover-live-source-directory .discover-live-source-grid > button {
  position: relative;
  min-height: 68px;
  padding: 10px 8px;
  border: 0;
  border-bottom: 1px solid var(--discover-line);
  border-radius: 0;
  grid-template-columns: 40px minmax(0, 1fr) 24px;
  gap: 12px;
  background: transparent;
  box-shadow: none;
  transform: none !important;
  -webkit-tap-highlight-color: transparent;
}

.discover-live-source-directory .discover-live-source-grid > button:last-child {
  border-bottom: 0;
}

.discover-live-source-directory .discover-live-source-grid > button:is(:active, .is-tactile-press) {
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

.discover-live-source-directory .discover-live-source-grid > button.is-active,
.discover-live-source-directory .discover-live-source-grid > button.is-active:is(:active, .is-tactile-press) {
  border-color: var(--discover-line);
  background: color-mix(in srgb, var(--discover-surface-soft) 84%, var(--discover-surface)) !important;
}

.discover-live-source-directory .discover-live-source-grid > button > span:first-child {
  width: 40px;
  height: 40px;
  border: 1px solid var(--discover-line);
  border-radius: 12px;
  background: var(--discover-surface-soft);
  color: var(--discover-muted);
}

.discover-live-source-directory .discover-live-source-grid > button.is-active > span:first-child {
  border-color: color-mix(in srgb, var(--discover-coral) 45%, var(--discover-line));
  background: color-mix(in srgb, var(--discover-coral) 9%, var(--discover-surface));
  color: var(--discover-coral-strong);
}

.discover-live-source-directory .discover-live-source-grid svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.45;
}

.discover-live-source-directory .discover-live-source-grid > button > span:nth-child(2) {
  gap: 3px;
}

.discover-live-source-directory .discover-live-source-grid strong {
  color: var(--discover-text);
  font: 520 1.03rem/1.05 var(--ui-font);
  letter-spacing: -0.01em;
}

.discover-live-source-directory .discover-live-source-grid small {
  display: block;
  overflow: hidden;
  color: var(--discover-muted);
  font: 560 0.59rem/1.35 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-live-source-directory .discover-live-source-grid em {
  color: var(--discover-coral-strong);
  font-size: 0.52rem;
}

.discover-live-source-directory .discover-live-source-grid > button > i {
  width: 20px;
  height: 20px;
  border: 1px solid var(--discover-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.discover-live-source-directory .discover-live-source-grid > button.is-active > i {
  border-color: var(--discover-coral);
  background: var(--discover-coral);
}

.discover-live-source-directory .discover-live-source-grid > button.is-active > i::after {
  content: "";
  width: 7px;
  height: 4px;
  border-left: 1.5px solid var(--discover-page);
  border-bottom: 1.5px solid var(--discover-page);
  transform: translateY(-1px) rotate(-45deg);
}

@media (max-width: 620px) {
  .discover-live-source-directory {
    padding: 10px 10px max(84px, calc(env(safe-area-inset-bottom) + 74px));
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-sheet,
  html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-sheet,
  body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-live-source-directory .discover-gutenberg-directory-sheet {
    max-height: calc(100dvh - max(112px, calc(env(safe-area-inset-bottom) + 102px)));
    border-radius: 22px !important;
  }

  .discover-live-source-directory .discover-gutenberg-directory-sheet > header {
    padding: 18px 16px 15px;
  }

  .discover-live-source-directory .discover-gutenberg-directory-sheet header h2 {
    font-size: clamp(1.7rem, 8vw, 2rem);
  }

  .discover-live-source-directory .discover-live-source-grid {
    padding: 6px 10px 10px;
  }

  .discover-live-source-directory .discover-live-source-grid > button {
    min-height: 64px;
    padding: 9px 6px;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    gap: 11px;
  }

  .discover-live-source-directory .discover-live-source-grid > button > span:first-child {
    width: 38px;
    height: 38px;
  }
}

/* Three-up book shelf on wider phones; compact phones retain two columns. */
@media (min-width: 390px) and (max-width: 719px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-grid,
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 11px !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book,
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-loading > span {
    width: min(128px, 100%) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > strong {
    font-size: clamp(0.8rem, 3.1vw, 0.94rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > small {
    font-size: 0.58rem !important;
  }
}

/* Stronger book-card hierarchy at every shelf size. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > strong {
  font-size: clamp(0.98rem, 3.75vw, 1.16rem) !important;
  font-weight: 650 !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > small {
  color: color-mix(in srgb, var(--discover-text) 68%, var(--discover-muted)) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.008em !important;
}

@media (min-width: 390px) and (max-width: 719px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > strong {
    font-size: clamp(0.88rem, 3vw, 1.02rem) !important;
  }

  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-gutenberg-book-copy > small {
    font-size: 0.64rem !important;
  }
}

/* Books: a swipeable editorial feature followed by themed cover shelves. */
.discover-books-landing {
  gap: clamp(28px, 5vw, 44px) !important;
  padding-bottom: clamp(28px, 7vw, 58px);
}

.discover-books-hero {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 0;
}

.discover-books-hero-stage {
  position: relative;
  width: 100%;
  min-height: clamp(250px, 34vw, 326px);
  isolation: isolate;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.discover-books-hero-card {
  --book-hero-accent: #c97966;
  --book-hero-shadow: rgba(91, 51, 43, 0.18);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(240, 233, 221, 0.13);
  border-radius: 20px;
  overflow: hidden;
  background: #0b0d0f;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity 320ms cubic-bezier(0.22, 0.72, 0.26, 1);
  will-change: opacity;
}

.discover-books-hero-card::before,
.discover-books-hero-card::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.discover-books-hero-card::before {
  inset: -14%;
  background-image: var(--book-hero-image, none);
  background-position: var(--book-hero-focus, 50% 50%);
  background-size: cover;
  filter: blur(22px) saturate(0.82) brightness(0.68);
  opacity: 0.72;
  transform: scale(1.12);
}

.discover-books-hero-card::after {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 7, 9, 0.98) 0%, rgba(7, 8, 10, 0.9) 44%, rgba(7, 8, 10, 0.46) 72%, rgba(7, 8, 10, 0.7) 100%),
    linear-gradient(0deg, rgba(4, 5, 7, 0.72), transparent 58%);
}

.discover-books-hero-card.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.discover-books-hero-stage.is-dragging .discover-books-hero-card {
  transition: none;
}

.discover-books-hero-stage.is-dragging :is(.discover-books-hero-copy, .discover-books-hero-cover, .discover-short-reads-hero-object) {
  transition: none;
}

.discover-books-hero-card.is-violet {
  --book-hero-accent: #88739d;
  --book-hero-shadow: rgba(69, 52, 82, 0.2);
}

.discover-books-hero-card.is-blue {
  --book-hero-accent: #68879a;
  --book-hero-shadow: rgba(46, 70, 82, 0.2);
}

.discover-books-hero-card.is-gold {
  --book-hero-accent: #b18a55;
  --book-hero-shadow: rgba(88, 67, 39, 0.18);
}

.discover-books-hero-card.is-green {
  --book-hero-accent: #718f80;
  --book-hero-shadow: rgba(46, 75, 62, 0.18);
}

.discover-books-hero-card > button {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 100%;
  padding: clamp(22px, 4.2vw, 36px) clamp(22px, 4.6vw, 40px) clamp(32px, 5vw, 42px);
  border: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(142px, 0.38fr);
  align-items: center;
  gap: clamp(20px, 5vw, 46px);
  background: transparent;
  color: #f4efe6;
  text-align: left;
  transform: none !important;
}

.discover-books-hero-card > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--book-hero-accent) 70%, white);
  outline-offset: -4px;
}

.discover-books-hero-card > button:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

.discover-books-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 7px;
  opacity: 0.82;
  transform: translateY(5px);
  transition: opacity 320ms ease, transform 360ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.discover-books-hero-card.is-active .discover-books-hero-copy {
  opacity: 1;
  transform: translateY(0);
}

.discover-books-hero-copy > small {
  color: color-mix(in srgb, var(--book-hero-accent) 82%, #f4efe6);
  font: 750 clamp(0.78rem, 2vw, 0.9rem)/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-books-hero-copy > strong {
  max-width: 12ch;
  color: #f5f0e7;
  font: 470 clamp(1.95rem, 5.2vw, 3.18rem)/0.96 var(--ui-font);
  letter-spacing: -0.035em;
}

.discover-books-hero-copy > b {
  color: rgba(237, 229, 216, 0.78);
  font: 480 clamp(0.84rem, 1.9vw, 1rem)/1.1 var(--ui-font);
}

.discover-books-hero-copy > span {
  max-width: 43ch;
  display: -webkit-box;
  overflow: hidden;
  color: rgba(225, 218, 207, 0.68);
  font: 440 clamp(0.76rem, 1.75vw, 0.9rem)/1.42 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-books-hero-copy > em {
  min-height: 36px;
  margin-top: 5px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--book-hero-accent) 52%, rgba(255, 255, 255, 0.14));
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(8, 10, 12, 0.36);
  color: #f4efe6;
  font: 650 0.68rem/1 var(--ui-font);
  font-style: normal;
}

.discover-books-hero-copy > em i {
  color: var(--book-hero-accent);
  font-style: normal;
}

.discover-books-hero-art {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
}

.discover-books-hero-art::before {
  position: absolute;
  width: 126%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--book-hero-accent) 24%, transparent), transparent 66%);
  filter: blur(12px);
  content: "";
}

.discover-books-hero-cover {
  position: relative;
  z-index: 1;
  width: min(158px, 100%);
  aspect-ratio: 2 / 3;
  border: 1px solid rgba(246, 239, 226, 0.2);
  border-radius: 5px 9px 9px 5px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--book-hero-accent) 13%, var(--discover-surface-soft));
  color: var(--book-hero-accent);
  box-shadow: 0 22px 36px rgba(0, 0, 0, 0.46);
  opacity: 0.82;
  transform: translateX(8px) scale(0.975) rotate(0.8deg);
  transition: opacity 320ms ease, transform 380ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.discover-books-hero-card.is-active .discover-books-hero-cover {
  opacity: 1;
  transform: translateX(0) scale(1) rotate(0.8deg);
}

.discover-short-reads-hero-object {
  position: relative;
  z-index: 1;
  width: min(158px, 100%);
  display: grid;
  place-items: center;
  opacity: 0.82;
  transform: translateX(8px) scale(0.975) rotate(0.8deg);
  transition: opacity 320ms ease, transform 380ms cubic-bezier(0.22, 0.72, 0.26, 1);
}

.discover-short-reads-hero-card.is-active .discover-short-reads-hero-object {
  opacity: 1;
  transform: translateX(0) scale(1) rotate(0.8deg);
}

.discover-short-reads-hero-object > .discover-books-hero-cover,
.discover-short-reads-hero-object > .discover-originals-document-art.is-hero {
  width: 100%;
}

.discover-short-reads-hero-object > .discover-originals-document-art.is-hero {
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.34));
  transform: none;
}

.discover-short-reads-hero-card .discover-books-hero-copy > strong {
  max-width: 14ch;
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(1.72rem, 4.7vw, 2.82rem);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-short-reads-hero-card .discover-books-hero-copy > b {
  max-width: 46ch;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-books-hero-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.discover-books-hero-cover > b {
  font: 480 3rem/1 var(--ui-font);
}

.discover-books-hero-dots {
  position: absolute;
  left: 50%;
  bottom: 11px;
  z-index: 5;
  min-height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  transform: translateX(-50%);
}

.discover-books-hero-dots > button {
  width: 7px;
  min-width: 7px;
  height: 7px;
  min-height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(242, 235, 224, 0.28);
  box-shadow: none;
  transform: none !important;
  transition: width 160ms ease, background-color 160ms ease;
}

.discover-books-hero-dots > button.is-active {
  width: 18px;
  background: color-mix(in srgb, var(--discover-coral) 78%, #f5eee3);
}

/* Books uses a native, edge-to-edge suggestion shelf instead of the bounded
 * one-slide hero. The broad tonal wash and fixed trailing fade communicate
 * horizontal continuation without drawing another panel around the content. */
.discover-books-suggestion-shelf {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.discover-books-suggestion-shelf::before {
  position: absolute;
  inset: 0 -20px -5px;
  z-index: 0;
  background: linear-gradient(
    90deg,
    rgba(244, 127, 115, 0.12) 0%,
    rgba(26, 27, 31, 0.92) 13%,
    rgba(26, 27, 31, 0.78) 72%,
    rgba(26, 27, 31, 0.46) 100%
  );
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 12%, #000 58%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 12%, #000 58%, #000 100%);
  content: "";
  pointer-events: none;
}

.discover-books-suggestion-shelf::after {
  position: absolute;
  top: 0;
  right: -20px;
  bottom: -5px;
  z-index: 3;
  width: 44px;
  background: linear-gradient(90deg, transparent, rgba(16, 17, 20, 0.72));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 12%, #000 58%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 12%, #000 58%, #000 100%);
  content: "";
  pointer-events: none;
}

.discover-books-suggestion-head {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.discover-books-suggestion-head h2 {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  color: var(--discover-text);
  font: 400 clamp(1.55rem, 6.2vw, 3.4rem)/0.98 "Rhythm Wordmark", Georgia, "Times New Roman", serif;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.discover-books-suggestion-head > span {
  flex: 0 0 auto;
  padding-bottom: 2px;
  color: var(--discover-muted);
  font: 620 0.61rem/1 var(--ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.discover-books-suggestion-head > span i {
  margin-left: 5px;
  color: var(--discover-coral);
  font-style: normal;
}

.discover-books-suggestion-rail {
  --app-shelf-start-space: 0px !important;
  --app-shelf-end-space: 0px !important;
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 0;
  padding-top: 14px;
  padding-bottom: 17px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

/* Compact shell safeguards normally disable snapping on shared rails. This
 * full-viewport shelf deliberately restores it as a one-screen-at-a-time
 * interaction. */
#discoverPanel#discoverPanel#discoverPanel .discover-books-suggestion-rail.app-shelf-rail {
  scroll-padding-inline: 0 !important;
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x pan-y !important;
}

.discover-books-hero-card.is-shelf-card {
  position: relative;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 224px;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: none;
  will-change: auto;
}

.discover-books-hero-card.is-shelf-card::before,
.discover-books-hero-card.is-shelf-card::after {
  display: none;
}

.discover-books-hero-card.is-shelf-card > button {
  height: auto;
  min-height: 224px;
  padding:
    16px
    max(20px, env(safe-area-inset-right))
    16px
    max(20px, env(safe-area-inset-left));
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: clamp(16px, 3vw, 28px);
  background: transparent;
}

.discover-books-hero-card.is-shelf-card .discover-books-hero-copy {
  opacity: 1;
  transform: none;
  transition: none;
}

.discover-books-hero-card.is-shelf-card .discover-books-hero-cover {
  width: 120px;
  opacity: 1;
  transform: rotate(0.8deg);
  transition: none;
}

.discover-books-curated {
  min-width: 0;
  padding-top: clamp(6px, 1.2vw, 12px);
  display: grid;
  gap: clamp(14px, 2vw, 20px);
}

.discover-books-curated > header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.discover-books-curated > header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.discover-books-curated > header h2 {
  min-width: 0;
  max-width: none;
  margin: 0;
  color: var(--discover-text);
  font: 500 clamp(1.75rem, 7.4vw, 4rem)/0.94 var(--ui-font);
  letter-spacing: -0.045em;
  white-space: nowrap;
}

.discover-books-curated > header > span {
  flex: 0 0 auto;
  color: var(--discover-muted);
  font: 600 0.64rem/1.2 var(--ui-font);
}

.discover-books-collection-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(270px, 39vw, 344px);
  gap: clamp(11px, 1.8vw, 16px);
  padding-top: 2px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.discover-books-collection-card {
  --book-collection-accent: var(--discover-coral);
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 176px;
  padding: 17px 17px 16px 14px;
  border: 1px solid rgba(236, 230, 221, 0.1);
  border-radius: 18px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  overflow: hidden;
  background:
    radial-gradient(circle at 7% 10%, color-mix(in srgb, var(--book-collection-accent) 18%, transparent), transparent 48%),
    rgba(30, 32, 38, 0.82);
  color: var(--discover-text);
  text-align: left;
  box-shadow: 0 13px 28px rgba(0, 0, 0, 0.14);
  scroll-snap-align: start;
  transform: none !important;
}

.discover-books-collection-card:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

.discover-books-collection-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--book-collection-accent) 72%, white);
  outline-offset: 2px;
}

.discover-books-collection-art {
  position: relative;
  width: 108px;
  height: 136px;
  display: block;
}

.discover-books-collection-cover {
  position: absolute;
  top: 15px;
  left: 0;
  width: 64px;
  aspect-ratio: 5 / 8;
  border: 1px solid rgba(244, 238, 228, 0.18);
  border-radius: 4px 7px 7px 4px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--book-collection-accent) 18%, #26282e);
  color: var(--book-collection-accent);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
  transform: rotate(-6deg);
}

.discover-books-collection-cover.is-2 {
  top: 6px;
  left: 23px;
  z-index: 2;
  transform: rotate(-0.5deg);
}

.discover-books-collection-cover.is-3 {
  left: 46px;
  z-index: 3;
  transform: rotate(6deg);
}

.discover-books-collection-cover > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.discover-books-collection-cover > b {
  font: 500 1.65rem/1 var(--ui-font);
}

.discover-books-collection-copy {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 5px;
}

.discover-books-collection-copy > small {
  color: color-mix(in srgb, var(--book-collection-accent) 84%, #f3eee6);
  font: 720 0.55rem/1.1 var(--ui-font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.discover-books-collection-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #f4efe7;
  font: 500 clamp(1rem, 2.2vw, 1.24rem)/1.02 var(--ui-font);
  letter-spacing: -0.022em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-books-collection-copy > span {
  display: -webkit-box;
  overflow: hidden;
  color: rgba(226, 219, 209, 0.65);
  font: 470 0.66rem/1.34 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-books-collection-copy > em {
  margin-top: 2px;
  color: #eee8df;
  font: 680 0.6rem/1 var(--ui-font);
  font-style: normal;
}

.discover-books-collection-copy > em i {
  margin-left: 5px;
  color: var(--book-collection-accent);
  font-style: normal;
}

.discover-books-shelves {
  min-width: 0;
  display: grid;
  gap: clamp(16px, 2.8vw, 24px);
}

.discover-books-shelf {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.discover-books-shelf > header {
  position: relative;
  isolation: isolate;
  min-height: 24px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.discover-books-shelf > header::before,
.discover-books-shelf > header::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.discover-books-shelf > header::before {
  inset: -8px -11px -5px;
  z-index: -1;
  border-radius: 13px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--book-shelf-accent) 16%, transparent),
    color-mix(in srgb, var(--book-shelf-accent) 5%, transparent) 64%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-7px);
  transition:
    opacity 260ms ease,
    transform 340ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.discover-books-shelf > header::after {
  top: -2px;
  bottom: -2px;
  left: -10px;
  width: 3px;
  border-radius: 999px;
  background: var(--book-shelf-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--book-shelf-accent) 36%, transparent);
  opacity: 0;
  transform: scaleY(0.45);
  transition:
    opacity 220ms ease,
    transform 320ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.discover-books-shelf > header > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.discover-books-shelf > header h2 {
  min-width: 0;
  margin: 0;
  color: var(--book-shelf-accent);
  font: 760 clamp(0.84rem, 2.05vw, 0.98rem)/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-books-shelf > header small {
  color: var(--discover-muted);
  font: 470 0.72rem/1.25 var(--ui-font);
}

.discover-books-shelf > header small {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--book-shelf-accent) 76%, var(--discover-muted));
  font-family: var(--ui-font);
  font-size: 0.6rem;
  font-weight: 650;
}

.discover-books-shelf.is-curation-target > header::before,
.discover-books-shelf.is-curation-target > header::after {
  opacity: 1;
  transform: none;
}

.discover-books-shelf-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(96px, 13.5vw, 126px);
  gap: clamp(10px, 1.7vw, 15px);
  padding-top: 2px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}

#discoverPanel#discoverPanel#discoverPanel .discover-books-shelf-rail.app-shelf-rail {
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x pan-y !important;
}

#discoverPanel#discoverPanel#discoverPanel .discover-books-shelf-rail.app-shelf-rail button {
  touch-action: pan-x pan-y !important;
}

.discover-books-shelf-card {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 7px;
  overflow: visible;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  box-shadow: none;
  transform: none !important;
}

#discoverPanel .discover-books-shelf-card {
  grid-template-rows: auto auto !important;
}

.discover-books-shelf-card:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

.discover-books-shelf-card:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--book-shelf-accent) 72%, transparent);
  outline-offset: 4px;
}

.discover-books-shelf-cover {
  width: 100%;
  aspect-ratio: 5 / 8;
  border: 0;
  border-radius: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--book-shelf-accent) 10%, var(--discover-surface-soft));
  color: var(--book-shelf-accent);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
}

.discover-books-shelf-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.discover-books-shelf-cover > b {
  font: 470 2.25rem/1 var(--ui-font);
}

.discover-books-shelf-copy {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0 1px 3px;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow: hidden;
  background: transparent;
}

#discoverPanel .discover-books-shelf-copy {
  min-height: 0 !important;
}

.discover-books-shelf-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #f3eee5;
  font: 480 clamp(0.78rem, 2.1vw, 0.92rem)/1.06 var(--ui-font);
  letter-spacing: -0.014em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-books-shelf-copy > small {
  overflow: hidden;
  color: rgba(223, 215, 203, 0.68);
  font: 560 0.54rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-books-credit {
  margin: 0;
  padding-top: 4px;
  color: var(--discover-soft);
  font: 500 0.6rem/1.4 var(--ui-font);
  text-align: center;
}

html.theme-dark .discover-books-hero-card,
body.theme-dark .discover-books-hero-card {
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.25);
}

html.theme-dark .discover-books-hero-card.is-shelf-card,
body.theme-dark .discover-books-hero-card.is-shelf-card {
  box-shadow: none;
}

html.theme-dark .discover-books-shelf-card,
body.theme-dark .discover-books-shelf-card {
  box-shadow: none;
}

@media (max-width: 620px) {
  .discover-books-landing {
    gap: 27px !important;
  }

  .discover-books-suggestion-shelf::before {
    inset: 0 -18px -4px;
  }

  .discover-books-suggestion-shelf::after {
    top: 0;
    right: -18px;
    bottom: -4px;
    width: 38px;
  }

  .discover-books-suggestion-head > span {
    font-size: 0.56rem;
  }

  .discover-books-suggestion-rail {
    grid-auto-columns: 100%;
    gap: 0;
    padding-top: 12px;
    padding-bottom: 14px;
  }

  .discover-books-hero-card.is-shelf-card,
  .discover-books-hero-card.is-shelf-card > button {
    min-height: 204px;
  }

  .discover-books-hero-card.is-shelf-card > button {
    padding:
      14px
      max(20px, env(safe-area-inset-right))
      14px
      max(20px, env(safe-area-inset-left));
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 14px;
  }

  .discover-books-hero-card.is-shelf-card .discover-books-hero-cover {
    width: 102px;
  }

  .discover-books-curated > header > span {
    display: none;
  }

  .discover-books-collection-rail {
    grid-auto-columns: min(84vw, 326px);
    gap: 11px;
  }

  .discover-books-collection-card {
    min-height: 166px;
    padding: 14px 14px 13px 11px;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
  }

  .discover-books-collection-art {
    width: 98px;
    height: 130px;
  }

  .discover-books-collection-cover {
    width: 59px;
  }

  .discover-books-collection-cover.is-2 {
    left: 20px;
  }

  .discover-books-collection-cover.is-3 {
    left: 39px;
  }

  .discover-books-hero-stage {
    min-height: 232px;
  }

  .discover-books-hero-card {
    border-radius: 18px;
  }

  .discover-books-hero-card > button {
    padding: 17px 17px 32px;
    grid-template-columns: minmax(0, 1fr) 110px;
    gap: 14px;
  }

  .discover-books-hero-copy {
    gap: 6px;
  }

  .discover-books-hero-copy > strong {
    font-size: clamp(1.62rem, 7.4vw, 2.05rem);
  }

  .discover-books-hero-copy > b {
    font-size: 0.78rem;
  }

  .discover-books-hero-copy > span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.72rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .discover-books-hero-copy > em {
    min-height: 32px;
    margin-top: 2px;
    padding-inline: 10px;
    border-radius: 9px;
    font-size: 0.62rem;
  }

  .discover-books-hero-cover {
    width: 108px;
  }

  .discover-short-reads-hero-object {
    width: 108px;
  }

  .discover-short-reads-hero-card .discover-books-hero-copy > strong {
    font-size: clamp(1.34rem, 6.35vw, 1.74rem);
    line-height: 0.98;
  }

  .discover-short-reads-hero-card .discover-books-hero-copy > b {
    font-size: 0.66rem;
    -webkit-line-clamp: 2;
  }

  .discover-books-shelves {
    gap: 17px;
  }

  .discover-books-shelf > header {
    min-height: 22px;
    gap: 12px;
  }

  .discover-books-shelf > header small {
    display: none;
  }

  .discover-books-shelf-rail {
    grid-auto-columns: clamp(94px, 25vw, 108px);
    gap: 11px;
  }

  .discover-books-shelf-copy > strong {
    font-size: clamp(0.74rem, 3.1vw, 0.84rem);
  }

  .discover-books-shelf-card {
    grid-template-rows: auto auto;
  }

  .discover-books-shelf-copy {
    min-height: 0;
    padding: 0 1px 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-books-hero-card {
    transition-duration: 140ms;
  }
}

@media (max-width: 360px) {
  .discover-books-hero-stage {
    min-height: 220px;
  }

  .discover-books-hero-card > button {
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 11px;
  }

  .discover-books-hero-cover {
    width: 90px;
  }

  .discover-short-reads-hero-object {
    width: 90px;
  }

  .discover-books-hero-copy > span {
    -webkit-line-clamp: 2;
  }

  .discover-books-shelf-rail {
    grid-auto-columns: 90px;
    gap: 10px;
  }
}

/* Keep the Research editorial accents above the later Browse compatibility rules. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial .discover-research-source-rail button:is(.is-active, .discover-live-source-menu) {
  border-bottom-color: var(--research-accent) !important;
  color: var(--research-accent) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial .discover-research-sort,
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial .discover-research-sort select {
  color: var(--research-accent) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) :is(
  .discover-research-feature,
  .discover-research-shelf-card,
  .discover-research-landmark
):active {
  transform: none !important;
}

/* Research Browse: mirror the Articles editorial rhythm with a purple science accent. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial {
  --research-accent: #805982;
  --research-accent-soft: rgba(128, 89, 130, 0.08);
  gap: 18px !important;
}

html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial {
  --research-accent: #b696c2;
  --research-accent-soft: rgba(182, 150, 194, 0.1);
}

.discover-research-suggestion-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.discover-research-suggestion-head > p {
  margin: 0 2px;
  color: var(--research-accent);
  font: 740 0.63rem/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-research-suggestion-head > button {
  min-height: 34px;
  padding: 0 2px 0 10px;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--research-accent);
  font: 650 0.72rem/1 var(--ui-font);
  box-shadow: none;
  transform: none !important;
}

.discover-research-suggestion-head > button i {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  font-style: normal;
}

.discover-research-suggestion-head > button i::before {
  content: "↻";
  font: 500 1.08rem/1 var(--ui-font);
}

.discover-research-suggestion-head > button:is(:active, .is-tactile-press) {
  filter: brightness(1.08);
  transform: none !important;
}

.discover-research-suggestion-head > button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--research-accent) 58%, transparent);
  outline-offset: 2px;
}

.discover-research-suggested-card {
  border-color: color-mix(in srgb, var(--research-accent) 24%, var(--discover-line));
}

.discover-research-suggested-art,
.discover-research-row-art {
  border: 0;
  box-shadow: none;
}

.discover-research-suggested-art {
  border-radius: 0;
}

.discover-research-suggested-art::before,
.discover-research-suggested-art::after {
  display: none;
}

.discover-research-suggested-art > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.discover-research-suggested-copy > em {
  color: var(--research-accent);
}

.discover-research-suggested-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-browser .discover-live-source-menu,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-browser .discover-live-source-menu,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-browser .discover-live-source-menu {
  color: var(--research-accent) !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-topic-rail button.is-active,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-topic-rail button.is-active,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-research-topic-rail button.is-active {
  border-color: color-mix(in srgb, var(--research-accent) 68%, var(--discover-line)) !important;
  background: color-mix(in srgb, var(--research-accent) 8%, var(--discover-surface)) !important;
  color: var(--research-accent) !important;
}

.discover-research-row-art {
  border: 1px solid color-mix(in srgb, var(--research-accent) 20%, var(--discover-line));
  border-radius: 10px;
  background: var(--discover-surface-soft);
}

.discover-research-list:empty {
  display: none;
}

@media (max-width: 520px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .is-research-editorial {
    gap: 16px !important;
  }

  .discover-research-suggestion-head {
    min-height: 30px;
  }
}

/* Browse archives: Short Reads editorial shelves for letters, transcripts, and archive records. */
.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.discover-originals-landing {
  gap: clamp(20px, 3.5vw, 30px) !important;
}

.discover-originals-intro {
  padding: 4px 2px 0;
  display: grid;
  gap: 8px;
}

.discover-originals-intro > p,
.discover-originals-feature-section > header > p,
.discover-originals-section-head p {
  margin: 0;
  color: var(--discover-coral);
  font: 740 0.63rem/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-originals-intro > h1 {
  max-width: 14ch;
  margin: 0;
  color: var(--discover-text);
  font: 480 clamp(2.25rem, 7.4vw, 4.15rem)/0.94 var(--ui-font);
  letter-spacing: -0.04em;
}

.discover-originals-intro > span {
  max-width: 61ch;
  color: var(--discover-muted);
  font: 470 clamp(0.82rem, 2vw, 0.98rem)/1.48 var(--ui-font);
}

.discover-short-reads-article-shelves {
  min-width: 0;
  display: grid;
  gap: clamp(18px, 3vw, 26px);
}

.discover-short-reads-subroute-head {
  min-height: 90px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
}

.discover-short-reads-subroute-head > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.discover-short-reads-subroute-head small {
  color: var(--discover-coral);
  font: 740 0.58rem/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-short-reads-subroute-head h1 {
  margin: 0;
  color: var(--discover-text);
  font: 480 clamp(2rem, 5.8vw, 3.4rem)/0.96 var(--ui-font);
  letter-spacing: -0.04em;
}

.discover-short-reads-subroute-head span {
  max-width: 48ch;
  color: var(--discover-muted);
  font: 470 clamp(0.76rem, 1.8vw, 0.9rem)/1.4 var(--ui-font);
}

.discover-curiosity-route {
  --curiosity-wood-dark: #28100b;
  --curiosity-wood-mid: #54271d;
  --curiosity-wood-light: #875538;
  --curiosity-brass-dark: #77501f;
  --curiosity-brass: #c5a261;
  --curiosity-brass-light: #ead39a;
  --curiosity-velvet: #171c22;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 226px;
  padding: clamp(15px, 2.5vw, 21px);
  border: 7px solid var(--curiosity-wood-dark);
  border-radius: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(148px, 24vw, 202px);
  align-items: stretch;
  gap: clamp(14px, 3vw, 25px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 80% 40%, rgba(24, 14, 31, 0.22), transparent 36%),
    linear-gradient(90deg, rgba(255, 228, 186, 0.09), transparent 5% 48%, rgba(29, 8, 8, 0.25) 72%, transparent 94%),
    repeating-linear-gradient(7deg, rgba(46, 18, 7, 0.13) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, var(--curiosity-wood-light), var(--curiosity-wood-mid) 46%, #351719 78%, #653420);
  color: #f8efdc;
  text-align: left;
  box-shadow:
    0 19px 36px rgba(44, 24, 13, 0.22),
    0 3px 6px rgba(44, 24, 13, 0.19),
    inset 0 0 0 1px rgba(238, 188, 124, 0.52),
    inset 0 0 0 5px rgba(48, 19, 8, 0.45);
  transform: none !important;
  appearance: none;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 260ms ease;
}

.discover-curiosity-route::before,
.discover-curiosity-route::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.discover-curiosity-route::before {
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(255, 227, 182, 0.12), transparent 31%),
    radial-gradient(ellipse at 91% 106%, rgba(18, 7, 26, 0.28), transparent 39%),
    repeating-linear-gradient(92deg, transparent 0 23px, rgba(35, 12, 4, 0.11) 24px, transparent 26px 48px);
  opacity: 0.82;
}

.discover-curiosity-route::after {
  z-index: 3;
  inset: 4px;
  border: 1px solid rgba(230, 177, 111, 0.35);
  border-radius: 3px;
  box-shadow: inset 0 0 0 3px rgba(41, 15, 6, 0.2);
}

.discover-curiosity-route:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

.discover-curiosity-route:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--curiosity-brass-light) 76%, white);
  outline-offset: 4px;
}

.discover-curiosity-route-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: clamp(18px, 3.4vw, 30px);
  border: 1px solid rgba(231, 207, 164, 0.28);
  border-radius: 3px;
  display: grid;
  align-content: center;
  gap: 8px;
  overflow: hidden;
  background:
    linear-gradient(116deg, rgba(255, 255, 255, 0.08), transparent 22% 76%, rgba(255, 255, 255, 0.035)),
    radial-gradient(circle at 14% 0%, rgba(66, 104, 91, 0.29), transparent 38%),
    radial-gradient(circle at 92% 118%, rgba(73, 42, 79, 0.36), transparent 42%),
    linear-gradient(145deg, #20332f, var(--curiosity-velvet) 62%, #111216);
  box-shadow:
    0 0 0 4px rgba(53, 22, 10, 0.72),
    0 0 0 5px rgba(209, 137, 76, 0.42),
    inset 0 16px 28px rgba(2, 12, 10, 0.3),
    inset 0 -1px 0 rgba(241, 224, 191, 0.08);
  text-shadow: 0 1px 1px rgba(4, 12, 10, 0.5);
}

.discover-curiosity-route-copy::before {
  position: absolute;
  top: -44px;
  right: -34px;
  width: 108px;
  aspect-ratio: 1;
  border: 1px solid rgba(217, 190, 139, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 9px rgba(217, 190, 139, 0.035),
    0 0 0 18px rgba(217, 190, 139, 0.025);
  pointer-events: none;
  content: "";
  opacity: 0.68;
}

.discover-curiosity-route-copy > strong {
  color: #fff6e4;
  font: 480 clamp(1.55rem, 4.6vw, 2.45rem)/1 var(--ui-font);
  letter-spacing: -0.03em;
}

.discover-curiosity-route-copy > span {
  max-width: 58ch;
  color: rgba(239, 229, 207, 0.79);
  font: 450 clamp(0.77rem, 1.8vw, 0.9rem)/1.42 var(--ui-font);
}

.discover-curiosity-route-copy > em {
  width: max-content;
  margin-top: 7px;
  padding: 7px 10px 6px;
  border: 1px solid var(--curiosity-brass-dark);
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255, 245, 207, 0.46), transparent 43%),
    linear-gradient(135deg, var(--curiosity-brass-light), var(--curiosity-brass) 48%, #9a6c31);
  color: #321e0c;
  font: 700 0.64rem/1 var(--ui-font);
  font-style: normal;
  letter-spacing: 0.025em;
  box-shadow:
    0 2px 3px rgba(3, 10, 8, 0.3),
    inset 0 0 0 1px rgba(255, 244, 203, 0.3);
  text-shadow: 0 1px rgba(255, 243, 201, 0.45);
}

.discover-curiosity-route-copy > em i {
  margin-left: 5px;
  font-style: normal;
}

.discover-curiosity-cabinet {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 202px;
  height: 100%;
  min-height: 174px;
  justify-self: end;
  padding: 10px 9px 39px;
  border: 3px solid #2a1209;
  border-radius: 4px 4px 3px 3px;
  background:
    repeating-linear-gradient(6deg, rgba(33, 12, 4, 0.12) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #875137, #47201a 56%, #63351f);
  box-shadow:
    0 6px 13px rgba(25, 10, 4, 0.35),
    inset 0 0 0 2px rgba(226, 162, 92, 0.24),
    inset 0 -8px 14px rgba(35, 12, 4, 0.24);
  transform: rotate(0.35deg);
  transform-origin: 18% 50%;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(0.2, 0.78, 0.2, 1), box-shadow 360ms ease;
}

.discover-curiosity-cabinet::before {
  position: absolute;
  z-index: -1;
  top: -12px;
  right: 7px;
  left: 7px;
  height: 15px;
  border: 2px solid #2a1209;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, #98613f, #4a2119);
  box-shadow: inset 0 1px rgba(244, 197, 137, 0.28);
  clip-path: polygon(0 100%, 0 42%, 8% 42%, 13% 12%, 39% 12%, 48% 0, 57% 12%, 87% 12%, 92% 42%, 100% 42%, 100% 100%);
  content: "";
}

.discover-curiosity-cabinet::after {
  position: absolute;
  z-index: 3;
  top: 11px;
  right: 11px;
  width: 42px;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 100% 0%, transparent 0 28%, rgba(224, 215, 194, 0.18) 29% 30%, transparent 31% 47%, rgba(224, 215, 194, 0.14) 48% 49%, transparent 50%),
    linear-gradient(135deg, transparent 49%, rgba(224, 215, 194, 0.17) 50% 51%, transparent 52%),
    linear-gradient(156deg, transparent 49%, rgba(224, 215, 194, 0.13) 50% 51%, transparent 52%),
    linear-gradient(114deg, transparent 49%, rgba(224, 215, 194, 0.12) 50% 51%, transparent 52%);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
  content: "";
  opacity: 0.8;
}

.discover-curiosity-cabinet-display {
  position: relative;
  height: calc(100% - 1px);
  min-height: 118px;
  border: 2px solid #32170c;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
  overflow: hidden;
  background: #4b2414;
  box-shadow:
    inset 0 0 0 1px rgba(232, 181, 116, 0.18),
    0 1px rgba(238, 187, 124, 0.18);
}

.discover-curiosity-cabinet-display::after {
  position: absolute;
  inset: -16% -55%;
  background: linear-gradient(112deg, transparent 37%, rgba(255, 255, 255, 0.13) 46%, rgba(255, 255, 255, 0.035) 53%, transparent 61%);
  pointer-events: none;
  content: "";
  transform: translateX(-24%);
  transition: transform 760ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

.discover-curiosity-cabinet-display > i {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(31, 13, 7, 0.68);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(61, 86, 80, 0.25), transparent 48%),
    radial-gradient(circle at 85% 92%, rgba(69, 41, 72, 0.2), transparent 54%),
    linear-gradient(145deg, #1d2b2a, #0d1013);
  box-shadow:
    inset 0 9px 14px rgba(0, 0, 0, 0.34),
    inset 0 -1px rgba(229, 210, 170, 0.08);
}

.discover-curiosity-cabinet-display > i::before,
.discover-curiosity-cabinet-display > i::after {
  position: absolute;
  content: "";
}

.discover-curiosity-cabinet-display > .is-shell::before {
  width: 27px;
  aspect-ratio: 1.16;
  border: 2px solid #cdb78f;
  border-radius: 52% 48% 52% 44%;
  background: repeating-radial-gradient(circle at 54% 49%, #d8c49f 0 2px, #9d815a 2px 3px, transparent 3px 6px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.32);
  transform: rotate(-11deg);
}

.discover-curiosity-cabinet-display > .is-shell::after {
  width: 11px;
  height: 6px;
  margin: 19px 0 0 19px;
  border-bottom: 2px solid #cdb78f;
  border-radius: 50%;
  transform: rotate(-18deg);
}

.discover-curiosity-cabinet-display > .is-vial::before {
  bottom: 11px;
  width: 16px;
  height: 29px;
  border: 1px solid rgba(220, 231, 213, 0.72);
  border-radius: 4px 4px 6px 6px;
  background: linear-gradient(to top, #698173 0 43%, rgba(192, 217, 207, 0.13) 44% 100%);
  box-shadow: inset 3px 0 rgba(255, 255, 255, 0.12), 0 3px 5px rgba(0, 0, 0, 0.34);
}

.discover-curiosity-cabinet-display > .is-vial::after {
  bottom: 40px;
  width: 12px;
  height: 6px;
  border-radius: 2px 2px 1px 1px;
  background: #9b7146;
  box-shadow: 0 1px #5d3d25;
}

.discover-curiosity-cabinet-display > .is-eye::before {
  width: 34px;
  height: 21px;
  border: 1px solid rgba(205, 188, 151, 0.66);
  background: radial-gradient(circle at 50% 48%, #a99a69 0 34%, #d0c19f 36% 58%, #766954 60% 67%, transparent 69%);
  clip-path: polygon(0 50%, 17% 19%, 50% 4%, 83% 19%, 100% 50%, 83% 81%, 50% 96%, 17% 81%);
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.42));
  transform: rotate(-7deg);
}

.discover-curiosity-cabinet-display > .is-eye::after {
  width: 7px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #100f0d;
  box-shadow: inset 1px 1px rgba(255, 244, 199, 0.12);
  transform: translate(0, -1px);
  transition: transform 540ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.discover-curiosity-cabinet-display > .is-key::before {
  width: 13px;
  aspect-ratio: 1;
  margin: -11px 0 0 -18px;
  border: 3px solid #c3a15f;
  border-radius: 50%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.32);
}

.discover-curiosity-cabinet-display > .is-key::after {
  width: 29px;
  height: 4px;
  border-radius: 3px;
  background: #c3a15f;
  box-shadow: 10px 4px 0 -1px #c3a15f, 16px 4px 0 -1px #c3a15f;
  transform: translate(8px, 7px) rotate(-38deg);
  transform-origin: left center;
}

.discover-curiosity-cabinet-drawers {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  height: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.discover-curiosity-cabinet-drawers > i {
  position: relative;
  border: 1px solid #32160a;
  border-radius: 1px;
  background:
    linear-gradient(180deg, rgba(242, 194, 131, 0.2), transparent 42%),
    linear-gradient(135deg, #87502e, #542613);
  box-shadow: inset 0 0 0 1px rgba(219, 151, 82, 0.2), 0 1px 2px rgba(28, 10, 4, 0.45);
}

.discover-curiosity-cabinet-drawers > i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  aspect-ratio: 1;
  border: 1px solid #6f491c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0d79c, #a57936 58%, #684517);
  box-shadow: 0 1px 1px rgba(29, 11, 4, 0.55);
  content: "";
  transform: translate(-50%, -50%);
}

.discover-curiosity-cabinet-drawers > i:nth-child(2)::after {
  display: none;
}

.discover-curiosity-cabinet-drawers > i:first-child {
  transform: rotate(0.7deg) translateY(1px);
}

.discover-curiosity-cabinet-drawers > i:nth-child(2) {
  transform: translateY(-1px);
}

.discover-curiosity-cabinet-drawers > i:last-child {
  transform: rotate(-0.85deg) translateY(1px);
}

.discover-curiosity-route-mark {
  position: absolute;
  z-index: 2;
  bottom: 11px;
  left: 50%;
  min-width: 42px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--curiosity-brass-dark);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background:
    linear-gradient(180deg, rgba(255, 245, 207, 0.48), transparent 46%),
    linear-gradient(135deg, var(--curiosity-brass-light), var(--curiosity-brass) 55%, #9b6b30);
  color: #3c250d;
  box-shadow: 0 1px 2px rgba(30, 11, 4, 0.5), inset 0 0 0 1px rgba(255, 245, 210, 0.18);
  text-shadow: 0 1px rgba(255, 241, 193, 0.55);
  transform: translateX(-50%);
}

.discover-curiosity-route-mark > b {
  font: 700 0.72rem/1 var(--ui-font);
}

.discover-curiosity-route-mark > i {
  color: #563716;
  font: 740 0.36rem/1 var(--ui-font);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
  .discover-curiosity-route:hover {
    border-color: #2a1209;
    box-shadow:
      0 23px 43px rgba(44, 24, 13, 0.27),
      0 4px 8px rgba(44, 24, 13, 0.2),
      inset 0 0 0 1px rgba(244, 201, 144, 0.58),
      inset 0 0 0 5px rgba(48, 19, 8, 0.48);
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet {
    box-shadow:
      4px 9px 17px rgba(25, 10, 4, 0.42),
      inset 0 0 0 2px rgba(235, 178, 112, 0.28),
      inset 0 -8px 14px rgba(35, 12, 4, 0.24);
    transform: perspective(720px) rotateY(-2.5deg) rotateZ(-0.35deg) translateY(-2px);
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet-display::after {
    transform: translateX(24%);
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet-display > .is-eye::after {
    transform: translate(3px, -2px);
  }
}

html.theme-dark .discover-curiosity-route,
body.theme-dark .discover-curiosity-route {
  box-shadow:
    0 21px 42px rgba(0, 0, 0, 0.42),
    0 3px 7px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(238, 188, 124, 0.5),
    inset 0 0 0 5px rgba(28, 10, 4, 0.56);
}

@media (max-width: 520px) {
  .discover-curiosity-route {
    min-height: 206px;
    padding: 10px;
    border-width: 5px;
    border-radius: 8px;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 11px;
  }

  .discover-curiosity-route::after {
    inset: 2px;
    border-radius: 3px;
  }

  .discover-curiosity-route-copy {
    padding: 14px 13px;
    gap: 6px;
    box-shadow:
      0 0 0 3px rgba(53, 22, 10, 0.72),
      0 0 0 4px rgba(209, 137, 76, 0.4),
      inset 0 12px 22px rgba(2, 12, 10, 0.3);
  }

  .discover-curiosity-route-copy > strong {
    font-size: clamp(1.25rem, 6vw, 1.62rem);
  }

  .discover-curiosity-route-copy > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .discover-curiosity-route-copy > em {
    margin-top: 5px;
    padding: 6px 8px 5px;
    font-size: 0.58rem;
  }

  .discover-curiosity-cabinet {
    min-height: 154px;
    padding: 8px 6px 32px;
    border-width: 2px;
  }

  .discover-curiosity-cabinet::before {
    top: -8px;
    right: 5px;
    left: 5px;
    height: 9px;
    border-width: 1px;
  }

  .discover-curiosity-cabinet-display {
    min-height: 111px;
    gap: 3px;
  }

  .discover-curiosity-cabinet-display > .is-shell::before {
    width: 22px;
  }

  .discover-curiosity-cabinet-display > .is-vial::before {
    bottom: 8px;
    width: 13px;
    height: 24px;
  }

  .discover-curiosity-cabinet-display > .is-vial::after {
    bottom: 32px;
    width: 10px;
  }

  .discover-curiosity-cabinet-display > .is-eye::before {
    width: 28px;
    height: 18px;
  }

  .discover-curiosity-cabinet-display > .is-key::before {
    margin-left: -15px;
  }

  .discover-curiosity-cabinet-display > .is-key::after {
    width: 24px;
  }

  .discover-curiosity-cabinet-drawers {
    right: 5px;
    bottom: 5px;
    left: 5px;
    height: 23px;
    gap: 2px;
  }

  .discover-curiosity-route-mark {
    bottom: 7px;
    min-width: 35px;
    height: 14px;
    padding-inline: 3px;
  }

  .discover-curiosity-route-mark > b {
    font-size: 0.58rem;
  }

  .discover-curiosity-route-mark > i {
    font-size: 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-curiosity-route,
  .discover-curiosity-cabinet,
  .discover-curiosity-cabinet-display::after,
  .discover-curiosity-cabinet-display > .is-eye::after {
    transition: none !important;
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet {
    transform: rotate(0.35deg);
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet-display > .is-eye::after {
    transform: translate(0, -1px);
  }
}

/* Cabinet entrance: reference-led leather folio and six-bay evidence cabinet. */
.discover-curiosity-route {
  min-height: 0;
  aspect-ratio: 1.59;
  padding: clamp(5px, 0.85vw, 8px);
  border: 2px solid #24170d;
  border-radius: 9px;
  grid-template-columns: minmax(0, 56%) minmax(0, 44%);
  align-items: stretch;
  gap: 0;
  background:
    repeating-linear-gradient(6deg, rgba(25, 10, 4, 0.15) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, #5a3824, #26140d 48%, #432719);
  box-shadow:
    0 20px 38px rgba(13, 10, 7, 0.28),
    0 3px 7px rgba(20, 11, 6, 0.34),
    inset 0 0 0 1px rgba(209, 169, 101, 0.58),
    inset 0 0 0 4px rgba(27, 14, 8, 0.72);
}

.discover-curiosity-route::before {
  z-index: 2;
  inset: 2px;
  border: 1px solid rgba(188, 143, 71, 0.68);
  border-radius: 5px;
  background:
    radial-gradient(circle at 6px 6px, #b38a4c 0 1px, transparent 1.7px),
    radial-gradient(circle at calc(100% - 6px) 6px, #b38a4c 0 1px, transparent 1.7px),
    radial-gradient(circle at 6px calc(100% - 6px), #b38a4c 0 1px, transparent 1.7px),
    radial-gradient(circle at calc(100% - 6px) calc(100% - 6px), #b38a4c 0 1px, transparent 1.7px);
  opacity: 0.72;
}

.discover-curiosity-route::after {
  z-index: 3;
  inset: 5px;
  border: 1px solid rgba(159, 115, 56, 0.5);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px rgba(15, 9, 5, 0.52),
    inset 0 0 0 3px rgba(196, 147, 74, 0.17);
}

.discover-curiosity-route-copy {
  padding: clamp(20px, 4.7vw, 50px) clamp(17px, 4vw, 42px);
  border: 0;
  border-right: 2px solid rgba(42, 24, 14, 0.92);
  border-radius: 3px 0 0 3px;
  align-content: center;
  gap: clamp(9px, 1.7vw, 18px);
  background:
    radial-gradient(circle at 91% 92%, rgba(103, 82, 50, 0.1), transparent 28%),
    radial-gradient(circle at 9% 0%, rgba(73, 105, 90, 0.18), transparent 36%),
    repeating-linear-gradient(96deg, rgba(235, 220, 180, 0.018) 0 1px, transparent 1px 7px),
    linear-gradient(145deg, #1a2b28, #111e1c 64%, #0c1514);
  box-shadow:
    inset 13px 0 24px rgba(0, 0, 0, 0.24),
    inset -10px 0 19px rgba(0, 0, 0, 0.23),
    inset 0 0 0 1px rgba(222, 196, 140, 0.09);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.62);
}

.discover-curiosity-route-copy::before {
  top: auto;
  right: -24px;
  bottom: -34px;
  width: clamp(76px, 14vw, 136px);
  border-color: rgba(202, 171, 111, 0.12);
  box-shadow:
    0 0 0 8px rgba(202, 171, 111, 0.018),
    0 0 0 17px rgba(202, 171, 111, 0.014);
  opacity: 0.8;
}

.discover-curiosity-route-copy > strong {
  position: relative;
  z-index: 1;
  color: #eee1c5;
  font: 455 clamp(1.85rem, 5.5vw, 3.75rem)/0.98 var(--ui-font);
  line-height: 0.98 !important;
  letter-spacing: -0.035em;
  padding-bottom: 0.08em !important;
}

.discover-curiosity-route-copy > span {
  position: relative;
  z-index: 1;
  max-width: 28ch;
  color: rgba(231, 216, 183, 0.88);
  font: 445 clamp(0.76rem, 1.8vw, 1.05rem)/1.48 var(--ui-font);
}

.discover-curiosity-route-copy > em {
  position: relative;
  z-index: 1;
  margin-top: clamp(3px, 0.8vw, 9px);
  padding: clamp(7px, 1.3vw, 11px) clamp(11px, 2vw, 19px);
  border-color: #61431f;
  border-radius: 2px;
  background:
    radial-gradient(circle at 5px 5px, rgba(76, 46, 18, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 5px) 5px, rgba(76, 46, 18, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 5px calc(100% - 5px), rgba(76, 46, 18, 0.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), rgba(76, 46, 18, 0.65) 0 1px, transparent 1.5px),
    linear-gradient(145deg, #d3bd8b, #a98b56);
  color: #24170b;
  font: 530 clamp(0.7rem, 1.55vw, 0.92rem)/1 var(--ui-font);
  letter-spacing: 0;
  box-shadow:
    0 3px 5px rgba(0, 0, 0, 0.36),
    inset 0 0 0 1px rgba(245, 226, 176, 0.32),
    inset 0 -3px 5px rgba(92, 61, 27, 0.18);
  text-shadow: 0 1px rgba(242, 221, 168, 0.48);
}

.discover-curiosity-route-copy > em i {
  margin-left: clamp(7px, 1.2vw, 13px);
  font-family: var(--ui-font);
  font-size: 1.1em;
}

.discover-curiosity-cabinet {
  max-width: none;
  min-height: 0;
  height: 100%;
  padding: clamp(7px, 1.2vw, 12px) clamp(22px, 4.2vw, 39px) clamp(35px, 6vw, 56px) clamp(6px, 1vw, 10px);
  border: 0;
  border-left: 3px solid #2a160d;
  border-radius: 0 3px 3px 0;
  background:
    repeating-linear-gradient(7deg, rgba(23, 9, 4, 0.18) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #684029, #2b160f 52%, #42271a);
  box-shadow:
    inset 7px 0 12px rgba(0, 0, 0, 0.36),
    inset -8px 0 12px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(205, 149, 79, 0.2);
  transform: none;
}

.discover-curiosity-cabinet::before {
  display: none;
}

.discover-curiosity-cabinet::after {
  top: clamp(8px, 1.3vw, 13px);
  right: clamp(26px, 4.8vw, 44px);
  width: clamp(28px, 5.2vw, 48px);
  opacity: 0.36;
}

.discover-curiosity-cabinet-display {
  height: 100%;
  min-height: 0;
  padding: clamp(2px, 0.5vw, 5px);
  border: 2px solid #24120a;
  grid-template-columns: 0.88fr 1.12fr;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: clamp(2px, 0.45vw, 4px);
  background:
    repeating-linear-gradient(8deg, rgba(21, 8, 3, 0.18) 0 1px, transparent 1px 7px),
    #3c2115;
  box-shadow:
    inset 0 0 0 2px rgba(156, 100, 49, 0.2),
    0 2px rgba(219, 160, 86, 0.15);
}

.discover-curiosity-cabinet-display::after {
  inset: -18% -65%;
  z-index: 4;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 244, 218, 0.08) 47%, rgba(255, 255, 255, 0.018) 52%, transparent 60%);
  transform: translateX(-28%);
}

.discover-curiosity-cabinet-display > i {
  border-color: rgba(26, 12, 7, 0.84);
  background:
    radial-gradient(circle at 50% 16%, rgba(105, 79, 55, 0.13), transparent 50%),
    linear-gradient(145deg, #241914, #110d0b);
  box-shadow:
    inset 0 10px 16px rgba(0, 0, 0, 0.48),
    inset 0 -1px rgba(210, 170, 111, 0.08),
    0 0 0 1px rgba(112, 69, 34, 0.42);
}

.discover-curiosity-cabinet-display > .is-vial::before {
  top: 27%;
  bottom: auto;
  width: clamp(13px, 2.4vw, 24px);
  height: 56%;
  max-height: 54px;
  border-color: rgba(215, 213, 190, 0.56);
  background:
    linear-gradient(to bottom, transparent 0 47%, rgba(196, 173, 122, 0.76) 48% 63%, transparent 64%),
    linear-gradient(to top, #565d48 0 39%, rgba(180, 196, 174, 0.09) 40% 100%);
}

.discover-curiosity-cabinet-display > .is-vial::after {
  top: 19%;
  bottom: auto;
  width: clamp(10px, 1.9vw, 18px);
  height: clamp(5px, 0.8vw, 8px);
  background: #74543a;
}

.discover-curiosity-cabinet-display > .is-file::before {
  width: 78%;
  height: 61%;
  border: 1px solid rgba(77, 50, 25, 0.82);
  background:
    repeating-linear-gradient(to bottom, transparent 0 17%, rgba(85, 61, 34, 0.12) 18% 20%),
    linear-gradient(145deg, #c2a979, #826a45);
  clip-path: polygon(0 14%, 34% 14%, 39% 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.46), inset 0 0 0 2px rgba(239, 218, 169, 0.16);
  transform: rotate(1.5deg);
}

.discover-curiosity-cabinet-display > .is-file::after {
  width: 60%;
  color: #3b2b1b;
  content: "CASE FILE\A No. 27\A Observation";
  font: 650 clamp(0.21rem, 0.58vw, 0.44rem)/1.25 var(--ui-font);
  white-space: pre;
  transform: translate(-3%, 4%) rotate(1.5deg);
}

.discover-curiosity-cabinet-display > .is-photo::before {
  width: 76%;
  height: 62%;
  border: clamp(2px, 0.45vw, 4px) solid #5d4b35;
  background:
    linear-gradient(88deg, transparent 0 48%, rgba(32, 28, 24, 0.72) 49% 51%, transparent 52%) 50% 42% / 42% 58% no-repeat,
    linear-gradient(165deg, transparent 0 53%, rgba(30, 27, 24, 0.62) 54% 58%, transparent 59%) 50% 60% / 68% 30% no-repeat,
    radial-gradient(circle at 26% 24%, rgba(218, 207, 179, 0.58) 0 5%, transparent 6%),
    linear-gradient(to bottom, #827b6d 0 48%, #47453f 49% 55%, #252525 56% 100%);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.55), inset 0 0 10px rgba(20, 14, 10, 0.46);
  filter: sepia(0.42) saturate(0.72);
  transform: rotate(-2deg);
}

.discover-curiosity-cabinet-display > .is-photo::after {
  width: 64%;
  height: 1px;
  background: rgba(229, 216, 183, 0.22);
  box-shadow: 0 3px rgba(20, 18, 16, 0.7), 0 -4px rgba(29, 26, 22, 0.44);
  transform: translateY(11px) rotate(-2deg);
}

.discover-curiosity-cabinet-display > .is-tag::before {
  width: 52%;
  height: 65%;
  border: 1px solid rgba(80, 51, 24, 0.78);
  background:
    radial-gradient(circle at 50% 9%, #2a1b11 0 4%, rgba(111, 78, 39, 0.8) 5% 7%, transparent 8%),
    linear-gradient(150deg, #b3945d, #77582f);
  clip-path: polygon(20% 0, 80% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(226, 196, 137, 0.12);
  transform: rotate(-5deg);
  transition: transform 420ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.discover-curiosity-cabinet-display > .is-tag::after {
  color: #332213;
  content: "EVIDENCE\A A-19";
  font: 720 clamp(0.24rem, 0.62vw, 0.48rem)/1.2 var(--ui-font);
  letter-spacing: 0.02em;
  text-align: center;
  white-space: pre;
  transform: translateY(7%) rotate(-5deg);
  transition: transform 420ms cubic-bezier(0.2, 0.76, 0.2, 1);
}

.discover-curiosity-cabinet-display > .is-lens::before {
  width: clamp(21px, 4.4vw, 43px);
  aspect-ratio: 1;
  border: clamp(2px, 0.45vw, 4px) solid #806038;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(203, 194, 166, 0.16), rgba(22, 25, 24, 0.68) 65%);
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(25, 15, 9, 0.7);
  transform: translate(-6%, -5%);
}

.discover-curiosity-cabinet-display > .is-lens::after {
  width: clamp(4px, 0.75vw, 7px);
  height: clamp(18px, 3vw, 29px);
  border-radius: 4px;
  background: linear-gradient(90deg, #4b2d17, #a3783e, #3d2415);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
  transform: translate(14px, 15px) rotate(-43deg);
}

.discover-curiosity-cabinet-display > .is-stone::before {
  width: 68%;
  height: 61%;
  background:
    linear-gradient(132deg, transparent 0 36%, rgba(167, 149, 117, 0.22) 38% 40%, transparent 42%),
    radial-gradient(circle at 64% 28%, #625744, #302a23 48%, #171410 78%);
  clip-path: polygon(15% 8%, 61% 0, 94% 25%, 100% 64%, 72% 94%, 28% 87%, 0 55%);
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.52));
  transform: rotate(7deg);
}

.discover-curiosity-cabinet-display > .is-stone::after {
  width: 42%;
  height: 1px;
  background: rgba(192, 177, 146, 0.22);
  box-shadow: 8px 5px rgba(171, 151, 119, 0.13), -5px -5px rgba(205, 187, 151, 0.1);
  transform: rotate(-24deg);
}

.discover-curiosity-cabinet-drawers {
  right: clamp(22px, 4.2vw, 39px);
  bottom: clamp(6px, 1vw, 10px);
  left: clamp(6px, 1vw, 10px);
  height: clamp(27px, 5vw, 47px);
  grid-template-columns: 0.86fr 1.14fr;
  align-items: start;
  gap: clamp(3px, 0.6vw, 6px);
}

.discover-curiosity-cabinet-drawers > i {
  height: 72%;
  border-color: #251108;
  background:
    linear-gradient(180deg, rgba(222, 167, 98, 0.16), transparent 38%),
    repeating-linear-gradient(7deg, rgba(31, 12, 4, 0.12) 0 1px, transparent 1px 6px),
    linear-gradient(135deg, #704329, #35190f);
}

.discover-curiosity-cabinet-drawers > i:first-child {
  transform: none;
}

.discover-curiosity-cabinet-drawers > i:nth-child(2) {
  z-index: 2;
  height: 84%;
  box-shadow:
    0 8px 9px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(204, 144, 72, 0.18);
  transform: translate(7px, 5px) scaleX(1.04);
  transform-origin: left top;
  transition: transform 430ms cubic-bezier(0.2, 0.76, 0.2, 1), box-shadow 430ms ease;
}

.discover-curiosity-cabinet-drawers > i:nth-child(2)::after {
  display: block;
}

.discover-curiosity-route-mark {
  bottom: clamp(3px, 0.45vw, 5px);
  left: 25%;
  min-width: clamp(34px, 6vw, 57px);
  height: clamp(13px, 2vw, 19px);
  padding-inline: clamp(3px, 0.65vw, 6px);
  border-color: #65431d;
  background: linear-gradient(145deg, #c5a666, #8d682f);
}

.discover-curiosity-cabinet-door {
  position: absolute;
  z-index: 3;
  top: clamp(6px, 1vw, 10px);
  right: clamp(2px, 0.4vw, 4px);
  bottom: clamp(6px, 1vw, 10px);
  width: clamp(18px, 3.6vw, 33px);
  border: 2px solid #261208;
  border-radius: 1px;
  background:
    radial-gradient(circle at 63% 50%, #c19a55 0 2px, #65421d 3px, transparent 4px),
    repeating-linear-gradient(6deg, rgba(30, 11, 4, 0.14) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #4c2818, #825031 46%, #3a1c11);
  box-shadow:
    -5px 0 8px rgba(0, 0, 0, 0.38),
    inset 0 0 0 3px rgba(25, 11, 5, 0.38),
    inset 0 0 0 4px rgba(194, 135, 68, 0.14);
  transform: perspective(340px) rotateY(-7deg);
  transform-origin: right center;
  transition: transform 520ms cubic-bezier(0.2, 0.78, 0.2, 1), box-shadow 420ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .discover-curiosity-route:hover .discover-curiosity-cabinet {
    transform: none;
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet-door {
    box-shadow:
      -8px 1px 12px rgba(0, 0, 0, 0.46),
      inset 0 0 0 3px rgba(25, 11, 5, 0.38),
      inset 0 0 0 4px rgba(194, 135, 68, 0.14);
    transform: perspective(340px) rotateY(-15deg);
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet-drawers > i:nth-child(2) {
    transform: translate(9px, 7px) scaleX(1.055);
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet-display > .is-tag::before,
  .discover-curiosity-route:hover .discover-curiosity-cabinet-display > .is-tag::after {
    transform: translateY(2%) rotate(-7deg);
  }
}

html.theme-dark .discover-curiosity-route,
body.theme-dark .discover-curiosity-route {
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.48),
    0 3px 8px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(209, 169, 101, 0.58),
    inset 0 0 0 4px rgba(18, 9, 5, 0.82);
}

@media (max-width: 520px) {
  .discover-curiosity-route {
    min-height: 0;
    aspect-ratio: 1.55;
    padding: 5px;
    border-width: 2px;
    border-radius: 8px;
    grid-template-columns: minmax(0, 56%) minmax(0, 44%);
    gap: 0;
  }

  .discover-curiosity-route-copy {
    padding: clamp(15px, 5vw, 21px) clamp(12px, 3.9vw, 17px);
    gap: clamp(7px, 2.4vw, 11px);
  }

  .discover-curiosity-route-copy > strong {
    font-size: clamp(1.64rem, 7.35vw, 2rem);
  }

  .discover-curiosity-route-copy > span {
    display: block;
    color: rgba(231, 216, 183, 0.86);
    font-size: clamp(0.66rem, 3vw, 0.78rem);
    line-height: 1.43;
  }

  .discover-curiosity-route-copy > em {
    margin-top: 1px;
    padding: 7px 9px;
    font-size: clamp(0.64rem, 2.8vw, 0.72rem);
  }

  .discover-curiosity-cabinet {
    min-height: 0;
    padding: 7px 22px 34px 6px;
    border-width: 0 0 0 2px;
  }

  .discover-curiosity-cabinet-display {
    min-height: 0;
    padding: 2px;
    gap: 2px;
  }

  .discover-curiosity-cabinet-drawers {
    right: 22px;
    bottom: 6px;
    left: 6px;
    height: 28px;
    gap: 3px;
  }

  .discover-curiosity-route-mark {
    bottom: 3px;
    left: 25%;
    min-width: 34px;
    height: 13px;
  }

  .discover-curiosity-cabinet-door {
    top: 6px;
    right: 2px;
    bottom: 6px;
    width: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-curiosity-cabinet-door,
  .discover-curiosity-cabinet-drawers > i:nth-child(2),
  .discover-curiosity-cabinet-display > .is-tag::before,
  .discover-curiosity-cabinet-display > .is-tag::after {
    transition: none !important;
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet-door {
    transform: perspective(340px) rotateY(-7deg);
  }

  .discover-curiosity-route:hover .discover-curiosity-cabinet-drawers > i:nth-child(2) {
    transform: translate(7px, 5px) scaleX(1.04);
  }
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-originals-route-rail {
  margin-top: -3px;
  padding-right: max(18px, env(safe-area-inset-right)) !important;
}

.discover-originals-feature-section,
.discover-originals-short-section,
.discover-originals-room-section,
.discover-originals-editorial-shelf {
  min-width: 0;
  display: grid;
  gap: 11px;
}

.discover-originals-feature-section > header,
.discover-originals-section-head {
  min-height: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
}

.discover-originals-feature-section > header {
  justify-content: flex-end;
}

.discover-originals-feature-refresh {
  min-height: 32px;
  padding: 0 3px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--discover-muted);
  font: 640 0.67rem/1 var(--ui-font);
  transform: none !important;
}

.discover-originals-feature-refresh > i {
  color: var(--discover-coral-strong);
  font: 700 0.92rem/1 var(--ui-font);
  font-style: normal;
}

.discover-originals-feature-refresh:is(:active, .is-tactile-press) {
  color: var(--discover-text);
  transform: none !important;
}

.discover-originals-feature {
  position: relative;
  width: 100%;
  min-height: 286px;
  padding: clamp(22px, 5vw, 38px);
  border: 1px solid color-mix(in srgb, var(--discover-coral) 18%, var(--discover-line));
  border-radius: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(145px, 0.72fr);
  align-items: center;
  gap: clamp(20px, 5vw, 44px);
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 16%, color-mix(in srgb, var(--discover-amber) 19%, transparent), transparent 34%),
    linear-gradient(132deg, color-mix(in srgb, var(--discover-coral) 8%, var(--discover-surface)) 0 44%, var(--discover-surface) 82%);
  color: var(--discover-text);
  text-align: left;
  box-shadow: 0 20px 48px rgba(60, 44, 30, 0.1);
  transform: none !important;
}

.discover-originals-feature::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: linear-gradient(90deg, var(--discover-coral), transparent 64%);
  opacity: 0.7;
}

.discover-originals-feature:is(:active, .is-tactile-press) {
  filter: brightness(1.025);
  transform: none !important;
}

.discover-originals-feature-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 12px;
}

.discover-originals-feature-copy > small {
  color: var(--discover-coral-strong);
  font: 700 0.64rem/1.25 var(--ui-font);
  letter-spacing: 0.04em;
}

.discover-originals-feature-copy > strong {
  max-width: 15ch;
  color: var(--discover-text);
  font: 480 clamp(1.75rem, 5.2vw, 3rem)/0.98 var(--ui-font);
  letter-spacing: -0.035em;
}

.discover-originals-feature-copy > span {
  max-width: 48ch;
  color: var(--discover-muted);
  font: 450 clamp(0.78rem, 1.8vw, 0.92rem)/1.48 var(--ui-font);
}

.discover-originals-feature-copy > em {
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--discover-text);
  font: 650 0.69rem/1 var(--ui-font);
  font-style: normal;
}

.discover-originals-feature-copy > em > b {
  margin-left: 3px;
  color: var(--discover-coral-strong);
  font: 700 0.85rem/1 var(--ui-font);
}

.discover-originals-document-art {
  --original-paper: #eee5d2;
  --original-paper-line: rgba(71, 61, 50, 0.18);
  --original-ink: #413b34;
  --original-accent: #667f76;
  position: relative;
  width: 80px;
  aspect-ratio: 0.78;
  border-radius: 9px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--original-accent) 22%, transparent), transparent 38%),
    color-mix(in srgb, var(--discover-surface-soft) 84%, var(--original-accent));
}

.discover-originals-image-art {
  position: relative;
  width: 80px;
  aspect-ratio: 0.78;
  border: 1px solid color-mix(in srgb, var(--discover-line) 78%, transparent);
  border-radius: 9px;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--discover-surface-soft) 90%, #778087);
  box-shadow: 0 8px 18px rgba(20, 22, 26, 0.13);
}

.discover-originals-image-art::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(8, 10, 13, 0.2));
  pointer-events: none;
  content: "";
}

.discover-originals-image-art > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.035);
}

.discover-originals-image-art.is-hero {
  width: min(100%, 196px);
  border-radius: 13px;
  box-shadow: 0 21px 28px rgba(20, 22, 26, 0.24);
}

.discover-originals-document-art.is-coral { --original-accent: #d86659; }
.discover-originals-document-art.is-amber { --original-accent: #b98a4f; }
.discover-originals-document-art.is-blue { --original-accent: #687f91; }
.discover-originals-document-art.is-green { --original-accent: #718e83; }
.discover-originals-document-art.is-red { --original-accent: #a7504d; }
.discover-originals-document-art.is-graphite { --original-accent: #696d72; }

.discover-originals-document-art.is-hero {
  width: min(100%, 196px);
  justify-self: center;
  border-radius: 17px;
  overflow: visible;
  filter: drop-shadow(0 21px 22px rgba(39, 31, 23, 0.2));
  transform: rotate(2.2deg);
}

.discover-originals-document-art.is-hero::before,
.discover-originals-document-art.is-hero::after {
  content: "";
  position: absolute;
  width: 84%;
  height: 94%;
  border-radius: 5px;
  background: color-mix(in srgb, var(--original-paper) 92%, var(--original-accent));
  box-shadow: 0 9px 20px rgba(43, 34, 25, 0.14);
}

.discover-originals-document-art.is-hero::before {
  z-index: -2;
  transform: translate(-9px, 6px) rotate(-5deg);
}

.discover-originals-document-art.is-hero::after {
  z-index: -1;
  transform: translate(9px, 4px) rotate(4deg);
}

.discover-originals-paper {
  box-sizing: border-box;
  position: relative;
  width: 72%;
  height: 82%;
  padding: 15% 11% 11%;
  border: 1px solid rgba(74, 60, 47, 0.14);
  border-radius: 3px;
  display: grid;
  align-content: start;
  gap: 7%;
  background:
    linear-gradient(90deg, transparent 13%, rgba(176, 92, 76, 0.16) 13% 14%, transparent 14%),
    var(--original-paper);
  box-shadow: 0 8px 18px rgba(46, 37, 28, 0.18);
  color: var(--original-ink);
}

.discover-originals-document-art.is-hero .discover-originals-paper {
  width: 82%;
  height: 92%;
  padding-top: 12%;
}

.discover-originals-paper > small {
  overflow: hidden;
  font: 700 0.42rem/1 var(--ui-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.discover-originals-paper > i {
  width: 100%;
  height: 1px;
  display: block;
  background: var(--original-paper-line);
}

.discover-originals-paper > i:nth-of-type(2) { width: 87%; }
.discover-originals-paper > i:nth-of-type(4) { width: 92%; }
.discover-originals-paper > i:nth-of-type(5) { width: 61%; }

.discover-originals-paper > b {
  margin-top: auto;
  color: var(--original-accent);
  font: 760 0.48rem/1 var(--ui-font);
  letter-spacing: 0.08em;
}

/* Document silhouettes stay quiet, but letters, testimony, transcripts, and
   other records no longer read as the same repeated placeholder. */
.discover-originals-document-art.is-letter .discover-originals-paper {
  transform: rotate(-1.4deg);
}

.discover-originals-document-art.is-letter .discover-originals-paper::after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 13%;
  width: 28%;
  height: 1px;
  background: var(--original-accent);
  opacity: 0.58;
  transform: rotate(-7deg);
}

.discover-originals-document-art.is-diary .discover-originals-paper {
  border-left: 3px double color-mix(in srgb, var(--original-accent) 58%, transparent);
  background:
    repeating-linear-gradient(180deg, transparent 0 14%, color-mix(in srgb, var(--original-accent) 10%, transparent) 14.5% 15%, transparent 15.5% 29%),
    var(--original-paper);
  transform: rotate(1deg);
}

.discover-originals-document-art.is-speech .discover-originals-paper > small {
  padding-bottom: 6%;
  border-bottom: 2px solid color-mix(in srgb, var(--original-accent) 52%, transparent);
  text-align: center;
}

.discover-originals-document-art:is(.is-transcript, .is-newspaper) .discover-originals-paper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12%;
}

.discover-originals-document-art:is(.is-transcript, .is-newspaper) .discover-originals-paper > :is(small, b) {
  grid-column: 1 / -1;
}

.discover-originals-document-art:is(.is-transcript, .is-newspaper) .discover-originals-paper > i {
  width: 100%;
}

.discover-originals-document-art.is-transcript .discover-originals-paper > small {
  padding-bottom: 5%;
  border-bottom: 1px solid color-mix(in srgb, var(--original-accent) 35%, transparent);
}

.discover-originals-document-art.is-witness .discover-originals-paper {
  background:
    radial-gradient(circle at 86% 14%, transparent 0 7%, color-mix(in srgb, var(--original-accent) 27%, transparent) 7.5% 9%, transparent 9.5%),
    linear-gradient(90deg, transparent 13%, rgba(176, 92, 76, 0.16) 13% 14%, transparent 14%),
    var(--original-paper);
}

.discover-originals-document-art.is-witness .discover-originals-paper > b {
  width: fit-content;
  padding: 2px 3px;
  border: 1px solid color-mix(in srgb, var(--original-accent) 46%, transparent);
  transform: rotate(-3deg);
}

.discover-originals-document-art.is-map .discover-originals-paper {
  background:
    radial-gradient(circle at 30% 34%, color-mix(in srgb, var(--original-accent) 55%, transparent) 0 2%, transparent 2.5%),
    radial-gradient(circle at 70% 58%, color-mix(in srgb, var(--original-accent) 44%, transparent) 0 2%, transparent 2.5%),
    repeating-linear-gradient(38deg, transparent 0 15%, color-mix(in srgb, var(--original-accent) 10%, transparent) 15.5% 16%, transparent 16.5% 28%),
    var(--original-paper);
  transform: rotate(1.7deg);
}

.discover-originals-document-art.is-map .discover-originals-paper > i {
  background: color-mix(in srgb, var(--original-accent) 34%, transparent);
  transform: rotate(-5deg);
}

.discover-originals-document-art.is-record .discover-originals-paper > small {
  width: fit-content;
  padding: 2px 3px;
  border: 1px solid color-mix(in srgb, var(--original-accent) 35%, transparent);
}

.discover-originals-section-head > div {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.discover-originals-section-head h2 {
  margin: 0;
  color: var(--discover-text);
  font: 490 clamp(1.72rem, 5.8vw, 2.55rem)/1 var(--ui-font);
  letter-spacing: -0.03em;
}

.discover-originals-section-head > div > span {
  max-width: 64ch;
  color: var(--discover-muted);
  font: 470 0.72rem/1.4 var(--ui-font);
}

.discover-originals-editorial-shelves {
  min-width: 0;
  display: grid;
  gap: clamp(25px, 4.5vw, 38px);
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-originals-section-head .discover-live-source-menu,
html.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-originals-section-head .discover-live-source-menu,
body.theme-dark .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-originals-section-head .discover-live-source-menu {
  min-height: 34px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  flex: 0 0 auto;
  background: transparent !important;
  color: var(--discover-muted) !important;
  font: 600 0.68rem/1 var(--ui-font) !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-originals-short-list {
  display: grid;
  border-top: 1px solid var(--discover-line);
}

.discover-originals-short-read {
  width: 100%;
  min-height: 116px;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--discover-line);
  border-radius: 0;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 15px;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  transform: none !important;
}

.discover-originals-short-read:is(:active, .is-tactile-press) {
  filter: brightness(1.04);
  transform: none !important;
}

.discover-originals-short-copy {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.discover-originals-short-copy > small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 620 0.61rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-originals-short-copy > strong {
  color: var(--discover-text);
  font: 500 clamp(1.04rem, 4vw, 1.28rem)/1.08 var(--ui-font);
  letter-spacing: -0.015em;
}

.discover-originals-arrow {
  color: var(--discover-coral-strong);
  font: 500 1rem/1 var(--ui-font);
  font-style: normal;
}

.discover-originals-room-rail {
  margin-inline-end: calc(-1 * max(18px, env(safe-area-inset-right)));
  padding: 2px max(18px, env(safe-area-inset-right)) 9px 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(224px, 38%);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.discover-originals-room-rail::-webkit-scrollbar {
  display: none;
}

.discover-originals-room-card {
  width: 100%;
  min-height: 212px;
  padding: 18px;
  border: 1px solid var(--discover-line);
  border-radius: 18px;
  display: grid;
  grid-template-rows: 92px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  scroll-snap-align: start;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.discover-originals-room-card:is(:active, .is-tactile-press) {
  filter: brightness(1.035);
  transform: none !important;
}

.discover-originals-room-card > .discover-originals-document-art {
  width: 72px;
  height: 92px;
}

.discover-originals-room-card > span:last-child {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.discover-originals-room-card small {
  overflow: hidden;
  color: var(--discover-muted);
  font: 620 0.58rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-originals-room-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-text);
  font: 500 1.08rem/1.08 var(--ui-font);
  letter-spacing: -0.018em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-originals-room-card em {
  color: var(--discover-coral-strong);
  font: 650 0.6rem/1 var(--ui-font);
  font-style: normal;
}

.discover-originals-shelf-rail {
  margin-inline-end: calc(-1 * max(18px, env(safe-area-inset-right)));
  padding: 2px max(18px, env(safe-area-inset-right)) 9px 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(224px, 36%);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.discover-originals-shelf-rail::-webkit-scrollbar {
  display: none;
}

.discover-originals-shelf-card {
  width: 100%;
  min-height: 234px;
  padding: 17px;
  border: 1px solid var(--discover-line);
  border-radius: 18px;
  display: grid;
  grid-template-rows: 86px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  scroll-snap-align: start;
  background: var(--discover-surface);
  color: var(--discover-text);
  text-align: left;
  box-shadow: none;
  transform: none !important;
}

.discover-originals-shelf-card:is(:active, .is-tactile-press) {
  filter: brightness(1.035);
  transform: none !important;
}

.discover-originals-shelf-card > :is(.discover-originals-document-art, .discover-originals-image-art) {
  width: 67px;
  height: 86px;
}

.discover-originals-shelf-copy {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6px;
}

.discover-originals-shelf-copy > small,
.discover-originals-shelf-copy > span {
  overflow: hidden;
  color: var(--discover-muted);
  font: 620 0.58rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-originals-shelf-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--discover-text);
  font: 500 1.08rem/1.08 var(--ui-font);
  letter-spacing: -0.018em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-originals-shelf-copy > em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--discover-green);
  font: 670 0.56rem/1.2 var(--ui-font);
  font-style: normal;
}

.discover-originals-shelf-copy > em > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: currentColor;
}

.discover-originals-reader-note {
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, var(--discover-green) 33%, var(--discover-line));
  border-radius: 17px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  background: color-mix(in srgb, var(--discover-green) 7%, var(--discover-surface));
}

.discover-originals-reader-note > span {
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--discover-green) 42%, var(--discover-line));
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--discover-green);
  font: 520 1rem/1 var(--ui-font);
}

.discover-originals-reader-note > p {
  margin: 0;
  color: var(--discover-muted);
  font: 470 0.76rem/1.42 var(--ui-font);
}

.discover-originals-reader-note strong {
  color: var(--discover-text);
  font-weight: 620;
}

/* Compact, searchable counterpart to the editorial Short Reads landing page. */
.discover-browse-catalogue.is-originals-catalogue {
  gap: 17px !important;
}

.discover-browse-catalogue.is-originals-catalogue .discover-gutenberg-compact-head {
  min-height: 92px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.discover-originals-editorial-return {
  min-height: 36px;
  padding: 0 3px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  background: transparent;
  color: var(--discover-muted);
  font: 640 0.68rem/1 var(--ui-font);
  transform: none !important;
}

.discover-originals-editorial-return > i {
  color: var(--discover-coral-strong);
  font-style: normal;
}

.discover-originals-editorial-return:is(:active, .is-tactile-press) {
  color: var(--discover-text);
  transform: none !important;
}

.discover-browse-catalogue.is-originals-catalogue .discover-browse-grid.is-originals {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.discover-browse-catalogue.is-originals-catalogue .discover-browse-card.is-original-source {
  min-height: 154px;
  grid-template-columns: 92px minmax(0, 1fr);
  border-radius: 17px;
}

.discover-browse-catalogue.is-originals-catalogue .discover-originals-catalogue-art {
  width: 92px;
  height: 100%;
  min-height: 154px;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--discover-surface-soft) 82%, var(--discover-green));
}

.discover-browse-catalogue.is-originals-catalogue .discover-originals-catalogue-art > .discover-originals-document-art {
  width: 62px;
}

.discover-browse-catalogue.is-originals-catalogue .discover-originals-catalogue-art > .discover-originals-image-art {
  width: 100%;
  height: 100%;
  min-height: 154px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.discover-browse-catalogue.is-originals-catalogue .discover-browse-card.is-original-source .discover-browse-copy {
  gap: 5px;
  padding: 15px 34px 15px 14px;
}

.discover-browse-catalogue.is-originals-catalogue .discover-browse-card.is-original-source .discover-browse-copy strong {
  font-size: clamp(1rem, 2vw, 1.2rem);
  -webkit-line-clamp: 2;
}

.discover-browse-catalogue.is-originals-catalogue .discover-browse-card.is-original-source .discover-browse-copy p {
  -webkit-line-clamp: 2;
}

html.theme-dark .discover-originals-feature,
body.theme-dark .discover-originals-feature {
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.27);
}

@media (min-width: 720px) {
  .discover-originals-short-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }

  .discover-originals-short-read:nth-child(-n + 2) {
    border-top: 1px solid var(--discover-line);
  }

  .discover-originals-room-rail {
    grid-auto-columns: minmax(242px, 31%);
  }

  .discover-originals-shelf-rail {
    grid-auto-columns: minmax(238px, 30%);
  }
}

@media (max-width: 520px) {
  .discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch button {
    padding-inline: 4px !important;
    font-size: 0.67rem !important;
  }

  .discover-originals-intro > h1 {
    max-width: 12ch;
    font-size: clamp(2.16rem, 10.7vw, 2.72rem);
  }

  .discover-originals-feature {
    min-height: 256px;
    padding: 20px 18px;
    grid-template-columns: minmax(0, 1.28fr) minmax(100px, 0.72fr);
    gap: 14px;
  }

  .discover-originals-feature-copy {
    gap: 9px;
  }

  .discover-originals-feature-copy > strong {
    font-size: clamp(1.42rem, 7.2vw, 1.78rem);
  }

  .discover-originals-feature-copy > span {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.74rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }

  .discover-originals-feature-copy > em {
    align-items: flex-start;
    font-size: 0.61rem;
    line-height: 1.3;
  }

  .discover-originals-document-art.is-hero {
    width: min(100%, 126px);
  }

  .discover-originals-section-head h2 {
    font-size: clamp(1.62rem, 7.6vw, 2rem);
  }

  .discover-originals-short-read {
    grid-template-columns: 74px minmax(0, 1fr) 18px;
    gap: 12px;
  }

  .discover-originals-short-read > :is(.discover-originals-document-art, .discover-originals-image-art) {
    width: 74px;
  }

  .discover-originals-room-rail {
    grid-auto-columns: minmax(210px, 72vw);
  }

  .discover-originals-shelf-rail {
    grid-auto-columns: minmax(214px, 72vw);
  }

  .discover-browse-catalogue.is-originals-catalogue .discover-gutenberg-compact-head {
    min-height: 78px;
    align-items: end;
  }

  .discover-originals-editorial-return {
    max-width: 82px;
    justify-content: flex-end;
    text-align: right;
    line-height: 1.2;
  }

  .discover-browse-catalogue.is-originals-catalogue .discover-browse-grid.is-originals {
    grid-template-columns: minmax(0, 1fr);
  }

  .discover-browse-catalogue.is-originals-catalogue .discover-browse-card.is-original-source {
    min-height: 142px;
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .discover-browse-catalogue.is-originals-catalogue .discover-originals-catalogue-art {
    width: 82px;
    min-height: 142px;
  }

  .discover-browse-catalogue.is-originals-catalogue .discover-originals-catalogue-art > .discover-originals-document-art {
    width: 55px;
  }

  .discover-browse-catalogue.is-originals-catalogue .discover-originals-catalogue-art > .discover-originals-image-art {
    width: 100%;
    min-height: 142px;
  }
}

@media (max-width: 360px) {
  .discover-originals-feature {
    grid-template-columns: minmax(0, 1fr) 90px;
    padding-inline: 15px;
  }

  .discover-originals-feature-copy > span {
    -webkit-line-clamp: 3;
  }
}

/* Discover preview — downloaded Book Info's editorial system, adapted for
   items that may still need to be fetched or opened at their source. */
.discover-preview-panel.is-editorial-preview-open {
  --preview-page: var(--light-page);
  --preview-surface: var(--light-panel);
  --preview-surface-soft: var(--light-cool-panel);
  --preview-ink: var(--light-ink);
  --preview-muted: var(--light-muted);
  --preview-soft: var(--light-quiet);
  --preview-line: var(--light-line);
  --preview-line-strong: var(--light-line-strong);
  --preview-coral: var(--light-accent-ink);
  --preview-gold: var(--light-accent-ink);
  inset: 0 !important;
  padding: 0 !important;
  place-items: stretch !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 74% 27% at 102% 0%, rgba(190, 128, 56, 0.09), transparent 68%),
    var(--preview-page) !important;
  color-scheme: light;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.theme-dark .discover-preview-panel.is-editorial-preview-open,
body.theme-dark .discover-preview-panel.is-editorial-preview-open {
  --preview-page: #0b0d10;
  --preview-surface: #15171b;
  --preview-surface-soft: #1b1e23;
  --preview-ink: #f2ede3;
  --preview-muted: rgba(213, 205, 194, 0.69);
  --preview-soft: rgba(213, 205, 194, 0.5);
  --preview-line: rgba(231, 223, 211, 0.11);
  --preview-line-strong: rgba(231, 223, 211, 0.2);
  --preview-coral: #df5d51;
  --preview-gold: #c79556;
  background:
    radial-gradient(ellipse 76% 29% at 102% 0%, rgba(204, 139, 67, 0.08), transparent 68%),
    linear-gradient(155deg, #101216 0%, var(--preview-page) 56%, #090b0e 100%) !important;
  color-scheme: dark;
}

.discover-preview-panel.is-editorial-preview-open .discover-preview-sheet {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--preview-ink) !important;
  box-shadow: none !important;
}

.discover-preview-panel.is-editorial-preview-open .discover-preview-header {
  width: min(920px, 100%) !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding:
    max(10px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    6px
    max(18px, env(safe-area-inset-left)) !important;
  background: color-mix(in srgb, var(--preview-page) 94%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
}

.discover-preview-panel.is-editorial-preview-open .discover-preview-header > p {
  color: var(--preview-muted) !important;
  font: 720 0.7rem/1 var(--ui-font) !important;
  letter-spacing: 0.22em !important;
}

.discover-preview-panel.is-editorial-preview-open :is(.discover-preview-back, .discover-preview-save) {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--preview-ink) !important;
  box-shadow: none !important;
  transform: none !important;
}

.discover-preview-panel.is-editorial-preview-open .discover-preview-save.is-saved {
  background: transparent !important;
  color: var(--preview-coral) !important;
}

.discover-preview-content.is-editorial-preview {
  width: min(920px, 100%);
  margin: 0 auto;
  padding:
    10px
    max(24px, env(safe-area-inset-right))
    max(46px, calc(env(safe-area-inset-bottom) + 30px))
    max(24px, env(safe-area-inset-left)) !important;
  gap: clamp(18px, 2.8vw, 28px) !important;
}

.discover-editorial-preview-hero {
  --editorial-cover-w: clamp(144px, 25vw, 188px);
  min-width: 0;
  padding: 8px 0 2px;
  display: grid;
  grid-template-columns: var(--editorial-cover-w) minmax(0, 1fr);
  gap: clamp(24px, 4.5vw, 46px);
  align-items: center;
}

.discover-editorial-preview-media,
.discover-editorial-preview-cover {
  width: var(--editorial-cover-w);
  min-width: 0;
}

.discover-editorial-preview-media {
  align-self: center;
  display: grid;
  gap: 9px;
}

.discover-editorial-preview-provenance {
  min-width: 0;
  margin: 0;
  display: grid;
  gap: 3px;
  color: var(--preview-muted);
  font-family: var(--ui-font);
}

.discover-editorial-preview-provenance > span {
  color: var(--preview-coral);
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.discover-editorial-preview-provenance > small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.67rem;
  font-weight: 520;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-editorial-preview-provenance[data-discover-artwork-provenance="rhythm-graphic"] > span {
  color: var(--preview-gold);
}

.discover-editorial-preview-cover {
  --book-preview-accent: var(--preview-coral);
  position: relative;
  aspect-ratio: 0.65;
  overflow: hidden;
  border: 1px solid var(--preview-line-strong);
  border-radius: 8px;
  background: var(--preview-surface);
  box-shadow:
    0 20px 38px rgba(48, 38, 27, 0.17),
    0 0 0 1px rgba(67, 56, 43, 0.04);
}

html.theme-dark .discover-editorial-preview-cover,
body.theme-dark .discover-editorial-preview-cover {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(229, 220, 207, 0.05);
}

.discover-editorial-preview-cover > img,
.discover-editorial-preview-cover > .discover-preview-book-cover-fallback {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
}

.discover-editorial-preview-hero.is-short-read .discover-editorial-preview-cover.has-image {
  aspect-ratio: 0.78;
}

.discover-editorial-preview-hero.is-short-read .discover-editorial-preview-cover.has-image > img {
  filter: saturate(0.86) contrast(1.035);
}

.discover-editorial-preview-cover.is-fallback {
  padding: 18px 16px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--preview-gold) 10%, transparent), transparent 35%),
    var(--preview-surface-soft);
  color: var(--preview-gold);
}

.discover-editorial-preview-cover.is-fallback svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.discover-editorial-preview-cover.is-fallback > span {
  align-self: end;
  overflow-wrap: anywhere;
  color: var(--preview-muted);
  font: 720 0.65rem/1.3 var(--ui-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.discover-editorial-preview-cover .discover-preview-book-cover-fallback {
  box-sizing: border-box;
  border-radius: 0 !important;
}

.discover-editorial-preview-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: clamp(10px, 1.7vw, 15px);
}

.discover-editorial-preview-copy > p,
.discover-editorial-preview-copy > h2,
.discover-editorial-preview-copy > span,
.discover-editorial-preview-copy > small {
  margin: 0;
}

.discover-editorial-preview-copy > p {
  color: var(--preview-coral);
  font: 720 clamp(0.64rem, 1.65vw, 0.75rem)/1 var(--ui-font);
  letter-spacing: 0.21em;
  text-transform: uppercase;
}

.discover-editorial-preview-copy > h2 {
  max-width: 16ch;
  overflow-wrap: anywhere;
  color: var(--preview-ink);
  font: 470 clamp(2rem, 5.4vw, 3.45rem)/0.99 var(--ui-font);
  letter-spacing: -0.033em;
  text-wrap: balance;
}

.discover-editorial-preview-copy > span {
  color: var(--preview-muted);
  font: 450 clamp(0.9rem, 2vw, 1.08rem)/1.3 var(--ui-font);
}

.discover-editorial-preview-copy > small {
  color: var(--preview-soft);
  font: 620 0.65rem/1.35 var(--ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(8px, 1.6vw, 12px) !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions:has(> button:only-child) {
  grid-template-columns: minmax(0, 1fr) !important;
}

.discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions button {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 clamp(10px, 2vw, 17px) !important;
  border: 1px solid var(--preview-line-strong) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(8px, 1.5vw, 11px) !important;
  background: var(--preview-surface-soft) !important;
  color: var(--preview-ink) !important;
  box-shadow: none !important;
  font: 470 clamp(0.94rem, 2.1vw, 1.1rem)/1.08 var(--ui-font) !important;
  transform: none !important;
}

.discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions button.is-primary {
  border-color: var(--preview-coral) !important;
  background: var(--preview-coral) !important;
  color: #fff8ef !important;
  -webkit-text-fill-color: #fff8ef !important;
}

.discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions button > svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions button.is-primary > i {
  flex: 0 0 auto;
}

.discover-editorial-preview-about {
  display: grid;
  gap: 10px;
}

.discover-editorial-preview-about > h3,
.discover-editorial-preview-glance > h3 {
  margin: 0;
  color: var(--preview-coral);
  font: 720 0.7rem/1 var(--ui-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.discover-editorial-preview-about > p {
  max-width: 66ch;
  margin: 0;
  color: var(--preview-muted);
  font: 450 clamp(1rem, 2.3vw, 1.22rem)/1.52 var(--ui-font);
}

.discover-editorial-preview-about.is-short-read > p {
  max-width: 62ch;
  color: color-mix(in srgb, var(--preview-ink) 78%, var(--preview-muted));
}

.discover-editorial-preview-topics {
  margin-top: -4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.discover-editorial-preview-topics button {
  min-height: 39px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--preview-topic-color) 22%, var(--preview-line-strong));
  border-radius: 12px;
  background: color-mix(in srgb, var(--preview-topic-color) 4%, transparent);
  color: var(--preview-muted);
  box-shadow: none;
  font: 600 0.73rem/1 var(--ui-font);
  transform: none;
}

.discover-editorial-preview-connections {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 76px;
  padding: 14px 49% 14px 22px;
  border: 1px solid var(--preview-line-strong);
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--preview-surface-soft);
  color: var(--preview-ink);
  box-shadow: none;
  text-align: left;
  transform: none;
}

.discover-editorial-preview-connections > span {
  position: relative;
  z-index: 2;
  font: 470 clamp(1.15rem, 3.3vw, 1.65rem)/1.04 var(--ui-font);
  letter-spacing: -0.025em;
}

.discover-editorial-preview-constellation {
  position: absolute;
  top: 50%;
  right: 40px;
  width: 44%;
  height: 74%;
  transform: translateY(-50%);
}

.discover-editorial-preview-constellation path {
  fill: none;
  stroke: var(--preview-muted);
  stroke-width: 2;
  opacity: 0.68;
}

.discover-editorial-preview-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--preview-gold);
  stroke-width: 2;
  transform: translateY(-50%);
}

.discover-editorial-preview-glance {
  display: grid;
  gap: 11px;
}

.discover-editorial-preview-glance > p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--preview-muted);
  font: 500 clamp(0.82rem, 2vw, 0.98rem)/1.4 var(--ui-font);
}

.discover-editorial-preview-glance i {
  color: var(--preview-soft);
  font-style: normal;
}

.discover-preview-content.is-editorial-preview .discover-preview-source-details {
  border-top: 1px solid var(--preview-line) !important;
  border-bottom: 1px solid var(--preview-line) !important;
  color: var(--preview-muted) !important;
}

.discover-preview-content.is-editorial-preview .discover-preview-source-details summary {
  position: relative;
  padding: 17px 28px 17px 2px !important;
  color: var(--preview-ink) !important;
  font: 620 0.79rem/1.25 var(--ui-font) !important;
  list-style: none;
}

.discover-preview-content.is-editorial-preview .discover-preview-source-details summary::-webkit-details-marker {
  display: none;
}

.discover-preview-content.is-editorial-preview .discover-preview-source-details summary::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 5px;
  color: var(--preview-muted);
  font: 400 1.35rem/1 var(--ui-font);
  transform: translateY(-50%) rotate(0deg);
  transition: transform 160ms ease;
}

.discover-preview-content.is-editorial-preview .discover-preview-source-details[open] summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.discover-preview-content.is-editorial-preview .discover-preview-source-details p {
  margin: -2px 0 8px !important;
  color: var(--preview-muted) !important;
  font: 450 0.8rem/1.45 var(--ui-font) !important;
}

.discover-preview-content.is-editorial-preview .discover-preview-source-details small {
  display: block;
  margin: 0 0 12px;
  color: var(--preview-soft);
  font: 560 0.67rem/1.4 var(--ui-font);
}

.discover-preview-content.is-editorial-preview .discover-preview-source-details button {
  margin: 0 !important;
  color: var(--preview-coral) !important;
}

.discover-preview-content.is-editorial-preview .discover-preview-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 18px;
  margin: 0 0 15px;
}

.discover-preview-content.is-editorial-preview .discover-preview-feedback {
  min-height: 36px !important;
  margin-top: -4px;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--preview-soft) !important;
  font-size: 0.7rem !important;
}

.discover-preview-content.is-editorial-preview .discover-preview-feedback button,
.discover-preview-content.is-editorial-preview .discover-preview-feedback button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  padding-right: 0 !important;
  color: var(--preview-coral) !important;
  font-size: 0.7rem !important;
}

.discover-preview-content.is-editorial-preview .related-reading-module.is-discover-preview {
  --related-ink: var(--preview-ink);
  --related-muted: var(--preview-muted);
  --related-soft: var(--preview-soft);
  --related-line: var(--preview-line);
  --related-line-strong: var(--preview-line-strong);
  --related-surface: var(--preview-surface-soft);
  --related-accent: var(--preview-coral);
  min-height: 340px;
  transition:
    opacity 170ms cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 200ms cubic-bezier(0.18, 0.82, 0.2, 1) !important;
}

.discover-preview-content.is-editorial-preview .related-reading-module.is-discover-preview.is-carousel-entering {
  opacity: 0 !important;
  transform: translate3d(0, 7px, 0) !important;
}

.discover-preview-content.is-editorial-preview .related-reading-header > button,
.discover-preview-content.is-editorial-preview .related-reading-card,
.discover-preview-content.is-editorial-preview .related-reading-fallback {
  box-shadow: none !important;
  transform: none !important;
}

.discover-preview-content.is-editorial-preview .related-reading-header > button {
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  height: auto !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--preview-coral) !important;
}

.discover-preview-content.is-editorial-preview .related-reading-card {
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--preview-ink) !important;
}

.discover-preview-content.is-editorial-preview .related-reading-fallback {
  min-height: 74px !important;
  height: auto !important;
  padding: 15px 17px !important;
  border: 1px solid var(--preview-line-strong) !important;
  border-radius: 14px !important;
  background: var(--preview-surface-soft) !important;
  color: var(--preview-ink) !important;
}

@media (max-width: 620px) {
  .discover-preview-content.is-editorial-preview {
    padding-top: 4px !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important;
    gap: 20px !important;
  }

  .discover-editorial-preview-hero {
    --editorial-cover-w: clamp(104px, 30vw, 124px);
    gap: clamp(17px, 4.7vw, 22px);
    align-items: center;
  }

  .discover-editorial-preview-copy {
    gap: 9px;
  }

  .discover-editorial-preview-copy > h2 {
    max-width: 13ch;
    font-size: clamp(1.62rem, 7.6vw, 2.35rem);
    line-height: 0.98;
  }

  .discover-editorial-preview-copy > span {
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  }

  .discover-editorial-preview-copy > small {
    font-size: 0.56rem;
  }

  .discover-editorial-preview-provenance {
    gap: 2px;
  }

  .discover-editorial-preview-provenance > span {
    font-size: 0.54rem;
    letter-spacing: 0.1em;
  }

  .discover-editorial-preview-provenance > small {
    font-size: 0.6rem;
  }

  .discover-editorial-preview-cover.is-fallback {
    padding: 14px 12px;
  }

  .discover-editorial-preview-cover.is-fallback svg {
    width: 29px;
    height: 29px;
  }

  .discover-editorial-preview-cover.is-fallback > span {
    font-size: 0.55rem;
  }

  .discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions button {
    min-height: 48px !important;
    height: 48px !important;
    padding-inline: 9px !important;
    font-size: clamp(0.78rem, 3.15vw, 0.91rem) !important;
  }

  .discover-editorial-preview-about > p {
    font-size: clamp(0.98rem, 4.15vw, 1.12rem);
  }

  .discover-editorial-preview-connections {
    min-height: 72px;
    padding-left: 18px;
    padding-right: 48%;
  }

  .discover-editorial-preview-constellation {
    right: 34px;
    width: 46%;
  }
}

@media (max-width: 369px) {
  .discover-editorial-preview-hero {
    --editorial-cover-w: 96px;
    gap: 15px;
  }

  .discover-editorial-preview-copy > h2 {
    font-size: 1.48rem;
  }

  .discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Books opened from Discover keep the tapped cover as the visual anchor.
 * The detail composition deliberately stacks metadata below the larger cover,
 * while a fixed flight copy bridges the catalogue and dialog geometries. */
.discover-preview-panel.is-discover-books-detail .discover-editorial-preview-hero.is-books {
  --editorial-cover-w: clamp(180px, 27vw, 224px);
  padding-top: 4px;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(17px, 2.8vw, 24px);
  text-align: center;
}

.discover-preview-panel.is-discover-books-detail .discover-editorial-preview-hero.is-books .discover-editorial-preview-cover {
  border: 0 !important;
  box-shadow: 0 20px 38px rgba(48, 38, 27, 0.17) !important;
}

/* Preserve the complete jacket image through shelf, flight, and detail states.
 * Intrinsic ratios are supplied after image decode; contain is also kept as a
 * no-crop fallback before that measurement is available. */
:is(
  .discover-books-hero-cover,
  .discover-books-shelf-cover,
  .discover-gutenberg-cover
).has-image,
.discover-preview-panel.is-discover-books-detail .discover-editorial-preview-cover:has(> img) {
  aspect-ratio: var(--cover-aspect-ratio, 2 / 3) !important;
  overflow: visible !important;
  background: transparent !important;
}

:is(
  .discover-books-hero-cover,
  .discover-books-shelf-cover,
  .discover-gutenberg-cover
).has-image > img,
.discover-preview-panel.is-discover-books-detail .discover-editorial-preview-cover > img,
.discover-book-cover-flight > img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
}

#discoverPanel#discoverPanel#discoverPanel .discover-gutenberg-cover.has-image {
  aspect-ratio: var(--cover-aspect-ratio, 2 / 3) !important;
  overflow: visible !important;
  background: transparent !important;
}

#discoverPanel#discoverPanel#discoverPanel .discover-gutenberg-cover.has-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
}

@property --book-panel-tone {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(177, 99, 83);
}

@property --book-neighbor-tone {
  syntax: "<color>";
  inherits: true;
  initial-value: rgb(137, 109, 157);
}

/* Apple Books-inspired book information carousel. The five-panel track keeps
 * a fixed layout width, then expands as one composited surface while the
 * detail sheet scrolls. This avoids text, controls, and artwork reflow. */
.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready {
  --book-panel-tone: rgb(177, 99, 83);
  --book-panel-base-inset: clamp(16px, 4vw, 22px);
  --book-panel-current-inset: var(--book-panel-base-inset);
  --book-panel-gap: clamp(2px, 0.7vw, 4px);
  --book-panel-scale-x: 1;
  --book-panel-maximum-scale: 1;
  --book-panel-scroll-top-offset: 0px;
  --book-panel-current-radius: clamp(34px, 8.5vw, 42px);
  --book-panel-top-inset: max(14px, calc(env(safe-area-inset-top) + 8px));
  --book-panel-peek: clamp(10px, 2.5vw, 14px);
  --book-panel-peek-opacity: 1;
  --book-panel-peek-shift: 0px;
  --book-panel-shadow-opacity: 1;
  --book-panel-chrome-opacity: 1;
  --book-panel-elevation:
    0 18px 32px -22px rgb(30 26 23 / calc(0.3 * var(--book-panel-shadow-opacity))),
    0 2px 7px -5px rgb(30 26 23 / calc(0.18 * var(--book-panel-shadow-opacity)));
  --preview-page: color-mix(in srgb, var(--book-panel-tone) 27%, #f7f4ed);
  --preview-surface: color-mix(in srgb, var(--book-panel-tone) 20%, #fffdf8);
  --preview-surface-soft: color-mix(in srgb, var(--book-panel-tone) 25%, #f4f0e7);
  --preview-ink: color-mix(in srgb, var(--book-panel-tone) 9%, #201f1d);
  --preview-muted: color-mix(in srgb, var(--book-panel-tone) 18%, #6f6a63);
  --preview-soft: color-mix(in srgb, var(--book-panel-tone) 20%, #918a81);
  --preview-line: color-mix(in srgb, var(--book-panel-tone) 18%, rgba(54, 48, 42, 0.14));
  --preview-line-strong: color-mix(in srgb, var(--book-panel-tone) 23%, rgba(54, 48, 42, 0.2));
  --preview-coral: color-mix(in srgb, var(--book-panel-tone) 72%, #a43f38);
  position: fixed;
  display: grid !important;
  place-items: stretch center !important;
  background: transparent !important;
}

html.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready,
body.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready {
  --book-panel-elevation:
    0 22px 36px -24px rgb(0 0 0 / calc(0.72 * var(--book-panel-shadow-opacity))),
    0 2px 8px -6px rgb(0 0 0 / calc(0.48 * var(--book-panel-shadow-opacity)));
  --preview-page: color-mix(in srgb, var(--book-panel-tone) 42%, #17191f);
  --preview-surface: color-mix(in srgb, var(--book-panel-tone) 34%, #22242a);
  --preview-surface-soft: color-mix(in srgb, var(--book-panel-tone) 29%, #292c33);
  --preview-ink: #f5f2eb;
  --preview-muted: rgba(235, 230, 220, 0.72);
  --preview-soft: rgba(235, 230, 220, 0.52);
  --preview-line: rgba(239, 234, 225, 0.12);
  --preview-line-strong: rgba(239, 234, 225, 0.2);
  --preview-coral: color-mix(in srgb, var(--book-panel-tone) 66%, #f0a093);
  background: transparent !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready::before,
html.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready::before,
body.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.46) !important;
  opacity: 1;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-cover-transitioning::before,
html.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-cover-transitioning::before,
body.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-cover-transitioning::before {
  background: rgba(0, 0, 0, 0.46) !important;
  animation: discover-book-backdrop-in 210ms cubic-bezier(0.2, 0.72, 0.2, 1) both paused;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-cover-transitioning.is-book-cover-motion-running::before {
  animation-play-state: running !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-cover-closing::before,
html.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-cover-closing::before,
body.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-cover-closing::before {
  animation: discover-book-backdrop-out 185ms cubic-bezier(0.3, 0, 0.3, 1) both;
}

@keyframes discover-book-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes discover-book-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-sheet {
  position: relative;
  z-index: 1;
  width: calc(100vw - var(--book-panel-base-inset) - var(--book-panel-base-inset)) !important;
  flex: 0 0 calc(100vw - var(--book-panel-base-inset) - var(--book-panel-base-inset));
  max-width: none !important;
  height: 100% !important;
  max-height: 100% !important;
  margin-inline: 0 !important;
  border: 0 !important;
  border-radius: var(--book-panel-current-radius) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background:
    radial-gradient(circle at 50% -6%, color-mix(in srgb, var(--book-panel-tone) 18%, transparent), transparent 38%),
    var(--preview-page) !important;
  box-shadow: var(--book-panel-elevation) !important;
  clip-path: none;
  /* The vertical pull-to-dismiss gesture owns movement beyond scrollTop=0.
   * Allowing native elastic overscroll here lets WebKit pull the header and
   * content away from the sheet background while the carousel track is also
   * moving. Keep native scrolling, but remove only that elastic excursion. */
  overscroll-behavior-y: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scrollbar-gutter: auto;
  overflow-anchor: none;
  contain: layout paint style;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  pointer-events: auto;
  transition: none;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-sheet::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-sheet,
body.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-sheet {
  box-shadow: var(--book-panel-elevation) !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-header {
  width: min(920px, 100%) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-header > p {
  color: color-mix(in srgb, var(--book-panel-tone) 62%, var(--preview-muted)) !important;
  letter-spacing: 0.14em !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-back {
  position: relative !important;
  border: 1px solid color-mix(in srgb, currentColor 38%, transparent) !important;
  border-radius: 50% !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-back::before,
.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-back::after {
  content: "" !important;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1.8px;
  border: 0 !important;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
  transform-origin: center;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-back::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-preview-back::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.discover-book-carousel-neighbors {
  display: contents;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbors {
  position: absolute;
  top: var(--book-panel-top-inset);
  bottom: 0;
  left: calc(
    -200vw
    + var(--book-panel-base-inset)
    + var(--book-panel-base-inset)
    + var(--book-panel-base-inset)
    + var(--book-panel-base-inset)
    + var(--book-panel-base-inset)
    - var(--book-panel-gap)
    - var(--book-panel-gap)
  );
  z-index: 1;
  width: max-content;
  display: flex;
  align-items: stretch;
  gap: var(--book-panel-gap);
  overflow: visible;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scaleX(var(--book-panel-scale-x));
  transform-origin: center top;
  backface-visibility: hidden;
  will-change: transform;
}

/* The active sheet is the scroll source and a descendant of this track.
 * Sampling its scrollTop in JavaScript and then transforming the track one
 * frame later makes WebKit repeatedly resynchronise the active scrolling
 * surface. Safari 26's named scroll timeline keeps this geometry on the
 * compositor and maps it directly, and symmetrically, to the native offset. */
@keyframes discover-book-panel-native-scroll-expansion {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform:
      translate3d(0, calc(0px - var(--book-panel-scroll-top-offset)), 0)
      scale(var(--book-panel-maximum-scale));
  }
}

@supports (animation-timeline: scroll(self block)) and (timeline-scope: --rithim-book-panel-scroll) {
  .discover-preview-panel.is-discover-books-detail.is-book-scroll-driven {
    timeline-scope: --rithim-book-panel-scroll;
  }

  .discover-preview-panel.is-discover-books-detail.is-book-scroll-driven .discover-preview-sheet {
    scroll-timeline-name: --rithim-book-panel-scroll;
    scroll-timeline-axis: block;
  }

  .discover-preview-panel.is-discover-books-detail.is-book-scroll-driven.is-book-secondary-revealed:not(
    .is-book-cover-transitioning,
    .is-book-cover-closing,
    .is-book-carousel-dragging,
    .is-book-carousel-settling,
    .is-book-carousel-switching,
    .is-book-dismiss-dragging,
    .is-book-dismiss-settling,
    .is-book-dismiss-completing
  ) .discover-book-carousel-neighbors {
    animation: discover-book-panel-native-scroll-expansion 1s linear both;
    animation-timeline: --rithim-book-panel-scroll;
    animation-range: 0px 224px;
  }

  /* WebKit can retain a filled transform from the per-panel opening WAAPI
   * effect after its shared completion barrier. If that stale shelf-origin
   * transform is allowed to compose under the track's scroll animation, the
   * surfaces drift down while the track itself correctly expands to the top.
   * In the resting open state the track is the sole geometry owner. */
  .discover-preview-panel.is-discover-books-detail.is-book-scroll-driven.is-book-secondary-revealed:not(
    .is-book-cover-transitioning,
    .is-book-cover-closing,
    .is-book-carousel-dragging,
    .is-book-carousel-settling,
    .is-book-carousel-switching,
    .is-book-dismiss-dragging,
    .is-book-dismiss-settling,
    .is-book-dismiss-completing
  ) .discover-book-carousel-neighbors > :is(
    .discover-preview-sheet,
    .discover-book-carousel-neighbor
  ) {
    transform: none !important;
    transform-origin: center top !important;
  }
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready :is(
  .discover-preview-sheet,
  .discover-book-carousel-neighbor
) > .discover-preview-content.is-editorial-preview,
.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready :is(
  .discover-preview-sheet,
  .discover-book-carousel-neighbor
) > .discover-preview-header {
  transform-origin: center top;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbors > .discover-book-carousel-neighbor {
  display: block;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbors > .discover-book-carousel-neighbor[hidden] {
  display: block !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.discover-book-carousel-neighbor {
  --preview-page: color-mix(in srgb, var(--book-neighbor-tone) 27%, #f7f4ed);
  --preview-surface: color-mix(in srgb, var(--book-neighbor-tone) 20%, #fffdf8);
  --preview-surface-soft: color-mix(in srgb, var(--book-neighbor-tone) 25%, #f4f0e7);
  --preview-ink: color-mix(in srgb, var(--book-neighbor-tone) 9%, #201f1d);
  --preview-muted: color-mix(in srgb, var(--book-neighbor-tone) 18%, #6f6a63);
  --preview-soft: color-mix(in srgb, var(--book-neighbor-tone) 20%, #918a81);
  --preview-line: color-mix(in srgb, var(--book-neighbor-tone) 18%, rgba(54, 48, 42, 0.14));
  --preview-line-strong: color-mix(in srgb, var(--book-neighbor-tone) 23%, rgba(54, 48, 42, 0.2));
  --preview-coral: color-mix(in srgb, var(--book-neighbor-tone) 72%, #a43f38);
  position: relative;
  z-index: 1;
  top: auto;
  box-sizing: border-box;
  width: calc(100vw - var(--book-panel-base-inset) - var(--book-panel-base-inset));
  flex: 0 0 calc(100vw - var(--book-panel-base-inset) - var(--book-panel-base-inset));
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--book-panel-current-radius);
  overflow: hidden;
  display: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--preview-page) !important;
  background-image:
    radial-gradient(circle at 50% -6%, color-mix(in srgb, var(--book-neighbor-tone) 18%, transparent), transparent 38%) !important;
  color: var(--preview-ink);
  box-shadow: var(--book-panel-elevation);
  isolation: isolate;
  contain: layout paint style;
  pointer-events: auto;
  opacity: var(--book-panel-peek-opacity);
  transform: none;
}

html.theme-dark .discover-book-carousel-neighbor,
body.theme-dark .discover-book-carousel-neighbor {
  --preview-page: color-mix(in srgb, var(--book-neighbor-tone) 42%, #17191f);
  --preview-surface: color-mix(in srgb, var(--book-neighbor-tone) 34%, #22242a);
  --preview-surface-soft: color-mix(in srgb, var(--book-neighbor-tone) 29%, #292c33);
  --preview-ink: #f5f2eb;
  --preview-muted: rgba(235, 230, 220, 0.72);
  --preview-soft: rgba(235, 230, 220, 0.52);
  --preview-line: rgba(239, 234, 225, 0.12);
  --preview-line-strong: rgba(239, 234, 225, 0.2);
  --preview-coral: color-mix(in srgb, var(--book-neighbor-tone) 66%, #f0a093);
  background-color: var(--preview-page) !important;
  background-image:
    radial-gradient(circle at 50% -6%, color-mix(in srgb, var(--book-neighbor-tone) 18%, transparent), transparent 38%) !important;
  color: var(--preview-ink);
  box-shadow: var(--book-panel-elevation);
}

.discover-book-carousel-neighbor.is-previous {
  left: auto;
  transform: none;
}

.discover-book-carousel-neighbor.is-next {
  left: auto;
  transform: none;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbor > .discover-book-carousel-neighbor-header {
  position: relative;
  top: auto;
  left: auto;
  z-index: 2;
  width: min(920px, 100%) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbor > .discover-book-carousel-neighbor-header > p {
  color: color-mix(in srgb, var(--book-neighbor-tone) 62%, var(--preview-muted)) !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbor > .discover-preview-content.is-editorial-preview {
  box-sizing: border-box;
  width: min(920px, 100%) !important;
  height: calc(100% - 76px);
  margin: 0 auto !important;
  padding:
    10px
    max(24px, env(safe-area-inset-right))
    max(126px, calc(env(safe-area-inset-bottom) + 108px))
    max(24px, env(safe-area-inset-left)) !important;
  align-content: start;
  overflow: hidden;
  color: var(--preview-ink);
  pointer-events: none;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbor > .discover-preview-content.is-editorial-preview > :not(.related-reading-module),
.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbor .discover-editorial-preview-media {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbor .discover-editorial-preview-hero.is-books {
  padding-top: 4px;
}

.discover-book-carousel-neighbor-inner {
  box-sizing: border-box;
  width: min(680px, 84%);
  height: 100%;
  padding: max(92px, calc(env(safe-area-inset-top) + 72px)) 0 130px;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 16px;
  overflow: hidden;
  text-align: center;
  pointer-events: none;
}

.discover-book-carousel-neighbor.is-previous .discover-book-carousel-neighbor-inner {
  transform: translateX(20%);
}

.discover-book-carousel-neighbor.is-next .discover-book-carousel-neighbor-inner {
  transform: translateX(-20%);
}

.discover-book-carousel-neighbor-cover {
  width: clamp(142px, 25vw, 214px);
  aspect-ratio: var(--cover-aspect-ratio, 2 / 3);
  display: grid;
  place-items: center;
  overflow: visible;
  color: var(--book-neighbor-tone);
  box-shadow: 0 20px 42px rgba(22, 19, 17, 0.24);
}

.discover-book-carousel-neighbor-cover > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.discover-book-carousel-neighbor-cover > b {
  font: 500 3rem/1 var(--ui-font);
}

.discover-book-carousel-neighbor-copy {
  width: min(100%, 620px);
  display: grid;
  justify-items: center;
  gap: 6px;
}

.discover-book-carousel-neighbor-copy > small {
  font: 720 0.58rem/1 var(--ui-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.62;
}

.discover-book-carousel-neighbor-copy > strong {
  font: 600 clamp(1.5rem, 4vw, 2.5rem)/0.98 var(--ui-font);
}

.discover-book-carousel-neighbor-copy > span {
  font: 500 0.8rem/1.3 var(--ui-font);
  opacity: 0.68;
}

.discover-book-carousel-neighbor-copy > em {
  min-width: min(320px, 82%);
  min-height: 48px;
  margin-top: 12px;
  padding: 0 22px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: color-mix(in srgb, var(--book-neighbor-tone) 66%, #e8a18d);
  color: #fffaf4;
  font: 600 0.92rem/1 var(--ui-font);
  font-style: normal;
}

.discover-book-carousel-neighbor-about {
  width: 100%;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  display: grid !important;
  justify-items: start;
  gap: 9px;
  text-align: left;
  opacity: 0.78 !important;
}

.discover-book-carousel-neighbor-about > b {
  font: 760 0.62rem/1 var(--ui-font);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.discover-book-carousel-neighbor-about > span {
  display: -webkit-box;
  overflow: hidden;
  font: 470 clamp(0.92rem, 2.5vw, 1.08rem)/1.45 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.discover-preview-panel.is-discover-books-detail.is-book-panel-expanded .discover-book-carousel-neighbors {
  pointer-events: none;
}

.discover-preview-panel.is-discover-books-detail.is-book-panel-expanded .discover-book-carousel-neighbor {
  pointer-events: none;
  opacity: 0 !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-panel-expanded .discover-preview-sheet {
  box-shadow: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-dragging .discover-preview-sheet {
  cursor: grabbing;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-dragging .discover-book-carousel-neighbors {
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail:is(
  .is-book-carousel-dragging,
  .is-book-carousel-settling,
  .is-book-carousel-switching
) :is(.discover-preview-sheet, .discover-book-carousel-neighbor) {
  box-shadow: var(--book-panel-elevation) !important;
}

/* The incoming slot must already be visually active while it crosses the
 * gutter. Vertical panel expansion normally fades the side cards, which left
 * the destination briefly translucent until the DOM rotation promoted it to
 * the main sheet. Keep every real neighbour fully painted for the complete
 * drag/settle/switch handoff; boundary placeholders remain hidden. */
.discover-preview-panel.is-discover-books-detail:is(
  .is-book-carousel-dragging,
  .is-book-carousel-settling,
  .is-book-carousel-switching
) .discover-book-carousel-neighbor:not([hidden]) {
  opacity: 1 !important;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail:is(
  .is-book-carousel-dragging,
  .is-book-carousel-settling,
  .is-book-carousel-switching
) :is(
  .discover-preview-sheet,
  .discover-book-carousel-neighbor
) > .discover-preview-content.is-editorial-preview {
  scroll-behavior: auto !important;
}

.discover-preview-panel.is-discover-books-detail:is(
  .is-book-dismiss-dragging,
  .is-book-dismiss-settling,
  .is-book-dismiss-completing
)::before {
  opacity: var(--book-dismiss-backdrop-opacity, 1) !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-dismiss-dragging::before {
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail:is(
  .is-book-dismiss-settling,
  .is-book-dismiss-completing
)::before {
  transition: opacity 175ms cubic-bezier(0.22, 0.82, 0.24, 1) !important;
}

.discover-preview-panel.is-discover-books-detail:is(
  .is-book-dismiss-dragging,
  .is-book-dismiss-settling,
  .is-book-dismiss-completing
) .discover-book-carousel-neighbors {
  transform-origin: center top;
  will-change: transform, opacity;
}

.discover-preview-panel.is-discover-books-detail.is-book-dismiss-dragging .discover-preview-sheet {
  /* Keep the same native pan recognizer alive while the gesture crosses the
     scrollTop=0 boundary. Replacing it with an overflow-hidden drag surface
     made iOS end the scroll and prevented a reversal from continuing upward. */
  overflow-y: auto !important;
  overscroll-behavior-y: none !important;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-dismiss-completing {
  pointer-events: none;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning.is-book-carousel-ready .discover-preview-sheet {
  opacity: 1;
  clip-path: none !important;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning.is-book-carousel-ready .discover-book-carousel-neighbor {
  opacity: 1;
  backface-visibility: hidden;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning.is-book-carousel-ready .discover-book-carousel-neighbor:is(.is-previous-buffer, .is-next-buffer) {
  opacity: 0 !important;
}

@media (max-width: 620px) {
  .discover-preview-panel.is-discover-books-detail.is-book-carousel-ready .discover-book-carousel-neighbor > .discover-preview-content.is-editorial-preview {
    padding-top: 4px !important;
    padding-right: max(20px, env(safe-area-inset-right)) !important;
    padding-left: max(20px, env(safe-area-inset-left)) !important;
  }

  .discover-book-carousel-neighbor-inner {
    width: 84%;
    padding-top: max(88px, calc(env(safe-area-inset-top) + 70px));
    gap: 14px;
  }

  .discover-book-carousel-neighbor-cover {
    width: clamp(150px, 45vw, 188px);
  }

  .discover-book-carousel-neighbor-copy > strong {
    font-size: clamp(1.7rem, 8vw, 2.35rem);
  }
}

html.theme-dark .discover-preview-panel.is-discover-books-detail .discover-editorial-preview-hero.is-books .discover-editorial-preview-cover,
body.theme-dark .discover-preview-panel.is-discover-books-detail .discover-editorial-preview-hero.is-books .discover-editorial-preview-cover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.38) !important;
}

.discover-preview-panel.is-discover-books-detail .discover-editorial-preview-hero.is-books .discover-editorial-preview-copy {
  width: min(620px, 100%);
  justify-items: center;
}

.discover-preview-panel.is-discover-books-detail .discover-editorial-preview-hero.is-books .discover-editorial-preview-copy > h2 {
  max-width: 18ch;
  overflow-wrap: normal;
}

.discover-preview-panel.is-discover-books-detail .discover-preview-content.is-editorial-preview > :is(
  .discover-preview-actions,
  .discover-editorial-preview-about,
  .discover-editorial-preview-glance,
  .discover-preview-source-details,
  .discover-preview-feedback,
  .related-reading-module
) {
  width: min(680px, 100%);
  justify-self: center;
}

body.is-discover-preview-open .discover-preview-panel.is-discover-books-detail:not([hidden]) .discover-preview-content.is-editorial-preview {
  padding-bottom: max(126px, calc(env(safe-area-inset-bottom) + 108px)) !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning {
  background: transparent !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 74% 27% at 102% 0%, rgba(190, 128, 56, 0.09), transparent 68%),
    var(--preview-page);
  opacity: 0;
  transition: opacity 260ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

html.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning::before,
body.theme-dark .discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning::before {
  background:
    radial-gradient(ellipse 76% 29% at 102% 0%, rgba(204, 139, 67, 0.08), transparent 68%),
    linear-gradient(155deg, #101216 0%, var(--preview-page) 56%, #090b0e 100%);
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning .discover-preview-sheet {
  position: relative;
  z-index: 1;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning :is(
  .discover-preview-sheet > .discover-preview-header,
  .discover-preview-sheet > .discover-preview-content.is-editorial-preview .discover-editorial-preview-hero.is-books .discover-editorial-preview-copy,
  .discover-preview-sheet > .discover-preview-content.is-editorial-preview > :not(.discover-editorial-preview-hero):not(.related-reading-module)
) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning .discover-preview-sheet .discover-editorial-preview-hero.is-books .discover-editorial-preview-media {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-transitioning.is-book-details-revealed::before {
  opacity: 1;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-closing .discover-editorial-preview-hero.is-books .discover-editorial-preview-media {
  opacity: 1 !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-cover-closing :is(
  .discover-preview-header,
  .discover-editorial-preview-hero.is-books .discover-editorial-preview-copy,
  .discover-preview-content.is-editorial-preview > :not(.discover-editorial-preview-hero)
) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* The panel's primary information participates in the expansion. Secondary
 * reading paths and tappable corner chrome wait for the shared panel/cover
 * completion barrier, while retaining their layout throughout the flight. */
.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready:not(.is-book-secondary-revealed) :is(
  .discover-preview-sheet > .discover-preview-header > .discover-preview-back,
  .discover-preview-sheet > .discover-preview-header > .discover-preview-save,
  .discover-book-carousel-neighbor > .discover-book-carousel-neighbor-header > .discover-preview-back,
  .discover-book-carousel-neighbor > .discover-book-carousel-neighbor-header > .discover-preview-save
) {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translate3d(0, -3px, 0) scale(0.96) !important;
  pointer-events: none !important;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-secondary-revealed :is(
  .discover-preview-sheet > .discover-preview-header > .discover-preview-back,
  .discover-preview-sheet > .discover-preview-header > .discover-preview-save,
  .discover-book-carousel-neighbor > .discover-book-carousel-neighbor-header > .discover-preview-back,
  .discover-book-carousel-neighbor > .discover-book-carousel-neighbor-header > .discover-preview-save
) {
  visibility: visible !important;
  opacity: var(--book-panel-chrome-opacity, 1) !important;
  transform: none !important;
  transition:
    opacity 110ms cubic-bezier(0.2, 0.72, 0.2, 1),
    transform 140ms cubic-bezier(0.18, 0.82, 0.2, 1) !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-secondary-revealed.is-book-chrome-scrolled :is(
  .discover-preview-sheet > .discover-preview-header > .discover-preview-back,
  .discover-preview-sheet > .discover-preview-header > .discover-preview-save,
  .discover-book-carousel-neighbor > .discover-book-carousel-neighbor-header > .discover-preview-back,
  .discover-book-carousel-neighbor > .discover-book-carousel-neighbor-header > .discover-preview-save
) {
  pointer-events: none !important;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready:not(.is-book-secondary-revealed) :is(
  .discover-preview-sheet,
  .discover-book-carousel-neighbor
) > .discover-preview-content.is-editorial-preview > :is(
  .related-reading-module
) {
  visibility: hidden !important;
  opacity: 0 !important;
  transform: translate3d(0, 9px, 0) !important;
  pointer-events: none !important;
  transition: none !important;
}

.discover-preview-panel.is-discover-books-detail.is-book-carousel-ready.is-book-secondary-revealed :is(
  .discover-preview-sheet,
  .discover-book-carousel-neighbor
) > .discover-preview-content.is-editorial-preview > :is(
  .related-reading-module
) {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
  transition:
    opacity 150ms cubic-bezier(0.2, 0.72, 0.2, 1) 20ms,
    transform 180ms cubic-bezier(0.18, 0.82, 0.2, 1) 20ms !important;
}

/* The flight owns motion; inherited hero opacity/transform transitions must
 * never restart when a copy is inserted or its shelf source is exchanged. */
.is-discover-book-flight-origin,
.discover-book-cover-flight {
  transition: none !important;
  animation: none !important;
}

.discover-book-cover-flight {
  overflow: visible !important;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 620px) {
  .discover-preview-panel.is-discover-books-detail .discover-editorial-preview-hero.is-books {
    --editorial-cover-w: clamp(154px, 46vw, 188px);
    gap: 16px;
  }

  .discover-preview-panel.is-discover-books-detail .discover-editorial-preview-hero.is-books .discover-editorial-preview-copy > h2 {
    max-width: 15ch;
    font-size: clamp(1.85rem, 8.2vw, 2.55rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-preview-panel.is-discover-books-detail *,
  .discover-preview-panel.is-discover-books-detail::before {
    transition-duration: 0.01ms !important;
  }
}

/* Final Discover navigation contract: the legacy destination bar is non-visual. */
.discover-panel .discover-tabs[hidden] {
  display: none !important;
}

.discover-panel:has(.discover-tabs [data-discover-tab="browse"][aria-selected="true"]) .discover-catalogue-shell > .discover-format-switch {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Persistent Discovery controls: editorial search and format navigation. */
.discover-panel .discover-header,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  z-index: 4 !important;
  width: min(920px, 100%) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-inline: auto !important;
  padding:
    calc(var(--destination-page-top) + 4px)
    var(--destination-page-gutter)
    4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 16px !important;
  align-content: start !important;
  align-items: start !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-panel .discover-header-copy,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header-copy {
  grid-column: 1 !important;
  min-width: 0;
  display: grid !important;
  justify-items: start !important;
  gap: 0 !important;
  text-align: left !important;
}

.discover-panel .discover-header-copy h2,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header-copy h2 {
  margin: 0 !important;
  color: var(--discover-text) !important;
  font-family: var(--heading-font) !important;
  font-size: clamp(3.55rem, 15.2vw, 6rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
}

.discover-panel .discover-header-copy h2 .brand-red-letter,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header-copy h2 .brand-red-letter {
  color: var(--discover-coral) !important;
}

.discover-panel .discover-header-copy p,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header-copy p {
  min-height: 1.25em;
  margin: 10px 0 0 !important;
  font-family: var(--ui-font) !important;
  font-size: clamp(0.88rem, 2.4vw, 1rem) !important;
  font-weight: 450 !important;
  line-height: 1.25 !important;
}

.discover-panel:not([hidden]):not(.is-destination-cascading) .discover-header {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.discover-panel .discover-search-toggle,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-search-toggle {
  margin-top: 5px !important;
  align-self: start !important;
}

.discover-panel .discover-header,
.discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header {
  grid-template-columns: minmax(0, 1fr) !important;
}

.discover-persistent-controls {
  position: relative;
  z-index: 8;
  box-sizing: border-box;
  width: min(920px, calc(100% - 40px));
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

/* One search treatment follows the active theme on every Discover route,
 * including the search entry on a Research discipline page. */
#discoverPanel :is(#discoverSearchBar.discover-search-bar, .research-subject-search) {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--discover-line-strong) !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center stretch !important;
  gap: 10px !important;
  overflow: hidden !important;
  background: var(--discover-surface) !important;
  color: var(--discover-muted) !important;
  font: 450 16px/1.35 var(--ui-font) !important;
  text-align: left !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: none !important;
  filter: none !important;
}

#discoverPanel #discoverSearchBar.discover-search-bar {
  grid-template-columns: 20px minmax(0, 1fr) 44px !important;
  padding-right: 3px !important;
}

#discoverPanel #discoverSearchBar.discover-search-bar:has(.discover-search-clear[hidden]) {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  padding-right: 14px !important;
}

#discoverPanel :is(#discoverSearchBar.discover-search-bar:focus-within, .research-subject-search:focus-visible) {
  border-color: var(--discover-coral-strong) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--discover-coral) 14%, transparent) !important;
}

#discoverPanel :is(#discoverSearchBar, .research-subject-search) > svg {
  width: 20px !important;
  height: 20px !important;
  justify-self: center !important;
  fill: none !important;
  color: var(--discover-muted) !important;
  stroke: currentColor !important;
  stroke-width: 1.45 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#discoverPanel :is(#discoverSearchBar:focus-within, .research-subject-search:focus-visible) > svg {
  color: var(--discover-coral-strong) !important;
}

#discoverPanel .research-subject-search {
  grid-template-columns: 20px minmax(0, 1fr) !important;
  padding-right: 14px !important;
}

#discoverPanel .research-subject-search > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#discoverSearchBar #discoverSearchInput {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--discover-text) !important;
  -webkit-text-fill-color: var(--discover-text) !important;
  caret-color: var(--discover-coral-strong) !important;
  font: 450 16px/1.35 var(--ui-font) !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#discoverSearchBar #discoverSearchInput::placeholder {
  color: var(--discover-muted) !important;
  -webkit-text-fill-color: var(--discover-muted) !important;
  opacity: 1 !important;
}

#discoverSearchBar #discoverSearchInput::-webkit-search-cancel-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

#discoverSearchBar .discover-search-clear {
  position: relative !important;
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: block !important;
  background: transparent !important;
  color: var(--discover-muted) !important;
  box-shadow: none !important;
  transform: none !important;
}

#discoverSearchBar .discover-search-clear[hidden] {
  display: none !important;
}

#discoverSearchBar .discover-search-clear::before,
#discoverSearchBar .discover-search-clear::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.4px;
  border-radius: 2px;
  background: currentColor;
}

#discoverSearchBar .discover-search-clear::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

#discoverSearchBar .discover-search-clear::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

#discoverSearchBar .discover-search-clear:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

#discoverSearchBar .discover-search-clear:focus-visible {
  color: var(--discover-coral-strong) !important;
  outline: 2px solid currentColor !important;
  outline-offset: -8px !important;
}

/* Open text tabs: the accent and a short underline carry selection in all themes. */
#discoverFormatSwitch.discover-persistent-format-switch {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 49px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--discover-line) !important;
  border-radius: 0 !important;
  display: flex !important;
  gap: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

#discoverFormatSwitch.discover-persistent-format-switch::-webkit-scrollbar {
  display: none;
}

#discoverFormatSwitch.discover-persistent-format-switch button {
  position: relative !important;
  flex: 1 0 auto !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 0 clamp(14px, 2.4vw, 26px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--discover-muted) !important;
  font: 500 clamp(0.875rem, 2.15vw, 1rem)/1.25 var(--ui-font) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  -webkit-tap-highlight-color: transparent;
}

#discoverFormatSwitch.discover-persistent-format-switch button::after {
  position: absolute;
  right: auto;
  bottom: 0;
  left: 50%;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transform: translateX(-50%);
  content: "";
}

#discoverFormatSwitch.discover-persistent-format-switch button.is-active {
  background: transparent !important;
  color: var(--discover-coral-strong) !important;
  box-shadow: none !important;
}

#discoverFormatSwitch.discover-persistent-format-switch button.is-active::after {
  background: var(--discover-coral) !important;
}

#discoverFormatSwitch.discover-persistent-format-switch button:focus-visible {
  outline: 2px solid var(--discover-coral-strong) !important;
  outline-offset: -6px !important;
}

#discoverFormatSwitch.discover-persistent-format-switch button:is(:hover, :focus-visible) {
  color: var(--discover-coral-strong) !important;
}

#discoverFormatSwitch.discover-persistent-format-switch button:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

@media (max-width: 620px) {
  .discover-panel .discover-header,
  .discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header {
    padding-top: calc(var(--destination-page-top) + 1px) !important;
    padding-bottom: 8px !important;
  }

  .discover-panel .discover-header-copy h2,
  .discover-panel:has(.discover-tabs [data-discover-tab][aria-selected="true"]) .discover-header-copy h2 {
    font-size: clamp(2.9rem, 12.4vw, 3.35rem) !important;
    line-height: 1 !important;
  }

  .discover-persistent-controls {
    width: calc(100% - 36px);
    margin-bottom: 11px;
    gap: 8px;
  }

  #discoverFormatSwitch.discover-persistent-format-switch {
    min-height: 45px !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  #discoverFormatSwitch.discover-persistent-format-switch button {
    min-height: 44px !important;
    padding-inline: 11px !important;
    font-size: clamp(0.82rem, 3.55vw, 0.92rem) !important;
  }
}

/* Archives now use the same printed-cover system as every other format. */
.discover-originals-document-art.is-unified {
  isolation: isolate;
  aspect-ratio: 0.7;
  border-radius: 9px;
  overflow: visible;
  background: transparent;
  filter: none;
  transform: none;
}

.discover-originals-document-art.is-unified::before,
.discover-originals-document-art.is-unified::after {
  display: none;
}

.discover-originals-document-art.is-unified > .discover-originals-paper-art {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.discover-originals-document-art.is-unified.is-hero {
  width: min(100%, 190px);
  transform: none;
  filter: drop-shadow(0 18px 20px rgba(0, 0, 0, 0.2));
}

.discover-originals-document-art.is-unified.is-hero::before {
  position: absolute;
  z-index: -1;
  inset: 7% -5% -4% 8%;
  width: auto;
  height: auto;
  border: 1px solid rgba(62, 55, 48, 0.12);
  border-radius: 9px;
  display: block;
  background: color-mix(in srgb, var(--original-accent, #918575) 24%, #d7cebc);
  box-shadow: none;
  content: "";
  transform: none;
}

.discover-empty-state:has(> .discover-empty-art) {
  min-height: 220px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.discover-empty-state > .discover-empty-art {
  color: var(--discover-muted);
  opacity: 0.7;
}

/* Cabinet of Curiosities: source-led mysteries, visions, puzzles, and singular lives. */
#discoverFormatSwitch.discover-persistent-format-switch {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.discover-oddities-landing {
  gap: clamp(28px, 5vw, 46px) !important;
  padding-bottom: clamp(36px, 8vw, 72px) !important;
}

.discover-cabinet-breadcrumb {
  position: relative;
  z-index: 6;
  box-sizing: border-box;
  width: max-content;
  min-height: 40px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  margin-left: clamp(5px, 0.9vw, 8px);
  background: transparent !important;
}

.discover-cabinet-breadcrumb > .discover-cabinet-return {
  min-height: 40px;
  padding: 0 3px 0 0;
  border: 0;
  border-radius: 0;
  gap: 8px;
  flex-wrap: nowrap;
  background: transparent !important;
  color: var(--discover-text);
  font: 650 0.72rem/1 var(--ui-font);
  box-shadow: none !important;
  white-space: nowrap;
  cursor: pointer;
}

.discover-cabinet-breadcrumb > .discover-cabinet-return > i {
  color: var(--discover-coral-strong);
  font: 540 1rem/1 var(--ui-font);
  font-style: normal;
  transition: transform 180ms ease;
}

.discover-cabinet-breadcrumb > .discover-cabinet-return:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--discover-coral-strong) 76%, transparent);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  .discover-cabinet-breadcrumb > .discover-cabinet-return:hover > i {
    transform: translateX(-2px);
  }
}

.discover-oddities-feature {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 286px;
  padding: clamp(24px, 5vw, 42px);
  border: 1px solid color-mix(in srgb, var(--discover-line) 64%, #5f536d);
  border-radius: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(148px, 0.58fr);
  align-items: center;
  gap: clamp(22px, 5vw, 48px);
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 14%, rgba(196, 119, 82, 0.22), transparent 31%),
    radial-gradient(circle at 8% 110%, rgba(92, 79, 119, 0.2), transparent 38%),
    linear-gradient(132deg, #17171b, #26242b 62%, #19191d);
  color: #f4eee4;
  text-align: left;
  box-shadow: 0 22px 54px rgba(32, 26, 36, 0.18);
  transform: none !important;
}

.discover-oddities-feature::before {
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(244, 238, 228, 0.08);
  border-radius: 16px;
  pointer-events: none;
  content: "";
}

.discover-oddities-feature:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

.discover-oddities-feature-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  gap: 10px;
}

.discover-oddities-feature-copy > small,
.discover-oddities-intro > p,
.discover-oddity-shelf-head p {
  margin: 0;
  color: #d88970;
  font: 730 0.63rem/1.2 var(--ui-font);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.discover-oddities-feature-copy > strong {
  max-width: 16ch;
  color: #fffaf2;
  font: 480 clamp(2rem, 6vw, 3.8rem)/0.96 var(--ui-font);
  letter-spacing: -0.035em;
}

.discover-oddities-feature-copy > span {
  max-width: 55ch;
  color: rgba(244, 238, 228, 0.74);
  font: 450 clamp(0.82rem, 1.8vw, 0.98rem)/1.5 var(--ui-font);
}

.discover-oddities-feature-copy > em {
  margin-top: 5px;
  color: #f1c8b6;
  font: 650 0.72rem/1 var(--ui-font);
  font-style: normal;
}

.discover-oddities-feature-copy > em i {
  margin-left: 5px;
  font-style: normal;
}

.discover-oddities-intro {
  padding: 0 2px;
  display: grid;
  gap: 9px;
}

.discover-oddities-intro > h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--discover-text);
  font: 470 clamp(2.75rem, 9vw, 5.4rem)/0.88 var(--ui-font);
  letter-spacing: -0.055em;
}

.discover-oddities-intro > span {
  max-width: 66ch;
  color: var(--discover-muted);
  font: 455 clamp(0.86rem, 2.1vw, 1.02rem)/1.52 var(--ui-font);
}

.discover-oddities-shelves {
  min-width: 0;
  display: grid;
  gap: clamp(34px, 6vw, 54px);
}

.discover-oddity-shelf {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.discover-oddity-shelf-head {
  min-width: 0;
}

.discover-oddity-shelf-head > div {
  max-width: 64ch;
  display: grid;
  gap: 5px;
}

.discover-oddity-shelf-head h2 {
  margin: 0;
  color: var(--discover-text);
  font: 500 clamp(1.42rem, 4vw, 2.15rem)/1.02 var(--ui-font);
  letter-spacing: -0.025em;
}

.discover-oddity-shelf-head span {
  color: var(--discover-muted);
  font: 470 0.79rem/1.42 var(--ui-font);
}

.discover-oddity-rail {
  display: flex;
  gap: 14px;
  scroll-snap-type: x proximity;
}

.discover-oddity-card {
  box-sizing: border-box;
  width: 190px;
  min-width: 190px;
  padding: 0;
  border: 0;
  display: grid;
  align-content: start;
  gap: 11px;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  scroll-snap-align: start;
  box-shadow: none;
  transform: none !important;
}

.discover-oddity-card:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

.discover-oddity-art {
  --oddity-ink: #76637f;
  --oddity-wash: #e6dce5;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 0.76;
  border: 1px solid color-mix(in srgb, var(--oddity-ink) 36%, var(--discover-line));
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.55%, color-mix(in srgb, var(--oddity-ink) 18%, transparent) 49.5% 50.5%, transparent 50.45%),
    linear-gradient(0deg, transparent 49.55%, color-mix(in srgb, var(--oddity-ink) 14%, transparent) 49.5% 50.5%, transparent 50.45%),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--oddity-wash) 75%, transparent), transparent 48%),
    color-mix(in srgb, var(--discover-surface) 87%, var(--oddity-wash));
  color: var(--oddity-ink);
  box-shadow: 0 13px 25px rgba(52, 43, 57, 0.09);
}

.discover-oddity-art:not(.has-image)::before,
.discover-oddity-art:not(.has-image)::after {
  position: absolute;
  inset: 13%;
  border: 1px solid color-mix(in srgb, var(--oddity-ink) 28%, transparent);
  border-radius: 50%;
  content: "";
}

.discover-oddity-art:not(.has-image)::after {
  inset: 25% 11%;
  border-radius: 50% 12%;
  transform: rotate(-16deg);
}

.discover-oddity-art.has-image::before,
.discover-oddity-art.has-image::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
}

.discover-oddity-art.has-image::before {
  background:
    linear-gradient(180deg, rgba(12, 13, 16, 0.1) 42%, rgba(12, 13, 16, 0.67) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--oddity-ink) 18%, transparent), transparent 42%);
}

.discover-oddity-art.has-image::after {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: inherit;
  box-shadow: inset 0 0 34px rgba(8, 9, 11, 0.13);
}

.discover-oddity-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.76) contrast(0.98) brightness(0.92);
  transform: scale(1.01);
}

.discover-oddity-art > span {
  position: relative;
  z-index: 2;
  max-width: 82%;
  color: inherit;
  font: 500 clamp(1.55rem, 5vw, 2.7rem)/1 var(--ui-font);
  letter-spacing: -0.04em;
  text-align: center;
}

.discover-oddity-art > small {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 11px;
  color: color-mix(in srgb, var(--oddity-ink) 76%, var(--discover-text));
  font: 680 0.56rem/1 var(--ui-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The card pills use a solid fill rather than backdrop blur: WebKit re-blurs
 * each pill every frame the Cabinet moves or scrolls, which made its
 * navigation stutter on iPhone. */
.discover-oddity-art.has-image > span {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 27px;
  max-width: calc(100% - 20px);
  min-height: 27px;
  padding: 0 8px;
  border: 1px solid rgba(248, 242, 233, 0.24);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(18, 18, 21, 0.74);
  color: rgba(255, 248, 239, 0.9);
  font: 680 0.56rem/1 var(--ui-font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.discover-oddity-art.has-image > small {
  right: 9px;
  bottom: 9px;
  padding: 5px 7px;
  border: 1px solid rgba(248, 242, 233, 0.18);
  border-radius: 999px;
  background: rgba(18, 18, 21, 0.74);
  color: rgba(255, 248, 239, 0.82);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.discover-oddity-art.is-feature {
  justify-self: end;
  width: min(100%, 184px);
  aspect-ratio: 0.72;
  border-color: rgba(244, 238, 228, 0.2);
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(248, 222, 205, 0.13) 49.5% 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(248, 222, 205, 0.1) 49.5% 50.5%, transparent 50.5%),
    radial-gradient(circle at 50% 45%, rgba(203, 127, 91, 0.28), transparent 47%),
    #211f25;
  color: #e1a185;
  box-shadow: 0 24px 38px rgba(0, 0, 0, 0.28);
}

.discover-oddity-art.is-feature.has-image {
  background: #211f25;
}

.discover-oddity-art.is-feature.has-image > img {
  filter: saturate(0.82) contrast(1.01) brightness(0.86);
}

.discover-oddity-art.is-feature > small {
  color: rgba(244, 238, 228, 0.68);
}

.discover-oddity-art.is-case-unclosed,
.discover-oddity-art.is-signals-from-the-wire { --oddity-ink: #596c7d; --oddity-wash: #dce5e8; }
.discover-oddity-art.is-impossible-files { --oddity-ink: #8a595b; --oddity-wash: #ead9d7; }
.discover-oddity-art.is-hidden-arts,
.discover-oddity-art.is-engines-of-the-invisible { --oddity-ink: #695c82; --oddity-wash: #e3ddec; }
.discover-oddity-art.is-singular-lives { --oddity-ink: #927044; --oddity-wash: #ece1cf; }
.discover-oddity-art.is-sacred-archive { --oddity-ink: #8b6742; --oddity-wash: #ede2cd; }
.discover-oddity-art.is-from-the-footnotes { --oddity-ink: #59725f; --oddity-wash: #dce7dc; }
.discover-oddity-art.is-natural-oddities { --oddity-ink: #6b7348; --oddity-wash: #e4e7d4; }
.discover-oddity-art.is-a-puzzle-for-you { --oddity-ink: #4f6f73; --oddity-wash: #d8e7e6; }
.discover-oddity-art.is-signs-in-the-sky { --oddity-ink: #6f617f; --oddity-wash: #dfdbe9; }

.discover-oddity-card-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.discover-oddity-card-copy > small {
  color: var(--discover-coral-strong);
  font: 700 0.57rem/1.15 var(--ui-font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.discover-oddity-card-copy > strong {
  color: var(--discover-text);
  font: 510 1.03rem/1.12 var(--ui-font);
  letter-spacing: -0.015em;
}

.discover-oddity-card-copy > span {
  color: var(--discover-muted);
  font: 520 0.65rem/1.3 var(--ui-font);
}

.discover-oddity-card-copy > em {
  width: max-content;
  margin-top: 2px;
  padding: 4px 7px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  color: var(--discover-muted);
  font: 650 0.55rem/1 var(--ui-font);
  font-style: normal;
}

.discover-oddity-card-copy > em.is-native {
  border-color: color-mix(in srgb, #6c8b69 38%, var(--discover-line));
  color: color-mix(in srgb, #527350 80%, var(--discover-text));
}

.discover-oddities-source-note {
  padding: clamp(18px, 4vw, 28px);
  border: 1px solid var(--discover-line);
  border-radius: 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  background: color-mix(in srgb, var(--discover-surface-soft) 76%, transparent);
}

.discover-oddities-source-note > span {
  color: var(--discover-coral-strong);
  font: 520 1.45rem/1 var(--ui-font);
}

.discover-oddities-source-note p {
  margin: 0;
  color: var(--discover-muted);
  font: 470 0.78rem/1.5 var(--ui-font);
}

.discover-oddities-source-note strong {
  color: var(--discover-text);
  font-weight: 650;
}

.discover-oddities-clear {
  width: max-content;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  background: transparent;
  color: var(--discover-text);
  font: 650 0.67rem/1 var(--ui-font);
  transform: none !important;
}

.discover-oddities-clear:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

.discover-oddities-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(174px, 1fr));
  gap: 24px 16px;
}

.discover-oddities-search-grid > .discover-oddity-card {
  width: 100%;
  min-width: 0;
}

html.theme-dark .discover-oddity-art:not(.has-image),
body.theme-dark .discover-oddity-art:not(.has-image) {
  --oddity-wash: #31303a;
  border-color: rgba(205, 196, 220, 0.15);
  background:
    linear-gradient(90deg, transparent 49.55%, color-mix(in srgb, var(--oddity-ink) 28%, transparent) 49.5% 50.5%, transparent 50.45%),
    linear-gradient(0deg, transparent 49.55%, color-mix(in srgb, var(--oddity-ink) 22%, transparent) 49.5% 50.5%, transparent 50.45%),
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--oddity-ink) 16%, transparent), transparent 48%),
    #24232b;
  color: color-mix(in srgb, var(--oddity-ink) 58%, #ddd6e6);
  box-shadow: 0 13px 26px rgba(0, 0, 0, 0.2);
}

html.theme-dark .discover-oddity-art.is-feature,
body.theme-dark .discover-oddity-art.is-feature {
  color: #e1a185;
}

html.theme-dark .discover-oddity-card-copy > em.is-native,
body.theme-dark .discover-oddity-card-copy > em.is-native {
  border-color: rgba(141, 177, 137, 0.27);
  color: #a9c5a6;
}

@media (max-width: 720px) {
  .discover-oddities-feature {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 18px;
  }

  .discover-oddities-feature-copy > span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 620px) {
  .discover-cabinet-breadcrumb {
    min-height: 38px;
    margin-left: 5px;
  }

  .discover-cabinet-breadcrumb > .discover-cabinet-return {
    min-height: 38px;
    font-size: 0.7rem;
  }

  .discover-short-reads-subroute-head {
    min-height: 78px;
    align-items: start;
  }

  .discover-short-reads-subroute-head h1 {
    font-size: clamp(1.75rem, 8vw, 2.25rem);
  }

  .discover-short-reads-subroute-head span {
    display: none;
  }

  .discover-short-reads-subroute-head .discover-originals-editorial-return {
    margin-top: 15px;
    font-size: 0.61rem;
  }

  #discoverFormatSwitch.discover-persistent-format-switch {
    min-height: 45px !important;
  }

  #discoverFormatSwitch.discover-persistent-format-switch button {
    min-height: 44px !important;
  }

  .discover-oddities-feature {
    padding: 22px;
    border-radius: 20px;
    grid-template-columns: minmax(0, 1fr) 96px;
  }

  .discover-oddities-feature::before {
    inset: 9px;
  }

  .discover-oddities-feature-copy > strong {
    font-size: clamp(1.72rem, 8.2vw, 2.35rem);
  }

  .discover-oddities-feature-copy > span {
    -webkit-line-clamp: 2;
  }

  .discover-oddity-card {
    width: 172px;
    min-width: 172px;
  }
}

/* For You: the Books page's editorial language applied to a mixed reading feed. */
.discover-for-you-editorial {
  gap: clamp(15px, 2.4vw, 22px) !important;
  padding-bottom: clamp(28px, 7vw, 58px);
}

.discover-for-you-rabbit-section {
  min-width: 0;
  display: grid;
  gap: 10px;
}

.discover-for-you-rabbit-section > header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.discover-for-you-rabbit-section > header h2 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--discover-text);
  font: 400 clamp(1.55rem, 6.2vw, 3.4rem)/0.98 "Rhythm Wordmark", Georgia, "Times New Roman", serif;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.discover-for-you-rabbit-hole {
  --for-you-hero-accent: #c97966;
  position: relative;
  min-width: 0;
  min-height: clamp(156px, 22vw, 194px);
  padding: clamp(18px, 3vw, 28px) 0;
  border: 0;
  border-radius: 0;
  display: grid;
  align-items: center;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  color: #f4efe6;
  box-shadow: none;
}

.discover-for-you-rabbit-hole::before,
.discover-for-you-rabbit-hole::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.discover-for-you-rabbit-hole::before {
  inset: 0 -20px 0 50%;
  z-index: -2;
  background-image: var(--for-you-hero-image, none);
  background-position: var(--for-you-hero-position, 50% 42%);
  background-size: cover;
  filter: saturate(0.76) contrast(1.02) brightness(0.68);
  opacity: 0.78;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 20%, #000 54%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 20%, #000 54%);
}

.discover-for-you-rabbit-hole::after {
  inset: 0 -20px;
  z-index: -1;
  background:
    linear-gradient(90deg, #101216 0%, #101216 43%, rgba(16, 18, 22, 0.83) 58%, rgba(16, 18, 22, 0.16) 84%, rgba(16, 18, 22, 0.04) 100%),
    linear-gradient(0deg, rgba(16, 18, 22, 0.78), transparent 58%);
}

.discover-for-you-editorial .discover-for-you-refresh {
  position: static;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--discover-muted);
  font: 620 0.61rem/1 var(--ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: none;
  backdrop-filter: none;
  transform: none !important;
}

.discover-for-you-editorial .discover-for-you-refresh > svg {
  width: 14px;
  height: 14px;
  color: var(--discover-coral);
}

html.theme-dark .discover-for-you-editorial .discover-for-you-refresh,
body.theme-dark .discover-for-you-editorial .discover-for-you-refresh {
  border-color: transparent;
  background: transparent;
  color: var(--discover-muted);
}

.discover-for-you-rabbit-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  width: min(62%, 640px);
  max-width: 640px;
  padding: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 8px;
}

.discover-for-you-rabbit-copy > h2 {
  max-width: 16ch;
  margin: 0;
  color: #f5f0e7;
  font: 650 clamp(1.62rem, 4.6vw, 2.85rem)/0.98 var(--ui-font);
  letter-spacing: -0.024em;
}

.discover-for-you-rabbit-copy > p {
  max-width: 48ch;
  margin: 0;
  color: rgba(225, 218, 207, 0.7);
  font: 440 clamp(0.8rem, 1.8vw, 0.94rem)/1.42 var(--ui-font);
}

.discover-for-you-rabbit-card:is(:active, .is-tactile-press),
.discover-for-you-shelf-card:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

.discover-for-you-rabbit-trail-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.discover-for-you-rabbit-trail-head > span {
  color: var(--discover-coral);
  font: 760 clamp(0.68rem, 1.65vw, 0.78rem)/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-for-you-rabbit-trail-head > small {
  flex: 0 0 auto;
  color: var(--discover-muted);
  font: 620 0.61rem/1 var(--ui-font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.discover-for-you-rabbit-trail-head > small i {
  margin-left: 5px;
  color: var(--discover-coral);
  font-style: normal;
}

.discover-for-you-rabbit-grid {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(124px, 16vw, 154px);
  gap: clamp(10px, 1.7vw, 15px);
  padding-top: 2px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}

#discoverPanel#discoverPanel#discoverPanel .discover-for-you-rabbit-grid.app-shelf-rail {
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x pan-y !important;
}

#discoverPanel#discoverPanel#discoverPanel .discover-for-you-rabbit-grid.app-shelf-rail button {
  touch-action: pan-x pan-y !important;
}

.discover-for-you-rabbit-card {
  --rabbit-card-accent: #c98572;
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 7px;
  overflow: visible;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  box-shadow: none;
  transform: none !important;
}

.discover-for-you-rabbit-card.is-books {
  --rabbit-card-accent: #d1846e;
}

.discover-for-you-rabbit-card.is-articles {
  --rabbit-card-accent: #9d91bb;
}

.discover-for-you-rabbit-card.is-research {
  --rabbit-card-accent: #81a99a;
}

.discover-for-you-rabbit-card.is-originals,
.discover-for-you-rabbit-card.is-oddities {
  --rabbit-card-accent: #c99a62;
}

.discover-for-you-rabbit-card:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--rabbit-card-accent) 72%, transparent);
  outline-offset: 4px;
}

.discover-for-you-rabbit-card-art,
.discover-for-you-rabbit-card-art > img,
.discover-for-you-rabbit-card-art > span {
  width: 100%;
  height: 100%;
}

.discover-for-you-rabbit-card-art {
  position: relative;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 8px;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--rabbit-card-accent) 10%, var(--discover-surface-soft));
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
}

.discover-for-you-rabbit-card-art > img {
  position: relative;
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: var(--rabbit-card-image-position, 50% 28%);
  filter: saturate(0.9) contrast(1.01) brightness(0.92);
  opacity: 1;
}

.discover-for-you-rabbit-card-art > .discover-for-you-rabbit-card-art-backdrop {
  position: absolute;
  inset: -12%;
  z-index: 0;
  width: auto;
  height: auto;
  background-position: var(--rabbit-card-image-position, 50% 28%);
  background-size: cover;
  filter: blur(13px) saturate(0.65) brightness(0.48);
  opacity: 0.62;
  transform: scale(1.08);
}

.discover-for-you-rabbit-card-art > img.is-contained {
  box-sizing: border-box;
  padding: 8px;
  object-fit: contain;
  filter: saturate(0.86) contrast(1.02) brightness(0.94);
  opacity: 1;
}

.discover-for-you-rabbit-card.is-books .discover-for-you-rabbit-card-art {
  margin: 0;
  border: 0;
  border-radius: 8px;
}

.discover-for-you-rabbit-card.is-books .discover-for-you-rabbit-card-art > img {
  object-position: 50% 14%;
}

.discover-for-you-rabbit-motif {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 4px 9px 3px;
  display: block;
  color: var(--rabbit-card-accent);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
  opacity: 0.76;
}

.discover-for-you-rabbit-motif circle {
  fill: var(--discover-surface-soft);
}

.discover-for-you-rabbit-motif.is-article .is-dotted {
  stroke-dasharray: 1 5;
  opacity: 0.42;
}

.discover-for-you-rabbit-card-copy {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0 1px 3px;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow: hidden;
  background: transparent;
}

.discover-for-you-rabbit-card-head {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.discover-for-you-rabbit-card-head > b {
  flex: 0 0 auto;
  color: var(--discover-coral-strong);
  font: 720 clamp(0.5rem, 1vw, 0.6rem)/1 var(--ui-font);
  letter-spacing: 0.04em;
}

.discover-for-you-rabbit-card-head > small {
  min-width: 0;
  overflow: hidden;
  color: color-mix(in srgb, var(--rabbit-card-accent) 76%, var(--discover-muted));
  font: 720 clamp(0.45rem, 0.92vw, 0.52rem)/1 var(--ui-font);
  letter-spacing: 0.12em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.discover-for-you-rabbit-card.is-research .discover-for-you-rabbit-card-head > small {
  color: #9ac6b5;
}

.discover-for-you-rabbit-card.is-articles .discover-for-you-rabbit-card-head > small {
  color: #b6a9d1;
}

.discover-for-you-rabbit-card-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #f3eee5;
  font: 650 clamp(0.78rem, 2.1vw, 0.92rem)/1.2 var(--ui-font);
  letter-spacing: -0.012em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-for-you-rabbit-card-meta {
  overflow: hidden;
  color: rgba(223, 215, 203, 0.68);
  font: 540 0.54rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.discover-for-you-shelves {
  min-width: 0;
  display: grid;
  gap: clamp(17px, 2.8vw, 24px);
}

.discover-for-you-shelf {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.discover-for-you-shelf > header {
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.discover-for-you-shelf > header h2 {
  min-width: 0;
  margin: 0;
  color: var(--discover-coral);
  font: 760 clamp(0.68rem, 1.65vw, 0.78rem)/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.discover-for-you-shelf > header > button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: var(--discover-coral-strong);
  font: 580 0.66rem/1 var(--ui-font);
  box-shadow: none;
  transform: none !important;
}

.discover-for-you-shelf > header > button > i {
  font-family: var(--ui-font);
  font-style: normal;
}

.discover-for-you-shelf-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(112px, 15vw, 138px);
  gap: clamp(10px, 1.7vw, 15px);
  padding-top: 2px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-user-select: none;
  user-select: none;
}

.discover-for-you-shelf.is-books .discover-for-you-shelf-rail {
  grid-auto-columns: clamp(96px, 13.5vw, 126px);
}

.discover-for-you-shelf.is-landscape .discover-for-you-shelf-rail {
  grid-auto-columns: clamp(164px, 22vw, 204px);
}

#discoverPanel#discoverPanel#discoverPanel .discover-for-you-shelf-rail.app-shelf-rail {
  scroll-snap-type: x mandatory !important;
  touch-action: pan-x pan-y !important;
}

#discoverPanel#discoverPanel#discoverPanel .discover-for-you-shelf-rail.app-shelf-rail button {
  touch-action: pan-x pan-y !important;
}

.discover-for-you-shelf-card {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 7px;
  overflow: visible;
  background: transparent;
  color: var(--discover-text);
  text-align: left;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  box-shadow: none;
  transform: none !important;
}

#discoverPanel .discover-for-you-shelf-card {
  grid-template-rows: auto auto !important;
}

.discover-for-you-shelf-art,
.discover-for-you-shelf-art > img,
.discover-for-you-shelf-art > span {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 8px;
}

.discover-for-you-shelf-art {
  display: block;
  overflow: hidden;
  background: var(--discover-surface-soft);
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
}

.discover-for-you-shelf-art > img {
  display: block;
  object-fit: cover;
}

.discover-for-you-shelf.is-books .discover-for-you-shelf-art,
.discover-for-you-shelf.is-books .discover-for-you-shelf-art > img,
.discover-for-you-shelf.is-books .discover-for-you-shelf-art > span {
  aspect-ratio: 5 / 8;
}

.discover-for-you-shelf.is-landscape .discover-for-you-shelf-art,
.discover-for-you-shelf.is-landscape .discover-for-you-shelf-art > img,
.discover-for-you-shelf.is-landscape .discover-for-you-shelf-art > span {
  aspect-ratio: 1.42 / 1;
}

.discover-for-you-shelf-copy {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 0 1px 3px;
  display: grid;
  align-content: start;
  gap: 3px;
  overflow: hidden;
  background: transparent;
}

#discoverPanel .discover-for-you-shelf-copy {
  min-height: 0 !important;
}

.discover-for-you-shelf-kind {
  overflow: hidden;
  color: var(--discover-coral);
  font: 730 0.47rem/1 var(--ui-font);
  letter-spacing: 0.11em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.discover-for-you-shelf-card.is-research .discover-for-you-shelf-kind {
  color: #a98bb5;
}

.discover-for-you-shelf-card.is-articles .discover-for-you-shelf-kind {
  color: #8eae9e;
}

.discover-for-you-shelf-copy > strong {
  display: -webkit-box;
  overflow: hidden;
  color: #f3eee5;
  font: 650 clamp(0.78rem, 2.1vw, 0.92rem)/1.05 var(--ui-font);
  letter-spacing: -0.012em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.discover-for-you-shelf-copy > small {
  overflow: hidden;
  color: rgba(223, 215, 203, 0.66);
  font: 560 0.54rem/1.2 var(--ui-font);
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.theme-dark .discover-for-you-shelf-card,
body.theme-dark .discover-for-you-shelf-card {
  box-shadow: none;
}

/* The occasional research/article rail already uses floating copy; give its
 * artwork the same finished object treatment as the maintained shelves. */
.discover-research-shelf-card {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.discover-research-shelf-art {
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
}

@media (max-width: 620px) {
  .discover-for-you-editorial {
    gap: 13px !important;
  }

  .discover-for-you-rabbit-hole {
    min-height: 154px;
    padding: 14px 0;
  }

  .discover-for-you-rabbit-hole::before {
    inset: 0 -18px 0 55%;
    background-position: var(--for-you-hero-position, 54% 42%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.38) 18%, #000 52%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.38) 18%, #000 52%);
  }

  .discover-for-you-rabbit-hole::after {
    inset: 0 -18px;
    background:
      linear-gradient(90deg, #101216 0%, #101216 49%, rgba(16, 18, 22, 0.82) 63%, rgba(16, 18, 22, 0.12) 89%, rgba(16, 18, 22, 0.03) 100%),
      linear-gradient(0deg, rgba(16, 18, 22, 0.76), transparent 60%);
  }

  .discover-for-you-editorial .discover-for-you-refresh {
    width: auto;
    min-width: 0;
    min-height: 28px;
    padding: 0;
    justify-content: flex-end;
    font-size: 0.56rem;
  }

  .discover-for-you-rabbit-copy {
    box-sizing: border-box;
    width: 67%;
    min-height: 126px;
    padding: 0;
    gap: 5px;
  }

  .discover-for-you-rabbit-copy > h2 {
    max-width: 14ch;
    font-size: clamp(1.34rem, 6.1vw, 1.7rem);
    line-height: 0.98;
  }

  .discover-for-you-rabbit-copy > p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.68rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .discover-for-you-rabbit-grid {
    grid-auto-columns: clamp(104px, 28vw, 116px);
    gap: 11px;
  }

  .discover-for-you-rabbit-card {
    height: auto;
    border-radius: 0;
    touch-action: pan-x pan-y;
  }

  .discover-for-you-rabbit-card-copy {
    padding: 0 1px 3px;
    gap: 3px;
  }

  .discover-for-you-rabbit-card-head > b {
    font-size: 0.46rem;
  }

  .discover-for-you-rabbit-card-head > small {
    font-size: 0.42rem;
    letter-spacing: 0.1em;
  }

  .discover-for-you-rabbit-card-copy > strong {
    font-size: clamp(0.74rem, 3.1vw, 0.84rem);
    line-height: 1.2;
  }

  .discover-for-you-rabbit-card-meta {
    font-size: 0.5rem;
  }

  .discover-for-you-rabbit-card-art > img.is-contained {
    padding: 6px;
  }

  .discover-for-you-shelves {
    gap: 17px;
  }

  .discover-for-you-shelf {
    gap: 8px;
  }

  .discover-for-you-shelf > header {
    min-height: 22px;
  }

  .discover-for-you-shelf-rail {
    grid-auto-columns: clamp(106px, 28vw, 120px);
    gap: 11px;
    padding-bottom: 8px;
  }

  .discover-for-you-shelf.is-books .discover-for-you-shelf-rail {
    grid-auto-columns: clamp(94px, 25vw, 108px);
  }

  .discover-for-you-shelf.is-landscape .discover-for-you-shelf-rail {
    grid-auto-columns: clamp(148px, 39vw, 168px);
  }

  #discoverPanel .discover-for-you-shelf-card {
    grid-template-rows: auto auto !important;
  }

  #discoverPanel .discover-for-you-shelf-copy {
    min-height: 0 !important;
    padding: 0 1px 3px;
    gap: 2px;
  }

  .discover-for-you-shelf-copy > strong {
    font-size: clamp(0.74rem, 3.1vw, 0.84rem);
  }

  .discover-for-you-shelf-kind {
    font-size: 0.45rem;
  }

  .discover-for-you-shelf-copy > small {
    font-size: 0.54rem;
  }
}

@media (max-width: 380px) {
  .discover-for-you-editorial .discover-for-you-refresh {
    width: auto;
    min-width: 0;
    height: 28px;
    padding: 0;
  }

  .discover-for-you-rabbit-hole {
    min-height: 150px;
    padding: 12px 0;
  }

  .discover-for-you-rabbit-card {
    height: auto;
  }

  .discover-for-you-rabbit-card-copy > strong {
    font-size: 0.72rem;
  }

  .discover-for-you-rabbit-grid {
    grid-auto-columns: 100px;
    gap: 10px;
  }

  .discover-for-you-shelf-rail {
    grid-auto-columns: 102px;
    gap: 10px;
  }

  .discover-for-you-shelf.is-books .discover-for-you-shelf-rail {
    grid-auto-columns: 90px;
  }

  .discover-for-you-shelf.is-landscape .discover-for-you-shelf-rail {
    grid-auto-columns: 142px;
  }
}

/*
 * Compact book-card type follows the Library system. Featured books use the
 * shared editorial hero typography below.
 */
#discoverPanel .discover-books-shelf-copy > strong,
#discoverPanel .discover-for-you-rabbit-card.is-books .discover-for-you-rabbit-card-copy > strong,
#discoverPanel .discover-for-you-shelf-card.is-books .discover-for-you-shelf-copy > strong,
#discoverPanel .discover-gutenberg-book-copy > strong {
  font-family: var(--ui-font) !important;
  font-weight: 650 !important;
  letter-spacing: -0.012em !important;
}

#discoverPanel .discover-books-shelf-copy > small,
#discoverPanel .discover-for-you-rabbit-card.is-books .discover-for-you-rabbit-card-meta,
#discoverPanel .discover-gutenberg-book-copy > small {
  font-family: var(--ui-font) !important;
  font-weight: 540 !important;
  letter-spacing: 0 !important;
}

/* Floating shelf copy follows the Books shelf for legibility everywhere in
 * maintained Discover: UI sans, semibold titles, and quiet medium metadata. */
#discoverPanel .discover-research-shelf-card > strong,
#discoverPanel .discover-oddity-card-copy > strong {
  font-family: var(--ui-font) !important;
  font-size: clamp(0.78rem, 2.1vw, 0.92rem) !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.012em !important;
}

#discoverPanel .discover-research-shelf-card > small,
#discoverPanel .discover-oddity-card-copy > span {
  font-family: var(--ui-font) !important;
  font-size: 0.54rem !important;
  font-weight: 560 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 620px) {
  #discoverPanel .discover-research-shelf-card > strong,
  #discoverPanel .discover-oddity-card-copy > strong {
    font-size: clamp(0.74rem, 3.1vw, 0.84rem) !important;
  }
}

/* Short Reads follows the Books shelf system; the Cabinet remains its one tactile interruption. */
#discoverPanel .discover-originals-landing {
  gap: clamp(18px, 3vw, 26px) !important;
  padding-bottom: clamp(28px, 7vw, 58px);
}

#discoverPanel .discover-short-reads-shelves {
  gap: clamp(16px, 2.8vw, 24px);
}

#discoverPanel .discover-short-reads-shelves > .discover-for-you-shelf {
  gap: 8px;
}

#discoverPanel .discover-short-reads-shelves > .discover-for-you-shelf > header {
  min-height: 24px;
  gap: 20px;
}

#discoverPanel .discover-short-reads-archive-rail {
  grid-auto-columns: clamp(118px, 16vw, 142px);
  gap: clamp(10px, 1.7vw, 15px);
  padding-top: 2px;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

#discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-card {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  grid-template-rows: auto auto;
  gap: 7px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  scroll-snap-stop: normal;
}

#discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-card:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--book-shelf-accent) 72%, transparent);
  outline-offset: 4px;
}

#discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-card > :is(.discover-originals-document-art, .discover-originals-image-art) {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: 8px;
  box-shadow: 0 9px 18px rgba(0, 0, 0, 0.2);
}

#discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-copy {
  box-sizing: border-box;
  min-height: 0;
  padding: 0 1px 3px;
  align-content: start;
  gap: 3px;
  overflow: hidden;
  background: transparent;
}

#discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-copy > small {
  color: #b7a07f;
  font: 730 0.47rem/1 var(--ui-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-copy > strong {
  font: 650 clamp(0.78rem, 2.1vw, 0.92rem)/1.05 var(--ui-font);
  letter-spacing: -0.012em;
  -webkit-line-clamp: 2;
}

#discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-copy > span {
  color: rgba(223, 215, 203, 0.66);
  font: 560 0.54rem/1.2 var(--ui-font);
}

#discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-copy > em {
  display: none;
}

#discoverPanel .discover-short-reads-browse {
  gap: 8px;
}

#discoverPanel .discover-short-reads-browse .discover-originals-route-rail {
  margin-top: 0;
}

#discoverPanel .discover-short-reads-credit {
  max-width: 62ch;
  margin-inline: auto;
}

@media (max-width: 620px) {
  #discoverPanel .discover-originals-landing {
    gap: 18px !important;
  }

  #discoverPanel .discover-short-reads-shelves {
    gap: 17px;
  }

  #discoverPanel .discover-short-reads-shelves > .discover-for-you-shelf > header {
    min-height: 22px;
    gap: 12px;
  }

  #discoverPanel .discover-short-reads-archive-rail {
    grid-auto-columns: clamp(108px, 29vw, 124px);
    gap: 11px;
  }

  #discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-card {
    grid-template-rows: auto auto;
  }

  #discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-copy {
    min-height: 0;
    padding: 0 1px 3px;
  }

  #discoverPanel .discover-short-reads-archive-shelf .discover-originals-shelf-copy > strong {
    font-size: clamp(0.74rem, 3.1vw, 0.84rem);
  }
}

@media (max-width: 380px) {
  #discoverPanel .discover-short-reads-archive-rail {
    grid-auto-columns: 104px;
    gap: 10px;
  }
}

/* Narrow editorial shelves allow four lines so real article and book titles
 * can remain legible without making each horizontal rail unbounded. */
#discoverPanel :is(
  .discover-books-shelf-copy,
  .discover-for-you-shelf-copy,
  .discover-originals-shelf-copy,
  .discover-oddity-card-copy
) > strong,
#discoverPanel .discover-research-shelf-card > strong {
  -webkit-line-clamp: 4 !important;
}

/* Cabinet navigation uses two persistent viewport screens. Short Reads stays
 * mounted in the frozen Discover scroller while only this fixed screen moves. */
#discoverPanel#discoverPanel.is-cabinet-route-active #discoverSheet {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.discover-cabinet-route-viewport {
  background: transparent;
}

/* While a Short Reads sub-page is open, a static copy of the landing stays
 * parked behind the live layer so swipe Back can reveal it. */
#discoverPanel.has-parked-discover-page > [data-discover-cabinet-underlay-layer] {
  background-color: inherit;
}

#discoverPanel > .discover-page-ghost.is-parked {
  z-index: -1;
}

.discover-cabinet-motion-layer {
  background: #141518;
}

.discover-info-viewport.is-active .discover-info-motion,
.discover-info-viewport.is-active .discover-info-snapshot {
  background: var(--light-page);
}

:is(html, body).theme-dark .discover-info-viewport.is-active :is(.discover-info-motion, .discover-info-snapshot) {
  background: #111317;
}

.discover-info-viewport:is([data-navigation-phase="opening"], [data-navigation-phase="closing"], [data-navigation-phase="interactive"]) .discover-preview-header {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.discover-cabinet-route-screen {
  background: #141518;
  color: var(--discover-text);
  box-shadow: -10px 0 26px rgba(0, 0, 0, 0.18);
  outline: none;
}

.discover-cabinet-route-content {
  box-sizing: border-box;
  width: min(1160px, 100%);
  min-height: 100%;
  margin: 0 auto;
  padding:
    max(20px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(126px, calc(env(safe-area-inset-bottom) + 106px))
    max(20px, env(safe-area-inset-left));
}

#discoverPanel .discover-cabinet-page-header {
  padding-top: 0;
  gap: 9px;
}

#discoverPanel .discover-cabinet-page-header > .discover-cabinet-breadcrumb {
  margin: 0 0 clamp(8px, 1.8vw, 15px);
}

#discoverPanel .discover-cabinet-page-header > p {
  margin: 0;
}

#discoverPanel .discover-cabinet-page-header > h1 {
  max-width: 12ch;
}

/* The entrance photograph carries on behind the title and fades out inside
 * the header, so it never covers the first shelf heading. The screen clips
 * horizontal overflow. */
#discoverPanel .discover-cabinet-page-header {
  position: relative;
  isolation: isolate;
  padding-bottom: 30px;
  --cabinet-band-top: max(20px, env(safe-area-inset-top));
}
#discoverPanel .discover-cabinet-page-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--cabinet-band-top));
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background:
    linear-gradient(180deg, rgba(20, 21, 24, 0.34) 0%, rgba(20, 21, 24, 0.5) 50%, rgba(20, 21, 24, 0.84) 82%, #141518 100%),
    linear-gradient(90deg, rgba(20, 21, 24, 0.62) 0%, rgba(20, 21, 24, 0.28) 48%, rgba(20, 21, 24, 0) 78%),
    url("../assets/short-reads/cabinet-entry-photo.jpg") 70% 30% / cover no-repeat;
  pointer-events: none;
}
#discoverPanel .discover-cabinet-page-header > h1 { text-shadow: 0 2px 18px rgba(12, 7, 4, 0.55); }
#discoverPanel .discover-cabinet-page-header > span { color: rgba(244, 238, 228, 0.8); }

@media (max-width: 620px) {
  .discover-cabinet-route-content {
    padding-top: max(14px, env(safe-area-inset-top));
  }

  #discoverPanel .discover-cabinet-page-header {
    gap: 8px;
    --cabinet-band-top: max(14px, env(safe-area-inset-top));
  }

  #discoverPanel .discover-cabinet-page-header > h1 {
    font-size: clamp(2.45rem, 11.2vw, 3.15rem);
    line-height: 0.91;
  }
}

/* Mockup-led Discover front page: a composed daily edition rather than a
 * stack of provider feeds. Source imagery carries the content; layout,
 * typography and crop direction provide the atmosphere. */
#discoverPanel .discover-for-you-editorial {
  gap: clamp(30px, 5vw, 52px) !important;
  padding-top: 4px;
  padding-bottom: clamp(54px, 10vw, 92px);
}

#discoverPanel .discover-for-you-rabbit-section {
  gap: clamp(13px, 2.2vw, 19px);
}

#discoverPanel .discover-for-you-rabbit-section > header {
  align-items: end;
}

#discoverPanel .discover-for-you-rabbit-section > header > div {
  min-width: 0;
  display: grid;
  gap: 7px;
}

#discoverPanel .discover-for-you-rabbit-section > header small,
#discoverPanel .discover-for-you-shelf-heading > small,
#discoverPanel .discover-for-you-detour > header small {
  color: var(--discover-coral);
  font: 760 clamp(0.58rem, 1.3vw, 0.68rem)/1 var(--ui-font);
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

#discoverPanel .discover-for-you-rabbit-section > header h2 {
  font: 450 clamp(2.15rem, 5vw, 3.65rem)/0.93 var(--ui-font);
  letter-spacing: -0.043em;
  white-space: normal;
}

#discoverPanel .discover-for-you-editorial .discover-for-you-refresh {
  min-height: 34px;
  margin-bottom: 2px;
  padding: 0 2px;
  color: var(--discover-muted);
  letter-spacing: 0.08em;
}

#discoverPanel .discover-for-you-rabbit-hole {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(310px, 49vw, 430px);
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: clamp(22px, 3.4vw, 32px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
  background: #111318;
  color: #f8f4ec;
  text-align: left;
  box-shadow:
    0 28px 64px rgba(28, 24, 20, 0.22),
    0 3px 10px rgba(28, 24, 20, 0.12);
  appearance: none;
  cursor: pointer;
  transform: none !important;
}

#discoverPanel .discover-for-you-rabbit-hole::before {
  z-index: 0;
  inset: 0;
  background-image: var(--for-you-hero-image, none);
  background-position: var(--for-you-hero-position, 50% 42%);
  background-size: cover;
  filter: saturate(0.76) contrast(1.04) brightness(0.84);
  opacity: 0.92;
  -webkit-mask-image: none;
  mask-image: none;
  transform: scale(1.015);
  transition: transform 700ms cubic-bezier(0.2, 0.72, 0.2, 1), filter 500ms ease;
}

#discoverPanel .discover-for-you-rabbit-hole::after {
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(11, 13, 17, 0.92) 0%, rgba(11, 13, 17, 0.72) 46%, rgba(11, 13, 17, 0.12) 82%),
    linear-gradient(0deg, rgba(10, 12, 16, 0.92) 0%, rgba(10, 12, 16, 0.18) 58%, rgba(10, 12, 16, 0.08) 100%);
}

#discoverPanel .discover-for-you-rabbit-hole:is(:active, .is-tactile-press) {
  filter: none !important;
  transform: none !important;
}

#discoverPanel .discover-for-you-rabbit-hole:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--discover-coral) 70%, white);
  outline-offset: 4px;
}

@media (hover: hover) {
  #discoverPanel .discover-for-you-rabbit-hole:hover::before {
    filter: saturate(0.82) contrast(1.05) brightness(0.88);
    transform: scale(1.035);
  }
}

#discoverPanel .discover-for-you-rabbit-credit {
  position: absolute;
  z-index: 3;
  top: clamp(18px, 3vw, 26px);
  right: clamp(19px, 3vw, 28px);
  max-width: min(44%, 34ch);
  color: rgba(248, 244, 236, 0.64);
  font: 620 clamp(0.49rem, 1vw, 0.58rem)/1.3 var(--ui-font);
  letter-spacing: 0.08em;
  text-align: right;
  text-transform: uppercase;
}

#discoverPanel .discover-for-you-rabbit-copy {
  z-index: 2;
  width: min(67%, 620px);
  max-width: 620px;
  min-height: 0;
  padding: 0;
  gap: clamp(8px, 1.35vw, 13px);
}

#discoverPanel .discover-for-you-rabbit-copy > small {
  color: #ef9b8c;
  font: 760 clamp(0.57rem, 1.2vw, 0.68rem)/1 var(--ui-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#discoverPanel .discover-for-you-rabbit-copy > h2 {
  max-width: 13ch;
  color: #fbf7ef;
  font: 470 clamp(2.25rem, 5.6vw, 4.25rem)/0.91 var(--ui-font);
  letter-spacing: -0.048em;
  text-wrap: balance;
}

#discoverPanel .discover-for-you-rabbit-copy > p {
  max-width: 45ch;
  color: rgba(244, 238, 227, 0.8);
  font: 460 clamp(0.84rem, 1.65vw, 1rem)/1.43 var(--ui-font);
}

#discoverPanel .discover-for-you-rabbit-start {
  width: max-content;
  margin-top: 3px;
  padding: 10px 13px 9px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(20, 22, 27, 0.4);
  color: #fff9f0;
  font: 700 0.64rem/1 var(--ui-font);
  letter-spacing: 0.04em;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

#discoverPanel .discover-for-you-rabbit-start > i {
  margin-left: 7px;
  color: #ef9b8c;
  font-style: normal;
}

#discoverPanel .discover-for-you-rabbit-trail-head {
  margin-top: 1px;
}

#discoverPanel .discover-for-you-rabbit-trail-head > span {
  color: var(--discover-text);
  font: 510 clamp(1.08rem, 2.6vw, 1.38rem)/1 var(--ui-font);
  letter-spacing: -0.02em;
  text-transform: none;
}

#discoverPanel .discover-for-you-rabbit-grid {
  grid-auto-columns: clamp(144px, 18vw, 176px);
  gap: clamp(13px, 2vw, 18px);
  padding-top: 3px;
  padding-bottom: 10px;
}

#discoverPanel .discover-for-you-rabbit-card {
  gap: 9px;
}

#discoverPanel .discover-for-you-rabbit-card-art {
  border-radius: 14px;
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--discover-text) 14%, transparent),
    0 0 0 1px color-mix(in srgb, var(--discover-line) 80%, transparent);
}

#discoverPanel .discover-for-you-rabbit-card-copy {
  gap: 5px;
}

#discoverPanel .discover-for-you-rabbit-card-copy > strong,
#discoverPanel .discover-for-you-shelf-copy > strong {
  color: var(--discover-text) !important;
}

#discoverPanel .discover-for-you-rabbit-card-copy > strong {
  font-family: var(--ui-font);
  font-size: clamp(0.92rem, 2vw, 1.06rem);
  font-weight: 520;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

#discoverPanel .discover-for-you-rabbit-card-meta,
#discoverPanel .discover-for-you-shelf-copy > small {
  color: var(--discover-muted) !important;
}

#discoverPanel .discover-for-you-shelves {
  gap: clamp(44px, 7vw, 72px);
}

#discoverPanel .discover-for-you-shelf {
  position: relative;
  min-width: 0;
  gap: clamp(17px, 2.6vw, 23px);
  isolation: isolate;
}

#discoverPanel .discover-for-you-shelf > header {
  min-height: 0;
  align-items: end;
}

#discoverPanel .discover-for-you-shelf-heading {
  min-width: 0;
  display: grid;
  gap: 7px;
}

#discoverPanel .discover-for-you-shelf-heading > h2 {
  margin: 0;
  color: var(--discover-text);
  font: 470 clamp(1.85rem, 4.4vw, 3.05rem)/0.96 var(--ui-font);
  letter-spacing: -0.036em;
  text-wrap: balance;
}

#discoverPanel .discover-for-you-shelf-heading > p {
  max-width: 54ch;
  margin: 0;
  color: var(--discover-muted);
  font: 460 clamp(0.79rem, 1.6vw, 0.94rem)/1.42 var(--ui-font);
}

#discoverPanel .discover-for-you-shelf > header > button {
  min-height: 34px;
  margin-bottom: 1px;
  color: var(--discover-coral-strong);
  font: 650 0.68rem/1 var(--ui-font);
  letter-spacing: 0.03em;
}

#discoverPanel#discoverPanel#discoverPanel .discover-for-you-shelf-rail.app-shelf-rail {
  display: flex !important;
  grid-auto-flow: initial !important;
  grid-auto-columns: initial !important;
  gap: clamp(13px, 2vw, 18px) !important;
  padding-top: 3px;
  padding-bottom: 12px;
}

#discoverPanel .discover-for-you-shelf-card {
  flex: 0 0 clamp(142px, 18vw, 174px);
  gap: 10px;
}

#discoverPanel .discover-for-you-shelf.is-landscape .discover-for-you-shelf-card,
#discoverPanel .discover-for-you-shelf.is-research .discover-for-you-shelf-card {
  flex-basis: clamp(205px, 27vw, 260px);
}

#discoverPanel .discover-for-you-shelf.is-landscape.has-lead-card .discover-for-you-shelf-card.is-lead {
  flex-basis: clamp(292px, 39vw, 368px);
}

#discoverPanel .discover-for-you-shelf.is-books .discover-for-you-shelf-card {
  flex-basis: clamp(116px, 15vw, 142px);
}

#discoverPanel .discover-for-you-shelf.is-archive .discover-for-you-shelf-card {
  flex-basis: clamp(140px, 18vw, 170px);
}

#discoverPanel .discover-for-you-shelf-art,
#discoverPanel .discover-for-you-shelf-art > img,
#discoverPanel .discover-for-you-shelf-art > span {
  aspect-ratio: 4 / 5;
  border-radius: 13px;
}

#discoverPanel .discover-for-you-shelf-art {
  box-shadow:
    0 13px 27px color-mix(in srgb, var(--discover-text) 12%, transparent),
    0 0 0 1px color-mix(in srgb, var(--discover-line) 82%, transparent);
}

#discoverPanel .discover-for-you-shelf.is-landscape .discover-for-you-shelf-art,
#discoverPanel .discover-for-you-shelf.is-landscape .discover-for-you-shelf-art > img,
#discoverPanel .discover-for-you-shelf.is-landscape .discover-for-you-shelf-art > span,
#discoverPanel .discover-for-you-shelf.is-research .discover-for-you-shelf-art,
#discoverPanel .discover-for-you-shelf.is-research .discover-for-you-shelf-art > img,
#discoverPanel .discover-for-you-shelf.is-research .discover-for-you-shelf-art > span {
  aspect-ratio: 1.46 / 1;
}

#discoverPanel .discover-for-you-shelf.is-landscape.has-lead-card .discover-for-you-shelf-card.is-lead .discover-for-you-shelf-art,
#discoverPanel .discover-for-you-shelf.is-landscape.has-lead-card .discover-for-you-shelf-card.is-lead .discover-for-you-shelf-art > img,
#discoverPanel .discover-for-you-shelf.is-landscape.has-lead-card .discover-for-you-shelf-card.is-lead .discover-for-you-shelf-art > span {
  aspect-ratio: 1.78 / 1;
}

#discoverPanel .discover-for-you-shelf.is-books .discover-for-you-shelf-art,
#discoverPanel .discover-for-you-shelf.is-books .discover-for-you-shelf-art > img,
#discoverPanel .discover-for-you-shelf.is-books .discover-for-you-shelf-art > span {
  aspect-ratio: 5 / 8;
  border-radius: 7px 11px 11px 7px;
}

#discoverPanel .discover-for-you-shelf-copy {
  gap: 5px;
  padding: 0 2px 3px;
}

#discoverPanel .discover-for-you-shelf-kind {
  font-size: 0.53rem;
  letter-spacing: 0.13em;
}

#discoverPanel .discover-for-you-shelf-copy > strong {
  font-family: var(--ui-font);
  font-size: clamp(0.96rem, 2.1vw, 1.12rem);
  font-weight: 520;
  line-height: 1.07;
  letter-spacing: -0.02em;
}

#discoverPanel .discover-for-you-shelf-card.is-books .discover-for-you-shelf-copy > strong {
  font-family: var(--ui-font);
  font-size: clamp(0.82rem, 1.8vw, 0.98rem);
  font-weight: 650;
  line-height: 1.1;
}

#discoverPanel .discover-for-you-shelf-copy > small {
  font-size: 0.59rem;
}

#discoverPanel .discover-for-you-shelf.is-archive {
  padding: clamp(28px, 4vw, 42px) 0;
}

#discoverPanel .discover-for-you-shelf.is-archive::before {
  position: absolute;
  z-index: -1;
  inset: 0 calc(var(--destination-page-gutter) * -1);
  border-top: 1px solid color-mix(in srgb, var(--discover-amber) 28%, var(--discover-line));
  border-bottom: 1px solid color-mix(in srgb, var(--discover-amber) 24%, var(--discover-line));
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--discover-amber) 9%, transparent), transparent 34%),
    color-mix(in srgb, var(--discover-amber) 5%, var(--discover-surface));
  content: "";
}

#discoverPanel .discover-for-you-shelf.is-archive .discover-for-you-shelf-heading > small,
#discoverPanel .discover-for-you-shelf.is-archive .discover-for-you-shelf-kind {
  color: color-mix(in srgb, var(--discover-amber) 82%, var(--discover-text));
}

#discoverPanel .discover-for-you-detour {
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid var(--discover-line);
  border-radius: clamp(20px, 3vw, 28px);
  gap: clamp(18px, 2.5vw, 25px);
  overflow: hidden;
  background:
    radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--discover-coral) 8%, transparent), transparent 38%),
    var(--discover-surface-soft);
}

#discoverPanel .discover-for-you-detour > header > div {
  gap: 7px;
}

#discoverPanel .discover-for-you-detour > header h2 {
  font: 470 clamp(1.85rem, 4.3vw, 2.9rem)/0.96 var(--ui-font);
  letter-spacing: -0.035em;
}

#discoverPanel .discover-for-you-detour > header span {
  max-width: 48ch;
  color: var(--discover-muted);
  font: 460 clamp(0.79rem, 1.6vw, 0.92rem)/1.4 var(--ui-font);
}

#discoverPanel .discover-for-you-detour-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(22px, 4vw, 42px);
  border-top-color: color-mix(in srgb, var(--discover-line) 86%, transparent);
}

#discoverPanel .discover-for-you-detour-card {
  min-height: 112px;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 14px;
}

#discoverPanel .discover-for-you-detour-art,
#discoverPanel .discover-for-you-detour-art > img,
#discoverPanel .discover-for-you-detour-art > span {
  width: 82px;
  height: 86px;
  border-radius: 12px;
}

#discoverPanel .discover-for-you-detour-art {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 20%, color-mix(in srgb, var(--discover-coral) 24%, transparent), transparent 42%),
    color-mix(in srgb, var(--discover-text) 8%, var(--discover-surface-soft));
}

#discoverPanel .discover-for-you-detour-art::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--discover-coral) 76%, var(--discover-text));
  content: "r.";
  font: 520 1.45rem/1 var(--ui-font);
  letter-spacing: -0.08em;
}

#discoverPanel .discover-for-you-detour-art > img,
#discoverPanel .discover-for-you-detour-art > span {
  position: relative;
  z-index: 1;
}

#discoverPanel .discover-for-you-detour-copy > strong {
  color: var(--discover-text);
  font: 520 clamp(0.98rem, 1.8vw, 1.12rem)/1.08 var(--ui-font);
  letter-spacing: -0.018em;
}

#discoverPanel .discover-for-you-detour-copy > small {
  color: var(--discover-muted);
}

html.theme-dark #discoverPanel .discover-for-you-rabbit-card-copy > strong,
body.theme-dark #discoverPanel .discover-for-you-rabbit-card-copy > strong,
html.theme-dark #discoverPanel .discover-for-you-shelf-copy > strong,
body.theme-dark #discoverPanel .discover-for-you-shelf-copy > strong {
  color: #f3eee5 !important;
}

@media (max-width: 620px) {
  #discoverPanel .discover-for-you-editorial {
    gap: 32px !important;
    padding-top: 1px;
    padding-bottom: 48px;
  }

  #discoverPanel .discover-for-you-rabbit-section > header > div {
    gap: 5px;
  }

  #discoverPanel .discover-for-you-rabbit-section > header h2 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  #discoverPanel .discover-for-you-rabbit-hole {
    min-height: 318px;
    padding: 25px 22px;
    border-radius: 22px;
  }

  #discoverPanel .discover-for-you-rabbit-hole::after {
    background:
      linear-gradient(90deg, rgba(11, 13, 17, 0.86) 0%, rgba(11, 13, 17, 0.55) 58%, rgba(11, 13, 17, 0.1) 100%),
      linear-gradient(0deg, rgba(10, 12, 16, 0.95) 0%, rgba(10, 12, 16, 0.4) 62%, rgba(10, 12, 16, 0.08) 100%);
  }

  #discoverPanel .discover-for-you-rabbit-credit {
    top: 17px;
    right: 18px;
    max-width: 42%;
    font-size: 0.45rem;
  }

  #discoverPanel .discover-for-you-rabbit-credit > span {
    display: none;
  }

  #discoverPanel .discover-for-you-rabbit-copy {
    width: 88%;
    min-height: 0;
    gap: 8px;
  }

  #discoverPanel .discover-for-you-rabbit-copy > h2 {
    max-width: 12ch;
    font-size: clamp(2.18rem, 11vw, 2.82rem);
  }

  #discoverPanel .discover-for-you-rabbit-copy > p {
    max-width: 38ch;
    font-size: 0.78rem;
    line-height: 1.36;
    -webkit-line-clamp: 3;
  }

  #discoverPanel .discover-for-you-rabbit-start {
    padding: 9px 12px 8px;
    font-size: 0.6rem;
  }

  #discoverPanel .discover-for-you-rabbit-grid {
    grid-auto-columns: clamp(132px, 36vw, 148px);
    gap: 13px;
  }

  #discoverPanel .discover-for-you-rabbit-card-copy > strong {
    font-size: clamp(0.88rem, 3.7vw, 1rem);
  }

  #discoverPanel .discover-for-you-shelves {
    gap: 46px;
  }

  #discoverPanel .discover-for-you-shelf {
    gap: 16px;
  }

  #discoverPanel .discover-for-you-shelf-heading {
    gap: 6px;
  }

  #discoverPanel .discover-for-you-shelf-heading > h2 {
    font-size: clamp(1.82rem, 8.8vw, 2.35rem);
  }

  #discoverPanel .discover-for-you-shelf-heading > p {
    display: -webkit-box;
    overflow: hidden;
    max-width: 40ch;
    font-size: 0.76rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  #discoverPanel .discover-for-you-shelf > header > button {
    align-self: end;
    font-size: 0.62rem;
  }

  #discoverPanel#discoverPanel#discoverPanel .discover-for-you-shelf-rail.app-shelf-rail {
    gap: 13px !important;
    padding-bottom: 10px;
  }

  #discoverPanel .discover-for-you-shelf-card {
    flex-basis: 142px;
  }

  #discoverPanel .discover-for-you-shelf.is-landscape .discover-for-you-shelf-card,
  #discoverPanel .discover-for-you-shelf.is-research .discover-for-you-shelf-card {
    flex-basis: 205px;
  }

  #discoverPanel .discover-for-you-shelf.is-landscape.has-lead-card .discover-for-you-shelf-card.is-lead {
    flex-basis: 286px;
  }

  #discoverPanel .discover-for-you-shelf.is-books .discover-for-you-shelf-card {
    flex-basis: 116px;
  }

  #discoverPanel .discover-for-you-shelf.is-archive .discover-for-you-shelf-card {
    flex-basis: 140px;
  }

  #discoverPanel .discover-for-you-shelf-copy > strong {
    font-size: 0.96rem;
  }

  #discoverPanel .discover-for-you-shelf-card.is-books .discover-for-you-shelf-copy > strong {
    font-size: 0.84rem;
  }

  #discoverPanel .discover-for-you-shelf.is-archive {
    padding: 30px 0;
  }

  #discoverPanel .discover-for-you-detour {
    padding: 23px 20px;
    border-radius: 21px;
  }

  #discoverPanel .discover-for-you-detour-list {
    grid-template-columns: minmax(0, 1fr);
  }

  #discoverPanel .discover-for-you-detour-card {
    min-height: 104px;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 12px;
  }

  #discoverPanel .discover-for-you-detour-art,
  #discoverPanel .discover-for-you-detour-art > img,
  #discoverPanel .discover-for-you-detour-art > span {
    width: 74px;
    height: 78px;
    border-radius: 11px;
  }
}

@media (max-width: 380px) {
  #discoverPanel .discover-for-you-rabbit-hole {
    min-height: 300px;
    padding: 23px 19px;
  }

  #discoverPanel .discover-for-you-rabbit-copy > h2 {
    font-size: clamp(2rem, 10.5vw, 2.48rem);
  }

  #discoverPanel .discover-for-you-rabbit-grid {
    grid-auto-columns: 126px;
  }

  #discoverPanel .discover-for-you-shelf-heading > h2 {
    font-size: clamp(1.7rem, 8.5vw, 2.1rem);
  }

  #discoverPanel .discover-for-you-shelf-heading > p {
    max-width: 32ch;
  }

  #discoverPanel .discover-for-you-shelf.is-landscape.has-lead-card .discover-for-you-shelf-card.is-lead {
    flex-basis: 264px;
  }
}

/* Curated reading edit: finite choices, explicit access and short journeys. */
.discover-reading-edit { display: grid; gap: 22px; margin-bottom: 40px; color: var(--discover-text, inherit); }
.discover-reading-edit header small { color: var(--discover-muted, #777); font-size: 11px; letter-spacing: .06em; }
.discover-reading-edit h2 { margin: 7px 0; font: 500 clamp(25px, 4vw, 36px)/1.15 var(--ui-font); }
.discover-reading-edit header p,
.discover-reading-journeys > p { margin: 8px 0 0; color: var(--discover-muted, #777); font-size: 14px; line-height: 1.5; }
.discover-reading-moods { display: flex; flex-wrap: wrap; gap: 8px; }
.discover-reading-moods button { min-height: 44px; padding: 10px 15px; border: 1px solid var(--discover-line, #aaa); border-radius: 24px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; }
.discover-reading-moods button[aria-pressed="true"] { background: var(--discover-text, #272727); color: var(--discover-page, #fff); border-color: transparent; }
.discover-reading-selections { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 320px); gap: 24px; scroll-snap-type: x proximity; }
.discover-reading-selection { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; padding: 22px 0; text-align: left; border: 0; border-top: 1px solid var(--discover-line, #aaa); border-radius: 0; color: inherit; background: transparent; cursor: pointer; }
.discover-reading-selection > small { font-size: 11px; line-height: 1.5; color: var(--discover-muted, #777); }
.discover-reading-selection > strong { font: 500 22px/1.25 var(--ui-font); text-wrap: pretty; }
.discover-reading-author { font-size: 12px; color: var(--discover-muted, #777); }
.discover-reading-selection p { margin: 0; font-family: inherit; font-weight: 400; line-height: 1.5; font-size: 14px; color: var(--discover-muted, #777); }
.discover-reading-access { display: block; margin-top: auto; padding-top: 5px; font-size: 11px; line-height: 1.5; font-weight: 600; color: inherit; }
.discover-reading-journeys h3 { margin: 6px 0; font-size: 19px; }
.discover-reading-journey-list { display: grid; grid-auto-flow: column; grid-auto-columns: min(78vw, 290px); gap: 12px; margin-top: 18px; scroll-snap-type: x proximity; }
.discover-reading-journey-list button { display: flex; flex-direction: column; gap: 10px; padding: 18px; text-align: left; background: transparent; border: 1px solid var(--discover-line, #aaa); border-radius: 14px; color: inherit; cursor: pointer; }
.discover-reading-journey-list strong { font-size: 16px; line-height: 1.3; }
.discover-reading-journey-list span { font-size: 13px; line-height: 1.5; color: var(--discover-muted, #777); }
.discover-reading-journey-list small { margin-top: auto; font-size: 11px; line-height: 1.5; }
.discover-reading-journey-list button[aria-pressed="true"] { border-color: currentColor; }
.discover-reading-edit button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) {
  .discover-reading-selection:hover > strong { text-decoration: underline; text-underline-offset: 4px; }
  .discover-reading-journey-list button:hover { border-color: currentColor; }
}
@media (max-width: 640px) {
  .discover-reading-edit { gap: 18px; }
}

.discover-reading-selection, .discover-reading-journey-list > button { scroll-snap-align: start; }

/* For You magazine: one lead story, readable paths and a finite daily selection. */
#discoverPanel .discover-for-you-magazine {
  --edition-ink: var(--discover-text);
  --edition-muted: var(--discover-muted);
  --edition-line: var(--discover-line);
  color: var(--edition-ink);
  gap: 40px !important;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-section > header h2 {
  font: 500 20px/1.3 var(--ui-font);
  letter-spacing: -.015em;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-refresh {
  min-width: 74px;
  min-height: 44px;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-hole {
  min-height: 340px;
  padding: clamp(24px, 4vw, 40px);
  border-radius: 20px;
  box-shadow: none;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-copy {
  width: min(100%, 560px);
  gap: 13px;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-copy > h2 {
  max-width: 19ch;
  font: 450 clamp(32px, 5.5vw, 48px)/1.08 var(--ui-font);
  letter-spacing: -.028em;
  text-wrap: balance;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-copy > p {
  display: block;
  max-width: 44ch;
  overflow: visible;
  font-size: 15px;
  line-height: 1.5;
  -webkit-line-clamp: unset;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-copy > small {
  font-size: 12px;
  letter-spacing: .06em;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-start {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  font-size: 13px;
  letter-spacing: 0;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-credit { font-size: 10px; }
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-hole.is-typographic {
  background: #252a32;
  border-color: transparent;
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-hole.is-typographic::before,
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-hole.is-typographic::after { display: none; }
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-trail-head {
  margin-top: 8px;
  color: var(--edition-muted);
}
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-trail-head > span,
#discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-trail-head > small {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}
#discoverPanel .discover-editorial-reading-list { display: grid; min-width: 0; }
#discoverPanel .discover-editorial-reading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: start;
  gap: 16px;
  width: 100%;
  min-width: 0;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--edition-line);
  border-radius: 0;
  background: transparent;
  color: var(--edition-ink);
  text-align: left;
  box-shadow: none;
  cursor: pointer;
  touch-action: pan-y;
}
#discoverPanel .discover-editorial-reading-row.is-numbered { grid-template-columns: 26px minmax(0, 1fr) 18px; }
#discoverPanel .discover-editorial-row-number { padding-top: 3px; color: var(--edition-muted); font: 400 13px/1.5 var(--ui-font); font-variant-numeric: tabular-nums; }
#discoverPanel .discover-editorial-row-copy { display: grid; gap: 7px; min-width: 0; }
#discoverPanel .discover-editorial-row-copy > strong { font: 500 21px/1.3 var(--ui-font); letter-spacing: -.012em; text-wrap: pretty; }
#discoverPanel .is-trail .discover-editorial-row-copy > strong { font-size: 18px; }
#discoverPanel .discover-editorial-row-copy > small { color: var(--edition-muted); font: 400 13px/1.5 var(--ui-font); }
#discoverPanel .discover-editorial-row-hook { max-width: 58ch; color: var(--edition-muted); font: 400 15px/1.5 var(--ui-font); }
#discoverPanel .discover-editorial-row-arrow { padding-top: 3px; color: var(--edition-muted); font-size: 17px; }
#discoverPanel .discover-for-you-magazine .discover-reading-access { padding-top: 0; font: 500 12px/1.5 var(--ui-font); }
#discoverPanel .discover-for-you-magazine .discover-for-you-shelves { gap: 44px; }
#discoverPanel .discover-editorial-short-reads,
#discoverPanel .discover-editorial-unexpected { display: grid; gap: 18px; min-width: 0; }
#discoverPanel .discover-editorial-short-reads h2,
#discoverPanel .discover-editorial-unexpected h2,
#discoverPanel .discover-for-you-magazine .discover-for-you-shelf-heading > h2 {
  margin: 0;
  font: 500 clamp(24px, 3vw, 28px)/1.2 var(--ui-font);
  letter-spacing: -.02em;
  color: var(--edition-ink);
  text-wrap: balance;
}
#discoverPanel .discover-editorial-feature {
  display: grid;
  min-width: 0;
  width: 100%;
  padding: 26px 0;
  border: 0;
  border-top: 1px solid var(--edition-line);
  border-bottom: 1px solid var(--edition-line);
  border-radius: 0;
  color: var(--edition-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  touch-action: pan-y;
}
#discoverPanel .discover-editorial-feature.has-image { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 28px; }
#discoverPanel .discover-editorial-feature-art { display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--discover-surface-soft); }
#discoverPanel .discover-editorial-feature-art img { width: 100%; height: 100%; object-fit: cover; }
#discoverPanel .discover-editorial-feature-copy { display: grid; gap: 14px; min-width: 0; }
#discoverPanel .discover-editorial-feature-copy > small { color: var(--edition-muted); font: 400 13px/1.5 var(--ui-font); }
#discoverPanel .discover-editorial-feature-copy > strong { max-width: 28ch; font: 450 clamp(27px, 4vw, 36px)/1.15 var(--ui-font); letter-spacing: -.025em; text-wrap: pretty; }
#discoverPanel .discover-editorial-feature-hook { max-width: 54ch; color: var(--edition-muted); font: 400 16px/1.6 var(--ui-font); }
#discoverPanel .discover-for-you-magazine .discover-for-you-shelf-copy > strong { font-size: 17px; line-height: 1.3; }
#discoverPanel .discover-for-you-magazine .discover-for-you-shelf-copy > small { font-size: 13px; line-height: 1.5; }
#discoverPanel .discover-for-you-magazine .discover-for-you-shelf-kind { display: none; }
#discoverPanel .discover-for-you-magazine .discover-for-you-shelf.is-books .discover-for-you-shelf-card { flex-basis: 166px; }
#discoverPanel .discover-for-you-magazine button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
html.theme-dark #discoverPanel .discover-for-you-magazine,
body.theme-dark #discoverPanel .discover-for-you-magazine { --edition-ink: #eff0f2; --edition-muted: #aeb4bd; --edition-line: #353b44; }
@media (max-width: 620px) {
  #discoverPanel .discover-for-you-magazine .discover-for-you-rabbit-hole { min-height: 320px; padding: 24px; }
  #discoverPanel .discover-editorial-feature.has-image { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #discoverPanel .discover-editorial-feature-art { aspect-ratio: 16 / 10; }
  #discoverPanel .discover-editorial-reading-row { gap: 12px; }
  #discoverPanel .discover-for-you-magazine .discover-for-you-shelf.is-books .discover-for-you-shelf-card { flex-basis: 154px; }
}
@media (hover: hover) {
  #discoverPanel .discover-editorial-reading-row:hover strong,
  #discoverPanel .discover-editorial-feature:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}

/* Every For You suggestion carries source imagery or an original illustration. */
#discoverPanel .discover-suggestion-image {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 64px;
  overflow: hidden;
  background: #cbd8dc;
  color: #38525c;
}
#discoverPanel .discover-suggestion-image.is-tone-1 { background: #d9d2c4; color: #655945; }
#discoverPanel .discover-suggestion-image.is-tone-2 { background: #cbd5ca; color: #405b48; }
#discoverPanel .discover-suggestion-image.is-tone-3 { background: #d8cbd3; color: #684b62; }
#discoverPanel .discover-suggestion-image.is-tone-4 { background: #cbd0e1; color: #485676; }
#discoverPanel .discover-suggestion-illustration {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 85% 10%, #ffffff70, transparent 65%);
}
#discoverPanel .discover-suggestion-illustration svg {
  width: 85%; height: auto; max-height: 80%;
  fill: none; stroke: currentColor; stroke-width: 1.4;
}
#discoverPanel .discover-suggestion-image > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
#discoverPanel .discover-editorial-row-art {
  display: block; width: 88px; height: 104px;
  overflow: hidden; border-radius: 9px;
}
#discoverPanel .discover-editorial-reading-row { grid-template-columns: 88px minmax(0, 1fr) 18px; }
#discoverPanel .discover-editorial-reading-row.is-numbered { grid-template-columns: 26px 88px minmax(0, 1fr) 18px; }
#discoverPanel .discover-for-you-hero-illustration {
  position: absolute; inset: 0 0 0 38%;
  display: grid; place-items: center; opacity: .18;
  pointer-events: none;
}
#discoverPanel .discover-for-you-hero-illustration svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: .7; }
@media (max-width: 620px) {
  #discoverPanel .discover-editorial-row-art { width: 64px; height: 82px; }
  #discoverPanel .discover-editorial-reading-row { grid-template-columns: 64px minmax(0, 1fr); }
  #discoverPanel .discover-editorial-reading-row.is-numbered { grid-template-columns: 20px 64px minmax(0, 1fr); gap: 9px; }
  #discoverPanel .discover-editorial-row-arrow { display: none; }
}

/* Research edition: a finite landmark collection and a focused scholarly search. */
#discoverPanel .research-edition { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; max-width: 100%; color: var(--discover-text); }
#discoverPanel .research-edition > * { min-width: 0; }
#discoverPanel .research-edition :is(button, a),
#discoverPanel .research-explorer :is(button, input, select) { -webkit-tap-highlight-color: transparent; }
#discoverPanel .research-edition button { cursor: pointer; color: inherit; font-family: var(--ui-font); text-align: left; }
#discoverPanel .research-edition-introduction { display: grid; gap: 12px; }
#discoverPanel .research-edition-heading h2 { margin: 0; font: 500 22px/1.3 var(--ui-font); letter-spacing: -.02em; }
#discoverPanel .research-edition .is-reality,
.research-preview-motif.is-reality { --research-paper: #e7e9df; --research-ink: #34443d; --research-accent: #73836c; }
#discoverPanel .research-edition .is-machines,
.research-preview-motif.is-machines { --research-paper: #e4e8ed; --research-ink: #34445a; --research-accent: #728299; }
#discoverPanel .research-edition .is-life,
.research-preview-motif.is-life { --research-paper: #efe3dc; --research-ink: #604a44; --research-accent: #a17b6d; }
#discoverPanel .research-edition-feature { overflow: hidden; border: 1px solid var(--discover-line); border-radius: 16px; background: #20252d; }
#discoverPanel .research-edition-feature > button { display: grid; position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr); align-items: end; width: 100%; min-width: 0; min-height: 280px; padding: 28px; color: #fff; border: 0; background: transparent; }
#discoverPanel .research-edition-feature-copy { position: relative; z-index: 1; display: grid; justify-items: start; min-width: 0; max-width: 62%; gap: 10px; }
#discoverPanel .research-edition-feature-copy > small { font: 500 14px/1.5 var(--ui-font); text-transform: none; letter-spacing: 0; }
#discoverPanel .research-edition-feature-copy > strong { max-width: 19ch; overflow-wrap: anywhere; font: 450 clamp(32px, 4vw, 44px)/1.08 var(--ui-font); letter-spacing: -.04em; text-wrap: balance; }
#discoverPanel .research-edition-feature-copy > span { max-width: 42ch; white-space: normal; font: 400 14px/1.5 var(--ui-font); }
#discoverPanel .research-edition-feature-copy > em { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; box-sizing: border-box; margin-top: 5px; padding: 10px 18px; border-radius: 24px; background: #f47c70; color: #171b20; font: normal 600 13px/1.5 var(--ui-font); }
#discoverPanel .research-edition-feature-art { position: absolute; z-index: 0; inset: 0; overflow: hidden; background: #20252d; }
#discoverPanel .research-edition-feature-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,14,22,.95), rgba(9,14,22,.72) 48%, rgba(9,14,22,.12)), linear-gradient(0deg, rgba(9,14,22,.45), transparent 60%); }
.research-editorial-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
#discoverPanel .research-edition-feature-art .research-editorial-photo { position: absolute; inset: 0; }
#discoverPanel .research-edition h3 { margin: 0; font: 500 20px/1.3 var(--ui-font); letter-spacing: -.02em; }
#discoverPanel .research-edition-shelf > header { margin-bottom: 14px; }
#discoverPanel .research-edition-rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; }
#discoverPanel .research-edition-card { display: flex; flex: 0 0 170px; min-width: 0; flex-direction: column; align-items: stretch; gap: 7px; padding: 0 0 12px; border: 1px solid var(--discover-line); border-radius: 10px; background: transparent; overflow: hidden; scroll-snap-align: start; }
#discoverPanel .research-edition-cover { position: relative; overflow: hidden; display: block; aspect-ratio: 1.45; margin-bottom: 3px; border-radius: 0; background: #20252d; }
#discoverPanel .research-edition-cover .research-editorial-photo { position: absolute; inset: 0; }
#discoverPanel .research-edition-cover.is-dna .research-editorial-photo { object-position: center 80%; }
#discoverPanel .research-edition-card > strong { padding-inline: 10px; font: 500 19px/1.25 var(--ui-font); letter-spacing: -.018em; }
#discoverPanel .research-edition-card > small { padding-inline: 10px; color: var(--discover-muted); font: 400 12px/1.5 var(--ui-font); }
#discoverPanel .research-edition-subjects { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--discover-line); }
#discoverPanel .research-edition-subjects > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
#discoverPanel .research-edition-subjects header p { margin: 5px 0 0; color: var(--discover-muted); font: 400 13px/1.5 var(--ui-font); }
#discoverPanel .research-edition-subjects .research-search-all { justify-self: start; padding: 8px 0; border: 0; font-weight: 500; }
#discoverPanel .research-edition-subjects button { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--discover-line); border-radius: 9px; background: transparent; font-size: 13px; }
#discoverPanel .research-edition-subjects button > span { color: var(--discover-muted); }
.research-reading-context { display: grid; gap: 15px; margin: 28px 0; color: var(--discover-text); }
.research-reading-context h3 { margin: 12px 0 0; font: 500 22px/1.3 var(--ui-font); }
.research-reading-context p { margin: 0; font: 400 15px/1.7 var(--ui-font); }
.research-reading-context small,
.research-reading-context .research-editorial-note { color: var(--discover-muted); font-size: 12px; }
.research-reading-context button { display: grid; gap: 8px; text-align: left; min-height: 48px; padding: 16px 0; color: inherit; border: 0; border-top: 1px solid var(--discover-line); background: transparent; cursor: pointer; }
.research-reading-context button strong { font: 500 20px/1.3 var(--ui-font); }
.research-reading-context button span { font: 400 12px/1.5 var(--ui-font); color: var(--discover-muted); }
.research-preview-motif { display: grid; overflow: hidden; place-items: center; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--research-paper); color: var(--research-accent); }
.research-preview-motif svg { width: 85%; }
#discoverPanel .research-explorer :is(button,input,select):focus-visible,
#discoverPanel .research-edition button:focus-visible,
.research-reading-context button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) {
  #discoverPanel .research-edition-card:hover > strong,
  #discoverPanel .research-edition-subjects button:hover,
  #discoverPanel .research-result-title:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}
html.theme-dark #discoverPanel .research-edition .is-reality,
html.theme-dark .research-preview-motif.is-reality { --research-paper: #252c2d; --research-ink: #e2e6df; --research-accent: #9aa99f; }
html.theme-dark #discoverPanel .research-edition .is-machines,
html.theme-dark .research-preview-motif.is-machines { --research-paper: #252b35; --research-ink: #e0e6ee; --research-accent: #97abc5; }
html.theme-dark #discoverPanel .research-edition .is-life,
html.theme-dark .research-preview-motif.is-life { --research-paper: #303039; --research-ink: #eee2e1; --research-accent: #c3a6a8; }
@media (max-width: 640px) {
  #discoverPanel .research-edition { gap: 26px; }
  #discoverPanel .research-edition-introduction { gap: 10px; }
  #discoverPanel .research-edition-heading h2 { font-size: 20px; }
  #discoverPanel .research-edition-feature > button { min-height: 250px; padding: 20px; }
  #discoverPanel .research-edition-feature-copy { max-width: 90%; gap: 8px; }
  #discoverPanel .research-edition-feature-copy > strong { font-size: clamp(28px, 7.4vw, 32px); }
  #discoverPanel .research-edition-feature-copy > span { font-size: 13px; line-height: 1.45; }
  #discoverPanel .research-edition-feature-copy > small { font-size: 13px; }
  #discoverPanel .research-edition-feature-copy > em { font-size: 12px; }
  #discoverPanel .research-edition h3 { font-size: 18px; }
  #discoverPanel .research-edition-rail { gap: 12px; }
  #discoverPanel .research-edition-card { flex-basis: calc((100% - 40px) / 2); }
  #discoverPanel .research-edition-card > strong { font-size: 18px; }
  #discoverPanel .research-edition-subjects { padding-top: 20px; }
  #discoverPanel .research-edition-subjects > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Focused research search: its header persists while the result list scrolls. */
#discoverPanel.is-research-search-panel-active .discover-persistent-controls { padding-block: 10px 12px; gap: 9px; background: var(--discover-page); box-shadow: 0 0 0 20px var(--discover-page); }
#discoverPanel .research-search-back { display: flex; align-items: center; gap: 10px; width: fit-content; min-height: 40px; padding: 0; color: var(--discover-text); border: 0; background: transparent; font: 500 20px/1.3 var(--ui-font); cursor: pointer; }
#discoverPanel .research-search-back[hidden], #discoverPanel .research-search-toolbar[hidden] { display: none; }
#discoverPanel .research-search-back > span { font: 400 22px/1 var(--ui-font); }
#discoverPanel .research-search-toolbar { display: grid; gap: 9px; }
#discoverPanel .research-search-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#discoverPanel .research-search-tools > button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--discover-line); border-radius: 8px; background: transparent; color: var(--discover-text); font: 500 13px/1.3 var(--ui-font); cursor: pointer; }
#discoverPanel .research-search-tools svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#discoverPanel .research-search-tools .discover-research-sort { margin: 0; color: var(--discover-muted); }
#discoverPanel .research-search-tools .discover-research-sort select { min-height: 40px; font: 400 13px/1.3 var(--ui-font); }
#discoverPanel .research-active-filters { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
#discoverPanel .research-active-filters button { flex-shrink: 0; min-height: 34px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 10px; border: 1px solid var(--discover-line); border-radius: 18px; background: var(--discover-surface-soft); color: var(--discover-text); font: 400 12px/1.4 var(--ui-font); cursor: pointer; }
#discoverPanel .research-explorer { display: grid; min-width: 0; gap: 24px; color: var(--discover-text); }
#discoverPanel .research-explorer-results-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
#discoverPanel .research-explorer-results-heading h2 { margin: 0; color: var(--discover-muted); font: 500 13px/1.4 var(--ui-font); }
#discoverPanel .research-explorer-results-heading > button,
#discoverPanel .research-search-status button,
#discoverPanel .research-search-start header button { min-height: 40px; padding: 8px 0; border: 0; color: var(--discover-muted); background: transparent; font: 400 12px/1.4 var(--ui-font); cursor: pointer; }
#discoverPanel .research-explorer-note, #discoverPanel .research-search-status { margin: 8px 0; color: var(--discover-muted); font: 400 13px/1.5 var(--ui-font); }
#discoverPanel .research-paper-result { display: grid; gap: 8px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--discover-line); background: transparent; cursor: pointer; }
#discoverPanel .research-paper-result h3 { margin: 0; font: 500 22px/1.3 var(--ui-font); letter-spacing: -.02em; }
#discoverPanel .research-paper-result h3 button { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; }
#discoverPanel .research-paper-byline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 6px; color: var(--discover-muted); font: 400 12px/1.5 var(--ui-font); }
#discoverPanel .research-paper-byline button { min-height: 28px; padding: 3px 0; border: 0; color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
#discoverPanel .research-paper-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--discover-muted); font: 400 13px/1.55 var(--ui-font); }
#discoverPanel .research-paper-result footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font: 400 12px/1.5 var(--ui-font); }
#discoverPanel .research-paper-availability { color: var(--discover-muted); }
#discoverPanel .research-paper-availability:is(.is-full-text,.is-pdf) { color: var(--discover-text); }
#discoverPanel .research-paper-citations { color: var(--discover-muted); }
#discoverPanel .research-paper-result footer button { margin-left: auto; min-height: 40px; padding: 8px 0 8px 14px; border: 0; background: transparent; color: var(--discover-text); font: 500 12px/1.5 var(--ui-font); cursor: pointer; }
#discoverPanel .research-paper-result footer button[aria-pressed="true"] { color: var(--discover-coral-strong); }
#discoverPanel .research-source-coverage { margin-top: 22px; color: var(--discover-muted); font: 400 12px/1.6 var(--ui-font); }
#discoverPanel .research-source-coverage summary { padding-block: 10px; cursor: pointer; }
#discoverPanel .research-source-coverage p { margin: 4px 0 0; }
#discoverPanel .research-explorer-empty { display: grid; justify-items: start; gap: 12px; padding: 38px 0; }
#discoverPanel .research-explorer-empty h3 { margin: 0; font: 500 24px/1.25 var(--ui-font); }
#discoverPanel .research-explorer-empty p { max-width: 48ch; margin: 0; color: var(--discover-muted); font: 400 14px/1.6 var(--ui-font); }
#discoverPanel .research-explorer-empty button { min-height: 44px; border: 1px solid var(--discover-line); border-radius: 8px; background: transparent; padding: 10px 14px; color: inherit; cursor: pointer; }
#discoverPanel .research-search-start { display: grid; gap: 28px; }
#discoverPanel .research-search-start header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#discoverPanel .research-search-start h2 { margin: 0; font: 500 20px/1.3 var(--ui-font); }
#discoverPanel .research-search-suggestions { display: flex; flex-wrap: wrap; gap: 9px; }
#discoverPanel .research-search-suggestions button { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; padding: 10px 13px; border: 1px solid var(--discover-line); border-radius: 9px; background: transparent; color: var(--discover-text); text-align: left; font: 400 13px/1.4 var(--ui-font); cursor: pointer; }
#discoverPanel .research-search-suggestions button span { color: var(--discover-muted); }
#discoverPanel .research-saved-papers { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 12px 0; border: 0; border-top: 1px solid var(--discover-line); background: transparent; color: inherit; font: 500 16px/1.3 var(--ui-font); cursor: pointer; }
.research-filter-dialog { padding: 0; border: 1px solid var(--discover-line); border-radius: 20px; background: var(--discover-page, #f6f4ed); color: var(--discover-text, #252930); box-shadow: 0 20px 80px rgba(0,0,0,.28); font-family: var(--ui-font); }
.research-filter-dialog::backdrop { background: rgba(5,8,13,.6); }
.research-filter-dialog form { display: grid; grid-template-rows: auto minmax(0,1fr) auto; max-height: inherit; overflow: hidden; }
.research-filter-dialog form > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--discover-line); }
.research-filter-dialog h2 { margin: 0; font: 500 24px/1.2 var(--ui-font); }
.research-filter-dialog form > header button { width: 44px; height: 44px; padding: 0; border: 0; color: inherit; background: transparent; font-size: 26px; cursor: pointer; }
.research-filter-fields { display: grid; gap: 18px; overflow-y: auto; overscroll-behavior: contain; padding: 22px; }
.research-filter-fields > label, .research-filter-years label { display: grid; gap: 8px; font: 500 13px/1.5 var(--ui-font); }
.research-filter-fields :is(input:not([type="checkbox"]),select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid var(--discover-line); border-radius: 8px; background: var(--discover-surface-soft); color: inherit; font: 400 16px/1.4 var(--ui-font); }
.research-filter-hint { margin: -10px 0 0; color: var(--discover-muted); font: 400 12px/1.5 var(--ui-font); }
.research-filter-fields fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.research-filter-fields legend { margin-bottom: 10px; padding: 0; font: 500 13px/1.5 var(--ui-font); }
.research-year-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.research-year-presets button { min-height: 40px; padding: 7px 10px; border: 1px solid var(--discover-line); border-radius: 8px; color: inherit; background: transparent; font: 400 12px/1.4 var(--ui-font); cursor: pointer; }
.research-filter-years { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
.research-filter-sources { display: grid; gap: 4px; }
.research-filter-sources label { display: flex; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.research-filter-sources input { width: 18px; height: 18px; accent-color: var(--discover-coral-strong); }
.research-filter-sources span { display: grid; gap: 2px; font: 500 14px/1.4 var(--ui-font); }
.research-filter-sources small { color: var(--discover-muted); font: 400 12px/1.4 var(--ui-font); }
.research-filter-dialog form > footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--discover-line); background: var(--discover-page); }
.research-filter-dialog form > footer button { min-height: 46px; padding: 10px 18px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: 500 14px/1.4 var(--ui-font); cursor: pointer; }
.research-filter-dialog form > footer button[type="submit"] { background: #f47c70; color: #171b20; }
.research-filter-dialog :is(button,input,select):focus-visible,
#discoverPanel :is(.research-paper-result,.research-search-toolbar,.research-search-start,.research-search-back) :is(button,select):focus-visible { outline: 2px solid var(--discover-coral-strong); outline-offset: 3px; }
@media (hover: hover) {
  #discoverPanel .research-paper-result h3 button:hover,
  #discoverPanel .research-paper-byline button:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 640px) {
  #discoverPanel .research-paper-result { padding-block: 16px; }
  #discoverPanel .research-paper-result h3 { font-size: 20px; }
  .research-filter-dialog { border-radius: 20px 20px 0 0; }
}

.research-citation-links { display: flex; flex-wrap: wrap; gap: 16px; }
.research-citation-links a { color: inherit; font: 400 13px/1.6 var(--ui-font); text-underline-offset: 4px; }

/* Cabinet editorial entrance: one quiet frame around the specimen illustration. */
#discoverPanel .discover-curiosity-route {
  aspect-ratio: auto;
  min-height: 240px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid rgba(187, 199, 207, 0.2);
  border-radius: 20px;
  gap: clamp(12px, 3vw, 28px);
  background: linear-gradient(135deg, #292e34, #1d2228);
  box-shadow: 0 8px 24px rgba(15, 19, 24, 0.12);
}

#discoverPanel .discover-curiosity-route::before,
#discoverPanel .discover-curiosity-route::after,
#discoverPanel .discover-curiosity-route-copy::before {
  display: none;
}

#discoverPanel .discover-curiosity-route-copy {
  padding: clamp(4px, 1.5vw, 16px);
  border: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
}

#discoverPanel .discover-curiosity-route-copy > strong { color: #f2eee6; }
#discoverPanel .discover-curiosity-route-copy > span { color: #c5ccd1; }

#discoverPanel .discover-curiosity-route-copy > em {
  padding: 8px 0;
  border: 0;
  background: none;
  color: #e9ad98;
  box-shadow: none;
  text-shadow: none;
}

#discoverPanel .discover-curiosity-route:focus-visible {
  outline: 3px solid var(--discover-coral-strong);
  outline-offset: 4px;
}

#discoverPanel .discover-oddity-card-copy > p {
  margin: 2px 0 3px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--discover-muted);
  font: 450 0.76rem/1.45 var(--ui-font);
}

@media (max-width: 480px) {
  #discoverPanel .discover-curiosity-route {
    min-height: 218px;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 10px;
    padding: 16px;
  }
  #discoverPanel .discover-curiosity-route-copy > strong {
    font-size: clamp(1.5rem, 6.2vw, 1.85rem);
    line-height: 1.06 !important;
  }
}

/* Short Reads subjects: named shelves, a complete directory, and collection pages. */
/* Letters fill their panels with individually positioned portraits. Other
   archive scans and story jackets keep their complete composition. */
#discoverPanel .discover-suggestion-image > img[data-discover-artwork-origin="source"][data-discover-artwork-fit] {
  object-position: var(--discover-card-image-position, 50% 50%);
  object-fit: var(--discover-card-image-fit, cover);
}
#discoverPanel .discover-suggestion-image:has(> img[data-discover-artwork-origin="source"][data-discover-artwork-fit="contain"]) > .discover-suggestion-illustration {
  visibility: hidden;
}
/* Illustrated 2:3 covers fill their card: exactly in portrait shelves, and
   cropped to the illustration (below the title) in landscape cards. */
#discoverPanel .discover-suggestion-image > img[data-discover-portrait-cover] {
  object-fit: cover;
  object-position: 50% 64%;
}
#discoverPanel .is-story-covers .discover-suggestion-image > img[data-discover-portrait-cover] {
  object-position: 50% 50%;
}
#discoverPanel .discover-suggestion-image:has(> img[data-discover-portrait-cover]) > .discover-suggestion-illustration {
  visibility: hidden;
}

#discoverPanel .discover-for-you-shelf-card.is-letter .discover-for-you-shelf-art,
html.theme-twilight body.theme-twilight #discoverPanel .discover-for-you-shelf-card.is-letter .discover-for-you-shelf-art {
  padding: 0;
  border: 0;
  box-shadow: none;
}

.discover-short-subjects,
.discover-short-subject-page {
  min-width: 0;
  display: grid;
  gap: clamp(26px, 5vw, 40px);
}

.discover-short-subjects-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.discover-short-subject-controls { display: grid; gap: 6px; min-width: 0; }

.discover-short-subjects-heading h2 {
  margin: 0;
  color: var(--discover-text);
  font: 600 0.78rem/1.3 var(--ui-font);
}

.discover-short-subjects-heading p,
.discover-short-subject-page > header > span {
  margin: 8px 0 0;
  color: var(--discover-muted);
  font: 450 0.88rem/1.5 var(--ui-font);
}

.discover-short-subjects-heading > button,
.discover-short-more {
  min-height: 32px;
  flex-shrink: 0;
  border: 0;
  padding: 4px 0;
  background: transparent;
  color: var(--discover-coral-strong);
  font: 650 0.73rem/1.35 var(--ui-font);
  text-align: left;
}

.discover-short-more { justify-self: start; }
.discover-short-moments {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 4px 2px;
}
.discover-short-moments::-webkit-scrollbar { display: none; }
.discover-short-moments button {
  flex: 0 0 auto;
  white-space: nowrap;
  scroll-snap-align: start;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--discover-line);
  border-radius: 999px;
  background: var(--discover-surface);
  color: var(--discover-text);
  font: 550 0.72rem/1.25 var(--ui-font);
}

/* Short fiction: one cover shelf, switched by genre pills under its heading. */
#discoverPanel .discover-short-fiction > .discover-short-fiction-genres {
  margin: 0 0 14px;
}
.discover-short-moments button[aria-pressed="true"] {
  border-color: var(--discover-text);
  background: var(--discover-text);
  color: var(--discover-surface);
}
#discoverPanel#discoverPanel#discoverPanel .discover-short-fiction > .discover-for-you-shelf-rail.app-shelf-rail[hidden] { display: none !important; }

.discover-short-subject-page { padding: 4px 2px 36px; gap: 18px; }
.discover-short-subject-page > .discover-originals-editorial-return { justify-self: start; }
.discover-short-subject-page > header > p {
  margin: 0 0 8px;
  color: var(--discover-muted);
  font: 600 0.72rem/1.3 var(--ui-font);
}
.discover-short-subject-page > header > h1 {
  margin: 0;
  color: var(--discover-text);
  font: 480 clamp(1.5rem, 4vw, 2.1rem)/1.15 var(--ui-font);
  letter-spacing: -0.035em;
}
.discover-short-subject-page > header > span { display: block; max-width: 52ch; }
/* Reading progress on Short Reads cards: a "Read" tick when finished, a thin
   bar along the artwork's bottom edge while in progress. */
.discover-for-you-shelf-card.has-read-progress .discover-for-you-shelf-art { position: relative; }
.discover-card-read {
  font-style: normal;
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  background: rgba(20, 22, 26, 0.78);
  color: #f4efe6;
  font: 650 0.66rem/1 var(--ui-font);
  letter-spacing: 0.02em;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.discover-card-read svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #9bd3a6;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.discover-card-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 4px;
  background: rgba(20, 22, 26, 0.45);
}
.discover-card-progress::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--read-progress, 0%);
  background: var(--discover-coral);
}

/* Short Reads sub-pages: one back bar and one header style (moods, subjects,
   collections, the All page, Articles and the archive form pages). */
.discover-subpage-bar {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0 0 4px -6px;
}
.discover-subpage-back {
  min-height: 44px;
  padding: 0 14px 0 6px;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  color: var(--discover-text);
  font: 560 0.95rem/1 var(--ui-font);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transform: none !important;
}
.discover-subpage-back svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--discover-coral);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.discover-subpage-back:hover { background: color-mix(in srgb, var(--discover-text) 6%, transparent); }
.discover-subpage-back:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--discover-coral) 60%, transparent);
  outline-offset: 2px;
}
.discover-subpage-head {
  display: grid;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--discover-line);
}
header.discover-subpage-head > p {
  margin: 0;
  color: var(--discover-coral-strong);
  font: 650 0.68rem/1.3 var(--ui-font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
header.discover-subpage-head > h1 {
  margin: 0;
  color: var(--discover-text);
  font: 500 clamp(1.9rem, 7vw, 2.5rem)/1.05 var(--ui-font);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
header.discover-subpage-head > span {
  display: block;
  max-width: 46ch;
  color: var(--discover-muted);
  font: 420 0.98rem/1.5 var(--ui-font);
}
header.discover-subpage-head > small {
  color: var(--discover-muted);
  font: 600 0.74rem/1.3 var(--ui-font);
}
html.theme-dark .discover-subpage-back svg,
body.theme-dark .discover-subpage-back svg { stroke: #e8837a; }
html.theme-dark header.discover-subpage-head > p,
body.theme-dark header.discover-subpage-head > p { color: #e8837a; }

.discover-short-directory-heading {
  margin: 34px 0 14px;
  color: var(--discover-text);
  font: 500 1.05rem/1.3 var(--ui-font);
  letter-spacing: -0.01em;
}
.discover-short-subject-directory,
.discover-short-subject-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.discover-short-subject-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap: 20px 16px;
}
.discover-short-subject-directory > button {
  min-width: 0;
  padding: 0 0 16px;
  border: 1px solid var(--discover-line);
  border-radius: 16px;
  display: grid;
  align-content: start;
  gap: 10px;
  overflow: hidden;
  text-align: left;
  color: var(--discover-text);
  background: var(--discover-surface);
}
.discover-short-subject-directory strong { padding: 0 16px; font: 500 1.22rem/1.2 var(--ui-font); }
.discover-short-directory-art { display: block; width: 100%; aspect-ratio: 1.9; overflow: hidden; }
.discover-short-subject-directory span { color: var(--discover-muted); font: 450 0.84rem/1.45 var(--ui-font); }
.discover-short-subject-directory small { padding: 0 16px; color: var(--discover-coral-strong); font: 600 0.7rem/1.3 var(--ui-font); }
.discover-short-subject-directory i { float: right; font-style: normal; }
#discoverPanel .discover-short-subject-grid > .discover-for-you-shelf-card {
  width: 100%;
  min-width: 0;
  max-width: 190px;
  align-self: start;
}
#discoverPanel .discover-short-subject-grid .discover-for-you-shelf-art,
#discoverPanel .discover-short-subject-grid .discover-for-you-shelf-art > :is(img, span) { aspect-ratio: 1.5; }
#discoverPanel .discover-short-subject-grid .discover-for-you-shelf-copy > strong { font-size: 0.92rem; line-height: 1.2; }
.discover-short-subjects button:focus-visible,
.discover-short-subject-page button:focus-visible {
  outline: 2px solid var(--discover-coral-strong);
  outline-offset: 4px;
}
html.theme-dark .discover-short-subject-directory > button,
body.theme-dark .discover-short-subject-directory > button,
html.theme-dark .discover-short-moments button,
body.theme-dark .discover-short-moments button { background: rgba(30, 32, 38, 0.94); }
html.theme-dark .discover-short-moments button[aria-pressed="true"],
body.theme-dark .discover-short-moments button[aria-pressed="true"] {
  background: var(--discover-text);
  color: #16171b;
}
@media (min-width: 900px) {
  .discover-short-subject-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .discover-short-subject-directory { grid-template-columns: minmax(0, 1fr); }
  .discover-short-subject-grid { gap: 18px 12px; }
}
.discover-short-subjects button:is(:active, .is-tactile-press),
.discover-short-subject-page button:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

/* Fiction editions keep their complete illustrated cover in a portrait frame. */
#discoverPanel .discover-for-you-shelf.is-story-covers .discover-for-you-shelf-card {
  flex-basis: clamp(148px, 38vw, 180px);
}
#discoverPanel .discover-for-you-shelf.is-story-covers .discover-for-you-shelf-art,
#discoverPanel .discover-short-subject-grid.is-story-covers .discover-for-you-shelf-art,
#discoverPanel .discover-short-subject-grid.is-story-covers .discover-for-you-shelf-art > :is(img, span) {
  aspect-ratio: 2 / 3;
  border-radius: 5px;
  box-shadow: 0 5px 14px rgba(17, 24, 35, 0.13);
}
#discoverPanel .is-story-covers .discover-suggestion-image > img { object-fit: contain; }
#discoverPanel .is-story-covers .discover-for-you-shelf-art > span {
  aspect-ratio: 2 / 3;
  border-radius: inherit;
}
#discoverPanel .discover-for-you-shelf.is-story-covers .discover-for-you-shelf-copy > strong {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}

/* Short Reads: one continuous editorial sequence, with artwork loaded nearby. */
.discover-short-feature {
  --short-feature-surface: #f3f2ed;
  --short-feature-ink: #243b40;
  --short-feature-muted: #647477;
  --short-feature-button: #294950;
  --short-feature-button-ink: #faf8f1;
  min-width: 0; display: grid; gap: 12px;
}
.discover-short-feature-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.discover-short-feature-heading h2 {
  margin: 0; color: var(--discover-text); font: 500 1.1rem/1.2 var(--ui-font); letter-spacing: -0.025em;
}
.discover-short-feature-arrows { display: flex; gap: 3px; flex-shrink: 0; align-items: center; }
.discover-short-feature-position {
  margin-right: 9px; color: var(--discover-muted); font: 450 0.62rem/1 var(--ui-font);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.discover-short-feature-arrows button {
  width: 32px; height: 32px; padding: 0; border: 1px solid var(--discover-line); border-radius: 50%;
  background: transparent; color: var(--discover-text); font: 500 1rem/1 var(--ui-font);
}
.discover-short-feature-arrows button:disabled { opacity: 0.25; cursor: default; }
.discover-short-feature-rail {
  display: flex; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 20px;
  border: 1px solid var(--discover-line); background: var(--short-feature-surface);
  touch-action: pan-x pan-y; -webkit-user-select: none; user-select: none;
}
.discover-short-feature-rail::-webkit-scrollbar { display: none; }
.discover-short-feature-card {
  position: relative; isolation: isolate; flex: 0 0 100%; min-width: 0; min-height: 276px;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  scroll-snap-align: start; scroll-snap-stop: always;
  background: var(--short-feature-surface); color: var(--short-feature-ink);
}
.discover-short-feature-copy {
  position: relative; z-index: 1; min-width: 0; padding: clamp(22px, 3.8vw, 32px) 12px clamp(22px, 3.8vw, 32px) clamp(22px, 3.8vw, 32px);
  display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 9px;
}
.discover-short-feature-type {
  margin: 0 0 4px; color: var(--short-feature-muted);
  font: 650 0.6rem/1.35 var(--ui-font); text-transform: uppercase; letter-spacing: 0.1em;
}
.discover-short-feature-new { color: var(--discover-coral); }
html.theme-dark .discover-short-feature-new { color: #e8837a; }
.discover-short-feature-copy h3 {
  margin: 0; max-width: 18ch; color: inherit; font: 500 clamp(1.6rem, 3.4vw, 2.3rem)/1.05 var(--ui-font);
  letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.discover-short-feature-byline {
  margin: 3px 0 0; color: var(--short-feature-muted); font: 450 0.65rem/1.5 var(--ui-font);
}
.discover-short-feature-byline span { padding-inline: 3px; }
.discover-short-feature-hook {
  margin: 1px 0 0; max-width: 34ch; color: var(--short-feature-muted); font: 450 0.82rem/1.5 var(--ui-font);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.discover-short-feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 9px; }
.discover-short-feature-actions button {
  min-height: 40px; padding: 8px 0; border: 0; background: transparent; color: var(--short-feature-muted);
  font: 500 0.68rem/1.2 var(--ui-font); white-space: nowrap;
}
.discover-short-feature-actions [data-short-feature-read] {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 15px;
  border-radius: 10px; background: var(--short-feature-button); color: var(--short-feature-button-ink); font-weight: 600;
}
.discover-short-feature-actions [data-short-feature-read]:disabled { cursor: progress; opacity: 0.65; }
.discover-short-feature-art {
  position: relative; min-width: 0; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(ellipse at 65% 40%, rgba(83, 136, 141, 0.18), transparent 75%);
}
.discover-short-feature-art img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.discover-short-feature-art img:not([src]) { visibility: hidden; }
.discover-short-feature-card.is-photo .discover-short-feature-art { margin-left: -24px; }
.discover-short-feature-card.is-photo .discover-short-feature-art img { position: absolute; inset: 0; }
.discover-short-feature-card.is-photo .discover-short-feature-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--short-feature-surface), transparent 32%);
}
.discover-short-feature-card.is-story .discover-short-feature-art { padding: 22px 18px; }
.discover-short-feature-card.is-story .discover-short-feature-art img {
  width: auto; height: 232px; max-width: 100%; object-fit: contain;
  border-radius: 3px; box-shadow: 0 14px 28px -12px rgba(13, 24, 34, 0.42), 0 2px 5px rgba(13, 24, 34, 0.12);
}
.discover-short-feature-status { margin: 0; color: var(--discover-muted); font: 500 0.76rem/1.4 var(--ui-font); }
.discover-short-feature-status:empty { display: none; }
.discover-short-feature button { touch-action: pan-x pan-y !important; }
.discover-short-feature button:is(:active, .is-tactile-press) { transform: none !important; filter: none !important; }
.discover-short-feature button:focus-visible, .discover-short-feature-rail:focus-visible { outline: 2px solid var(--discover-coral-strong); outline-offset: 3px; }
.discover-short-feature-rail button:focus-visible { outline-offset: 2px; }
@media (hover: hover) {
  .discover-short-feature-actions [data-discover-preview]:hover { text-decoration: underline; text-underline-offset: 4px; }
  .discover-short-feature-arrows button:not(:disabled):hover { border-color: var(--discover-muted); }
}
html.theme-dark .discover-short-feature, body.theme-dark .discover-short-feature {
  --short-feature-surface: #202329; --short-feature-ink: #f0efe9; --short-feature-muted: #aeb9bd;
  --short-feature-button: #e3bf9f; --short-feature-button-ink: #202d33;
}
@media (max-width: 620px) {
  .discover-short-feature { gap: 10px; }
  .discover-short-feature-heading h2 { font-size: 1rem; }
  .discover-short-feature-position { margin-right: 5px; font-size: 0.58rem; }
  .discover-short-feature-card { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); min-height: 258px; }
  .discover-short-feature-copy { padding: 22px 10px 22px 20px; gap: 8px; }
  .discover-short-feature-type { font-size: 0.56rem; letter-spacing: 0.08em; margin-bottom: 2px; }
  .discover-short-feature-copy h3 { font-size: clamp(1.3rem, 5.1vw, 1.75rem); }
  .discover-short-feature-byline { font-size: 0.6rem; margin-top: 1px; }
  .discover-short-feature-hook { font-size: 0.74rem; }
  .discover-short-feature-actions { gap: 4px 10px; margin-top: 7px; }
  .discover-short-feature-actions button { font-size: 0.64rem; }
  .discover-short-feature-actions [data-short-feature-read] { padding: 10px 12px; gap: 9px; }
  .discover-short-feature-card.is-story .discover-short-feature-art { padding: 18px 13px 18px 6px; }
  .discover-short-feature-card.is-story .discover-short-feature-art img { height: auto; width: 100%; max-height: 230px; }
}
@media (max-width: 360px) {
  .discover-short-feature-position { display: none; }
  .discover-short-feature-copy { padding-left: 16px; }
  .discover-short-feature-actions { gap: 2px 8px; }
  .discover-short-feature-actions [data-short-feature-read] { padding-inline: 10px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .discover-short-feature-rail { scroll-behavior: auto; }
}

/* Discover features: shared editorial cards across Short Reads, Books and Research. */
#discoverPanel {
  --discover-feature-surface: #f3f2ed;
  --discover-feature-ink: #243b40;
  --discover-feature-muted: #53666b;
  --discover-feature-accent: #f47c70;
  --discover-feature-radius: 20px;
  --discover-feature-height: 304px;
}
html.theme-dark #discoverPanel,
body.theme-dark #discoverPanel {
  --discover-feature-surface: #202329;
  --discover-feature-ink: #f0efe9;
  --discover-feature-muted: #b4bec2;
}
#discoverPanel :is(.discover-short-feature-heading, .discover-books-suggestion-head, .research-edition-heading) h2 {
  margin: 0;
  max-width: none;
  color: var(--discover-text);
  font: 500 20px/1.3 var(--ui-font);
  letter-spacing: -0.025em;
  white-space: normal;
}
#discoverPanel :is(.discover-short-feature, .discover-books-suggestion-shelf, .research-edition-introduction) { gap: 12px; }
#discoverPanel :is(.discover-short-feature-heading, .discover-books-suggestion-head, .research-edition-heading) { display: flex; align-items: center; min-height: 40px; }
#discoverPanel .discover-books-suggestion-shelf::before,
#discoverPanel .discover-books-suggestion-shelf::after { display: none; }
#discoverPanel .discover-books-suggestion-rail {
  min-width: 0;
  overflow-x: auto;
  padding: 0;
  border-radius: var(--discover-feature-radius);
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}
#discoverPanel .discover-books-suggestion-rail::-webkit-scrollbar { display: none; }
#discoverPanel .discover-short-feature-rail,
#discoverPanel .research-edition-feature { border: 0; border-radius: var(--discover-feature-radius); background: transparent; }
#discoverPanel .discover-short-feature-position { display: none; }
#discoverPanel .discover-short-feature-arrows { gap: 4px; }
#discoverPanel .discover-short-feature-arrows button { width: 40px; height: 40px; }
#discoverPanel :is(button, article).discover-feature {
  box-sizing: border-box;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  min-height: var(--discover-feature-height);
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--discover-line);
  border-radius: var(--discover-feature-radius);
  background: var(--discover-feature-surface);
  color: var(--discover-feature-ink);
  text-align: left;
}
#discoverPanel .discover-feature .discover-feature-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  max-width: none;
  padding: 30px 0 30px 30px;
  opacity: 1;
  transform: none;
}
#discoverPanel .discover-feature .discover-feature-eyebrow {
  margin: 0 0 3px;
  color: var(--discover-feature-muted);
  font: 600 11px/1.4 var(--ui-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
#discoverPanel .discover-feature .discover-feature-title {
  display: block;
  margin: 0;
  max-width: min(19ch, 100%);
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  color: inherit;
  font: 450 clamp(28px, 3.4vw, 40px)/1.08 var(--ui-font);
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
#discoverPanel .discover-feature .discover-feature-meta {
  margin: 0;
  color: var(--discover-feature-muted);
  font: 450 13px/1.5 var(--ui-font);
  text-transform: none;
  letter-spacing: 0;
}
#discoverPanel .discover-feature .discover-feature-hook {
  display: block;
  margin: 0;
  max-width: min(36ch, 100%);
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  color: var(--discover-feature-muted);
  font: 400 14px/1.5 var(--ui-font);
  white-space: normal;
}
#discoverPanel .discover-feature .discover-feature-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 14px;
  box-sizing: border-box;
  min-height: 44px;
  margin-top: 7px;
  padding: 11px 18px;
  border: 0;
  border-radius: 24px;
  background: var(--discover-feature-accent);
  color: #171b20;
  font: normal 600 13px/1.4 var(--ui-font);
  white-space: nowrap;
}
#discoverPanel .discover-feature .discover-feature-action i { color: inherit; }
#discoverPanel .discover-short-feature-actions { gap: 6px 12px; margin-top: 7px; }
#discoverPanel .discover-short-feature-actions .discover-feature-action { margin-top: 0; }
#discoverPanel .discover-short-feature-actions [data-discover-preview] {
  min-height: 44px;
  color: var(--discover-feature-muted);
  font: 500 12px/1.4 var(--ui-font);
}
#discoverPanel .discover-feature .discover-feature-art {
  position: relative;
  z-index: 0;
  inset: auto;
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 65% 45%, rgba(83, 136, 141, 0.16), transparent 75%);
}
#discoverPanel :is(.is-cover-feature, .is-story).discover-feature .discover-feature-art { padding: 24px; }
#discoverPanel .discover-feature .discover-books-hero-art::before { display: none; }
#discoverPanel .discover-feature .discover-books-hero-cover,
#discoverPanel .discover-feature.is-story .discover-feature-art img {
  width: min(200px, 100%);
  height: auto;
  max-height: 300px;
  object-fit: contain;
  border-radius: 4px;
  opacity: 1;
  transform: rotate(var(--discover-feature-cover-angle, -2.5deg));
  transform-origin: center;
  box-shadow: 0 14px 28px -12px rgba(13, 24, 34, 0.42), 0 2px 5px rgba(13, 24, 34, 0.12);
}
/* Extend photos beneath the text panel and blend them in gradually. */
#discoverPanel .discover-feature.is-photo .discover-feature-art { margin-left: calc(-1 * clamp(72px, 10vw, 112px)); }
#discoverPanel .discover-feature.is-photo .discover-feature-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Source fallbacks reset to a centred illustration automatically. */
#discoverPanel .discover-feature.is-photo .discover-feature-art img:is([data-discover-artwork-origin="source"], [data-discover-artwork-origin="editorial-photo"]) {
  object-position: var(--discover-feature-image-position, 50% 50%);
  object-fit: var(--discover-feature-image-fit, cover);
}
#discoverPanel .discover-feature.is-photo .discover-feature-art::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(192px, 26vw, 312px);
  pointer-events: none;
  /* A smooth opacity curve avoids the previous steep drop near the image edge. */
  background: linear-gradient(90deg,
    var(--discover-feature-surface) 0%,
    color-mix(in srgb, var(--discover-feature-surface) 97.2%, transparent) 10%,
    color-mix(in srgb, var(--discover-feature-surface) 89.6%, transparent) 20%,
    color-mix(in srgb, var(--discover-feature-surface) 78.4%, transparent) 30%,
    color-mix(in srgb, var(--discover-feature-surface) 64.8%, transparent) 40%,
    color-mix(in srgb, var(--discover-feature-surface) 50%, transparent) 50%,
    color-mix(in srgb, var(--discover-feature-surface) 35.2%, transparent) 60%,
    color-mix(in srgb, var(--discover-feature-surface) 21.6%, transparent) 70%,
    color-mix(in srgb, var(--discover-feature-surface) 10.4%, transparent) 80%,
    color-mix(in srgb, var(--discover-feature-surface) 2.8%, transparent) 90%,
    transparent 100%);
}
#discoverPanel .discover-feature button,
#discoverPanel button.discover-feature { touch-action: pan-x pan-y !important; }
#discoverPanel .discover-feature button:is(:active, .is-tactile-press),
#discoverPanel button.discover-feature:is(:active, .is-tactile-press) { transform: none !important; translate: none !important; scale: none !important; filter: none !important; }
#discoverPanel .discover-feature button:focus-visible,
#discoverPanel button.discover-feature:focus-visible,
#discoverPanel .discover-books-suggestion-rail:focus-visible { outline: 2px solid var(--discover-coral-strong); outline-offset: -3px; }
@media (max-width: 640px) {
  #discoverPanel { --discover-feature-height: 320px; }
  #discoverPanel :is(.discover-short-feature-heading, .discover-books-suggestion-head, .research-edition-heading) h2 { font-size: 19px; }
  #discoverPanel :is(button, article).discover-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  #discoverPanel .discover-feature .discover-feature-copy { padding: 22px 0 22px 20px; gap: 8px; }
  #discoverPanel .discover-feature .discover-feature-title { font-size: 27px; }
  #discoverPanel .discover-feature .discover-feature-eyebrow { font-size: 10px; }
  #discoverPanel .discover-feature .discover-feature-meta { font-size: 12px; }
  #discoverPanel .discover-feature .discover-feature-hook { font-size: 13px; }
  #discoverPanel .discover-feature .discover-feature-action { padding: 10px 12px; gap: 10px; font-size: 12px; }
  #discoverPanel .discover-short-feature-actions { gap: 6px 8px; }
  #discoverPanel :is(.is-cover-feature, .is-story).discover-feature .discover-feature-art { padding: 24px 10px; }
}
@media (max-width: 360px) {
  #discoverPanel .discover-feature .discover-feature-copy { padding-left: 16px; }
  #discoverPanel .discover-feature .discover-feature-title { font-size: 25px; }
  #discoverPanel .discover-short-feature-actions { gap: 4px 8px; }
  #discoverPanel .discover-feature .discover-feature-action { padding-inline: 12px; gap: 8px; }
}

/* Cabinet entrance: a quiet illustrated interlude after two subject shelves. */
#discoverPanel .discover-curiosity-route.discover-cabinet-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 184px;
  aspect-ratio: auto;
  padding: 16px 24px;
  border: 1px solid rgba(168, 194, 193, 0.23);
  border-radius: 20px;
  background: radial-gradient(ellipse at 85% 50%, rgba(66, 108, 108, 0.26), transparent 65%),
    linear-gradient(115deg, #22282f, #223338);
  color: #f0eee7;
  box-shadow: 0 8px 20px -14px rgba(12, 22, 29, 0.3);
  transform: none !important;
  filter: none !important;
  transition: border-color 180ms ease;
}
.discover-cabinet-entry-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}
.discover-cabinet-entry-copy strong {
  color: inherit;
  font: 480 clamp(1.65rem, 3.6vw, 2.4rem)/1.04 var(--ui-font);
  letter-spacing: -0.035em;
}
.discover-cabinet-entry-action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #c7ba99;
  font: 550 0.76rem/1.4 var(--ui-font);
}
.discover-cabinet-entry-action > span { font-size: 1.05rem; font-weight: 400; }
/* The photograph fills the card; its dark left wall carries the live title. */
#discoverPanel .discover-curiosity-route.discover-cabinet-entry {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 260px;
  border-color: rgba(214, 170, 112, 0.22);
  background: #1c120c;
}
.discover-cabinet-entry-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
}
.discover-cabinet-entry-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 64% 28%;
}
.discover-cabinet-entry-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 13, 8, 0.72) 0%, rgba(22, 13, 8, 0.42) 34%, rgba(22, 13, 8, 0) 58%);
}
.discover-cabinet-entry-copy strong { text-shadow: 0 1px 12px rgba(10, 5, 2, 0.5); }
.discover-cabinet-entry-action { color: #e3c797; }
#discoverPanel .discover-cabinet-entry,
#discoverPanel .discover-cabinet-entry *,
#discoverPanel [data-discover-cabinet-return],
#discoverPanel [data-discover-cabinet-return] * {
  touch-action: manipulation !important;
}
#discoverPanel .discover-curiosity-route.discover-cabinet-entry:focus-visible {
  outline: 2px solid var(--discover-coral-strong);
  outline-offset: 4px;
}
@media (hover: hover) {
  #discoverPanel .discover-curiosity-route.discover-cabinet-entry:hover {
    border-color: rgba(226, 186, 128, 0.46);
  }
}
@media (max-width: 480px) {
  #discoverPanel .discover-curiosity-route.discover-cabinet-entry {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: 0;
    aspect-ratio: 3 / 2;
    gap: 4px;
    padding: 18px 12px 18px 18px;
    border-radius: 18px;
  }
  .discover-cabinet-entry-copy { gap: 16px; }
  .discover-cabinet-entry-copy strong { font-size: clamp(1.35rem, 6.1vw, 1.8rem); }
  .discover-cabinet-entry-action { font-size: 0.7rem; gap: 12px; }
}

/* Specific reading collections, shared by Short Reads and the Home feature. */
#discoverPanel .discover-reading-bundles { min-width: 0; display: grid; gap: 16px; }
#discoverPanel .discover-reading-bundles > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#discoverPanel .discover-reading-bundles h2 { margin: 0; color: var(--discover-text); font: 500 1.5rem/1.15 var(--ui-font); letter-spacing: -0.03em; }
#discoverPanel .discover-reading-bundles > header > button {
  min-height: 36px; padding: 0; border: 0; background: transparent;
  color: var(--discover-coral-strong); font: 600 0.73rem/1.3 var(--ui-font); cursor: pointer;
}
#discoverPanel .discover-reading-bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; min-width: 0; }
#discoverPanel .discover-reading-bundle-card {
  display: grid; align-content: start; min-width: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--discover-line); border-radius: 15px;
  background: var(--discover-surface); color: var(--discover-text); text-align: left; cursor: pointer;
}
#discoverPanel .discover-reading-bundle-art { position: relative; display: block; width: 100%; aspect-ratio: 1.9; overflow: hidden; background: var(--discover-surface); }
#discoverPanel .discover-reading-bundle-art img { width: 100%; height: 100%; object-fit: cover; }
#discoverPanel .discover-reading-bundle-copy { display: grid; align-content: start; gap: 9px; padding: 17px; }
#discoverPanel .discover-reading-bundle-copy > strong { font: 530 1.32rem/1.15 var(--ui-font); letter-spacing: -0.025em; }
#discoverPanel .discover-reading-bundle-copy > span { color: var(--discover-muted); font: 440 0.84rem/1.45 var(--ui-font); }
#discoverPanel .discover-reading-bundle-copy > small { color: var(--discover-muted); font: 600 0.68rem/1.45 var(--ui-font); }
#discoverPanel .discover-reading-bundle-copy > .discover-reading-bundle-meta { margin-top: 6px; color: var(--discover-coral-strong); }
#discoverPanel .discover-reading-bundle-meta i { float: right; font-style: normal; margin-left: 8px; }
#discoverPanel .discover-reading-bundle-reads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: 640px; }
#discoverPanel .discover-reading-bundle-read { min-width: 0; display: grid; gap: 10px; }
#discoverPanel .discover-reading-bundle-read > p { margin: 0; color: var(--discover-muted); font: 450 0.8rem/1.45 var(--ui-font); }
#discoverPanel .discover-reading-bundle-read > .discover-for-you-shelf-card {
  width: 100%; min-width: 0; max-width: none;
  grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto !important;
  align-items: center; gap: 14px;
}
#discoverPanel .discover-reading-bundle-read .discover-for-you-shelf-art,
#discoverPanel .discover-reading-bundle-read .discover-for-you-shelf-art > :is(img, span) { aspect-ratio: 4 / 5; border-radius: 8px; }
#discoverPanel .discover-reading-bundle-read .discover-for-you-shelf-art { box-shadow: 0 4px 10px color-mix(in srgb, var(--discover-text) 10%, transparent); }
#discoverPanel .discover-reading-bundle-read .discover-for-you-shelf-copy > strong { font-size: 1rem; line-height: 1.2; }
#discoverPanel .discover-reading-bundle-read .discover-for-you-shelf-copy > small { font-size: 0.68rem; line-height: 1.4; }
#discoverPanel :is(.discover-reading-bundles, .discover-reading-bundle-page) button:focus-visible { outline: 2px solid var(--discover-coral-strong); outline-offset: 4px; }
#discoverPanel :is(.discover-reading-bundles, .discover-reading-bundle-page) button:is(:active, .is-tactile-press) { transform: none !important; filter: none !important; box-shadow: none !important; }
html.theme-dark #discoverPanel .discover-reading-bundle-card,
body.theme-dark #discoverPanel .discover-reading-bundle-card { background: rgba(30, 32, 38, 0.94); }
@media (max-width: 700px) {
  #discoverPanel .discover-reading-bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #discoverPanel .discover-reading-bundles .discover-reading-bundle-grid {
    display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x proximity; scrollbar-width: none;
  }
  #discoverPanel .discover-reading-bundles .discover-reading-bundle-grid::-webkit-scrollbar { display: none; }
  #discoverPanel .discover-reading-bundles .discover-reading-bundle-card { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (max-width: 450px) {
  #discoverPanel .discover-reading-bundle-page .discover-reading-bundle-grid { grid-template-columns: minmax(0, 1fr); }
}
#discoverPanel .discover-reading-bundle-read button,
#discoverPanel .discover-reading-bundle-page .discover-reading-bundle-card { touch-action: pan-y !important; }
#discoverPanel :is(.discover-reading-bundles, .discover-reading-bundle-page) button:is(:active, .is-tactile-press) { translate: none !important; scale: none !important; }

/* Shared reading information for Short Reads, Books, Research and Cabinet.
 * Keep the original pilot's class names so all four use one visual contract. */
.short-read-info-nav-label { display: none; }

.discover-preview-panel.is-editorial-preview-open.is-short-read-info {
  --preview-page: #f6f5f1;
  --preview-ink: #24272c;
  --preview-muted: #626870;
  --preview-soft: #737a82;
  --preview-line: rgba(40, 47, 56, 0.16);
  --short-info-button: #25282e;
  --short-info-button-ink: #f5f3ed;
  background: var(--preview-page) !important;
}

:is(html, body).theme-dark .discover-preview-panel.is-editorial-preview-open.is-short-read-info {
  --preview-page: #111317;
  --preview-ink: #efede7;
  --preview-muted: #b9bbc0;
  --preview-soft: #9298a1;
  --preview-line: rgba(195, 203, 217, 0.18);
  --preview-coral: #ee917c;
  --short-info-button: #edeae3;
  --short-info-button-ink: #171a1f;
}

.discover-preview-panel.is-short-read-info .discover-preview-header {
  width: min(680px, 100%) !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  padding-inline: max(24px, env(safe-area-inset-left)) max(24px, env(safe-area-inset-right)) !important;
  padding-bottom: 12px !important;
  background: var(--preview-page) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.discover-preview-panel.is-short-read-info .discover-preview-header > p { visibility: hidden; }

.discover-preview-panel.is-short-read-info :is(.discover-preview-back, .discover-preview-save) {
  width: auto !important;
  min-width: 76px !important;
  min-height: 44px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  font: 400 1rem/1.2 var(--ui-font);
}

.discover-preview-panel.is-short-read-info .discover-preview-save { justify-content: flex-end; }
.discover-preview-panel.is-short-read-info .discover-preview-save > svg { width: 20px; height: 24px; flex: 0 0 auto; }
.discover-preview-panel.is-short-read-info .short-read-info-nav-label { display: inline; }
.discover-preview-panel.is-short-read-info .discover-preview-save.is-saved svg { fill: currentColor; }

.discover-preview-panel.is-short-read-info .discover-preview-content.is-editorial-preview {
  width: min(680px, 100%);
  padding: 12px max(24px, env(safe-area-inset-right)) max(40px, calc(env(safe-area-inset-bottom) + 24px)) max(24px, env(safe-area-inset-left)) !important;
  display: grid;
  align-content: start;
  gap: 24px !important;
  color: var(--preview-ink);
}

.short-read-info-intro { min-width: 0; }
.short-read-info-intro > p { margin: 0; }

.short-read-info-art {
  width: 100%;
  margin-bottom: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.short-read-info-art > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(220px, 60vw, 320px);
  border-radius: 3px;
  object-fit: contain;
  object-position: center;
}

.short-read-info-art[hidden] { display: none; }

/* Photographs and diagrams open full screen; a small chip marks them. */
.short-read-info-art-expand {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: none;
  color: inherit;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.short-read-info-art-expand > img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(220px, 60vw, 320px);
  border-radius: 3px;
  object-fit: contain;
}
.short-read-info-art-expand-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 21, 24, 0.5);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color 160ms ease;
}
.short-read-info-art-expand-icon > svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.discover-editorial-preview-expand {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.discover-editorial-preview-expand .short-read-info-art-expand-icon {
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
}
.discover-editorial-preview-expand:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--preview-coral, #c8664f) 45%, transparent);
  outline-offset: -3px;
}
.short-read-info-art-expand:hover .short-read-info-art-expand-icon,
.discover-editorial-preview-expand:hover .short-read-info-art-expand-icon { background: rgba(20, 21, 24, 0.68); }
.short-read-info-art-expand:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--preview-coral, #c8664f) 45%, transparent);
  outline-offset: 4px;
}
.short-read-info-art.is-research {
  /* A source figure can arrive after entry. Reserve its box so the title and
   * reading action keep their positions when it replaces the placeholder. */
  height: clamp(220px, 60vw, 320px);
}
.short-read-info-art.is-research > img { max-height: 100%; }
.reading-info-art-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 3px;
  background: var(--preview-surface);
  color: var(--preview-soft);
  font: 400 0.85rem/1.4 var(--ui-font);
}
.reading-info-art-placeholder > svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.short-read-info-art.is-books > .discover-preview-book-cover-fallback {
  box-sizing: border-box;
  width: 190px;
  min-height: 260px;
  padding: 24px;
  border-radius: 3px;
  background: var(--preview-surface);
  color: var(--preview-ink);
}

.short-read-info-intro > .short-read-info-eyebrow {
  margin-bottom: 16px;
  color: var(--preview-coral);
  font: 600 0.65rem/1.3 var(--ui-font);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.short-read-info-intro > h2 {
  margin: 0 0 12px;
  color: var(--preview-ink);
  font: 400 clamp(2.25rem, 9.6vw, 3.6rem)/1.04 var(--ui-font);
  letter-spacing: -0.035em;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

.short-read-info-intro > .short-read-info-author {
  color: var(--preview-muted);
  font: 400 1.05rem/1.4 var(--ui-font);
}

.short-read-info-intro > .short-read-info-meta {
  margin-top: 10px;
  color: var(--preview-soft);
  font: 400 0.8rem/1.6 var(--ui-font);
}

.short-read-info-intro > .short-read-info-summary {
  margin-top: 24px;
  color: var(--preview-muted);
  font: 400 1rem/1.65 var(--ui-font);
}
.short-read-info-intro > .reading-info-summary-label {
  margin-top: 24px;
  color: var(--preview-soft);
  font: 500 0.75rem/1.4 var(--ui-font);
}
.short-read-info-intro > .reading-info-summary-label + .short-read-info-summary { margin-top: 8px; }
.short-read-info-intro > .short-read-info-note {
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--discover-coral) 55%, transparent);
  color: var(--preview-soft);
  font: 450 0.84rem/1.5 var(--ui-font);
}

.short-read-info-actions { display: grid; gap: 8px; }

.discover-preview-panel.is-short-read-info .short-read-info-read {
  width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 12px;
  background: var(--short-info-button);
  color: var(--short-info-button-ink);
  font: 600 1rem/1.4 var(--ui-font);
  box-shadow: none;
  transform: none;
}

.discover-preview-panel.is-short-read-info .short-read-info-read:disabled { opacity: 0.6; cursor: wait; }

.discover-preview-panel.is-short-read-info .short-read-info-details summary {
  padding: 20px 32px 20px 0 !important;
  font: 400 0.95rem/1.4 var(--ui-font) !important;
}
.discover-preview-panel.is-short-read-info .short-read-info-details summary::after { content: "+"; font: 300 1.6rem/1 var(--ui-font); }
.discover-preview-panel.is-short-read-info .short-read-info-details[open] summary::after { content: "−"; transform: translateY(-50%); }
.discover-preview-panel.is-short-read-info .short-read-info-details :is(p, small) { overflow-wrap: anywhere; }
.discover-preview-panel.is-short-read-info .short-read-info-details .discover-preview-source-links button { min-height: 44px; }

.short-read-info-related { min-width: 0; }
.short-read-info-related > h3 {
  margin: 0 0 20px;
  color: var(--preview-ink);
  font: 400 1.5rem/1.2 var(--ui-font);
  letter-spacing: -0.02em;
}
.short-read-info-collection { margin: 20px 0 8px; color: var(--preview-soft); font: 400 0.8rem/1.5 var(--ui-font); }
.discover-preview-panel.is-short-read-info .short-read-info-related-row {
  width: 100%;
  min-height: 88px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 16px;
  background: transparent;
  color: var(--preview-ink);
  box-shadow: none;
  text-align: left;
  transform: none;
}
.short-read-info-related-art { display: block; height: 64px; overflow: hidden; border-radius: 3px; background: var(--preview-surface); }
.short-read-info-related-art :is(img, svg) { display: block; width: 100%; height: 100%; object-fit: cover; }
.short-read-info-related-art img[data-discover-artwork-origin="editorial-illustration"] { object-fit: contain; }
.short-read-info-related-art.is-book { background: transparent; }
.short-read-info-related-art.is-book :is(img, svg) { object-fit: contain; }
.short-read-info-related-copy { min-width: 0; display: grid; gap: 6px; }
.short-read-info-related-copy > strong { font: 400 1.13rem/1.2 var(--ui-font); overflow-wrap: break-word; }
.short-read-info-related-copy > small { color: var(--preview-soft); font: 400 0.75rem/1.45 var(--ui-font); }
.discover-preview-panel.is-short-read-info :is(button, summary):focus-visible { outline: 2px solid var(--preview-coral); outline-offset: 4px; }
.discover-preview-panel.is-short-read-info .research-reading-context {
  margin: 20px 0;
  color: var(--preview-muted);
}
.discover-preview-panel.is-short-read-info .research-reading-context h3 { font: 500 0.95rem/1.4 var(--ui-font); color: var(--preview-ink); }
.discover-preview-panel.is-short-read-info .research-reading-context :is(small, .research-editorial-note, button span) { color: var(--preview-soft); }
.discover-preview-panel.is-short-read-info .research-reading-context button { border-color: var(--preview-line); }
.discover-preview-panel.is-short-read-info .related-reading-module.is-loading { min-width: 0; }
.discover-preview-panel.is-short-read-info .related-reading-module.is-loading .related-reading-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  overflow: visible;
}
.discover-preview-panel.is-short-read-info .related-reading-card.is-placeholder { width: 100%; min-height: 64px; }

/* Cabinet filing labels distinguish these records within the shared layout. */
.short-read-info-intro > .cabinet-info-file {
  margin: 0 0 9px;
  color: var(--preview-soft);
  font: 500 0.68rem/1.45 var(--ui-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cabinet-info-file > span { margin-inline: 0.35em; color: var(--preview-coral); }
.discover-preview-panel.is-cabinet-info .short-read-info-eyebrow { margin-bottom: 12px; }
.discover-preview-panel.is-cabinet-info .short-read-info-related {
  border-top: 1px solid var(--preview-line);
  padding-top: 24px;
}
.discover-preview-panel.is-cabinet-info .short-read-info-related > h3 { margin-bottom: 4px; }
.discover-preview-panel.is-cabinet-info .short-read-info-collection { margin: 0 0 12px; }

/* Light previews and search sheets share the destination palette. Artwork
 * remains cover-led; paper and control contrast stay stable between books. */
html:not(.theme-dark) body:not(.theme-dark) :is(.discover-preview-panel.is-editorial-preview-open, .discover-book-carousel-neighbor) {
  --preview-page: var(--light-page);
  --preview-surface: var(--light-panel);
  --preview-surface-soft: var(--light-cool-panel);
  --preview-ink: var(--light-ink);
  --preview-muted: var(--light-muted);
  --preview-soft: var(--light-quiet);
  --preview-line: var(--light-line);
  --preview-line-strong: var(--light-line-strong);
  --preview-coral: var(--light-accent-ink);
  --short-info-button: var(--light-accent);
  --short-info-button-ink: var(--light-on-accent);
}

html:not(.theme-dark) body:not(.theme-dark) .research-filter-dialog {
  --discover-page: var(--light-panel);
  --discover-surface-soft: var(--light-cool-panel);
  --discover-text: var(--light-ink);
  --discover-muted: var(--light-muted);
  --discover-line: var(--light-line);
  --discover-coral-strong: var(--light-accent-ink);
}

html:not(.theme-dark) body:not(.theme-dark) .discover-preview-content.is-editorial-preview .discover-preview-actions.is-editorial-actions button.is-primary,
html:not(.theme-dark) body:not(.theme-dark) #discoverPanel .research-edition-feature-copy > em,
html:not(.theme-dark) body:not(.theme-dark) .research-filter-dialog form > footer button[type="submit"] {
  border-color: var(--light-accent) !important;
  background: var(--light-accent) !important;
  color: var(--light-on-accent) !important;
  -webkit-text-fill-color: var(--light-on-accent) !important;
}

/* Books light edition: cream features, warm ink and clay actions.
 * Scope to the active Books route so other formats and graphite stay independent. */
html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) {
  --discover-feature-surface: var(--light-panel);
  --discover-feature-ink: var(--light-ink);
  --discover-feature-muted: var(--light-muted);
  --discover-feature-accent: var(--light-accent);
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) .discover-books-landing .discover-feature-action {
  background: var(--light-accent) !important;
  color: var(--light-on-accent) !important;
  -webkit-text-fill-color: var(--light-on-accent) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) .discover-books-landing .discover-feature-art {
  background: radial-gradient(ellipse at 65% 45%, color-mix(in srgb, var(--light-accent-soft) 70%, transparent), transparent 78%);
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) .discover-books-landing .discover-books-hero-cover {
  box-shadow: 0 12px 24px -8px rgba(106, 64, 36, 0.22), 0 2px 5px rgba(106, 64, 36, 0.09);
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) .discover-books-landing .discover-books-shelf-cover {
  color: var(--light-accent-ink);
  box-shadow: 0 6px 14px rgba(83, 59, 38, 0.12);
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) :is(.discover-books-shelf-copy, .discover-gutenberg-book-copy) > strong {
  color: var(--light-ink) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) :is(.discover-books-shelf-copy, .discover-gutenberg-book-copy) > small {
  color: var(--light-muted) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) .discover-books-landing .discover-books-shelf > header h2 {
  color: var(--light-accent-ink);
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) .discover-books-landing .discover-books-shelf > header small {
  color: var(--light-muted);
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) .discover-books-landing :is(.discover-books-credit, .discover-books-suggestion-head > span) {
  color: var(--light-quiet);
}

html:not(.theme-dark) body:not(.theme-dark) #discoverPanel:has(#discoverFormatSwitch [data-discover-format="books"].is-active) .discover-books-landing .discover-books-shelf-card:focus-visible {
  outline: 2px solid var(--light-accent-ink);
  outline-offset: 4px;
}

/* Research disciplines: approachable field guides with useful paper metadata. */
#discoverPanel .research-subject-reveal { background: var(--discover-page); color: var(--discover-text); }
#discoverPanel .research-subject-content { --subject-accent: #566caa; display: grid; gap: 32px; width: min(860px, calc(100% - 40px)); margin-inline: auto; }
#discoverPanel .research-subject-content.is-biology { --subject-accent: #397568; }
#discoverPanel .research-subject-content.is-computing { --subject-accent: #8661a2; }
#discoverPanel .research-subject-content.is-medicine { --subject-accent: #ae5b51; }
:is(html, body).theme-dark #discoverPanel .research-subject-content { --subject-accent: #a2b5e6; }
:is(html, body).theme-dark #discoverPanel .research-subject-content.is-biology { --subject-accent: #8fcabd; }
:is(html, body).theme-dark #discoverPanel .research-subject-content.is-computing { --subject-accent: #c3a9dd; }
:is(html, body).theme-dark #discoverPanel .research-subject-content.is-medicine { --subject-accent: #efa99d; }
:is(html, body).theme-twilight #discoverPanel .research-subject-content { --subject-accent: var(--twilight-lavender, #c3afd9); }
#discoverPanel .research-subject-content > * { min-width: 0; }
#discoverPanel .research-subject-content button { cursor: pointer; color: inherit; -webkit-tap-highlight-color: transparent; }
#discoverPanel .research-subject-header { display: grid; gap: 12px; }
#discoverPanel [data-research-subject-back] { display: flex; align-items: center; gap: 9px; justify-self: start; min-height: 44px; border: 0; padding: 0; background: transparent; font: 500 15px/1.4 var(--ui-font); }
#discoverPanel .research-subject-eyebrow { margin: 8px 0 0; color: var(--subject-accent); font: 500 11px/1.6 var(--ui-font); letter-spacing: .045em; }
#discoverPanel .research-subject-header h1 { margin: 0; font: 400 clamp(40px, 6vw, 56px)/1.08 var(--heading-font, Georgia, serif); letter-spacing: -.035em; }
#discoverPanel .research-subject-description { max-width: 50ch; margin: 0 0 5px; color: var(--discover-muted); font: 400 15px/1.6 var(--ui-font); }
#discoverPanel .research-subject-content h2 { margin: 0; font: 500 22px/1.25 var(--heading-font, Georgia, serif); letter-spacing: -.018em; }
#discoverPanel .research-subject-topics h2 { margin-bottom: 12px; font: 500 13px/1.4 var(--ui-font); letter-spacing: 0; }
#discoverPanel .research-subtopic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#discoverPanel .research-subtopic-grid button { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--discover-line); border-radius: 9px; background: transparent; font: 400 13px/1.35 var(--ui-font); text-align: left; }
#discoverPanel .research-subtopic-grid button > span { color: var(--subject-accent); }
#discoverPanel .research-subject-feature { position: relative; isolation: isolate; display: flex; align-items: flex-end; width: 100%; min-height: 300px; overflow: hidden; padding: 30px; border: 0; border-radius: 14px; background: #20252d; text-align: left; }
#discoverPanel .research-subject-feature-art { position: absolute; z-index: -1; inset: 0; }
#discoverPanel .research-subject-feature-art img { width: 100%; height: 100%; object-fit: cover; }
#discoverPanel .research-subject-feature-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(9,14,22,.92),rgba(9,14,22,.72) 48%,rgba(9,14,22,.12)); }
#discoverPanel .research-subject-feature-copy { display: grid; justify-items: start; gap: 12px; max-width: 66%; color: #fff; }
#discoverPanel .research-subject-feature-copy small { font: 400 12px/1.5 var(--ui-font); color: #e1e4e9; }
#discoverPanel .research-subject-feature-copy .research-subject-feature-kicker { color: #edb6a5; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
#discoverPanel .research-subject-feature-copy strong { font: 400 clamp(28px, 4vw, 36px)/1.14 var(--heading-font, Georgia, serif); letter-spacing: -.025em; text-wrap: balance; }
#discoverPanel .research-subject-feature-hook { max-width: 42ch; font: 400 14px/1.6 var(--ui-font); color: #f0f1f3; }
#discoverPanel .research-subject-feature-action { display: inline-flex; align-items: center; gap: 22px; padding: 9px 16px; min-height: 40px; box-sizing: border-box; margin-top: 5px; border-radius: 22px; background: #f3ab96; color: #171b20; font: 500 12px/1.4 var(--ui-font); }
#discoverPanel .research-subject-feature-copy i { font-style: normal; }
#discoverPanel .research-subject-feature-skim { margin: 12px 0 0; color: var(--discover-muted); font: 400 12px/1.6 var(--ui-font); }
#discoverPanel .research-subject-feature-skim strong { color: var(--subject-accent); font-weight: 500; margin-right: 5px; }
#discoverPanel .research-subject-jumps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-block: 10px; border-block: 1px solid var(--discover-line); }
#discoverPanel .research-subject-jumps > span { margin-right: auto; color: var(--discover-muted); font: 400 12px/1.5 var(--ui-font); }
#discoverPanel .research-subject-jumps button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; border: 0; padding: 5px 0; background: transparent; font: 500 13px/1.4 var(--ui-font); }
#discoverPanel .research-subject-jumps button > span { color: var(--subject-accent); }
#discoverPanel .research-subject-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
#discoverPanel .research-subject-section-head p { margin: 7px 0 0; color: var(--discover-muted); font: 400 13px/1.5 var(--ui-font); }
#discoverPanel .research-subject-section-head > span { flex: 0 0 auto; color: var(--discover-muted); font: 400 11px/1.5 var(--ui-font); }
#discoverPanel .research-subject-paper-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
#discoverPanel .research-subject-paper-card { min-width: 0; }
#discoverPanel .research-subject-paper { display: flex; flex-direction: column; align-items: stretch; gap: 10px; box-sizing: border-box; width: 100%; height: 100%; padding: 20px; border: 1px solid var(--discover-line); border-top: 2px solid var(--subject-accent); border-radius: 3px 3px 12px 12px; background: transparent; text-align: left; overflow-wrap: anywhere; }
#discoverPanel .research-subject-paper-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; color: var(--subject-accent); font: 500 11px/1.5 var(--ui-font); }
#discoverPanel .research-subject-paper-meta > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
#discoverPanel .research-subject-paper strong { font: 500 23px/1.23 var(--heading-font, Georgia, serif); letter-spacing: -.02em; text-wrap: balance; }
#discoverPanel .research-subject-paper-hook { font: 400 13px/1.65 var(--ui-font); }
#discoverPanel .research-subject-paper cite { display: block; margin-top: 3px; color: var(--discover-muted); font: italic 12px/1.55 var(--ui-font); }
#discoverPanel .research-subject-paper small { display: block; color: var(--discover-muted); font: 400 11px/1.6 var(--ui-font); }
#discoverPanel .research-subject-paper-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 10px; margin-top: auto; padding-top: 14px; color: var(--discover-muted); font: 400 10px/1.5 var(--ui-font); }
#discoverPanel .research-subject-paper-foot > span:last-child { white-space: nowrap; }
#discoverPanel .research-subject-paper-foot i { margin-left: 4px; color: var(--subject-accent); font-size: 14px; font-style: normal; }
#discoverPanel .is-foundations .research-subject-paper { border: 0; border-top: 1px solid var(--discover-line); border-radius: 0; padding: 20px 0; }
#discoverPanel .is-foundations .research-subject-paper-list { column-gap: 30px; row-gap: 0; }
#discoverPanel .research-subject-skim-note { border-left: 2px solid var(--subject-accent); padding: 2px 0 2px 17px; }
#discoverPanel .research-subject-skim-note strong { font: 500 14px/1.5 var(--ui-font); }
#discoverPanel .research-subject-skim-note p { max-width: 65ch; margin: 5px 0 0; color: var(--discover-muted); font: 400 13px/1.65 var(--ui-font); }
#discoverPanel .research-subject-browse-all { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 52px; padding: 15px 0; border: 0; border-top: 1px solid var(--discover-line); background: transparent; font: 500 16px/1.4 var(--ui-font); text-align: left; }
#discoverPanel .research-scoped-title { margin: 0; font: 500 26px/1.2 var(--ui-font); letter-spacing: -.025em; }
#discoverPanel .research-subject-content :is(button,h2):focus-visible { outline: 2px solid var(--subject-accent); outline-offset: 4px; }
/* The subject sheet owns touch scrolling, including touches on card children.
 * Its scroll-container marker also opts out of the global tactile handler.
 * Preserve pinch zoom and defeat the legacy dark-mode important press paint. */
#discoverPanel #researchSubjectSheet,
#discoverPanel #researchSubjectSheet * { touch-action: pan-y pinch-zoom !important; }
#discoverPanel .research-subject-feature { --subject-button-background: #20252d; }
#discoverPanel .research-subject-search { --subject-button-background: var(--discover-surface); --subject-button-color: var(--discover-muted); }
#discoverPanel .research-subject-content button:is(:active,.is-tactile-press) {
  background: var(--subject-button-background, transparent) !important;
  color: var(--subject-button-color, inherit) !important;
  transform: none !important;
  translate: none !important;
  scale: none !important;
  filter: none !important;
  box-shadow: none !important;
}
.discover-preview-panel.is-short-read-info .research-subject-reading-guide { width: min(680px,100%); box-sizing: border-box; margin: 12px auto 20px; padding: 18px 24px; border-block: 1px solid var(--preview-line); color: var(--preview-muted); }
.discover-preview-panel.is-short-read-info .research-subject-reading-guide p { margin: 0 0 10px; font: 400 13px/1.7 var(--ui-font); }
.discover-preview-panel.is-short-read-info .research-subject-reading-guide strong { color: var(--preview-ink); font-weight: 500; }
.discover-preview-panel.is-short-read-info .research-subject-reading-guide small { font: 400 11px/1.5 var(--ui-font); }
@media (hover: hover) {
  #discoverPanel :is(.research-subtopic-grid button,.research-subject-jumps button,.research-subject-browse-all):hover { text-decoration: underline; text-underline-offset: 3px; }
  #discoverPanel .research-subject-paper:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
}
@media (max-width: 640px) {
  #discoverPanel .research-subtopic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #discoverPanel .research-subject-content { gap: 26px; }
  #discoverPanel .research-subject-feature { min-height: 320px; padding: 24px; }
  #discoverPanel .research-subject-feature-copy { max-width: 100%; }
  #discoverPanel .research-subject-feature-art::after { background: linear-gradient(0deg,rgba(9,14,22,.94),rgba(9,14,22,.77) 65%,rgba(9,14,22,.3)); }
  #discoverPanel .research-subject-paper-list { grid-template-columns: minmax(0,1fr); }
  #discoverPanel .research-subject-paper { padding: 18px; }
  #discoverPanel .research-subject-section-head { gap: 9px; }
  #discoverPanel .research-subject-content h2 { font-size: 21px; }
  #discoverPanel .research-subject-topics h2 { font-size: 13px; }
  #discoverPanel .research-subject-jumps { gap: 6px 18px; }
  #discoverPanel .research-subject-jumps > span { flex-basis: 100%; }
}

/* Truncation must leave room for g, j, p, q and y in card titles/bylines. */
#discoverPanel :is(
  .discover-gutenberg-book-copy,
  .discover-browse-copy,
  .discover-for-you-rabbit-card-copy,
  .discover-for-you-shelf-copy,
  .discover-books-shelf-copy,
  .discover-article-row-copy,
  .discover-research-suggested-copy,
  .discover-curiosity-route-copy,
  .discover-originals-short-copy,
  .discover-originals-shelf-copy,
  .discover-oddity-card-copy,
  .discover-research-feature-copy,
  .discover-research-landmark > span
) > :is(strong, small),
#discoverPanel .discover-research-shelf-card > strong,
#discoverPanel .discover-gutenberg-results-head h2,
#discoverPanel .discover-editorial-preview-provenance > small,
#discoverPanel .discover-for-you-shelf-heading > p {
  line-height: 1.35 !important;
}

/* Twilight colour tokens for the maintained Discover routes and previews. */
html.theme-twilight body.theme-twilight #discoverPanel.discover-panel,
html.theme-twilight body.theme-twilight .research-filter-dialog {
  --discover-page: var(--twilight-chrome);
  --discover-sheet: var(--twilight-chrome);
  --discover-surface: var(--twilight-panel);
  --discover-surface-soft: var(--twilight-raised);
  --discover-text: var(--twilight-ink);
  --discover-muted: var(--twilight-muted);
  --discover-soft: var(--twilight-muted);
  --discover-line: var(--twilight-line);
  --discover-line-strong: var(--twilight-line);
  --discover-coral: var(--twilight-accent);
  --discover-coral-strong: var(--twilight-accent);
  --discover-amber: var(--twilight-lavender);
  --discover-feature-surface: var(--twilight-panel);
  --discover-feature-ink: var(--twilight-ink);
  --discover-feature-muted: var(--twilight-muted);
  --discover-feature-accent: var(--twilight-accent);
}
html.theme-twilight body.theme-twilight :is(.discover-preview-panel.is-editorial-preview-open, .discover-book-carousel-neighbor) {
  --preview-page: var(--twilight-chrome);
  --preview-surface: var(--twilight-panel);
  --preview-surface-soft: var(--twilight-raised);
  --preview-ink: var(--twilight-ink);
  --preview-muted: var(--twilight-muted);
  --preview-soft: var(--twilight-muted);
  --preview-line: var(--twilight-line);
  --preview-line-strong: var(--twilight-line);
  --preview-coral: var(--twilight-accent);
}
html.theme-twilight body.theme-twilight #discoverPanel .discover-short-moments button {
  background: var(--twilight-panel) !important;
  border-color: var(--twilight-line) !important;
}
html.theme-twilight body.theme-twilight #discoverPanel .discover-short-moments button[aria-pressed="true"] {
  background: var(--twilight-ink, var(--discover-text)) !important;
  border-color: var(--twilight-ink, var(--discover-text)) !important;
  color: var(--twilight-panel, var(--discover-surface)) !important;
}

/* Twilight journal: a generous lead, concise reading notes and open shelves.
 * Retained markup switches appearance with the theme, including previews. */
html.theme-twilight body.theme-twilight #discoverPanel
  :is(.discover-for-you-shelf, .discover-books-shelf) > header h2 {
  color: var(--twilight-ink);
  font: 400 clamp(1.6rem, 4.8vw, 2rem)/1.2 var(--heading-font);
  letter-spacing: -0.015em;
  text-transform: none;
  text-wrap: balance;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-for-you-shelf > header {
  align-items: center;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-for-you-shelf > header > button {
  align-self: center;
  min-height: 44px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Keep portrait and document images whole, with deep mats in their existing
 * stable colour families. The source pixels and crop remain untouched. */
html.theme-twilight body.theme-twilight #discoverPanel .discover-suggestion-image {
  --twilight-art-mat: #25303b;
}
html.theme-twilight body.theme-twilight #discoverPanel .discover-suggestion-image.is-tone-1 {
  --twilight-art-mat: #332a32;
}
html.theme-twilight body.theme-twilight #discoverPanel .discover-suggestion-image.is-tone-2 {
  --twilight-art-mat: #21352f;
}
html.theme-twilight body.theme-twilight #discoverPanel .discover-suggestion-image.is-tone-3 {
  --twilight-art-mat: #36263c;
}
html.theme-twilight body.theme-twilight #discoverPanel .discover-suggestion-image.is-tone-4 {
  --twilight-art-mat: #252c43;
}

html.theme-twilight body.theme-twilight #discoverPanel
  .discover-suggestion-image:has(> img[data-discover-artwork-origin="source"][data-discover-artwork-fit="contain"]) {
  background: var(--twilight-art-mat);
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-for-you-shelf-art {
  box-shadow:
    0 8px 18px rgba(8, 5, 15, 0.2),
    0 0 0 1px color-mix(in srgb, var(--twilight-line) 55%, transparent);
}

#discoverPanel :is(.twilight-reading-notes, .twilight-research-note, .twilight-research-source) {
  display: none;
}

html.theme-twilight body.theme-twilight #discoverPanel.discover-panel {
  --discover-line: color-mix(in srgb, var(--twilight-muted) 19%, transparent);
  --discover-feature-height: 372px;
  --discover-feature-radius: 20px;
  --discover-feature-surface: #2a1f37;
  --discover-feature-muted: var(--twilight-secondary);
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-header-copy::after {
  content: "";
  display: block;
  width: 92px;
  height: 1px;
  margin-top: 16px;
  background: var(--twilight-last-light);
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, #000 60%, transparent);
  pointer-events: none;
}

html.theme-twilight body.theme-twilight #discoverPanel
  :is(.discover-short-feature-heading, .discover-books-suggestion-head, .research-edition-heading) h2 {
  font: 400 clamp(1.3rem, 3.6vw, 1.7rem)/1.25 var(--heading-font);
  letter-spacing: -0.015em;
}

html.theme-twilight body.theme-twilight #discoverPanel :is(button, article).discover-feature {
  height: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-color: color-mix(in srgb, var(--twilight-accent) 24%, transparent);
  background: var(--discover-feature-surface);
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-feature .discover-feature-copy {
  padding: clamp(26px, 4vw, 40px);
  gap: 12px;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-feature .discover-feature-eyebrow {
  color: var(--twilight-accent);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.14em;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-feature .discover-feature-title {
  font: 400 clamp(2rem, 4.4vw, 3.15rem)/1.06 var(--heading-font);
  letter-spacing: -0.02em;
  color: var(--twilight-ink);
  max-width: 18ch;
  text-wrap: balance;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-feature .discover-feature-hook {
  color: var(--discover-feature-muted);
  font-size: 14px;
  line-height: 1.65;
  max-width: 36ch;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-feature .discover-feature-action {
  margin-top: 10px;
  border-radius: 12px;
  padding: 12px 18px;
  background: var(--twilight-accent);
  color: var(--twilight-chrome);
}

/* Photos have their own clear image area; the deep copy panel keeps text crisp. */
html.theme-twilight body.theme-twilight #discoverPanel .discover-feature.is-photo .discover-feature-art {
  margin-left: 0;
  background: var(--twilight-paper);
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-feature.is-photo .discover-feature-art::after {
  display: none;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-feature .discover-feature-art img {
  filter: none;
  opacity: 1;
}

/* Two text-led suggestions provide a quiet interval before illustrated shelves. */
html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes {
  display: grid;
  gap: 16px;
  margin-block: 12px 8px;
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes > h2 {
  margin: 0;
  color: var(--twilight-ink);
  font: 400 1.5rem/1.25 var(--heading-font);
  letter-spacing: -0.01em;
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes button {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 20px 24px 20px 0;
  border: 0;
  border-top: 1px solid var(--discover-line);
  border-radius: 0;
  background: transparent;
  color: var(--twilight-ink);
  text-align: left;
  cursor: pointer;
  touch-action: pan-y;
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes button > small {
  color: var(--twilight-accent);
  font: 500 0.7rem/1.5 var(--ui-font);
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes button > strong {
  font: 400 clamp(1.3rem, 3vw, 1.7rem)/1.2 var(--heading-font);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes button > span {
  color: var(--twilight-muted);
  font: 400 0.86rem/1.6 var(--ui-font);
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes button > i {
  position: absolute;
  top: 20px;
  right: 0;
  color: var(--twilight-accent);
  font-style: normal;
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes button:focus-visible {
  outline: 2px solid var(--twilight-lavender);
  outline-offset: 4px;
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes button:is(:active, .is-tactile-press) {
  transform: none !important;
  scale: none !important;
  translate: none !important;
  filter: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

html.theme-twilight body.theme-twilight #discoverPanel
  :is(.discover-reading-bundles h2, .discover-short-subjects-heading h2, .discover-books-curated > header h2,
    .research-edition-shelf h3, .research-edition-subjects h3) {
  color: var(--twilight-ink);
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: -0.01em;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-reading-bundle-card {
  border: 0;
  border-radius: 8px;
  background: transparent !important;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-reading-bundle-copy {
  padding: 16px 0;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-reading-bundle-copy > strong {
  font: 400 1.45rem/1.2 var(--heading-font);
  color: var(--twilight-ink);
}

/* Books keep portrait jackets prominent and author names close to the title. */
html.theme-twilight body.theme-twilight #discoverPanel .discover-books-landing .discover-feature .discover-feature-art,
html.theme-twilight body.theme-twilight #discoverPanel .discover-feature.is-story .discover-feature-art {
  padding: 30px;
  background: radial-gradient(ellipse at 55% 45%, rgba(190, 161, 231, 0.13), transparent 72%);
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-books-landing .discover-feature .discover-books-hero-cover {
  width: min(220px, 100%);
  max-height: none;
  box-shadow: 0 20px 30px rgba(12, 9, 19, 0.32);
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-books-landing .discover-feature .discover-feature-meta {
  color: var(--twilight-lavender);
  font-size: 14px;
}

html.theme-twilight body.theme-twilight #discoverPanel .discover-books-shelf-copy > strong {
  color: var(--twilight-ink);
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.3;
}

/* Research carries its edition source and editorial summary beside each paper. */
html.theme-twilight body.theme-twilight #discoverPanel .research-edition {
  --discover-feature-surface: #222136;
}

html.theme-twilight body.theme-twilight #discoverPanel .research-edition .discover-feature .discover-feature-eyebrow {
  color: var(--twilight-lavender);
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-research-source {
  display: block;
  color: var(--twilight-lavender);
  font: 400 11px/1.5 var(--ui-font);
}

html.theme-twilight body.theme-twilight #discoverPanel .research-edition-card {
  flex-basis: 220px;
  gap: 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}

html.theme-twilight body.theme-twilight #discoverPanel .research-edition-card > strong {
  padding-inline: 0;
  color: var(--twilight-ink);
  font: 400 1.4rem/1.2 var(--heading-font);
}

html.theme-twilight body.theme-twilight #discoverPanel .research-edition-card > small {
  padding-inline: 0;
}

html.theme-twilight body.theme-twilight #discoverPanel .twilight-research-note {
  display: block;
  color: var(--twilight-muted);
  font: 400 13px/1.6 var(--ui-font);
}

html.theme-twilight body.theme-twilight #discoverPanel .research-edition-card .twilight-research-source {
  margin-top: auto;
  padding-top: 3px;
}

@media (max-width: 640px) {
  html.theme-twilight body.theme-twilight #discoverPanel :is(button, article).discover-feature {
    min-height: 0;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-feature .discover-feature-copy {
    padding: 24px;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-feature .discover-feature-title {
    font-size: clamp(1.8rem, 7.6vw, 2.4rem);
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-short-feature-card.discover-feature,
  html.theme-twilight body.theme-twilight #discoverPanel .research-edition .discover-feature {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 184px auto;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-short-feature-card .discover-feature-art,
  html.theme-twilight body.theme-twilight #discoverPanel .research-edition .discover-feature-art {
    grid-row: 1;
    min-height: 0;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-short-feature-card.is-story .discover-feature-art {
    padding: 12px;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-short-feature-card.is-story .discover-feature-art img {
    height: 160px;
    width: auto;
    max-width: 100%;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-books-landing .discover-feature {
    grid-template-columns: minmax(0, 1fr) 34%;
    min-height: 300px;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-books-landing .discover-feature .discover-feature-copy {
    padding: 24px 0 24px 20px;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-books-landing .discover-feature .discover-feature-art {
    padding: 18px 12px;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .discover-books-landing .discover-feature .discover-feature-title {
    font-size: clamp(1.7rem, 7vw, 2.25rem);
  }
  html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  html.theme-twilight body.theme-twilight #discoverPanel .research-edition-card {
    flex-basis: 204px;
  }
}

@media (hover: hover) {
  html.theme-twilight body.theme-twilight #discoverPanel .twilight-reading-notes button:hover > strong {
    text-decoration: underline;
    text-decoration-color: var(--twilight-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
  }
}

/* Verified speaker-colour badge on Books shelf cards (app.js hasVerifiedSpeakerColours). */
.discover-books-shelf-copy > .discover-verified-colours {
  justify-self: start;
  margin-top: 1px;
  padding: 2px 6px 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #d36458) 16%, transparent);
  color: var(--accent, #d36458);
  font: 640 0.5rem/1.1 var(--ui-font);
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.discover-editorial-preview-copy > .discover-verified-colours {
  justify-self: start;
  margin-top: 6px;
  padding: 4px 9px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #d36458) 16%, transparent);
  color: var(--accent, #d36458);
  font: 640 0.68rem/1.1 var(--ui-font);
  font-style: normal;
  letter-spacing: 0.02em;
}

.short-read-info-intro > .short-read-info-verified {
  margin: 10px 0 0;
}

.short-read-info-intro .discover-verified-colours {
  display: inline-block;
  padding: 4px 10px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, #d36458) 16%, transparent);
  color: var(--accent, #d36458);
  font: 640 0.72rem/1.1 var(--ui-font);
  letter-spacing: 0.02em;
}

/* Books landing: dialogue samples, speaker swatches and reading times
 * (app.js renderDiscoverBooksDialogue, renderDiscoverSpeakerSwatch,
 * getDiscoverBookReadingTime). Speaker ink comes from the reader's palette as
 * light/dark/twilight custom properties, so each theme shows the colours the
 * reader uses without re-rendering. */
.discover-books-dialogue-line,
.discover-books-colour-swatch > span {
  --speaker-ink: var(--speaker-ink-dark);
}

html:not(.theme-dark) body:not(.theme-dark) :is(.discover-books-dialogue-line, .discover-books-colour-swatch > span) {
  --speaker-ink: var(--speaker-ink-light);
}

:is(html, body).theme-twilight :is(.discover-books-dialogue-line, .discover-books-colour-swatch > span) {
  --speaker-ink: var(--speaker-ink-twilight);
}

.discover-books-hero-copy > .discover-books-dialogue {
  max-width: 40ch;
  margin-top: 2px;
  display: grid;
  gap: 5px;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.discover-books-dialogue-line {
  display: -webkit-box;
  overflow: hidden;
  color: var(--speaker-ink);
  font: 480 clamp(0.76rem, 1.75vw, 0.88rem)/1.34 var(--ui-font);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.discover-books-dialogue-line > b {
  margin-right: 6px;
  font: 720 0.56rem/1 var(--ui-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
}

.discover-books-dialogue-line > q {
  quotes: "\201C" "\201D";
}

.discover-books-hero-copy .discover-books-reading-time {
  font: inherit;
  white-space: nowrap;
}

.discover-books-card-meta {
  min-width: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.discover-books-colour-swatch {
  flex: none;
  display: inline-flex;
  gap: 2px;
  font-style: normal;
}

.discover-books-colour-swatch > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--speaker-ink);
}

.discover-books-card-meta > .discover-books-reading-time {
  overflow: hidden;
  color: rgba(223, 215, 203, 0.68);
  font: 560 0.54rem/1.2 var(--ui-font);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html:not(.theme-dark) body:not(.theme-dark) .discover-books-card-meta > .discover-books-reading-time {
  color: var(--light-muted);
}

.discover-books-curated > header > div > small {
  color: var(--discover-muted);
  font: 600 0.64rem/1.2 var(--ui-font);
}

/* Research landing refresh: themed shelves and subject rows share the field-guide language of the subject pages. */
#discoverPanel .research-edition { --research-shelf-accent: #566caa; }
#discoverPanel .research-edition-shelf.is-minds,
#discoverPanel .research-subject-content.is-mind { --research-shelf-accent: #97622c; --subject-accent: #97622c; }
#discoverPanel .research-edition-shelf.is-rules { --research-shelf-accent: #8661a2; }
#discoverPanel .research-edition-shelf.is-saved { --research-shelf-accent: #397568; }
:is(html, body).theme-dark #discoverPanel .research-edition { --research-shelf-accent: #a2b5e6; }
:is(html, body).theme-dark #discoverPanel :is(.research-edition-shelf.is-minds, .research-subject-content.is-mind) { --research-shelf-accent: #e2bb86; --subject-accent: #e2bb86; }
:is(html, body).theme-dark #discoverPanel .research-edition-shelf.is-rules { --research-shelf-accent: #c3a9dd; }
:is(html, body).theme-dark #discoverPanel .research-edition-shelf.is-saved { --research-shelf-accent: #8fcabd; }
html.theme-twilight body.theme-twilight #discoverPanel :is(.research-edition, .research-edition-shelf) { --research-shelf-accent: var(--twilight-lavender, #c3afd9); }
html.theme-twilight body.theme-twilight #discoverPanel .research-subject-content.is-mind { --subject-accent: var(--twilight-lavender, #c3afd9); }
#discoverPanel .research-edition-heading { display: grid; align-items: start; gap: 6px; min-height: 0; }
#discoverPanel .research-edition-heading h2 { font: 400 clamp(30px, 5vw, 40px)/1.08 var(--heading-font, Georgia, serif); letter-spacing: -.03em; }
#discoverPanel .research-edition-heading p { margin: 0; max-width: 46ch; color: var(--discover-muted); font: 400 14px/1.5 var(--ui-font); }
#discoverPanel .research-edition-feature-copy > small.research-edition-feature-access { font: 500 12px/1.5 var(--ui-font); opacity: .82; }
#discoverPanel .research-edition-shelf > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
#discoverPanel .research-edition-shelf > header p { margin: 5px 0 0; color: var(--discover-muted); font: 400 13px/1.5 var(--ui-font); }
#discoverPanel .research-edition :is(.research-edition-shelf, .research-edition-subjects) h3 { font: 400 24px/1.2 var(--heading-font, Georgia, serif); letter-spacing: -.02em; }
#discoverPanel .research-edition-see-all { flex: 0 0 auto; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--research-shelf-accent) !important; font: 500 13px/1.4 var(--ui-font); }
#discoverPanel .research-edition-rail { align-items: stretch; }
#discoverPanel .research-edition-card { flex-basis: 220px; gap: 0; padding: 0; border-radius: 12px; }
#discoverPanel .research-edition-card-copy { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px 14px; }
#discoverPanel .research-edition-topic { color: var(--research-shelf-accent); font: 500 11px/1.4 var(--ui-font); letter-spacing: .02em; }
#discoverPanel .research-edition-card-copy > strong { font: 500 19px/1.22 var(--heading-font, Georgia, serif); letter-spacing: -.015em; text-wrap: balance; }
#discoverPanel .research-edition-hook { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--discover-muted); font: 400 13px/1.5 var(--ui-font); }
#discoverPanel .research-edition-byline { color: var(--discover-muted); font: 400 11px/1.5 var(--ui-font); }
#discoverPanel .research-edition-card-copy > .research-availability { margin-top: auto; padding-top: 6px; white-space: normal; }
#discoverPanel .research-edition-card.is-text { min-height: 190px; border-top: 2px solid var(--research-shelf-accent); border-radius: 3px 3px 12px 12px; }
#discoverPanel .research-availability { color: var(--discover-muted); font: 500 11px/1.5 var(--ui-font); white-space: nowrap; }
#discoverPanel .research-availability.is-ready { color: var(--research-shelf-accent, var(--subject-accent, var(--discover-text))); }
#discoverPanel .research-availability-detail { white-space: nowrap; }
#discoverPanel .research-availability.is-ready::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
#discoverPanel .research-subject-paper-foot > .research-availability { font-size: 11px; }
#discoverPanel .research-subject-paper-foot > .research-availability.is-ready { color: var(--subject-accent); }
#discoverPanel .research-paper-result .research-availability.is-ready { color: var(--discover-text); }
#discoverPanel .research-edition-subjects > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
#discoverPanel .research-edition-subjects > div > button { align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; border: 0; border-top: 1px solid var(--discover-line); border-radius: 0; font-size: 15px; }
#discoverPanel .research-edition-subjects > div > button:last-child { border-bottom: 1px solid var(--discover-line); }
#discoverPanel .research-edition-subjects > div > button > span:first-child { display: grid; gap: 3px; min-width: 0; color: var(--discover-text); }
#discoverPanel .research-edition-subjects > div > button strong { font: 500 16px/1.3 var(--ui-font); }
#discoverPanel .research-edition-subjects > div > button small { color: var(--discover-muted); font: 400 13px/1.45 var(--ui-font); }
@media (hover: hover) {
  #discoverPanel .research-edition-card:hover .research-edition-card-copy > strong,
  #discoverPanel .research-edition-subjects > div > button:hover strong { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}
@media (max-width: 640px) {
  #discoverPanel .research-edition-heading h2 { font-size: 30px; }
  #discoverPanel .research-edition :is(.research-edition-shelf, .research-edition-subjects) h3 { font-size: 22px; }
  #discoverPanel .research-edition-card { flex-basis: calc((100% - 40px) / 2); }
  #discoverPanel .research-edition-card-copy { padding: 10px 11px 12px; }
  #discoverPanel .research-edition-card-copy > strong { font-size: 17px; }
  #discoverPanel .research-edition-hook { font-size: 12px; }
}

/* Research search polish: a larger Back target, subject shortcuts, type kickers and quiet availability. */
#discoverPanel .research-search-back { min-height: 44px; padding-right: 16px; }
#discoverPanel .research-search-subjects { display: flex; flex-wrap: wrap; gap: 9px; }
#discoverPanel .research-search-subjects button { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--discover-line); border-radius: 22px; background: var(--discover-surface-soft, transparent); color: var(--discover-text); font: 500 13px/1.3 var(--ui-font); cursor: pointer; }
#discoverPanel .research-search-subjects button span { color: var(--discover-muted); }
#discoverPanel .research-paper-kicker { margin-bottom: -2px; color: var(--research-shelf-accent, #566caa); font: 500 11px/1.4 var(--ui-font); letter-spacing: .02em; }
#discoverPanel .research-paper-kicker.is-review { color: #397568; }
#discoverPanel .research-paper-kicker.is-preprint { color: #8661a2; }
:is(html, body).theme-dark #discoverPanel .research-paper-kicker { color: #a2b5e6; }
:is(html, body).theme-dark #discoverPanel .research-paper-kicker.is-review { color: #8fcabd; }
:is(html, body).theme-dark #discoverPanel .research-paper-kicker.is-preprint { color: #c3a9dd; }
html.theme-twilight body.theme-twilight #discoverPanel .research-paper-kicker { color: var(--twilight-lavender, #c3afd9); }
#discoverPanel .research-paper-availability.is-open { color: var(--discover-text); }
@media (hover: hover) {
  #discoverPanel .research-search-subjects button:hover { border-color: currentColor; }
}

/* Research “Continue reading” shelf: reading progress on landing cards. */
#discoverPanel .research-edition-shelf.is-progress { --research-shelf-accent: #b8573f; }
:is(html, body).theme-dark #discoverPanel .research-edition-shelf.is-progress { --research-shelf-accent: #f0a48e; }
html.theme-twilight body.theme-twilight #discoverPanel .research-edition-shelf.is-progress { --research-shelf-accent: var(--twilight-lavender, #c3afd9); }
#discoverPanel .research-edition-card.is-progress.is-text { min-height: 150px; }
#discoverPanel .research-edition-progress { display: block; height: 3px; margin-top: auto; overflow: hidden; border-radius: 2px; background: var(--discover-line); }
#discoverPanel .research-edition-progress > i { display: block; height: 100%; border-radius: inherit; background: var(--research-shelf-accent); }
#discoverPanel .research-edition-card.is-progress .research-availability { padding-top: 2px; }
#discoverPanel .research-edition-card.is-progress .research-availability::before { content: none; }


/*
 * Settings screen ownership
 * =========================
 *
 * This stylesheet owns the current Settings destination: its masthead,
 * reading summary, grouped preference cards, switches, segmented controls,
 * steppers, pause sliders and footnotes. It loads after Discover but before
 * shared shelf geometry and the structural app shell. Components use the
 * `pref-` prefix so earlier Settings passes in styles.css cannot reach them.
 * Keep Stats, Help, reader, bottom-navigation, splash and viewport rules out
 * of this file.
 */

/*
 * Settings page surface
 * ---------------------
 * A plain theme canvas, matching Library: apricot page, graphite, or plum.
 */
#inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) {
  padding: 0 env(safe-area-inset-right) max(18px, env(safe-area-inset-bottom)) env(safe-area-inset-left) !important;
  color-scheme: light;
  background: var(--light-page, #eee2d3) !important;
}

html.theme-dark #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])),
body.theme-dark #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) {
  color-scheme: dark;
  background: #0b0d10 !important;
}

html.theme-twilight #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])),
body.theme-twilight #inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) {
  background: var(--twilight-chrome, #18121f) !important;
}

#inputPanel.is-open.is-settings-screen:has(#settingsView:not([hidden])) > .menu-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  padding: var(--destination-page-top) 0 max(112px, calc(env(safe-area-inset-bottom) + 88px)) !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#inputPanel.home-ambient-active:has(#settingsView:not([hidden])) .home-ambient-canvas {
  display: none !important;
}

/*
 * Settings theme tokens
 * ---------------------
 * Light maps to the soft apricot tokens, Dark to the cool graphite surfaces
 * used by Home and Library, and Twilight to the shared plum tokens.
 */
#settingsView.settings-view {
  --pref-gutter: var(--destination-page-gutter, clamp(18px, 4.9vw, 48px));
  --pref-ink: var(--light-ink, #302c29);
  --pref-muted: var(--light-muted, #685b51);
  --pref-soft: #8f7f72;
  --pref-surface: var(--light-raised, #f8f1e8);
  --pref-surface-high: #fffaf4;
  --pref-line: rgba(48, 44, 41, 0.085);
  --pref-line-strong: rgba(48, 44, 41, 0.16);
  --pref-track: rgba(48, 44, 41, 0.07);
  --pref-switch-off: rgba(48, 44, 41, 0.17);
  --pref-knob: #fffdf9;
  --pref-accent: var(--light-accent, #ad5734);
  --pref-accent-ink: var(--light-accent-ink, #85482f);
  --pref-danger: #b2442f;
  --pref-hover: rgba(48, 44, 41, 0.035);
  --pref-shadow: 0 10px 28px rgba(104, 67, 42, 0.06);
  --pref-selected-shadow: 0 1px 3px rgba(83, 59, 38, 0.14);
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 var(--pref-gutter) clamp(112px, 15vh, 148px) !important;
  display: grid !important;
  gap: 26px !important;
  align-content: start !important;
  overflow: visible !important;
  color: var(--pref-ink) !important;
  background: transparent !important;
  font-family: var(--ui-font) !important;
}

html.theme-dark #settingsView.settings-view,
body.theme-dark #settingsView.settings-view {
  --pref-ink: rgb(242, 237, 227);
  --pref-muted: rgba(225, 218, 207, 0.7);
  --pref-soft: rgba(225, 218, 207, 0.46);
  --pref-surface: rgb(21, 23, 27);
  --pref-surface-high: rgb(40, 43, 50);
  --pref-line: rgba(242, 237, 227, 0.07);
  --pref-line-strong: rgba(242, 237, 227, 0.13);
  --pref-track: rgba(242, 237, 227, 0.055);
  --pref-switch-off: rgba(242, 237, 227, 0.16);
  --pref-knob: rgb(246, 242, 236);
  --pref-accent: rgb(223, 93, 81);
  --pref-accent-ink: rgb(223, 93, 81);
  --pref-danger: rgb(238, 122, 110);
  --pref-hover: rgba(242, 237, 227, 0.03);
  --pref-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
  --pref-selected-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html.theme-twilight #settingsView.settings-view,
body.theme-twilight #settingsView.settings-view {
  --pref-ink: var(--twilight-ink, #f6ebdd);
  --pref-muted: var(--twilight-muted, #baa8ca);
  --pref-soft: rgba(186, 168, 202, 0.7);
  --pref-surface: var(--twilight-panel, #2a2036);
  --pref-surface-high: var(--twilight-raised, #382944);
  --pref-line: var(--twilight-line, #453b4f);
  --pref-line-strong: rgba(186, 168, 202, 0.28);
  --pref-track: rgba(24, 18, 31, 0.45);
  --pref-switch-off: var(--twilight-track, #4d4258);
  --pref-knob: var(--twilight-ink, #f6ebdd);
  --pref-accent: var(--twilight-accent, #e58199);
  --pref-accent-ink: var(--twilight-accent, #e58199);
  --pref-danger: var(--twilight-accent, #e58199);
  --pref-hover: rgba(246, 235, 221, 0.035);
  --pref-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

#settingsView [hidden] {
  display: none !important;
}

/* The page layout above forces display: grid, so a hidden Settings screen
   must be removed explicitly or it paints over Home and the other tabs. */
#settingsView.settings-view[hidden] {
  display: none !important;
}

/*
 * Settings masthead
 * -----------------
 * The same serif title and red letter as Library, without a subtitle.
 */
#settingsView > .collection-header.settings-masthead {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  display: block !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
}

#settingsView > .settings-masthead::before,
#settingsView > .settings-masthead::after {
  content: none !important;
  display: none !important;
}

#settingsView > .settings-masthead h2 {
  margin: 0 !important;
  color: var(--pref-ink) !important;
  font-family: var(--heading-font) !important;
  font-size: var(--destination-title-size) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  text-shadow: none !important;
}

#settingsView > .settings-masthead .brand-red-letter {
  color: var(--pref-accent) !important;
}

#settingsView > .settings-stack {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 28px !important;
  background: none !important;
}

#settingsView .settings-group.pref-section {
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  gap: 10px !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#settingsView .settings-group.pref-section::before,
#settingsView .settings-group.pref-section::after {
  content: none !important;
}

#settingsView .pref-label {
  margin: 0 0 0 2px;
  padding: 0;
  color: var(--pref-accent-ink);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#settingsView .pref-label::after {
  content: none !important;
}

/*
 * Settings cards and rows
 * -----------------------
 */
#settingsView .pref-card {
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--pref-line);
  border-radius: 18px;
  background: var(--pref-surface);
  box-shadow: var(--pref-shadow);
}

#settingsView .pref-row {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pref-ink);
  font: inherit;
  text-align: left;
  box-shadow: none;
  transform: none;
}

#settingsView .pref-row + .pref-row,
#settingsView .pref-developer[open] > summary + .pref-row {
  border-top: 1px solid var(--pref-line);
}

#settingsView .pref-row-stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}

#settingsView .pref-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

#settingsView .pref-copy strong {
  color: var(--pref-ink);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

#settingsView .pref-copy small {
  color: var(--pref-muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}

#settingsView :is(button.pref-row, summary.pref-row, label.pref-toggle) {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 140ms ease;
}

@media (hover: hover) {
  #settingsView :is(button.pref-row, summary.pref-row, label.pref-toggle):hover {
    background: var(--pref-hover);
  }
}

#settingsView :is(button.pref-row, summary.pref-row, label.pref-toggle):active {
  transform: none;
  box-shadow: none;
}

/* The base button rule sets touch-action: none, which stops a vertical drag
   that starts on a Settings control from scrolling the page. */
#settingsView :is(button, summary, label) {
  touch-action: pan-y;
}

#settingsView :is(button, summary, input):focus-visible {
  outline: 2px solid var(--pref-accent);
  outline-offset: -2px;
}

#settingsView button.pref-row:disabled {
  cursor: progress;
  opacity: 0.6;
}

#settingsView .pref-chevron {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 3px;
  border-top: 1.8px solid var(--pref-soft);
  border-right: 1.8px solid var(--pref-soft);
  transform: rotate(45deg);
}

#settingsView .pref-external {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--pref-soft);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#settingsView .pref-danger .pref-copy strong {
  color: var(--pref-danger);
}

#settingsView .pref-footnote {
  margin: 2px 4px 0;
  display: grid;
  gap: 2px;
  color: var(--pref-soft);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
}

/*
 * Switches
 * --------
 * The checkbox stays in the label for existing change handlers and reader
 * sheet rows; the visible switch follows its checked and focus state.
 */
#settingsView .pref-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

#settingsView .pref-switch {
  flex: none;
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--pref-switch-off);
  transition: background-color 180ms ease;
}

#settingsView .pref-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pref-knob);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 200ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

#settingsView .pref-toggle input:checked + .pref-switch {
  background: var(--pref-accent);
}

#settingsView .pref-toggle input:checked + .pref-switch::after {
  transform: translateX(20px);
}

#settingsView .pref-toggle input:focus-visible + .pref-switch {
  outline: 2px solid var(--pref-accent);
  outline-offset: 2px;
}

/*
 * Segmented controls and steppers
 * -------------------------------
 */
#settingsView .pref-segmented {
  flex: none;
  box-sizing: border-box;
  padding: 3px;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  border-radius: 11px;
  background: var(--pref-track);
}

#settingsView .pref-segmented-wide {
  width: 100%;
}

#settingsView .pref-segmented button {
  min-width: 0;
  height: 30px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pref-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 140ms ease, color 140ms ease;
}

#settingsView .pref-segmented button[aria-checked="true"] {
  background: var(--pref-surface-high);
  color: var(--pref-ink);
  box-shadow: var(--pref-selected-shadow);
}

#settingsView .pref-segmented button:disabled {
  cursor: default;
}

#settingsView .pref-stepper {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border-radius: 11px;
  background: var(--pref-track);
}

#settingsView .pref-stepper button {
  width: 38px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pref-ink);
  font-family: var(--ui-font);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

#settingsView .pref-stepper .pref-stepper-small {
  font-size: 0.78rem;
}

#settingsView .pref-stepper .pref-stepper-large {
  font-size: 1.12rem;
}

#settingsView .pref-stepper button:disabled {
  opacity: 0.3;
  cursor: default;
}

#settingsView .pref-stepper output {
  min-width: 26px;
  color: var(--pref-ink);
  font-size: 0.88rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

#settingsView .pref-value {
  flex: none;
  color: var(--pref-muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#settingsView .pref-row.is-disabled > :not(.pref-copy) {
  opacity: 0.4;
}

#settingsView .pref-row.is-disabled .pref-copy small {
  opacity: 0.7;
}

/*
 * Reading summary
 * ---------------
 */
#settingsView .pref-glance {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 16px 18px 16px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--pref-line);
  border-radius: 18px;
  background: var(--pref-surface);
  box-shadow: var(--pref-shadow);
  color: var(--pref-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#settingsView .pref-glance-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

#settingsView .pref-glance-copy strong {
  color: var(--pref-ink);
  font-family: var(--heading-font);
  font-size: 1.42rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

#settingsView .pref-glance-copy small {
  color: var(--pref-muted);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.35;
}

#settingsView .pref-glance-bars {
  height: 38px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

#settingsView .pref-glance-bars i {
  width: 6px;
  height: max(4px, calc(var(--bar, 0) * 38px));
  border-radius: 3px;
  background: var(--pref-switch-off);
}

#settingsView .pref-glance-bars i.is-today {
  background: var(--pref-accent);
}

/*
 * Theme and font previews
 * -----------------------
 */
#settingsView .pref-theme-grid,
#settingsView .pref-font-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#settingsView .pref-font-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#settingsView :is(.pref-theme, .pref-font) {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  display: grid;
  justify-items: start;
  border: 1px solid var(--pref-line);
  background: var(--pref-surface);
  color: var(--pref-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

#settingsView .pref-theme {
  padding: 8px 8px 11px;
  gap: 1px;
  border-radius: 16px;
}

#settingsView :is(.pref-theme, .pref-font)[aria-checked="true"] {
  border-color: var(--pref-accent);
  box-shadow: inset 0 0 0 1px var(--pref-accent);
}

#settingsView .pref-theme strong {
  margin: 9px 2px 0;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.2;
}

#settingsView .pref-theme small {
  margin: 0 2px;
  color: var(--pref-muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.25;
}

#settingsView .pref-theme-sample {
  --sample-paper: #f4ebdf;
  --sample-ink: #302c29;
  --sample-line: rgba(48, 44, 41, 0.18);
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  padding: 9px 10px;
  display: grid;
  align-content: start;
  gap: 6px;
  border-radius: 10px;
  background: var(--sample-paper);
  box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.14);
}

#settingsView .pref-theme-sample[data-sample-theme="dark"] {
  --sample-paper: #15171b;
  --sample-ink: #ece6dc;
  --sample-line: rgba(236, 230, 220, 0.2);
}

#settingsView .pref-theme-sample[data-sample-theme="twilight"] {
  --sample-paper: #2a2036;
  --sample-ink: #f6ebdd;
  --sample-line: rgba(189, 152, 237, 0.34);
}

#settingsView .pref-theme-sample span {
  color: var(--sample-ink);
  font-family: var(--heading-font);
  font-size: 1.15rem;
  line-height: 1;
}

#settingsView .pref-theme-sample i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--sample-line);
}

#settingsView .pref-theme-sample i:last-child {
  width: 64%;
}

#settingsView .pref-font {
  padding: 10px 6px 9px;
  gap: 4px;
  justify-items: center;
  border-radius: 13px;
  background: transparent;
  text-align: center;
}

#settingsView .pref-font-sample {
  color: var(--pref-ink);
  font-size: 1.4rem;
  line-height: 1.1;
}

#settingsView .pref-font strong {
  max-width: 100%;
  overflow: hidden;
  color: var(--pref-muted);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#settingsView .pref-font[aria-checked="true"] strong {
  color: var(--pref-ink);
}

/*
 * Dialogue preview
 * ----------------
 */
#settingsView .pref-dialogue-preview {
  margin: 0;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  border-radius: 12px;
  background: var(--pref-track);
  color: var(--pref-muted);
  font-family: "Iowan Old Style", Iowan, Charter, Palatino, Georgia, serif;
  font-size: 0.94rem;
  line-height: 1.4;
}

#settingsView .pref-dialogue-preview q {
  color: var(--pref-voice-0, var(--pref-ink));
  quotes: "\201C" "\201D";
}

#settingsView .pref-dialogue-preview q[data-voice="1"] {
  color: var(--pref-voice-1, var(--pref-ink));
}

/*
 * Pause fine-tuning
 * -----------------
 */
#settingsView .pref-disclosure {
  margin: 0;
}

#settingsView .pref-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
  color: var(--pref-muted);
  font-size: 0.82rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

#settingsView .pref-disclosure > summary::-webkit-details-marker {
  display: none;
}

#settingsView .pref-disclosure > summary > span:first-child {
  flex: 1;
}

#settingsView .pref-disclosure .pref-chevron,
#settingsView .pref-developer > summary .pref-chevron {
  transform: rotate(135deg);
  transition: transform 180ms ease;
}

#settingsView .pref-disclosure[open] .pref-chevron,
#settingsView .pref-developer[open] > summary .pref-chevron {
  transform: rotate(-45deg);
}

#settingsView .pref-slider-stack {
  padding-top: 14px;
  display: grid;
  gap: 16px;
}

#settingsView .pref-slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  color: var(--pref-ink);
  font-size: 0.84rem;
  font-weight: 550;
}

#settingsView .pref-row.pref-slider {
  display: grid;
}

#settingsView .pref-slider input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

#settingsView .pref-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--pref-accent) 0 var(--speed-percent, 50%),
    var(--pref-switch-off) var(--speed-percent, 50%) 100%
  );
}

#settingsView .pref-slider input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--pref-switch-off);
}

#settingsView .pref-slider input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--pref-accent);
}

#settingsView .pref-slider input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border: 0;
  border-radius: 50%;
  background: var(--pref-knob);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  -webkit-appearance: none;
  appearance: none;
}

#settingsView .pref-slider input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--pref-knob);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

/*
 * Developer drawer (development builds only)
 * ------------------------------------------
 */
#settingsView .pref-developer {
  display: block;
}

#settingsView .pref-developer > summary {
  list-style: none;
}

#settingsView .pref-developer > summary::-webkit-details-marker {
  display: none;
}

@media (min-width: 700px) {
  #settingsView > .settings-stack {
    gap: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #settingsView :is(.pref-switch, .pref-switch::after, .pref-segmented button, .pref-chevron) {
    transition: none !important;
  }
}


/*
 * Reading guide ownership
 * =======================
 *
 * This stylesheet owns the "How to read" guide opened from Settings → About
 * & help (#helpView): its page surface, masthead, mode illustrations, gesture
 * lists, reader map, speaker sample and privacy links. It loads after
 * Settings but before shared shelf geometry and the structural app shell.
 * Components use the `guide-` prefix so earlier Help rules in styles.css
 * cannot reach them. Keep Settings, Stats, reader, bottom-navigation, splash
 * and viewport rules out of this file. Controls never take a pressed look.
 */

/*
 * Guide page surface
 * ------------------
 * The same plain canvas as Settings: apricot page, graphite, or plum.
 */
#inputPanel.is-open.is-settings-screen:has(#helpView:not([hidden])) {
  color-scheme: light;
  background: var(--light-page, #eee2d3) !important;
}

html.theme-dark #inputPanel.is-open.is-settings-screen:has(#helpView:not([hidden])),
body.theme-dark #inputPanel.is-open.is-settings-screen:has(#helpView:not([hidden])) {
  color-scheme: dark;
  background: #0b0d10 !important;
}

html.theme-twilight #inputPanel.is-open.is-settings-screen:has(#helpView:not([hidden])),
body.theme-twilight #inputPanel.is-open.is-settings-screen:has(#helpView:not([hidden])) {
  background: var(--twilight-chrome, #18121f) !important;
}

/* The same card geometry as Settings: while the two pages slide past each
 * other both are on screen, so neither may shift the other's padding. */
#inputPanel#inputPanel.is-open.is-menu-subview:has(> .menu-card > #helpView.guide-view:not([hidden])) > .menu-card {
  width: 100% !important;
  max-width: none !important;
  padding: var(--destination-page-top) 0 max(112px, calc(env(safe-area-inset-bottom) + 88px)) !important;
  overflow-x: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#inputPanel.is-open.is-settings-screen:has(#helpView:not([hidden]))::before,
#inputPanel.is-open.is-settings-screen:has(#helpView:not([hidden]))::after {
  content: none !important;
}

#inputPanel.home-ambient-active:has(#helpView:not([hidden])) .home-ambient-canvas {
  display: none !important;
}

/*
 * Guide theme tokens
 * ------------------
 * Light maps to the soft apricot tokens, Dark to the cool graphite surfaces
 * used by Settings, and Twilight to the shared plum tokens.
 */
#helpView.guide-view {
  --guide-gutter: var(--destination-page-gutter, clamp(18px, 4.9vw, 48px));
  --guide-ink: var(--light-ink, #302c29);
  --guide-muted: var(--light-muted, #685b51);
  --guide-soft: #8f7f72;
  --guide-surface: var(--light-raised, #f8f1e8);
  --guide-screen: #fffaf4;
  --guide-line: rgba(48, 44, 41, 0.085);
  --guide-line-strong: rgba(48, 44, 41, 0.16);
  --guide-track: rgba(48, 44, 41, 0.055);
  --guide-accent: var(--light-accent, #ad5734);
  --guide-accent-ink: var(--light-accent-ink, #85482f);
  --guide-hover: rgba(48, 44, 41, 0.035);
  --guide-shadow: 0 10px 28px rgba(104, 67, 42, 0.06);
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  max-width: calc(640px + 2 * var(--guide-gutter)) !important;
  margin: 0 !important;
  padding: 0 var(--guide-gutter) clamp(24px, 4vh, 40px) !important;
  display: grid !important;
  gap: 30px !important;
  align-content: start !important;
  color: var(--guide-ink) !important;
  background: transparent !important;
  font-family: var(--ui-font) !important;
}

html.theme-dark #helpView.guide-view,
body.theme-dark #helpView.guide-view {
  --guide-ink: rgb(242, 237, 227);
  --guide-muted: rgba(225, 218, 207, 0.7);
  --guide-soft: rgba(225, 218, 207, 0.46);
  --guide-surface: rgb(21, 23, 27);
  --guide-screen: rgb(12, 13, 16);
  --guide-line: rgba(242, 237, 227, 0.07);
  --guide-line-strong: rgba(242, 237, 227, 0.14);
  --guide-track: rgba(242, 237, 227, 0.055);
  --guide-accent: rgb(223, 93, 81);
  --guide-accent-ink: rgb(223, 93, 81);
  --guide-hover: rgba(242, 237, 227, 0.03);
  --guide-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
}

html.theme-twilight #helpView.guide-view,
body.theme-twilight #helpView.guide-view {
  --guide-ink: var(--twilight-ink, #f6ebdd);
  --guide-muted: var(--twilight-muted, #baa8ca);
  --guide-soft: rgba(186, 168, 202, 0.7);
  --guide-surface: var(--twilight-panel, #2a2036);
  --guide-screen: var(--twilight-chrome, #18121f);
  --guide-line: var(--twilight-line, #453b4f);
  --guide-line-strong: rgba(186, 168, 202, 0.28);
  --guide-track: rgba(24, 18, 31, 0.45);
  --guide-accent: var(--twilight-accent, #e58199);
  --guide-accent-ink: var(--twilight-accent, #e58199);
  --guide-hover: rgba(246, 235, 221, 0.035);
  --guide-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

/* The page layout above forces display: grid, so a hidden guide must be
   removed explicitly or it paints over Home and the other tabs. */
#helpView.guide-view[hidden] {
  display: none !important;
}

/*
 * Guide top bar
 * -------------
 * The back control matches the reading information pages: a fine chevron and
 * the name of the page it returns to, with no button chrome. Like the
 * Discover sub-page bar it sits in the page and scrolls away with it; a
 * pinned, opaque bar read as a dark band under the iPhone status bar.
 */
#helpView > .guide-topbar {
  margin: 0;
  padding: 0;
}

#helpView .guide-back {
  min-height: 44px;
  margin: 0 0 0 -8px;
  padding: 0 14px 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--guide-ink);
  font: 400 1rem/1.2 var(--ui-font);
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  transition: background-color 140ms ease;
}

#helpView .guide-back svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  #helpView .guide-back:hover {
    background: var(--guide-hover);
  }
}

#helpView .guide-back:focus-visible {
  outline: 2px solid var(--guide-accent);
  outline-offset: 2px;
}

/*
 * Guide masthead
 * --------------
 * The serif title and red letter match the other destinations.
 */
#helpView > .guide-masthead {
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

#helpView > .guide-masthead h2 {
  margin: 0;
  padding: 0 0 0.08em;
  color: var(--guide-ink);
  font-family: var(--heading-font);
  font-size: clamp(2.9rem, 12.4vw, 4.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
}

#helpView > .guide-masthead .brand-red-letter {
  color: var(--guide-accent) !important;
}

#helpView > .guide-masthead p {
  max-width: 30ch;
  margin: 0;
  color: var(--guide-muted);
  font-family: var(--ui-font);
  font-size: 1.02rem;
  font-weight: 450;
  line-height: 1.45;
}

/*
 * Sections and cards
 * ------------------
 */
#helpView .guide-stack {
  display: grid;
  gap: 30px;
}

#helpView .guide-section {
  min-width: 0;
  display: grid;
  gap: 10px;
}

#helpView .guide-label {
  margin: 0 0 0 2px;
  color: var(--guide-accent-ink);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#helpView .guide-card {
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--guide-line);
  border-radius: 18px;
  background: var(--guide-surface);
  box-shadow: var(--guide-shadow);
}

#helpView .guide-card p {
  margin: 0;
  color: var(--guide-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

#helpView .guide-note {
  margin: 2px 4px 0;
  color: var(--guide-soft);
  font-size: 0.8rem;
  line-height: 1.45;
}

/*
 * Two ways to read
 * ----------------
 * Small illustrations of the fixed Speed word and the marked Page word.
 */
#helpView .guide-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

#helpView .guide-mode {
  padding: 10px 10px 16px;
  display: grid;
  align-content: start;
  gap: 8px;
}

#helpView .guide-mode h4 {
  margin: 6px 4px 0;
  color: var(--guide-ink);
  font-family: var(--heading-font);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

#helpView .guide-mode p {
  margin: 0 4px;
  font-size: 0.82rem;
  line-height: 1.45;
}

#helpView .guide-art {
  position: relative;
  height: 86px;
  border-radius: 12px;
  background: var(--guide-track);
}

#helpView .guide-art-speed {
  display: grid;
  place-items: center;
}

/* Fine marks above and below the anchor letter, as on the Speed stage. */
#helpView .guide-art-speed::before,
#helpView .guide-art-speed::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1.5px;
  height: 9px;
  border-radius: 1px;
  background: var(--guide-line-strong);
  transform: translateX(-50%);
}

#helpView .guide-art-speed::before {
  top: 14px;
}

#helpView .guide-art-speed::after {
  bottom: 14px;
}

#helpView :is(.guide-speed-word, .guide-screen-word) {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  color: var(--guide-ink);
  font-family: var(--ui-font);
  font-size: 1.55rem;
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.005em;
}

#helpView :is(.guide-speed-word, .guide-screen-word) > span:first-child {
  text-align: right;
}

#helpView :is(.guide-speed-word, .guide-screen-word) b {
  color: var(--guide-accent);
  font-weight: inherit;
}

#helpView .guide-art-page {
  padding: 0 14px;
  display: grid;
  align-content: center;
  gap: 11px;
}

#helpView .guide-page-line {
  height: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 3px;
  background: var(--guide-line-strong);
}

#helpView .guide-page-line.is-short {
  width: 62%;
}

#helpView .guide-page-line:has(i) {
  height: auto;
  background: none;
}

#helpView .guide-page-line:has(i)::before,
#helpView .guide-page-line:has(i)::after {
  content: "";
  height: 5px;
  border-radius: 3px;
  background: var(--guide-line-strong);
}

#helpView .guide-page-line:has(i)::before {
  flex: 0 0 28%;
}

#helpView .guide-page-line:has(i)::after {
  flex: 1 1 auto;
}

#helpView .guide-page-line i {
  position: relative;
  color: var(--guide-ink);
  font-family: var(--page-reading-font, "Iowan Old Style", Georgia, serif);
  font-size: 0.98rem;
  font-style: normal;
  line-height: 1.1;
}

/* Page Mode's tapered red underline beneath the current word. */
#helpView .guide-page-line i::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--guide-accent) 18%, var(--guide-accent) 82%, transparent);
}

/*
 * Gesture lists
 * -------------
 */
#helpView .guide-gestures,
#helpView .guide-list {
  padding: 0;
  list-style: none;
}

#helpView .guide-gesture {
  min-height: 62px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

#helpView :is(.guide-gesture, .guide-list > li) + :is(.guide-gesture, .guide-list > li) {
  border-top: 1px solid var(--guide-line);
}

#helpView .guide-glyph {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--guide-track);
}

#helpView .guide-glyph::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--guide-accent);
  -webkit-mask: var(--guide-glyph) center / contain no-repeat;
  mask: var(--guide-glyph) center / contain no-repeat;
}

#helpView .guide-glyph-tap {
  --guide-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.4'/%3E%3Ccircle cx='12' cy='12' r='8' fill='none' stroke='%23000' stroke-width='1.6' stroke-opacity='.45'/%3E%3C/svg%3E");
}

#helpView .guide-glyph-hold {
  --guide-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Ccircle cx='12' cy='12' r='7.4' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='10.4' fill='none' stroke='%23000' stroke-width='1.2' stroke-opacity='.4'/%3E%3C/svg%3E");
}

#helpView .guide-glyph-sideways {
  --guide-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12h17M7.5 8l-4 4 4 4M16.5 8l4 4-4 4'/%3E%3C/svg%3E");
}

#helpView .guide-glyph-vertical {
  --guide-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5v17M8 7.5l4-4 4 4M8 16.5l4 4 4-4'/%3E%3C/svg%3E");
}

#helpView :is(.guide-copy, .guide-list > li) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#helpView :is(.guide-copy, .guide-list > li) strong {
  color: var(--guide-ink);
  font-size: 0.97rem;
  font-weight: 620;
  line-height: 1.25;
}

#helpView :is(.guide-copy, .guide-list > li) small {
  color: var(--guide-muted);
  font-size: 0.84rem;
  font-weight: 450;
  line-height: 1.42;
}

#helpView .guide-list > li {
  padding: 13px 16px;
}

/*
 * Around the reader
 * -----------------
 * A small reader screen with the four corner controls, beside their names.
 */
#helpView .guide-reader {
  padding: 14px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

#helpView .guide-screen {
  position: relative;
  aspect-ratio: 9 / 15;
  display: grid;
  place-items: center;
  border: 1px solid var(--guide-line-strong);
  border-radius: 16px;
  background: var(--guide-screen);
}

#helpView .guide-screen-word {
  font-size: 0.98rem;
}

#helpView .guide-corner {
  position: absolute;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--guide-ink);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.82;
}

#helpView .guide-corner.is-top-left { top: 9px; left: 8px; }
#helpView .guide-corner.is-top-right { top: 9px; right: 8px; }
#helpView .guide-corner.is-bottom-left { bottom: 9px; left: 8px; }
#helpView .guide-corner.is-bottom-right { right: 8px; bottom: 9px; }

#helpView .guide-corner .guide-accent-stroke {
  stroke: var(--guide-accent);
}

#helpView .guide-corners {
  margin: 0;
  display: grid;
  gap: 12px;
}

#helpView .guide-corners > div {
  display: grid;
  gap: 2px;
}

#helpView .guide-corners dt {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--guide-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A small corner mark shows which corner each name belongs to. */
#helpView .guide-corners dt::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 0 solid var(--guide-accent);
}

#helpView .guide-corners > div:nth-child(1) dt::before { border-width: 1.6px 0 0 1.6px; }
#helpView .guide-corners > div:nth-child(2) dt::before { border-width: 1.6px 1.6px 0 0; }
#helpView .guide-corners > div:nth-child(3) dt::before { border-width: 0 0 1.6px 1.6px; }
#helpView .guide-corners > div:nth-child(4) dt::before { border-width: 0 1.6px 1.6px 0; }

#helpView .guide-corners dd {
  margin: 0;
  color: var(--guide-ink);
  font-size: 0.88rem;
  line-height: 1.35;
}

/*
 * Who's speaking
 * --------------
 * app.js paints the sample with the reader's own speaker palette.
 */
#helpView .guide-speaking {
  padding: 14px 16px 16px;
  display: grid;
  gap: 10px;
}

#helpView .guide-card .guide-dialogue {
  margin: 0 0 2px;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  border-radius: 12px;
  background: var(--guide-track);
  color: var(--guide-muted);
  font-family: var(--page-reading-font, "Iowan Old Style", Georgia, serif);
  font-size: 0.96rem;
  line-height: 1.45;
}

#helpView .guide-dialogue q {
  color: var(--guide-voice-0, var(--guide-accent));
  quotes: "\201C" "\201D";
}

#helpView .guide-dialogue q[data-voice="1"] {
  color: var(--guide-voice-1, var(--guide-ink));
}

#helpView .guide-speaking em {
  color: var(--guide-ink);
  font-style: normal;
  font-weight: 620;
}

/*
 * Your books & privacy
 * --------------------
 */
#helpView .guide-privacy > p {
  padding: 14px 16px;
}

#helpView .guide-link {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  border-top: 1px solid var(--guide-line);
  border-radius: 0;
  background: transparent;
  color: var(--guide-accent-ink);
  font: 600 0.95rem/1.25 var(--ui-font);
  text-align: left;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  transition: background-color 140ms ease;
}

#helpView .guide-link svg {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  #helpView .guide-link:hover {
    background: var(--guide-hover);
  }
}

#helpView .guide-link:focus-visible {
  outline: 2px solid var(--guide-accent);
  outline-offset: -2px;
}

@media (min-width: 560px) {
  #helpView .guide-reader {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 22px;
  }
}


/*
 * Stats ownership
 * ===============
 *
 * This stylesheet owns the Stats page opened from Settings → Your reading
 * (#statsView): its page surface, masthead, period control, the period
 * summary and time chart, books, habit calendar, reading modes and
 * highlights. It loads after the reading guide but before shared shelf
 * geometry and the structural app shell. Components use the `journal-`
 * prefix so the retired dashboard rules still in styles.css cannot reach
 * them. Keep Settings, Help, reader,
 * bottom-navigation, splash and viewport rules out of this file. Controls
 * never take a pressed look.
 */

/*
 * Stats page surface
 * ------------------
 * The same plain canvas as Settings: apricot page, graphite, or plum.
 */
#inputPanel.is-open.is-settings-screen:has(#statsView:not([hidden])) {
  color-scheme: light;
  background: var(--light-page, #eee2d3) !important;
}

html.theme-dark #inputPanel.is-open.is-settings-screen:has(#statsView:not([hidden])),
body.theme-dark #inputPanel.is-open.is-settings-screen:has(#statsView:not([hidden])) {
  color-scheme: dark;
  background: #0b0d10 !important;
}

html.theme-twilight #inputPanel.is-open.is-settings-screen:has(#statsView:not([hidden])),
body.theme-twilight #inputPanel.is-open.is-settings-screen:has(#statsView:not([hidden])) {
  background: var(--twilight-chrome, #18121f) !important;
}

/* The same card geometry as Settings and the reading guide: while two pages
 * slide past each other both are on screen, so a page's own padding must not
 * depend on which page is beside it. */
#inputPanel#inputPanel.is-open.is-menu-subview:has(> .menu-card > #statsView.journal-view:not([hidden])) > .menu-card {
  width: 100% !important;
  max-width: none !important;
  padding: var(--destination-page-top) 0 max(112px, calc(env(safe-area-inset-bottom) + 88px)) !important;
  overflow-x: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#inputPanel.is-open.is-settings-screen:has(#statsView:not([hidden]))::before,
#inputPanel.is-open.is-settings-screen:has(#statsView:not([hidden]))::after {
  content: none !important;
}

#inputPanel.home-ambient-active:has(#statsView:not([hidden])) .home-ambient-canvas {
  display: none !important;
}

/*
 * Stats theme tokens
 * ------------------
 * Light maps to the soft apricot tokens, Dark to the cool graphite surfaces
 * used by Settings, and Twilight to the shared plum tokens.
 */
#statsView.journal-view {
  --journal-gutter: var(--destination-page-gutter, clamp(18px, 4.9vw, 48px));
  --journal-ink: var(--light-ink, #302c29);
  --journal-muted: var(--light-muted, #685b51);
  --journal-soft: #8f7f72;
  --journal-surface: var(--light-raised, #f8f1e8);
  --journal-surface-high: #fffaf4;
  --journal-line: rgba(48, 44, 41, 0.085);
  --journal-track: rgba(48, 44, 41, 0.07);
  --journal-bar: rgba(48, 44, 41, 0.2);
  --journal-bar-empty: rgba(48, 44, 41, 0.07);
  --journal-accent: var(--light-accent, #ad5734);
  --journal-accent-ink: var(--light-accent-ink, #85482f);
  --journal-shadow: 0 10px 28px rgba(104, 67, 42, 0.06);
  --journal-selected-shadow: 0 1px 3px rgba(83, 59, 38, 0.14);
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 var(--journal-gutter) clamp(24px, 4vh, 40px) !important;
  display: grid !important;
  gap: 22px !important;
  align-content: start !important;
  color: var(--journal-ink) !important;
  background: transparent !important;
  font-family: var(--ui-font) !important;
}

html.theme-dark #statsView.journal-view,
body.theme-dark #statsView.journal-view {
  --journal-ink: rgb(242, 237, 227);
  --journal-muted: rgba(225, 218, 207, 0.7);
  --journal-soft: rgba(225, 218, 207, 0.46);
  --journal-surface: rgb(21, 23, 27);
  --journal-surface-high: rgb(40, 43, 50);
  --journal-line: rgba(242, 237, 227, 0.07);
  --journal-track: rgba(242, 237, 227, 0.055);
  --journal-bar: rgba(242, 237, 227, 0.26);
  --journal-bar-empty: rgba(242, 237, 227, 0.07);
  --journal-accent: rgb(223, 93, 81);
  --journal-accent-ink: rgb(223, 93, 81);
  --journal-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
  --journal-selected-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html.theme-twilight #statsView.journal-view,
body.theme-twilight #statsView.journal-view {
  --journal-ink: var(--twilight-ink, #f6ebdd);
  --journal-muted: var(--twilight-muted, #baa8ca);
  --journal-soft: rgba(186, 168, 202, 0.7);
  --journal-surface: var(--twilight-panel, #2a2036);
  --journal-surface-high: var(--twilight-raised, #382944);
  --journal-line: var(--twilight-line, #453b4f);
  --journal-track: rgba(246, 235, 221, 0.07);
  --journal-bar: rgba(186, 168, 202, 0.38);
  --journal-bar-empty: rgba(186, 168, 202, 0.1);
  --journal-accent: var(--twilight-accent, #e58199);
  --journal-accent-ink: var(--twilight-accent, #e58199);
  --journal-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

/* Retired dashboard passes in styles.css still paint gradients, borders and
   shadows on #statsView in each theme; the doubled id outranks all of them. */
#statsView#statsView.journal-view {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#statsView#statsView.journal-view::before,
#statsView#statsView.journal-view::after {
  content: none !important;
}

/* The page layout above forces display: grid, so a hidden Stats page must be
   removed explicitly or it paints over Home and the other tabs. */
#statsView.journal-view[hidden] {
  display: none !important;
}

#statsView [hidden] {
  display: none !important;
}

#statsView.journal-view > * {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 !important;
}

/*
 * Stats top bar
 * -------------
 * The back control matches the reading guide: a fine chevron and the name of
 * the page it returns to (Home or Settings), with no button chrome. Like the
 * Discover sub-page bar it sits in the page and scrolls away with it; a
 * pinned, opaque bar read as a dark band under the iPhone status bar.
 */
#statsView#statsView.journal-view > .journal-topbar {
  margin: 0 0 18px !important;
  padding: 0;
}

#statsView .journal-back {
  min-height: 44px;
  margin: 0 0 0 -8px;
  padding: 0 14px 0 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--journal-ink);
  font: 400 1rem/1.2 var(--ui-font);
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  transition: background-color 140ms ease;
}

#statsView .journal-back svg {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  #statsView .journal-back:hover {
    background: var(--journal-track);
  }
}

#statsView .journal-back:focus-visible {
  outline: 2px solid var(--journal-accent);
  outline-offset: 2px;
}

/*
 * Stats masthead
 * --------------
 * The serif title and red letter match the other destinations.
 */
#statsView > .journal-masthead {
  margin: 0;
  padding: 0;
}

#statsView > .journal-masthead h2 {
  margin: 0 !important;
  padding: 0 0 0.08em !important;
  color: var(--journal-ink) !important;
  font-family: var(--heading-font) !important;
  font-size: clamp(2.9rem, 12.4vw, 4.6rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.025em !important;
  text-shadow: none !important;
}

#statsView > .journal-masthead .brand-red-letter {
  color: var(--journal-accent) !important;
}

/*
 * Period control
 * --------------
 * The Settings segmented control, full width.
 */
#statsView .journal-periods {
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  border-radius: 12px;
  background: var(--journal-track);
}

#statsView .journal-periods button {
  min-width: 0;
  height: 34px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--journal-muted);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 140ms ease, color 140ms ease;
  -webkit-tap-highlight-color: transparent;
}

#statsView .journal-periods button[aria-checked="true"] {
  background: var(--journal-surface-high);
  color: var(--journal-ink);
  box-shadow: var(--journal-selected-shadow);
}

#statsView :is(.journal-periods button, .journal-steps button):focus-visible {
  outline: 2px solid var(--journal-accent);
  outline-offset: 2px;
}

/*
 * Sections and cards
 * ------------------
 */
#statsView .journal-stack {
  display: grid;
  gap: 28px;
}

#statsView .journal-section {
  min-width: 0;
  display: grid;
  gap: 10px;
}

#statsView .journal-label {
  margin: 0 0 0 2px;
  color: var(--journal-accent-ink);
  font-family: var(--ui-font);
  font-size: 0.68rem;
  font-weight: 720;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#statsView .journal-card {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--journal-line);
  border-radius: 18px;
  background: var(--journal-surface);
  box-shadow: var(--journal-shadow);
}

#statsView .journal-card p {
  margin: 0;
}

#statsView .journal-empty-line,
#statsView .journal-footnote {
  color: var(--journal-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

#statsView .journal-empty-line {
  padding: 16px;
}

#statsView .journal-footnote {
  padding: 0 16px 14px 70px;
  color: var(--journal-soft);
  font-size: 0.8rem;
}

#statsView .journal-welcome {
  padding: 22px 20px 24px;
  display: grid;
  gap: 8px;
}

#statsView .journal-welcome strong {
  color: var(--journal-ink);
  font-family: var(--heading-font);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.12;
}

#statsView .journal-welcome p {
  max-width: 32ch;
  color: var(--journal-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/*
 * Period summary
 * --------------
 * The time read in serif, one sentence of context, and a single-colour chart
 * whose current day or month is the only accent.
 */
#statsView .journal-hero {
  padding: 16px 18px 16px;
  display: grid;
  gap: 4px;
}

#statsView .journal-hero-head {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#statsView .journal-steps {
  display: flex;
  gap: 4px;
  margin-right: -6px;
}

#statsView .journal-steps button {
  position: relative;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--journal-track);
  color: var(--journal-ink);
  cursor: pointer;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

#statsView .journal-steps button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-top: 1.7px solid currentColor;
  border-left: 1.7px solid currentColor;
  transform: translate(-35%, -50%) rotate(-45deg);
}

#statsView .journal-steps button[data-stats-step="-1"]::before {
  transform: translate(-65%, -50%) rotate(135deg);
}

#statsView .journal-steps button:disabled {
  opacity: 0.32;
  cursor: default;
}

#statsView .journal-hero-figure {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
}

#statsView .journal-hero-figure strong {
  color: var(--journal-ink);
  font-family: var(--heading-font);
  font-size: clamp(2.6rem, 11vw, 3.4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}

#statsView .journal-hero-figure span {
  color: var(--journal-muted);
  font-size: 0.95rem;
  font-weight: 500;
}

#statsView .journal-hero-detail {
  color: var(--journal-ink);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
}

#statsView .journal-hero-detail span {
  color: var(--journal-muted);
  font-weight: 450;
}

#statsView .journal-chart {
  margin: 14px 0 0;
  display: grid;
  gap: 10px;
}

#statsView .journal-chart-bars {
  height: 112px;
  display: grid;
  grid-template-columns: repeat(var(--journal-bars, 7), minmax(0, 1fr));
  align-items: end;
  gap: 6px;
}

#statsView .journal-chart.is-month .journal-chart-bars {
  gap: 2px;
}

#statsView .journal-chart-bars > span {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 16px;
  align-items: end;
  justify-items: center;
  gap: 6px;
}

#statsView .journal-chart-bars i {
  width: 100%;
  max-width: 26px;
  height: max(4px, calc(var(--bar, 0) * 100%));
  border-radius: 5px;
  background: var(--journal-bar);
}

#statsView .journal-chart.is-month .journal-chart-bars i {
  border-radius: 2px;
}

#statsView .journal-chart-bars .is-empty i {
  background: var(--journal-bar-empty);
}

#statsView .journal-chart-bars .is-future i {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--journal-bar-empty);
}

#statsView .journal-chart-bars .is-current i {
  background: var(--journal-accent);
}

#statsView .journal-chart-bars .is-current.is-empty i {
  background: var(--journal-accent);
  opacity: 0.35;
}

#statsView .journal-chart-bars small {
  color: var(--journal-soft);
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

#statsView .journal-chart-bars .is-current small {
  color: var(--journal-accent-ink);
}

#statsView .journal-chart figcaption {
  padding-top: 10px;
  border-top: 1px solid var(--journal-line);
  color: var(--journal-muted);
  font-size: 0.8rem;
  line-height: 1.4;
}

/*
 * Through time
 * ------------
 * The period's books on a line from their century to now, then by year.
 */
#statsView .journal-era {
  padding: 16px 16px 12px;
  display: grid;
  gap: 14px;
}

#statsView .journal-era-sentence {
  color: var(--journal-ink);
  font-family: var(--heading-font);
  font-size: 1.14rem;
  line-height: 1.3;
}

#statsView .journal-era-axis {
  position: relative;
  height: 58px;
  margin: 0 10px;
}

#statsView .journal-era-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 30px;
  height: 2px;
  border-radius: 1px;
  background: var(--journal-track);
}

#statsView .journal-era-axis i {
  position: absolute;
  left: var(--at);
  top: calc(31px - var(--row, 0) * 13px);
  width: 11px;
  height: 11px;
  border: 2px solid var(--journal-surface);
  border-radius: 50%;
  background: var(--journal-accent);
  transform: translate(-50%, -50%);
}

#statsView .journal-era-axis small {
  position: absolute;
  left: var(--at);
  bottom: 0;
  color: var(--journal-soft);
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translateX(-50%);
}

#statsView .journal-era-axis small.is-now {
  transform: translateX(-100%);
}

#statsView .journal-era-axis small.is-start {
  transform: none;
}

#statsView .journal-era-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

#statsView .journal-era-list li {
  padding: 10px 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  border-top: 1px solid var(--journal-line);
}

#statsView .journal-era-list span {
  color: var(--journal-accent-ink);
  font-size: 0.82rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

#statsView .journal-era-list strong {
  overflow: hidden;
  color: var(--journal-ink);
  font-family: var(--heading-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statsView .journal-era .journal-footnote {
  padding: 0 0 10px 84px;
}

/*
 * Voices you heard
 * ----------------
 * Speakers from verified classics, each in its reader colour, with a bar
 * scaled to the most-heard voice.
 */
#statsView .journal-voices {
  margin: 0;
  padding: 6px 0;
  list-style: none;
}

#statsView .journal-voices li {
  padding: 10px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
}

#statsView .journal-voice-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

#statsView .journal-voice-copy strong {
  overflow: hidden;
  color: var(--voice, var(--journal-ink));
  font-family: var(--heading-font);
  font-size: 1.08rem;
  font-weight: 400;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statsView .journal-voice-copy small {
  overflow: hidden;
  color: var(--journal-soft);
  font-size: 0.74rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statsView .journal-voice-lines {
  color: var(--journal-muted);
  font-size: 0.8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#statsView .journal-voice-bar {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--journal-track);
}

#statsView .journal-voice-bar i {
  display: block;
  width: var(--share, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--voice, var(--journal-bar));
}

#statsView .journal-voices + .journal-footnote {
  padding-left: 16px;
}

/*
 * Habit
 * -----
 * The streak, which days had reading, and when in the day it happened.
 */
#statsView .journal-habit > div {
  padding: 16px;
  display: grid;
  gap: 10px;
}

#statsView .journal-habit > div + div {
  border-top: 1px solid var(--journal-line);
}

#statsView .journal-streak {
  gap: 4px !important;
}

#statsView .journal-streak p {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

#statsView .journal-streak strong {
  color: var(--journal-ink);
  font-family: var(--heading-font);
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1;
}

#statsView .journal-streak span {
  color: var(--journal-ink);
  font-size: 0.95rem;
  font-weight: 600;
}

#statsView .journal-streak small {
  color: var(--journal-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

#statsView .journal-habit-days > p,
#statsView .journal-habit-hours > p {
  color: var(--journal-ink);
  font-size: 0.88rem;
  font-weight: 600;
}

#statsView .journal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  text-align: center;
}

#statsView .journal-month small {
  padding-bottom: 2px;
  color: var(--journal-soft);
  font-size: 0.68rem;
  font-weight: 600;
}

#statsView .journal-month span {
  aspect-ratio: 1;
  max-height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--journal-muted);
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#statsView .journal-month span:empty {
  visibility: hidden;
}

#statsView .journal-month span.is-read {
  background: color-mix(in srgb, var(--journal-accent) 20%, transparent);
  color: var(--journal-accent-ink);
}

#statsView .journal-month span.is-today:not(.is-read) {
  box-shadow: inset 0 0 0 1.5px var(--journal-accent);
  color: var(--journal-accent-ink);
}

#statsView .journal-month span.is-future {
  opacity: 0.4;
}

#statsView .journal-year {
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  grid-template-columns: repeat(var(--journal-weeks, 53), minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 2px;
}

#statsView .journal-year i {
  aspect-ratio: 1;
  border-radius: 1.5px;
  background: var(--journal-bar-empty);
}

#statsView .journal-year i.is-read {
  background: var(--journal-accent);
}

#statsView .journal-year i.is-later {
  opacity: 0.4;
}

#statsView .journal-year i.is-outside {
  background: transparent;
}

#statsView .journal-hours > div {
  height: 44px;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  align-items: end;
  gap: 2px;
}

#statsView .journal-hours i {
  height: max(3px, calc(var(--bar, 0) * 100%));
  border-radius: 2px;
  background: var(--journal-bar);
}

#statsView .journal-hours i.is-empty {
  background: var(--journal-bar-empty);
}

#statsView .journal-hours p {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#statsView .journal-hours small {
  color: var(--journal-soft);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

/*
 * How you read
 * ------------
 */
#statsView .journal-split {
  padding: 16px;
  display: grid;
  gap: 12px;
}

#statsView .journal-split-bar {
  height: 8px;
  display: flex;
  gap: 3px;
}

#statsView .journal-split-bar i {
  min-width: 0;
  height: 100%;
  border-radius: 4px;
  background: var(--journal-accent);
}

#statsView .journal-split-bar i:first-child {
  flex: 0 0 var(--page-share, 50%);
  background: var(--journal-bar);
}

#statsView .journal-split-bar i:last-child {
  flex: 1 1 auto;
}

#statsView .journal-split p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 16px;
  color: var(--journal-muted);
  font-size: 0.84rem;
}

#statsView .journal-split p span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

#statsView .journal-split p strong {
  color: var(--journal-ink);
  font-weight: 650;
}

#statsView .journal-split p i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--journal-accent);
}

#statsView .journal-split p i.is-page {
  background: var(--journal-bar);
}

/*
 * Rows
 * ----
 * The Settings row: label and detail on the left, value on the right.
 */
#statsView .journal-row {
  min-height: 54px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

#statsView .journal-card > * + .journal-row {
  border-top: 1px solid var(--journal-line);
}

#statsView .journal-row-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 3px;
}

#statsView .journal-row-copy strong {
  color: var(--journal-ink);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.25;
}

#statsView .journal-row-copy small {
  overflow: hidden;
  color: var(--journal-muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#statsView .journal-row-value {
  flex: none;
  color: var(--journal-ink);
  font-size: 0.94rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

#statsView .journal-sparkline {
  flex: none;
  width: 84px;
  height: 26px;
  overflow: visible;
}

#statsView .journal-sparkline path {
  fill: none;
  stroke: var(--journal-bar);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#statsView .journal-sparkline circle {
  fill: var(--journal-accent);
}

@media (prefers-reduced-motion: reduce) {
  #statsView .journal-periods button {
    transition: none;
  }
}


/* Unified editorial fallback artwork
 * -----------------------------------
 * Missing imagery reads as designed printed matter across Home, Library,
 * Discover, and Archives. True empty states share the line language without
 * borrowing a filled content cover, so absence remains visually distinct. */

.editorial-fallback-cover {
  --editorial-cover-bg: #46515d;
  --editorial-cover-ink: #f4eee4;
  --editorial-cover-line: rgba(244, 238, 228, 0.34);
  --editorial-cover-accent: #cf7968;
  --editorial-cover-material:
    repeating-linear-gradient(0deg, transparent 0 14px, color-mix(in srgb, var(--editorial-cover-ink) 2.5%, transparent) 15px),
    radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--editorial-cover-ink) 8%, transparent), transparent 36%),
    var(--editorial-cover-bg);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: inherit;
  padding: clamp(8px, 7%, 22px) !important;
  border: 0 !important;
  border-radius: inherit;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) minmax(22px, 27%) auto !important;
  place-items: initial !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(6px, 3%, 11px) !important;
  overflow: hidden !important;
  background: var(--editorial-cover-material) !important;
  color: var(--editorial-cover-ink) !important;
  box-shadow: none !important;
  text-align: left !important;
  container-type: inline-size;
}

.editorial-fallback-cover::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--editorial-cover-ink) 15%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.editorial-fallback-cover.is-coral {
  --editorial-cover-bg: #c87965;
  --editorial-cover-ink: #31211e;
  --editorial-cover-line: rgba(49, 33, 30, 0.32);
  --editorial-cover-accent: #7f3d38;
}

.editorial-fallback-cover.is-slate {
  --editorial-cover-bg: #46515d;
  --editorial-cover-ink: #f4eee4;
  --editorial-cover-line: rgba(244, 238, 228, 0.32);
  --editorial-cover-accent: #d89a86;
}

.editorial-fallback-cover.is-violet {
  --editorial-cover-bg: #5a4c60;
  --editorial-cover-ink: #f3ece3;
  --editorial-cover-line: rgba(243, 236, 227, 0.32);
  --editorial-cover-accent: #d4b47d;
}

.editorial-fallback-cover.is-parchment {
  --editorial-cover-bg: #e5d8bd;
  --editorial-cover-ink: #3e3730;
  --editorial-cover-line: rgba(62, 55, 48, 0.29);
  --editorial-cover-accent: #6d8981;
  --editorial-cover-material:
    linear-gradient(90deg, transparent 0 14%, rgba(171, 91, 77, 0.16) 14% calc(14% + 1px), transparent calc(14% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 15px, color-mix(in srgb, var(--editorial-cover-ink) 3.5%, transparent) 16px),
    radial-gradient(circle at 90% 8%, rgba(255, 255, 255, 0.28), transparent 34%),
    var(--editorial-cover-bg);
}

/* Research remains a light journal page in every theme. */
.editorial-fallback-cover.is-research {
  --editorial-cover-bg: #eee7d9;
  --editorial-cover-ink: #353535;
  --editorial-cover-line: rgba(53, 53, 53, 0.27);
  --editorial-cover-accent: #343a3d;
  --editorial-cover-material:
    radial-gradient(circle at 84% 6%, rgba(255, 255, 255, 0.58), transparent 32%),
    linear-gradient(145deg, #f5efe3, var(--editorial-cover-bg));
}

.editorial-fallback-cover.is-research .editorial-fallback-label {
  color: #4b4a47 !important;
  letter-spacing: 0.15em !important;
}

.editorial-fallback-cover.is-research .editorial-fallback-title {
  color: #343434 !important;
  font-size: clamp(0.72rem, 9.6cqi, 1.42rem) !important;
  line-height: 1.01 !important;
  -webkit-line-clamp: 5 !important;
}

.editorial-fallback-cover.is-research .editorial-fallback-meta {
  color: #4d4c49 !important;
  opacity: 0.76;
}

/* Archive covers share the same paper anatomy while retaining the faded
 * colour variation and accumulated-material feeling of a real archive. */
.editorial-fallback-cover.is-archive {
  --editorial-cover-bg: #e5d8bd;
  --editorial-cover-ink: #363431;
  --editorial-cover-line: rgba(54, 52, 49, 0.28);
  --editorial-cover-accent: #697f79;
  --editorial-cover-material:
    radial-gradient(circle at 88% 7%, rgba(255, 255, 255, 0.36), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb, var(--editorial-cover-bg) 88%, white), var(--editorial-cover-bg));
}

.editorial-fallback-cover.is-archive.is-red {
  --editorial-cover-bg: #965951;
  --editorial-cover-ink: #f2e8dd;
  --editorial-cover-line: rgba(242, 232, 221, 0.3);
  --editorial-cover-accent: #e0b4a5;
}

.editorial-fallback-cover.is-archive.is-coral {
  --editorial-cover-bg: #cd7c68;
  --editorial-cover-ink: #382923;
  --editorial-cover-line: rgba(56, 41, 35, 0.29);
  --editorial-cover-accent: #8a5748;
}

.editorial-fallback-cover.is-archive.is-amber {
  --editorial-cover-bg: #a9864f;
  --editorial-cover-ink: #f3ead8;
  --editorial-cover-line: rgba(243, 234, 216, 0.3);
  --editorial-cover-accent: #e0c78d;
}

.editorial-fallback-cover.is-archive.is-blue {
  --editorial-cover-bg: #6f8794;
  --editorial-cover-ink: #f1ece3;
  --editorial-cover-line: rgba(241, 236, 227, 0.29);
  --editorial-cover-accent: #c0d1d6;
}

.editorial-fallback-cover.is-archive.is-green {
  --editorial-cover-bg: #78816e;
  --editorial-cover-ink: #f1ece1;
  --editorial-cover-line: rgba(241, 236, 225, 0.28);
  --editorial-cover-accent: #b7c2a7;
}

.editorial-fallback-cover.is-archive.is-violet {
  --editorial-cover-bg: #675b6d;
  --editorial-cover-ink: #f2eaf0;
  --editorial-cover-line: rgba(242, 234, 240, 0.28);
  --editorial-cover-accent: #c7b0c9;
}

.editorial-fallback-cover.is-archive.is-graphite {
  --editorial-cover-bg: #383b3b;
  --editorial-cover-ink: #f1ebe0;
  --editorial-cover-line: rgba(241, 235, 224, 0.3);
  --editorial-cover-accent: #aeb3af;
}

.editorial-fallback-label,
.editorial-fallback-meta {
  position: relative;
  z-index: 1;
  min-width: 0 !important;
  overflow: hidden !important;
  display: block !important;
  color: inherit !important;
  font-family: var(--ui-font, system-ui, sans-serif) !important;
  font-style: normal !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editorial-fallback-label {
  padding: 0 0 7px !important;
  border-bottom: 1px solid var(--editorial-cover-line) !important;
  font-size: clamp(0.46rem, 5.2cqi, 0.68rem) !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  overflow: visible !important;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.editorial-fallback-cover.is-archive .editorial-fallback-label {
  overflow: visible !important;
  font-size: clamp(0.42rem, 4.7cqi, 0.64rem) !important;
  line-height: 1.08 !important;
  letter-spacing: 0.09em !important;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}

.editorial-fallback-title {
  position: relative;
  z-index: 1;
  min-width: 0 !important;
  align-self: start !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  color: inherit !important;
  font-family: var(--reading-font, Georgia, serif) !important;
  font-size: clamp(0.78rem, 11cqi, 1.72rem) !important;
  font-weight: 480 !important;
  letter-spacing: -0.025em !important;
  line-height: 0.99 !important;
  text-align: left !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 4 !important;
}

.editorial-fallback-meta {
  font-size: clamp(0.43rem, 4.2cqi, 0.62rem) !important;
  font-weight: 560 !important;
  letter-spacing: 0.035em !important;
  line-height: 1.1 !important;
  opacity: 0.78;
}

/* Archive source families have intentionally different page constructions,
 * not merely different labels and colours. */
.editorial-fallback-cover.is-archive.is-letter {
  border-radius: 3px 8px 8px 3px;
  grid-template-rows: auto minmax(0, 1fr) minmax(24px, 23%) auto !important;
}

.editorial-fallback-cover.is-archive.is-letter::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 18%;
  aspect-ratio: 1;
  background:
    linear-gradient(225deg, color-mix(in srgb, var(--editorial-cover-ink) 14%, transparent) 0 48%, transparent 49%),
    linear-gradient(45deg, color-mix(in srgb, var(--editorial-cover-bg) 76%, white) 0 49%, transparent 50%);
  filter: drop-shadow(-2px 3px 3px color-mix(in srgb, var(--editorial-cover-ink) 10%, transparent));
}

.editorial-fallback-cover.is-archive.is-letter .editorial-fallback-title {
  max-width: 82%;
  align-self: center !important;
  font-style: italic;
}

.editorial-fallback-cover.is-archive.is-diary {
  padding-left: clamp(14px, 13%, 28px) !important;
  border-radius: 4px 9px 9px 4px;
}

.editorial-fallback-cover.is-archive.is-diary::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8%;
  border-right: 1px solid color-mix(in srgb, var(--editorial-cover-ink) 22%, transparent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--editorial-cover-ink) 46%, transparent) 0 1px, transparent 1.5px) center 10px / 100% 16px repeat-y,
    color-mix(in srgb, var(--editorial-cover-accent) 46%, transparent);
}

.editorial-fallback-cover.is-archive.is-speech {
  border-radius: 9px;
}

.editorial-fallback-cover.is-archive.is-speech::before {
  content: "“";
  position: absolute;
  z-index: 0;
  bottom: 22%;
  left: 50%;
  color: var(--editorial-cover-accent);
  font: 400 clamp(2.1rem, 28cqi, 4.4rem)/0.7 var(--reading-font, Georgia, serif);
  opacity: 0.28;
  transform: translateX(-50%);
}

.editorial-fallback-cover.is-archive.is-speech :is(
  .editorial-fallback-label,
  .editorial-fallback-title,
  .editorial-fallback-meta
) {
  text-align: center !important;
}

.editorial-fallback-cover.is-archive.is-speech .editorial-fallback-title {
  align-self: center !important;
}

.editorial-fallback-cover.is-archive.is-newspaper {
  border-radius: 2px;
  grid-template-rows: auto minmax(0, 0.8fr) minmax(34px, 34%) auto !important;
}

.editorial-fallback-cover.is-archive.is-newspaper .editorial-fallback-label {
  padding-top: 5px !important;
  border-top: 2px double var(--editorial-cover-line) !important;
  border-bottom-style: double !important;
  text-align: center !important;
}

.editorial-fallback-cover.is-archive.is-newspaper .editorial-fallback-title {
  font-size: clamp(0.76rem, 10cqi, 1.48rem) !important;
  font-weight: 620 !important;
  line-height: 0.94 !important;
}

.editorial-fallback-cover.is-archive.is-map {
  border-radius: 6px;
  grid-template-rows: auto minmax(38px, 1fr) auto auto !important;
}

.editorial-fallback-cover.is-archive.is-map .editorial-fallback-motif {
  grid-row: 2;
  min-height: 44px !important;
  align-self: stretch !important;
}

.editorial-fallback-cover.is-archive.is-map .editorial-fallback-title {
  grid-row: 3;
  padding-top: 6px;
  border-top: 1px solid var(--editorial-cover-line);
  font-size: clamp(0.7rem, 8.6cqi, 1.28rem) !important;
  -webkit-line-clamp: 3 !important;
}

.editorial-fallback-cover.is-archive.is-map .editorial-fallback-meta {
  grid-row: 4;
}

.editorial-fallback-cover.is-archive.is-transcript {
  border-radius: 4px;
  grid-template-rows: auto minmax(0, 1fr) minmax(34px, 34%) auto !important;
}

.editorial-fallback-cover.is-archive.is-transcript::before {
  content: none;
}

.editorial-fallback-cover.is-archive.is-transcript .editorial-fallback-title {
  max-width: 88%;
  font-size: clamp(0.72rem, 9.2cqi, 1.34rem) !important;
}

.editorial-fallback-cover.is-archive.is-witness {
  border-radius: 5px;
  grid-template-rows: auto minmax(0, 1fr) minmax(28px, 27%) auto !important;
}

.editorial-fallback-cover.is-archive.is-witness::before {
  content: none;
}

.editorial-fallback-cover.is-archive.is-record {
  border-radius: 7px 3px 7px 7px;
}

.editorial-fallback-cover.is-archive.is-record::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 22%;
  right: 0;
  width: 10%;
  height: 15%;
  border: 1px solid color-mix(in srgb, var(--editorial-cover-ink) 16%, transparent);
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: color-mix(in srgb, var(--editorial-cover-bg) 82%, white);
  box-shadow:
    0 160% 0 color-mix(in srgb, var(--editorial-cover-bg) 78%, white),
    0 320% 0 color-mix(in srgb, var(--editorial-cover-bg) 74%, white);
}

.editorial-fallback-cover.is-archive.is-record .editorial-fallback-label {
  padding-right: 13% !important;
}

.editorial-fallback-motif {
  position: relative !important;
  z-index: 1;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 22px !important;
  align-self: end !important;
  display: block !important;
  overflow: hidden !important;
  color: inherit !important;
  opacity: 0.82;
}

.editorial-fallback-motif > i {
  position: absolute;
  display: block !important;
  height: 1px;
  background: var(--editorial-cover-line) !important;
}

.editorial-fallback-motif.is-book > i {
  display: none !important;
}

.editorial-fallback-waves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--editorial-cover-line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.editorial-fallback-motif.is-book::after {
  content: "";
  position: absolute;
  right: 8%;
  top: 2%;
  bottom: auto;
  width: 17%;
  aspect-ratio: 1;
  border: 1px solid var(--editorial-cover-line);
  border-radius: 50%;
}

.editorial-fallback-motif.is-article {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, 1px);
  align-content: space-between;
  gap: 5px 10px;
}

.editorial-fallback-motif.is-article > i {
  position: static;
  width: 100%;
}

.editorial-fallback-motif.is-article > i:nth-child(3n) { width: 70%; }

.editorial-fallback-motif.is-research {
  padding-top: 10px;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
  column-gap: 8px;
  border: 0;
  background: none;
}

.editorial-fallback-motif.is-research::before {
  content: "ABSTRACT";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--editorial-cover-ink);
  font: 760 clamp(0.34rem, 3.4cqi, 0.48rem)/1 var(--ui-font, system-ui, sans-serif);
  letter-spacing: 0.13em;
  opacity: 0.78;
}

.editorial-fallback-motif.is-research::after {
  content: "";
  position: absolute;
  top: 10%;
  bottom: 0;
  right: var(--research-divider-right, 50%);
  width: 1px;
  background: var(--editorial-cover-line);
}

.editorial-fallback-graph {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--research-graph-width, 43%);
  height: var(--research-graph-height, 60%);
  overflow: visible;
  fill: var(--editorial-cover-accent);
  stroke: var(--editorial-cover-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.editorial-fallback-graph-axis {
  fill: none;
  stroke: var(--editorial-cover-line);
  stroke-width: 1;
}

.editorial-fallback-graph-line {
  fill: none;
}

.editorial-fallback-paper-column {
  min-width: 0;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0;
}

.editorial-fallback-paper-column.is-figure {
  min-height: 0;
  height: 26%;
  align-self: start;
  justify-content: space-between;
}

.editorial-fallback-paper-column > i {
  width: 100%;
  height: 1px;
  display: block !important;
  border: 0;
  border-radius: 0;
  background: var(--editorial-cover-line) !important;
}

.editorial-fallback-paper-column > i:nth-child(3n) { width: 78%; }
.editorial-fallback-paper-column > i:nth-child(4n) { width: 91%; }
.editorial-fallback-paper-column > i:last-child { width: 68%; }

/* Home and Library share one scientific-paper construction. Their outer card
 * sizes differ, but the paper padding, rows, material, and figure do not. */
:is(
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-book-cover,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-cover,
  #collectionView .library-grid-cover,
  #collectionView .library-feature-cover,
  #collectionView .collection-cover
).editorial-fallback-cover.is-research {
  --research-divider-right: 50%;
  --research-graph-width: 44%;
  --research-graph-height: 68%;
  padding: clamp(7px, 7%, 16px) !important;
  border-radius: 4px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) clamp(42px, 34cqi, 62px) auto !important;
  place-items: initial !important;
  align-content: stretch !important;
  justify-items: stretch !important;
  gap: clamp(4px, 3%, 8px) !important;
  background: var(--editorial-cover-material) !important;
  color: var(--editorial-cover-ink) !important;
  text-align: left !important;
}

:is(
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-book-cover,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-cover,
  #collectionView .library-grid-cover,
  #collectionView .library-feature-cover,
  #collectionView .collection-cover
).editorial-fallback-cover.is-research > .editorial-fallback-title {
  font-size: clamp(0.64rem, 8.5cqi, 1.28rem) !important;
  line-height: 0.98 !important;
  -webkit-line-clamp: 6 !important;
}

:is(
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-book-cover,
  #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-cover,
  #collectionView .library-grid-cover,
  #collectionView .library-feature-cover,
  #collectionView .collection-cover
).editorial-fallback-cover.is-research > .editorial-fallback-motif {
  min-height: clamp(42px, 34cqi, 62px) !important;
  height: clamp(42px, 34cqi, 62px) !important;
  max-width: none !important;
  display: grid !important;
  overflow: hidden !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
}

.editorial-fallback-motif.is-archive {
  display: grid !important;
  grid-template-rows: repeat(5, 1px);
  align-content: end;
  gap: 5px;
}

.editorial-fallback-motif.is-archive > i {
  position: static;
  width: 100%;
}

.editorial-fallback-motif.is-archive > i:nth-child(2) { width: 86%; }
.editorial-fallback-motif.is-archive > i:nth-child(4) { width: 92%; }
.editorial-fallback-motif.is-archive > i:nth-child(5) { width: 63%; }
.editorial-fallback-motif.is-archive > i:nth-child(n + 6) { display: none !important; }

.editorial-fallback-motif.is-archive.is-letter {
  transform: none;
}

.editorial-fallback-motif.is-archive.is-letter::after {
  content: "Yours always,";
  position: absolute;
  right: 4%;
  bottom: 1%;
  width: 44%;
  min-height: 11px;
  padding-top: 4px;
  border-top: 1px solid var(--editorial-cover-accent);
  color: var(--editorial-cover-accent);
  font: italic clamp(0.3rem, 3cqi, 0.46rem)/1 var(--reading-font, Georgia, serif);
  text-align: right;
  transform: rotate(-3deg);
}

.editorial-fallback-motif.is-archive.is-diary {
  padding-left: 7%;
  border-left: 3px double var(--editorial-cover-accent);
  background: repeating-linear-gradient(0deg, transparent 0 7px, color-mix(in srgb, var(--editorial-cover-accent) 24%, transparent) 8px);
}

.editorial-fallback-motif.is-archive.is-speech > i {
  margin-inline: auto;
}

.editorial-fallback-motif.is-archive.is-speech > i:nth-child(odd) { width: 72%; }
.editorial-fallback-motif.is-archive.is-speech > i:nth-child(even) { width: 92%; }

.editorial-fallback-motif.is-archive.is-newspaper {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, 1px);
  column-gap: 10%;
  border-top: 3px double var(--editorial-cover-line);
  padding-top: 7px;
}

.editorial-fallback-motif.is-archive.is-newspaper > i {
  width: 100%;
}

.editorial-fallback-motif.is-archive.is-map {
  background:
    radial-gradient(ellipse at 28% 56%, transparent 0 18%, var(--editorial-cover-line) 19% 20%, transparent 21% 31%, var(--editorial-cover-line) 32% 33%, transparent 34% 43%, var(--editorial-cover-line) 44% 45%, transparent 46%),
    radial-gradient(ellipse at 78% 42%, transparent 0 13%, var(--editorial-cover-line) 14% 15%, transparent 16% 26%, var(--editorial-cover-line) 27% 28%, transparent 29% 38%, var(--editorial-cover-line) 39% 40%, transparent 41%);
}

.editorial-fallback-motif.is-archive.is-map > i {
  display: none !important;
}

.editorial-fallback-motif.is-archive.is-witness::after {
  content: "OFFICIAL";
  position: absolute;
  right: 6%;
  bottom: 8%;
  width: 28%;
  aspect-ratio: 1;
  border: 2px double var(--editorial-cover-accent);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--editorial-cover-accent);
  font: 760 clamp(0.25rem, 2.5cqi, 0.38rem)/1 var(--ui-font, system-ui, sans-serif);
  letter-spacing: 0.05em;
  opacity: 0.72;
  transform: rotate(-7deg);
}

.editorial-fallback-motif.is-archive.is-transcript {
  grid-template-columns: 30% minmax(0, 1fr);
  grid-template-rows: repeat(4, 1px);
  column-gap: 10%;
  row-gap: 6px;
  align-content: end;
}

.editorial-fallback-motif.is-archive.is-transcript > i {
  width: 100%;
}

.editorial-fallback-motif.is-archive.is-transcript > i:nth-child(odd) {
  width: 66%;
  background: var(--editorial-cover-accent) !important;
}

.editorial-fallback-motif.is-archive.is-record {
  grid-template-columns: 34% minmax(0, 1fr);
  grid-template-rows: repeat(3, 1px);
  column-gap: 8%;
  row-gap: 8px;
}

.editorial-fallback-motif.is-archive.is-record > i:nth-child(odd) {
  width: 72%;
  background: var(--editorial-cover-accent) !important;
}

.editorial-empty-art {
  box-sizing: border-box;
  width: clamp(74px, 18vw, 104px);
  aspect-ratio: 0.78;
  display: grid !important;
  place-items: center !important;
  color: color-mix(in srgb, currentColor 58%, transparent);
}

.editorial-empty-art.is-compact {
  width: 48px;
}

.editorial-empty-sheet {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 62%;
  height: 78%;
  padding: 18% 14%;
  border: 1px solid currentColor;
  border-radius: 3px;
  display: grid !important;
  align-content: space-between !important;
  gap: 5px;
  background: transparent !important;
  opacity: 0.74;
}

.editorial-empty-sheet::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -1px;
  right: -1px;
  width: 28%;
  aspect-ratio: 1;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  background: var(--editorial-empty-surface, transparent);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  opacity: 0.8;
}

.editorial-empty-sheet > i {
  width: 100%;
  height: 1px;
  display: block !important;
  background: currentColor !important;
}

.editorial-empty-sheet > i:nth-child(2) { width: 72%; }
.editorial-empty-sheet > i:nth-child(3) { margin-top: auto; }
.editorial-empty-sheet > i:nth-child(4) { width: 82%; }

/* Shelf covers have very little vertical room. Preserve the source-specific
 * motif, but remove its upper rules so long titles cannot run into them. */
@container (max-width: 124px) {
  .editorial-fallback-motif:is(.is-article, .is-archive, .is-research) > i:nth-child(-n + 2) {
    display: none !important;
  }

  .editorial-fallback-motif.is-article {
    grid-template-rows: repeat(3, 1px);
    align-content: end;
  }

  .editorial-fallback-motif.is-archive {
    grid-template-rows: repeat(3, 1px);
    align-content: end;
  }

  .editorial-fallback-motif.is-archive:is(.is-newspaper, .is-record, .is-transcript) {
    grid-template-rows: repeat(2, 1px);
  }

  .editorial-fallback-motif.is-archive.is-newspaper {
    padding-top: 0;
    border-top: 0;
  }

  .editorial-fallback-motif.is-research {
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
  }

  .editorial-fallback-paper-column > i:first-child {
    display: none !important;
  }

  .editorial-fallback-paper-column.is-primary > i:nth-child(n + 6) {
    display: none !important;
  }

  .editorial-fallback-paper-column.is-primary {
    justify-content: space-between;
  }

  .editorial-fallback-paper-column.is-figure {
    justify-content: space-between;
  }

  .editorial-fallback-waves > path:nth-child(-n + 2),
  .editorial-fallback-motif.is-book::after {
    display: none;
  }
}

@container (max-width: 86px) {
  .editorial-fallback-cover {
    padding: 7px !important;
    grid-template-rows: auto minmax(0, 1fr) 20px auto !important;
    gap: 5px !important;
  }

  .editorial-fallback-label {
    padding-bottom: 5px !important;
    font-size: 0.42rem !important;
  }

  .editorial-fallback-title {
    font-size: clamp(0.66rem, 12cqi, 0.78rem) !important;
    -webkit-line-clamp: 3 !important;
  }

  .editorial-fallback-meta {
    display: none !important;
  }

  .editorial-fallback-motif {
    min-height: 18px !important;
  }

  .editorial-fallback-cover.is-archive:is(
    .is-diary,
    .is-letter,
    .is-map,
    .is-newspaper,
    .is-record,
    .is-speech,
    .is-transcript,
    .is-witness
  ) .editorial-fallback-label {
    font-size: 0.34rem !important;
    line-height: 1.05 !important;
    letter-spacing: 0.04em !important;
  }

  .editorial-fallback-cover.is-archive:is(
    .is-diary,
    .is-letter,
    .is-map,
    .is-newspaper,
    .is-record,
    .is-speech,
    .is-transcript,
    .is-witness
  ) .editorial-fallback-title {
    font-size: 0.64rem !important;
    line-height: 0.99 !important;
    -webkit-line-clamp: 3 !important;
  }

  .editorial-fallback-cover.is-research .editorial-fallback-label {
    font-size: 0.37rem !important;
    letter-spacing: 0.09em !important;
  }

  .editorial-fallback-cover.is-research .editorial-fallback-title {
    font-size: 0.6rem !important;
    line-height: 0.97 !important;
    -webkit-line-clamp: 4 !important;
  }

  .editorial-fallback-motif.is-research {
    padding-top: 0;
    grid-template-rows: minmax(0, 1fr);
    column-gap: 6px;
  }

  .editorial-fallback-motif.is-research::before {
    display: none;
  }

  .editorial-fallback-paper-column.is-primary {
    justify-content: space-between;
  }

  .editorial-fallback-paper-column.is-figure {
    justify-content: space-between;
  }

  :is(
    #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-book-cover,
    #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-cover,
    #collectionView .library-grid-cover,
    #collectionView .library-feature-cover,
    #collectionView .collection-cover
  ).editorial-fallback-cover.is-research {
    grid-template-rows: auto minmax(0, 1fr) 38px auto !important;
  }

  :is(
    #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-book-cover,
    #inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden])) .home-progress-cover,
    #collectionView .library-grid-cover,
    #collectionView .library-feature-cover,
    #collectionView .collection-cover
  ).editorial-fallback-cover.is-research > .editorial-fallback-motif {
    min-height: 38px !important;
    height: 38px !important;
  }
}


/*
 * Shared swipeable shelf ownership
 * =================================
 *
 * Every horizontal shelf uses the same edge-bleed geometry. Destination files
 * provide their content gutter; this file owns scrollport width, outer bleed,
 * resting start alignment, and scroll padding. Safari compositor safeguards
 * remain in styles/app-shell.css.
 */

/*
 * Swipeable shelf blueprint
 * -------------------------
 * On compact app screens the scrollport expands by the destination's real page
 * gutters, so artwork reaches the physical edges without a viewport-wide
 * composited layer. Equal leading padding places the first item's left edge on
 * the same content line as the section hero. Add `.app-shelf-rail` to future
 * horizontal shelves instead of inventing viewport-unit negative margins.
 */
.app-shelf-rail {
  --app-shelf-bleed-start: 20px;
  --app-shelf-bleed-end: 20px;
  --app-shelf-start-space: var(--app-shelf-bleed-start);
  --app-shelf-end-space: max(var(--app-shelf-bleed-end), env(safe-area-inset-right));
  box-sizing: border-box;
  width: calc(100% + var(--app-shelf-bleed-start) + var(--app-shelf-bleed-end));
  max-width: none;
  margin-inline-start: calc(-1 * var(--app-shelf-bleed-start));
  margin-inline-end: calc(-1 * var(--app-shelf-bleed-end));
  padding-inline-start: var(--app-shelf-start-space);
  padding-inline-end: var(--app-shelf-end-space);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scroll-padding-inline-start: var(--app-shelf-start-space);
  scroll-padding-inline-end: var(--app-shelf-end-space);
  scrollbar-width: none;
}
.app-shelf-rail::-webkit-scrollbar {
  display: none;
}

/* Buttons globally opt out of browser panning because most app controls own
 * their gesture. Shelf cards are different: a gesture that starts on their
 * artwork must remain native scrolling until it resolves as a tap. */
.app-shelf-rail button {
  touch-action: pan-x pan-y !important;
}

/* Each destination exposes its real content gutter. Pulling by that known
 * value avoids the viewport-unit momentum-scroll layer that destabilised
 * WebKit, while the equal leading padding keeps the first item hero-aligned. */
#inputPanel .app-shelf-rail {
  --app-shelf-bleed-start: var(--home-page-gutter, var(--destination-page-gutter, 20px));
  --app-shelf-bleed-end: var(--home-page-gutter, var(--destination-page-gutter, 20px));
}

#collectionView .app-shelf-rail {
  --app-shelf-bleed-start: var(--library-gutter, var(--destination-page-gutter, 20px));
  --app-shelf-bleed-end: var(--library-gutter, var(--destination-page-gutter, 20px));
}

#gutenbergView .app-shelf-rail,
#pubmedView .app-shelf-rail,
#discoverPanel .app-shelf-rail,
#topicDiscoveryPanel .app-shelf-rail {
  --app-shelf-bleed-start: max(20px, env(safe-area-inset-left));
  --app-shelf-bleed-end: max(20px, env(safe-area-inset-right));
}

#bookDetailsPanel .app-shelf-rail {
  --app-shelf-bleed-start: clamp(22px, 5.5vw, 58px);
  --app-shelf-bleed-end: clamp(22px, 5.5vw, 58px);
}

#discoverPreviewPanel .app-shelf-rail {
  --app-shelf-bleed-start: max(24px, env(safe-area-inset-left));
  --app-shelf-bleed-end: max(24px, env(safe-area-inset-right));
}

#inputPanel .app-shelf-rail,
#collectionView .app-shelf-rail,
#gutenbergView .app-shelf-rail,
#pubmedView .app-shelf-rail,
#discoverPanel .app-shelf-rail,
#topicDiscoveryPanel .app-shelf-rail,
#bookDetailsPanel .app-shelf-rail,
#discoverPreviewPanel .app-shelf-rail {
  width: calc(100% + var(--app-shelf-bleed-start) + var(--app-shelf-bleed-end)) !important;
  max-width: none !important;
  margin-inline-start: calc(-1 * var(--app-shelf-bleed-start)) !important;
  margin-inline-end: calc(-1 * var(--app-shelf-bleed-end)) !important;
  padding-inline-start: var(--app-shelf-start-space) !important;
  padding-inline-end: var(--app-shelf-end-space) !important;
  scroll-padding-inline-start: var(--app-shelf-start-space) !important;
  scroll-padding-inline-end: var(--app-shelf-end-space) !important;
  clip-path: none !important;
  contain: none !important;
}

@media (max-width: 620px) {
  #bookDetailsPanel .app-shelf-rail,
  #discoverPreviewPanel .app-shelf-rail {
    --app-shelf-bleed-start: max(20px, env(safe-area-inset-left));
    --app-shelf-bleed-end: max(20px, env(safe-area-inset-right));
  }
}

.app-shelf-rail > :first-child {
  margin-inline-start: 0 !important;
  scroll-margin-inline-start: 0;
}

#inputPanel .home-progress-rail.app-shelf-rail.is-empty {
  width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  scroll-padding-inline: 0 !important;
}

/* This research group becomes a swipeable shelf only at compact widths. */
@media (min-width: 761px) {
  #discoverPanel .discover-research-shelf > .app-shelf-rail {
    width: 100% !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
    overflow-x: visible !important;
    scroll-padding-inline: 0 !important;
  }
}

#inputPanel.is-open:has(> .menu-card > #menuMain:not([hidden]))
  .home-progress-rail.app-shelf-rail:not(.is-empty) {
  --app-shelf-bleed-start: var(--home-page-gutter, var(--destination-page-gutter, 20px));
  --app-shelf-bleed-end: var(--home-page-gutter, var(--destination-page-gutter, 20px));
  --app-shelf-start-space: var(--app-shelf-bleed-start);
  width: calc(100% + var(--app-shelf-bleed-start) + var(--app-shelf-bleed-end)) !important;
  max-width: none !important;
  margin-inline-start: calc(-1 * var(--app-shelf-bleed-start)) !important;
  margin-inline-end: calc(-1 * var(--app-shelf-bleed-end)) !important;
  padding-inline-start: var(--app-shelf-start-space) !important;
  padding-inline-end: var(--app-shelf-end-space) !important;
  overflow-x: auto !important;
  scroll-padding-inline-start: var(--app-shelf-start-space) !important;
  scroll-padding-inline-end: var(--app-shelf-end-space) !important;
  clip-path: none !important;
  contain: none !important;
}


/* PDF document-surface ownership
 * ------------------------------
 * This file owns the original-document canvas and selectable text. The bottom
 * speed/pages/transport stack is the mounted RSVP dock owned by
 * components/reader-controls.css; the reader corners and view switch join it.
 */

body.pdf-source-mode {
  overflow: hidden;
}

/* The viewer's ground colour. Chrome fades into it over the page. */
body {
  --pdf-chrome-scrim: #0e1013;
}
html:not(.theme-dark) body:not(.theme-dark) {
  --pdf-chrome-scrim: var(--light-page, #eee2d3);
}
html.theme-twilight body.theme-twilight {
  --pdf-chrome-scrim: var(--twilight-chrome, #18121f);
}

#pdfSourcePanel.pdf-source-panel {
  --pdf-viewer-surface: #e5e8ec;
  --pdf-viewer-surface-deep: #d9dde2;
  --pdf-viewer-ink: rgba(30, 34, 39, 0.9);
  --pdf-viewer-muted: rgba(66, 73, 82, 0.68);
  position: fixed;
  inset: 0;
  z-index: 147;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -18%, rgba(255, 255, 255, 0.7), transparent 46%),
    linear-gradient(180deg, var(--pdf-viewer-surface), var(--pdf-viewer-surface-deep));
  color: var(--pdf-viewer-ink);
  touch-action: none;
}

#pdfSourcePanel[hidden],
body:not(.pdf-source-mode) #pdfSourcePanel {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#pdfSourcePanel .pdf-source-sheet {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
  background: transparent;
}

#pdfSourcePanel #pdfSourceFrame.pdf-source-frame {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: auto !important;
  height: auto !important;
  min-height: 120px !important;
  margin: 0 !important;
  display: block !important;
  overflow: hidden !important;
  background: transparent !important;
  touch-action: none;
  overscroll-behavior: contain;
}

#pdfSourcePanel .pdf-source-page-wrap {
  position: absolute;
  top: calc(50% + var(--pdf-page-center-offset, 0px));
  left: 50%;
  margin: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 3px;
  background: #fff;
  box-shadow:
    0 24px 54px rgba(36, 43, 51, 0.2),
    0 4px 14px rgba(36, 43, 51, 0.12),
    0 0 0 1px rgba(36, 43, 51, 0.1);
  transform: translate(-50%, -50%) translate3d(0, 0, 0);
  transform-origin: 50% 50%;
  touch-action: none;
}

#pdfSourcePanel .pdf-source-page-wrap[hidden] {
  display: none;
}

#pdfSourcePanel .pdf-source-page-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #fff;
}

/* Preserve selectable PDF.js text without painting a ghost copy over the
 * rendered page. Dedicated selection backgrounds remain visible. */
#pdfSourcePanel .pdf-source-text-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: transparent;
  touch-action: none;
  user-select: text;
  -webkit-user-select: text;
}

#pdfSourcePanel .pdf-source-text-word {
  color: transparent !important;
  text-shadow: none !important;
}

#pdfSourcePanel .pdf-source-status {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 24px;
  display: grid;
  place-items: center;
  color: var(--pdf-viewer-muted);
  font-family: var(--ui-font);
  font-size: 0.9rem;
  font-weight: 540;
  line-height: 1.4;
  text-align: center;
}

#pdfSourcePanel.has-visible-page .pdf-source-status:empty {
  display: none;
}

/* The bottom control stack is intentionally absent from this file. Shared
 * RSVP/PDF geometry and visuals live in components/reader-controls.css. */

html.theme-dark #pdfSourcePanel.pdf-source-panel,
body.theme-dark #pdfSourcePanel.pdf-source-panel {
  --pdf-viewer-surface: #15171b;
  --pdf-viewer-surface-deep: var(--pdf-chrome-scrim);
  --pdf-viewer-ink: rgba(243, 245, 247, 0.9);
  --pdf-viewer-muted: rgba(193, 199, 207, 0.7);
  background:
    radial-gradient(circle at 50% 38%, var(--pdf-viewer-surface), var(--pdf-viewer-surface-deep) 72%) !important;
}
html:not(.theme-dark) body:not(.theme-dark) #pdfSourcePanel.pdf-source-panel {
  --pdf-viewer-surface: var(--light-page-high, #f5ece2);
  --pdf-viewer-surface-deep: var(--pdf-chrome-scrim);
  --pdf-viewer-ink: var(--light-ink, #302c29);
  --pdf-viewer-muted: var(--light-muted, #685b51);
  background:
    radial-gradient(circle at 50% 38%, var(--pdf-viewer-surface), var(--pdf-viewer-surface-deep) 72%) !important;
}

/* The corners and view switch sit on the same frosted glass as the dock, so
 * they stay legible when a page is zoomed or panned beneath them. */
#pdfSourcePanel .pdf-source-sheet::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  z-index: 2;
  height: calc(var(--screen-pad-top, 14px) + 58px);
  border-bottom: 1px solid color-mix(in srgb, var(--pdf-viewer-ink) 9%, transparent);
  background: color-mix(in srgb, var(--pdf-chrome-scrim) 86%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
  pointer-events: none;
  transition: opacity 200ms ease;
}
body.pdf-controls-hidden #pdfSourcePanel .pdf-source-sheet::before { opacity: 0; }

/* Tapping the page shows the controls again; the tab remains for keyboards. */
body.pdf-source-mode #pdfControlsRestore:not(:focus-visible) {
  opacity: 0;
  pointer-events: none;
}

html.theme-dark #pdfSourcePanel .pdf-source-page-wrap,
body.theme-dark #pdfSourcePanel .pdf-source-page-wrap {
  box-shadow:
    0 28px 62px rgba(0, 0, 0, 0.5),
    0 5px 16px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(232, 236, 242, 0.11);
}

/* Compact instruments float over the full document. The material remains
 * readable over both white paper and photographs in either app theme. */
#pdfSourcePanel .pdf-source-header {
  position: absolute;
  inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) auto max(12px, env(safe-area-inset-left));
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
}

#pdfSourcePanel :is(.pdf-document-pages, .pdf-document-zoom) {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 17px;
  background: rgba(30, 32, 38, 0.94);
  color: #f4f5f7;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  pointer-events: auto;
  font: 550 12px/1.2 var(--ui-font);
  font-variant-numeric: tabular-nums;
}

#pdfSourcePanel .pdf-source-header button {
  display: grid;
  place-items: center;
  width: 40px;
  min-width: 40px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  box-shadow: none;
  transform: none;
  touch-action: manipulation;
  cursor: pointer;
}

#pdfSourcePanel .pdf-source-header button:disabled { opacity: 0.35; cursor: default; }
#pdfSourcePanel .pdf-source-header button:not(:disabled):hover { background: rgba(255, 255, 255, 0.1); }
#pdfSourcePanel .pdf-source-header button:focus-visible { outline: 2px solid #ef8b80; outline-offset: -2px; }
#pdfSourcePanel .pdf-source-header .ui-symbol { width: 18px; height: 18px; }
#pdfSourcePanel #pdfSourceZoomResetButton { width: 52px; }
#pdfSourcePanel #pdfSourcePageProgress { white-space: nowrap; padding: 0 3px; }
#pdfSourcePanel #pdfSourceFrame { cursor: grab; }
#pdfSourcePanel #pdfSourceFrame:active { cursor: grabbing; }
#pdfSourcePanel .pdf-source-page-wrap { will-change: transform; }
#pdfSourcePanel .pdf-source-status:empty { display: none; }
#pdfSourcePanel .pdf-source-status { pointer-events: none; }

/* The same tapered red ink line as Page Mode, measured against PDF glyphs. */
#pdfSourcePanel .pdf-source-text-word.is-selected::before,
body > .pdf-source-selection-glider {
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(220, 92, 75, 0.44) 5%, rgba(195, 59, 53, 0.92) 19%, rgba(195, 59, 53, 0.92) 76%, rgba(220, 92, 75, 0.44) 94%, transparent 100%),
    linear-gradient(90deg, transparent 8%, rgba(220, 92, 75, 0.44) 28%, rgba(220, 92, 75, 0.44) 72%, transparent 94%) !important;
  background-repeat: no-repeat !important;
  background-position: center calc(100% - 0.02em), center 100% !important;
  background-size: 100% max(1px, 0.105em), 82% max(0.5px, 0.04em) !important;
  box-shadow: none !important;
  animation: none !important;
}
#pdfSourcePanel .pdf-source-selection-pulse { display: none; }

@media (max-height: 480px) {
  #pdfSourcePanel .pdf-source-header { top: max(6px, env(safe-area-inset-top)); }
}
@media (max-width: 360px) {
  #pdfSourcePanel .pdf-source-header button { width: 36px; min-width: 36px; }
  #pdfSourcePanel #pdfSourceZoomResetButton { width: 44px; }
  #pdfSourcePanel :is(.pdf-document-pages, .pdf-document-zoom) { font-size: 11px; }
}

/* PDF-aware Speed screen. The reading engine and mounted dock stay shared. */
body:is(.pdf-speed-mode, .pdf-speed-preparing) {
  --pdf-speed-paper: #f2f0ea;
  --ink: var(--pdf-speed-ink);
  --pdf-speed-ink: #302e2c;
  --pdf-speed-muted: #706d67;
  --pdf-speed-line: rgba(57, 53, 47, 0.14);
}
html.theme-dark body:is(.pdf-speed-mode, .pdf-speed-preparing),
body.theme-dark:is(.pdf-speed-mode, .pdf-speed-preparing) {
  --pdf-speed-paper: #0f1013;
  --pdf-speed-ink: #eeeff2;
  --pdf-speed-muted: #abb0ba;
  --pdf-speed-line: rgba(222, 228, 239, 0.14);
}
body:is(.pdf-speed-mode, .pdf-speed-preparing) .reader-panel:has(#focusStage) {
  background: var(--pdf-speed-paper) !important;
  color: var(--pdf-speed-ink);
}
.pdf-speed-header { gap: 16px; padding: 0; }
.pdf-speed-title {
  min-width: 0;
  max-width: min(100%, 480px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--pdf-speed-ink);
  font: 500 clamp(0.94rem, 2.4vw, 1.15rem)/1.35 var(--ui-font);
}
.pdf-speed-source-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid var(--pdf-speed-line);
  border-radius: 13px;
  background: var(--pdf-speed-paper);
  color: var(--pdf-speed-ink);
  font: 550 0.8rem/1.2 var(--ui-font);
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: none;
  transform: none;
}

/* Explicit view switches stay readable on paper and reader backgrounds. */
#pdfSpeedSourceButton.pdf-view-switch-button,
#pdfSourcePanel #pdfSourceReaderButton.pdf-view-switch-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 44px;
  height: auto;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: rgba(30, 32, 38, 0.97);
  color: #f4f5f7;
  font: 500 0.76rem/1.25 var(--ui-font);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transform: none;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}
#pdfSpeedSourceButton:focus-visible,
#pdfSourcePanel #pdfSourceReaderButton:focus-visible { outline: 2px solid #ef8b80; outline-offset: 3px; }
.pdf-speed-source-button .ui-symbol { width: 18px; height: 18px; }
.pdf-speed-source-button:hover { border-color: var(--rhythm-coral, #c95445); }
.pdf-speed-source-button:focus-visible { outline: 2px solid var(--rhythm-coral, #c95445); outline-offset: 3px; }
.pdf-speed-context { text-align: center; color: var(--pdf-speed-ink); }
.pdf-speed-checkpoint p { margin: 0 0 12px; font: 550 0.95rem/1.3 var(--ui-font); }
.pdf-speed-checkpoint-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#pdfSourceReadFrom.pdf-source-read-from {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 9px 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #f4f5f7;
  text-align: left;
  font: 500 0.8rem/1.3 var(--ui-font);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  appearance: none;
  touch-action: manipulation;
  transform: none;
  box-shadow: none;
}
#pdfSourceReadFrom.pdf-source-read-from:focus-visible {
  outline: 2px solid #f4f5f7;
  outline-offset: 3px;
}
@media (hover: hover) {
  #pdfSourceReadFrom.pdf-source-read-from:hover:not(:disabled) {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
/* As in ebooks, the Speed word carries no underline: the red line stays on the
 * page, in the gap the word leaves while it is held or flying. */
.pdf-speed-word-flight { z-index: 1199; }
body.pdf-speed-handoff #pdfSourcePanel .pdf-source-word-mask { border-radius: 0; box-shadow: none; }
#pdfSourcePanel .pdf-source-text-layer > .pdf-source-word-mask.is-page-gap {
  position: absolute;
  z-index: 0;
  border-radius: 0;
  box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .pdf-speed-context { transition: none; }
}


/* The Speed companion uses reading paper; PDF pages retain publisher artwork. */
html:not(.theme-dark) body:not(.theme-dark).pdf-speed-mode {
  --pdf-speed-paper: var(--reader-surface);
  --pdf-speed-ink: var(--light-ink);
  --pdf-speed-muted: var(--light-muted);
  --pdf-speed-line: var(--light-line);
}

/* Twilight applies to PDF chrome while the document keeps its original ink. */
html.theme-twilight body.theme-twilight:is(.pdf-speed-mode, .pdf-speed-preparing) {
  --pdf-speed-paper: var(--twilight-paper);
  --pdf-speed-ink: var(--twilight-ink);
  --pdf-speed-muted: var(--twilight-muted);
  --pdf-speed-line: var(--twilight-line);
}
html.theme-twilight body.theme-twilight #pdfSourcePanel.pdf-source-panel {
  --pdf-viewer-surface: var(--twilight-paper);
  --pdf-viewer-surface-deep: var(--twilight-chrome);
  --pdf-viewer-ink: var(--twilight-ink);
  --pdf-viewer-muted: var(--twilight-muted);
  background:
    radial-gradient(circle at 50% 38%, var(--pdf-viewer-surface), var(--pdf-viewer-surface-deep) 72%) !important;
}


/* Shared RSVP control authority
 * -----------------------------
 * Speed mode and the open-PDF surface use the same mounted control tree. PDF
 * collapses its progress row and adds a readable backing. Speed, Home, and
 * Play retain the same mounted controls while the document changes behind them.
 */

/* The held Speed word owns the selected page slot throughout the drag/flight.
 * Fade a covering veil so the page's native text shaping stays stationary. */
#wordDisplay.is-speed-page-dragging {
  pointer-events: none;
}
#wordDisplay.is-speed-page-dragging .context-token.is-current {
  visibility: hidden !important;
  transition: none !important;
}
/* The underline shares the page veil, matching the text throughout the reveal. */
#wordDisplay.is-speed-page-dragging .context-page-word-marker {
  visibility: visible !important;
}
#wordDisplay.is-speed-page-dragging .context-ebook-page {
  opacity: 1 !important;
  animation: none !important;
}
#wordDisplay.is-speed-page-dragging .context-ebook-page::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: var(--reader-surface);
  opacity: calc(1 - var(--speed-page-drag-progress, 0)) !important;
  animation: none !important;
  transition: none !important;
}
#wordDisplay.is-speed-page-dragging.is-speed-page-drag-settling .context-ebook-page::after {
  transition: opacity 180ms ease-out !important;
}
body.is-speed-page-dragging #focusStage {
  touch-action: none !important;
}
/* Dragging from PDF Speed: the held word replaces the Speed word and its
 * neighbours fade out as the PDF page fades in beneath the finger. */
#wordDisplay.is-speed-pdf-dragging {
  opacity: calc(1 - var(--speed-page-drag-progress, 0)) !important;
}
#wordDisplay.is-speed-pdf-dragging .focus-word {
  visibility: hidden !important;
}
#wordDisplay.is-speed-pdf-dragging.is-speed-page-drag-settling {
  transition: opacity 180ms ease-out !important;
}
@media (prefers-reduced-motion: reduce) {
  #wordDisplay.is-speed-page-dragging.is-speed-page-drag-settling .context-ebook-page::after {
    transition: none !important;
  }
}

/* Reader corner controls: Home (a back chevron), Chapters, and the mode
 * switch share one bare-glyph treatment. Placement lives in the app shell. */
body {
  --reader-corner-ink: var(--rhythm-control-ink, var(--text));
  --reader-corner-accent: var(--rhythm-coral, #c95445);
}
html:not(.theme-dark) body:not(.theme-dark) {
  --reader-corner-ink: var(--light-ink);
  --reader-corner-accent: var(--light-accent, var(--rhythm-coral));
}
html.theme-dark body,
body.theme-dark {
  --reader-corner-ink: #f4f5f7;
  --reader-corner-accent: #ec7766;
}
html.theme-twilight body.theme-twilight {
  --reader-corner-ink: var(--twilight-ink);
  --reader-corner-accent: var(--twilight-accent);
}

#readerModeSwitchButton#readerModeSwitchButton,
#readerChaptersButton#readerChaptersButton,
html body.reader-tap-controls :is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton.rsvp-home-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0;
  background: transparent !important;
  background-image: none !important;
  color: var(--reader-corner-ink) !important;
  box-shadow: none !important;
  filter: none !important;
  visibility: visible;
  opacity: 1;
  transform: none !important;
  scale: none !important;
  transition: color 160ms ease;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
#readerModeSwitchButton#readerModeSwitchButton {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  padding: 0;
  margin: 0;
}
#readerModeSwitchButton#readerModeSwitchButton:is(:hover, :active, .is-tactile-press),
#readerChaptersButton#readerChaptersButton:is(:hover, :active, .is-tactile-press),
html body.reader-tap-controls :is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton.rsvp-home-button:is(:hover, :active, .is-tactile-press) {
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
:is(#readerModeSwitchButton, #readerChaptersButton):focus-visible,
html body.reader-tap-controls :is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton.rsvp-home-button:focus-visible {
  outline: 2px solid var(--reader-corner-accent) !important;
  outline-offset: 3px !important;
}
:is(#readerModeSwitchButton, #readerChaptersButton):disabled { opacity: 0.38; }

/* Home reads as "back" in the reader; the source PDF's dock keeps the house. */
#textPanelButton .reader-back-symbol { display: none; }
html body.reader-tap-controls :is(.reader-panel, #pdfReaderCorners) > #textPanelButton .home-symbol { display: none !important; }
html body.reader-tap-controls :is(.reader-panel, #pdfReaderCorners) > #textPanelButton .reader-back-symbol {
  display: block;
  width: 30px;
  height: 30px;
  stroke-width: 2.2;
  transform: scale(var(--reader-corner-glyph-scale, 1));
  transform-origin: center;
}

#readerChaptersButton .reader-chapters-symbol {
  display: block;
  width: 28px;
  height: 28px;
  stroke-width: 1.85;
  transform: scale(var(--reader-corner-glyph-scale, 1));
  transform-origin: center;
}
#readerChaptersButton .reader-chapters-marks { stroke-width: 3; }

/* The mode switch shows its destination: an open book whose current word
 * carries Page Mode's red mark, or a quiet pace dial with a red needle. The
 * glyphs crossfade in one cell so the control never changes size. For a
 * reader's first few mode changes a caption names the destination. */
#readerModeSwitchButton#readerModeSwitchButton {
  grid-template-rows: auto;
  align-content: center;
  justify-items: center;
}
#readerModeSwitchButton .reader-mode-glyph {
  grid-area: 1 / 1;
  width: 31px;
  height: 31px;
  stroke-width: 1.85;
  opacity: 1;
  transform: scale(var(--reader-corner-glyph-scale, 1));
  transform-origin: center;
  transition: opacity 180ms ease;
}
#readerModeSwitchButton:not([data-destination="speed"]) .reader-mode-glyph-speed,
#readerModeSwitchButton:not([data-destination="page"]) .reader-mode-glyph-page,
#readerModeSwitchButton:not([data-destination="original"]) .reader-mode-glyph-original {
  opacity: 0;
}
#readerModeSwitchButton .reader-mode-glyph-accent { stroke: var(--reader-corner-accent); }
#readerModeSwitchButton .reader-mode-glyph-line { stroke-width: 1.6; }
#readerModeSwitchButton .reader-mode-glyph-dial { stroke-width: 1.75; }
#readerModeSwitchButton .reader-mode-glyph-needle { stroke-width: 2.1; }
#readerModeSwitchButton .reader-mode-glyph-hub { fill: var(--reader-corner-accent); stroke: none; }
#readerModeSwitchButton .reader-mode-caption { display: none; }
#readerModeSwitchButton#readerModeSwitchButton.has-caption {
  grid-template-rows: auto auto;
  row-gap: 1px;
}
#readerModeSwitchButton.has-caption .reader-mode-glyph {
  width: 26px;
  height: 26px;
}
#readerModeSwitchButton.has-caption .reader-mode-caption {
  display: block;
  grid-area: 2 / 1;
  color: var(--reader-corner-ink);
  font-family: var(--ui-font, -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: 10.5px;
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: 0.02em;
  opacity: 0.82;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #readerModeSwitchButton,
  #readerModeSwitchButton .reader-mode-glyph {
    transition: none !important;
  }
}

/* The centred title rests on a small motif: a hairline that breathes out from
 * a red anchor point, echoing the focal letter of every Speed word. */
html body.reader-tap-controls.has-loaded-text:not(.ebook-mode)
  .reader-panel > .top-bar > .reader-title-display::after {
  --reader-title-motif-line: color-mix(in srgb, var(--rhythm-amber, #ca8a3d) 78%, transparent);
  --reader-title-motif-dot: var(--reader-corner-accent);
  top: calc(100% + 7px) !important;
  width: 62px !important;
  height: 7px !important;
  border-radius: 0 !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 50%, var(--reader-title-motif-dot) 0 1.7px, transparent 2.3px)
      50% 50% / 7px 7px no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      var(--reader-title-motif-line) 32%,
      transparent 43%,
      transparent 57%,
      var(--reader-title-motif-line) 68%,
      transparent 100%)
      50% 50% / 100% 1.25px no-repeat !important;
}
html.theme-twilight body.reader-tap-controls.has-loaded-text:not(.ebook-mode)
  .reader-panel > .top-bar > .reader-title-display::after {
  --reader-title-motif-line: color-mix(in srgb, var(--twilight-lavender, var(--twilight-accent)) 70%, transparent);
}

/* While words play, the frame recedes like the dock's transport row. */
body.reader-tap-controls.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel > :is(#textPanelButton, #readerChaptersButton, #readerModeSwitchButton),
body.reader-tap-controls.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel > .top-bar > .reader-title-display {
  transition: opacity 220ms cubic-bezier(0.22, 0.72, 0.22, 1);
}
html body.reader-tap-controls.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing > :is(#textPanelButton#textPanelButton, #readerChaptersButton#readerChaptersButton, #readerModeSwitchButton#readerModeSwitchButton) {
  opacity: 0.54 !important;
}
html body.reader-tap-controls.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing > .top-bar > .reader-title-display {
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  #readerModeSwitchButton {
    transition: none !important;
  }
}

body:is(.pdf-source-mode, .pdf-source-entering) #pdfSourcePanel {
  --rsvp-control-reserved-space: 209px;
}

#readerBottomDock#readerBottomDock.rsvp-control-stack {
  --rsvp-instrument-font: var(--ui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --rsvp-instrument-font-size: clamp(0.82rem, 2.2vw, 0.93rem);
  --rsvp-instrument-primary: rgba(35, 32, 28, 0.92);
  --rsvp-instrument-secondary: rgba(67, 61, 53, 0.8);
  --rsvp-instrument-rest-opacity: 1;
  gap: var(--rsvp-control-gap, 0px) !important;
}

html.theme-dark #readerBottomDock#readerBottomDock.rsvp-control-stack,
body.theme-dark #readerBottomDock#readerBottomDock.rsvp-control-stack {
  --rsvp-instrument-primary: rgba(247, 243, 236, 0.94);
  --rsvp-instrument-secondary: rgba(229, 224, 215, 0.8);
}

:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock.rsvp-control-stack {
  --rsvp-control-gap: clamp(16px, 2vh, 20px);
  --rsvp-progress-slot-height: 48px;
  --rsvp-play-width: clamp(112px, 31vw, 132px);
  --rsvp-play-height: 52px;
  --speed-fill: var(--rhythm-coral, #c95445);
  --speed-track: rgba(160, 147, 127, 0.34);
  position: fixed !important;
  inset: auto 0 0 0 !important;
  z-index: 1200 !important;
  display: grid !important;
  grid-template-rows: auto var(--rsvp-progress-slot-height) 58px !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding:
    0
    max(28px, calc(env(safe-area-inset-right) + 18px))
    max(20px, calc(env(safe-area-inset-bottom) + 12px))
    max(28px, calc(env(safe-area-inset-left) + 18px)) !important;
  gap: var(--rsvp-control-gap) !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
  translate: none !important;
  animation: none !important;
  transition: none !important;
  pointer-events: auto !important;
}

/* Page Mode's zero-height dock must not create a containing block for its
 * fixed children. A legacy dark-mode blur otherwise moves departing bars
 * down by a full viewport while their close animation is still running.
 */
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock.rsvp-control-stack {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock.rsvp-control-stack
  > .rsvp-speed-row {
  position: relative !important;
  inset: auto !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  column-gap: 16px !important;
  row-gap: 4px !important;
  visibility: visible !important;
  opacity: 1;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: auto !important;
}

#readerBottomDock#readerBottomDock.rsvp-control-stack .rsvp-speed-row {
  color: var(--rsvp-instrument-secondary) !important;
  font-family: var(--rsvp-instrument-font) !important;
  font-size: var(--rsvp-instrument-font-size) !important;
  font-weight: 560 !important;
  letter-spacing: 0.006em !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

.rsvp-control-stack .rsvp-speed-fields {
  display: contents !important;
}

.rsvp-control-stack .rsvp-speed-row > span {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

#readerBottomDock#readerBottomDock .rsvp-speed-output {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  min-width: 84px !important;
  color: var(--rsvp-instrument-primary) !important;
  font-family: var(--rsvp-instrument-font) !important;
  font-size: var(--rsvp-instrument-font-size) !important;
  font-weight: 620 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.008em !important;
  line-height: 1.2 !important;
  text-align: right !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

/* Pointer gestures belong to the wrapper; the range retains native keyboard
 * and accessibility input without starting a second, native touch drag. */
#readerBottomDock#readerBottomDock .rsvp-speed-touch-target {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  display: block;
  min-width: 0;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#readerBottomDock#readerBottomDock .rsvp-speed-slider {
  --speed-percent: 25%;
  --speed-thumb-width: 36px;
  display: block !important;
  pointer-events: none !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline-offset: 3px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

#readerBottomDock#readerBottomDock .rsvp-speed-slider::-webkit-slider-runnable-track {
  width: 100% !important;
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(
      90deg,
      var(--speed-fill) 0 var(--speed-percent),
      var(--speed-track) var(--speed-percent) 100%
    ) !important;
}

#readerBottomDock#readerBottomDock .rsvp-speed-slider::-webkit-slider-thumb {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  width: var(--speed-thumb-width) !important;
  height: 26px !important;
  margin-top: -10px !important;
  border: 1px solid rgba(180, 174, 162, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 247, 0.96) !important;
  box-shadow:
    0 4px 12px rgba(40, 36, 28, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

#readerBottomDock#readerBottomDock .rsvp-speed-slider::-moz-range-track {
  width: 100% !important;
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--speed-track) !important;
}

#readerBottomDock#readerBottomDock .rsvp-speed-slider::-moz-range-progress {
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--speed-fill) !important;
}

#readerBottomDock#readerBottomDock .rsvp-speed-slider::-moz-range-thumb {
  box-sizing: border-box !important;
  width: var(--speed-thumb-width) !important;
  height: 26px !important;
  border: 1px solid rgba(180, 174, 162, 0.42) !important;
  border-radius: 999px !important;
  background: rgba(255, 253, 247, 0.96) !important;
  box-shadow:
    0 4px 12px rgba(40, 36, 28, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

#readerBottomDock#readerBottomDock .rsvp-speed-slider:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--speed-fill) 42%, transparent) !important;
  border-radius: 999px !important;
}

#readerBottomDock#readerBottomDock.rsvp-control-stack > .rsvp-progress-row {
  grid-row: 2 !important;
  align-self: stretch !important;
  width: 100% !important;
  height: var(--rsvp-progress-slot-height) !important;
  min-height: var(--rsvp-progress-slot-height) !important;
  margin: 0 !important;
}

#readerBottomDock#readerBottomDock.rsvp-control-stack > .rsvp-progress-row {
  display: grid !important;
  gap: 8px !important;
  padding: 9px 0 0 !important;
  box-sizing: border-box !important;
  touch-action: none;
  cursor: pointer;
}

/* A broad scrub area surrounds the quieter progress line. The speed input
 * above has its own 64px target, with no negative margins joining the two.
 */
#readerBottomDock#readerBottomDock.rsvp-control-stack > .rsvp-progress-row > .progress-track {
  height: 5px !important;
}

#readerBottomDock#readerBottomDock.rsvp-control-stack > .rsvp-progress-row .progress-meta {
  margin-top: 7px !important;
  min-height: 1.2em !important;
  align-items: center !important;
  color: var(--rsvp-instrument-secondary) !important;
  font-family: var(--rsvp-instrument-font) !important;
  font-size: var(--rsvp-instrument-font-size) !important;
  font-weight: 520 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.006em !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
}

#readerBottomDock#readerBottomDock.rsvp-control-stack
  > .rsvp-progress-row
  .progress-meta
  > span {
  color: inherit !important;
  font: inherit !important;
  font-variant-numeric: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock.rsvp-control-stack
  > .rsvp-transport-row {
  position: relative !important;
  inset: auto !important;
  grid-row: 3 !important;
  display: grid !important;
  grid-template-columns: minmax(44px, 1fr) auto minmax(44px, 1fr) !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}

#readerBottomDock#readerBottomDock.rsvp-control-stack
  > :is(.rsvp-speed-row, .rsvp-progress-row, .rsvp-transport-row) {
  animation: none !important;
  filter: none !important;
  translate: none !important;
  transition: none !important;
}

#readerBottomDock#readerBottomDock.rsvp-control-stack > .rsvp-progress-row {
  opacity: 1;
  transition: none !important;
}

.rsvp-control-stack .rsvp-transport-center {
  display: contents !important;
}

.rsvp-control-stack .rsvp-transport-center > :not(.rsvp-play-button),
.rsvp-control-stack .bottom-right-actions,
.rsvp-control-stack #dockCollapseButton,
.rsvp-control-stack .control-helper {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode) {
  --reader-play-glyph-scale: 1;
  --reader-corner-glyph-scale: 1;
  --reader-control-morph-duration: 420ms;
  --reader-control-morph-easing: linear(
    0,
    0.24 8%,
    0.5 16%,
    0.74 24%,
    0.93 33%,
    1.035 44%,
    1.06 54%,
    1.028 64%,
    0.993 75%,
    0.99 83%,
    1.004 92%,
    1
  );
  --reader-corner-morph-easing: linear(
    0,
    0.28 8%,
    0.58 17%,
    0.86 29%,
    1.1 44%,
    1.17 54%,
    1.075 66%,
    0.97 78%,
    1.018 91%,
    1
  );
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode) {
  --reader-play-glyph-scale: 0.5;
  --reader-corner-glyph-scale: 0.852941;
  --reader-control-morph-duration: 360ms;
  --reader-control-morph-easing: linear(
    0,
    0.3 10%,
    0.63 21%,
    0.9 34%,
    1.04 49%,
    1.05 58%,
    1.015 70%,
    0.992 81%,
    1.004 92%,
    1
  );
  --reader-corner-morph-easing: linear(
    0,
    0.34 10%,
    0.7 22%,
    0.98 38%,
    1.14 54%,
    1.045 68%,
    0.976 80%,
    1.012 92%,
    1
  );
}

@supports not (transition-timing-function: linear(0, 1)) {
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode) {
    --reader-control-morph-easing: cubic-bezier(0.16, 0.82, 0.2, 1.12);
    --reader-corner-morph-easing: cubic-bezier(0.14, 0.8, 0.18, 1.16);
  }

  body.reader-context-mode.has-loaded-text:not(.ebook-mode) {
    --reader-control-morph-easing: cubic-bezier(0.22, 0.74, 0.2, 1.09);
    --reader-corner-morph-easing: cubic-bezier(0.18, 0.72, 0.18, 1.13);
  }
}

:is(
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
  body.reader-context-mode.has-loaded-text:not(.ebook-mode),
  body.pdf-source-mode,
  body.pdf-source-entering
)
  #readerBottomDock#readerBottomDock#readerBottomDock
  #textPanelButton#textPanelButton.rsvp-home-button,
:is(
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
  body.reader-context-mode.has-loaded-text:not(.ebook-mode),
  body.pdf-source-mode,
  body.pdf-source-entering
)
  #readerBottomDock#readerBottomDock#readerBottomDock
  #textPanelButton#textPanelButton.rsvp-home-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  position: fixed !important;
  left: max(47px, calc(env(safe-area-inset-left) + 47px)) !important;
  right: auto !important;
  top: auto !important;
  bottom: max(53px, calc(env(safe-area-inset-bottom) + 43px)) !important;
  z-index: 1202 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--rhythm-control-ink) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  translate: -50% 50% !important;
  transition: none !important;
  pointer-events: auto !important;
}

#readerBottomDock#readerBottomDock .rsvp-home-button .home-symbol {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 2.25 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: scale(var(--reader-corner-glyph-scale, 1)) !important;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform var(--reader-control-morph-duration, 360ms)
    var(--reader-corner-morph-easing, cubic-bezier(0.2, 0.76, 0.24, 1)) !important;
}

:is(
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
  body.reader-context-mode.has-loaded-text:not(.ebook-mode),
  body.pdf-source-mode,
  body.pdf-source-entering
)
  #speedChaptersButton#speedChaptersButton.chapters-dock-button {
  right: max(47px, calc(env(safe-area-inset-right) + 47px)) !important;
  bottom: max(53px, calc(env(safe-area-inset-bottom) + 43px)) !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  color: var(--rhythm-control-ink) !important;
  translate: 50% 50% !important;
}

#speedChaptersButton#speedChaptersButton .chapters-dock-symbol.reader-menu-symbol {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 2.1 !important;
  opacity: 1 !important;
  transform: scale(var(--reader-corner-glyph-scale, 1)) !important;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform var(--reader-control-morph-duration, 360ms)
    var(--reader-corner-morph-easing, cubic-bezier(0.2, 0.76, 0.24, 1)) !important;
}

#speedChaptersButton#speedChaptersButton
  .chapters-dock-symbol.reader-menu-symbol
  :is(path, circle) {
  stroke-width: 2.1 !important;
  opacity: 1 !important;
}

/* A conventional outline cog for the reader settings action. */
#speedChaptersButton#speedChaptersButton .chapters-dock-symbol.reader-settings-symbol {
  width: 32px !important;
  height: 32px !important;
  stroke-width: 1.8 !important;
}

:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button,
:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press, .is-paused) {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: static !important;
  inset: auto !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: center !important;
  display: grid !important;
  place-items: center !important;
  width: var(--rsvp-play-width) !important;
  min-width: var(--rsvp-play-width) !important;
  max-width: var(--rsvp-play-width) !important;
  height: var(--rsvp-play-height) !important;
  min-height: var(--rsvp-play-height) !important;
  max-height: var(--rsvp-play-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 0.9;
  border: 1px solid rgba(185, 74, 64, 0.36) !important;
  border-radius: 12px !important;
  outline: 0;
  background: rgba(201, 85, 73, 0.15) !important;
  color: rgba(177, 69, 60, 0.9) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  cursor: pointer;
  pointer-events: auto !important;
}

#readerBottomDock#readerBottomDock .rsvp-play-button::before,
#readerBottomDock#readerBottomDock .rsvp-play-button::after {
  content: none !important;
  display: none !important;
}

#readerBottomDock#readerBottomDock .rsvp-play-button:disabled {
  opacity: 0.32;
  cursor: default;
}

#readerBottomDock#readerBottomDock .rsvp-play-button .play-symbol {
  width: 20px !important;
  height: 20px !important;
  margin-left: 2px;
  color: currentColor !important;
  filter: none !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button,
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  bottom: max(29px, calc(env(safe-area-inset-bottom) + 21px)) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock.rsvp-control-stack
  > :is(.rsvp-speed-row, .rsvp-progress-row) {
  --rsvp-instrument-rest-opacity: 0.42;
  opacity: var(--rsvp-instrument-rest-opacity);
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock.rsvp-control-stack
  > .rsvp-transport-row {
  opacity: 0.54;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock.rsvp-control-stack
  .rsvp-play-button {
  opacity: 0.64;
  border-color: rgba(185, 74, 64, 0.26) !important;
  background: rgba(201, 85, 73, 0.1) !important;
  color: rgba(177, 69, 60, 0.78) !important;
}

html.theme-dark .rsvp-control-stack,
body.theme-dark .rsvp-control-stack {
  --speed-track: rgba(202, 184, 153, 0.22);
}

html.theme-dark .rsvp-control-stack .rsvp-play-button,
body.theme-dark .rsvp-control-stack .rsvp-play-button {
  border-color: rgba(223, 93, 81, 0.32) !important;
  background: rgba(223, 93, 81, 0.14) !important;
  color: rgba(235, 111, 97, 0.86) !important;
}

html.theme-dark
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock.rsvp-control-stack
  .rsvp-play-button,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock.rsvp-control-stack
  .rsvp-play-button {
  border-color: rgba(223, 93, 81, 0.23) !important;
  background: rgba(223, 93, 81, 0.09) !important;
  color: rgba(235, 111, 97, 0.72) !important;
}

/*
 * Speed Mode uses the same bare white transport glyph as Page Mode, enlarged
 * for the primary reading action. The shared 144:80 hit target stays fixed;
 * only the invariant 68px SVG changes scale between the two modes.
 */
:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button,
:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  width: 144px !important;
  min-width: 144px !important;
  max-width: 144px !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  position: relative !important;
  opacity: 1 !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  color: var(--rsvp-play-ink, #fff) !important;
  box-shadow: none !important;
  filter: none !important;
}

:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button
  .play-symbol {
  width: 68px !important;
  height: 68px !important;
  margin-left: 0 !important;
}

:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button
  .pause-icon {
  margin-left: 0 !important;
  stroke-width: 2.7 !important;
}

:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:focus-visible {
  outline: 2px solid var(--rsvp-play-outline, rgba(255, 255, 255, 0.58)) !important;
  outline-offset: 3px !important;
}

:is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  .reader-panel.is-playing
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  #playButton#playButton.rsvp-play-button,
html.theme-dark
  :is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
  .reader-panel.is-playing
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  #playButton#playButton.rsvp-play-button,
body.theme-dark.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  #playButton#playButton.rsvp-play-button {
  opacity: 0.72 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--rsvp-play-ink, #fff) !important;
}

/* Page Mode presents Play as a simple white glyph on a transparent tap target. */
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button,
body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  opacity: 1 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--rsvp-play-ink, #fff) !important;
  box-shadow: none !important;
  filter: none !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button
  .play-symbol {
  width: 34px !important;
  height: 34px !important;
  margin-left: 0 !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button
  .pause-icon {
  margin-left: 0 !important;
  stroke-width: 2.9 !important;
}

body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:focus-visible {
  outline: 2px solid var(--rsvp-play-outline, rgba(255, 255, 255, 0.58)) !important;
  outline-offset: 3px !important;
}

html.theme-dark
  body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button,
body.theme-dark.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button,
html.theme-dark
  body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ),
body.theme-dark.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  border: 0 !important;
  background: transparent !important;
  color: var(--rsvp-play-ink, #fff) !important;
  box-shadow: none !important;
}

html.theme-dark
  body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:focus-visible,
body.theme-dark.reader-context-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:focus-visible {
  outline-color: var(--rsvp-play-outline, rgba(255, 255, 255, 0.58)) !important;
}

/* All three reader controls keep invariant hit targets and centre coordinates.
 * Only the SVG artwork transforms, so mode changes cannot trigger reflow or
 * edge-based drift. */
:is(
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
  body.reader-context-mode.has-loaded-text:not(.ebook-mode),
  body.pdf-source-mode,
  body.pdf-source-entering
)
  #readerBottomDock#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button,
:is(
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
  body.reader-context-mode.has-loaded-text:not(.ebook-mode),
  body.pdf-source-mode,
  body.pdf-source-entering
)
  #readerBottomDock#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:is(
    :hover,
    :focus,
    :focus-visible,
    :active,
    .is-tactile-press,
    .is-paused
  ) {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: max(53px, calc(env(safe-area-inset-bottom) + 43px)) !important;
  width: 144px !important;
  min-width: 144px !important;
  max-width: 144px !important;
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  transform: none !important;
  translate: -50% 50% !important;
}

:is(
  body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
  body.reader-context-mode.has-loaded-text:not(.ebook-mode),
  body.pdf-source-mode,
  body.pdf-source-entering
)
  #readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button
  .play-symbol {
  width: 68px !important;
  height: 68px !important;
  margin-left: 0 !important;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform var(--reader-control-morph-duration, 360ms)
    var(--reader-control-morph-easing, cubic-bezier(0.2, 0.76, 0.24, 1)) !important;
}

/* Scale the triangle and its optical correction as one transform. This keeps
 * the correction at 2.5px in Page Mode and 5px in Speed Mode continuously. */
#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button
  .play-icon {
  translate: none !important;
  transform: scale(var(--reader-play-glyph-scale, 1)) translateX(5px) !important;
}

#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button
  .pause-icon {
  stroke-width: 2.8 !important;
  translate: none !important;
  transform: scale(var(--reader-play-glyph-scale, 1)) !important;
}

/* Ease the Page-to-playback dim without animating dock geometry. */
body.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-context-release-dimming
  #readerBottomDock#readerBottomDock.rsvp-control-stack,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock#readerBottomDock.rsvp-control-stack {
  transition: opacity 220ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  > :is(.rsvp-speed-row, .rsvp-progress-row, .rsvp-transport-row),
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  :is(.progress-meta, .progress-track),
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  #textPanelButton#textPanelButton.rsvp-home-button,
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  .reader-panel.is-playing
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  #playButton#playButton.rsvp-play-button {
  transition: opacity 240ms cubic-bezier(0.22, 0.72, 0.22, 1) !important;
}

body.pdf-source-mode #readerBottomDock .rsvp-play-button.is-resume-committed {
  opacity: 1;
}

/* Only the tracks stretch. Labels keep their final size and position while
 * fading independently, so the spring never clips or distorts typography.
 */
@keyframes rsvp-speed-track-enter {
  0% { opacity: 0; scale: 0.06 1.45; }
  54% { opacity: 1; scale: 1.025 0.92; }
  76% { opacity: 1; scale: 0.99 1.03; }
  100% { opacity: 1; scale: 1 1; }
}

@keyframes rsvp-speed-label-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.reader-focus-mode.reader-speed-controls-entering.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  :is(.rsvp-speed-slider, .rsvp-progress-row > .progress-track) {
  transform-origin: center;
  animation: rsvp-speed-track-enter 560ms cubic-bezier(0.22, 0.7, 0.28, 1) both !important;
}

body.reader-focus-mode.reader-speed-controls-entering.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  > .rsvp-progress-row > .progress-track {
  animation-delay: 36ms !important;
}

body.reader-focus-mode.reader-speed-controls-entering.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock.rsvp-control-stack
  :is(.rsvp-speed-row > span, .rsvp-speed-output, .rsvp-progress-row > .progress-meta) {
  animation: rsvp-speed-label-enter 240ms 70ms ease-out both !important;
}

/* The progress fill follows its track instead of running a second wipe. */
body.reader-focus-mode.has-loaded-text:not(.ebook-mode)
  #readerBottomDock#readerBottomDock.rsvp-control-stack .progress-fill {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  body.reader-focus-mode.reader-speed-controls-entering.has-loaded-text:not(.ebook-mode)
    #readerBottomDock#readerBottomDock.rsvp-control-stack
    :is(.rsvp-speed-slider, .progress-track, .rsvp-speed-row > span, .rsvp-speed-output, .progress-meta) {
    animation: none !important;
  }
}

@media (max-height: 760px) {
  :is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
    #readerBottomDock.rsvp-control-stack {
    --rsvp-control-gap: 14px;
    padding-inline:
      max(24px, calc(env(safe-area-inset-right) + 14px))
      max(24px, calc(env(safe-area-inset-left) + 14px)) !important;
  }

  :is(body.reader-focus-mode.has-loaded-text:not(.ebook-mode), body.pdf-source-mode, body.pdf-source-entering)
    #readerBottomDock.rsvp-control-stack
    > .rsvp-speed-row {
    row-gap: 4px !important;
  }
}

@media (max-width: 520px), (max-height: 760px) {
  body:is(.pdf-source-mode, .pdf-source-entering) #pdfSourcePanel {
    --rsvp-control-reserved-space: 198px;
  }
}

@media (max-width: 390px) {
  :is(
    body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
    body.reader-context-mode.has-loaded-text:not(.ebook-mode),
    body.pdf-source-mode,
    body.pdf-source-entering
  )
    #readerBottomDock#readerBottomDock#readerBottomDock
    #textPanelButton#textPanelButton.rsvp-home-button,
  :is(
    body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
    body.reader-context-mode.has-loaded-text:not(.ebook-mode),
    body.pdf-source-mode,
    body.pdf-source-entering
  )
    #readerBottomDock#readerBottomDock#readerBottomDock
    #textPanelButton#textPanelButton.rsvp-home-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
    left: max(41px, calc(env(safe-area-inset-left) + 41px)) !important;
  }

  :is(
    body.reader-focus-mode.has-loaded-text:not(.ebook-mode),
    body.reader-context-mode.has-loaded-text:not(.ebook-mode)
  )
    #speedChaptersButton#speedChaptersButton.chapters-dock-button {
    right: max(41px, calc(env(safe-area-inset-right) + 41px)) !important;
  }
}

/* Contents replaces the reader-menu control with an identically weighted X. */
html body .chapter-panel.chapter-popup .chapter-popup-toggle {
  right: max(47px, calc(env(safe-area-inset-right) + 47px)) !important;
  bottom: max(53px, calc(env(safe-area-inset-bottom) + 43px)) !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 58px !important;
  min-height: 58px !important;
  max-height: 58px !important;
  translate: 50% 50% !important;
}

html body .chapter-panel.chapter-popup .chapter-popup-toggle .reader-menu-close-symbol {
  width: 34px !important;
  height: 34px !important;
  stroke-width: 2.1 !important;
  transform: scale(var(--reader-corner-glyph-scale, 1)) !important;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform var(--reader-control-morph-duration, 360ms)
    var(--reader-corner-morph-easing, cubic-bezier(0.2, 0.76, 0.24, 1)) !important;
}

@media (max-width: 390px) {
  html body .chapter-panel.chapter-popup .chapter-popup-toggle {
    right: max(41px, calc(env(safe-area-inset-right) + 41px)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #readerBottomDock .rsvp-play-button .play-symbol,
  #readerBottomDock .rsvp-home-button .home-symbol,
  #speedChaptersButton .reader-menu-symbol,
  .chapter-panel.chapter-popup .chapter-popup-toggle .reader-menu-close-symbol {
    transition: none !important;
  }

  .rsvp-control-stack,
  .rsvp-control-stack > :is(.rsvp-speed-row, .rsvp-progress-row, .rsvp-transport-row) {
    transition: none !important;
  }
}

/* Reader menus fade the entire dock, including controls with fixed children.
 * Repeated IDs match the shared dock's existing specificity authority. */
html body #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack,
html body #readerModeSwitchButton#readerModeSwitchButton,
html body.reader-tap-controls :is(:is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton, #readerChaptersButton#readerChaptersButton),
html body .ebook-reader .ebook-bottom-bar {
  transition: opacity 200ms ease, visibility 0s linear 0s !important;
}
/* Match the top bar's idle fade while leaving the book's headings bright. */
html body:where(.reader-context-mode)
  #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack,
html body:where(.reader-context-mode) #readerModeSwitchButton#readerModeSwitchButton,
html body.reader-tap-controls:where(.reader-context-mode) :is(:is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton, #readerChaptersButton#readerChaptersButton) {
  transition: opacity 160ms ease-out, visibility 0s linear 0s !important;
}
html body:where(.reader-context-mode.is-page-chrome-idle)
  #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack,
html body:where(.reader-context-mode.is-page-chrome-idle) #readerModeSwitchButton#readerModeSwitchButton,
html body.reader-tap-controls:where(.reader-context-mode.is-page-chrome-idle) :is(:is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton, #readerChaptersButton#readerChaptersButton) {
  opacity: 0.18 !important;
  transition: opacity 800ms ease-in-out, visibility 0s linear 0s !important;
}
html body:is(.is-reader-quick-menu-open, .is-chapter-panel-open, .is-reader-panel-subview-open)
  #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack,
html body:has(.character-legend-panel:not([hidden]))
  #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack,
html body:is(.is-reader-quick-menu-open, .is-chapter-panel-open, .is-reader-panel-subview-open)
  #readerModeSwitchButton#readerModeSwitchButton,
html body:has(.character-legend-panel:not([hidden])) #readerModeSwitchButton#readerModeSwitchButton,
html body.reader-tap-controls:is(.is-reader-quick-menu-open, .is-chapter-panel-open, .is-reader-panel-subview-open)
  :is(:is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton, #readerChaptersButton#readerChaptersButton),
html body.reader-tap-controls:has(.character-legend-panel:not([hidden]))
  :is(:is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton, #readerChaptersButton#readerChaptersButton),
html body:is(.is-reader-quick-menu-open, .is-chapter-panel-open, .is-reader-panel-subview-open)
  .ebook-reader .ebook-bottom-bar,
html body:has(.character-legend-panel:not([hidden])) .ebook-reader .ebook-bottom-bar {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 150ms ease-out, visibility 0s linear 150ms !important;
}
@media (prefers-reduced-motion: reduce) {
  html body #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack,
  html body #readerModeSwitchButton#readerModeSwitchButton,
  html body.reader-tap-controls :is(:is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton, #readerChaptersButton#readerChaptersButton),
  html body .ebook-reader .ebook-bottom-bar { transition: none !important; }
}

/* The original PDF shares Speed's open instruments at the same size. Over the
 * page they sit on frosted glass in the viewer's colour, like iOS toolbars,
 * rather than a fade that turns muddy grey over white paper. */
body:is(.pdf-source-mode, .pdf-source-entering, .pdf-speed-mode, .pdf-speed-preparing) {
  --reader-corner-glyph-scale: 0.852941;
}
body:is(.pdf-source-mode, .pdf-source-entering)
  #readerBottomDock#readerBottomDock.rsvp-control-stack::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -14px 0 0 0 !important;
  width: auto !important;
  height: auto !important;
  z-index: -1 !important;
  visibility: inherit !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb, var(--rsvp-instrument-primary, #f4f5f7) 9%, transparent) !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--pdf-chrome-scrim) 86%, transparent) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.35) !important;
  backdrop-filter: blur(22px) saturate(1.35) !important;
  pointer-events: none !important;
}
body.pdf-speed-mode #readerBottomDock#readerBottomDock.rsvp-control-stack {
  --rsvp-instrument-primary: var(--pdf-speed-ink);
  --rsvp-instrument-secondary: var(--pdf-speed-muted);
  --rhythm-control-ink: var(--pdf-speed-ink);
  --speed-track: var(--pdf-speed-line);
}
body.pdf-speed-mode #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack::before,
body.pdf-speed-mode #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack::after {
  content: none !important;
  display: none !important;
}
body.pdf-speed-mode #readerBottomDock#readerBottomDock#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button {
  color: var(--pdf-speed-ink) !important;
}
.pdf-controls-heading { align-items: center; gap: 8px; }
.pdf-controls-heading::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(50% - 14px);
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: rgba(235, 238, 243, 0.3);
  pointer-events: none;
}
#pdfControlsHide, #pdfControlsRestore {
  appearance: none;
  border: 0;
  color: #f4f5f7;
  background: transparent;
  font: 500 0.8rem/1.3 var(--ui-font);
  touch-action: none;
  transform: none;
  box-shadow: none;
}
#pdfControlsHide { padding: 10px; border-radius: 12px; }
#pdfControlsHide svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#pdfControlsRestore {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(30, 32, 38, 0.97);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.16);
}
#pdfControlsRestore::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: rgba(235, 238, 243, 0.7); }
#pdfControlsHide:focus-visible, #pdfControlsRestore:focus-visible { outline: 2px solid #f4f5f7; outline-offset: 2px; }
@media (hover: hover) {
  #pdfControlsHide:hover { background: rgba(255, 255, 255, 0.08); }
}
body.pdf-source-mode #readerBottomDock#readerBottomDock .rsvp-speed-slider:disabled { opacity: 0.35; }
body.pdf-source-mode #readerBottomDock#readerBottomDock#readerBottomDock
  #playButton#playButton.rsvp-play-button:disabled {
  opacity: 0.35 !important;
}

/* The PDF Speed instruments remain visible without a panel behind them. */
body.pdf-speed-mode #readerBottomDock#readerBottomDock.rsvp-control-stack > .rsvp-speed-row {
  opacity: 1;
}
body.pdf-speed-handoff #readerBottomDock#readerBottomDock#readerBottomDock .rsvp-play-button {
  pointer-events: none !important;
}

body:is(.pdf-speed-mode, .pdf-speed-preparing) #readerBottomDock#readerBottomDock.rsvp-control-stack
  > :is(.rsvp-speed-row, .rsvp-progress-row, .rsvp-transport-row) {
  animation: none !important;
  clip-path: none !important;
  scale: none !important;
}


/* Apricot light-mode instruments. PDF document artwork keeps its source paper. */
html:not(.theme-dark) body:not(.theme-dark) #readerBottomDock#readerBottomDock.rsvp-control-stack {
  --rsvp-instrument-primary: var(--light-ink);
  --rsvp-instrument-secondary: var(--light-muted);
  --rsvp-play-ink: var(--light-accent-ink);
  --rsvp-play-outline: var(--light-accent-ink);
  --rhythm-control-ink: var(--light-ink);
  --speed-fill: var(--light-accent);
  --speed-track: var(--light-line-strong);
}

html:not(.theme-dark) body:not(.theme-dark) #readerBottomDock#readerBottomDock .rsvp-speed-slider::-webkit-slider-thumb {
  border-color: var(--light-line-strong) !important;
  background: var(--light-panel) !important;
  box-shadow: 0 2px 6px rgba(70, 42, 25, 0.12) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #readerBottomDock#readerBottomDock .rsvp-speed-slider::-moz-range-thumb {
  border-color: var(--light-line-strong) !important;
  background: var(--light-panel) !important;
  box-shadow: 0 2px 6px rgba(70, 42, 25, 0.12) !important;
}



html:not(.theme-dark) body:not(.theme-dark) :is(#pdfControlsHide, #pdfControlsRestore) {
  border-color: var(--light-line-strong);
  background: var(--light-panel);
  color: var(--light-ink);
}

html:not(.theme-dark) body:not(.theme-dark) :is(.pdf-controls-heading, #pdfControlsRestore)::before {
  background: var(--light-muted);
}

html:not(.theme-dark) body:not(.theme-dark) :is(#pdfControlsHide, #pdfControlsRestore):focus-visible {
  outline-color: var(--light-accent-ink);
}

/* Twilight instruments share their ink and rose accent with the reading page. */
html.theme-twilight body.theme-twilight #readerBottomDock#readerBottomDock.rsvp-control-stack {
  --rsvp-instrument-primary: var(--twilight-ink);
  --rsvp-instrument-secondary: var(--twilight-muted);
  --rsvp-play-ink: var(--twilight-ink);
  --rsvp-play-outline: var(--twilight-accent);
  --rhythm-control-ink: var(--twilight-ink);
  --speed-fill: var(--twilight-accent);
  --speed-track: var(--twilight-track);
  --progress-fill-soft: var(--twilight-lavender);
  --progress-track-soft: var(--twilight-track);
}
html.theme-twilight body.theme-twilight #readerBottomDock#readerBottomDock .rsvp-speed-slider::-webkit-slider-thumb {
  border-color: var(--twilight-line) !important;
  background: var(--twilight-ink) !important;
}
html.theme-twilight body.theme-twilight #readerBottomDock#readerBottomDock .rsvp-speed-slider::-moz-range-thumb {
  border-color: var(--twilight-line) !important;
  background: var(--twilight-ink) !important;
}
html.theme-twilight body.theme-twilight :is(#pdfControlsHide, #pdfControlsRestore) {
  border-color: var(--twilight-line);
  background: var(--twilight-chrome);
  color: var(--twilight-ink);
}

/* The reader's last-light horizon uses the same rose-to-lavender ink as
 * chapter openings. The completion layer is decorative; progress stays real. */
.twilight-progress-completion {
  display: none;
  pointer-events: none;
}

html.theme-twilight body.theme-twilight #readerBottomDock#readerBottomDock
  > .rsvp-progress-row > .progress-track {
  position: relative;
}

html.theme-twilight body.theme-twilight #readerBottomDock#readerBottomDock .progress-fill {
  background-image: var(--twilight-last-light) !important;
}

html.theme-twilight body.theme-twilight #readerBottomDock#readerBottomDock .twilight-progress-completion {
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--twilight-last-light);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-twilight body.theme-twilight #readerBottomDock#readerBottomDock .twilight-progress-completion {
    display: none;
  }
}

/* Chapters sheet, opened from the top-right Chapters control.
 * The header's close button is the only close control, so the floating
 * corner toggle (left over from the Settings cog morph) is removed and the
 * sheet uses the full height, growing from the top-right corner. */
html body.reader-tap-controls #chapterPanel.chapter-popup .chapter-popup-toggle {
  display: none !important;
}
html body.reader-tap-controls #chapterPanel.chapter-popup:not(.is-reader-panel-subview) .chapter-sheet {
  top: calc(env(safe-area-inset-top) + 12px) !important;
  right: 12px !important;
  bottom: calc(env(safe-area-inset-bottom) + 12px) !important;
  left: 12px !important;
  width: auto !important;
  max-width: 430px !important;
  height: auto !important;
  max-height: none !important;
  margin-inline: auto !important;
  transform-origin: calc(100% - 28px) 0 !important;
}
html body.reader-tap-controls #chapterPanel.chapter-popup:not([hidden]):not(.is-reader-panel-subview) .chapter-sheet {
  animation: chapter-menu-sheet-drop 330ms cubic-bezier(0.2, 0.82, 0.24, 1) both !important;
}
@keyframes chapter-menu-sheet-drop {
  0% { opacity: 0; transform: translate3d(12px, -22px, 0) scale(0.94); }
  68% { opacity: 1; transform: translate3d(-1px, 2px, 0) scale(1.008); }
  100% { opacity: 1; transform: none; }
}

/* Where you are: "Chapter 3 of 12 · 2h 10m left" under the book title. It
 * replaces the "Contents" eyebrow, which repeated the "Chapters" row below. */
html body.reader-tap-controls #chapterPanel.chapter-popup .chapter-book-eyebrow {
  display: none !important;
}
html body.reader-tap-controls #chapterPanel.chapter-popup .chapter-menu-header.chapter-top-bar {
  padding-top: 24px !important;
}
html body.reader-tap-controls #chapterPanel.chapter-popup #chapterBookMeta::after {
  content: none !important;
  display: none !important;
}
html body.reader-tap-controls #chapterPanel.chapter-popup #chapterBookMeta {
  display: block !important;
  color: var(--contents-muted, var(--chapter-popup-muted)) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* The current chapter carries a slim progress line beneath its state. */
html body.reader-tap-controls #chapterPanel.chapter-popup .chapter-option.is-current .chapter-option-copy::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 160px;
  height: 3px;
  margin-top: 7px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      var(--contents-accent, var(--rhythm-coral)) 0 var(--chapter-progress, 0%),
      color-mix(in srgb, var(--contents-muted, currentColor) 26%, transparent) var(--chapter-progress, 0%) 100%);
}
html body.reader-tap-controls #chapterPanel.chapter-popup .chapter-option.is-current .chapter-option-page {
  color: var(--contents-accent, var(--rhythm-coral)) !important;
}

/* Finished chapters step back and carry a check. */
html body.reader-tap-controls #chapterPanel.chapter-popup #chapterList .chapter-option.is-complete .chapter-option-copy strong,
html body.reader-tap-controls #chapterPanel.chapter-popup #chapterList .chapter-option.is-complete .chapter-option-number {
  color: var(--contents-muted, var(--chapter-popup-muted)) !important;
}
html body.reader-tap-controls #chapterPanel.chapter-popup .chapter-option.is-complete .chapter-option-state::before {
  content: "✓\00a0";
  color: var(--contents-accent, var(--rhythm-coral));
  font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
  html body.reader-tap-controls #chapterPanel.chapter-popup:not([hidden]):not(.is-reader-panel-subview) .chapter-sheet {
    animation: none !important;
  }
}

/* Single-chapter readings: the top-right corner is search. The same sheet
 * opens with the search field focused; the one-row chapter list and the
 * "Chapters · 1" tools row stay out of the way until results arrive. */
#readerChaptersButton:not([data-navigation="search"]) .reader-navigation-search,
#readerChaptersButton[data-navigation="search"] .reader-navigation-chapters {
  display: none !important;
}
#readerChaptersButton .reader-navigation-search { stroke-width: 1.95; }
html body.reader-tap-controls #chapterPanel.chapter-popup.is-text-search #chapterTools,
html body.reader-tap-controls #chapterPanel.chapter-popup.is-text-search:not(.has-search-query) #chapterIndex {
  display: none !important;
}
html body.reader-tap-controls #chapterPanel.chapter-popup.is-text-search .chapter-search {
  margin-top: 14px !important;
}
html body.reader-tap-controls #chapterPanel.chapter-popup .chapter-text-search-hint {
  margin: 14px 20px 0;
  color: var(--contents-muted, var(--chapter-popup-muted));
  font: 500 0.82rem/1.45 var(--ui-font, -apple-system, BlinkMacSystemFont, sans-serif);
  text-align: center;
}
html body.reader-tap-controls #chapterPanel.chapter-popup .chapter-text-search-hint[hidden] {
  display: none;
}
/* In a single-chapter reading only passage matches matter: the story's own
 * chapter row, the group labels and each match's repeated title step aside. */
html body.reader-tap-controls #chapterPanel.chapter-popup.is-text-search #chapterList :is(.chapter-volume-divider, .chapter-entry),
html body.reader-tap-controls #chapterPanel.chapter-popup.is-text-search #chapterList .is-search-result .chapter-option-copy > small:last-child {
  display: none !important;
}
/* The field's own Clear button is enough; hide the native search cancel. */
#chapterSearchInput::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* A PDF's two ways of reading: the original pages or its text in Page Mode.
 * The thumb slides between them; Speed is reached from either. */
.reader-view-switch {
  --reader-view-switch-track: rgba(255, 255, 255, 0.08);
  --reader-view-switch-thumb: rgba(255, 255, 255, 0.16);
  --reader-view-switch-shadow: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 188px;
  height: 36px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--reader-view-switch-track);
  pointer-events: auto;
}
.reader-view-switch[hidden] { display: none !important; }
.reader-view-switch-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--reader-view-switch-thumb);
  box-shadow: var(--reader-view-switch-shadow);
  transition: transform 360ms cubic-bezier(0.22, 0.8, 0.2, 1.06);
}
.reader-view-switch[data-view="text"] .reader-view-switch-thumb { transform: translateX(100%); }
.reader-view-switch > button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--reader-corner-ink);
  font: 620 13px/1 var(--ui-font, -apple-system, BlinkMacSystemFont, sans-serif);
  letter-spacing: 0.005em;
  opacity: 0.62;
  box-shadow: none;
  transform: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 220ms ease;
}
.reader-view-switch > button[aria-pressed="true"] { opacity: 1; }
.reader-view-switch > button:disabled { cursor: default; }
.reader-view-switch > button:focus-visible {
  outline: 2px solid var(--reader-corner-accent);
  outline-offset: 1px;
}
.reader-view-switch-glyph {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html:not(.theme-dark) body:not(.theme-dark) .reader-view-switch {
  --reader-view-switch-track: rgba(48, 44, 41, 0.07);
  --reader-view-switch-thumb: var(--light-raised, #f8f1e8);
  --reader-view-switch-shadow: 0 1px 3px rgba(83, 59, 38, 0.16);
}
html.theme-twilight body.theme-twilight .reader-view-switch {
  --reader-view-switch-track: rgba(255, 255, 255, 0.07);
  --reader-view-switch-thumb: var(--twilight-raised, #382944);
}
@media (prefers-reduced-motion: reduce) {
  .reader-view-switch-thumb, .reader-view-switch > button { transition: none; }
}


/* The approved book/R and outlined serif lettering share their exact geometry
 * across Home, launch and the exported app assets. No brand font is required. */
:root { --rhythm-brand-accent: #b64e44; }

.rhythm-brand-period { fill: var(--rhythm-brand-accent); }
.rhythm-brand-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}

#onboardingOverlay .rhythm-intro-stage::before { background: var(--rhythm-launch-paper) !important; }
#onboardingOverlay .rhythm-intro-stage::after { background: none !important; }
#onboardingOverlay .rhythm-intro-brand {
  /* A slightly raised centre balances the mark with the ready prompt. */
  top: 46%;
  display: grid;
  place-items: center;
  width: max-content;
  height: auto;
  padding: 0;
  color: var(--rhythm-launch-ink) !important;
}
#onboardingOverlay .rhythm-intro-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(144px, 40vw, 180px);
  aspect-ratio: 1;
  /* The mark takes the launch ink, so it reads on light paper as well as dark. */
  color: var(--rhythm-launch-ink, #fff);
  background: none;
  border: 0;
  box-shadow: none;
}
#onboardingOverlay .rhythm-intro-book {
  display: block;
  width: 70%;
  height: auto;
  aspect-ratio: 250 / 195;
  overflow: visible;
  fill: currentColor;
  color: inherit;
  /* Balance the R's heavier left side and low visual centre. The flight
   * measures this adjusted SVG, so its landing remains aligned with Home. */
  transform-box: border-box;
  transform: translate(6.5%, -1.1%);
}
/* Launches that continue on their own show no prompt; Replay Tutorial keeps it. */
#onboardingOverlay .rhythm-intro-stage.is-auto-advance .rhythm-intro-hint {
  visibility: hidden !important;
}
#onboardingOverlay .rhythm-intro-hint {
  top: calc(100% + 34px);
  width: max-content;
  max-width: calc(100vw - 40px);
  color: var(--rhythm-launch-ink) !important;
}
#onboardingOverlay.is-logo-handoff .rhythm-intro-tile {
  color: var(--rhythm-handoff-ink, var(--rhythm-launch-ink));
  transition: color 260ms ease;
}

@media (max-height: 500px) and (orientation: landscape) {
  #onboardingOverlay .rhythm-intro-tile { width: 128px; }
  #onboardingOverlay .rhythm-intro-hint { top: calc(100% + 20px); }
}
@media (prefers-reduced-motion: reduce) {
  #onboardingOverlay .rhythm-intro-tile { transition: none; }
}


/*
 * App shell ownership contract
 * ============================
 *
 * This is the last stylesheet loaded by the app. It is the only place new
 * rules may define viewport geometry, navigation-surface visibility, the
 * splash-to-app handoff, bottom navigation, or compact WebKit paint topology.
 * Feature styling belongs in styles.css until its own extraction pass.
 *
 * Keep this file intentionally small and structural. If a rule describes the
 * inside of a Home, Library, Discover, or Settings component, it does not
 * belong here.
 */

/* Base shell and navigation ownership. */
.app-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  display: block;
}

#inputPanel.input-panel {
  --home-nav-height: calc(78px + max(8px, calc(env(safe-area-inset-bottom) * 0.28)));
  z-index: 180;
}

#inputPanel.input-panel:not(.is-open) {
  display: none !important;
}

#inputPanel.input-panel.is-open {
  display: block !important;
}

/* Navigation destinations share one bounded page scroller. Keeping the
 * viewport panel stationary avoids falling back to body scrolling on short
 * screens, while every destination can still grow beyond the viewport. */
#inputPanel#inputPanel.input-panel.is-open {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

#inputPanel#inputPanel.input-panel.is-open > .menu-card.menu-card {
  box-sizing: border-box !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Home can grow beyond the viewport while the menu card remains the sole
 * vertical scroller for the destination. */
#inputPanel#inputPanel#inputPanel.input-panel.is-open
  > .menu-card.menu-card:has(> #menuMain:not([hidden])) {
  --home-scroll-bottom-clearance: max(118px, calc(env(safe-area-inset-bottom) + 96px));
  padding-bottom: 0 !important;
  overflow-y: auto !important;
  scroll-padding-bottom: var(--home-scroll-bottom-clearance);
  touch-action: pan-y !important;
}

#inputPanel#inputPanel#inputPanel.input-panel.is-open
  > .menu-card.menu-card
  > #menuMain#menuMain.home-dashboard:not([hidden]) {
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  touch-action: pan-y !important;
}

#inputPanel#inputPanel#inputPanel.input-panel.is-open
  > .menu-card.menu-card
  > #menuMain#menuMain.home-dashboard:not([hidden])::after {
  content: "";
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  min-height: var(--home-scroll-bottom-clearance);
  flex: 0 0 var(--home-scroll-bottom-clearance);
  pointer-events: none;
}

#homeBottomNav.home-bottom-nav {
  /* Keep the safe-area geometry stable while lifting the complete tab cluster
   * toward the material's top edge. The fill stays opaque so scrolled text
   * cannot show through the navigation labels. Only part of the home-indicator
   * inset is reserved, keeping the labels close to it; the padding and the tab
   * indicator both use this offset in every theme. */
  --home-nav-safe-bottom: max(8px, calc(env(safe-area-inset-bottom) * 0.28));
  --home-nav-content-lift: 6px;
  --home-nav-selected: #f47f73;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 190;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0px, 0.5vw, 3px);
  width: 100vw;
  max-width: none;
  min-height: var(--home-nav-height) !important;
  margin: 0;
  padding: 8px clamp(10px, 3vw, 18px) var(--home-nav-safe-bottom) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 0 !important;
  background: var(--home-nav-light-surface, #121317) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Status-bar scroll edge for the navigation destinations, after the iOS soft
 * scroll-edge effect: no bar, just content blurring and dimming as it nears
 * the top. Two stacked layers make the blur progressive. ::before is a light
 * blur with a wash of the nav material that reaches a little past the status
 * bar; ::after is a heavier blur over the status bar itself. Each tapers
 * through its mask, so the blur is strongest at the edge and fades to nothing
 * below the clock. Both only exist while the dock does, and have no height
 * where there is no top inset. */
#homeBottomNav.home-bottom-nav::before,
#homeBottomNav.home-bottom-nav::after {
  content: "" !important;
  display: block !important;
  position: fixed;
  inset: 0 0 auto 0;
  pointer-events: none;
}

#homeBottomNav.home-bottom-nav::before {
  height: calc(env(safe-area-inset-top) * 1.3);
  background: color-mix(in srgb, var(--home-nav-light-surface, #121317) 34%, transparent);
  -webkit-backdrop-filter: blur(5px) saturate(1.3);
  backdrop-filter: blur(5px) saturate(1.3);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}

#homeBottomNav.home-bottom-nav::after {
  height: env(safe-area-inset-top);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

html.theme-dark #homeBottomNav.home-bottom-nav,
body.theme-dark #homeBottomNav.home-bottom-nav {
  /* Outrank the legacy theme-dark padding in styles.css so the tab indicator
   * and the tab cluster share one safe-area offset in every theme. */
  min-height: var(--home-nav-height) !important;
  padding: 8px clamp(10px, 3vw, 18px) var(--home-nav-safe-bottom) !important;
  border-top-color: rgba(255, 255, 255, 0.07) !important;
  background: var(--home-nav-light-surface, #121317) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#homeBottomNav.home-bottom-nav button {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 70px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(255, 255, 255, 0.52) !important;
  font-family: var(--ui-font);
  font-size: 0.69rem;
  font-weight: 480;
  letter-spacing: 0.012em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 180ms cubic-bezier(0.2, 0.72, 0.2, 1);
}

#homeBottomNav.home-bottom-nav button::before {
  content: none !important;
  display: none !important;
}

#homeBottomNav.home-bottom-nav > .home-tab-indicator {
  position: absolute;
  left: 0;
  bottom: calc(var(--home-nav-safe-bottom) + 22px + var(--home-nav-content-lift));
  z-index: 0;
  width: 14px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: var(--home-nav-selected);
  box-shadow: none;
  opacity: 0;
  transition: transform 180ms cubic-bezier(0.2, 0.72, 0.2, 1);
  pointer-events: none;
}

#homeBottomNav.home-bottom-nav.has-tab-indicator > .home-tab-indicator {
  opacity: 0.88;
}

html.theme-dark #homeBottomNav.home-bottom-nav button,
body.theme-dark #homeBottomNav.home-bottom-nav button {
  color: rgba(255, 255, 255, 0.52) !important;
}

#homeBottomNav.home-bottom-nav button svg {
  position: absolute;
  left: 50%;
  bottom: calc(28px + var(--home-nav-content-lift));
  z-index: 1;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
  opacity: 0.78;
  transform: translateX(-50%);
  transition: color 180ms cubic-bezier(0.2, 0.72, 0.2, 1), opacity 180ms ease;
}

#homeBottomNav.home-bottom-nav button:nth-child(4) svg,
#homeBottomNav.home-bottom-nav button:nth-child(5) svg {
  width: 28px;
  height: 28px;
  bottom: calc(28px + var(--home-nav-content-lift));
}

#homeBottomNav.home-bottom-nav button span {
  position: absolute;
  right: 4px;
  bottom: calc(4px + var(--home-nav-content-lift));
  left: 4px;
  z-index: 1;
  display: block;
  box-sizing: content-box;
  min-height: 1.2em;
  padding-bottom: 0.12em;
  overflow: hidden;
  max-width: 100%;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Persistent route docks use clipped single-line labels for ellipsis. Their
 * line boxes must still include the UI font's descender area. */
.gutenberg-bottom-nav button {
  line-height: 1.2 !important;
}

.gutenberg-bottom-nav button > span {
  display: block;
  box-sizing: content-box;
  min-height: 1.2em;
  padding-bottom: 0.12em;
  line-height: 1.2 !important;
}

#homeBottomNav.home-bottom-nav button.is-active {
  color: rgba(255, 255, 255, 0.88) !important;
  font-weight: 540;
}

#homeBottomNav.home-bottom-nav button.is-active svg {
  color: var(--home-nav-selected) !important;
  opacity: 1;
}

html.theme-dark #homeBottomNav.home-bottom-nav button.is-active,
body.theme-dark #homeBottomNav.home-bottom-nav button.is-active {
  color: rgba(255, 255, 255, 0.88) !important;
}

#homeBottomNav.home-bottom-nav button:focus-visible {
  outline: 2px solid color-mix(in srgb, currentColor 62%, transparent);
  outline-offset: -5px;
}

#homeBottomNav.home-bottom-nav button:is(:active, .is-tactile-press) {
  transform: none !important;
  filter: none !important;
}

body:not(.is-navigation-surface-open) #homeBottomNav.home-bottom-nav,
body:has(.book-details-panel:not([hidden])):not(:has(.book-details-viewport.is-active:not([data-navigation-phase="open"]))) #homeBottomNav.home-bottom-nav,
body:has(.topic-discovery-panel:not([hidden])) #homeBottomNav.home-bottom-nav,
body.is-discover-preview-open #homeBottomNav.home-bottom-nav {
  display: none !important;
}

/* Discover info pages retain the primary dock throughout entry, related-page
 * navigation and Back. The preserved Books cover layout also keeps its dock. */
body.is-navigation-surface-open.is-discover-info-stack-open #homeBottomNav.home-bottom-nav,
body.is-discover-preview-open:has(
  #discoverPreviewPanel.is-discover-books-detail:not(.is-short-read-info):not([hidden])
) #homeBottomNav.home-bottom-nav {
  display: grid !important;
}

/*
 * Single active screen paint contract
 * -----------------------------------
 * Speed/Page readers stay mounted so reading state is preserved, but they
 * must not remain in WebKit's paint tree while a navigation destination owns
 * the viewport.
 */
.app-shell > :is(.reader-panel, .ebook-reader)[hidden],
body.is-navigation-surface-open > .app-shell > :is(.reader-panel, .ebook-reader),
body.is-navigation-surface-open > .app-shell > :is(
  /* Discover photographs (.is-photo) open the viewer over a destination. */
  #ebookImageViewer:not(.is-photo),
  #readerQuickMenu,
  #chapterPanel,
  #pdfPagePanel,
  #memoryPanel,
  #bookNotePanel,
  #characterLegendPanel,
  #pdfSourcePanel
) {
  display: none !important;
}

/* PDF mode reuses the mounted Speed dock itself. Only the reader headers leave
 * the paint tree; keeping one dock preserves its layout and DOM identity. */
body.pdf-source-mode > .app-shell > .ebook-reader > :is(.ebook-top-bar, .ebook-bottom-bar),
body.pdf-source-entering > .app-shell > .ebook-reader > :is(.ebook-top-bar, .ebook-bottom-bar) {
  display: none !important;
}
/* The reader header keeps its space under the PDF, so the Speed stage (and the
 * word flights aimed at it) measure exactly as they will once Speed shows. */
body.pdf-source-mode > .app-shell > .reader-panel > .top-bar,
body.pdf-source-entering > .app-shell > .reader-panel > .top-bar {
  visibility: hidden !important;
  pointer-events: none !important;
}

body:is(.pdf-source-mode, .pdf-source-entering):not(.pdf-controls-hidden):not(.is-reader-quick-menu-open):not(.is-chapter-panel-open):not(.is-reader-panel-subview-open):not(:has(.character-legend-panel:not([hidden])))
  > .app-shell
  > #readerBottomDock#readerBottomDock#readerBottomDock,
body:is(.pdf-source-mode, .pdf-source-entering):not(.pdf-controls-hidden):not(.is-reader-quick-menu-open):not(.is-chapter-panel-open):not(.is-reader-panel-subview-open):not(:has(.character-legend-panel:not([hidden])))
  > .app-shell
  > .reader-panel
  > #readerBottomDock#readerBottomDock#readerBottomDock {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Speed words, word flights and chapter text share the same optical lift. */
:root {
  --reader-speed-word-lift: clamp(-104px, -11.5vh, -82px);
}

body.has-loaded-text:not(.ebook-mode)
  .reader-panel:has(#wordDisplay.has-chapter-title) {
  --chapter-optical-center-y: calc(50% + var(--reader-speed-word-lift));
}

/* Anchor chapter text to the same stage as the Speed word, including its
 * header and safe-area offsets, instead of the full viewport midpoint. */
body.has-loaded-text:not(.ebook-mode) #wordDisplay.has-chapter-title {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
}

body.has-loaded-text:not(.ebook-mode)
  #wordDisplay.has-chapter-title
  .speed-chapter-card {
  position: absolute !important;
}

body.is-navigation-surface-open #wordDisplay.has-chapter-title,
body.is-navigation-surface-open .speed-chapter-card {
  display: none !important;
  animation: none !important;
}

body.is-navigation-surface-open
  .reader-panel:has(#wordDisplay.has-chapter-title)
  .focus-stage::before {
  content: none !important;
  animation: none !important;
}

body.is-navigation-surface-open :is(
  .context-selection-glider,
  .context-zoom-viewport,
  .context-zoom-surface,
  .context-flight-word,
  .pdf-source-selection-glider,
  .pdf-source-selection-pulse,
  .pdf-source-word-mask,
  .pdf-source-flight-word,
  #fontSizePopover
) {
  display: none !important;
  animation: none !important;
}

#inputPanel.is-open,
.discover-panel:not([hidden]),
.topic-discovery-panel:not([hidden]),
.onboarding-overlay:not([hidden]):not(.is-leaving) {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  isolation: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* The input panel is book details' moving underlay while that stack is open. */
body:not(.is-book-details-stack-open) #inputPanel.is-open,
.discover-panel:not([hidden]),
.topic-discovery-panel:not([hidden]),
.onboarding-overlay:not([hidden]):not(.is-leaving) {
  transform: none !important;
}

#inputPanel.is-open {
  background-color: var(--light-page, #f2eee5) !important;
}

html.theme-dark #inputPanel.is-open,
body.theme-dark #inputPanel.is-open {
  background-color: var(--home-dark-canvas, #0b0d10) !important;
}

.discover-panel:not([hidden]) {
  background-color: var(--discover-page, #f8f3eb) !important;
}

.topic-discovery-panel:not([hidden]) {
  background-color: var(--topic-dossier-page, #f7f3eb) !important;
}

.onboarding-overlay:not([hidden]) {
  z-index: 3000 !important;
  background-color: transparent !important;
  pointer-events: auto !important;
}

.home-ambient-canvas,
.destination-ambient-canvas,
.rhythm-intro-canvas {
  display: none !important;
}

/* The denser legacy star field is opt-in so the default paint topology stays
 * unchanged. One fixed canvas follows every primary menu destination. */
body.menu-stars-enabled
  #inputPanel#inputPanel.home-ambient-active
  > #homeAmbientCanvas.home-ambient-canvas {
  display: block !important;
  opacity: 0.76 !important;
}

html:not(.theme-dark)
  body.menu-stars-enabled
  #inputPanel#inputPanel.home-ambient-active
  > #homeAmbientCanvas.home-ambient-canvas {
  opacity: 0.58 !important;
}

body.menu-stars-enabled
  #inputPanel#inputPanel.home-ambient-active
  > #discoverPanel.discover-panel:not([hidden]),
body.menu-stars-enabled
  #inputPanel#inputPanel.home-ambient-active
  > #discoverPanel.discover-panel:not([hidden])
  #discoverSheet.discover-sheet {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

body.menu-stars-enabled
  #inputPanel#inputPanel.home-ambient-active:has(> #discoverPanel:not([hidden]))
  > .menu-card {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #homeBottomNav.home-bottom-nav > .home-tab-indicator,
  #homeBottomNav.home-bottom-nav button,
  #homeBottomNav.home-bottom-nav button svg {
    transition: none !important;
  }

  body.menu-stars-enabled
    #inputPanel#inputPanel.home-ambient-active
    > #homeAmbientCanvas.home-ambient-canvas {
    opacity: 0.48 !important;
  }
}

/* Destination roots are persistent paint surfaces, never entrance effects. */
#menuMain:not([hidden]):not(.is-destination-cascading) > :not([hidden]),
#collectionView:not([hidden]):not(.is-destination-cascading) > :not([hidden]),
#gutenbergView:not([hidden]):not(.is-destination-cascading) > :not([hidden]),
#pubmedView:not([hidden]):not(.is-destination-cascading) > :not([hidden]),
#statsView:not([hidden]):not(.is-destination-cascading) > :not([hidden]),
#settingsView:not([hidden]):not(.is-destination-cascading) > :not([hidden]),
#helpView:not([hidden]):not(.is-destination-cascading) > :not([hidden]),
#discoverView > :not([hidden]),
.topic-discovery-content > :not([hidden]) {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/*
 * Safari paint-stability contract
 * --------------------------------
 * The viewport shell is stationary. The active menu card is the only vertical
 * scroller, and the opaque dock remains its sibling instead of a filtered
 * compositor layer.
 */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }

  .app-shell {
    position: relative !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    contain: none !important;
  }

  /* The repeated IDs are a deliberate specificity fence against legacy
   * feature selectors in styles.css. Remove them only after those generations
   * have been extracted; source order alone cannot beat their old `:has()`
   * selectors when both declarations are important. */
  #inputPanel#inputPanel#inputPanel.input-panel.is-open {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    -webkit-overflow-scrolling: auto !important;
    contain: none !important;
    isolation: auto !important;
  }

  /* Book details slides over the whole panel, which is its moving underlay. */
  body:not(.is-book-details-stack-open) #inputPanel#inputPanel#inputPanel.input-panel.is-open {
    transform: none !important;
    will-change: auto !important;
  }

  #inputPanel#inputPanel#inputPanel.is-open > .menu-card.menu-card {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: auto !important;
    contain: none !important;
    isolation: auto !important;
  }

  /* The Stats and reading guide push (runMenuPageChange) slides this
   * scroller against a static copy of it. */
  #inputPanel#inputPanel#inputPanel.is-open > .menu-card.menu-card:not(.is-page-push) {
    transform: none !important;
    will-change: auto !important;
  }

  /* While two pages share the panel, page-level rules (Home forces its
   * dashboard to display) can match through the other card; each card's
   * hidden page roots stay hidden. */
  #inputPanel#inputPanel#inputPanel.is-open > .menu-card.is-page-push > [hidden] {
    display: none !important;
  }

  #inputPanel#inputPanel#inputPanel.is-open > .menu-card.menu-page-ghost.is-parked {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #inputPanel#inputPanel#inputPanel.input-panel.is-open.is-settings-screen:has(
    > .menu-card > #settingsView:not([hidden])
  ) > .menu-card {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  #inputPanel#inputPanel#inputPanel.is-open > :is(
    .discover-panel,
    .topic-discovery-panel,
    .book-details-panel
  ):not([hidden]) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    contain: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  #inputPanel#inputPanel#inputPanel:has(> .discover-panel:not([hidden])) > .menu-card,
  #inputPanel#inputPanel#inputPanel:has(> .topic-discovery-panel:not([hidden])) > .menu-card,
  #inputPanel#inputPanel#inputPanel:has(> .book-details-panel:not([hidden])) > .menu-card {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #inputPanel#inputPanel#inputPanel :is(
    #menuMain,
    #collectionView,
    #gutenbergView,
    #pubmedView,
    #statsView,
    #settingsView,
    #helpView,
    #discoverView,
    .discover-sheet,
    .topic-discovery-sheet
  ) {
    content-visibility: visible !important;
    contain: none !important;
    transform: none !important;
    will-change: auto !important;
  }

  #inputPanel#inputPanel#inputPanel .discover-panel .discover-sheet,
  #inputPanel#inputPanel#inputPanel .topic-discovery-panel .topic-discovery-sheet {
    -webkit-overflow-scrolling: auto !important;
  }

  #homeBottomNav#homeBottomNav#homeBottomNav#homeBottomNav.home-bottom-nav {
    position: absolute !important;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--home-nav-light-surface, #121317) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
    will-change: auto !important;
  }

  html.theme-dark #homeBottomNav#homeBottomNav#homeBottomNav#homeBottomNav.home-bottom-nav,
  body.theme-dark #homeBottomNav#homeBottomNav#homeBottomNav#homeBottomNav.home-bottom-nav {
    background: var(--home-nav-light-surface, #121317) !important;
    box-shadow: none !important;
  }
}

/* Splash isolation and static-tile handoff. */
html.onboarding-primed .app-shell,
html.onboarding-revealing:not(.onboarding-handoff-prepainting):not(.onboarding-handoff-landed) .app-shell {
  visibility: hidden !important;
}

html.onboarding-handoff-prepainting .app-shell,
html.onboarding-handoff-landed .app-shell {
  visibility: visible !important;
}

/* Paint the launch backdrop as soon as the HTML exists, while deferred app
 * scripts are still loading. The hidden attribute keeps
 * the surface out of the accessibility tree until app.js formally opens it. */
html.onboarding-primed #onboardingOverlay.onboarding-overlay[hidden] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

.onboarding-overlay[data-step="intro"],
html.theme-dark .onboarding-overlay[data-step="intro"],
body.theme-dark .onboarding-overlay[data-step="intro"],
.rhythm-intro-stage,
html.theme-dark .rhythm-intro-stage,
body.theme-dark .rhythm-intro-stage,
html:not(.theme-dark) body:not(.theme-dark) .rhythm-intro-stage {
  background: transparent !important;
}

.rhythm-intro-stage::before {
  display: block !important;
}

.onboarding-overlay.is-logo-handoff .rhythm-intro-stage::before,
.onboarding-overlay.is-logo-handoff .rhythm-intro-stage::after {
  opacity: 0 !important;
}

.onboarding-overlay[data-step="intro"] .rhythm-intro-stage::before,
.onboarding-overlay[data-step="intro"] .rhythm-intro-stage::after {
  transition-duration: 560ms !important;
}

.onboarding-overlay.is-leaving {
  transition-duration: 320ms !important;
}

/* Once the tile has landed, only its opaque backdrop is allowed to fade.
 * The flown mark itself must not inherit the generic dismissal shift/fade. */
.onboarding-overlay.is-logo-handoff {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

.onboarding-overlay.is-logo-handoff .rhythm-intro-brand {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}

/* The tile lands first; the stationary lettering then fades in beside it. */
.home-brand-mark.is-logo-handoff-target,
.home-brand-word.is-logo-handoff-target {
  visibility: hidden !important;
}

.onboarding-overlay.is-logo-handoff-flight .rhythm-intro-tile {
  will-change: transform;
}

/*
 * Compact WebKit shelf paint contract
 * -----------------------------------
 * Horizontal rails remain native scroll surfaces, but are not promoted to
 * separate momentum/compositor layers inside the destination scroller.
 */
@media (max-width: 760px) {
  #inputPanel#inputPanel#inputPanel .app-shelf-rail,
  #discoverPanel#discoverPanel#discoverPanel .app-shelf-rail,
  #topicDiscoveryPanel#topicDiscoveryPanel#topicDiscoveryPanel .app-shelf-rail {
    -webkit-overflow-scrolling: auto !important;
    scroll-snap-type: none !important;
    content-visibility: visible !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #inputPanel#inputPanel#inputPanel .app-shelf-rail > *,
  #discoverPanel#discoverPanel#discoverPanel .app-shelf-rail > *,
  #topicDiscoveryPanel#topicDiscoveryPanel#topicDiscoveryPanel .app-shelf-rail > * {
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
    contain: none !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    animation: none !important;
  }

  #collectionView#collectionView#collectionView:not([hidden]):not(.is-destination-cascading) :is(
    .library-section,
    .library-content-section,
    .collection-list,
    .library-book-strip,
    .library-stack-list
  ),
  #discoverPanel#discoverPanel#discoverPanel:not([hidden]):not(.is-destination-cascading) :is(
    .discover-sheet,
    .discover-header,
    .discover-persistent-controls,
    .discover-content,
    #discoverView,
    .discover-catalogue-shell,
    .discover-for-you-feature-section,
    .discover-for-you-popular,
    .discover-for-you-deeper
  ) {
    visibility: visible !important;
    opacity: 1 !important;
    content-visibility: visible !important;
    contain: none !important;
    transform: none !important;
    translate: none !important;
    will-change: auto !important;
    animation: none !important;
  }
}

/*
 * Primary destination fade
 * ---------------------------
 * Primary tabs arrive together without hiding an entire destination while
 * data renders. Only stable section wrappers fade; page
 * roots, vertical scrollers, horizontal shelves, and cards never move or keep
 * a compositor layer after the short entrance completes.
 */
@media (prefers-reduced-motion: no-preference) {
  .is-destination-cascading {
    --destination-fade-play-state: paused;
  }

  .is-destination-cascading.is-destination-playing {
    --destination-fade-play-state: running;
  }

  #menuMain#menuMain#menuMain.is-destination-cascading > :is(
    .home-hero,
    .home-resume-section,
    .home-progress-section,
    .home-discover-section,
    .home-add-section
  ),
  #collectionView#collectionView#collectionView.is-destination-cascading > :is(
    .collection-header,
    .library-search,
    .library-category-row,
    .library-meta-row,
    .library-section
  ),
  #discoverPanel#discoverPanel#discoverPanel#discoverPanel.is-destination-cascading
    > .discover-cabinet-underlay-motion > .discover-sheet
    > :is(.discover-header, .discover-persistent-controls, .discover-content),
  #settingsView#settingsView#settingsView.is-destination-cascading > .collection-header,
  #settingsView#settingsView#settingsView.is-destination-cascading
    > .settings-stack
    > .settings-group {
    animation: app-destination-cascade-arrive 170ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
    animation-play-state: var(--destination-fade-play-state, paused) !important;
  }

  /* Preserve the existing entrances for secondary routes and reader controls. */
  :is(
    #gutenbergView#gutenbergView#gutenbergView,
    #pubmedView#pubmedView#pubmedView,
    #statsView#statsView#statsView,
    #helpView#helpView#helpView
  ).is-destination-cascading > :not([hidden]),
  html body .app-shell.app-shell
    > .reader-panel.reader-panel.is-destination-cascading
    > :is(.top-bar, .focus-stage, .bottom-dock),
  #ebookReader#ebookReader#ebookReader.is-destination-cascading
    > :is(.ebook-top-bar, .ebook-page-shell, .ebook-bottom-bar) {
    animation: app-destination-cascade-arrive 140ms cubic-bezier(0.2, 0.72, 0.2, 1) both !important;
    animation-play-state: var(--destination-fade-play-state, paused) !important;
  }

  html body .app-shell.app-shell
    > .reader-panel.reader-panel.is-destination-cascading
    > .focus-stage,
  #ebookReader#ebookReader#ebookReader.is-destination-cascading > .ebook-page-shell {
    animation-delay: 16ms !important;
  }

  html body .app-shell.app-shell
    > .reader-panel.reader-panel.is-destination-cascading
    > .bottom-dock,
  #ebookReader#ebookReader#ebookReader.is-destination-cascading > .ebook-bottom-bar {
    animation-delay: 32ms !important;
  }

  :is(
    #gutenbergView#gutenbergView#gutenbergView,
    #pubmedView#pubmedView#pubmedView,
    #statsView#statsView#statsView,
    #helpView#helpView#helpView
  ).is-destination-cascading > :nth-child(2) {
    animation-delay: 16ms !important;
  }

  :is(
    #gutenbergView#gutenbergView#gutenbergView,
    #pubmedView#pubmedView#pubmedView,
    #statsView#statsView#statsView,
    #helpView#helpView#helpView
  ).is-destination-cascading > :nth-child(3) {
    animation-delay: 32ms !important;
  }

  :is(
    #gutenbergView#gutenbergView#gutenbergView,
    #pubmedView#pubmedView#pubmedView,
    #statsView#statsView#statsView,
    #helpView#helpView#helpView
  ).is-destination-cascading > :nth-child(n + 4) {
    animation-delay: 48ms !important;
  }
}

@keyframes app-destination-cascade-arrive {
  from { opacity: 0.66; }
  to { opacity: 1; }
}

/* Cabinet movement belongs to dedicated viewport layers. Never apply the
 * compact scroller's transform/translate/animation resets to these wrappers. */
#discoverPanel#discoverPanel .discover-cabinet-route-viewport:not(.is-active) {
  /* Inert and an offscreen transform only prevent interaction. They still
   * leave the whole image/blur catalogue in layout and allow lazy images to
   * load before Cabinet is opened. Keep its prepared DOM, but no paint tree. */
  display: none !important;
}

#discoverPanel#discoverPanel .discover-cabinet-route-viewport {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
  isolation: isolate !important;
  contain: layout paint style !important;
}

#discoverPanel .discover-cabinet-motion-layer,
#discoverPanel .discover-cabinet-underlay-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
  backface-visibility: hidden;
}

#discoverPanel .discover-cabinet-underlay-motion {
  position: fixed;
}

#discoverPanel .discover-cabinet-motion-layer {
  transform: translate3d(100%, 0, 0);
}

#discoverPanel .discover-cabinet-reveal-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
  opacity: 0;
}

#discoverPanel#discoverPanel .discover-cabinet-route-screen {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
  touch-action: pan-x pan-y !important;
  backface-visibility: hidden !important;
  contain: paint !important;
}

/* The live scroller keeps its existing paint rules inside the moving layer. */
#discoverPanel#discoverPanel#discoverPanel#discoverPanel#discoverPanel.is-cabinet-route-active
  #discoverSheet[data-discover-cabinet-underlay="true"] {
  pointer-events: none !important;
}

/* During Cabinet movement use one layer per viewport and avoid continuously
 * re-blurring the moving artwork behind the persistent navigation. */
body.is-cabinet-stack-animating #homeBottomNav#homeBottomNav#homeBottomNav#homeBottomNav.home-bottom-nav {
  background: var(--home-nav-light-surface, #121317) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#discoverPanel#discoverPanel .discover-cabinet-edge-swipe-zone {
  position: fixed !important;
  /* Leave the breadcrumb's arrow and label exposed to taps. */
  top: max(72px, calc(env(safe-area-inset-top) + 56px)) !important;
  bottom: max(88px, calc(env(safe-area-inset-bottom) + 78px)) !important;
  left: 0 !important;
  z-index: 3 !important;
  width: max(44px, calc(env(safe-area-inset-left) + 32px)) !important;
  display: block !important;
  background: transparent !important;
  pointer-events: none !important;
  touch-action: none !important;
}

#discoverPanel#discoverPanel .discover-cabinet-route-viewport.is-active .discover-cabinet-edge-swipe-zone {
  pointer-events: auto !important;
}

#discoverPanel#discoverPanel .discover-cabinet-route-viewport:not(.is-active) .discover-cabinet-route-screen {
  pointer-events: none !important;
}

/* Book details is a pushed page above Home/Library. Inactive wrappers have no
 * box, so instant opens (reader returns, related-item handoffs) are unchanged.
 * While it moves, #inputPanel (with the bottom navigation) is the underlay. */
.book-details-viewport:not(.is-active),
.book-details-viewport:not(.is-active) > .book-details-motion,
.book-details-viewport:not(.is-active) > .book-details-motion > .book-details-reveal {
  display: contents;
}

.book-details-viewport.is-active {
  position: fixed;
  inset: 0;
  z-index: 220;
  overflow: clip;
  contain: layout paint style;
  isolation: isolate;
}

.book-details-viewport.is-active :is(.book-details-motion, .book-details-reveal) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: clip;
  contain: layout paint;
}

.book-details-viewport.is-active > .book-details-motion { transform: translate3d(100%, 0, 0); }
.book-details-viewport.is-active[data-navigation-phase="open"] > .book-details-motion { transform: none !important; }

.book-details-viewport.is-active #bookDetailsPanel.book-details-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overscroll-behavior: none;
  touch-action: pan-y pinch-zoom !important;
}
.book-details-viewport.is-swiping-back #bookDetailsPanel.book-details-panel { overflow-y: hidden !important; }

/* Info pages use separate viewport layers. Inactive wrappers have no box,
 * preserving the optional Books cover flight and carousel's original geometry. */
.discover-info-viewport:not(.is-active),
.discover-info-viewport:not(.is-active) > .discover-info-motion,
.discover-info-viewport:not(.is-active) > .discover-info-motion > .discover-info-reveal {
  display: contents;
}

#discoverPanel > .discover-info-viewport.is-active {
  position: fixed;
  inset: 0 0 var(--home-nav-height) 0;
  z-index: 30;
  overflow: hidden;
  contain: layout paint style;
  isolation: isolate;
}

.discover-info-viewport.is-active :is(.discover-info-motion, .discover-info-reveal, .discover-info-snapshot) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  contain: layout paint;
}

.discover-info-viewport.is-active > .discover-info-motion {
  z-index: 1;
  transform: translate3d(100%, 0, 0);
}

.discover-info-viewport.is-active .discover-info-reveal { opacity: 1; }

/* A settled opaque page does not need a promoted 3D animation surface.
 * Moving phases still use the explicit controller's transforms/will-change. */
.discover-info-viewport.is-active[data-navigation-phase="open"] > .discover-info-motion {
  transform: none !important;
}

/* Preserve the catalogue DOM/scroll while releasing its covered paint tree.
 * The adapter removes this class before a root Back or swipe starts. */
#discoverPanel .is-info-underlay-parked {
  content-visibility: hidden;
  visibility: hidden !important;
}

/* Let vertical scrolling and pinch zoom stay native while the info adapter
 * owns rightward Back drags. Books keeps its existing gesture surface. */
.discover-info-viewport.is-active :is(.discover-info-motion, .discover-preview-panel, .discover-preview-sheet) {
  touch-action: pan-y pinch-zoom !important;
}

/* This is a navigation page, not a vertically draggable sheet. Keep Safari's
 * boundary bounce out of the nested moving layers; only the sheet scrolls. */
.discover-info-viewport.is-active,
.discover-info-viewport.is-active :is(.discover-info-motion, .discover-info-reveal, .discover-info-snapshot, .discover-preview-panel) {
  overflow: clip !important;
  overscroll-behavior: none;
}
.discover-info-viewport.is-active .discover-preview-sheet {
  overscroll-behavior: none;
}
.discover-info-viewport.is-swiping-back .discover-preview-sheet {
  overflow-y: hidden !important;
}
.discover-info-viewport.is-active > .discover-info-snapshot { z-index: 0; pointer-events: none; }
.discover-info-viewport.is-active > .discover-info-snapshot.is-returning { z-index: 2; }

#discoverPanel .discover-info-viewport.is-active .discover-preview-panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* The old modal rule hides this scroller on phones; keep the actual outgoing
 * page visible for the slide. Its motion wrapper is inert during info visits. */
body.is-discover-info-stack-open #discoverPanel #discoverSheet {
  visibility: visible !important;
}

body.is-discover-info-stack-open #discoverPanel .is-info-underlay-parked #discoverSheet {
  visibility: hidden !important;
}

/* Home reading picks open this info page over Home itself (app.js
 * openHomeReadingPreview). Home's scroller is the sliding underlay, so the
 * Discover panel stays transparent and its catalogue layers stay unpainted. */
#inputPanel #discoverPanel.is-home-info-origin:not([hidden]) {
  background: transparent !important;
  background-color: transparent !important;
}

/* Descendants force their own visibility for Discover's stable-paint contract,
 * so clip the catalogue layers as a whole rather than hiding them. */
#inputPanel #discoverPanel.is-home-info-origin > :not(.discover-info-viewport) {
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}

#inputPanel#inputPanel#inputPanel#inputPanel:has(> #discoverPanel.is-home-info-origin:not([hidden])) > .menu-card {
  visibility: visible !important;
}

#inputPanel#inputPanel#inputPanel#inputPanel > .menu-card.is-info-underlay-parked {
  content-visibility: hidden;
  visibility: hidden !important;
}

/* WebKit recomputes backdrop blur for every pixel moving beneath it. Bottom
 * navigation material is shell-owned, so suspend that blur here while the
 * Discover book carousel is moving. */
body.is-discover-preview-open:has(
  #discoverPreviewPanel.is-discover-books-detail:is(
    .is-book-cover-transitioning,
    .is-book-carousel-dragging,
    .is-book-carousel-switching,
    .is-book-dismiss-dragging,
    .is-book-dismiss-completing
  ):not([hidden])
) #homeBottomNav.home-bottom-nav {
  background: var(--home-nav-light-surface, #121317) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.theme-dark body.is-discover-preview-open:has(
  #discoverPreviewPanel.is-discover-books-detail:is(
    .is-book-cover-transitioning,
    .is-book-carousel-dragging,
    .is-book-carousel-switching,
    .is-book-dismiss-dragging,
    .is-book-dismiss-completing
  ):not([hidden])
) #homeBottomNav.home-bottom-nav,
body.theme-dark.is-discover-preview-open:has(
  #discoverPreviewPanel.is-discover-books-detail:is(
    .is-book-cover-transitioning,
    .is-book-carousel-dragging,
    .is-book-carousel-switching,
    .is-book-dismiss-dragging,
    .is-book-dismiss-completing
  ):not([hidden])
) #homeBottomNav.home-bottom-nav {
  background: var(--home-nav-light-surface, #121317) !important;
}
/* Paused Speed context reaches the viewport edges across the stage's inset.
 * The text runs own horizontal clipping; the stage must not cut them at its
 * padded edge. Restrict this to the mounted nearby words in ordinary Speed. */
body.has-loaded-text:not(.ebook-mode) .reader-panel > #focusStage:has(> #wordDisplay:not(.has-context):not(.has-chapter-title) .speed-scrub-context) {
  overflow: visible;
}

/* Page Mode uses the measured space between the header and mounted controls.
 * Keep the sheet anchored independently of content height and old dock underlap.
 */
#wordDisplay.has-context.has-context-page-style {
  position: relative !important;
  overflow: visible !important;
}

#wordDisplay.has-context.has-context-page-style > :is(.context-ebook-paged-view, .context-ebook-scroll) {
  position: absolute !important;
  top: var(--context-ebook-page-top, 0px) !important;
  inset-inline: 0 !important;
  height: var(--context-ebook-page-height, 100%) !important;
  min-height: 0 !important;
  max-height: var(--context-ebook-page-height, 100%) !important;
  margin-block: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

#wordDisplay.has-context.has-context-page-style:not(.has-context-paged-view) > .context-ebook-scroll {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y;
}

/* Research search owns a compact sticky header; filters use the native top layer. */
#discoverPanel#discoverPanel#discoverPanel.is-research-search-panel-active > .discover-cabinet-underlay-motion > .discover-sheet > .discover-header,
#discoverPanel#discoverPanel#discoverPanel.is-research-search-panel-active #discoverFormatSwitch {
  display: none !important;
}
#discoverPanel#discoverPanel#discoverPanel.is-research-search-panel-active .discover-persistent-controls {
  position: sticky !important;
  top: 0;
  z-index: 8;
  /* The hidden Discover header normally carries the status-bar inset; keep Back reachable below it. */
  padding-top: max(10px, calc(env(safe-area-inset-top) + 6px)) !important;
}
#researchFilterDialog {
  box-sizing: border-box;
  width: min(560px, calc(100% - 32px));
  max-width: none;
  max-height: min(84dvh, 760px);
  margin: auto;
}
#discoverPanel:has(#researchFilterDialog[open]) #discoverSheet { overflow: hidden !important; }
@media (max-width: 640px) {
  #researchFilterDialog {
    position: fixed;
    inset: auto 0 0;
    width: 100%;
    margin: 0;
    max-height: 88dvh;
  }
  #researchFilterDialog form > footer { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Reader settings use one large sheet; only its middle content scrolls. */
.reader-quick-menu {
  justify-items: end !important;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left)) !important;
}
.reader-quick-menu .reader-quick-menu-sheet {
  width: min(440px, 100%);
  max-height: min(820px, calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)))) !important;
}

/* Contents replaces Settings in the same sheet slot; its chapter list scrolls. */
#chapterPanel.chapter-popup.is-reader-panel-subview {
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left)) !important;
}
#chapterPanel.chapter-popup.is-reader-panel-subview .chapter-sheet {
  width: min(440px, 100%) !important;
  max-width: 100% !important;
  height: min(820px, calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)))) !important;
  min-height: 0 !important;
  max-height: min(820px, calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)))) !important;
}

/* PDF Speed keeps its source context in the same mounted reader shell. */
#pdfSpeedHeader[hidden], #pdfSpeedContext[hidden],
#pdfSpeedCheckpoint[hidden], #pdfSourceReadFrom[hidden],
#pdfControlsHeading[hidden], #pdfControlsRestore[hidden], #pdfSpeedSourceButton[hidden] { display: none !important; }
body:not(.pdf-speed-mode) :is(#pdfSpeedHeader, #pdfSpeedContext) { display: none !important; }
/* PDF Speed keeps the ordinary Speed stage, so the word sits exactly where it
 * does for every other book. The sentence context sits below it, above the dock. */
body:is(.pdf-speed-mode, .pdf-speed-preparing) .reader-panel > #focusStage::before,
body:is(.pdf-speed-mode, .pdf-speed-preparing) .reader-panel > #focusStage::after,
body:is(.pdf-speed-mode, .pdf-speed-preparing) #focusStage > .context-hint { display: none !important; }
#pdfSpeedHeader {
  position: fixed;
  inset: max(18px, env(safe-area-inset-top)) max(188px, calc(env(safe-area-inset-right) + 176px)) auto max(24px, env(safe-area-inset-left));
  z-index: 30;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#pdfSpeedSourceButton {
  position: fixed;
  inset: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) auto auto;
  z-index: 40;
}
#pdfSourcePanel .pdf-source-header {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  align-items: center;
}
#pdfSourcePanel .pdf-document-pages { grid-column: 1; grid-row: 1; justify-self: start; }
#pdfSourcePanel .pdf-document-zoom { grid-column: 2; grid-row: 1; justify-self: start; }
#pdfSourceReaderButton { grid-column: 3; grid-row: 1; justify-self: end; }
@media (max-width: 600px) {
  #pdfSourcePanel .pdf-source-header { grid-template-columns: minmax(0, 1fr) auto; }
  #pdfSourceReaderButton { grid-column: 1 / -1; }
  #pdfSourcePanel .pdf-document-pages { grid-row: 2; }
  #pdfSourcePanel .pdf-document-zoom { grid-row: 2; justify-self: end; }
}
body:is(.is-reader-quick-menu-open, .is-chapter-panel-open, .is-reader-panel-subview-open) :is(#pdfSpeedSourceButton, #pdfSourceReaderButton),
body:has(.character-legend-panel:not([hidden])) :is(#pdfSpeedSourceButton, #pdfSourceReaderButton) { visibility: hidden; pointer-events: none; }
#pdfSpeedContext {
  position: fixed;
  inset: auto max(24px, env(safe-area-inset-right)) max(262px, calc(env(safe-area-inset-bottom) + 250px)) max(24px, env(safe-area-inset-left));
  z-index: 30;
  max-height: 110px;
  overflow: auto;
}
#pdfControlsRestore {
  position: fixed;
  inset: auto auto max(12px, env(safe-area-inset-bottom)) 50%;
  translate: -50% 0;
  min-height: 44px;
  z-index: 4;
}
body:not(.pdf-source-mode) :is(#pdfControlsHeading, #pdfControlsRestore) { display: none !important; }

/* The same dock is mounted beside the PDF, outside reader paint containment.
 * It keeps Speed's full-width layout (speed, pages, transport); Home, Chapters,
 * the mode switch and the view switch take the reader corners beside it. */
html body:is(.pdf-source-mode, .pdf-source-entering)
  #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack {
  transform: translateY(var(--pdf-controls-drag-y, 0px)) !important;
  transition: transform 260ms cubic-bezier(0.2, 0.76, 0.24, 1), opacity 200ms ease, visibility 0s !important;
  touch-action: none;
}
html body.pdf-source-mode.pdf-controls-hidden #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack {
  transform: translateY(28px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform 260ms cubic-bezier(0.2, 0.76, 0.24, 1), opacity 200ms ease, visibility 0s 260ms !important;
}
html body.pdf-source-mode #readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack.is-pdf-controls-dragging { transition: none !important; }
#pdfReaderCorners { display: contents; }
body:not(.pdf-source-mode) #pdfReaderCorners > * { display: none !important; }
html body.pdf-source-mode.pdf-controls-hidden #pdfReaderCorners > * {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 200ms ease, visibility 0s 200ms !important;
}
/* Page and zoom live in gestures and the progress line now. */
#pdfSourcePanel .pdf-source-header { display: none !important; }
body:is(.is-reader-quick-menu-open, .is-chapter-panel-open, .is-reader-panel-subview-open) #pdfControlsRestore,
body:has(.character-legend-panel:not([hidden])) #pdfControlsRestore { visibility: hidden; pointer-events: none; }
html body.is-navigation-surface-open > .app-shell > #readerBottomDock#readerBottomDock#readerBottomDock#readerBottomDock { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  html body.pdf-source-mode #readerBottomDock#readerBottomDock#readerBottomDock#readerBottomDock.rsvp-control-stack { transition: none !important; }
}
body:is(.is-reader-quick-menu-open, .is-chapter-panel-open, .is-reader-panel-subview-open) :is(#pdfSpeedHeader, #pdfSpeedContext),
body:has(.character-legend-panel:not([hidden])) :is(#pdfSpeedHeader, #pdfSpeedContext) {
  visibility: hidden;
  pointer-events: none;
}
body.pdf-speed-handoff #pdfSourcePanel { pointer-events: none; }
@media (max-height: 600px) {
  #pdfSpeedContext { max-height: 80px; }
}
@media (max-height: 440px) and (min-width: 600px) {
  #pdfSpeedContext { left: auto; width: 32%; bottom: 250px; max-height: 94px; }
}


/* Light navigation material; the graphite palette above remains the default. */
html:not(.theme-dark) body:not(.theme-dark) #homeBottomNav.home-bottom-nav {
  --home-nav-light-surface: var(--light-page);
  --home-nav-selected: var(--light-accent-ink);
  border-top-color: var(--light-line) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #homeBottomNav.home-bottom-nav button {
  color: var(--light-muted) !important;
}

html:not(.theme-dark) body:not(.theme-dark) #homeBottomNav.home-bottom-nav button.is-active {
  color: var(--light-ink) !important;
}

/* Home carries its own warmer canvas through navigation and exposed safe areas. */
html:not(.theme-dark):not(.onboarding-primed):has(body:not(.theme-dark) #inputPanel.is-open > .menu-card > #menuMain:not([hidden])):not(:has(:is(#discoverPanel, #topicDiscoveryPanel):not([hidden]))),
html:not(.theme-dark):not(.onboarding-primed) body:not(.theme-dark):has(#inputPanel.is-open > .menu-card > #menuMain:not([hidden])):not(:has(:is(#discoverPanel, #topicDiscoveryPanel):not([hidden]))),
html:not(.theme-dark):not(.onboarding-primed) body:not(.theme-dark):has(#inputPanel.is-open > .menu-card > #menuMain:not([hidden])):not(:has(:is(#discoverPanel, #topicDiscoveryPanel):not([hidden]))) > .app-shell {
  background: var(--home-light-canvas) !important;
}

html:not(.theme-dark) body:not(.theme-dark):has(#inputPanel.is-open > .menu-card > #menuMain:not([hidden])):not(:has(:is(#discoverPanel, #topicDiscoveryPanel):not([hidden]))) #homeBottomNav.home-bottom-nav {
  --home-nav-light-surface: var(--home-light-canvas);
}


/* Reader corner placement for Speed and Page modes: Home (as a back control)
 * top-left, Chapters top-right, the mode switch bottom-left and Settings in the
 * dock's bottom-right corner. The centred title sits between the top corners.
 * The original PDF keeps its own dock layout and drops this class. */
body.reader-tap-controls {
  /* Top corners share the bottom corners' 47px (41px compact) centre lines. */
  --reader-header-left: calc(env(safe-area-inset-left) + 23px);
  --reader-header-right: calc(env(safe-area-inset-right) + 23px);
  --reader-header-corner-inset: calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) + 23px + 48px + 10px);
  --reader-header-actions-width: 64px;
}
/* Outranks the corner placement rules below, which also set display. */
html body #readerModeSwitchButton#readerModeSwitchButton[hidden],
html body #readerChaptersButton#readerChaptersButton[hidden] { display: none !important; }
body.pdf-source-entering :is(#readerModeSwitchButton, #readerChaptersButton) {
  display: none !important;
}
body.reader-tap-controls #readerModeSwitchButton#readerModeSwitchButton {
  position: fixed !important;
  inset: auto auto max(53px, calc(env(safe-area-inset-bottom) + 43px)) max(47px, calc(env(safe-area-inset-left) + 47px)) !important;
  z-index: 1204;
  translate: -50% 50% !important;
}
html body.reader-tap-controls.has-loaded-text:not(.ebook-mode) :is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton.rsvp-home-button,
html body.reader-tap-controls.has-loaded-text:not(.ebook-mode) :is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton.rsvp-home-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press),
body.reader-tap-controls #readerChaptersButton#readerChaptersButton {
  position: fixed !important;
  top: var(--screen-pad-top) !important;
  bottom: auto !important;
  z-index: 1204 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
  translate: none !important;
  transform: none !important;
}
html body.reader-tap-controls.has-loaded-text:not(.ebook-mode) :is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton.rsvp-home-button,
html body.reader-tap-controls.has-loaded-text:not(.ebook-mode) :is(.reader-panel, #pdfReaderCorners) > #textPanelButton#textPanelButton.rsvp-home-button:is(:hover, :focus, :focus-visible, :active, .is-tactile-press) {
  left: var(--reader-header-left) !important;
  right: auto !important;
}
body.reader-tap-controls #readerChaptersButton#readerChaptersButton {
  left: auto !important;
  right: var(--reader-header-right) !important;
}
@media (max-width: 390px) {
  body.reader-tap-controls {
    --reader-header-left: calc(env(safe-area-inset-left) + 17px);
    --reader-header-right: calc(env(safe-area-inset-right) + 17px);
    --reader-header-corner-inset: calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) + 17px + 48px + 8px);
  }
  body.reader-tap-controls #readerModeSwitchButton#readerModeSwitchButton {
    left: max(41px, calc(env(safe-area-inset-left) + 41px)) !important;
  }
}
body.reader-tap-controls .reader-panel > .top-bar {
  min-height: 48px;
}
/* The title stays centred on the page, clear of both top corners. */
body.reader-tap-controls.has-loaded-text .reader-panel > .top-bar > .reader-title-display {
  width: min(760px, calc(100vw - 2 * var(--reader-header-corner-inset))) !important;
  max-width: calc(100vw - 2 * var(--reader-header-corner-inset)) !important;
  padding-inline: 0 !important;
}
body.reader-tap-controls #pdfSpeedSourceButton {
  right: calc(var(--reader-header-right) + 56px);
}
body.reader-tap-controls #pdfSpeedHeader {
  top: var(--screen-pad-top);
  left: calc(var(--reader-header-left) + 56px);
  right: calc(var(--reader-header-right) + var(--reader-header-actions-width));
  min-height: 48px;
}

/* Continue the reader's paper through the exposed iOS safe area. Navigation
 * keeps its own canvas, and the launch backdrop retains its existing paint. */
html:not(.theme-dark):not(.onboarding-primed):has(body:not(.theme-dark):not(.is-navigation-surface-open)) {
  background: var(--reader-surface) !important;
}

html:not(.theme-dark):not(.onboarding-primed) body:not(.theme-dark):not(.is-navigation-surface-open),
html:not(.theme-dark):not(.onboarding-primed) body:not(.theme-dark):not(.is-navigation-surface-open) > .app-shell {
  background: var(--reader-surface) !important;
}

/* A discipline is its own opaque navigation page above the retained catalogue.
 * The shared slide adapter transforms these wrappers; only the inner sheet scrolls. */
#researchSubjectViewport:not(.is-active) { display: none; }
#researchSubjectViewport.is-active { position: fixed; inset: 0; z-index: 20; overflow: clip; contain: layout paint style; isolation: isolate; }
#researchSubjectViewport :is(.research-subject-motion,.research-subject-reveal) { position: absolute; inset: 0; width: 100%; height: 100%; overflow: clip; contain: layout paint; }
#researchSubjectViewport .research-subject-motion { transform: translate3d(100%,0,0); }
body:not(.is-discover-info-stack-open) #researchSubjectViewport[data-navigation-phase="open"] .research-subject-motion { transform: none !important; }
#researchSubjectSheet { position: absolute; inset: 0; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; overscroll-behavior: none; touch-action: pan-y pinch-zoom; padding-block: max(20px, env(safe-area-inset-top)) var(--home-scroll-bottom-clearance, 118px); }
#researchSubjectViewport.is-swiping-back #researchSubjectSheet { overflow-y: hidden; }
body.is-research-subject-open #discoverPanel .is-info-underlay-parked #discoverSheet { visibility: hidden !important; }
/* Keep the bottom navigation stationary and avoid re-blurring a moving page. */
body:has(#researchSubjectViewport.is-active:not([data-navigation-phase="open"])) #homeBottomNav#homeBottomNav#homeBottomNav.home-bottom-nav { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Twilight continues through app navigation, browser chrome and safe areas. */
html.theme-twilight:not(.onboarding-primed),
html.theme-twilight body.theme-twilight,
html.theme-twilight body.theme-twilight > .app-shell,
html.theme-twilight body.theme-twilight #inputPanel.is-open {
  background-color: var(--twilight-chrome) !important;
}
html.theme-twilight:not(.onboarding-primed):has(body:not(.is-navigation-surface-open)),
html.theme-twilight:not(.onboarding-primed) body.theme-twilight:not(.is-navigation-surface-open),
html.theme-twilight:not(.onboarding-primed) body.theme-twilight:not(.is-navigation-surface-open) > .app-shell {
  background: var(--twilight-paper) !important;
}
html.theme-twilight body.theme-twilight #homeBottomNav.home-bottom-nav {
  --home-nav-light-surface: var(--twilight-chrome);
  --home-nav-selected: var(--twilight-accent);
  border-color: var(--twilight-line) !important;
}
html.theme-twilight body.theme-twilight #homeBottomNav.home-bottom-nav button { color: var(--twilight-muted) !important; }
html.theme-twilight body.theme-twilight #homeBottomNav.home-bottom-nav button.is-active { color: var(--twilight-accent) !important; }

/* The Original | Text switch sits centred between the top reader corners in
 * the PDF and in the PDF's Page Mode, where it replaces the header title. */
html body #readerViewSwitch.reader-view-switch {
  position: fixed;
  top: calc(var(--screen-pad-top) + 6px);
  left: 50%;
  z-index: 1204;
  translate: -50% 0;
}
body.reader-tap-controls.pdf-reader-view.reader-context-mode .reader-panel > .top-bar > .reader-title-display { visibility: hidden !important; }
html body:is(.is-reader-quick-menu-open, .is-chapter-panel-open, .is-reader-panel-subview-open) #readerViewSwitch,
html body:has(.character-legend-panel:not([hidden])) #readerViewSwitch,
body.pdf-source-entering #readerViewSwitch { visibility: hidden; pointer-events: none; }
html body:where(.reader-context-mode.is-page-chrome-idle) #readerViewSwitch { opacity: 0.18; transition: opacity 800ms ease-in-out; }
@media (max-width: 340px) {
  html body #readerViewSwitch.reader-view-switch { width: 164px; }
}