/* BOOK CATALOG v31
   The native dialog is only a transparent animation viewport. The book shell
   covers the catalogue and masthead with a deliberate top margin. Base catalogue CSS and the archived v29 stylesheet stay untouched.
   Story facts are HTML; hover facts never require WebGL or an auto-open timer. */
#book-dialog {
  --book-paper: #fffdf7;
  --book-ink: #272924;
  --book-muted: #62655d;
  --book-rule: #d6d8ce;
  --book-accent: #a33225;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  color: var(--book-ink);
  font: 400 15px/1.7 Yoru, system-ui, sans-serif;
  color-scheme: light;
}
#book-dialog:not([open]) { display: none; }
#book-dialog[open] { display: block; }
#book-dialog::backdrop { background: #1d231e24; }
#book-dialog :is(button, a, summary):focus-visible {
  outline: 3px solid var(--book-accent);
  outline-offset: 3px;
}
/* Do not add a stacking context to the shell: its topbar must remain above
   the viewport-sized animation while the scrolling pages remain beneath it. */
#book-shell {
  position: absolute;
  left: var(--book-left, 24px);
  top: var(--book-top, 24px);
  display: flex;
  flex-direction: column;
  width: var(--book-width, calc(100% - 48px));
  height: var(--book-height, calc(100dvh - 36px));
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid #c8cebd;
  border-radius: 8px;
  background: var(--book-paper);
  box-shadow: 0 14px 40px #1520182e, 0 2px 6px #1520181f;
}
.book-topbar {
  position: relative;
  z-index: 30;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  min-height: 58px;
  padding: 7px 18px;
  border-bottom: 1px solid #d8dacf;
  border-radius: 7px 7px 0 0;
  background: #f3f4ed;
}
.book-brand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 12px;
  min-width: 0;
  color: #252923;
  font: 900 18px/1.3 Yoru, system-ui, sans-serif;
  letter-spacing: -.7px;
}
.book-brand #book-kind { color: #62665b; font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: 0; }
.book-tools { display: flex; align-items: center; flex-shrink: 0; gap: 6px; }
.book-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #bdc2b4;
  border-radius: 4px;
  background: #fffdf7;
  color: #34392e;
  font: 500 13px/1.5 Yoru, system-ui, sans-serif;
  white-space: nowrap;
}
.book-tools button > span[aria-hidden] { font: 20px/1 system-ui, sans-serif; }
#book-motion-toggle { background: transparent; }
#book-motion-label { font-weight: 600; }
#book-motion-toggle[aria-pressed=true] #book-motion-label { color: #4b613f; }
#book-motion-toggle[aria-pressed=false] { color: #64675f; background: #e7eae0; }
#book-replay { border-color: #9ca98d; background: #e7ecde; color: #35442b; }
#book-skip { border-color: #9a5e51; background: #fff4ef; color: #8f2c20; }
#book-close { border-color: #2a3028; background: #2a3028; color: #fffdf7; }
#book-close span[aria-hidden] { font-size: 23px; }
.book-tools button:disabled { opacity: .55; cursor: default; }
#book-stage {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
#book-stage canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
#book-dialog.book-opening #book-stage,
#book-dialog.book-art-ready #book-stage { opacity: 1; }
.book-scroll {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: 20px;
  scrollbar-width: thin;
  scrollbar-color: #a9af9d #f0f2e9;
  border-radius: 0 0 7px 7px;
  -webkit-overflow-scrolling: touch;
}
.book-spread {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .44fr) minmax(0, .56fr);
  align-items: stretch;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--book-paper);
  min-height: 100%;
}
.book-page { position: relative; min-width: 0; margin: 0; padding: clamp(24px, 2.3vw, 36px); overflow-wrap: anywhere; }
.book-left { background: #edf0e5; }
.book-right { background: var(--book-paper); }
.book-content { min-width: 0; opacity: 1; color: var(--book-ink); }
#book-dialog.book-opening .book-page .book-content { opacity: 0; }
/* Visibility, rather than removal, preserves the measured image rectangle.
   This class is never set while importing or before a successful render. */
#book-dialog.book-art-ready img.book-cover { visibility: hidden; }
.book-spine {
  position: absolute;
  z-index: 2;
  left: 44%;
  top: 0;
  bottom: 0;
  width: 19px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #7d88691a 38%, #747f622c 49%, #fffdf780 53%, #8b917d0b 70%, transparent);
  pointer-events: none;
}
.book-spine::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #a4ad9759; }
.book-kicker { margin: 0 0 17px; color: #5c6551; font-size: 14px; font-weight: 600; line-height: 1.5; letter-spacing: .3px; }
.book-identity { min-width: 0; }
.book-cover {
  display: block;
  width: auto;
  height: clamp(230px, 30dvh, 340px);
  max-width: min(84%, 290px);
  max-height: none;
  margin: 0 auto 22px;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: none;
  border: 1px solid #6b755e4d;
  border-radius: 1px;
  box-shadow: 4px 2px 0 #fbfaf2, 5px 2px 0 #b4bca6, 7px 9px 15px #36432b21;
}
.book-heading { min-width: 0; }
#book-title { margin: 0; color: #242b21; font-size: clamp(27px, 2.2vw, 34px); font-weight: 600; line-height: 1.3; letter-spacing: -.7px; text-wrap: balance; outline: none; }
.book-credit { margin: 13px 0 0; padding: 0; }
.book-credit dt { margin: 0 0 3px; color: #626b58; font-size: 14px; line-height: 1.6; }
.book-credit dd { margin: 0; color: #3f4936; font-size: 14px; font-weight: 600; line-height: 1.7; }
.book-type { margin: 7px 0 0; color: #626b58; font-size: 14px; line-height: 1.6; }
.book-premise { margin: 0; padding: 0; }
.book-premise h3 { margin: 0 0 11px; color: #2d3029; font-size: 24px; font-weight: 600; line-height: 1.35; letter-spacing: -.5px; }
.book-premise p { margin: 0; color: #44473e; font-size: 16px; line-height: 1.85; }
.book-genres { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 17px 0 19px; }
.book-genres > span { display: inline-flex; align-items: center; min-height: 31px; padding: 4px 9px; border: 1px solid #d0d5c5; border-radius: 4px; background: #f0f3e8; color: #526046; font-size: 14px; line-height: 1.5; }
.book-snapshot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; margin: 0 0 19px; padding: 16px 0; border-block: 1px solid var(--book-rule); }
.book-snapshot dt { margin: 0; color: #63675b; font-size: 14px; line-height: 1.6; }
.book-snapshot dd { margin: 0; color: #30372a; font-size: 18px; font-weight: 600; line-height: 1.5; }
.book-snapshot small { display: block; grid-column: 1 / -1; margin: 0; color: #686c61; font-size: 14px; font-weight: 400; line-height: 1.6; }
.book-source { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; padding: 11px 16px; border: 1px solid #293126; border-radius: 4px; background: #293126; color: #fffdf7; font-size: 15px; font-weight: 600; line-height: 1.6; text-decoration: none; }
.book-source > span[aria-hidden] { font: 20px/1 system-ui, sans-serif; }
.book-provenance { margin: 14px 0 0; padding: 0; border-top: 1px solid var(--book-rule); }
.book-provenance > summary { min-height: 44px; padding: 11px 0; color: #62675a; font-size: 14px; line-height: 1.6; cursor: pointer; }
.book-source-list { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.book-source-list a { display: inline-flex; align-items: center; min-height: 44px; color: #813e2d; font-size: 14px; line-height: 1.7; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.book-small { margin: 9px 0; color: #62685a; font-size: 14px; line-height: 1.8; }
.book-effect-status { position: relative; z-index: 30; flex: 0 0 auto; margin: 0; padding: 9px 18px; border-top: 1px solid #d8dacf; border-radius: 0 0 7px 7px; background: #f3f4ed; color: #5e6655; font-size: 13px; line-height: 1.6; }
.book-effect-status:empty { display: none; }
@media (hover: hover) and (pointer: fine) {
  #book-close:hover, .book-source:hover { border-color: #46563b; background: #46563b; }
  #book-replay:hover { background: #dce5ce; border-color: #6f805e; }
  #book-motion-toggle:hover { background: #e5eade; }
  #book-skip:hover { background: #fce5dc; }
  .book-source-list a:hover { color: #a33225; }
  .book-provenance > summary:hover { color: #35442b; }
}
@media (min-width: 760px) and (max-width: 1050px) {
  .book-topbar { padding-inline: 14px; gap: 10px; }
  .book-brand { display: block; font-size: 16px; }
  .book-brand #book-kind { display: block; }
  .book-tools { gap: 5px; }
  .book-tools button { padding-inline: 9px; }
  .book-page { padding: 24px; }
  .book-cover { height: 215px; }
  #book-title { font-size: 25px; }
  .book-premise h3 { font-size: 23px; }
  .book-snapshot { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
}
@media (max-width: 759px) {
  #book-shell { left: var(--book-left, 12px); top: var(--book-top, 12px); width: var(--book-width, calc(100% - 24px)); height: var(--book-height, calc(100dvh - 24px)); max-width: none; max-height: none; border-radius: 7px; }
  /* Reserve the skip slot even while hidden. Replay and Close never move
     when animation starts; all controls remain above the moving book. */
  .book-topbar { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 44px 44px; gap: 4px 6px; padding: 7px 12px; }
  .book-brand { grid-column: 1 / 3; grid-row: 1; display: block; font-size: 17px; line-height: 1.25; letter-spacing: -.6px; }
  .book-brand #book-kind { display: block; font-size: 13px; line-height: 1.5; }
  .book-tools { display: contents; }
  .book-tools button { min-width: 44px; min-height: 44px; padding: 6px 7px; font-size: 13px; line-height: 1.35; white-space: normal; }
  #book-motion-toggle { grid-column: 1; grid-row: 2; gap: 4px; padding-inline: 5px; }
  #book-replay { grid-column: 2; grid-row: 2; gap: 4px; }
  #book-replay > span[aria-hidden] { font-size: 17px; }
  #book-skip { grid-column: 3; grid-row: 2; padding-inline: 5px; }
  #book-close { grid-column: 3; grid-row: 1; justify-self: end; min-width: 68px; padding-inline: 12px; gap: 8px; }
  .book-scroll { scroll-padding-block: 16px; }
  .book-spread { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .book-page { padding: 22px; }
  .book-left { border-bottom: 1px solid #d1d8c4; }
  .book-right { padding-top: 22px; }
  .book-spine { display: none; }
  .book-kicker { margin-bottom: 13px; font-size: 14px; }
  .book-identity { display: grid; grid-template-columns: 116px minmax(0, 1fr); align-items: center; gap: 20px; }
  .book-cover { width: 116px; height: auto; max-width: 100%; margin: 0; object-fit: contain; }
  #book-title { font-size: 23px; line-height: 1.35; letter-spacing: -.5px; text-wrap: initial; }
  .book-credit { margin-top: 12px; }
  .book-credit dt, .book-credit dd, .book-type { font-size: 14px; }
  .book-premise h3 { font-size: 23px; margin-bottom: 10px; }
  .book-premise p { font-size: 16px; line-height: 1.8; }
  .book-genres { margin: 15px 0 17px; }
  .book-snapshot { margin-bottom: 17px; padding-block: 14px; }
  .book-source { font-size: 15px; min-height: 48px; }
  .book-effect-status { padding-inline: 13px; }
}
@media (max-width: 390px) {
  .book-topbar { padding-inline: 10px; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 5px; }
  .book-brand { font-size: 16px; }
  .book-tools button { padding-inline: 5px; }
  #book-close { padding-inline: 10px; }
  .book-page { padding: 18px; }
  .book-identity { grid-template-columns: 92px minmax(0, 1fr); gap: 15px; }
  .book-cover { width: 92px; height: auto; }
  #book-title { font-size: 21px; }
  .book-credit { margin-top: 10px; }
  .book-premise h3 { font-size: 22px; }
  .book-snapshot { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 9px; }
  .book-snapshot dd { font-size: 17px; }
}
@media (min-width: 760px) and (max-height: 650px) {
  .book-page { padding-top: 20px; padding-bottom: 20px; }
  .book-cover { height: 200px; margin-bottom: 18px; }
  .book-kicker { margin-bottom: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #book-dialog, #book-dialog *, #book-dialog *::before, #book-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* One preview replaces only the active cover face, inside the existing card.
   Core supplies its exact left/top/width/height from the stable cover-slot.
   The catalogue title below the art remains the sole visible story title. */
.story-card.inline-preview-active img.cover { visibility: hidden; }
#hover-preview {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 17px 44px;
  gap: 2px;
  width: 100%;
  height: 146px;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 6px;
  overflow: hidden;
  border: 1px solid #a9b69b;
  border-radius: 0;
  background: #f7faef;
  color: #2d3925;
  box-shadow: inset 0 0 0 1px #ffffff;
  font: 400 14px/1.35 Yoru, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
#hover-preview[hidden] { display: none; }
/* Keep the region's accessible label; do not repeat the catalogue title or
   reserve a visible heading row inside this deliberately compact face. */
#hover-preview .hover-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#hover-title { margin: 0; font-size: 14px; line-height: 1.35; }
#hover-facts {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: 0;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  color: #4e5d41;
  font-size: 14px;
  line-height: 1.35;
}
#hover-facts p, #hover-facts .hover-genres {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #4e5d41;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#hover-facts .hover-credit { color: #4e5d41; }
#hover-facts .hover-credit > span { display: inline; margin: 0; color: #637157; font-size: 14px; }
#hover-facts .hover-chapter { color: #2b3a21; font-weight: 600; }
#hover-facts :is(strong, b) { color: #2b3a21; font-weight: 600; }
#hover-facts small { color: #637157; font-size: 14px; font-weight: 400; line-height: 1.35; }
#hover-facts .hover-genres > span { display: inline; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; line-height: 1.35; }
#hover-facts .hover-genres > span + span::before { content: ' · '; }
#hover-summary { display: none; margin: 0; color: #455738; font-size: 14px; line-height: 1.5; }
#hover-preview.has-room { grid-template-rows: auto minmax(0, 1fr) 17px 44px; gap: 5px; padding: 9px; }
#hover-preview.has-room #hover-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#hover-countdown {
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: #586a4a;
  font-size: 13px;
  line-height: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hover-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; min-width: 0; height: 44px; }
#hover-open, #hover-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  margin: 0;
  padding: 5px;
  border: 1px solid #a4b593;
  border-radius: 3px;
  background: #e9f0df;
  color: #3c512d;
  font: 600 14px/1.4 Yoru, system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
#hover-open { border-color: #354a28; background: #354a28; color: #fffef8; }
#hover-cancel:disabled { opacity: .55; cursor: default; }
#hover-preview :is(button, a):focus-visible { position: relative; z-index: 1; outline: 3px solid #a33225; outline-offset: -3px; }
.story-card.inline-preview-active:has(.cover-button:focus-visible) #hover-preview { outline: 3px solid #a33225; outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) {
  #hover-open:hover { background: #476336; border-color: #476336; }
  #hover-cancel:not(:disabled):hover { background: #dce8ce; border-color: #768f60; }
}
/* The existing short desktop catalogue uses a128px art slot. Preserve all
   three fact lines and both44px controls by reducing padding, never font size. */
@media (min-width: 1050px) and (max-height: 720px) {
  #hover-preview { padding: 2px; }
  #hover-preview.has-room { padding: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #hover-preview, #hover-preview * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* Keep the breathing gap clean instead of exposing a sliced original masthead.
   Visibility preserves the catalogue geometry and restores natively on close. */
body:has(#book-dialog[open]) .site-header { visibility: hidden; }

/* v32 additions only: explicit demo reading and selected-cover side art.
   The complete v31 catalogue-sized book and inline-preview CSS above is kept
   byte-for-byte. No product opening animation is introduced by this file. */
#book-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
#book-backdrop .backdrop-wing {
  position: absolute;
  top: var(--book-top, 24px);
  bottom: 24px;
  overflow: hidden;
  background-color: #e2e7da;
  background-image: linear-gradient(0deg, #ecf0e23d, #ecf0e23d), var(--selected-cover, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid #aeb99d66;
  border-radius: 3px;
  filter: saturate(.62) contrast(.9);
  opacity: .55;
  pointer-events: none;
}
#book-backdrop .backdrop-left {
  left: 0;
  width: max(0px, calc(var(--book-left, 24px) - 8px));
  background-position: 36% center;
  box-shadow: inset -14px 0 24px #394b2c21;
}
#book-backdrop .backdrop-right {
  left: calc(var(--book-left, 24px) + var(--book-width, calc(100% - 48px)) + 8px);
  right: 0;
  background-position: 64% center;
  box-shadow: inset 14px 0 24px #394b2c21;
}
#book-dialog[data-backdrop="off"] #book-backdrop,
#book-dialog[data-view="reader"] #book-backdrop { display: none; }
#book-dialog[data-backdrop-left="off"] .backdrop-left,
#book-dialog[data-backdrop-right="off"] .backdrop-right { display: none; }
/* Each static crop yields only to its own confirmed rendered counterpart. */
#book-dialog.book-backdrop-left-ready .backdrop-left,
#book-dialog.book-backdrop-right-ready .backdrop-right { visibility: hidden; }
#book-dialog.book-backdrop-ready #book-stage { opacity: 1; }

.book-demo-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 15px;
  border: 1px solid #8b9d77;
  border-radius: 4px;
  background: #e9f0df;
  color: #344a25;
  font: 600 16px/1.5 Yoru, system-ui, sans-serif;
  cursor: pointer;
}
.book-demo-button > span {
  padding: 2px 7px;
  border: 1px solid #a0ae8e;
  border-radius: 3px;
  background: #f7faef;
  color: #536743;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.demo-cta-note { margin: 7px 0 14px; color: #616b56; font-size: 14px; line-height: 1.65; }
#book-dialog[data-view="reader"] .book-left { background: #eef1e8; }
#book-dialog[data-view="reader"] .book-cover { height: 210px; max-width: min(84%, 230px); }
#book-dialog[data-view="reader"] #book-title { font-size: clamp(24px, 2vw, 30px); line-height: 1.35; }
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 18px;
  padding: 5px 9px;
  border: 1px solid #a9b69a;
  border-radius: 3px;
  background: #f8fbf1;
  color: #405a2e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
.demo-context { margin: 8px 0 0; color: #616d55; font-size: 14px; line-height: 1.65; }
.demo-warning {
  margin: 20px 0 15px;
  padding: 12px 13px;
  border-left: 3px solid #8d9e79;
  border-radius: 0 3px 3px 0;
  background: #e4eadb;
  color: #48563b;
  font-size: 14px;
  line-height: 1.75;
}
.demo-warning strong { color: #334529; font-size: 16px; font-weight: 600; line-height: 1.6; }
#reader-back, #reader-prev, #reader-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #aab79a;
  border-radius: 4px;
  background: #f8faf2;
  color: #3c512d;
  font: 600 14px/1.5 Yoru, system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
}
#reader-back { width: 100%; }
#reader-prev:disabled, #reader-next:disabled { opacity: .5; cursor: default; }
.demo-page { min-width: 0; }
.demo-page-number { margin: 0 0 8px; color: #65705a; font-size: 14px; font-weight: 600; line-height: 1.6; font-variant-numeric: tabular-nums; }
#demo-page-title { margin: 0 0 17px; color: #2e3927; font-size: 25px; font-weight: 600; line-height: 1.35; letter-spacing: -.5px; outline: none; }
/* Original geometric layout samples, deliberately not source story artwork. */
.demo-panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 140px 100px;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border: 1px solid #b9c2ac;
  border-radius: 3px;
  background: #f2f4eb;
}
.demo-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #9ca98e;
  background: #e2e8d9;
}
.demo-panel-wide { grid-column: 1 / -1; background: linear-gradient(145deg, #f7f9f1 0 55%, #c7d0bc 55.3% 69%, #e5eadc 69.3%); }
.demo-panel-wide::before { content: ''; position: absolute; left: 13%; top: 21%; width: 82px; height: 82px; border: 1px solid #aebc9f; border-radius: 50%; background: #d1dcc1; }
.demo-panel-wide::after { content: ''; position: absolute; left: 30%; right: 9%; bottom: 21%; height: 1px; background: #899b754d; transform: rotate(-15deg); }
.demo-panel-wide > span { position: absolute; right: 11px; top: 9px; z-index: 1; color: #5f7050; font: 600 14px/1.5 Yoru, system-ui, sans-serif; letter-spacing: .5px; }
.demo-panel:nth-child(2) { background: repeating-linear-gradient(125deg, #ebf0e3 0 16px, #cbd5be 16px 17px, #ebf0e3 17px 32px); }
.demo-panel:nth-child(2)::after { content: ''; position: absolute; left: 20%; right: 20%; top: 20%; bottom: 20%; border: 1px solid #a1b18f; border-radius: 50%; background: #dce5d0; }
.demo-panel:nth-child(3) { background: #e9eee1; }
.demo-panel:nth-child(3)::before { content: ''; position: absolute; inset: 12% 8%; background: #bbcbaa; clip-path: polygon(0 100%, 42% 10%, 70% 62%, 88% 28%, 100% 100%); }
.demo-panel:nth-child(3)::after { content: ''; position: absolute; top: 16%; right: 15%; width: 24px; height: 24px; border: 1px solid #9faf8c; border-radius: 50%; background: #d4dec7; }
.demo-page-caption { margin: 12px 0 18px; color: #626e56; font-size: 14px; line-height: 1.75; }
.demo-navigation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid #d4dcca; }
#reader-progress { display: flex; align-items: center; justify-content: center; min-width: 50px; min-height: 44px; color: #566747; font-size: 14px; font-weight: 600; line-height: 1.5; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .book-demo-button:hover { background: #dce8cc; border-color: #758d60; }
  #reader-back:hover, #reader-prev:not(:disabled):hover, #reader-next:not(:disabled):hover { background: #e4edda; border-color: #80966d; }
}
@media (max-width: 899px) {
  #book-backdrop { display: none; }
}
@media (max-width: 759px) {
  #book-dialog[data-view="reader"] .book-brand { grid-column: 1; max-width: 64px; font-size: 14px; line-height: 1.25; }
  #book-dialog[data-view="reader"] .book-brand #book-kind { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  #book-dialog[data-view="reader"] #book-close { grid-column: 2 / 4; min-width: 140px; white-space: nowrap; }
  #book-dialog[data-view="reader"] #book-replay { padding: 3px 4px; gap: 3px; line-height: 1.2; }
  #book-dialog[data-view="reader"] .book-cover { width: 116px; height: auto; max-width: 100%; }
  #book-dialog[data-view="reader"] #book-title { font-size: 23px; }
  .demo-badge { margin-bottom: 14px; font-size: 14px; }
  .demo-warning { margin-top: 17px; }
  .demo-panels { grid-template-rows: 125px 90px; padding: 6px; gap: 6px; }
  .demo-panel-wide::before { width: 68px; height: 68px; }
  #demo-page-title { font-size: 24px; margin-bottom: 14px; }
  .demo-navigation { gap: 9px; }
}
@media (max-width: 390px) {
  #book-dialog[data-view="reader"] .book-cover { width: 92px; height: auto; }
  #book-dialog[data-view="reader"] #book-title { font-size: 21px; }
  #reader-back, #reader-prev, #reader-next { padding-inline: 9px; }
  .demo-panels { grid-template-rows: 115px 83px; }
  .demo-navigation { gap: 7px; }
  #reader-progress { min-width: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  #book-backdrop, #book-backdrop *, .demo-page, .demo-page * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* v33 additions only. Keep the center catalogue and all v32 geometry above
   intact. Reading is embedded in the right page; the left identity stays put. */
#book-dialog[data-view="reader"] .book-left { background: #edf0e5; }
#book-dialog[data-view="reader"] .book-cover { height: clamp(230px, 30dvh, 340px); max-width: min(84%, 290px); }
#book-dialog[data-view="reader"] #book-title { font-size: clamp(27px, 2.2vw, 34px); line-height: 1.3; }
#product-description, #embedded-reader { min-width: 0; }
#embedded-reader { margin: 0 0 18px; }
.embedded-reader-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; }
.embedded-reader-heading .demo-badge { margin: 0; min-height: 34px; font-size: 14px; }
.embedded-reader-heading #reader-back { width: auto; min-height: 44px; padding: 9px 12px; }
#embedded-reader > .demo-warning { margin: 0 0 13px; padding: 10px 12px; font-size: 14px; line-height: 1.7; }
#embedded-reader > .demo-warning strong { font-size: 14px; }
#reader-viewport {
  position: relative;
  width: 100%;
  height: 300px;
  max-height: min(44dvh, 360px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: 13px;
  border: 1px solid #aab99b;
  border-radius: 3px;
  background: #f8fbf2;
  color: #33432a;
  box-shadow: inset 3px 0 0 #dce6cf;
  opacity: 1;
  transform: none;
  scrollbar-width: thin;
  scrollbar-color: #9fae90 #eff4e7;
}
#book-dialog.book-opening .book-page .book-content { opacity: 1; }
#book-dialog.book-opening #reader-viewport { opacity: 0; }
#book-dialog:not(.book-opening) #reader-viewport { opacity: 1; transform: none; }
#reader-viewport .demo-page-number { margin-bottom: 5px; font-size: 14px; }
#reader-viewport #demo-page-title { margin-bottom: 12px; font-size: 22px; line-height: 1.35; }
#reader-viewport .demo-panels { grid-template-rows: 110px 76px; padding: 5px; gap: 6px; }
#reader-viewport .demo-panel-wide::before { width: 66px; height: 66px; }
#reader-viewport .demo-page-caption { margin: 9px 0 0; font-size: 14px; line-height: 1.7; }
#embedded-reader > .demo-navigation { margin-top: 12px; padding-top: 10px; }
@media (min-width: 900px) {
  #book-dialog[data-view="reader"][data-backdrop="on"] #book-backdrop { display: block; }
}
@media (min-width: 760px) and (max-width: 1050px) {
  #book-dialog[data-view="reader"] .book-cover { height: 215px; }
  #book-dialog[data-view="reader"] #book-title { font-size: 25px; }
}
@media (max-width: 759px) {
  #book-dialog[data-view="reader"] .book-brand { grid-column: 1 / 3; max-width: none; font-size: 17px; line-height: 1.25; }
  #book-dialog[data-view="reader"] .book-brand #book-kind { display: block; position: static; width: auto; height: auto; margin: 0; padding: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; border: 0; font-size: 13px; line-height: 1.5; }
  #book-dialog[data-view="reader"] #book-close { grid-column: 3; min-width: 68px; white-space: normal; }
  #book-dialog[data-view="reader"] .book-cover { width: 116px; height: auto; max-width: 100%; }
  #book-dialog[data-view="reader"] #book-title { font-size: 23px; line-height: 1.35; }
  #reader-viewport { height: 260px; max-height: min(45dvh, 300px); padding: 12px; }
  #reader-viewport #demo-page-title { font-size: 21px; }
  .embedded-reader-heading { gap: 7px; }
  .embedded-reader-heading #reader-back { padding-inline: 10px; }
}
@media (max-width: 390px) {
  #book-dialog[data-view="reader"] .book-brand { font-size: 16px; }
  #book-dialog[data-view="reader"] .book-cover { width: 92px; height: auto; }
  #book-dialog[data-view="reader"] #book-title { font-size: 21px; }
  #reader-viewport { padding: 10px; }
  #reader-viewport .demo-panels { grid-template-rows: 100px 70px; }
}
@media (min-width: 760px) and (max-height: 650px) {
  #book-dialog[data-view="reader"] .book-cover { height: 200px; }
}

/* Exterior-only shelves. JavaScript supplies a fixed rectangle exclusively
   when genuine unused catalogue margin is at least180px. Nothing here sizes,
   moves, transforms or narrows the center catalogue. The fixed shelf is a
   transparent stacking context: native labels sit above the shared canvas,
   while its successfully enhanced spine pictures can yield to Three below. */
#side-shelves-scene {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
#side-shelves-scene canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.side-shelf {
  position: fixed;
  z-index: 2;
  min-width: 0;
  margin: 0;
  padding: 0 6px 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: 8px;
  border: 0;
  background: transparent;
  color: #33442b;
  font: 400 14px/1.6 Yoru, system-ui, sans-serif;
  scrollbar-width: thin;
  scrollbar-color: #a3b193 #eef2e6;
}
.side-shelf[hidden] { display: none; }
.side-shelf-heading { margin: 0; padding: 11px 10px 5px; border: 1px solid #c4cdb9; border-bottom: 0; border-radius: 4px 4px 0 0; background: #f1f5e9; }
.side-shelf-heading h2 { margin: 0; color: #35482a; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.3px; overflow-wrap: anywhere; }
.side-shelf-note { margin: 0 0 10px; padding: 0 10px 11px; border: 1px solid #c4cdb9; border-top: 0; border-radius: 0 0 4px 4px; background: #f1f5e9; color: #627153; font-size: 14px; line-height: 1.6; }
.side-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 48px);
  justify-content: center;
  gap: 9px 6px;
  min-width: 0;
  margin: 0;
  padding: 3px 2px 9px;
  border-bottom: 1px solid #b8c3aa;
  background: transparent;
}
.side-spine {
  position: relative;
  display: block;
  width: 100%;
  min-width: 44px;
  min-height: 44px;
  height: 170px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #6e7d60;
  border-radius: 2px;
  background: transparent;
  color: #25391c;
  font: 600 14px/1.4 Yoru, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}
.side-spine-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; filter: saturate(.76) contrast(.94); pointer-events: none; }
.side-spine.scene-spine-active .side-spine-art { opacity: 0; }
.side-spine-title {
  position: absolute;
  top: 8px;
  right: 4px;
  bottom: 8px;
  z-index: 2;
  display: block;
  width: 28px;
  margin: 0;
  padding: 6px 3px;
  overflow: hidden;
  border: 1px solid #e8efdc;
  border-radius: 1px;
  background: #f8fcedf2;
  color: #2d421f;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
.side-spine.is-peeked { border-color: #536d3d; outline: 2px solid #718a5b; outline-offset: -2px; }
.side-spine.is-peeked .side-spine-title { background: #edf6df; color: #2c471a; }
.side-spine:focus-visible { outline: 3px solid #a33225; outline-offset: -3px; }
.side-shelf-info {
  position: relative;
  margin: 10px 0 0;
  padding: 12px 10px;
  overflow: hidden;
  border: 1px solid #adbe9b;
  border-radius: 4px;
  background: #f6faee;
  color: #465b36;
  box-shadow: 0 2px 5px #344b2010;
  overflow-wrap: anywhere;
}
.side-shelf-info[hidden] { display: none; }
.side-info-title { margin: 0 0 8px; color: #2f4522; font-size: 17px; font-weight: 600; line-height: 1.4; letter-spacing: -.25px; }
.side-shelf-info p { margin: 7px 0 0; font-size: 14px; line-height: 1.65; }
.side-info-creator { color: #4e6240; }
.side-info-genres { color: #5d7050; }
.side-info-premise { color: #405532; }
.side-info-latest { padding-top: 8px; border-top: 1px solid #cedac2; color: #3e582e; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .side-spine:hover { border-color: #536d3d; }
}
@media (prefers-reduced-motion: reduce) {
  #reader-viewport, #side-shelves-scene, .side-shelf, .side-shelf * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* v34 additions only. A reader replaces both product pages inside the same
   shell. It uses the book's one native scroll surface, never a small inner
   scrolling viewport. The original catalogue remains completely unchanged. */
#full-reader {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0 28px 28px;
  background: #edf2e5;
  color: #314128;
}
#full-reader[hidden], .book-spread[hidden] { display: none; }
#full-reader .reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px 18px;
  margin: 0 -28px 0;
  padding: 13px 22px;
  border-bottom: 1px solid #c9d5bc;
  background: #f4f8ed;
  box-shadow: 0 2px 4px #34511c0a;
}
.reader-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 12px; min-width: 0; }
.reader-heading .demo-badge { flex-shrink: 0; min-height: 26px; margin: 0; padding: 3px 7px; font-size: 14px; }
#reader-title { min-width: 0; margin: 0; color: #2d4122; font-size: 23px; font-weight: 600; line-height: 1.35; letter-spacing: -.4px; overflow-wrap: anywhere; outline: none; }
#full-reader .reader-toolbar #reader-back { grid-column: 3; grid-row: 1; width: auto; min-height: 44px; padding: 9px 13px; white-space: nowrap; }
.reader-modes { grid-column: 2; grid-row: 1; display: flex; align-items: stretch; gap: 5px; min-width: 0; }
.reader-modes button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #b3c3a2;
  border-radius: 4px;
  background: #fffef8;
  color: #4a603a;
  font: 600 14px/1.5 Yoru, system-ui, sans-serif;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}
.reader-modes button[aria-pressed="true"] { border-color: #3c562a; background: #3c562a; color: #fffef8; }
.reader-disclaimer { max-width: 720px; margin: 17px auto; color: #596d49; font-size: 14px; line-height: 1.75; }
.reader-disclaimer strong { color: #394f2b; font-weight: 600; }
/* The geometry engine clips the animated leaf to the currently visible part
   of this region, excluding the sticky toolbar and all navigation controls. */
#full-reader #reader-viewport {
  position: relative;
  width: 100%;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  overscroll-behavior: auto;
  scroll-padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
#book-dialog.book-opening #full-reader #reader-viewport { opacity: 0; }
#book-dialog:not(.book-opening) #full-reader #reader-viewport { opacity: 1; transform: none; }
.demo-reading-page {
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid #b8c8a7;
  border-radius: 3px;
  background: #fffef8;
  color: #35492b;
  box-shadow: 0 3px 0 #e4edd9, 0 4px 0 #b7c6a5, 0 9px 20px #3953250f;
  scroll-margin-top: 130px;
  outline: none;
}
#full-reader[data-mode="scroll"] .demo-reading-page + .demo-reading-page { margin-top: 28px; }
#full-reader #reader-viewport .demo-page-number { margin: 0 0 7px; color: #617352; font-size: 14px; font-weight: 600; line-height: 1.6; }
.demo-reading-page h3 { margin: 0 0 18px; color: #2f4623; font-size: 27px; font-weight: 600; line-height: 1.35; letter-spacing: -.4px; }
#full-reader #reader-viewport .demo-panels { grid-template-rows: clamp(190px, 25vw, 300px) clamp(115px, 16vw, 190px); padding: 8px; gap: 9px; }
#full-reader #reader-viewport .demo-panel-wide::before { width: 110px; height: 110px; }
#full-reader #reader-viewport .demo-page-caption { margin: 15px 0 0; color: #5d704d; font-size: 14px; line-height: 1.75; }
#full-reader > .demo-navigation { width: 100%; max-width: 720px; margin: 22px auto 0; padding-top: 15px; border-color: #bdcdb0; }
#full-reader[data-mode="scroll"] > .demo-navigation { display: flex; justify-content: center; }
#full-reader #reader-progress { color: #50673f; font-size: 14px; }
.reader-source { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; min-height: 44px; margin: 10px auto 0; padding: 9px 12px; color: #526a40; font-size: 14px; line-height: 1.6; text-align: center; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .reader-modes button:not([aria-pressed="true"]):hover { border-color: #799660; background: #e4efd8; }
  .reader-source:hover { color: #304d1f; }
}
@media (max-width: 1050px) {
  #full-reader { padding-inline: 22px; }
  #full-reader .reader-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; margin-inline: -22px; padding: 12px 18px; }
  #full-reader .reader-toolbar #reader-back { grid-column: 2; }
  .reader-modes { grid-column: 1 / -1; grid-row: 2; }
  .reader-modes button { flex: 1; }
  .reader-heading { gap: 4px 10px; }
  #reader-title { font-size: 22px; }
}
@media (max-width: 759px) {
  #full-reader { padding: 0 14px 22px; }
  #full-reader .reader-toolbar { margin-inline: -14px; padding: 10px 13px; gap: 7px 10px; }
  .reader-heading { gap: 3px 7px; }
  .reader-heading .demo-badge { font-size: 14px; padding: 2px 6px; min-height: 25px; }
  #reader-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 20px; line-height: 1.4; }
  #full-reader .reader-toolbar #reader-back { padding-inline: 10px; font-size: 14px; }
  .reader-modes { gap: 6px; }
  .reader-modes button { padding-inline: 9px; font-size: 14px; }
  .reader-disclaimer { margin-block: 14px; font-size: 14px; }
  .demo-reading-page { padding: 17px; scroll-margin-top: 170px; }
  .demo-reading-page h3 { font-size: 24px; margin-bottom: 15px; }
  #full-reader #reader-viewport .demo-panels { grid-template-rows: 180px 105px; padding: 6px; gap: 7px; }
  #full-reader #reader-viewport .demo-panel-wide::before { width: 85px; height: 85px; }
  #full-reader[data-mode="scroll"] .demo-reading-page + .demo-reading-page { margin-top: 24px; }
  #full-reader > .demo-navigation { margin-top: 20px; }
}
@media (max-width: 390px) {
  #full-reader { padding-inline: 10px; }
  #full-reader .reader-toolbar { margin-inline: -10px; padding-inline: 10px; }
  #reader-title { font-size: 18px; }
  #full-reader .reader-toolbar #reader-back { padding-inline: 8px; }
  .reader-modes button { padding-inline: 5px; }
  .demo-reading-page { padding: 13px; }
  .demo-reading-page h3 { font-size: 22px; }
  #full-reader #reader-viewport .demo-panels { grid-template-rows: 155px 90px; }
}
/* On short/landscape screens a sticky multi-row toolbar would consume most
   of the reading area. It stays in normal flow; global Close remains fixed. */
@media (max-height: 550px) {
  #full-reader .reader-toolbar { position: relative; }
}

/* Genuine exterior shelves follow the document and match the center list's
   measured region height. These absolute children never narrow that list.
   Per-row facts push later rows in normal flow and increase native scrollHeight
   inside the region; they never overlay books or expand into the center. */
#catalog-shell { position: relative; }
.side-shelf {
  position: absolute;
  box-sizing: border-box;
  padding: 0 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior-y: contain;
  scroll-padding: 0;
}
.side-shelf-rows { display: block; min-width: 0; margin: 0; padding: 0; }
.side-shelf-row { display: block; min-width: 0; min-height: var(--side-row-height, 240px); margin: 0; padding: 0; border: 0; }
.side-shelf-row .side-shelf-grid {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  align-content: center;
  justify-content: center;
  gap: 0 4px;
  height: var(--side-row-height, 240px);
  min-height: 180px;
  margin: 0;
  padding: 4px 0 5px;
  border-bottom: 1px solid #b8c3aa;
}
.side-shelf-row .side-spine { width: 48px; min-width: 44px; height: 170px; }
.side-shelf-rows > .side-shelf-info { width: 100%; margin: 0; border-radius: 0 0 4px 4px; }
@media (prefers-reduced-motion: reduce) {
  #full-reader, #full-reader * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* v35 — Anime Yoru's verified dark/lavender visual language, applied to the
   existing catalogue and book. The v34 prefix is preserved byte-for-byte.
   No center-list dimensions, cover geometry or reader flow change here. */
:root {
  color-scheme: dark;
  --paper: #101017;
  --white: #14141d;
  --ink: #f4f2ff;
  --muted: #aaa7ba;
  --line: #373043;
  --accent: #b2a0ff;
  --yoru-font: 'Leelawadee UI', 'Noto Sans Thai', Tahoma, Yoru, system-ui, sans-serif;
  --yoru-panel: #1b1627;
  --yoru-chip: #181720;
  --yoru-chip-border: #2d2a39;
  --yoru-chip-text: #a6a0b7;
  --yoru-primary: #b2a0ff;
  --yoru-primary-ink: #1a122a;
  --yoru-active: #2c2442;
  --yoru-active-text: #c1b2ff;
  --yoru-status: #8fd9ba;
}
body { background: var(--paper); color: var(--ink); font-family: var(--yoru-font); }
body :is(button, input, summary) { font-family: var(--yoru-font); }
::selection { background: var(--yoru-primary); color: var(--yoru-primary-ink); }
.skip-link { border-radius: 8px; background: var(--yoru-primary); color: var(--yoru-primary-ink); }
.site-header { border-color: #282734; }
.masthead { color: var(--ink); font-family: var(--yoru-font); }
.masthead span { color: var(--yoru-primary); }
.header-note, .catalog-head p { color: var(--muted); }
#effects-toggle { border-color: #ffffff25; border-radius: 8px; background: #ffffff08; color: var(--ink); }
#effects-toggle[aria-pressed=true] b { color: var(--yoru-status); }
#effects-toggle[aria-pressed=false] { border-color: #373043; background: #181720; color: var(--muted); }
.search-form { border-color: #282734; border-radius: 10px; background: #1a1a25; }
.search-form > span[aria-hidden], #clear-search { color: var(--muted); }
.search-form:focus-within { outline-color: var(--yoru-primary); border-color: var(--yoru-primary); }
#story-search { color: var(--ink); }
#story-search::placeholder { color: var(--muted); }
.type-filters button { border-color: #ffffff25; border-radius: 8px; background: #ffffff08; color: var(--muted); }
.type-filters button[aria-pressed=true] { border-color: #4a3c69; background: var(--yoru-active); color: var(--yoru-active-text); }
.genre-filters { scrollbar-color: #514662 transparent; }
.genre-filters > span, .genre-filters > strong { color: var(--muted); }
.genre-filters button { border-color: var(--yoru-chip-border); border-radius: 7px; background: var(--yoru-chip); color: var(--yoru-chip-text); }
.genre-filters button[aria-pressed=true] { border-color: #54466f; background: var(--yoru-active); color: var(--yoru-active-text); }
.catalog-status, .catalog-status #result-count, #genre-context { color: var(--muted); }
#reset-filters { border-color: #ffffff25; border-radius: 8px; background: #ffffff08; color: var(--ink); }
.group-heading { border-color: #373043; background: var(--paper); }
.group-heading h2 { color: var(--ink); }
.group-count { border-color: #2d2a39; border-radius: 7px; background: #181720; color: var(--muted); }
.group-note, .group-footnote, #group-note, .grouping-note { color: var(--muted); }
.story-card { background: #14141d; outline-color: #373043; }
.panel-art { background: #14141d; }
.panel-art img { filter: grayscale(1) contrast(1.08); opacity: .25; }
.panel-art::before { background: linear-gradient(115deg, transparent 36%, #30283f 36.3%, #30283f 38%, #101017 38.2%, #101017 40%, transparent 40.2%); }
.panel-art::after { background: #101017; border-color: #514662; }
.cover-slot img.cover { outline-color: #5a506a; box-shadow: 0 0 0 2px #14141d, 3px 3px 0 #373043; }
.cover-button:focus-visible { outline-color: var(--yoru-primary); box-shadow: inset 0 0 0 5px #14141d; }
.card-copy { border-color: #373043; background: #14141d; }
.card-copy::after { background: #54466f; }
.story-item:nth-of-type(2n) .card-copy::after { background: #b2a0ff; }
.story-title { color: var(--ink); }
.story-chapter { color: var(--muted); }
.story-item.is-selected .story-card { outline-color: var(--yoru-primary); }
.story-item.is-selected .card-copy::before { background: var(--yoru-primary); }
.story-item.is-preselected .story-card { outline-color: var(--yoru-primary); }
.cover-back { border-color: #5a506a; background: #1b1627; color: var(--muted); box-shadow: 0 0 0 2px #14141d, 4px 4px 0 #373043; }
.cover-back strong, .cover-back b { color: var(--ink); }
.cover-back small, .cover-back span, .cover-back p { color: var(--muted); }
.empty-state { border-color: #373043; border-radius: 20px; background: #1b1627; }
.empty-state h2, .site-footer > strong { color: var(--ink); }
.empty-state p, .effects-status, .site-footer, .site-footer > small { color: var(--muted); }
.site-footer { border-color: #373043; }
.noscript-note, noscript > p { border-color: #373043; border-radius: 10px; background: #1b1627; color: var(--muted); }

/* The in-card preview retains its measured128px minimum geometry and44px
   controls. Only colors/fonts change; source art elsewhere is never tinted. */
#hover-preview { border-color: #665580; background: #1b1627; color: var(--ink); box-shadow: inset 0 0 0 1px #373043; font-family: var(--yoru-font); }
#hover-facts, #hover-facts p, #hover-facts .hover-genres, #hover-facts .hover-credit, #hover-summary { color: var(--muted); }
#hover-facts .hover-credit > span, #hover-facts small { color: var(--muted); }
#hover-facts .hover-chapter, #hover-facts :is(strong, b) { color: var(--ink); }
#hover-countdown { color: var(--yoru-status); }
#hover-open, #hover-cancel { border-color: #ffffff25; border-radius: 8px; background: #ffffff08; color: var(--ink); font-family: var(--yoru-font); }
#hover-open { border-color: var(--yoru-primary); background: var(--yoru-primary); color: var(--yoru-primary-ink); }
#hover-preview :is(button, a):focus-visible, .story-card.inline-preview-active:has(.cover-button:focus-visible) #hover-preview { outline-color: var(--yoru-primary); }

/* Full-size product/reader shell: preserve all measured placement variables,
   independent native scrolling, canvas handoff, and stable topbar stacking. */
#book-dialog {
  --book-paper: #14141d;
  --book-ink: #f4f2ff;
  --book-muted: #aaa7ba;
  --book-rule: #373043;
  --book-accent: #b2a0ff;
  color-scheme: dark;
  font-family: var(--yoru-font);
}
#book-dialog::backdrop { background: #08080ec9; }
#book-shell { border-color: #373043; border-radius: 20px; background: #14141d; box-shadow: none; }
.book-topbar { border-color: #373043; border-radius: 19px 19px 0 0; background: #1b1627; }
.book-brand { color: var(--book-ink); font-family: var(--yoru-font); }
.book-brand #book-kind { color: var(--book-muted); }
.book-tools button { border-color: #ffffff25; border-radius: 8px; background: #ffffff08; color: var(--book-ink); font-family: var(--yoru-font); }
#book-motion-toggle { background: #ffffff08; }
#book-motion-toggle[aria-pressed=true] #book-motion-label { color: var(--yoru-status); }
#book-motion-toggle[aria-pressed=false] { border-color: #373043; background: #181720; color: var(--book-muted); }
#book-replay { border-color: #54466f; background: #2c2442; color: #c1b2ff; }
#book-skip { border-color: #665580; background: #1b1627; color: #c1b2ff; }
#book-close { border-color: var(--yoru-primary); background: var(--yoru-primary); color: var(--yoru-primary-ink); }
.book-scroll { border-radius: 0 0 19px 19px; scrollbar-color: #514662 #14141d; }
.book-left, #book-dialog[data-view="reader"] .book-left { border-color: #373043; background: #1b1627; }
.book-right, .book-spread { background: #14141d; }
.book-spine { background: linear-gradient(90deg, transparent, #08080e33 38%, #08080e80 49%, #73638b38 53%, #08080e15 70%, transparent); }
.book-spine::after { background: #51466280; }
.book-kicker { color: var(--yoru-active-text); }
.book-cover { border-color: #514662; box-shadow: 4px 2px 0 #514662, 5px 2px 0 #282734; }
#book-title, .book-premise h3 { color: var(--book-ink); }
.book-credit dt, .book-type, .book-snapshot dt, .book-snapshot small { color: var(--book-muted); }
.book-credit dd, .book-snapshot dd { color: var(--book-ink); }
.book-premise p { color: #d4cfdf; }
.book-genres > span { border-color: #2d2a39; border-radius: 7px; background: #181720; color: #a6a0b7; }
.book-source { border-color: #ffffff25; border-radius: 8px; background: #ffffff08; color: var(--book-ink); }
.book-provenance > summary, .book-small { color: var(--book-muted); }
.book-source-list a { color: var(--yoru-active-text); }
.book-effect-status { border-color: #373043; border-radius: 0 0 19px 19px; background: #1b1627; color: var(--yoru-status); }
#book-backdrop .backdrop-wing { border-color: #373043; background-color: #14141d; background-image: linear-gradient(0deg, #1010174d, #1010174d), var(--selected-cover, none); filter: saturate(.8); opacity: .7; }
#book-backdrop .backdrop-left, #book-backdrop .backdrop-right { box-shadow: none; }
.book-demo-button { border-color: var(--yoru-primary); border-radius: 8px; background: var(--yoru-primary); color: var(--yoru-primary-ink); font-family: var(--yoru-font); }
.book-demo-button > span { border-color: #7761b4; border-radius: 7px; background: #c4b5ff; color: #1a122a; }
.demo-cta-note, .demo-context { color: var(--book-muted); }
.demo-badge { border-color: #54466f; border-radius: 7px; background: #2c2442; color: #c1b2ff; }
.demo-warning { border-color: #8c78bf; border-radius: 0 8px 8px 0; background: #2c2442; color: #d4cfdf; }
.demo-warning strong { color: var(--book-ink); }
#reader-back, #reader-prev, #reader-next { border-color: #ffffff25; border-radius: 8px; background: #ffffff08; color: var(--book-ink); font-family: var(--yoru-font); }
#full-reader { background: #101017; color: var(--book-ink); }
#full-reader .reader-toolbar { border-color: #373043; background: #1b1627; box-shadow: none; }
#reader-title, .demo-reading-page h3, #demo-page-title { color: var(--book-ink); }
.reader-modes button { border-color: #ffffff25; border-radius: 8px; background: #ffffff08; color: var(--book-muted); font-family: var(--yoru-font); }
.reader-modes button[aria-pressed="true"] { border-color: #54466f; background: #2c2442; color: #c1b2ff; }
.reader-disclaimer, .demo-page-caption, #full-reader #reader-viewport .demo-page-caption { color: var(--book-muted); }
.reader-disclaimer strong { color: var(--book-ink); }
#reader-viewport { color: var(--book-ink); scrollbar-color: #514662 #14141d; }
.demo-reading-page { border-color: #373043; border-radius: 12px; background: #14141d; color: var(--book-ink); box-shadow: none; }
.demo-page-number, #full-reader #reader-viewport .demo-page-number { color: var(--yoru-active-text); }
.demo-panels { border-color: #373043; border-radius: 8px; background: #1b1627; }
.demo-panel { border-color: #514662; background: #29213b; }
.demo-panel-wide { background: linear-gradient(145deg, #201b2d 0 55%, #54466f 55.3% 69%, #30283f 69.3%); }
.demo-panel-wide::before { border-color: #8c78bf; background: #665580; }
.demo-panel-wide::after { background: #b2a0ff66; }
.demo-panel-wide > span { color: #f4f2ff; font-family: var(--yoru-font); }
.demo-panel:nth-child(2) { background: repeating-linear-gradient(125deg, #262033 0 16px, #514662 16px 17px, #262033 17px 32px); }
.demo-panel:nth-child(2)::after { border-color: #8c78bf; background: #54466f; }
.demo-panel:nth-child(3) { background: #262033; }
.demo-panel:nth-child(3)::before { background: #665580; }
.demo-panel:nth-child(3)::after { border-color: #8c78bf; background: #b2a0ff; }
.demo-navigation, #full-reader > .demo-navigation { border-color: #373043; }
#reader-progress, #full-reader #reader-progress { color: var(--book-muted); }
.reader-source { color: var(--yoru-active-text); }

/* Exterior rows now use their available width, with approximately10px inside
   each edge. A visible-count custom property comes from the shelf controller;
   fixed48px tracks are intentionally replaced, never the center catalogue. */
.side-shelf {
  padding-inline: 0;
  color: var(--ink);
  font-family: var(--yoru-font);
  scrollbar-color: #514662 #101017;
  scrollbar-width: thin;
}
.side-shelf::-webkit-scrollbar { width: 8px; }
.side-shelf::-webkit-scrollbar-track { background: #101017; }
.side-shelf::-webkit-scrollbar-thumb { border-radius: 8px; background: #514662; }
.side-shelf-heading { border-color: #373043; border-radius: 12px 12px 0 0; background: #1b1627; }
.side-shelf-heading h2 { color: var(--ink); }
.side-shelf-note { border-color: #373043; border-radius: 0 0 12px 12px; background: #1b1627; color: var(--muted); }
.side-shelf-row .side-shelf-grid {
  grid-template-columns: repeat(var(--side-columns, 3), minmax(44px, 1fr));
  gap: 0 6px;
  padding-inline: 10px;
  border-color: #373043;
}
.side-shelf-row .side-spine {
  width: 100%;
  min-width: 44px;
  height: clamp(170px, calc(var(--side-row-height, 240px) - 24px), 480px);
  border-color: #665580;
  border-radius: 7px;
  color: var(--ink);
  font-family: var(--yoru-font);
}
.side-spine-art { filter: saturate(.8) contrast(.98); }
.side-spine-title {
  right: 6px;
  width: clamp(28px, calc(var(--side-row-height, 240px) * .1), 36px);
  border-color: #514662;
  border-radius: 4px;
  background: #14141d;
  color: var(--ink);
  font-size: clamp(14px, calc(var(--side-row-height, 240px) * .05), 17px);
}
.side-spine.is-peeked { border-color: var(--yoru-primary); outline-color: var(--yoru-primary); }
.side-spine.is-peeked .side-spine-title { border-color: #8c78bf; background: #2c2442; color: #f4f2ff; }
.side-spine:focus-visible { outline-color: var(--yoru-primary); }
.side-shelf-info { border-color: #373043; background: #1b1627; color: var(--muted); box-shadow: none; }
.side-info-title { color: var(--ink); }
.side-info-creator, .side-info-premise { color: #d4cfdf; }
.side-info-genres { color: var(--muted); }
.side-info-latest { border-color: #373043; color: var(--yoru-status); }

@media (hover: hover) and (pointer: fine) {
  .title-button:hover { color: #c1b2ff; }
  .type-filters button:not([aria-pressed=true]):hover,
  .genre-filters button:not([aria-pressed=true]):hover { border-color: #665580; background: #2c2442; color: #c1b2ff; }
  #effects-toggle:hover, #reset-filters:hover { border-color: #665580; background: #2c2442; color: #f4f2ff; }
  #hover-open:hover, #book-close:hover, .book-demo-button:hover { border-color: #c4b5ff; background: #c4b5ff; color: #1a122a; }
  #hover-cancel:not(:disabled):hover, #book-motion-toggle:hover, #book-skip:hover,
  #book-replay:hover, .book-source:hover, #reader-back:hover,
  #reader-prev:not(:disabled):hover, #reader-next:not(:disabled):hover,
  .reader-modes button:not([aria-pressed="true"]):hover { border-color: #665580; background: #2c2442; color: #f4f2ff; }
  .book-source-list a:hover, .book-provenance > summary:hover, .reader-source:hover { color: #d4caff; }
  .side-spine:hover { border-color: #b2a0ff; }
}

/* v36 — Natural document flow for exterior shelves only.
   Keep the complete approved v35 theme/layout above byte-for-byte. The center
   occupies the same min(available width, --max) rectangle as before. Shelves
   participate in the page grid instead of copying its height or owning scroll. */
#catalog-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(100%, var(--max, 1520px)) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  width: 100%;
  min-width: 0;
}
#catalog-flow > #catalog {
  grid-column: 2;
  grid-row: 1;
}
#catalog-flow > .side-shelf {
  position: static;
  grid-row: 1;
  align-self: start;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  margin-block: 0;
  padding: 0;
  overflow: visible;
  overscroll-behavior: auto;
  scroll-padding: 0;
}
#catalog-flow > .side-shelf[data-side="left"] {
  grid-column: 1;
  margin-inline: 8px 16px;
}
#catalog-flow > .side-shelf[data-side="right"] {
  grid-column: 3;
  margin-inline: 16px 8px;
}
.side-shelf-row {
  height: auto;
  min-height: 0;
}
.side-shelf-row .side-shelf-grid {
  height: auto;
  min-height: 0;
  align-content: start;
  justify-content: stretch;
  padding-block: 12px;
}
/* Controller computes this value from the available spine-track width alone.
   Facts stay normal-flow siblings, so they increase the document row height
   without a nested scrollbar, empty row reservation or moving the center. */
.side-shelf-row .side-spine {
  height: var(--side-book-height, 220px);
}
.side-spine-title {
  width: clamp(28px, calc(var(--side-book-height, 220px) * .1), 36px);
  font-size: clamp(14px, calc(var(--side-book-height, 220px) * .05), 17px);
}

/* v37 — Small, explicit local exploration controls and native status marks.
   The approved v36 catalogue, side flow, book geometry and theme above remain
   byte-for-byte. These additions never resize a source cover or its target. */
#exploration-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 0;
  margin: 0 0 8px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
#saved-filter, #random-unseen, #reset-explored, #clear-discovery,
.book-discovery-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #ffffff25;
  border-radius: 8px;
  background: #ffffff08;
  color: var(--ink);
  font: 500 13px/1.6 var(--yoru-font);
  text-align: center;
  cursor: pointer;
}
#saved-filter[aria-pressed="true"], #save-story[aria-pressed="true"] {
  border-color: #665580;
  background: var(--yoru-active);
  color: var(--yoru-active-text);
}
#explored-count { margin-left: auto; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.exploration-help { min-width: 0; margin: 0; color: var(--muted); font-size: 13px; }
.exploration-help > summary {
  display: list-item;
  min-height: 44px;
  margin: 0 0 0 18px;
  padding: 11px 4px;
  color: var(--yoru-active-text);
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer;
}
.exploration-help[open] { flex-basis: 100%; }
.exploration-help > :not(summary) { max-width: 760px; }
.exploration-help p { margin: 0 0 9px; color: var(--muted); font-size: 13px; line-height: 1.75; }
#reset-explored { margin-bottom: 4px; color: var(--muted); }
#discovery-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  min-width: 0;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid #54466f;
  border-radius: 10px;
  background: var(--yoru-panel);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
#discovery-context[hidden] { display: none; }
#discovery-context > div { flex: 1 1 220px; min-width: 0; }
#discovery-title { color: var(--ink); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
#discovery-tags { margin: 4px 0; min-width: 0; color: var(--yoru-active-text); font-size: 13px; overflow-wrap: anywhere; }
#discovery-count { display: block; color: var(--muted); font-size: 13px; line-height: 1.6; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#clear-discovery { margin-left: auto; flex-shrink: 0; }
.book-discovery-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 16px 0; }
.book-discovery-actions button { font-size: 14px; }
#explore-related { border-color: #665580; background: var(--yoru-active); color: var(--yoru-active-text); }
#story-exploration-state { flex-basis: 100%; min-width: 0; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

/* A contextual genre count is temporary, not another permanent card field.
   Native labels survive missing WebGL, motion-off and reduced-motion states. */
#story-grid .genre-match:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 14px);
  padding: 3px 6px;
  border-color: #665580;
  border-radius: 7px;
  background: #2c2442;
  color: #f4f2ff;
  font-size: 13px;
  line-height: 1.5;
  pointer-events: none;
}
.story-item.is-related .story-card { outline-color: #8c78bf; }
.story-item.is-selected .story-card, .story-item.is-preselected .story-card { outline-color: var(--yoru-primary); }
.saved-marker {
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 2px 5px;
  border: 1px solid #665580;
  border-radius: 6px;
  background: #1b1627;
  color: #c1b2ff;
  font-size: 13px;
  line-height: 1;
  pointer-events: none;
}
.saved-marker[hidden] { display: none; }
.story-item.is-explored .card-copy::after { background: #8fd9ba; }
.side-spine.is-related { border-color: #b2a0ff; box-shadow: inset 0 0 0 1px #b2a0ff; }
.side-spine.is-related .side-spine-title { border-color: #8c78bf; }
.side-info-related { padding-top: 8px; border-top: 1px solid #54466f; color: #c1b2ff; font-size: 14px; line-height: 1.65; }
.side-spine-status {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 24px;
  overflow: hidden;
  border: 1px solid #665580;
  border-radius: 5px;
  background: #14141d;
  color: #c1b2ff;
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.side-spine-status[hidden] { display: none; }
.side-spine.is-viewed:not(.is-saved) .side-spine-status { color: #8fd9ba; border-color: #4d7868; }
.side-spine:is(.is-saved, .is-viewed) .side-spine-title { top: 35px; }
@media (hover: hover) and (pointer: fine) {
  #saved-filter:hover, #random-unseen:hover, #reset-explored:hover, #clear-discovery:hover,
  .book-discovery-actions button:hover { border-color: #665580; background: #2c2442; color: #f4f2ff; }
  .exploration-help > summary:hover { color: #d4caff; }
}
@media (max-width: 650px) {
  #exploration-tools { gap: 5px 6px; }
  #exploration-tools > button { flex: 1 1 auto; padding-inline: 10px; }
  #explored-count { margin-left: 0; }
  .exploration-help { margin-left: auto; }
  .exploration-help[open] { margin-left: 0; }
  #discovery-context { gap: 6px 8px; }
  #clear-discovery { padding-inline: 10px; }
  .book-discovery-actions button { flex: 1 1 auto; padding-inline: 10px; }
}
/* The controller removes this transient class after340ms. Persisted status
   classes never restart the cue, and no target or book geometry is animated. */
@keyframes yoru-local-stamp {
  0% { opacity: .65; transform: scale(.88); }
  70% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes yoru-explored-ink {
  0% { opacity: .45; }
  100% { opacity: 1; }
}
body:has(#effects-toggle[aria-pressed="true"]):not(:has(#book-motion-toggle[aria-pressed="false"])) .discovery-stamp .saved-marker:not([hidden]) { animation: yoru-local-stamp 320ms ease-out 1; }
body:has(#effects-toggle[aria-pressed="true"]):not(:has(#book-motion-toggle[aria-pressed="false"])) .discovery-stamp .card-copy::after { animation: yoru-explored-ink 320ms ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .saved-marker, .side-spine-status, .discovery-stamp .card-copy::after { animation: none !important; transition: none !important; }
}

/* A successfully revealed front cover gets a short bottom caption instead of
   the spine's long vertical band. Native/off/reduced spines keep their label.
   This changes only an overlaid label, never the book target or its neighbors. */
.side-spine-status { right: auto; width: 24px; }
.side-spine.scene-spine-active.is-peeked .side-spine-title {
  top: auto;
  right: 4px;
  bottom: 4px;
  left: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: auto;
  max-height: calc(2.9em + 8px);
  padding: 4px 6px;
  background: #14141d;
  color: #f4f2ff;
  font-size: 13px;
  line-height: 1.45;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
}