@font-face {
  font-family: "Inter Local";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Theme control and a quieter action language. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(163, 178, 211, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #c8d2e3;
  font-size: 10px;
  font-weight: 750;
  transition: color 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium), transform 360ms var(--ease-premium);
}
.theme-toggle:hover {
  border-color: rgba(106, 168, 255, 0.42);
  background: rgba(106, 168, 255, 0.1);
  color: #edf3ff;
  transform: translateY(-1px);
}
.theme-toggle-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid rgba(173, 192, 227, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: var(--control-blue);
  font-size: 14px;
  line-height: 1;
}
.theme-toggle-label { line-height: 1; }

.button-primary,
.search-box button {
  background: #7f9fe9;
  color: #0b1220;
  box-shadow: 0 15px 32px rgba(74, 112, 190, 0.22);
  text-shadow: none;
}
.button-primary:hover,
.search-box button:hover {
  background: #a7bcff;
  color: #08101f;
  box-shadow: 0 18px 38px rgba(74, 112, 190, 0.27);
}
.button-primary::after { display: none; }

html[data-theme="light"] {
  color-scheme: light;
  --paper: #f5f7fb;
  --paper-warm: #edf2f8;
  --paper-deep: #dce7f5;
  --white: #ffffff;
  --ink: #27364e;
  --navy: #172640;
  --navy-deep: #0d1a31;
  --muted: #687993;
  --muted-light: #95a3b7;
  --line: rgba(32, 61, 100, 0.14);
  --line-dark: rgba(255, 255, 255, 0.18);
  --red: #c76558;
  --red-dark: #ab5149;
  --jade: #398d74;
  --gold: #b27a22;
  --blue: #477dd7;
  --violet: #7a68c4;
  --shadow-soft: 0 24px 64px rgba(39, 63, 99, 0.14);
  --shadow-card: 0 18px 48px rgba(39, 63, 99, 0.1);
  --control-blue: #3f70c6;
  --control-line: rgba(36, 66, 108, 0.18);
  --control-fill: rgba(255, 255, 255, 0.8);
  background: var(--paper);
}

html[data-theme="light"] body {
  color: var(--ink);
  background:
    radial-gradient(circle at 80% -4%, rgba(82, 130, 222, 0.12), transparent 31rem),
    radial-gradient(circle at 12% 24%, rgba(121, 95, 194, 0.065), transparent 34rem),
    var(--paper);
}
html[data-theme="light"] ::selection { background: rgba(71, 125, 215, 0.18); }
html[data-theme="light"] :focus-visible { outline-color: rgba(71, 125, 215, 0.62); }

html[data-theme="light"] .site-header {
  border-bottom-color: rgba(32, 61, 100, 0.12);
  background: rgba(248, 250, 253, 0.82);
  box-shadow: 0 12px 34px rgba(39, 63, 99, 0.08);
}
html[data-theme="light"] .site-header::after { background: linear-gradient(90deg, transparent, rgba(71, 125, 215, 0.28), transparent); }
html[data-theme="light"] .brand { color: var(--navy); }
html[data-theme="light"] .brand small { color: var(--muted); }
html[data-theme="light"] .desktop-nav a { color: var(--muted); }
html[data-theme="light"] .desktop-nav a:hover,
html[data-theme="light"] .desktop-nav a.is-active { color: var(--navy); }
html[data-theme="light"] .desktop-nav a[href="/library"] { border-color: rgba(32, 61, 100, 0.13); background: rgba(255, 255, 255, 0.72); }
html[data-theme="light"] .desktop-nav a[href="/library"]:hover,
html[data-theme="light"] .desktop-nav a[href="/library"].is-active { border-color: rgba(71, 125, 215, 0.36); background: rgba(71, 125, 215, 0.1); color: #315da8; }
html[data-theme="light"] .header-search { border-color: rgba(32, 61, 100, 0.14); background: rgba(255, 255, 255, 0.72); color: var(--muted); }
html[data-theme="light"] .header-search:hover { border-color: rgba(71, 125, 215, 0.38); background: rgba(71, 125, 215, 0.08); color: var(--navy); }
html[data-theme="light"] .menu-toggle > span { background: var(--navy); }
html[data-theme="light"] .theme-toggle { border-color: rgba(32, 61, 100, 0.15); background: rgba(255, 255, 255, 0.78); color: #52647f; }
html[data-theme="light"] .theme-toggle:hover { border-color: rgba(71, 125, 215, 0.42); background: rgba(71, 125, 215, 0.09); color: #244e96; }
html[data-theme="light"] .theme-toggle-icon { border-color: rgba(71, 125, 215, 0.18); background: #edf3ff; color: #477dd7; }

html[data-theme="light"] .hero-copy h1,
html[data-theme="light"] .discover-intro h1,
html[data-theme="light"] .library-intro h1,
html[data-theme="light"] .not-found h1,
html[data-theme="light"] .feature-info h2,
html[data-theme="light"] .card-body h3,
html[data-theme="light"] .shelf-row-main h3,
html[data-theme="light"] .detail-heading h2,
html[data-theme="light"] .panel-heading h2,
html[data-theme="light"] .aside-card h3,
html[data-theme="light"] .chapter-name { color: var(--navy); }
html[data-theme="light"] h1 em,
html[data-theme="light"] h2 em { background: linear-gradient(108deg, #477dd7 4%, #806cc9 62%, #c76558 100%); background-clip: text; -webkit-background-clip: text; color: transparent; }
html[data-theme="light"] .hero-lede,
html[data-theme="light"] .discover-lede,
html[data-theme="light"] .library-intro-side > p { color: #64748d; }
html[data-theme="light"] .hero-footnote { color: #7b8ca3; }
html[data-theme="light"] .hero-footnote b { color: var(--navy); }

html[data-theme="light"] .hero-feature {
  border-color: rgba(32, 61, 100, 0.14);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 26px 70px rgba(39, 63, 99, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.72) inset;
}
html[data-theme="light"] .feature-info,
html[data-theme="light"] .feature-bottom { border-color: rgba(32, 61, 100, 0.12); background: rgba(247, 250, 254, 0.82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }
html[data-theme="light"] .feature-label,
html[data-theme="light"] .section-note { color: #7889a1; }
html[data-theme="light"] .feature-info p,
html[data-theme="light"] .feature-bottom { color: #70819a; }
html[data-theme="light"] .feature-arrow,
html[data-theme="light"] .text-link span { border-color: rgba(71, 125, 215, 0.28); background: rgba(71, 125, 215, 0.08); color: #3f70c6; }

html[data-theme="light"] .button-primary,
html[data-theme="light"] .search-box button { background: #263f6b; color: #fff; box-shadow: 0 15px 32px rgba(36, 64, 111, 0.2); }
html[data-theme="light"] .button-primary:hover,
html[data-theme="light"] .search-box button:hover { background: #35598e; color: #fff; box-shadow: 0 18px 38px rgba(36, 64, 111, 0.24); }
html[data-theme="light"] .button-quiet { color: var(--navy); }
html[data-theme="light"] .button-quiet:hover { color: var(--red); }
html[data-theme="light"] .button-dark,
html[data-theme="light"] .button-paper { border-color: rgba(32, 61, 100, 0.14); background: rgba(255, 255, 255, 0.82); color: var(--navy); }
html[data-theme="light"] .button-dark:hover,
html[data-theme="light"] .button-paper:hover { border-color: rgba(71, 125, 215, 0.3); background: #eef4ff; color: #315da8; }
html[data-theme="light"] .button-outline { border-color: rgba(32, 61, 100, 0.18); background: rgba(255, 255, 255, 0.72); color: var(--navy); }
html[data-theme="light"] .button-outline:hover,
html[data-theme="light"] .button-outline.is-saved { border-color: rgba(71, 125, 215, 0.48); background: rgba(71, 125, 215, 0.09); color: #315da8; }

html[data-theme="light"] .home-popular-section { background: #edf2f8; }
html[data-theme="light"] .home-arrivals-section { background: #f7f9fc; }
html[data-theme="light"] .novel-card { border-color: rgba(32, 61, 100, 0.14); background: rgba(255, 255, 255, 0.92); box-shadow: 0 18px 48px rgba(39, 63, 99, 0.1); }
html[data-theme="light"] .novel-card:hover { border-color: rgba(71, 125, 215, 0.3); box-shadow: 0 25px 58px rgba(39, 63, 99, 0.16), 0 0 0 1px rgba(71, 125, 215, 0.08); }
html[data-theme="light"] .card-author,
html[data-theme="light"] .card-bottom,
html[data-theme="light"] .rating { color: var(--muted); }
html[data-theme="light"] .card-body h3 a:hover { color: #315da8; }
html[data-theme="light"] .card-bottom { border-top-color: rgba(32, 61, 100, 0.11); }
html[data-theme="light"] .icon-button { border-color: rgba(32, 61, 100, 0.16); background: rgba(239, 244, 251, 0.9); color: #6a7d98; }
html[data-theme="light"] .icon-button:hover,
html[data-theme="light"] .icon-button.is-saved { border-color: rgba(71, 125, 215, 0.42); background: rgba(71, 125, 215, 0.1); color: #3f70c6; }
html[data-theme="light"] .shelf-list { border-top-color: rgba(32, 61, 100, 0.12); }
html[data-theme="light"] .home-arrivals-section .shelf-list { border-color: rgba(32, 61, 100, 0.13); background: rgba(255, 255, 255, 0.78); box-shadow: 0 20px 50px rgba(39, 63, 99, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82); }
html[data-theme="light"] .shelf-row { border-bottom-color: rgba(32, 61, 100, 0.11); }
html[data-theme="light"] .shelf-row:hover { background: rgba(71, 125, 215, 0.055); box-shadow: inset 3px 0 0 rgba(71, 125, 215, 0.48); }
html[data-theme="light"] .shelf-row-side { border-left-color: rgba(32, 61, 100, 0.1); }
html[data-theme="light"] .shelf-row-side .rating { color: var(--navy); }

html[data-theme="light"] .continue-card,
html[data-theme="light"] .progress-card,
html[data-theme="light"] .aside-card,
html[data-theme="light"] .novel-cover-frame { border-color: rgba(32, 61, 100, 0.14); background: rgba(255, 255, 255, 0.88); box-shadow: 0 20px 50px rgba(39, 63, 99, 0.1); }
html[data-theme="light"] .continue-card { background: linear-gradient(125deg, rgba(255, 255, 255, 0.96), rgba(239, 245, 252, 0.94)); }
html[data-theme="light"] .continue-side { border-left-color: rgba(32, 61, 100, 0.12); }
html[data-theme="light"] .continue-main > p,
html[data-theme="light"] .continue-side p,
html[data-theme="light"] .progress-card p { color: var(--muted); }
html[data-theme="light"] .progress-track,
html[data-theme="light"] .mini-progress { background: rgba(32, 61, 100, 0.1); }
html[data-theme="light"] .start-card { background: linear-gradient(122deg, #142746, #1b3154 55%, #28335f); }
html[data-theme="light"] .section-band-warm { background: #edf2f8; }
html[data-theme="light"] .section-band-ink { background: #10203a; }

html[data-theme="light"] .search-box { border-color: rgba(32, 61, 100, 0.16); background: rgba(255, 255, 255, 0.86); box-shadow: 0 18px 45px rgba(39, 63, 99, 0.08); }
html[data-theme="light"] .search-box input { color: var(--navy); }
html[data-theme="light"] .search-box input::placeholder { color: #98a6b9; }
html[data-theme="light"] .filter-pill,
html[data-theme="light"] .tag { border-color: rgba(32, 61, 100, 0.14); background: rgba(255, 255, 255, 0.8); color: #667993; }
html[data-theme="light"] .filter-pill:hover,
html[data-theme="light"] .filter-pill.is-active { border-color: rgba(71, 125, 215, 0.48); background: rgba(71, 125, 215, 0.1); color: #315da8; }
html[data-theme="light"] .sort-control select { border-color: rgba(32, 61, 100, 0.16); background: #fff; color: var(--navy); }
html[data-theme="light"] .sort-control select option { background: #fff; color: var(--navy); }
html[data-theme="light"] .sort-control select option:checked,
html[data-theme="light"] .sort-control select option:hover { background: #dbe8ff; color: #1f4d97; }
html[data-theme="light"] .result-switch { border-bottom-color: rgba(32, 61, 100, 0.13); }
html[data-theme="light"] .result-switch a + a { border-left-color: rgba(32, 61, 100, 0.11); }
html[data-theme="light"] .result-switch a { color: var(--muted); }
html[data-theme="light"] .result-switch a.is-active,
html[data-theme="light"] .result-switch a:hover { color: #315da8; }
html[data-theme="light"] .empty-search,
html[data-theme="light"] .library-empty { border-color: rgba(32, 61, 100, 0.2); background: rgba(255, 255, 255, 0.72); }

html[data-theme="light"] .breadcrumbs,
html[data-theme="light"] .chapter-panel-note,
html[data-theme="light"] .chapter-date { color: var(--muted); }
html[data-theme="light"] .novel-byline,
html[data-theme="light"] .novel-stats div > span { color: var(--muted); }
html[data-theme="light"] .novel-byline b,
html[data-theme="light"] .novel-stats strong { color: var(--navy); }
html[data-theme="light"] .novel-blurb,
html[data-theme="light"] .synopsis { color: #3d4e68; }
html[data-theme="light"] .novel-stats,
html[data-theme="light"] .novel-stats div + div { border-color: rgba(32, 61, 100, 0.12); }
html[data-theme="light"] .translator-note { background: #eef4fb; }
html[data-theme="light"] .chapter-list,
html[data-theme="light"] .chapters-panel { border-color: rgba(32, 61, 100, 0.12); }
html[data-theme="light"] .chapter-row { border-bottom-color: rgba(32, 61, 100, 0.11); }
html[data-theme="light"] .chapter-row:hover { background: rgba(71, 125, 215, 0.06); }
html[data-theme="light"] .chapter-row.is-current { outline-color: rgba(71, 125, 215, 0.36); background: linear-gradient(90deg, rgba(71, 125, 215, 0.12), rgba(71, 125, 215, 0.045)); }
html[data-theme="light"] .chapter-row.is-current .chapter-number { color: #315da8; }
html[data-theme="light"] .chapter-arrow,
html[data-theme="light"] .mini-related i { border-color: rgba(71, 125, 215, 0.3); background: rgba(71, 125, 215, 0.08); color: #3f70c6; }
html[data-theme="light"] .mini-related-cover { box-shadow: 0 10px 20px rgba(39, 63, 99, 0.14); }

html[data-theme="light"] .reader-shell { background: radial-gradient(circle at 74% 4%, rgba(71, 125, 215, 0.08), transparent 24rem), var(--paper); }
html[data-theme="light"] .reader-topbar { border-bottom-color: rgba(32, 61, 100, 0.11); background: rgba(245, 248, 252, 0.78); }
html[data-theme="light"] .reader-copy { color: #354864; }
html[data-theme="light"] .reader-progress-line { background: rgba(32, 61, 100, 0.12); }
html[data-theme="light"] .reader-progress-line > span { background: linear-gradient(90deg, #477dd7, #7a68c4); }
html[data-theme="light"] .reader-settings-panel { border-color: rgba(32, 61, 100, 0.14); background: rgba(247, 250, 254, 0.94); }
html[data-theme="light"] .settings-buttons { border-color: rgba(32, 61, 100, 0.14); }
html[data-theme="light"] .settings-buttons button,
html[data-theme="light"] .setting-choice { background: rgba(227, 235, 246, 0.72); color: var(--navy); }
html[data-theme="light"] .settings-buttons button + button { border-left-color: rgba(32, 61, 100, 0.12); }
html[data-theme="light"] .reader-save,
html[data-theme="light"] .reader-menu-button { border-color: rgba(32, 61, 100, 0.16); background: rgba(255, 255, 255, 0.72); color: #52647f; }
html[data-theme="light"] .reader-save:hover,
html[data-theme="light"] .reader-save.is-saved { border-color: rgba(71, 125, 215, 0.42); background: rgba(71, 125, 215, 0.1); color: #315da8; }
html[data-theme="light"] .reader-menu-button > span,
html[data-theme="light"] .reader-back-icon { border-color: rgba(71, 125, 215, 0.24); background: rgba(71, 125, 215, 0.08); color: #3f70c6; }
html[data-theme="light"] .site-footer { background: #e8eef7; }
html[data-theme="light"] .mobile-menu { border-color: rgba(32, 61, 100, 0.12); background: rgba(248, 250, 253, 0.94); }
html[data-theme="light"] .mobile-menu a { border-top-color: rgba(32, 61, 100, 0.11); color: var(--muted); }
html[data-theme="light"] .mobile-menu a:hover,
html[data-theme="light"] .mobile-menu a.is-active { color: #315da8; }

select,
option { color-scheme: dark; }
html[data-theme="light"] select,
html[data-theme="light"] option { color-scheme: light; }

@media (max-width: 570px) {
  .theme-toggle { width: 36px; min-width: 36px; padding: 0; justify-content: center; }
  .theme-toggle-label { display: none; }
}

@font-face {
  font-family: "Space Grotesk Local";
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #0b1220;
  --paper-warm: #101a2b;
  --paper-deep: #1a2a42;
  --white: #f6f1e7;
  --ink: #e5ebf2;
  --navy: #eef1f2;
  --navy-deep: #07101d;
  --muted: #8d9aac;
  --muted-light: #66778d;
  --line: rgba(159, 181, 205, 0.18);
  --line-dark: rgba(255, 255, 255, 0.14);
  --red: #e17a5d;
  --red-dark: #c35d4d;
  --jade: #6ab79e;
  --gold: #d8ad61;
  --blue: #5e9dff;
  --violet: #9a82ff;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Inter Local", Inter, Arial, sans-serif;
  --display: "Space Grotesk Local", "Inter Local", Inter, Arial, sans-serif;
  --shadow-soft: 0 24px 64px rgba(0, 0, 0, 0.32);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.24);
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body { margin: 0; min-width: 320px; background: var(--paper); }

body, button, input, select { font-family: var(--sans); }

button, a, input, select { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }

button, select { border: 0; }

button { cursor: pointer; }

::selection { background: rgba(200, 92, 67, 0.18); }

:focus-visible { outline: 3px solid rgba(75, 137, 119, 0.48); outline-offset: 3px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; padding: 10px 14px; background: var(--navy); color: var(--white); transform: translateY(-150%); transition: transform 160ms ease; }
.skip-link:focus { transform: translateY(0); }

.page-wrap { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }

.site-header { position: relative; z-index: 20; border-bottom: 1px solid rgba(32, 42, 57, 0.08); background: rgba(247, 246, 241, 0.92); backdrop-filter: blur(16px); }
.header-inner { width: min(1180px, calc(100% - 64px)); height: 82px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: 156px; color: var(--navy); }
.brand > span:last-child { display: grid; line-height: 0.92; }
.brand strong { font-family: var(--display); font-size: 18px; font-weight: 650; letter-spacing: -0.05em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 650; letter-spacing: 0.25em; text-transform: uppercase; }
.brand-fictionora { position: relative; display: inline-grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--red); border-radius: 10px; color: var(--red); overflow: hidden; transform: rotate(-2deg); }
.brand-fictionora::before { content: "F"; font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: -0.12em; line-height: 1; transform: rotate(2deg) translateX(-1px); }
.brand-fictionora::after { position: absolute; right: -7px; bottom: -8px; width: 23px; height: 23px; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: 0.55; }
.brand-fictionora i { position: absolute; top: 5px; right: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--red); opacity: 0.9; }
.desktop-nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
.desktop-nav a { position: relative; padding: 31px 0 29px; color: var(--muted); font-size: 12px; font-weight: 650; transition: color 160ms ease; }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--ink); }
.desktop-nav a.is-active::after { position: absolute; left: 50%; bottom: -1px; width: 22px; height: 2px; background: var(--red); content: ""; transform: translateX(-50%); }
.header-actions { display: flex; align-items: center; gap: 17px; }
.header-search { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; font-weight: 650; transition: color 160ms ease; }
.header-search:hover { color: var(--ink); }
.header-search kbd { margin-left: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted-light); font-size: 9px; font-family: var(--sans); font-weight: 650; }
.search-glyph { position: relative; display: inline-block; width: 15px; height: 15px; border: 1.5px solid currentColor; border-radius: 50%; }
.search-glyph::after { position: absolute; right: -4px; bottom: -3px; width: 6px; height: 1.5px; background: currentColor; content: ""; transform: rotate(45deg); transform-origin: left center; }
.menu-toggle { display: none; width: 38px; height: 38px; padding: 8px; background: transparent; }
.menu-toggle > span { display: block; width: 20px; height: 1px; margin: 5px auto; background: var(--ink); }
.mobile-menu { display: none; }

.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--red); font-size: 10px; font-weight: 750; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(200, 92, 67, 0.1); }
.eyebrow-small { margin-bottom: 7px; color: var(--muted); font-size: 9px; letter-spacing: 0.14em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 49px; padding: 0 19px; border: 1px solid transparent; font-size: 11px; font-weight: 750; letter-spacing: 0.01em; transition: background 160ms ease, color 160ms ease, border 160ms ease, transform 160ms ease; }
.button:hover { transform: translateY(-2px); }
.button span { font-size: 16px; font-weight: 400; line-height: 0; }
.button-primary { background: var(--red); color: var(--white); }
.button-primary:hover { background: var(--red-dark); }
.button-quiet { color: var(--navy); }
.button-quiet:hover { color: var(--red); }
.button-dark { background: var(--navy); color: var(--white); }
.button-dark:hover { background: var(--navy-deep); }
.button-paper { background: var(--paper); color: var(--navy); }
.button-paper:hover { background: var(--white); }
.button-outline { border-color: var(--line); color: var(--navy); background: transparent; }
.button-outline:hover, .button-outline.is-saved { border-color: var(--red); color: var(--red); }
.button-small { min-height: 40px; padding: 0 15px; font-size: 10px; gap: 13px; }
.button-small span { font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; color: var(--navy); font-size: 11px; font-weight: 750; white-space: nowrap; }
.text-link span { color: var(--red); font-size: 17px; font-weight: 400; transition: transform 160ms ease; }
.text-link:hover span { transform: translateX(3px); }

.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 0.75fr); gap: 84px; align-items: center; min-height: 620px; padding-top: 72px; padding-bottom: 83px; }
.hero-copy h1, .discover-intro h1, .library-intro h1, .not-found h1 { margin: 0; color: var(--navy); font-family: var(--display); font-size: clamp(51px, 6.4vw, 82px); font-weight: 520; letter-spacing: -0.085em; line-height: 0.95; }
h1 em, h2 em { color: var(--red); font-family: var(--serif); font-weight: 400; letter-spacing: -0.055em; }
.hero-lede { max-width: 480px; margin: 28px 0 29px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 17px; }
.hero-footnote { display: flex; align-items: center; gap: 13px; margin-top: 66px; color: var(--muted); font-size: 10px; line-height: 1.65; }
.hero-footnote b { color: var(--ink); font-weight: 750; }
.hero-rule { width: 38px; height: 1px; background: var(--red); }
.hero-feature { position: relative; max-width: 432px; margin-left: auto; padding: 20px 20px 19px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-soft); }
.hero-feature::before { position: absolute; top: -9px; right: 32px; width: 43px; height: 18px; border-top: 1px solid var(--red); border-bottom: 1px solid var(--red); content: ""; transform: rotate(12deg); }
.feature-label, .feature-bottom, .card-meta-line, .progress-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.feature-label { margin-bottom: 16px; color: var(--muted-light); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.feature-cover-link { display: block; }
.feature-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 19px 0 16px; }
.feature-info h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.055em; line-height: 1.04; }
.feature-info h2 a:hover, .novel-card h3 a:hover, .shelf-row h3 a:hover, .progress-card h3 a:hover, .continue-main h3 a:hover { color: var(--red); }
.feature-info p { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.feature-info p span, .novel-byline span { margin-inline: 5px; color: var(--muted-light); }
.feature-arrow { color: var(--red); font-size: 25px; font-weight: 300; }
.feature-bottom { padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.feature-bottom i { margin-inline: 4px; color: var(--muted-light); font-style: normal; }
.rating { color: var(--navy); font-size: 11px; font-weight: 750; white-space: nowrap; }
.rating > span { color: var(--gold); }

.cover { position: relative; overflow: hidden; width: 100%; min-height: 198px; padding: 17px; color: var(--white); isolation: isolate; }
.cover-card { min-height: 230px; }
.cover-feature { min-height: 260px; }
.cover-large { min-height: 0; aspect-ratio: 9 / 16; }
.cover-medium { min-height: 210px; }
.cover-small { min-height: 150px; }
.cover-tiny { min-height: 87px; }
.cover-micro { width: 48px; min-height: 68px; padding: 5px; }
.cover-grid, .cover-orbit { position: absolute; z-index: -1; pointer-events: none; }
.cover-grid { inset: 0; opacity: 0.27; background-image: linear-gradient(rgba(255,255,255,0.25) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.25) 1px, transparent 1px); background-size: 20px 20px; transform: rotate(8deg) scale(1.4); }
.cover-orbit { top: -15%; right: -16%; width: 72%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,0.48); border-radius: 50%; box-shadow: 0 0 0 18px rgba(255,255,255,0.06), 0 0 0 37px rgba(255,255,255,0.04); }
.cover-mark { position: absolute; right: 18px; bottom: 12px; color: rgba(255,255,255,0.86); font-family: var(--serif); font-size: 42px; line-height: 1; }
.cover-kicker { display: block; color: rgba(255,255,255,0.7); font-size: 8px; font-weight: 750; letter-spacing: 0.17em; line-height: 1.4; }
.cover-title { display: block; margin-top: 26px; color: var(--white); font-family: var(--display); font-size: clamp(22px, 2.5vw, 34px); font-weight: 500; letter-spacing: -0.08em; line-height: 0.88; }
.cover-original { position: absolute; right: 17px; top: 46px; color: rgba(255,255,255,0.7); font-family: var(--serif); font-size: 12px; writing-mode: vertical-rl; }
.cover-author { position: absolute; left: 17px; bottom: 16px; color: rgba(255,255,255,0.75); font-size: 9px; letter-spacing: 0.04em; }
.cover-feature .cover-title { margin-top: 35px; font-size: 43px; }
.cover-large .cover-title { margin-top: 70px; font-size: 57px; }
.cover-large .cover-mark { right: 25px; bottom: 22px; font-size: 76px; }
.cover-large .cover-original { top: 74px; right: 25px; font-size: 16px; }
.cover-tiny .cover-kicker, .cover-tiny .cover-original, .cover-tiny .cover-author { display: none; }
.cover-tiny .cover-title { margin-top: 10px; font-size: 15px; }
.cover-tiny .cover-mark { right: 5px; bottom: 5px; font-size: 18px; }
.cover-micro .cover-kicker, .cover-micro .cover-original, .cover-micro .cover-author { display: none; }
.cover-micro .cover-title { margin-top: 8px; font-size: 9px; }
.cover-micro .cover-mark { right: 4px; bottom: 3px; font-size: 13px; }
.cover-indigo { background: linear-gradient(143deg, #344c72, #657b9a 48%, #293e61); }
.cover-vermilion { background: linear-gradient(143deg, #9c4034, #d87154 48%, #7e3738); }
.cover-sage { background: linear-gradient(143deg, #527c72, #9eb59a 48%, #41665f); }
.cover-ochre { background: linear-gradient(143deg, #a87836, #d0a35b 49%, #7b5b32); }
.cover-blue { background: linear-gradient(143deg, #2c6a7f, #78a9af 51%, #28556c); }
.cover-teal { background: linear-gradient(143deg, #236f70, #69a7a0 48%, #27565f); }
.cover-plum { background: linear-gradient(143deg, #684760, #ae7986 50%, #4c3b5a); }
.cover-rose { background: linear-gradient(143deg, #8c5266, #d4958e 48%, #64415d); }
.cover-spore { background: linear-gradient(143deg, #17283d, #4b6373 48%, #151b28); }
.cover-has-image { background: #111c2a; }
.cover-image { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cover-has-image::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(4, 9, 18, 0.76), rgba(4, 9, 18, 0.08) 38%, rgba(4, 9, 18, 0.18) 60%, rgba(4, 9, 18, 0.82)); content: ""; pointer-events: none; }
.cover-has-image .cover-grid,
.cover-has-image .cover-orbit { z-index: 0; opacity: 0.24; }
.cover-has-image .cover-mark,
.cover-has-image .cover-kicker,
.cover-has-image .cover-title,
.cover-has-image .cover-original,
.cover-has-image .cover-author,
.cover-has-image .cover-site-mark { z-index: 1; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42); }
.cover-has-image .cover-mark { color: rgba(239, 202, 129, 0.9); }

.section-band { padding: 73px 0 80px; }
.section-band-warm { background: var(--paper-warm); }
.section-band-ink { background: var(--navy); color: var(--white); }
.page-section { padding-top: 89px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 28px; }
.section-heading h2, .results-heading h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 33px; font-weight: 550; letter-spacing: -0.07em; line-height: 1; }
.section-heading-light h2 { color: var(--white); }
.section-heading-light .eyebrow { color: #eaa18f; }
.text-link-light { color: var(--white); }
.section-note { color: var(--muted); font-size: 11px; }

.continue-card { display: grid; grid-template-columns: 164px minmax(0, 1.3fr) minmax(200px, 0.75fr); gap: 28px; align-items: center; padding: 18px; border: 1px solid var(--line); background: rgba(255, 254, 250, 0.72); }
.continue-cover { display: block; }
.continue-cover .cover { min-height: 184px; }
.continue-main { padding: 4px 0; }
.language-chip { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; font-weight: 650; white-space: nowrap; }
.language-chip b { padding: 3px 4px; background: rgba(75, 137, 119, 0.12); color: var(--jade); font-size: 8px; letter-spacing: 0.04em; }
.language-chip-dark { color: rgba(255,255,255,0.65); }
.language-chip-dark b { background: rgba(255,255,255,0.14); color: #d9b77a; }
.status { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 9px; font-weight: 650; white-space: nowrap; }
.status > span { width: 5px; height: 5px; border-radius: 50%; background: var(--jade); }
.status-complete > span { background: var(--gold); }
.continue-main h3 { margin: 13px 0 8px; color: var(--navy); font-family: var(--display); font-size: 25px; font-weight: 600; letter-spacing: -0.06em; line-height: 1.05; }
.continue-main > p { max-width: 480px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.continue-progress { max-width: 430px; margin: 21px 0 18px; }
.progress-label { margin-bottom: 7px; color: var(--muted); font-size: 9px; font-weight: 650; }
.progress-track, .mini-progress { height: 4px; overflow: hidden; background: rgba(32, 42, 57, 0.1); }
.progress-track > span, .mini-progress > span { display: block; height: 100%; background: var(--red); }
.continue-side { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 22px; border-left: 1px solid var(--line); }
.side-label { display: block; margin-bottom: 9px; color: var(--red); font-size: 9px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.continue-side p { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 16px; line-height: 1.38; }
.side-mark { display: block; margin-top: auto; color: var(--paper-deep); font-family: var(--serif); font-size: 45px; line-height: 0.8; text-align: right; }

.novel-grid { display: grid; gap: 20px; }
.novel-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.novel-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.novel-card { min-width: 0; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-card); transition: transform 180ms ease, box-shadow 180ms ease; }
.novel-card:hover { box-shadow: 0 17px 38px rgba(31, 42, 56, 0.11); transform: translateY(-4px); }
.card-cover-link { display: block; padding: 12px 12px 0; }
.card-body { padding: 16px 16px 15px; }
.card-meta-line { justify-content: flex-start; min-height: 18px; }
.card-meta-line .status { margin-left: auto; }
.card-body h3 { min-height: 39px; margin: 12px 0 6px; color: var(--navy); font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.055em; line-height: 1.05; }
.card-blurb { display: -webkit-box; min-height: 52px; margin: 12px 0 14px; overflow: hidden; color: var(--muted); font-family: var(--serif); font-size: 13px; line-height: 1.36; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.card-bottom { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.card-bottom .rating { margin-right: auto; }
.icon-button { width: 28px; height: 28px; padding: 0; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; }
.icon-button:hover, .icon-button.is-saved { color: var(--red); }
.mini-progress { margin-top: 12px; height: 3px; }
.tag { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid var(--line); color: var(--navy); font-size: 9px; font-weight: 700; }
.tag-soft { border-color: rgba(75, 137, 119, 0.2); background: rgba(75, 137, 119, 0.08); color: var(--jade); }

.translated-section { padding-bottom: 84px; }
.shelf-list { border-top: 1px solid var(--line); }
.shelf-row { display: grid; grid-template-columns: 40px 74px minmax(0, 1fr) 160px; gap: 18px; align-items: center; min-height: 142px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.shelf-index { align-self: start; padding-top: 5px; color: var(--muted-light); font-family: var(--serif); font-size: 14px; }
.shelf-cover-link { display: block; }
.shelf-row .cover { min-height: 105px; }
.shelf-row-main h3 { margin: 9px 0 5px; color: var(--navy); font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -0.055em; line-height: 1.05; }
.shelf-row-main p { max-width: 600px; margin: 0; color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.shelf-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: var(--muted); font-size: 10px; }

.start-section { padding-bottom: 100px; }
.start-card { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(340px, 1fr); gap: 67px; align-items: center; padding: 53px 58px; background: var(--navy); }
.start-card h2 { margin: 0; color: var(--white); font-family: var(--display); font-size: 42px; font-weight: 520; letter-spacing: -0.08em; line-height: 0.98; }
.start-card .eyebrow { color: #eaa18f; }
.start-card > div > p:last-child { max-width: 340px; margin: 21px 0 0; color: rgba(255,255,255,0.63); font-family: var(--serif); font-size: 15px; line-height: 1.5; }
.mood-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.mood-grid a { display: grid; grid-template-columns: 28px 1fr 20px; gap: 10px; align-items: center; min-height: 67px; border-bottom: 1px solid var(--line-dark); color: var(--white); font-size: 12px; font-weight: 650; }
.mood-grid a:nth-child(odd) { padding-right: 20px; border-right: 1px solid var(--line-dark); }
.mood-grid a:nth-child(even) { padding-left: 20px; }
.mood-grid span { color: #8e9aab; font-size: 9px; }
.mood-grid b { color: #eaa18f; font-size: 17px; font-weight: 400; text-align: right; transition: transform 160ms ease; }
.mood-grid a:hover b { transform: translate(3px, -3px); }

.discover-intro, .library-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr); gap: 70px; align-items: end; padding-top: 87px; padding-bottom: 64px; }
.discover-lede, .library-intro-side > p { max-width: 350px; margin: 0 0 8px auto; color: var(--muted); font-family: var(--serif); font-size: 18px; line-height: 1.45; }
.discover-tools { padding-bottom: 52px; }
.search-box { display: flex; align-items: center; min-height: 65px; border: 1px solid var(--line); background: var(--white); }
.search-box .search-glyph { margin-left: 20px; color: var(--red); }
.search-box input { min-width: 0; flex: 1; height: 63px; padding: 0 16px; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.search-box input::placeholder { color: var(--muted-light); }
.search-box button { align-self: stretch; min-width: 116px; padding: 0 16px; background: var(--navy); color: var(--white); font-size: 10px; font-weight: 750; }
.search-box button span { margin-left: 9px; color: #eaa18f; font-size: 16px; }
.filter-line { display: flex; align-items: center; gap: 16px; padding-top: 20px; }
.filter-line-secondary { padding-top: 13px; }
.filter-label { min-width: 57px; color: var(--muted-light); font-size: 9px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.filter-scroll { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-pill { display: inline-flex; align-items: center; min-height: 29px; padding: 0 11px; border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 650; }
.filter-pill:hover, .filter-pill.is-active { border-color: var(--red); background: rgba(200, 92, 67, 0.06); color: var(--red); }
.sort-control { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; color: var(--muted-light); font-size: 9px; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap; }
.sort-control select { padding: 8px 28px 8px 9px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 10px; font-weight: 650; letter-spacing: normal; text-transform: none; }
.discover-results { padding-bottom: 108px; }
.results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 28px; padding-top: 5px; }
.result-switch { display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.result-switch a { padding: 0 13px 10px; color: var(--muted); font-size: 10px; font-weight: 650; }
.result-switch a + a { border-left: 1px solid var(--line); }
.result-switch a.is-active, .result-switch a:hover { color: var(--red); }
.empty-search, .library-empty { display: flex; align-items: center; gap: 28px; min-height: 260px; padding: 45px; border: 1px dashed var(--line); background: rgba(255,255,255,0.45); }
.empty-search { flex-direction: column; justify-content: center; text-align: center; }
.empty-symbol { color: var(--red); font-family: var(--serif); font-size: 46px; line-height: 0.9; }
.empty-search h2, .library-empty h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 25px; letter-spacing: -0.06em; }
.empty-search p, .library-empty p { max-width: 430px; margin: -12px 0 0; color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.5; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 38px; color: var(--muted); font-size: 10px; }
.breadcrumbs a:hover { color: var(--red); }
.breadcrumbs span { color: var(--muted-light); }
.novel-hero { padding-bottom: 87px; }
.novel-hero-grid { display: grid; grid-template-columns: minmax(260px, 365px) minmax(0, 1fr); gap: 75px; align-items: center; padding-top: 45px; }
.novel-cover-frame { padding: 14px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow-soft); }
.cover-caption { display: flex; justify-content: space-between; gap: 16px; padding: 13px 2px 0; color: var(--muted); font-size: 9px; }
.cover-caption b { color: var(--navy); font-family: var(--serif); font-size: 12px; font-weight: 500; }
.novel-intro { max-width: 650px; }
.novel-intro h1 { margin: 19px 0 8px; color: var(--navy); font-family: var(--display); font-size: clamp(43px, 5vw, 68px); font-weight: 550; letter-spacing: -0.085em; line-height: 0.95; }
.novel-byline { margin: 0; color: var(--muted); font-size: 11px; }
.novel-byline b { color: var(--ink); font-weight: 700; }
.novel-blurb { max-width: 580px; margin: 30px 0 22px; color: var(--ink); font-family: var(--serif); font-size: 22px; line-height: 1.28; }
.novel-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.novel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.novel-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 610px; margin-top: 38px; padding-top: 17px; border-top: 1px solid var(--line); }
.novel-stats div { display: flex; flex-direction: column; gap: 6px; padding-right: 12px; }
.novel-stats div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.novel-stats strong { color: var(--navy); font-family: var(--display); font-size: 16px; font-weight: 650; }
.novel-stats strong span { color: var(--gold); }
.novel-stats div > span { color: var(--muted); font-size: 9px; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 82px; padding-bottom: 114px; }
.detail-heading h2, .panel-heading h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 31px; font-weight: 550; letter-spacing: -0.07em; }
.synopsis { max-width: 730px; margin: 27px 0 34px; color: var(--ink); font-family: var(--serif); font-size: 20px; line-height: 1.56; }
.translator-note { display: flex; align-items: flex-start; gap: 16px; max-width: 720px; margin-bottom: 68px; padding: 18px 20px; background: var(--paper-warm); }
.note-icon { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; background: var(--red); color: var(--white); font-family: var(--serif); font-size: 19px; }
.translator-note p { max-width: 580px; margin: 0; color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.chapters-panel { border-top: 1px solid var(--line); }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 23px 0 21px; }
.chapter-panel-note { color: var(--muted); font-size: 10px; }
.chapter-list { border-top: 1px solid var(--line); }
.chapter-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 90px 25px; gap: 15px; align-items: center; min-height: 67px; border-bottom: 1px solid var(--line); transition: background 160ms ease, padding 160ms ease; }
.chapter-row:hover, .chapter-row.is-current { padding-left: 10px; background: var(--paper-warm); }
.chapter-number { color: var(--muted-light); font-family: var(--serif); font-size: 14px; }
.chapter-name { display: flex; flex-direction: column; gap: 3px; color: var(--navy); font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: -0.02em; }
.chapter-name small { color: var(--red); font-family: var(--sans); font-size: 8px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.chapter-date { color: var(--muted); font-size: 9px; text-align: right; }
.chapter-arrow { color: var(--red); font-size: 16px; text-align: right; }
.chapter-list-footer { display: flex; justify-content: space-between; gap: 15px; padding-top: 13px; color: var(--muted-light); font-size: 9px; }
.detail-aside { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.aside-card { padding: 25px; border: 1px solid var(--line); background: var(--white); }
.aside-card-paper { background: var(--paper-warm); border-color: transparent; }
.aside-card h3 { margin: 0 0 10px; color: var(--navy); font-family: var(--display); font-size: 21px; font-weight: 600; letter-spacing: -0.06em; line-height: 1.08; }
.aside-card > p:not(.eyebrow) { margin: 0 0 21px; color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.mini-related { display: flex; flex-direction: column; }
.mini-related > a { display: grid; grid-template-columns: 48px minmax(0, 1fr) 15px; gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.mini-related > a:hover b { color: var(--red); }
.mini-related b { display: block; color: var(--navy); font-family: var(--display); font-size: 11px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.13; }
.mini-related small { display: block; margin-top: 5px; color: var(--muted); font-size: 8px; }
.mini-related i { color: var(--red); font-style: normal; }

.library-intro { padding-bottom: 83px; }
.library-intro-side { padding-bottom: 5px; }
.library-counts { display: flex; justify-content: flex-end; gap: 20px; margin-top: 29px; color: var(--muted); font-size: 9px; }
.library-counts span + span { padding-left: 20px; border-left: 1px solid var(--line); }
.library-counts b { margin-right: 4px; color: var(--navy); font-family: var(--display); font-size: 15px; }
.library-progress-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.progress-card { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 13px; background: rgba(255,255,255,0.08); }
.progress-card .cover { min-height: 145px; }
.progress-card-main { padding: 4px 0 3px; }
.progress-card h3 { margin: 13px 0 7px; color: var(--white); font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -0.05em; line-height: 1.05; }
.progress-card h3 a:hover { color: #eaa18f; }
.progress-card-main > p { min-height: 28px; margin: 0 0 12px; color: rgba(255,255,255,0.6); font-size: 9px; }
.progress-card .progress-track { margin-bottom: 17px; background: rgba(255,255,255,0.16); }
.progress-card .progress-track > span { background: #eaa18f; }
.library-saved { padding-bottom: 91px; }
.library-empty { min-height: 250px; }
.library-empty > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; }
.library-empty p { margin: 0; }
.library-tip { display: flex; align-items: flex-start; gap: 30px; padding-bottom: 111px; }
.library-tip-mark { color: var(--red); font-family: var(--serif); font-size: 72px; line-height: 0.8; }
.library-tip h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: 32px; font-weight: 550; letter-spacing: -0.075em; line-height: 1.02; }
.library-tip > div:last-child > p:last-child { max-width: 510px; margin: 18px 0 0; color: var(--muted); font-family: var(--serif); font-size: 15px; line-height: 1.5; }

.reader-shell { min-height: calc(100vh - 83px); padding-bottom: 90px; background: var(--paper); }
.reader-shell.reader-sepia { --paper: #f2eadb; --paper-warm: #ebe0cf; --line: #d8cdbc; }
.reader-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; }
.reader-back { display: inline-flex; align-items: center; gap: 13px; color: var(--muted); }
.reader-back > span:first-child { color: var(--red); font-size: 20px; }
.reader-back > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.reader-back small { color: var(--muted-light); font-size: 8px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.reader-back b { max-width: 300px; overflow: hidden; color: var(--navy); font-family: var(--display); font-size: 12px; font-weight: 650; letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; }
.reader-back:hover b { color: var(--red); }
.reader-top-actions { display: flex; align-items: center; gap: 19px; }
.reader-save, .reader-menu-button { padding: 8px 0; background: transparent; color: var(--muted); font-size: 10px; font-weight: 700; }
.reader-save:hover, .reader-save.is-saved { color: var(--red); }
.reader-menu-button { display: inline-flex; align-items: center; gap: 8px; padding-left: 19px; border-left: 1px solid var(--line); }
.reader-menu-button span { color: var(--red); font-size: 15px; }
.reader-progress-line { height: 3px; background: var(--line); }
.reader-progress-line > span { display: block; width: 2%; height: 100%; background: var(--red); transition: width 160ms ease; }
.reader-settings-panel { display: none; align-items: center; justify-content: center; gap: 50px; padding: 18px 20px; border-bottom: 1px solid var(--line); background: var(--paper-warm); }
.reader-settings-panel.is-open { display: flex; }
.reader-settings-panel > div { display: flex; align-items: center; gap: 13px; }
.settings-label { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.settings-buttons { display: inline-flex; align-items: center; gap: 8px; }
.settings-buttons button, .setting-choice { min-width: 29px; min-height: 29px; padding: 0 8px; border: 1px solid var(--line); background: var(--white); color: var(--navy); font-size: 10px; font-weight: 700; }
.settings-buttons button:hover, .setting-choice:hover, .setting-choice.is-active { border-color: var(--red); color: var(--red); }
.settings-buttons span { min-width: 32px; color: var(--muted); font-size: 10px; text-align: center; }
.reading-column { width: min(720px, calc(100% - 64px)); margin: 0 auto; padding: 97px 0 84px; }
.reader-kicker { display: flex; align-items: center; justify-content: space-between; gap: 15px; color: var(--red); font-size: 9px; font-weight: 750; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; }
.reading-column h1 { max-width: 640px; margin: 26px 0 10px; color: var(--navy); font-family: var(--display); font-size: clamp(39px, 5vw, 63px); font-weight: 520; letter-spacing: -0.085em; line-height: 0.96; }
.reader-byline { margin: 0; color: var(--muted); font-size: 11px; }
.reader-byline span { margin-inline: 5px; color: var(--muted-light); }
.reader-rule { display: flex; align-items: center; gap: 14px; margin: 49px 0 44px; color: var(--red); font-family: var(--serif); font-size: 20px; }
.reader-rule::before, .reader-rule::after { height: 1px; content: ""; }
.reader-rule::before { width: 58px; background: var(--red); }
.reader-rule::after { flex: 1; background: var(--line); }
.reader-copy { color: var(--ink); font-family: var(--serif); font-size: calc(19px * var(--reader-scale)); line-height: 1.86; }
.reader-copy p { margin: 0 0 26px; }
.reader-copy p.is-opening::first-letter { float: left; margin: 7px 10px 0 0; color: var(--red); font-family: var(--display); font-size: 4.3em; font-weight: 550; line-height: 0.72; }
.reader-endnote { display: flex; align-items: center; gap: 13px; margin-top: 68px; padding-top: 22px; border-top: 1px solid var(--line); }
.reader-end-mark { color: var(--gold); font-size: 17px; }
.reader-endnote p { margin: 0; color: var(--navy); font-family: var(--display); font-size: 11px; font-weight: 650; line-height: 1.4; }
.reader-endnote p span { color: var(--muted); font-family: var(--serif); font-size: 12px; font-weight: 400; }
.reader-wide .reading-column { width: min(850px, calc(100% - 64px)); }
.reader-nav { display: grid; grid-template-columns: 1fr 0.6fr 1fr; gap: 25px; align-items: center; padding-top: 27px; border-top: 1px solid var(--line); }
.reader-nav-link { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start; }
.reader-nav-link > span { grid-row: span 2; color: var(--red); font-size: 17px; }
.reader-nav-link small { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.reader-nav-link b { margin-top: 5px; color: var(--navy); font-family: var(--display); font-size: 12px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
.reader-nav-link:hover b { color: var(--red); }
.reader-nav-next { grid-template-columns: minmax(0, 1fr) 18px; text-align: right; }
.reader-nav-next > span { grid-column: 2; grid-row: span 2; }
.reader-nav-next small, .reader-nav-next b { grid-column: 1; }
.reader-nav-center { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--muted-light); font-size: 8px; font-weight: 700; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }
.reader-nav-center span:last-child { color: var(--red); }

.not-found { min-height: 590px; padding-top: 130px; padding-bottom: 130px; }
.not-found > .empty-symbol { display: block; margin-bottom: 31px; color: var(--muted-light); font-family: var(--display); font-size: 17px; letter-spacing: 0.1em; }
.not-found h1 { font-size: clamp(55px, 7vw, 88px); }
.not-found > p:not(.eyebrow) { max-width: 350px; margin: 27px 0 29px; color: var(--muted); font-family: var(--serif); font-size: 18px; line-height: 1.45; }

.site-footer { padding: 53px max(32px, calc((100vw - 1180px) / 2)) 20px; border-top: 1px solid var(--line); background: var(--paper-warm); }
.footer-main { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; align-items: start; }
.brand-footer { align-self: start; }
.footer-main > p { margin: 1px 0 0; color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.footer-links a { color: var(--muted); font-size: 10px; font-weight: 650; }
.footer-links a:hover { color: var(--red); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 55px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted-light); font-size: 9px; }

@media (max-width: 1050px) {
  .home-hero { gap: 50px; }
  .novel-hero-grid { gap: 48px; }
  .detail-layout { gap: 45px; }
  .start-card { gap: 40px; padding-inline: 40px; }
  .continue-card { grid-template-columns: 145px minmax(0, 1fr) 190px; gap: 20px; }
}

@media (max-width: 820px) {
  .page-wrap, .header-inner { width: min(100% - 40px, 680px); }
  .desktop-nav, .header-search { display: none; }
  .menu-toggle { display: block; }
  .mobile-menu { display: none; width: min(100% - 40px, 680px); margin: 0 auto; padding: 8px 0 18px; }
  .mobile-menu.is-open { display: block; }
  .mobile-menu a { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 650; }
  .mobile-menu a.is-active { color: var(--red); }
  .mobile-menu span { color: var(--muted-light); font-size: 9px; }
  .home-hero { grid-template-columns: 1fr; gap: 58px; min-height: auto; padding-top: 70px; }
  .hero-feature { width: min(100%, 450px); margin: 0; }
  .hero-copy h1 { font-size: clamp(55px, 13vw, 82px); }
  .novel-grid-four, .novel-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .continue-card { grid-template-columns: 135px minmax(0, 1fr); }
  .continue-side { grid-column: 1 / -1; min-height: 100px; padding: 17px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .side-mark { display: none; }
  .shelf-row { grid-template-columns: 30px 66px minmax(0, 1fr); }
  .shelf-row-side { display: none; }
  .start-card { grid-template-columns: 1fr; gap: 38px; padding: 42px 32px; }
  .discover-intro, .library-intro { grid-template-columns: 1fr; gap: 28px; padding-top: 67px; }
  .discover-lede, .library-intro-side > p { margin-left: 0; margin-bottom: 0; }
  .library-counts { justify-content: flex-start; }
  .novel-hero-grid { grid-template-columns: 260px minmax(0, 1fr); gap: 32px; }
  .cover-large { min-height: 355px; }
  .cover-large .cover-title { margin-top: 48px; font-size: 42px; }
  .cover-large .cover-mark { font-size: 60px; }
  .novel-intro h1 { font-size: 45px; }
  .novel-blurb { font-size: 19px; }
  .detail-layout { grid-template-columns: 1fr; }
  .detail-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; }
  .library-progress-grid { grid-template-columns: 1fr; }
  .progress-card { grid-template-columns: 120px minmax(0, 1fr); }
  .reader-settings-panel { flex-wrap: wrap; gap: 18px 30px; justify-content: flex-start; }
}

@media (max-width: 570px) {
  .page-wrap, .header-inner { width: calc(100% - 32px); }
  .header-inner { height: 70px; }
  .brand strong { font-size: 17px; }
  .home-hero { padding-top: 55px; padding-bottom: 67px; }
  .hero-copy h1 { font-size: clamp(50px, 16vw, 72px); }
  .hero-lede { font-size: 13px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .button { width: 100%; }
  .hero-footnote { margin-top: 37px; }
  .cover-feature { min-height: 225px; }
  .cover-feature .cover-title { margin-top: 26px; font-size: 33px; }
  .section-band { padding: 57px 0 62px; }
  .page-section { padding-top: 63px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 22px; }
  .section-heading h2, .results-heading h2 { font-size: 29px; }
  .section-heading .text-link { align-self: flex-start; }
  .novel-grid-four, .novel-grid-three { grid-template-columns: 1fr; gap: 15px; }
  .novel-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0; }
  .novel-card .card-cover-link { padding: 12px 0 12px 12px; }
  .novel-card .cover-card { min-height: 185px; }
  .novel-card .card-body { padding: 17px 13px 12px; }
  .novel-card .card-blurb { min-height: 0; margin-top: 9px; -webkit-line-clamp: 2; }
  .novel-card .card-bottom { margin-top: 10px; }
  .continue-card { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 12px; }
  .continue-cover .cover { min-height: 145px; }
  .continue-main h3 { font-size: 19px; }
  .continue-main > p { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
  .continue-main .button { width: auto; }
  .shelf-row { grid-template-columns: 24px 62px minmax(0, 1fr); gap: 11px; min-height: 122px; }
  .shelf-row .cover { min-height: 92px; }
  .shelf-row-main h3 { font-size: 15px; }
  .shelf-row-main p { display: -webkit-box; overflow: hidden; font-size: 12px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .shelf-row .status { display: none; }
  .start-card { padding: 34px 22px; }
  .start-card h2 { font-size: 35px; }
  .mood-grid { grid-template-columns: 1fr; }
  .mood-grid a:nth-child(odd) { padding-right: 0; border-right: 0; }
  .mood-grid a:nth-child(even) { padding-left: 0; }
  .discover-intro, .library-intro { padding-top: 55px; padding-bottom: 49px; }
  .discover-intro h1, .library-intro h1 { font-size: 57px; }
  .search-box { align-items: stretch; flex-wrap: wrap; }
  .search-box input { flex-basis: calc(100% - 55px); height: 57px; }
  .search-box button { width: 100%; min-height: 44px; }
  .filter-line { align-items: flex-start; flex-direction: column; gap: 9px; }
  .filter-scroll { flex-wrap: nowrap; width: calc(100vw - 32px); overflow-x: auto; padding-bottom: 3px; }
  .sort-control { margin: 8px 0 0; }
  .results-heading { align-items: flex-start; flex-direction: column; }
  .result-switch { align-self: stretch; justify-content: space-between; }
  .result-switch a { flex: 1; padding-inline: 0; text-align: center; }
  .novel-hero { padding-bottom: 60px; }
  .breadcrumbs { padding-top: 25px; font-size: 9px; }
  .novel-hero-grid { grid-template-columns: 1fr; gap: 34px; padding-top: 28px; }
  .novel-cover-column { width: min(260px, 72vw); margin-inline: auto; }
  .cover-large { min-height: 360px; }
  .novel-intro h1 { margin-top: 16px; font-size: 47px; }
  .novel-blurb { margin-top: 24px; font-size: 19px; }
  .novel-actions { flex-direction: column; }
  .novel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 0; }
  .novel-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .novel-stats div:nth-child(3), .novel-stats div:nth-child(4) { padding-top: 11px; border-top: 1px solid var(--line); }
  .novel-stats div:nth-child(4) { padding-left: 14px; }
  .detail-layout { padding-bottom: 75px; }
  .detail-heading h2, .panel-heading h2 { font-size: 28px; }
  .synopsis { font-size: 18px; }
  .translator-note { margin-bottom: 51px; }
  .panel-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .chapter-row { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 8px; }
  .chapter-date { display: none; }
  .chapter-list-footer { flex-direction: column; gap: 5px; }
  .detail-aside { display: flex; }
  .library-intro-side { padding-bottom: 0; }
  .library-counts { flex-wrap: wrap; gap: 10px 16px; }
  .library-counts span + span { padding-left: 16px; }
  .library-empty { align-items: flex-start; flex-direction: column; padding: 32px 23px; }
  .library-tip { gap: 18px; padding-bottom: 78px; }
  .library-tip-mark { font-size: 50px; }
  .library-tip h2 { font-size: 27px; }
  .reader-topbar { min-height: 76px; }
  .reader-top-actions { gap: 10px; }
  .reader-menu-button { width: 33px; overflow: hidden; padding-left: 10px; border-left: 1px solid var(--line); font-size: 0; }
  .reader-menu-button span { font-size: 16px; }
  .reading-column, .reader-wide .reading-column { width: calc(100% - 32px); padding-top: 67px; }
  .reader-kicker { align-items: flex-start; flex-direction: column; gap: 8px; }
  .reading-column h1 { font-size: 43px; }
  .reader-copy { font-size: calc(18px * var(--reader-scale)); line-height: 1.78; }
  .reader-rule { margin-block: 38px; }
  .reader-nav { grid-template-columns: 1fr 1fr; gap: 28px 15px; }
  .reader-nav-center { grid-column: 1 / -1; grid-row: 1; order: -1; }
  .reader-nav-link { grid-row: 2; }
  .reader-nav-next { grid-column: 2; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 25px; }
  .footer-main > p { grid-column: 1 / -1; }
  .footer-links { align-items: flex-start; grid-column: 1 / -1; padding-top: 15px; border-top: 1px solid var(--line); }
  .footer-bottom { flex-direction: column; gap: 7px; margin-top: 35px; }
  .site-footer { padding-inline: 16px; }
}

/* Fictionora night mode: keep the editorial layout, change the atmosphere. */
body {
  background:
    radial-gradient(circle at 78% 2%, rgba(52, 102, 145, 0.18), transparent 27rem),
    radial-gradient(circle at 14% 24%, rgba(39, 72, 109, 0.16), transparent 32rem),
    var(--paper);
  background-attachment: fixed;
}

.site-header {
  border-bottom-color: rgba(159, 181, 205, 0.16);
  background: rgba(8, 14, 25, 0.86);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.brand { color: var(--white); }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--white); }
.skip-link, .button-dark, .search-box button { background: var(--navy-deep); }
.button-dark:hover { background: #172b46; }
.button-paper { background: var(--paper-warm); color: var(--white); }
.button-paper:hover { background: #1b2a42; }

.home-hero, .discover-intro, .library-intro, .novel-hero {
  position: relative;
}

.home-hero::before, .discover-intro::before, .library-intro::before, .novel-hero::before {
  position: absolute;
  z-index: 0;
  top: -8rem;
  right: -8rem;
  width: 30rem;
  height: 30rem;
  border: 1px solid rgba(114, 160, 194, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(114, 160, 194, 0.025), 0 0 0 72px rgba(114, 160, 194, 0.018);
  content: "";
  pointer-events: none;
}

.home-hero::after, .discover-intro::after, .library-intro::after, .novel-hero::after {
  position: absolute;
  z-index: 0;
  top: 8rem;
  right: 10rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(216, 173, 97, 0.08), 0 0 24px rgba(216, 173, 97, 0.3);
  content: "";
  pointer-events: none;
}

.home-hero > *, .discover-intro > *, .library-intro > *, .novel-hero > * {
  position: relative;
  z-index: 1;
}

.hero-feature, .novel-cover-frame, .aside-card, .search-box, .sort-control select {
  background: #121e31;
}

.hero-feature {
  border-color: rgba(159, 181, 205, 0.2);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.section-band-warm { background: #101a2b; }
.section-band-ink, .start-card { background: #0e1a2c; }

.continue-card {
  border-color: rgba(159, 181, 205, 0.18);
  background: rgba(18, 31, 49, 0.86);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
}

.novel-card {
  border-color: rgba(159, 181, 205, 0.18);
  background: #121e31;
}

.novel-card:hover {
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(225, 122, 93, 0.12);
}

.start-card { border: 1px solid rgba(159, 181, 205, 0.14); }
.search-box { border-color: rgba(159, 181, 205, 0.22); }
.sort-control select { border-color: rgba(159, 181, 205, 0.22); color: var(--ink); }

.empty-search, .library-empty {
  border-color: rgba(159, 181, 205, 0.24);
  background: rgba(18, 30, 49, 0.72);
}

.novel-cover-frame { border-color: rgba(159, 181, 205, 0.2); }
.translator-note, .chapter-row:hover, .chapter-row.is-current { background: #16253b; }
.aside-card { border-color: rgba(159, 181, 205, 0.2); }
.aside-card-paper { background: #16253b; }

.reader-shell { background: var(--paper); }
.reader-settings-panel { background: #101a2b; }
.settings-buttons button, .setting-choice {
  background: #17253a;
  color: var(--white);
}

.site-footer { background: #0e192a; }

.cover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -18px 32px rgba(0, 0, 0, 0.12);
}

.cover-grid { opacity: 0.34; }
.feature-arrow, .text-link span, .rating > span, .side-label, .shelf-row-side b { text-shadow: 0 0 18px rgba(225, 122, 93, 0.22); }

/* Seamless dark direction inspired by modern streaming libraries. */
:root {
  --paper: #080a12;
  --paper-warm: #0e101b;
  --paper-deep: #171a2c;
  --ink: #e7ebf5;
  --navy: #f4f6fb;
  --navy-deep: #0b1020;
  --muted: #929bb0;
  --muted-light: #68738b;
  --line: rgba(155, 170, 207, 0.16);
  --red: #ff8067;
  --red-dark: #e9685b;
  --shadow-soft: 0 28px 80px rgba(0, 0, 0, 0.36);
  --shadow-card: 0 20px 50px rgba(0, 0, 0, 0.28);
}

html { background: var(--paper); }

body {
  background:
    radial-gradient(circle at 76% 9%, rgba(75, 112, 237, 0.13), transparent 29rem),
    radial-gradient(circle at 18% 31%, rgba(92, 63, 183, 0.08), transparent 31rem),
    var(--paper);
}

.page-wrap { width: min(1210px, calc(100% - 56px)); }

.site-header {
  border-bottom-color: rgba(155, 170, 207, 0.12);
  background: rgba(6, 8, 15, 0.78);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

.header-inner { width: min(1210px, calc(100% - 56px)); height: 70px; }
.brand { color: var(--white); }
.brand-fictionora { border-color: #ef907a; color: #ef907a; }
.desktop-nav { gap: 31px; }
.desktop-nav a { padding: 25px 0 23px; color: #8f97ab; }
.desktop-nav a:hover, .desktop-nav a.is-active { color: var(--white); }
.desktop-nav a.is-active::after { display: none; }

.header-search {
  padding: 9px 12px;
  border: 1px solid rgba(155, 170, 207, 0.17);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
}

.header-search kbd { display: none; }

.button {
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.button-primary {
  background: linear-gradient(110deg, #4c9cff 0%, #687ef5 52%, #e87970 100%);
  box-shadow: 0 13px 28px rgba(78, 135, 255, 0.22);
}

.button-primary:hover {
  background: linear-gradient(110deg, #69adff 0%, #7e90ff 52%, #f18a79 100%);
}

.button-dark, .button-paper {
  border: 1px solid rgba(155, 170, 207, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--white);
}

.button-dark:hover, .button-paper:hover { background: rgba(255, 255, 255, 0.09); }
.button-quiet { color: var(--white); }
.button-outline { border-radius: 12px; background: rgba(255, 255, 255, 0.025); }

.hero-copy > .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  margin-bottom: 20px;
  padding: 0 12px;
  border: 1px solid rgba(83, 148, 255, 0.25);
  border-radius: 999px;
  background: rgba(64, 126, 244, 0.1);
  color: var(--blue);
}

.hero-copy > .eyebrow .eyebrow-dot { background: var(--blue); box-shadow: 0 0 0 4px rgba(94, 157, 255, 0.11), 0 0 18px rgba(94, 157, 255, 0.4); }

h1 em, h2 em {
  background: linear-gradient(105deg, #5fa7ff 2%, #8f88ff 56%, #f18a72 96%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: var(--display);
  font-style: normal;
  font-weight: 620;
  letter-spacing: -0.085em;
}

.home-hero {
  grid-template-columns: minmax(0, 0.98fr) minmax(430px, 0.82fr);
  gap: 42px;
  min-height: 690px;
  padding-top: 92px;
  padding-bottom: 98px;
}

.home-hero::before, .discover-intro::before, .library-intro::before, .novel-hero::before {
  top: -10rem;
  right: -9rem;
  width: 38rem;
  height: 38rem;
  border: 0;
  background: radial-gradient(circle, rgba(77, 116, 238, 0.17), transparent 66%);
  box-shadow: none;
  opacity: 0.72;
}

.home-hero::after, .discover-intro::after, .library-intro::after, .novel-hero::after {
  top: 11rem;
  right: 15rem;
  width: 5px;
  height: 5px;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(94, 157, 255, 0.08), 0 0 22px rgba(94, 157, 255, 0.38);
}

.hero-copy h1, .discover-intro h1, .library-intro h1, .not-found h1 {
  font-size: clamp(58px, 7.4vw, 104px);
  letter-spacing: -0.095em;
  line-height: 0.91;
}

.hero-lede { max-width: 510px; margin-top: 30px; color: #a7afc0; font-size: 15px; line-height: 1.72; }
.hero-actions { gap: 12px; }
.hero-footnote { margin-top: 48px; }

.hero-feature {
  width: min(100%, 510px);
  max-width: none;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.hero-feature::before { display: none; }
.feature-label { margin: 0 auto 8px; width: min(100%, 370px); color: #7c87a0; }
.feature-stage { position: relative; display: grid; min-height: 408px; place-items: center; }
.feature-stage::after { position: absolute; z-index: 0; width: 260px; height: 260px; border-radius: 50%; background: rgba(90, 125, 239, 0.16); filter: blur(35px); content: ""; }
.feature-stack-cover, .feature-cover-link { position: absolute; display: block; width: 245px; }
.feature-stack-cover { z-index: 1; overflow: hidden; opacity: 0.68; filter: saturate(0.72) brightness(0.74); box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3); }
.feature-stack-link { color: inherit; text-decoration: none; cursor: pointer; }
.feature-stack-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
.feature-stack-cover .cover { min-height: 350px; border-radius: 22px; }
.feature-stack-left { left: 4%; transform: rotate(-14deg) translate(-7px, 23px); }
.feature-stack-right { right: 4%; transform: rotate(14deg) translate(7px, 23px); }
.feature-cover-link { z-index: 3; width: 275px; transform: translateY(5px); filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.42)); transition: transform 220ms ease, filter 220ms ease; }
.feature-cover-link:hover { transform: translateY(-3px) scale(1.012); filter: drop-shadow(0 34px 38px rgba(0, 0, 0, 0.5)); }
.feature-cover-link .cover { min-height: 390px; border-radius: 23px; }
.feature-stage-pill { position: absolute; z-index: 4; right: calc(50% - 132px); bottom: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; background: linear-gradient(110deg, #4a9cff, #7181f3 58%, #ed8071); box-shadow: 0 12px 25px rgba(60, 110, 238, 0.24); color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.feature-stage-pill > span { font-size: 12px; }

.feature-info {
  position: relative;
  z-index: 4;
  width: min(100%, 370px);
  margin: -1px auto 0;
  padding: 16px 18px 13px;
  border: 1px solid rgba(155, 170, 207, 0.16);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  background: rgba(13, 17, 31, 0.82);
  backdrop-filter: blur(16px);
}

.feature-info h2 { font-size: 22px; }
.feature-bottom { position: relative; z-index: 4; width: min(100%, 370px); margin: 0 auto; padding: 11px 18px 13px; border: 1px solid rgba(155, 170, 207, 0.16); border-top-color: rgba(155, 170, 207, 0.11); border-radius: 0 0 18px 18px; background: rgba(13, 17, 31, 0.82); backdrop-filter: blur(16px); }

.cover { border-radius: 18px; }
.cover-grid { opacity: 0.38; }

.section-band { padding: 86px 0 96px; }
.section-band-warm { border-top: 1px solid rgba(155, 170, 207, 0.06); border-bottom: 1px solid rgba(155, 170, 207, 0.06); background: linear-gradient(180deg, #0e101b, #0b0d18); }
.section-band-ink { background: #070910; }
.page-section { padding-top: 92px; }
.section-heading { margin-bottom: 28px; }
.section-heading h2, .results-heading h2 { font-size: 36px; letter-spacing: -0.085em; }
.section-heading .eyebrow, .results-heading .eyebrow { color: var(--blue); }
.text-link { color: #b9c1d2; }
.text-link:hover { color: var(--white); }

.continue-card {
  grid-template-columns: 184px minmax(0, 1.3fr) minmax(220px, 0.75fr);
  gap: 30px;
  padding: 22px;
  border-color: rgba(155, 170, 207, 0.16);
  border-radius: 23px;
  background: linear-gradient(125deg, rgba(28, 34, 57, 0.88), rgba(14, 18, 33, 0.9));
  box-shadow: 0 24px 65px rgba(0, 0, 0, 0.24);
}

.continue-cover .cover { min-height: 220px; border-radius: 17px; }
.continue-side { padding: 22px 0 22px 24px; }
.language-chip b { border-radius: 6px; }
.status > span { box-shadow: 0 0 0 4px rgba(106, 183, 158, 0.08); }
.progress-track, .mini-progress { border-radius: 999px; background: rgba(155, 170, 207, 0.12); }
.progress-track > span, .mini-progress > span { border-radius: inherit; background: linear-gradient(90deg, #5c9eff, #9a82ff, #f07d6d); }

.home-popular-section, .home-arrivals-section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-right: max(28px, calc((100vw - 1210px) / 2));
  padding-left: max(28px, calc((100vw - 1210px) / 2));
}

.home-popular-section { background: #080a12; }
.home-arrivals-section { padding-bottom: 98px; background: #0b0d18; }
.home-popular-section > .section-heading, .home-popular-section > .novel-grid, .home-arrivals-section > .section-heading, .home-arrivals-section > .shelf-list { width: 100%; margin-inline: auto; }
.home-popular-section > .novel-grid { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 11px; scrollbar-width: none; }
.home-popular-section > .novel-grid::-webkit-scrollbar { display: none; }
.home-popular-section .novel-card { flex: 0 0 238px; }

.novel-card { overflow: hidden; border-color: rgba(155, 170, 207, 0.16); border-radius: 19px; background: rgba(18, 22, 38, 0.9); box-shadow: var(--shadow-card); }
.novel-card:hover { box-shadow: 0 25px 55px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(94, 157, 255, 0.12); }
.card-cover-link { padding: 0; }
.novel-card .cover { min-height: 0; aspect-ratio: 16 / 9; border-radius: 0; }
.card-body { padding: 16px 17px 17px; }
.card-body h3 { font-size: 17px; }
.card-bottom { border-top-color: rgba(155, 170, 207, 0.12); }
.tag, .filter-pill { border-radius: 999px; background: rgba(255, 255, 255, 0.035); }
.tag-soft { border-color: rgba(106, 183, 158, 0.25); background: rgba(106, 183, 158, 0.1); }

.shelf-list { border-top-color: rgba(155, 170, 207, 0.13); }
.shelf-row { border-bottom-color: rgba(155, 170, 207, 0.13); }
.shelf-row:hover { padding-inline: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.035); }
.shelf-row .cover { border-radius: 13px; }

.start-card { border-color: rgba(155, 170, 207, 0.14); border-radius: 26px; background: linear-gradient(122deg, #171d34, #101426 55%, #1b1727); box-shadow: 0 25px 65px rgba(0, 0, 0, 0.25); }
.mood-grid a { border-bottom-color: rgba(255, 255, 255, 0.1); }
.mood-grid a:nth-child(odd) { border-right-color: rgba(255, 255, 255, 0.1); }

.discover-intro, .library-intro { padding-top: 96px; padding-bottom: 72px; }
.discover-intro h1, .library-intro h1 { max-width: 760px; }
.search-box { overflow: hidden; border-color: rgba(155, 170, 207, 0.2); border-radius: 16px; background: rgba(18, 23, 40, 0.86); box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18); }
.search-box button { background: linear-gradient(110deg, #4c9cff, #7480f3 65%, #e87b70); }
.filter-pill:hover, .filter-pill.is-active { border-color: rgba(94, 157, 255, 0.8); background: rgba(94, 157, 255, 0.11); color: #83b6ff; }
.sort-control select { border-radius: 10px; background: rgba(255, 255, 255, 0.045); }
.empty-search, .library-empty { border-radius: 20px; background: rgba(18, 23, 40, 0.65); }

.novel-cover-frame { padding: 13px; border-color: rgba(155, 170, 207, 0.18); border-radius: 25px; background: rgba(18, 22, 38, 0.9); }
.novel-cover-frame .cover { border-radius: 18px; }
.translator-note, .aside-card { border-radius: 18px; }
.translator-note { background: rgba(18, 24, 42, 0.78); }
.chapter-row { border-bottom-color: rgba(155, 170, 207, 0.13); border-radius: 10px; }
.chapter-row:hover, .chapter-row.is-current { background: rgba(94, 157, 255, 0.08); }
.aside-card { border-color: rgba(155, 170, 207, 0.16); background: rgba(18, 22, 38, 0.82); }
.aside-card-paper { background: linear-gradient(135deg, rgba(28, 37, 63, 0.92), rgba(18, 23, 40, 0.9)); }
.library-progress-grid { gap: 17px; }
.progress-card { border: 1px solid rgba(155, 170, 207, 0.12); border-radius: 18px; background: rgba(255, 255, 255, 0.055); }
.progress-card .cover { border-radius: 13px; }

.reader-settings-panel { background: rgba(14, 16, 28, 0.94); backdrop-filter: blur(16px); }
.settings-buttons button, .setting-choice { border-radius: 9px; background: rgba(255, 255, 255, 0.055); }
.reader-rule::before { background: linear-gradient(90deg, var(--blue), var(--red)); }
.reader-copy p.is-opening::first-letter { color: var(--blue); }
.site-footer { background: #070910; }

@media (max-width: 820px) {
  .page-wrap, .header-inner { width: min(100% - 40px, 680px); }
  .home-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 72px; }
  .hero-feature { width: min(100%, 510px); margin-inline: auto; }
  .home-popular-section, .home-arrivals-section { padding-right: 20px; padding-left: 20px; }
  .home-popular-section > .section-heading, .home-popular-section > .novel-grid, .home-arrivals-section > .section-heading, .home-arrivals-section > .shelf-list { width: 100%; }
  .home-popular-section .novel-card { flex-basis: 225px; }
  .continue-card { grid-template-columns: 140px minmax(0, 1fr); }
  .continue-side { padding: 17px 0 0; }
}

@media (max-width: 570px) {
  .page-wrap, .header-inner { width: calc(100% - 32px); }
  .header-inner { height: 68px; }
  .home-hero { gap: 31px; padding-top: 54px; padding-bottom: 72px; }
  .hero-copy h1, .discover-intro h1, .library-intro h1 { font-size: clamp(50px, 16vw, 76px); }
  .hero-copy > .eyebrow { margin-bottom: 17px; }
  .hero-lede { margin-top: 24px; font-size: 13px; }
  .feature-stage { min-height: 325px; }
  .feature-stack-cover, .feature-cover-link { width: 185px; }
  .feature-stack-cover .cover { min-height: 280px; border-radius: 18px; }
  .feature-cover-link .cover { min-height: 315px; border-radius: 19px; }
  .feature-stack-left { left: 2%; transform: rotate(-13deg) translate(-3px, 20px); }
  .feature-stack-right { right: 2%; transform: rotate(13deg) translate(3px, 20px); }
  .feature-stage-pill { right: calc(50% - 108px); bottom: 5px; }
  .feature-info, .feature-bottom { width: 100%; }
  .section-band { padding: 64px 0 72px; }
  .section-heading h2, .results-heading h2 { font-size: 31px; }
  .home-popular-section, .home-arrivals-section { padding-right: 16px; padding-left: 16px; }
  .home-popular-section { padding-top: 72px; padding-bottom: 76px; }
  .home-popular-section .novel-card { flex-basis: 215px; }
  .home-popular-section .novel-card .cover { min-height: 246px; }
  .home-arrivals-section { padding-top: 72px; padding-bottom: 80px; }
  .continue-card { grid-template-columns: 96px minmax(0, 1fr); gap: 13px; padding: 13px; border-radius: 19px; }
  .continue-cover .cover { min-height: 150px; }
  .continue-main h3 { font-size: 19px; }
  .continue-main > p { font-size: 11px; }
  .continue-side { grid-column: 1 / -1; padding: 15px 2px 2px; border-top-color: rgba(155, 170, 207, 0.13); }
  .start-card { padding: 36px 25px; border-radius: 22px; }
}

.filter-scroll { scrollbar-width: none; }
.filter-scroll::-webkit-scrollbar { display: none; }

/* Product polish: quieter materials, clearer hierarchy, and more considered motion. */
:root {
  --blue: #6aa8ff;
  --violet: #a18cff;
  --red: #ff8b75;
  --ink: #edf1f8;
  --muted: #99a4b8;
  --line: rgba(163, 178, 211, 0.13);
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: 3px solid rgba(106, 168, 255, 0.72);
  outline-offset: 3px;
}

body {
  background:
    radial-gradient(circle at 80% -4%, rgba(84, 131, 255, 0.12), transparent 31rem),
    radial-gradient(circle at 12% 24%, rgba(116, 76, 205, 0.065), transparent 34rem),
    var(--paper);
}

.site-header {
  position: sticky;
  top: 0;
  border-bottom-color: rgba(163, 178, 211, 0.11);
  background: rgba(7, 9, 16, 0.72);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(24px) saturate(135%);
}

.site-header::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(106, 168, 255, 0.25), transparent);
  content: "";
  pointer-events: none;
}

.header-inner { height: 68px; }
.brand { transition: opacity 160ms ease, transform 160ms ease; }
.brand:hover { opacity: 0.88; transform: translateY(-1px); }
.desktop-nav { gap: 26px; }
.desktop-nav a {
  padding: 24px 0 22px;
  color: #8e98ad;
  transition: color 180ms ease, opacity 180ms ease;
}
.desktop-nav a:hover { color: var(--ink); }
.desktop-nav a[href="/library"] {
  margin-left: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(163, 178, 211, 0.13);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}
.desktop-nav a[href="/library"]:hover,
.desktop-nav a[href="/library"].is-active {
  border-color: rgba(106, 168, 255, 0.36);
  background: rgba(106, 168, 255, 0.1);
  color: #b8d5ff;
}
.header-search {
  min-height: 36px;
  padding: 8px 12px;
  border-color: rgba(163, 178, 211, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.header-search:hover {
  border-color: rgba(106, 168, 255, 0.34);
  background: rgba(106, 168, 255, 0.08);
  transform: translateY(-1px);
}

.button,
.filter-pill,
.tag,
.novel-card,
.continue-card,
.progress-card,
.aside-card,
.search-box,
.novel-cover-frame {
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.button-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(112deg, #5d9fff 0%, #7589f4 54%, #ed8a79 100%);
  box-shadow: 0 14px 32px rgba(79, 133, 245, 0.2);
}
.button-primary::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 24%;
  background: rgba(255, 255, 255, 0.22);
  content: "";
  transform: skewX(-18deg) translateX(-170%);
  transition: transform 550ms ease;
}
.button-primary:hover::after { transform: skewX(-18deg) translateX(610%); }
.button-primary > * { position: relative; z-index: 1; }

h1 em,
h2 em {
  background: linear-gradient(108deg, #6daaff 4%, #9d8eff 62%, #eca091 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero-copy h1,
.discover-intro h1,
.library-intro h1,
.not-found h1 {
  font-weight: 500;
  letter-spacing: -0.1em;
}

.hero-copy > .eyebrow {
  border-color: rgba(106, 168, 255, 0.2);
  background: rgba(106, 168, 255, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-lede { color: #aeb7c8; }
.hero-footnote { color: #858fa5; }
.hero-rule { background: linear-gradient(90deg, var(--blue), rgba(106, 168, 255, 0.18)); }

.feature-stage::after {
  background: rgba(86, 126, 239, 0.13);
  filter: blur(42px);
}
.feature-stack-cover {
  opacity: 0.56;
  filter: saturate(0.62) brightness(0.72);
  transition: transform 350ms ease, opacity 350ms ease, filter 350ms ease;
}
.feature-stage:hover .feature-stack-left { transform: rotate(-15deg) translate(-12px, 28px); }
.feature-stage:hover .feature-stack-right { transform: rotate(15deg) translate(12px, 28px); }
.feature-stage-pill {
  right: calc(50% - 132px);
  border-color: rgba(145, 190, 255, 0.26);
  background: linear-gradient(110deg, rgba(76, 146, 255, 0.9), rgba(112, 111, 232, 0.9));
  box-shadow: 0 12px 28px rgba(60, 110, 238, 0.18);
}
.feature-info,
.feature-bottom {
  border-color: rgba(163, 178, 211, 0.14);
  background: rgba(11, 15, 28, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(22px) saturate(125%);
}

.home-popular-section > .novel-grid {
  scroll-snap-type: x proximity;
}
.home-popular-section .novel-card {
  scroll-snap-align: start;
}
.home-popular-section .card-blurb { display: none; }
.home-popular-section .card-bottom { margin-top: 15px; }
.novel-card {
  border-color: rgba(163, 178, 211, 0.13);
  background: rgba(17, 21, 36, 0.84);
}
.novel-card:hover {
  border-color: rgba(106, 168, 255, 0.28);
  box-shadow: 0 25px 58px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(106, 168, 255, 0.07);
  transform: translateY(-4px);
}
.novel-card .cover { transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 420ms ease; }
.novel-card:hover .cover { filter: saturate(1.04); transform: scale(1.025); }
.card-body h3 a { transition: color 180ms ease; }
.card-body h3 a:hover { color: #b8d5ff; }

.continue-card:hover,
.progress-card:hover,
.aside-card:hover,
.novel-cover-frame:hover {
  border-color: rgba(106, 168, 255, 0.25);
}
.section-heading { margin-bottom: 31px; }
.section-note { color: #7f8ba1; }
.text-link { color: #c2c9d7; transition: color 180ms ease; }
.text-link:hover { color: #b8d5ff; }
.text-link span { color: var(--blue); }

.filter-pill:hover,
.filter-pill.is-active {
  border-color: rgba(106, 168, 255, 0.52);
  background: rgba(106, 168, 255, 0.1);
  color: #a9ccff;
  transform: translateY(-1px);
}

.reader-shell {
  background:
    radial-gradient(circle at 74% 4%, rgba(75, 112, 237, 0.08), transparent 24rem),
    var(--paper);
}
.reader-topbar {
  min-height: 78px;
  border-bottom: 1px solid rgba(163, 178, 211, 0.08);
}
.reader-progress-line { height: 2px; background: rgba(163, 178, 211, 0.12); }
.reader-progress-line > span { background: linear-gradient(90deg, var(--blue), var(--violet)); }
.reader-copy { color: #d9deea; line-height: 1.9; }
.reader-copy p.is-opening::first-letter { color: var(--blue); }
.reader-settings-panel {
  border-color: rgba(163, 178, 211, 0.12);
  background: rgba(13, 17, 30, 0.8);
  backdrop-filter: blur(24px) saturate(125%);
}

.mobile-menu {
  border-top: 1px solid rgba(163, 178, 211, 0.08);
  border-bottom: 1px solid rgba(163, 178, 211, 0.08);
  background: rgba(7, 9, 16, 0.9);
  backdrop-filter: blur(24px) saturate(125%);
}
.mobile-menu a { transition: color 180ms ease, padding 180ms ease; }
.mobile-menu a:hover { padding-left: 5px; color: #b8d5ff; }

@media (max-width: 570px) {
  .site-header { background: rgba(7, 9, 16, 0.82); }
  .header-inner { height: 66px; }
  .hero-copy h1 { letter-spacing: -0.105em; }
  .hero-lede { line-height: 1.66; }
  .feature-stage-pill { right: calc(50% - 108px); }
  .home-popular-section .card-blurb { display: none; }
  .novel-card:hover { transform: translateY(-2px); }
  .reader-topbar { min-height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Final motion pass: depth should arrive softly, never jump at the reader. */
:root {
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

#app.page-enter > main {
  animation: page-enter 520ms var(--ease-premium) both;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.button,
.header-search,
.brand,
.filter-pill,
.tag,
.novel-card,
.novel-card .cover,
.continue-card,
.progress-card,
.aside-card,
.novel-cover-frame,
.feature-cover-link,
.feature-stack-cover,
.text-link,
.text-link span,
.mood-grid b,
.shelf-row,
.chapter-row,
.mobile-menu a {
  transition-timing-function: var(--ease-premium);
  transition-duration: 420ms;
}

.button {
  transition-property: transform, background, color, border-color, box-shadow;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0) scale(0.985); transition-duration: 120ms; }
.button-primary::after { display: none; }
.button-primary:hover {
  background: linear-gradient(112deg, #66a6ff 0%, #7e92f7 54%, #f09280 100%);
  box-shadow: 0 18px 38px rgba(79, 133, 245, 0.24);
}

.header-search { transition-property: transform, color, border-color, background, box-shadow; }
.header-search:hover {
  box-shadow: 0 8px 22px rgba(42, 81, 154, 0.16);
  transform: translateY(-1px);
}
.brand { transition-property: opacity, transform; }

.feature-cover-link { transition-property: transform, filter; transition-duration: 560ms; }
.feature-stage:hover .feature-stack-left {
  transform: rotate(-14deg) translate(-9px, 25px);
}
.feature-stage:hover .feature-stack-right {
  transform: rotate(14deg) translate(9px, 25px);
}
.feature-stack-cover { transition-property: transform, opacity, filter; transition-duration: 650ms; }

.novel-card { transition-property: transform, border-color, background, box-shadow; transition-duration: 500ms; }
.novel-card:hover {
  box-shadow: 0 25px 58px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(106, 168, 255, 0.07);
  transform: translateY(-2px);
}
.novel-card .cover { transition-property: transform, filter; transition-duration: 560ms; }
.novel-card:hover .cover { filter: saturate(1.02); transform: scale(1.012); }
.card-body h3 a { transition: color 360ms var(--ease-premium); }

.continue-card,
.progress-card,
.aside-card,
.novel-cover-frame {
  transition-property: transform, border-color, background, box-shadow;
  transition-duration: 520ms;
}
.continue-card:hover,
.progress-card:hover,
.aside-card:hover,
.novel-cover-frame:hover { transform: translateY(-2px); }

.filter-pill { transition-property: color, border-color, background; }
.filter-pill:hover,
.filter-pill.is-active { transform: none; }
.text-link { transition-property: color; }
.text-link span { transition-property: transform; transition-duration: 360ms; }
.text-link:hover span { transform: translateX(2px); }
.mood-grid b { transition-property: transform; transition-duration: 360ms; }
.mood-grid a:hover b { transform: translate(2px, -1px); }

.shelf-row {
  position: relative;
  transition-property: background, border-color, box-shadow;
  transition-duration: 480ms;
}
.shelf-row:hover {
  padding-inline: 0;
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 3px 0 0 rgba(106, 168, 255, 0.55);
}

.chapter-row {
  transition-property: background, border-color, box-shadow;
  transition-duration: 420ms;
}
.chapter-row:hover,
.chapter-row.is-current {
  padding-left: 0;
  box-shadow: inset 3px 0 0 rgba(106, 168, 255, 0.7);
}

.search-box {
  transition-property: border-color, background, box-shadow;
  transition-duration: 420ms;
}
.search-box:focus-within {
  border-color: rgba(106, 168, 255, 0.38);
  background: rgba(20, 27, 47, 0.92);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.22), 0 0 0 4px rgba(106, 168, 255, 0.055);
}

.home-popular-section > .novel-grid {
  padding-right: 44px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 62px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 62px), transparent 100%);
}

.reader-topbar {
  position: sticky;
  top: 68px;
  z-index: 15;
  background: rgba(8, 10, 18, 0.64);
  border-radius: 0 0 16px 16px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(22px) saturate(125%);
}

.reader-settings-panel {
  position: relative;
  z-index: 14;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.2);
}
.settings-buttons { overflow: hidden; gap: 0; border: 1px solid rgba(163, 178, 211, 0.14); border-radius: 10px; }
.settings-buttons button { border: 0; border-radius: 0; }
.settings-buttons button + button { border-left: 1px solid rgba(163, 178, 211, 0.12); }
.setting-choice { border-radius: 10px; }

@media (hover: hover) and (pointer: fine) {
  .brand:hover { transform: translateY(-1px); }
  .feature-cover-link:hover { transform: translateY(-2px) scale(1.006); filter: drop-shadow(0 32px 34px rgba(0, 0, 0, 0.46)); }
  .mobile-menu a:hover { padding-left: 0; }
}

@media (max-width: 570px) {
  .home-popular-section > .novel-grid { padding-right: 28px; }
  .reader-topbar { top: 66px; }
}

@media (max-width: 820px) {
  .mobile-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 520ms var(--ease-premium), padding 520ms var(--ease-premium), opacity 360ms ease, visibility 0s linear 520ms;
  }
  .mobile-menu.is-open {
    max-height: 220px;
    padding-top: 8px;
    padding-bottom: 18px;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .menu-toggle > span { transition: transform 420ms var(--ease-premium), opacity 260ms ease; }
  .menu-toggle[aria-expanded="true"] > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
  .menu-toggle[aria-expanded="true"] > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* Component polish: make the small controls feel as intentional as the large ones. */
:root {
  --control-blue: #a9caff;
  --control-line: rgba(173, 192, 227, 0.22);
  --control-fill: rgba(255, 255, 255, 0.065);
}

.button {
  min-height: 51px;
  gap: 11px;
  padding-inline: 19px;
  border-radius: 15px;
  font-weight: 760;
}
.button > span:not(.button-icon) {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  flex: 0 0 22px;
  font-size: 18px;
  line-height: 1;
}
.button-icon {
  display: inline-grid;
  width: 21px;
  height: 21px;
  place-items: center;
  flex: 0 0 21px;
  font-size: 17px;
  line-height: 1;
}
.button-primary {
  border-color: rgba(255, 255, 255, 0.17);
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
}
.button-outline {
  border-color: var(--control-line);
  background: var(--control-fill);
  color: #eaf0fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.button-outline .button-icon { color: var(--control-blue); }
.button-outline:hover,
.button-outline.is-saved {
  border-color: rgba(106, 168, 255, 0.5);
  background: rgba(106, 168, 255, 0.11);
  color: #d8e8ff;
  box-shadow: 0 10px 26px rgba(50, 93, 174, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.button-dark,
.button-paper {
  border: 1px solid var(--control-line);
  background: rgba(255, 255, 255, 0.075);
  color: #edf2fb;
}
.button-dark:hover,
.button-paper:hover {
  border-color: rgba(106, 168, 255, 0.38);
  background: rgba(106, 168, 255, 0.12);
  color: #fff;
}

.reader-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 0 12px;
  border: 1px solid rgba(173, 192, 227, 0.19);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #c8d1e1;
  transition: color 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium);
}
.reader-save .button-icon { color: var(--control-blue); font-size: 16px; }
.reader-save:hover,
.reader-save.is-saved {
  border-color: rgba(106, 168, 255, 0.45);
  background: rgba(106, 168, 255, 0.1);
  color: #e2eeff;
}
.reader-menu-button {
  min-height: 35px;
  padding-top: 0;
  padding-bottom: 0;
}
.reader-menu-button > span {
  display: inline-grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid rgba(173, 192, 227, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  color: var(--control-blue);
  font-size: 16px;
  line-height: 1;
}
.reader-back-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 139, 117, 0.25);
  border-radius: 50%;
  background: rgba(255, 139, 117, 0.07);
}

.icon-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(173, 192, 227, 0.17);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.045);
  color: #aab8cf;
  font-size: 18px;
}
.icon-button .button-icon { font-size: 17px; }
.icon-button:hover,
.icon-button.is-saved {
  border-color: rgba(106, 168, 255, 0.45);
  background: rgba(106, 168, 255, 0.1);
  color: var(--control-blue);
}
.status > span { width: 7px; height: 7px; }
.rating > span { font-size: 13px; }
.language-chip b { padding: 4px 5px; font-size: 8px; }

.feature-arrow,
.text-link span {
  display: inline-grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(106, 168, 255, 0.26);
  border-radius: 50%;
  background: rgba(106, 168, 255, 0.08);
  color: var(--control-blue);
  font-size: 17px;
  line-height: 1;
}
.feature-arrow { width: 34px; height: 34px; font-size: 19px; }
.text-link { gap: 9px; }

.chapter-list { padding-inline: 2px; }
.chapter-row {
  grid-template-columns: 48px minmax(0, 1fr) 90px 36px;
  gap: 18px;
  min-height: 78px;
  padding: 12px 14px;
  border-radius: 13px;
  outline: 1px solid transparent;
  outline-offset: -1px;
}
.chapter-row:hover,
.chapter-row.is-current {
  padding-left: 14px;
  background: rgba(106, 168, 255, 0.075);
  box-shadow: none;
}
.chapter-row.is-current {
  outline-color: rgba(106, 168, 255, 0.35);
  background: linear-gradient(90deg, rgba(106, 168, 255, 0.12), rgba(106, 168, 255, 0.055));
}
.chapter-row.is-current .chapter-number { color: var(--control-blue); font-weight: 700; }
.chapter-number { font-size: 15px; }
.chapter-name { min-width: 0; font-size: 14px; }
.chapter-date { font-size: 10px; }
.chapter-arrow {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(106, 168, 255, 0.28);
  border-radius: 50%;
  background: rgba(106, 168, 255, 0.08);
  color: var(--control-blue);
  font-size: 18px;
  line-height: 1;
  text-align: center;
}

.mini-related > a {
  grid-template-columns: 56px minmax(0, 1fr) 30px;
  gap: 12px;
  min-height: 108px;
  padding: 14px 0;
}
.mini-related-cover {
  display: block;
  width: 56px;
  height: 80px;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}
.mini-related-cover .cover {
  width: 56px;
  height: 80px;
  min-height: 80px;
  padding: 5px;
  border-radius: 14px;
}
.mini-related-cover .cover-micro .cover-title { margin-top: 7px; font-size: 9px; }
.mini-related b { font-size: 12px; line-height: 1.17; }
.mini-related small { margin-top: 6px; font-size: 9px; }
.mini-related i {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(106, 168, 255, 0.28);
  border-radius: 50%;
  background: rgba(106, 168, 255, 0.08);
  color: var(--control-blue);
  font-size: 17px;
  line-height: 1;
}

.shelf-row {
  grid-template-columns: 44px 88px minmax(0, 1fr) 160px;
  gap: 20px;
  min-height: 160px;
  padding: 18px 2px;
}
.shelf-index { align-self: center; padding-top: 0; font-size: 15px; }
.shelf-cover-link { width: 88px; }
.shelf-row .cover {
  width: 88px;
  min-height: 0;
  aspect-ratio: 0.72;
  border-radius: 14px;
}
.shelf-row:hover { padding-inline: 2px; box-shadow: none; }

.search-box .search-glyph { width: 18px; height: 18px; border-width: 2px; }
.search-box button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.18);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.14);
}
.search-box button span {
  display: inline-grid;
  width: 20px;
  height: 20px;
  margin-left: 0;
  place-items: center;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

select,
option {
  color-scheme: dark;
}
:root {
  color-scheme: dark;
}
html,
body {
  overflow-x: clip;
}
.sort-control select {
  color: #edf2fb;
  background-color: #121827;
  border-color: rgba(173, 192, 227, 0.2);
}
.sort-control select option {
  background: #121827;
  color: #edf2fb;
}
.sort-control select option:checked,
.sort-control select option:hover {
  background: #246bd1;
  color: #fff;
}

.home-arrivals-section .shelf-list {
  overflow: hidden;
  border: 1px solid rgba(163, 178, 211, 0.13);
  border-radius: 22px;
  background: rgba(15, 19, 32, 0.58);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.025);
  padding-inline: 18px;
}
.home-arrivals-section .shelf-row {
  grid-template-columns: 44px 88px minmax(0, 1fr) 142px;
  min-width: 0;
}
.home-arrivals-section .shelf-row:last-child { border-bottom: 0; }
.shelf-row-main { min-width: 0; }
.shelf-row-main h3,
.shelf-row-main p { overflow: hidden; text-overflow: ellipsis; }
.shelf-row-side {
  align-self: stretch;
  justify-content: center;
  padding-left: 20px;
  border-left: 1px solid rgba(163, 178, 211, 0.1);
}
.shelf-row-side .rating { color: #e9eef8; }

@media (max-width: 820px) {
  .home-arrivals-section .shelf-list { padding-inline: 10px; border-radius: 19px; }
  .home-arrivals-section .shelf-row {
    grid-template-columns: 34px 78px minmax(0, 1fr);
    padding-inline: 2px;
  }
  .shelf-row-side { border-left: 0; }
}

@media (max-width: 570px) {
  .home-arrivals-section .shelf-list { padding-inline: 10px; }
  .home-arrivals-section .shelf-row { grid-template-columns: 28px 72px minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .shelf-row {
    grid-template-columns: 34px 78px minmax(0, 1fr);
    min-height: 136px;
    gap: 15px;
    padding: 14px 2px;
  }
  .shelf-cover-link { width: 78px; }
  .shelf-row .cover { width: 78px; aspect-ratio: 0.72; }
}

@media (max-width: 570px) {
  .button { min-height: 49px; }
  .novel-actions .button { min-height: 51px; }
  .reader-topbar { gap: 8px; }
  .reader-back { min-width: 0; flex: 1 1 auto; gap: 8px; }
  .reader-back-icon { width: 30px; height: 30px; flex: 0 0 30px; }
  .reader-back > span:last-child { min-width: 0; gap: 3px; }
  .reader-back b { max-width: 145px; font-size: 10px; }
  .reader-top-actions { flex: 0 0 auto; gap: 6px; }
  .reader-save { padding-inline: 10px; }
  .reader-menu-button {
    width: 42px;
    min-width: 42px;
    flex: 0 0 42px;
    overflow: visible;
    padding: 0 0 0 8px;
    border-left: 1px solid rgba(173, 192, 227, 0.17);
  }
  .reader-menu-button > span { width: 25px; height: 25px; }
  .chapter-row {
    grid-template-columns: 36px minmax(0, 1fr) 34px;
    gap: 10px;
    min-height: 72px;
    padding-inline: 14px;
  }
  .chapter-row:hover,
  .chapter-row.is-current { padding-left: 14px; }
  .shelf-row {
    grid-template-columns: 28px 72px minmax(0, 1fr);
    min-height: 126px;
    gap: 12px;
  }
  .shelf-cover-link { width: 72px; }
  .shelf-row .cover { width: 72px; }
  .shelf-row-main h3 { font-size: 16px; }
}

/* Keep the dark action color calm as well; no neon-to-coral sweep. */
html:not([data-theme="light"]) .button-primary,
html:not([data-theme="light"]) .search-box button {
  background: #7f9fe9;
  color: #0b1220;
  box-shadow: 0 15px 32px rgba(74, 112, 190, 0.22);
  text-shadow: none;
}
html:not([data-theme="light"]) .button-primary:hover,
html:not([data-theme="light"]) .search-box button:hover {
  background: #a7bcff;
  color: #08101f;
  box-shadow: 0 18px 38px rgba(74, 112, 190, 0.27);
}

html[data-theme="light"] .progress-card h3 { color: var(--navy); }
html[data-theme="light"] .progress-card-main > p { color: var(--muted); }
html[data-theme="light"] .progress-card .progress-track { background: rgba(32, 61, 100, 0.1); }
html[data-theme="light"] .progress-card .progress-track > span { background: var(--blue); }
html[data-theme="light"] .progress-card .button-paper { border-color: rgba(32, 61, 100, 0.16); background: #eef4ff; color: #315da8; }
html[data-theme="light"] .progress-card .button-paper:hover { border-color: rgba(71, 125, 215, 0.36); background: #e0ebff; }
html[data-theme="light"] .language-chip-dark { color: var(--muted); }
html[data-theme="light"] .language-chip-dark b { background: rgba(71, 125, 215, 0.1); color: #477dd7; }

/* Anchored hover surfaces: the cursor should change the material, never the grid. */
.home-arrivals-section .shelf-list { padding-block: 8px; }
.home-arrivals-section .shelf-row {
  border-radius: 14px;
  transition: background 480ms var(--ease-premium), border-color 480ms var(--ease-premium), box-shadow 480ms var(--ease-premium);
}
.home-arrivals-section .shelf-row:hover {
  padding-inline: 2px;
  border-bottom-color: transparent;
  background: linear-gradient(90deg, rgba(106, 168, 255, 0.105), rgba(106, 168, 255, 0.04) 64%, rgba(106, 168, 255, 0));
  box-shadow: inset 0 0 0 1px rgba(106, 168, 255, 0.16), inset 3px 0 0 rgba(106, 168, 255, 0.62);
}
html[data-theme="light"] .home-arrivals-section .shelf-row:hover {
  border-bottom-color: transparent;
  background: linear-gradient(90deg, rgba(71, 125, 215, 0.105), rgba(71, 125, 215, 0.04) 64%, rgba(71, 125, 215, 0));
  box-shadow: inset 0 0 0 1px rgba(71, 125, 215, 0.18), inset 3px 0 0 rgba(71, 125, 215, 0.52);
}

.chapter-row:hover {
  padding-left: 14px;
  box-shadow: inset 0 0 0 1px rgba(106, 168, 255, 0.13), inset 3px 0 0 rgba(106, 168, 255, 0.55);
}
html[data-theme="light"] .chapter-row:hover {
  box-shadow: inset 0 0 0 1px rgba(71, 125, 215, 0.14), inset 3px 0 0 rgba(71, 125, 215, 0.48);
}

/* Mood navigator: four soft doors, not a data table. */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
}
.mood-grid a {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: center;
  min-height: 60px;
  padding: 10px 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018));
  color: var(--white);
  font-size: 12px;
  font-weight: 650;
  transition-property: transform, border-color, background, box-shadow;
  transition-duration: 480ms;
}
.mood-grid a:nth-child(odd),
.mood-grid a:nth-child(even) {
  padding-inline: 12px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.mood-grid a::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 0% 0%, rgba(106, 168, 255, 0.22), transparent 58%);
  transition: opacity 480ms var(--ease-premium);
}
.mood-grid a:hover,
.mood-grid a:focus-visible {
  border-color: rgba(106, 168, 255, 0.42);
  background: linear-gradient(135deg, rgba(106, 168, 255, 0.15), rgba(255, 255, 255, 0.035));
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}
.mood-grid a:hover::before,
.mood-grid a:focus-visible::before { opacity: 1; }
.mood-grid a:focus-visible { outline: 2px solid rgba(106, 168, 255, 0.55); outline-offset: 3px; }
.mood-grid .mood-index {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: #aebbd1;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.mood-grid .mood-name { position: relative; z-index: 1; min-width: 0; }
.mood-grid b {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(234, 161, 143, 0.24);
  border-radius: 50%;
  background: rgba(234, 161, 143, 0.08);
  color: #eaa18f;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  transition: transform 480ms var(--ease-premium), background 480ms var(--ease-premium), border-color 480ms var(--ease-premium);
}
.mood-grid a:hover b,
.mood-grid a:focus-visible b {
  border-color: rgba(234, 161, 143, 0.5);
  background: rgba(234, 161, 143, 0.17);
  transform: translate(1px, -1px);
}

@media (max-width: 570px) {
  .mood-grid { grid-template-columns: 1fr; gap: 10px; }
  .mood-grid a { min-height: 58px; }
}

/* Footer signature: close the shelf like a book, not like a template. */
.site-footer {
  position: relative;
  overflow: hidden;
  padding: 36px 0 18px;
  border-top: 1px solid rgba(163, 178, 211, 0.14);
  background: #070910;
}
.site-footer::before,
.site-footer::after {
  position: absolute;
  content: "";
  pointer-events: none;
  border: 1px solid rgba(106, 168, 255, 0.09);
  border-radius: 50%;
}
.site-footer::before {
  top: -255px;
  right: -118px;
  width: 430px;
  height: 430px;
  box-shadow: 0 0 0 22px rgba(106, 168, 255, 0.025), 0 0 0 50px rgba(106, 168, 255, 0.018);
}
.site-footer::after {
  bottom: -315px;
  left: 28%;
  width: 460px;
  height: 460px;
  border-color: rgba(234, 161, 143, 0.06);
}
.footer-inner { position: relative; z-index: 1; width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.footer-kicker { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid rgba(163, 178, 211, 0.12); color: #718098; font-size: 9px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-kicker > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: #aebbd1; }
.footer-kicker i { width: 6px; height: 6px; border-radius: 50%; background: #eaa18f; box-shadow: 0 0 0 4px rgba(234, 161, 143, 0.1); }
.footer-main { display: grid; grid-template-columns: minmax(190px, 0.8fr) minmax(300px, 1fr) minmax(220px, 0.8fr); gap: 56px; align-items: start; padding: 38px 0 44px; }
.footer-brand-block { min-width: 0; }
.brand-footer { min-width: 0; }
.footer-caption { margin: 19px 0 0; color: #8390a5; font-family: var(--serif); font-size: 13px; line-height: 1.5; }
.footer-ritual { display: inline-flex; align-items: center; gap: 10px; margin-top: 27px; color: #76849b; font-size: 9px; line-height: 1.45; }
.footer-ritual-glyph { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(234, 161, 143, 0.22); border-radius: 50%; background: rgba(234, 161, 143, 0.07); color: #eaa18f; font-family: var(--serif); font-size: 15px; }
.footer-ritual b { color: #c5cfde; font-weight: 650; }
.footer-closer { position: relative; min-height: 145px; overflow: hidden; }
.footer-closer::after { position: absolute; right: 4px; bottom: -45px; content: "灯"; color: rgba(106, 168, 255, 0.075); font-family: var(--serif); font-size: 166px; line-height: 1; pointer-events: none; }
.footer-eyebrow { margin: 0 0 14px; color: #eaa18f; font-size: 9px; font-weight: 750; letter-spacing: 0.17em; text-transform: uppercase; }
.footer-closer h2 { position: relative; z-index: 1; margin: 0; color: #edf2fb; font-family: var(--display); font-size: clamp(28px, 3vw, 39px); font-weight: 520; letter-spacing: -0.075em; line-height: 0.98; }
.footer-closer h2 em { background: linear-gradient(108deg, #6aa8ff, #9a82ff 60%, #eaa18f); background-clip: text; -webkit-background-clip: text; color: transparent; font-family: var(--display); font-style: normal; }
.footer-links { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; }
.footer-link-label { display: block; margin-bottom: 9px; color: #718098; font-size: 9px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-links a { display: grid; grid-template-columns: 25px minmax(0, 1fr) 26px; gap: 9px; align-items: center; min-height: 35px; border-top: 1px solid rgba(163, 178, 211, 0.1); color: #c5cfde; font-size: 10px; font-weight: 650; transition: color 360ms var(--ease-premium), padding 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium); }
.footer-links a:last-child { border-bottom: 1px solid rgba(163, 178, 211, 0.1); }
.footer-links a > span:first-child { color: #718098; font-size: 8px; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.footer-links a > b { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid rgba(234, 161, 143, 0.2); border-radius: 50%; background: rgba(234, 161, 143, 0.065); color: #eaa18f; font-size: 14px; font-weight: 400; transition: transform 360ms var(--ease-premium), background 360ms var(--ease-premium), border-color 360ms var(--ease-premium); }
.footer-links a:hover { padding-inline: 6px; border-color: rgba(106, 168, 255, 0.24); background: rgba(106, 168, 255, 0.055); color: #edf2fb; }
.footer-links a:hover > b { border-color: rgba(234, 161, 143, 0.45); background: rgba(234, 161, 143, 0.15); transform: translate(1px, -1px); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 0; padding-top: 14px; border-top: 1px solid rgba(163, 178, 211, 0.12); color: #64728a; font-size: 9px; }
.footer-bottom > span:first-child { display: inline-flex; align-items: center; gap: 12px; }
.footer-bottom b { color: #aebbd1; font-size: 8px; letter-spacing: 0.12em; }

html[data-theme="light"] .site-footer { border-top-color: rgba(163, 178, 211, 0.17); background: #0e1b32; }
html[data-theme="light"] .site-footer .brand { color: #edf2fb; }
html[data-theme="light"] .site-footer .brand small { color: #8fa2be; }
html[data-theme="light"] .site-footer .footer-caption { color: #8fa2be; }

@media (max-width: 820px) {
  .site-footer { padding: 31px 0 16px; }
  .footer-inner { width: min(100% - 40px, 680px); }
  .footer-kicker { align-items: flex-start; flex-direction: column; gap: 8px; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; padding: 31px 0 35px; }
  .footer-closer { min-height: 126px; padding-top: 28px; border-top: 1px solid rgba(163, 178, 211, 0.12); }
  .footer-closer::after { right: 0; bottom: -62px; font-size: 145px; }
  .footer-links { padding-top: 26px; border-top: 1px solid rgba(163, 178, 211, 0.12); }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-width: 570px) {
  .footer-inner { width: calc(100% - 32px); }
  .footer-main { gap: 29px; }
  .footer-caption { font-size: 12px; }
  .footer-closer h2 { font-size: 32px; }
}

/* Navigation icons: one quiet line language for the three destinations. */
.desktop-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: currentColor;
  opacity: 0.7;
  transition: opacity 360ms var(--ease-premium), transform 360ms var(--ease-premium), color 360ms var(--ease-premium);
}
.desktop-nav a:hover .nav-icon,
.desktop-nav a.is-active .nav-icon,
.mobile-menu a:hover .nav-icon,
.mobile-menu a.is-active .nav-icon { opacity: 1; }
.desktop-nav a:hover .nav-icon,
.mobile-menu a:hover .nav-icon { transform: translateY(-1px); }
.nav-icon-home::before {
  position: absolute;
  top: 5px;
  left: 2px;
  width: 12px;
  height: 9px;
  border: 1.25px solid currentColor;
  border-radius: 2px 2px 3px 3px;
  content: "";
}
.nav-icon-home::after {
  position: absolute;
  top: 1px;
  left: 3px;
  width: 9px;
  height: 9px;
  border-top: 1.25px solid currentColor;
  border-left: 1.25px solid currentColor;
  content: "";
  transform: rotate(45deg) scale(0.72);
  transform-origin: center;
}
.nav-icon-discover { border: 1.25px solid currentColor; border-radius: 50%; }
.nav-icon-discover::before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  content: "";
  transform: rotate(45deg);
}
.nav-icon-discover::after {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.nav-icon-library::before,
.nav-icon-library::after {
  position: absolute;
  top: 2px;
  width: 7px;
  height: 12px;
  border: 1.25px solid currentColor;
  content: "";
}
.nav-icon-library::before { left: 0; border-radius: 3px 1px 1px 3px; transform: skewY(-5deg); }
.nav-icon-library::after { right: 0; border-radius: 1px 3px 3px 1px; transform: skewY(5deg); }
.mobile-nav-label { display: inline-flex; align-items: center; gap: 10px; }
.mobile-menu-index { color: var(--muted-light); font-size: 9px; }

@media (max-width: 820px) {
  .mobile-menu a { gap: 16px; }
}

/* Apple-like proportion pass: the label leads, the glyph supports it. */
.desktop-nav a { gap: 7px; }
.nav-icon {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  opacity: 0.62;
}
.nav-icon-home::before {
  top: 4px;
  left: 2px;
  width: 10px;
  height: 8px;
  border-width: 1.1px;
}
.nav-icon-home::after {
  top: 1px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-width: 1.1px;
}
.nav-icon-discover { border-width: 1.1px; }
.nav-icon-discover::before { top: 3.5px; left: 3.5px; width: 5px; height: 5px; border-width: 0.9px; }
.nav-icon-discover::after { top: 5.5px; left: 5.5px; width: 1.8px; height: 1.8px; }
.nav-icon-library::before,
.nav-icon-library::after { top: 1.5px; width: 6px; height: 11px; border-width: 1.1px; }
.mobile-nav-label { gap: 8px; }
.header-search { gap: 7px; }
.header-search .search-glyph { width: 14px; height: 14px; border-width: 1.35px; }
.header-search .search-glyph::after { right: -3px; bottom: -2.5px; width: 5px; height: 1.25px; }
.theme-toggle { gap: 6px; }
.theme-toggle-icon { width: 18px; height: 18px; font-size: 13px; }

@media (max-width: 570px) {
  .nav-icon { width: 14px; height: 14px; flex-basis: 14px; }
}

/* Discover filters: one calm toolbar, with language kept available but out of the way. */
.filter-toolbar {
  margin-top: 18px;
  padding: 14px 15px 15px;
  border: 1px solid rgba(163, 178, 211, 0.14);
  border-radius: 18px;
  background: rgba(15, 20, 34, 0.68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 42px rgba(0, 0, 0, 0.1);
}
.filter-toolbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.filter-heading {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #aebbd1;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.filter-heading-icon {
  position: relative;
  display: inline-block;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(106, 168, 255, 0.3);
  border-radius: 7px;
  background: rgba(106, 168, 255, 0.08);
  color: #8dbaff;
}
.filter-heading-icon::before {
  position: absolute;
  top: 5px;
  left: 4px;
  width: 9px;
  height: 1px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
  content: "";
  opacity: 0.8;
}
.filter-heading-icon::after {
  position: absolute;
  top: 4px;
  left: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #dce8ff;
  box-shadow: -3px 4px 0 #dce8ff, 3px 8px 0 #dce8ff;
  content: "";
}
.filter-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.filter-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 10px 0 11px;
  border: 1px solid rgba(163, 178, 211, 0.15);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  color: #7f8da5;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 360ms var(--ease-premium), background 360ms var(--ease-premium), box-shadow 360ms var(--ease-premium);
}
.filter-select:hover,
.filter-select:focus-within {
  border-color: rgba(106, 168, 255, 0.4);
  background: rgba(106, 168, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(106, 168, 255, 0.06);
}
.filter-select::after {
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-right: 1.5px solid #94a5c0;
  border-bottom: 1.5px solid #94a5c0;
  content: "";
  pointer-events: none;
  transform: rotate(45deg) translateY(-2px);
}
.filter-select-label { flex: 0 0 auto; color: #718098; }
.filter-select select {
  min-width: 0;
  max-width: 148px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #edf2fb;
  cursor: pointer;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: normal;
  text-transform: none;
  -webkit-appearance: none;
  appearance: none;
}
.filter-select select option { background: #121827; color: #edf2fb; }
.filter-line.filter-line-genres {
  align-items: center;
  gap: 14px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid rgba(163, 178, 211, 0.1);
}
.filter-line-genres .filter-label { min-width: 39px; color: #718098; }
.filter-line-genres .filter-scroll { gap: 7px; min-width: 0; }
.filter-line-genres .filter-pill { min-height: 30px; }

html[data-theme="light"] .filter-toolbar {
  border-color: rgba(32, 61, 100, 0.13);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 18px 42px rgba(39, 63, 99, 0.07);
}
html[data-theme="light"] .filter-heading { color: #536883; }
html[data-theme="light"] .filter-heading-icon { border-color: rgba(71, 125, 215, 0.26); background: rgba(71, 125, 215, 0.08); color: #477dd7; }
html[data-theme="light"] .filter-heading-icon::after { background: #477dd7; box-shadow: -3px 4px 0 #477dd7, 3px 8px 0 #477dd7; }
html[data-theme="light"] .filter-select { border-color: rgba(32, 61, 100, 0.14); background: rgba(255, 255, 255, 0.72); color: #71839c; }
html[data-theme="light"] .filter-select:hover,
html[data-theme="light"] .filter-select:focus-within { border-color: rgba(71, 125, 215, 0.4); background: rgba(71, 125, 215, 0.07); box-shadow: 0 0 0 3px rgba(71, 125, 215, 0.06); }
html[data-theme="light"] .filter-select-label,
html[data-theme="light"] .filter-line-genres .filter-label { color: #7889a1; }
html[data-theme="light"] .filter-select select { color: var(--navy); }
html[data-theme="light"] .filter-select select option { background: #fff; color: var(--navy); }
html[data-theme="light"] .filter-select::after { border-color: #7187a4; }
html[data-theme="light"] .filter-line.filter-line-genres { border-top-color: rgba(32, 61, 100, 0.1); }

@media (max-width: 820px) {
  .filter-toolbar-top { align-items: flex-start; flex-direction: column; gap: 12px; }
  .filter-controls { width: 100%; justify-content: stretch; }
  .filter-select { flex: 1 1 0; min-width: 0; }
  .filter-select select { max-width: none; }
  .filter-line.filter-line-genres { align-items: flex-start; flex-direction: column; gap: 9px; }
  .filter-line-genres .filter-scroll { width: 100%; }
}

@media (max-width: 570px) {
  .filter-toolbar { margin-top: 14px; padding: 13px 12px 13px; border-radius: 16px; }
  .filter-controls { gap: 7px; }
  .filter-select { gap: 6px; padding-inline: 9px; }
  .filter-select-label { font-size: 8px; letter-spacing: 0.08em; }
  .filter-select select { font-size: 9px; }
  .filter-line.filter-line-genres { margin-top: 12px; padding-top: 12px; }
  .filter-line-genres .filter-scroll { width: calc(100vw - 58px); }
}

/* Card clarity pass: larger optical sizes, quieter halos, and vector-like controls. */
.novel-card .card-body { padding: 18px 18px 18px; }
.novel-card .card-meta-line { min-height: 22px; align-items: center; }
.novel-card .language-chip {
  gap: 7px;
  color: #aebbd0;
  font-size: 10px;
  letter-spacing: 0.005em;
}
.novel-card .language-chip b {
  display: inline-grid;
  min-width: 25px;
  min-height: 18px;
  place-items: center;
  padding: 0 6px;
  border: 1px solid rgba(106, 183, 158, 0.2);
  border-radius: 6px;
  background: rgba(106, 183, 158, 0.11);
  color: #8bd5bd;
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
}
.novel-card .status {
  gap: 7px;
  color: #aebbd0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.novel-card .status > span {
  width: 6px;
  height: 6px;
  box-shadow: none;
}
.novel-card .card-body h3 {
  min-height: 41px;
  margin: 14px 0 7px;
  color: #f0f4fb;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-wrap: balance;
}
.novel-card .card-blurb {
  min-height: 60px;
  margin: 13px 0 16px;
  color: #aeb9cb;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.002em;
  line-height: 1.5;
}
.novel-card .card-bottom {
  gap: 14px;
  padding-top: 14px;
  color: #95a4ba;
  font-size: 10px;
  line-height: 1;
}
.novel-card .card-bottom > span:not(.rating) { color: #93a1b7; }
.novel-card .rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #edf2fb;
  font-size: 12px;
  font-weight: 700;
}
.rating-star {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  color: var(--gold);
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 37%, 100% 50%, 61% 63%, 50% 100%, 39% 63%, 0% 50%, 39% 37%);
  font-size: 0;
  line-height: 0;
}
.novel-card .icon-button {
  --icon-button-fill: rgba(255, 255, 255, 0.045);
  width: 36px;
  height: 36px;
  background: var(--icon-button-fill);
  color: #aebbd0;
}
.novel-card .icon-button:hover,
.novel-card .icon-button.is-saved {
  --icon-button-fill: rgba(106, 168, 255, 0.1);
  background: var(--icon-button-fill);
}
.bookmark-icon {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 14px;
  flex: 0 0 11px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
}
.bookmark-icon::after {
  position: absolute;
  inset: 1.5px;
  background: var(--icon-button-fill);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%);
  content: "";
}
.bookmark-icon.is-filled::after { display: none; }

html[data-theme="light"] .novel-card .language-chip { color: #5f718b; }
html[data-theme="light"] .novel-card .language-chip b { border-color: rgba(57, 141, 116, 0.18); background: rgba(57, 141, 116, 0.09); color: #398d74; }
html[data-theme="light"] .novel-card .status { color: #657791; }
html[data-theme="light"] .novel-card .card-body h3 { color: var(--navy); }
html[data-theme="light"] .novel-card .card-blurb { color: #5e708a; }
html[data-theme="light"] .novel-card .card-bottom { color: #71829b; }
html[data-theme="light"] .novel-card .card-bottom > span:not(.rating) { color: #71829b; }
html[data-theme="light"] .novel-card .rating { color: var(--navy); }
html[data-theme="light"] .novel-card .icon-button { --icon-button-fill: rgba(239, 244, 251, 0.9); color: #6a7d98; }
html[data-theme="light"] .novel-card .icon-button:hover,
html[data-theme="light"] .novel-card .icon-button.is-saved { --icon-button-fill: rgba(71, 125, 215, 0.1); }

@media (max-width: 570px) {
  .novel-card .card-body { padding: 17px 14px 14px; }
  .novel-card .card-body h3 { min-height: 39px; font-size: 17px; }
  .novel-card .card-blurb { min-height: 0; font-size: 12px; }
  .novel-card .card-bottom { gap: 10px; padding-top: 12px; }
  .novel-card .icon-button { width: 34px; height: 34px; }
}

/* Shelf row geometry: the rating and chapter count share one optical center. */
.home-arrivals-section .shelf-row-side {
  align-items: center;
  padding-left: 0;
  text-align: center;
}
.home-arrivals-section .shelf-row-side .rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}
.home-arrivals-section .shelf-row-side > span:last-child {
  width: 100%;
  text-align: center;
}

@media (max-width: 820px) {
  .home-arrivals-section .shelf-row-side { padding-left: 0; }
}

/* Reader controls: an inset toolbar with a stable action island. */
.reader-topbar {
  min-width: 0;
  padding-inline: 16px;
}
.reader-back,
.reader-back > span:last-child { min-width: 0; }
.reader-top-actions {
  flex: 0 0 auto;
  gap: 10px;
}
.reader-save {
  min-width: 76px;
  justify-content: center;
}
.reader-save .bookmark-icon { flex: 0 0 11px; }
.reader-menu-button { gap: 9px; }
.reader-menu-button > span {
  position: relative;
  font-size: 0;
}
.reader-menu-button > span::after {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

@media (max-width: 820px) {
  .reader-topbar { padding-inline: 14px; }
}

@media (max-width: 570px) {
  .reader-topbar { padding-inline: 12px; }
  .reader-top-actions { gap: 8px; }
  .reader-save { min-width: 74px; padding-inline: 10px; }
  .reader-menu-button {
    width: 36px;
    min-width: 36px;
    flex: 0 0 36px;
    justify-content: center;
    padding: 0;
    border-left: 0;
    border-radius: 50%;
  }
  .reader-menu-button > span { width: 28px; height: 28px; }
  .reader-menu-button > span::after { top: 8px; left: 8px; }
}

/* Header system: four destinations, one quietly special search action. */
.desktop-nav a[href="/library"] {
  margin-left: 0;
  padding: 24px 0 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.desktop-nav a[href="/library"]:hover,
.desktop-nav a[href="/library"].is-active {
  border-color: transparent;
  background: transparent;
  color: #b8d5ff;
}
.desktop-nav a.nav-search {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(163, 178, 211, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  gap: 8px;
  color: #c8d2e3;
  transition: color 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium), transform 360ms var(--ease-premium), box-shadow 360ms var(--ease-premium);
}
.desktop-nav a.nav-search:hover,
.desktop-nav a.nav-search.is-active {
  border-color: rgba(106, 168, 255, 0.4);
  background: rgba(106, 168, 255, 0.1);
  color: #dce9ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(42, 81, 154, 0.16);
}
.desktop-nav a.nav-search .search-glyph { width: 14px; height: 14px; border-width: 1.35px; }
.desktop-nav a.nav-search .search-glyph::after { right: -3px; bottom: -2.5px; width: 5px; height: 1.25px; }
.nav-icon-search { border: 1.1px solid currentColor; border-radius: 50%; }
.nav-icon-search::after {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 5px;
  height: 1.1px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}

html[data-theme="light"] .desktop-nav a[href="/library"] {
  border-color: transparent;
  background: transparent;
}
html[data-theme="light"] .desktop-nav a[href="/library"]:hover,
html[data-theme="light"] .desktop-nav a[href="/library"].is-active {
  border-color: transparent;
  background: transparent;
  color: #315da8;
}
html[data-theme="light"] .desktop-nav a.nav-search {
  border-color: rgba(32, 61, 100, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  box-shadow: 0 5px 18px rgba(39, 63, 99, 0.04);
}
html[data-theme="light"] .desktop-nav a.nav-search:hover,
html[data-theme="light"] .desktop-nav a.nav-search.is-active {
  border-color: rgba(71, 125, 215, 0.38);
  background: rgba(71, 125, 215, 0.09);
  color: #244e96;
  box-shadow: 0 8px 22px rgba(71, 125, 215, 0.12);
}

/* Search is a focused desk; Discover keeps the catalogue and filters. */
.search-page {
  padding-top: 96px;
  padding-bottom: 48px;
}
.search-page-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: 70px;
  align-items: end;
}
.search-page-lede {
  max-width: 350px;
  margin: 0 0 8px auto;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
}
.search-page-box { margin-top: 52px; }
.search-page-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: #7f8ba1;
  font-size: 10px;
}
.search-page-note-mark {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(106, 168, 255, 0.25);
  border-radius: 50%;
  background: rgba(106, 168, 255, 0.07);
  color: #8dbaff;
  font-size: 13px;
}
.search-results-page { padding-bottom: 108px; }
.search-results-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 28px;
  padding-top: 50px;
}
.search-start {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1.28fr);
  gap: 58px;
  padding: 42px 0 22px;
  border-top: 1px solid rgba(163, 178, 211, 0.12);
}
.search-start h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 36px;
  font-weight: 520;
  letter-spacing: -0.085em;
  line-height: 1.02;
}
.search-start > div:first-child > p:last-child {
  max-width: 300px;
  margin: 16px 0 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
}
.search-example-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}
.search-example-grid a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  border-top: 1px solid rgba(163, 178, 211, 0.12);
  color: #c5cfde;
  transition: color 360ms var(--ease-premium), background 360ms var(--ease-premium), padding 360ms var(--ease-premium), border-color 360ms var(--ease-premium);
}
.search-example-grid a:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(163, 178, 211, 0.12); }
.search-example-grid a:hover {
  padding-inline: 6px;
  border-color: rgba(106, 168, 255, 0.22);
  background: rgba(106, 168, 255, 0.05);
  color: #edf2fb;
}
.search-example-index { color: #718098; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; }
.search-example-grid b { display: block; color: inherit; font-size: 12px; font-weight: 700; }
.search-example-grid small { display: block; margin-top: 5px; color: #7f8ba1; font-size: 9px; line-height: 1.35; }
.search-example-arrow {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(163, 178, 211, 0.16);
  border-radius: 50%;
  color: #91b9fa;
  font-size: 12px;
  transition: transform 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium);
}
.search-example-grid a:hover .search-example-arrow { border-color: rgba(106, 168, 255, 0.42); background: rgba(106, 168, 255, 0.1); transform: translate(2px, -1px); }
.search-no-results {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 48px;
  padding: 48px 0;
  border-top: 1px solid rgba(163, 178, 211, 0.12);
  border-bottom: 1px solid rgba(163, 178, 211, 0.12);
}
.search-no-results .empty-symbol { flex: 0 0 auto; }
.search-no-results h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: 27px; letter-spacing: -0.06em; }
.search-no-results p { margin: 9px 0 18px; color: var(--muted); font-family: var(--serif); font-size: 15px; }
html[data-theme="light"] .search-page-note { color: #73839b; }
html[data-theme="light"] .search-page-note-mark { border-color: rgba(71, 125, 215, 0.24); background: rgba(71, 125, 215, 0.07); color: #477dd7; }
html[data-theme="light"] .search-start,
html[data-theme="light"] .search-example-grid a,
html[data-theme="light"] .search-no-results { border-color: rgba(32, 61, 100, 0.13); }
html[data-theme="light"] .search-example-grid a { color: #405473; }
html[data-theme="light"] .search-example-grid a:hover { border-color: rgba(71, 125, 215, 0.24); background: rgba(71, 125, 215, 0.06); color: #203d64; }
html[data-theme="light"] .search-example-index,
html[data-theme="light"] .search-example-grid small { color: #8493a8; }
html[data-theme="light"] .search-example-arrow { border-color: rgba(32, 61, 100, 0.15); color: #477dd7; }
html[data-theme="light"] .search-example-grid a:hover .search-example-arrow { border-color: rgba(71, 125, 215, 0.34); background: rgba(71, 125, 215, 0.08); }

@media (max-width: 820px) {
  .search-page { padding-top: 67px; }
  .search-page-intro { grid-template-columns: 1fr; gap: 28px; }
  .search-page-lede { margin: 0; }
  .search-page-box { margin-top: 38px; }
  .search-start { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 570px) {
  .search-page { padding-top: 55px; }
  .search-page h1 { font-size: 57px; }
  .search-page-box { margin-top: 30px; }
  .search-start { padding-top: 31px; }
  .search-start h2 { font-size: 31px; }
  .search-example-grid { grid-template-columns: 1fr; }
  .search-example-grid a:nth-last-child(-n + 2) { border-bottom: 0; }
  .search-example-grid a:last-child { border-bottom: 1px solid rgba(163, 178, 211, 0.12); }
  .search-results-heading { align-items: flex-start; flex-direction: column; padding-top: 36px; }
  .search-no-results { align-items: flex-start; flex-direction: column; }
}

/* Discover points toward Search without borrowing its primary interaction. */
.discover-search-link {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 21px;
  color: #91b9fa;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.35;
  transition: color 360ms var(--ease-premium), transform 360ms var(--ease-premium);
}
.discover-search-link:hover { color: #dce9ff; transform: translateX(3px); }
.discover-search-link .search-glyph { width: 14px; height: 14px; flex: 0 0 14px; border-width: 1.25px; }
.discover-search-link .search-glyph::after { right: -3px; bottom: -2px; width: 5px; height: 1.2px; }
.discover-search-link > span:nth-child(2) { flex: 1; }
.discover-search-link b { color: var(--ink); font-weight: 750; }
.discover-search-link > span:last-child { color: #e59a88; font-size: 13px; font-weight: 400; }
.discover-tools .filter-toolbar { margin-top: 0; }
html[data-theme="light"] .discover-search-link { color: #477dd7; }
html[data-theme="light"] .discover-search-link:hover { color: #244e96; }
html[data-theme="light"] .discover-search-link > span:last-child { color: #b65e55; }

@media (max-width: 820px) {
  .discover-search-link { max-width: 340px; margin-top: 18px; }
}

/* Header correction: Search stays quiet; My library is the one special destination. */
.desktop-nav a.nav-library {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(163, 178, 211, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.035);
  gap: 8px;
  color: #c8d2e3;
  transition: color 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium), transform 360ms var(--ease-premium), box-shadow 360ms var(--ease-premium);
}
.desktop-nav a.nav-library:hover,
.desktop-nav a.nav-library.is-active {
  border-color: rgba(106, 168, 255, 0.4);
  background: rgba(106, 168, 255, 0.1);
  color: #dce9ff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(42, 81, 154, 0.16);
}
html[data-theme="light"] .desktop-nav a.nav-library {
  border-color: rgba(32, 61, 100, 0.14);
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  box-shadow: 0 5px 18px rgba(39, 63, 99, 0.04);
}
html[data-theme="light"] .desktop-nav a.nav-library:hover,
html[data-theme="light"] .desktop-nav a.nav-library.is-active {
  border-color: rgba(71, 125, 215, 0.38);
  background: rgba(71, 125, 215, 0.09);
  color: #244e96;
  box-shadow: 0 8px 22px rgba(71, 125, 215, 0.12);
}

/* Discover search: fast to use, but still leaves the catalogue in charge. */
.discover-search-box { margin-bottom: 0; }
.discover-search-box input { font-size: 13px; }
.discover-search-box button { width: auto; min-width: 108px; flex: 0 0 auto; }
.search-clear {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border: 1px solid rgba(163, 178, 211, 0.16);
  border-radius: 50%;
  color: #91a4c0;
  font-size: 17px;
  line-height: 1;
  transition: color 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium), transform 360ms var(--ease-premium);
}
.search-clear:hover { border-color: rgba(106, 168, 255, 0.4); background: rgba(106, 168, 255, 0.09); color: #dce9ff; transform: rotate(90deg); }
.search-assist {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 11px 3px 19px;
  color: #718098;
  font-size: 10px;
}
.search-assist > span:first-child { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.search-assist b { color: #aebbd1; font-size: 9px; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; white-space: nowrap; }
.search-assist > span:first-child > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-shortcut { display: inline-flex; flex: 0 0 auto; gap: 4px; }
.search-shortcut kbd {
  display: grid;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid rgba(163, 178, 211, 0.15);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: #8d9bb1;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
}
html[data-theme="light"] .search-clear { border-color: rgba(32, 61, 100, 0.14); color: #71839c; }
html[data-theme="light"] .search-clear:hover { border-color: rgba(71, 125, 215, 0.34); background: rgba(71, 125, 215, 0.08); color: #315da8; }
html[data-theme="light"] .search-assist { color: #8795aa; }
html[data-theme="light"] .search-assist b { color: #627590; }
html[data-theme="light"] .search-shortcut kbd { border-color: rgba(32, 61, 100, 0.14); background: rgba(255, 255, 255, 0.7); color: #71839c; }

@media (max-width: 570px) {
  .discover-search-box { min-height: 58px; }
  .discover-search-box input { height: 56px; padding-inline: 11px; }
  .discover-search-box button { min-width: 84px; padding-inline: 11px; }
  .search-assist { align-items: flex-start; gap: 10px; margin-bottom: 16px; }
  .search-assist > span:first-child { display: block; }
  .search-assist b { display: block; margin-bottom: 4px; }
  .search-assist > span:first-child > span { display: block; max-width: 245px; }
}

/* Hero actions: two equal surfaces, with hierarchy coming from material and contrast. */
.hero-actions .button {
  min-height: 52px;
  padding-inline: 20px;
  border-width: 1px;
  border-radius: 14px;
  gap: 12px;
  box-shadow: none;
  letter-spacing: 0;
  transition: transform 420ms var(--ease-premium), background 420ms var(--ease-premium), color 420ms var(--ease-premium), border-color 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium);
}
.hero-actions .button > span:not(.button-icon) {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  font-size: 16px;
}
.hero-actions .button:active { transform: translateY(0) scale(0.985); }

html:not([data-theme="light"]) .hero-actions .button-primary,
html:not([data-theme="light"]) .button-primary {
  border-color: rgba(236, 243, 255, 0.42);
  background: #b8caf5;
  color: #101b32;
  box-shadow: 0 10px 26px rgba(46, 77, 143, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  text-shadow: none;
}
html:not([data-theme="light"]) .hero-actions .button-primary:hover,
html:not([data-theme="light"]) .button-primary:hover {
  border-color: rgba(246, 249, 255, 0.62);
  background: #d3dfff;
  color: #0b1730;
  box-shadow: 0 15px 34px rgba(46, 77, 143, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}
html:not([data-theme="light"]) .hero-actions .button-quiet {
  border-color: rgba(173, 192, 227, 0.25);
  background: rgba(255, 255, 255, 0.055);
  color: #dce6f6;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}
html:not([data-theme="light"]) .hero-actions .button-quiet:hover {
  border-color: rgba(150, 190, 255, 0.52);
  background: rgba(106, 168, 255, 0.105);
  color: #f3f7ff;
  box-shadow: 0 12px 28px rgba(42, 81, 154, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html[data-theme="light"] .hero-actions .button-primary,
html[data-theme="light"] .button-primary {
  border-color: rgba(255, 255, 255, 0.28);
  background: #294673;
  color: #fff;
  box-shadow: 0 10px 26px rgba(36, 64, 111, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  text-shadow: none;
}
html[data-theme="light"] .hero-actions .button-primary:hover,
html[data-theme="light"] .button-primary:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: #365b8e;
  color: #fff;
  box-shadow: 0 15px 34px rgba(36, 64, 111, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
html[data-theme="light"] .hero-actions .button-quiet {
  border-color: rgba(32, 61, 100, 0.16);
  background: rgba(255, 255, 255, 0.78);
  color: #2b466f;
  box-shadow: 0 8px 22px rgba(39, 63, 99, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
html[data-theme="light"] .hero-actions .button-quiet:hover {
  border-color: rgba(71, 125, 215, 0.34);
  background: #f9fbff;
  color: #244e96;
  box-shadow: 0 12px 28px rgba(39, 63, 99, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

@media (max-width: 820px) {
  .hero-actions { align-items: stretch; }
  .hero-actions .button { width: 100%; }
}

/* Icon language: reading, saving, filtering, and opening each get their own cue. */
.button-icon,
.text-link-icon,
.feature-arrow,
.chapter-arrow,
.mini-related-icon,
.mood-icon,
.footer-link-icon {
  position: relative;
  font-style: normal;
}

.button-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  font-size: 0;
  line-height: 1;
}
.button-icon-shelf::before,
.button-icon-shelf::after {
  position: absolute;
  top: 3px;
  width: 7px;
  height: 11px;
  border: 1.2px solid currentColor;
  content: "";
}
.button-icon-shelf::before { left: 1px; border-right: 0; border-radius: 3px 0 0 3px; }
.button-icon-shelf::after { right: 1px; border-left: 0; border-radius: 0 3px 3px 0; }
.button-icon-bookmark::before {
  position: absolute;
  top: 1px;
  left: 4px;
  width: 10px;
  height: 14px;
  border: 1.2px solid currentColor;
  border-radius: 2px 2px 3px 3px;
  content: "";
}
.button-icon-bookmark::after {
  position: absolute;
  bottom: 1px;
  left: 7px;
  width: 4px;
  height: 4px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}
.button-icon-play::before {
  position: absolute;
  top: 3px;
  left: 5px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
  content: "";
}
.button-icon-search::before {
  position: absolute;
  top: 2px;
  left: 1px;
  width: 10px;
  height: 10px;
  border: 1.3px solid currentColor;
  border-radius: 50%;
  content: "";
}
.button-icon-search::after {
  position: absolute;
  right: 1px;
  bottom: 3px;
  width: 6px;
  height: 1.3px;
  border-radius: 999px;
  background: currentColor;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}
.button-icon-reset::before,
.button-icon-reset::after {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 10px;
  height: 1.3px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}
.button-icon-reset::before { transform: rotate(45deg); }
.button-icon-reset::after { transform: rotate(-45deg); }
.search-box button .button-icon { width: 18px; height: 18px; flex-basis: 18px; color: currentColor; }

.text-link-icon {
  display: inline-grid;
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 0;
  line-height: 1;
  transition: transform 420ms var(--ease-premium), background 420ms var(--ease-premium), border-color 420ms var(--ease-premium), color 420ms var(--ease-premium);
}
.text-link-icon-chevron::before,
.feature-arrow-open::before,
.chapter-arrow-chevron::before,
.mini-related-icon::before {
  width: 7px;
  height: 7px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  content: "";
  transform: rotate(-45deg);
}
.text-link-icon-play::before {
  margin-left: 2px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
  content: "";
}
.text-link:hover .text-link-icon { transform: translateX(2px); }

.feature-arrow-open {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  font-size: 0;
}
.feature-arrow-open::before { width: 9px; height: 9px; }

.chapter-arrow-chevron,
.mini-related-icon {
  display: grid;
  place-items: center;
  font-size: 0;
}
.chapter-arrow-chevron::before { width: 8px; height: 8px; }
.mini-related-icon::before { width: 7px; height: 7px; }
.mini-related > a:hover .mini-related-icon { color: var(--red); transform: translateX(2px); }

.mood-icon-spark::before {
  width: 9px;
  height: 9px;
  background: currentColor;
  content: "";
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.mood-icon-spark { font-size: 0; }

.footer-link-icon {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  font-size: 0;
}
.footer-link-icon-shelf::before,
.footer-link-icon-library::before,
.footer-link-icon-note::before {
  width: 11px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 2px;
  content: "";
}
.footer-link-icon-shelf::after {
  width: 7px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 -3px 0 currentColor;
  content: "";
}
.footer-link-icon-library::after {
  width: 1px;
  height: 9px;
  background: currentColor;
  content: "";
}
.footer-link-icon-note::after {
  width: 5px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 3px 0 currentColor;
  content: "";
}

/* Reader mode: remove the catalogue chrome and give the page its own quiet stage. */
.reader-page {
  min-height: 100vh;
  background: var(--paper);
}
.reader-shell {
  min-height: 100vh;
  padding-bottom: 120px;
  background:
    radial-gradient(circle at 75% 0%, rgba(75, 112, 237, 0.08), transparent 27rem),
    var(--paper);
}
.reader-shell .reader-topbar {
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 72px;
  border-bottom: 1px solid rgba(163, 178, 211, 0.1);
  background: rgba(8, 10, 18, 0.76);
  backdrop-filter: blur(24px) saturate(135%);
}
.reader-shell .reader-progress-line {
  position: sticky;
  top: 72px;
  z-index: 11;
  height: 2px;
  background: rgba(163, 178, 211, 0.12);
}
.reader-shell .reader-settings-panel {
  position: sticky;
  top: 74px;
  z-index: 10;
  border-bottom-color: rgba(163, 178, 211, 0.1);
  background: rgba(14, 16, 27, 0.94);
  backdrop-filter: blur(22px) saturate(130%);
}
.reader-top-actions { gap: 9px; }
.reader-save,
.reader-menu-button,
.reader-theme-toggle {
  min-height: 36px;
  border: 1px solid rgba(173, 192, 227, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #cbd6e8;
  transition: transform 420ms var(--ease-premium), color 420ms var(--ease-premium), border-color 420ms var(--ease-premium), background 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium);
}
.reader-save,
.reader-menu-button { padding-inline: 12px; }
.reader-menu-button { border-left: 1px solid rgba(173, 192, 227, 0.2); }
.reader-save:hover,
.reader-save.is-saved,
.reader-menu-button:hover,
.reader-theme-toggle:hover {
  border-color: rgba(106, 168, 255, 0.48);
  background: rgba(106, 168, 255, 0.1);
  color: #edf4ff;
  box-shadow: 0 8px 22px rgba(42, 81, 154, 0.18);
  transform: translateY(-1px);
}
.reader-menu-button > span {
  width: 20px;
  height: 20px;
  border-color: rgba(173, 192, 227, 0.2);
  background: rgba(255, 255, 255, 0.055);
  font-size: 14px;
}
.reader-theme-toggle { gap: 6px; padding-inline: 9px; }
.reader-theme-toggle .theme-toggle-icon { width: 19px; height: 19px; font-size: 13px; }
.reader-theme-toggle .theme-toggle-label { font-size: 9px; }

html[data-theme="light"] .reader-shell {
  background:
    radial-gradient(circle at 75% 0%, rgba(71, 125, 215, 0.1), transparent 27rem),
    var(--paper);
}
html[data-theme="light"] .reader-shell .reader-topbar {
  border-bottom-color: rgba(32, 61, 100, 0.11);
  background: rgba(247, 250, 254, 0.78);
}
html[data-theme="light"] .reader-shell .reader-progress-line { background: rgba(32, 61, 100, 0.12); }
html[data-theme="light"] .reader-shell .reader-settings-panel {
  border-bottom-color: rgba(32, 61, 100, 0.12);
  background: rgba(247, 250, 254, 0.94);
}
html[data-theme="light"] .reader-save,
html[data-theme="light"] .reader-menu-button,
html[data-theme="light"] .reader-theme-toggle {
  border-color: rgba(32, 61, 100, 0.16);
  background: rgba(255, 255, 255, 0.76);
  color: #52647f;
}
html[data-theme="light"] .reader-save:hover,
html[data-theme="light"] .reader-save.is-saved,
html[data-theme="light"] .reader-menu-button:hover,
html[data-theme="light"] .reader-theme-toggle:hover {
  border-color: rgba(71, 125, 215, 0.38);
  background: rgba(71, 125, 215, 0.09);
  color: #244e96;
  box-shadow: 0 8px 22px rgba(39, 63, 99, 0.12);
}

@media (max-width: 570px) {
  .reader-shell { padding-bottom: 76px; }
  .reader-shell .reader-topbar { min-height: 66px; }
  .reader-shell .reader-progress-line { top: 66px; }
  .reader-shell .reader-settings-panel { top: 68px; }
  .reader-top-actions { gap: 6px; }
  .reader-theme-toggle {
    width: 36px;
    min-width: 36px;
    justify-content: center;
    padding: 0;
  }
  .reader-theme-toggle .theme-toggle-label { display: none; }
  .reader-theme-toggle .theme-toggle-icon { margin: 0; }
  .reader-menu-button {
    width: 36px;
    min-width: 36px;
    padding: 0;
    border-left: 1px solid rgba(173, 192, 227, 0.2);
  }
}

.reader-back-icon::before,
.reader-nav-icon::before {
  width: 7px;
  height: 7px;
  border-bottom: 1.4px solid currentColor;
  content: "";
}
.reader-back-icon::before,
.reader-nav-icon-prev::before {
  border-left: 1.4px solid currentColor;
  transform: rotate(45deg);
}
.reader-nav-icon-next::before {
  border-right: 1.4px solid currentColor;
  transform: rotate(-45deg);
}
.reader-nav-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  font-size: 0;
  line-height: 1;
}
.reader-nav-link:hover .reader-nav-icon { color: var(--red); }

@media (prefers-reduced-motion: no-preference) {
  .home-hero::before,
  .discover-intro::before,
  .library-intro::before,
  .novel-hero::before {
    animation: ambient-breathe 14s ease-in-out infinite;
  }
  .feature-stage::after { animation: ambient-breathe 11s ease-in-out infinite reverse; }
}
@keyframes ambient-breathe {
  0%, 100% { opacity: 0.62; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(1.045); }
}

/* Final interaction polish: visible, calm focus and a better small-screen action island. */
:focus-visible {
  outline: 2px solid rgba(106, 168, 255, 0.68);
  outline-offset: 2px;
}

@media (max-width: 570px) {
  .reader-save {
    min-width: 66px;
    padding-inline: 8px;
    gap: 5px;
  }
  .reader-back b { max-width: 118px; }
}

/* In-story cinematics: images breathe beyond the copy without becoming cards. */
.reader-scene {
  position: relative;
  width: calc(100% + 120px);
  max-width: calc(100vw - 48px);
  margin: 64px 0 70px -60px;
  overflow: hidden;
  border: 1px solid rgba(163, 178, 211, 0.14);
  border-radius: 28px;
  background: #0d1420;
  box-shadow: 0 26px 72px rgba(3, 6, 13, 0.28), 0 2px 0 rgba(255, 255, 255, 0.04) inset;
  isolation: isolate;
}
.reader-scene::before,
.reader-scene::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
}
.reader-scene::before {
  background: linear-gradient(180deg, rgba(7, 10, 18, 0.08), transparent 26%, transparent 72%, rgba(7, 10, 18, 0.32));
}
.reader-scene::after {
  border: 1px solid rgba(255, 255, 255, 0.035);
  border-radius: inherit;
  box-shadow: 0 0 72px rgba(4, 7, 14, 0.18) inset;
}
.reader-scene img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.96) contrast(1.02);
}
html[data-theme="light"] .reader-scene {
  border-color: rgba(32, 61, 100, 0.14);
  box-shadow: 0 24px 58px rgba(39, 63, 99, 0.16), 0 2px 0 rgba(255, 255, 255, 0.6) inset;
}

@media (max-width: 760px) {
  .reader-scene {
    width: calc(100% + 32px);
    max-width: none;
    margin-left: -16px;
    border-radius: 22px;
  }
}
@media (max-width: 570px) {
  .reader-scene {
    margin-top: 48px;
    margin-bottom: 54px;
    border-radius: 18px;
  }
  .reader-scene img { aspect-ratio: 4 / 3; }
}

/* Let the art dissolve into the page instead of reading as a gallery card. */
.reader-scene {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.reader-scene::before {
  background: transparent;
}
.reader-scene::after {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.reader-scene img {
  border-radius: 6px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
html[data-theme="light"] .reader-scene {
  border: 0;
  box-shadow: none;
}
@media (max-width: 570px) {
  .reader-scene img { border-radius: 4px; }
}

/* Cinematic depth pass: the frame belongs to the room, and responds softly to the reader. */
.reader-scene {
  --scene-x: 0px;
  --scene-y: 0px;
  overflow: hidden;
  perspective: 1200px;
}
.reader-scene::before {
  background:
    linear-gradient(90deg, var(--paper, #080a12) 0%, transparent 11%, transparent 89%, var(--paper, #080a12) 100%),
    linear-gradient(180deg, var(--paper, #080a12) 0%, transparent 10%, transparent 90%, var(--paper, #080a12) 100%);
  opacity: 0.92;
}
.reader-scene::after {
  background:
    radial-gradient(ellipse at center, transparent 47%, rgba(4, 7, 14, 0.14) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%, transparent 78%, rgba(4, 7, 14, 0.12));
}
.reader-scene img {
  transform: scale(1.045) translate3d(var(--scene-x), var(--scene-y), 0);
  transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .reader-scene img {
    transform: none;
    transition: none;
  }
}

/* Final scene blend: preserve the image and only soften its corners. */
.reader-scene {
  overflow: visible;
  perspective: none;
}
.reader-scene::before,
.reader-scene::after {
  background: transparent;
  opacity: 1;
}
.reader-scene img {
  transform: none;
  border-radius: 30px;
  transition: none;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 570px) {
  .reader-scene img { border-radius: 22px; }
}

/* The copy and the cinematic frame share one reading boundary. */
@media (min-width: 761px) {
  .reader-shell:not(.reader-wide) .reading-column {
    width: min(840px, calc(100% - 64px));
  }
  .reader-shell.reader-wide .reading-column {
    width: min(940px, calc(100% - 64px));
  }
}
.reader-shell .reader-scene {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* A quieter light reading stage keeps the feathered art from looking like a white card. */
html[data-theme="light"] .reader-shell:not(.reader-sepia) {
  --paper: #f2f4f7;
  --paper-warm: #e9edf3;
  background:
    radial-gradient(circle at 75% 0%, rgba(71, 125, 215, 0.08), transparent 27rem),
    var(--paper);
}

/* Light mode borrows the scene's own color instead of painting a white halo around it. */
.reader-shell .reader-scene {
  position: relative;
  isolation: isolate;
}
.reader-shell .reader-scene::before {
  display: none;
  z-index: 0;
  border-radius: 30px;
  background-image: var(--scene-image);
  background-position: center;
  background-size: cover;
  filter: blur(48px) saturate(0.7) brightness(0.92);
  opacity: 0;
  transform: scale(1.08);
}
.reader-shell .reader-scene img {
  position: relative;
  z-index: 1;
}
html[data-theme="light"] .reader-shell .reader-scene::before {
  display: block;
  opacity: 0.44;
}
html[data-theme="light"] .reader-shell .reader-scene img {
  border-radius: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 3%, #000 97%, transparent 100%),
  linear-gradient(180deg, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

/* Cinematic scene stage: the artwork becomes a wide tonal intermission, not a card. */
.reader-shell .reader-scene {
  --scene-tint: 14, 27, 47;
  width: min(calc(100% + clamp(96px, 15vw, 220px)), calc(100vw - 32px));
  max-width: none;
  margin: clamp(78px, 9vw, 126px) 0 clamp(84px, 9vw, 132px) 50%;
  padding: clamp(22px, 3.8vw, 54px) 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    rgba(var(--scene-tint), 0.045) 16%,
    rgba(var(--scene-tint), 0.13) 50%,
    rgba(var(--scene-tint), 0.045) 84%,
    var(--paper) 100%
  );
  box-shadow: none;
  isolation: isolate;
  transform: translateX(-50%);
}
.reader-shell .reader-scene::before {
  display: block;
  inset: -12% -4%;
  z-index: 0;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(var(--scene-tint), 0.2), rgba(var(--scene-tint), 0.04)),
    var(--scene-image) center / cover no-repeat;
  filter: blur(38px) saturate(0.86) brightness(0.74);
  opacity: 0.72;
  transform: scale(1.07);
}
.reader-shell .reader-scene::after {
  inset: 0;
  z-index: 2;
  border: 0;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(var(--scene-tint), 0.09), transparent 12%, transparent 88%, rgba(var(--scene-tint), 0.09));
  box-shadow: none;
  opacity: 0.7;
}
.reader-shell .reader-scene img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  filter: saturate(0.98) contrast(1.02);
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 4.5%, #000 95.5%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 1.2%, #000 98.8%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 4.5%, #000 95.5%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 1.2%, #000 98.8%, transparent 100%);
  mask-composite: intersect;
}
.reader-shell .reader-scene[data-scene-kind="ceremony"] { --scene-tint: 13, 31, 55; }
.reader-shell .reader-scene[data-scene-kind="spore"] { --scene-tint: 24, 35, 47; }
.reader-shell .reader-scene[data-scene-kind="home"] { --scene-tint: 47, 30, 21; }
.reader-shell .reader-scene[data-scene-kind="ceremony"] img { object-position: 50% 48%; }
.reader-shell .reader-scene[data-scene-kind="spore"] img { object-position: 49% 50%; }
.reader-shell .reader-scene[data-scene-kind="home"] img { object-position: 50% 50%; }

/* Light mode gets a cool gallery stage instead of a white halo around dark art. */
html[data-theme="light"] .reader-shell .reader-scene {
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    rgba(214, 222, 233, 0.16) 16%,
    rgba(214, 222, 233, 0.3) 50%,
    rgba(214, 222, 233, 0.16) 84%,
    var(--paper) 100%
  );
}
html[data-theme="light"] .reader-shell .reader-scene::before {
  inset: -10% -3%;
  filter: blur(46px) saturate(0.64) brightness(0.95);
  opacity: 0.34;
}
html[data-theme="light"] .reader-shell .reader-scene::after {
  background: linear-gradient(90deg, rgba(214, 222, 233, 0.22), transparent 10%, transparent 90%, rgba(214, 222, 233, 0.22));
  opacity: 0.62;
}
html[data-theme="light"] .reader-shell .reader-scene img {
  filter: saturate(0.91) contrast(0.97) brightness(1.035);
}

@media (max-width: 760px) {
  .reader-shell .reader-scene {
    width: min(calc(100% + 24px), calc(100vw - 24px));
    margin-top: 58px;
    margin-bottom: 70px;
    padding: 20px 0;
  }
  .reader-shell .reader-scene img {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
  }
}
@media (max-width: 570px) {
  .reader-shell .reader-scene {
    width: min(calc(100% + 16px), calc(100vw - 16px));
    margin-top: 48px;
    margin-bottom: 58px;
    padding: 16px 0;
  }
  .reader-shell .reader-scene img { border-radius: 11px; }
}
@supports not (mask-image: linear-gradient(black, transparent)) {
  .reader-shell .reader-scene img { border-radius: 18px; }
}

/* Full-bleed cinema pass: the page changes rooms for the scene, then returns to paper. */
.reader-shell .reader-scene {
  width: 100vw;
  max-width: none;
  margin: clamp(70px, 8vw, 116px) 0 clamp(82px, 8vw, 124px) calc(50% - 50vw);
  padding: clamp(14px, 2vw, 28px) 0;
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    rgba(var(--scene-tint), 0.84) 8%,
    rgb(var(--scene-tint)) 14%,
    rgb(var(--scene-tint)) 86%,
    rgba(var(--scene-tint), 0.84) 92%,
    var(--paper) 100%
  );
  transform: none;
}
.reader-shell .reader-scene::before {
  inset: 0;
  border-radius: 0;
  background: var(--scene-image) center / cover no-repeat;
  filter: blur(48px) saturate(0.82) brightness(0.66);
  opacity: 0.22;
  transform: scale(1.08);
}
.reader-shell .reader-scene::after {
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 44%, rgba(2, 5, 10, 0.24) 100%);
  opacity: 0.72;
}
.reader-shell .reader-scene img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
  filter: saturate(0.98) contrast(1.035);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
}
.reader-shell .reader-scene[data-scene-kind="ceremony"] img { object-position: 50% 22%; }
.reader-shell .reader-scene[data-scene-kind="spore"] img { object-position: 49% 20%; }
.reader-shell .reader-scene[data-scene-kind="home"] img { object-position: 50% 30%; }
html[data-theme="light"] .reader-shell .reader-scene {
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    rgba(var(--scene-tint), 0.9) 8%,
    rgb(var(--scene-tint)) 14%,
    rgb(var(--scene-tint)) 86%,
    rgba(var(--scene-tint), 0.9) 92%,
    var(--paper) 100%
  );
}
html[data-theme="light"] .reader-shell .reader-scene::before {
  filter: blur(52px) saturate(0.72) brightness(0.72);
  opacity: 0.3;
}
html[data-theme="light"] .reader-shell .reader-scene img {
  filter: saturate(0.94) contrast(1.01) brightness(1.035);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%) !important;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
@media (max-width: 760px) {
  .reader-shell .reader-scene {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: 18px 0;
  }
  .reader-shell .reader-scene img { aspect-ratio: 4 / 3; }
}
@media (max-width: 570px) {
  .reader-shell .reader-scene {
    margin-top: 66px;
    margin-bottom: 76px;
    padding: 20px 0;
  }
}

/* Keep the reading controls legible without turning into a white slab over the film frame. */
html[data-theme="light"] .reader-shell .reader-topbar {
  background: rgba(247, 250, 254, 0.64);
  backdrop-filter: blur(26px) saturate(145%);
}

/* ASM reader: the prose stays in control while the visual moments arrive like film. */
.reader-asm .reading-column {
  width: min(900px, calc(100% - 64px));
  padding-top: clamp(104px, 10vw, 140px);
}
.reader-asm.reader-wide .reading-column {
  width: min(980px, calc(100% - 64px));
}
.reader-asm .reader-kicker {
  letter-spacing: 0.19em;
}
.reader-asm .reader-kicker > span:first-child {
  color: var(--control-blue);
}
.reader-asm .reader-kicker > span:last-child {
  color: var(--muted-light);
}
.reader-context-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.03em;
}
.reader-context-line span:last-child {
  color: var(--muted-light);
  text-align: right;
}
.reader-asm .reader-copy {
  max-width: 880px;
  font-size: calc(20px * var(--reader-scale));
  line-height: 1.92;
  letter-spacing: -0.003em;
}
.reader-asm .reader-copy p {
  margin-bottom: 32px;
}
.reader-asm .reader-copy p.is-opening {
  color: var(--ink);
  font-size: 1.05em;
}
.reader-asm .reader-copy p.is-opening::first-letter {
  float: none;
  margin: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.reader-asm .reader-progress-line > span {
  background: linear-gradient(90deg, #6ea9ff, #a8c6ff 58%, #e2b26f);
  box-shadow: 0 0 16px rgba(110, 169, 255, 0.35);
}

.reader-asm .reader-scene {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1200ms cubic-bezier(0.2, 0.75, 0.2, 1), transform 1200ms cubic-bezier(0.2, 0.75, 0.2, 1);
  will-change: opacity, transform;
}
.reader-asm .reader-scene.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reader-asm .reader-scene img {
  transform: scale(1.012);
  transition: transform 18s cubic-bezier(0.2, 0.65, 0.2, 1), filter 900ms ease;
  will-change: transform;
}
.reader-asm .reader-scene.is-visible img {
  transform: scale(1.038);
  transform-origin: center top;
}
.reader-asm .reader-scene::after {
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(2, 5, 10, 0.2) 100%),
    linear-gradient(180deg, transparent 55%, rgba(2, 5, 10, 0.38) 100%);
  opacity: 0.86;
}
.reader-scene-caption {
  position: absolute;
  z-index: 4;
  right: max(24px, calc((100vw - 1100px) / 2));
  bottom: clamp(22px, 3vw, 42px);
  left: max(24px, calc((100vw - 1100px) / 2));
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: rgba(244, 248, 255, 0.86);
  pointer-events: none;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}
.reader-scene-caption-index {
  padding-top: 2px;
  color: rgba(169, 202, 255, 0.88);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.reader-scene-caption-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reader-scene-caption-copy b {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.reader-scene-caption-copy small {
  color: rgba(225, 233, 247, 0.7);
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.25;
}
.reader-asm .reader-scene[data-scene-role="hero"] {
  padding-top: clamp(52px, 5vw, 76px);
}
.reader-asm .reader-scene[data-scene-kind="ceremony"] img {
  object-position: 50% 8%;
}
.reader-asm .reader-scene[data-scene-role="reveal"] {
  margin-top: clamp(96px, 10vw, 144px);
  margin-bottom: clamp(96px, 10vw, 144px);
}
.reader-asm .reader-scene[data-scene-role="outro"] {
  margin-top: clamp(96px, 10vw, 144px);
}
.reader-asm .reader-endnote {
  margin-top: 86px;
  padding-top: 24px;
}

html[data-theme="light"] .reader-asm .reader-context-line {
  border-top-color: rgba(32, 61, 100, 0.12);
}
html[data-theme="light"] .reader-asm .reader-scene::after {
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(3, 9, 18, 0.18) 100%),
    linear-gradient(180deg, transparent 55%, rgba(3, 9, 18, 0.34) 100%);
}

@media (max-width: 760px) {
  .reader-asm .reading-column,
  .reader-asm.reader-wide .reading-column {
    width: min(calc(100% - 38px), 680px);
  }
  .reader-asm .reader-scene[data-scene-role="hero"] { padding-top: 36px; }
  .reader-context-line {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .reader-context-line span:last-child {
    text-align: left;
  }
  .reader-asm .reader-copy {
    font-size: calc(19px * var(--reader-scale));
    line-height: 1.84;
  }
  .reader-scene-caption {
    right: 18px;
    bottom: 20px;
    left: 18px;
  }
}
@media (max-width: 570px) {
  .reader-asm .reading-column,
  .reader-asm.reader-wide .reading-column {
    width: calc(100% - 32px);
    padding-top: 76px;
  }
  .reader-asm .reader-copy {
    font-size: calc(18px * var(--reader-scale));
    line-height: 1.8;
  }
  .reader-asm .reader-scene[data-scene-role="hero"] { padding-top: 28px; }
  .reader-scene-caption-copy b { font-size: 12px; }
  .reader-scene-caption-copy small { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .reader-asm .reader-scene,
  .reader-asm .reader-scene.is-visible,
  .reader-asm .reader-scene img,
  .reader-asm .reader-scene.is-visible img {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Final compositing correction: remove the painted band where the frame meets paper. */
.reader-asm .reader-scene {
  background: transparent;
}

/* Scene boundary v2: the artwork owns the fade. No paper-colored overlay is
   allowed to sit on top of it, which keeps the edge continuous in both themes. */
.reader-asm .reader-scene {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  padding: clamp(18px, 2.6vw, 34px) 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
}
.reader-asm .reader-scene::before,
.reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
}
.reader-asm .reader-scene img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: clamp(18px, 2.4vw, 30px) !important;
  box-shadow: none !important;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 1.4%,
      rgba(0, 0, 0, 0.78) 4.2%,
      #000 6.6%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 1.4%,
      rgba(0, 0, 0, 0.78) 4.2%,
      #000 6.6%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%
    ) !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
  filter: saturate(0.98) contrast(1.025) brightness(1.01);
  transform: scale(1.012) translate3d(0, 0, 0);
  transition: none !important;
  will-change: transform, filter;
}

/* A slow camera drift brings back the cinematic feeling without making the
   image look like a moving banner. */
.reader-asm .reader-scene {
  --cinema-duration: 30s;
  --cinema-start-x: -0.16%;
  --cinema-start-y: 0.04%;
  --cinema-end-x: 0.2%;
  --cinema-end-y: -0.08%;
  --cinema-filter-start: saturate(0.98) contrast(1.025) brightness(1.01);
  --cinema-filter-end: saturate(1.035) contrast(1.05) brightness(1.045);
}
.reader-asm .reader-scene[data-scene-kind="spore"] {
  --cinema-duration: 26s;
  --cinema-start-x: 0.18%;
  --cinema-start-y: -0.06%;
  --cinema-end-x: -0.2%;
  --cinema-end-y: 0.12%;
}
.reader-asm .reader-scene[data-scene-kind="home"] {
  --cinema-duration: 36s;
  --cinema-start-x: -0.12%;
  --cinema-start-y: 0.08%;
  --cinema-end-x: 0.16%;
  --cinema-end-y: -0.06%;
}
.reader-asm .reader-scene.is-visible img {
  animation:
    asm-cinematic-breathe-v2 var(--cinema-duration) cubic-bezier(0.42, 0, 0.18, 1) infinite alternate,
    asm-cinematic-grade-v2 17s ease-in-out infinite alternate;
}
@keyframes asm-cinematic-breathe-v2 {
  from {
    transform: scale(1.012) translate3d(var(--cinema-start-x), var(--cinema-start-y), 0);
  }
  to {
    transform: scale(1.052) translate3d(var(--cinema-end-x), var(--cinema-end-y), 0);
  }
}
@keyframes asm-cinematic-grade-v2 {
  from { filter: var(--cinema-filter-start); }
  to { filter: var(--cinema-filter-end); }
}
html[data-theme="light"] .reader-asm .reader-scene {
  --cinema-filter-start: saturate(0.94) contrast(1.01) brightness(1.04);
  --cinema-filter-end: saturate(1) contrast(1.035) brightness(1.065);
}
@media (max-width: 760px) {
  .reader-asm .reader-scene {
    padding: 14px 0 !important;
    --cinema-duration: 38s;
  }
  .reader-asm .reader-scene img {
    border-radius: 17px !important;
  }
}
@media (max-width: 570px) {
  .reader-asm .reader-scene {
    padding: 10px 0 !important;
  }
  .reader-asm .reader-scene img {
    border-radius: 14px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reader-asm .reader-scene.is-visible img {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

/* Theme-specific masks from the earlier passes had higher specificity. Keep
   the same fade, but make the final boundary rule win in light mode too. */
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 2.2%,
      rgba(0, 0, 0, 0.05) 3.8%,
      rgba(0, 0, 0, 0.2) 6.2%,
      rgba(0, 0, 0, 0.62) 8.8%,
      #000 11.2%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  mask-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 2.2%,
      rgba(0, 0, 0, 0.05) 3.8%,
      rgba(0, 0, 0, 0.2) 6.2%,
      rgba(0, 0, 0, 0.62) 8.8%,
      #000 11.2%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* The blurred backplate must not end on the figure's top row either.  Keep
   this pass image-only; the artwork mask already provides the fade. */
body .reader-asm .reader-scene::before,
html[data-theme="light"] body .reader-asm .reader-scene::before {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Immersive geometry v9: the artwork must meet the atmosphere directly. The
   old vertical scene padding created a ruler-like top edge before the mask
   even began, especially against the light page. */
.reader-asm .reader-scene {
  padding: 0 !important;
}
.reader-asm .reader-scene img {
  display: block !important;
  vertical-align: top !important;
}

/* Immersive balance v7 — final cascade. Ambient color stays behind the frame;
   only a short, readable edge transition remains on the image itself. */
.reader-asm .reader-scene {
  overflow: visible !important;
  background: transparent !important;
  isolation: isolate;
}
.reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -42px -4% -42px !important;
  z-index: 0 !important;
  border: 0 !important;
  border-radius: 34px !important;
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(44px) saturate(0.82) brightness(0.78) !important;
  opacity: 0.18 !important;
  transform: scale(1.06) !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 18%, #000 36%, #000 64%, rgba(0, 0, 0, 0.42) 82%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 18%, #000 36%, #000 64%, rgba(0, 0, 0, 0.42) 82%, transparent 100%) !important;
}
.reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
}
.reader-asm .reader-scene img {
  z-index: 1 !important;
  border-radius: 18px !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  filter: blur(44px) saturate(0.66) brightness(1.06) !important;
  opacity: 0.14 !important;
}
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* Immersive balance v6 — authoritative final cascade. Keep the ambient copy
   behind the artwork and let only a short edge transition soften the frame. */
.reader-asm .reader-scene {
  overflow: visible !important;
  background: transparent !important;
  isolation: isolate;
}
.reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -42px -4% -42px !important;
  z-index: 0 !important;
  border: 0 !important;
  border-radius: 34px !important;
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(44px) saturate(0.82) brightness(0.78) !important;
  opacity: 0.18 !important;
  transform: scale(1.06) !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 18%, #000 36%, #000 64%, rgba(0, 0, 0, 0.42) 82%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 18%, #000 36%, #000 64%, rgba(0, 0, 0, 0.42) 82%, transparent 100%) !important;
}
.reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
}
.reader-asm .reader-scene img {
  z-index: 1 !important;
  border-radius: 18px !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  filter: blur(44px) saturate(0.66) brightness(1.06) !important;
  opacity: 0.14 !important;
}
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.46) 1.5%, rgba(0, 0, 0, 0.86) 3.8%, #000 6.8%, #000 93.2%, rgba(0, 0, 0, 0.86) 96.2%, rgba(0, 0, 0, 0.46) 98.5%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.46) 1.5%, rgba(0, 0, 0, 0.86) 3.8%, #000 6.8%, #000 93.2%, rgba(0, 0, 0, 0.86) 96.2%, rgba(0, 0, 0, 0.46) 98.5%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* Immersive balance v6: keep the atmosphere behind the artwork. The earlier
   light-mode veil sat above the first quarter of the image, which made the
   blend feel like a wash instead of an extension of the scene. */
.reader-asm .reader-scene {
  overflow: visible !important;
  background: transparent !important;
  isolation: isolate;
}
.reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -42px -4% -42px !important;
  z-index: 0 !important;
  border: 0 !important;
  border-radius: 34px !important;
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(44px) saturate(0.82) brightness(0.78) !important;
  opacity: 0.18 !important;
  transform: scale(1.06) !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.42) 18%,
    #000 36%,
    #000 64%,
    rgba(0, 0, 0, 0.42) 82%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.42) 18%,
    #000 36%,
    #000 64%,
    rgba(0, 0, 0, 0.42) 82%,
    transparent 100%
  ) !important;
}
.reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
}
.reader-asm .reader-scene img {
  z-index: 1 !important;
  border-radius: 18px !important;
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.42) 1.5%,
      rgba(0, 0, 0, 0.84) 3.8%,
      #000 6.2%,
      #000 93.8%,
      rgba(0, 0, 0, 0.84) 96.2%,
      rgba(0, 0, 0, 0.42) 98.5%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.42) 1.5%,
      rgba(0, 0, 0, 0.84) 3.8%,
      #000 6.2%,
      #000 93.8%,
      rgba(0, 0, 0, 0.84) 96.2%,
      rgba(0, 0, 0, 0.42) 98.5%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.42) 1.5%,
      rgba(0, 0, 0, 0.84) 3.8%,
      #000 6.2%,
      #000 93.8%,
      rgba(0, 0, 0, 0.84) 96.2%,
      rgba(0, 0, 0, 0.42) 98.5%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.42) 1.5%,
      rgba(0, 0, 0, 0.84) 3.8%,
      #000 6.2%,
      #000 93.8%,
      rgba(0, 0, 0, 0.84) 96.2%,
      rgba(0, 0, 0, 0.42) 98.5%,
      transparent 100%
    ) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  filter: blur(44px) saturate(0.66) brightness(1.06) !important;
  opacity: 0.14 !important;
}
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.46) 1.5%,
      rgba(0, 0, 0, 0.86) 3.8%,
      #000 6.8%,
      #000 93.2%,
      rgba(0, 0, 0, 0.86) 96.2%,
      rgba(0, 0, 0, 0.46) 98.5%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.42) 1.5%,
      rgba(0, 0, 0, 0.84) 3.8%,
      #000 6.2%,
      #000 93.8%,
      rgba(0, 0, 0, 0.84) 96.2%,
      rgba(0, 0, 0, 0.42) 98.5%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.46) 1.5%,
      rgba(0, 0, 0, 0.86) 3.8%,
      #000 6.8%,
      #000 93.2%,
      rgba(0, 0, 0, 0.86) 96.2%,
      rgba(0, 0, 0, 0.46) 98.5%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.42) 1.5%,
      rgba(0, 0, 0, 0.84) 3.8%,
      #000 6.2%,
      #000 93.8%,
      rgba(0, 0, 0, 0.84) 96.2%,
      rgba(0, 0, 0, 0.42) 98.5%,
      transparent 100%
    ) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* Root seam fix: the earlier light-mode paper bridge and the paper-tinted
   overlay were still winning the cascade. They created a flat ceiling before
   the artwork, which is why the seam survived every cache refresh. The scene
   now owns its own atmosphere; no pseudo-element paints a page-colored edge. */
.reader-asm .reader-scene {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -100px -6% -100px !important;
  z-index: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 44px !important;
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(56px) saturate(0.82) brightness(0.78) !important;
  opacity: 0.5 !important;
  transform: scale(1.08) !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.72) 25%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.72) 75%,
    rgba(0, 0, 0, 0.2) 90%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.72) 25%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.72) 75%,
    rgba(0, 0, 0, 0.2) 90%,
    transparent 100%
  ) !important;
}
.reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(56px) saturate(0.72) brightness(1.12) !important;
  opacity: 0.28 !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.72) 25%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.72) 75%,
    rgba(0, 0, 0, 0.2) 90%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.72) 25%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.72) 75%,
    rgba(0, 0, 0, 0.2) 90%,
    transparent 100%
  ) !important;
}
html[data-theme="light"] .reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
  background: none !important;
}
/* The edge veil is deliberately outside the frame. It covers the image's
   first rows, but its own top edge sits in the page and is already blurred by
   the time it reaches the artwork—so there is no second horizontal boundary. */
body .reader-asm .reader-scene::after,
html[data-theme="light"] body .reader-asm .reader-scene::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: -84px !important;
  right: -8% !important;
  bottom: auto !important;
  left: -8% !important;
  z-index: 2 !important;
  height: 210px !important;
  border: 0 !important;
  border-radius: 54px !important;
  background: linear-gradient(
    180deg,
    var(--paper) 0%,
    var(--paper) 54%,
    color-mix(in srgb, var(--paper) 72%, transparent) 72%,
    transparent 100%
  ) !important;
  box-shadow: none !important;
  filter: blur(18px) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* Final light-mode ceiling: a blurred copy of the scene dissolves the last
   image row into paper, without painting a rectangular strip. */
html[data-theme="light"] .reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: -72px -6% auto;
  z-index: 0;
  height: 166px;
  border: 0 !important;
  border-radius: 44px;
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(54px) saturate(0.72) brightness(1.08) !important;
  opacity: 0.24 !important;
  transform: scale(1.06) !important;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 44%, rgba(0, 0, 0, 0.22) 78%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 44%, rgba(0, 0, 0, 0.22) 78%, transparent 100%) !important;
}

/* Keep the reader chrome from drawing a ruler above immersive scenes. The
   progress state stays available as a whisper of color, but the sticky edge
   should disappear into the page instead of competing with the artwork. */
.reader-asm .reader-topbar {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
.reader-asm .reader-progress-line {
  height: 1px !important;
  background: transparent !important;
}
.reader-asm .reader-progress-line > span {
  height: 1px;
  opacity: 0.28;
  background: linear-gradient(90deg, rgba(106, 168, 255, 0.72), rgba(106, 168, 255, 0.18)) !important;
}
html[data-theme="light"] .reader-asm .reader-progress-line > span {
  background: linear-gradient(90deg, rgba(71, 125, 215, 0.48), rgba(71, 125, 215, 0.1)) !important;
}

/* Light mode needs a soft ceiling behind the art. Without it, the first
   semi-transparent image row contrasts with the paper and reads as a rule. */
html[data-theme="light"] .reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: -72px -6% auto;
  z-index: 0;
  height: 166px;
  border: 0 !important;
  border-radius: 44px;
  background: var(--scene-image) center / cover no-repeat;
  filter: blur(54px) saturate(0.72) brightness(1.08);
  opacity: 0.24;
  transform: scale(1.06);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 44%, rgba(0, 0, 0, 0.22) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 44%, rgba(0, 0, 0, 0.22) 78%, transparent 100%);
}
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 2.2%,
      rgba(0, 0, 0, 0.05) 3.8%,
      rgba(0, 0, 0, 0.2) 6.2%,
      rgba(0, 0, 0, 0.62) 8.8%,
      #000 11.2%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  mask-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 2.2%,
      rgba(0, 0, 0, 0.05) 3.8%,
      rgba(0, 0, 0, 0.2) 6.2%,
      rgba(0, 0, 0, 0.62) 8.8%,
      #000 11.2%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}
.reader-asm .reader-scene::before {
  inset: -18% -7%;
  background: var(--scene-image) center / cover no-repeat;
  filter: blur(58px) saturate(0.78) brightness(0.74);
  opacity: 0.16;
  transform: scale(1.08);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.reader-asm .reader-scene::after {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(2, 5, 10, 0.14) 100%);
  opacity: 0.58;
}
.reader-asm .reader-scene-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-theme="light"] .reader-asm .reader-scene {
  background: transparent;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  filter: blur(62px) saturate(0.7) brightness(0.98);
  opacity: 0.13;
}
html[data-theme="light"] .reader-asm .reader-scene::after {
  background: radial-gradient(ellipse at center, transparent 58%, rgba(30, 43, 60, 0.09) 100%);
  opacity: 0.48;
}

/* Let the scene's palette occupy the breathing room, instead of leaving a neutral seam. */
.reader-asm .reader-scene {
  background: radial-gradient(ellipse at center, rgba(var(--scene-tint), 0.14) 0%, transparent 78%);
}
.reader-asm .reader-scene::before {
  inset: -24% -9%;
  filter: blur(72px) saturate(0.82) brightness(0.78);
  opacity: 0.2;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.reader-asm .reader-scene[data-scene-role="hero"] {
  margin-top: clamp(54px, 6vw, 88px);
  padding-top: clamp(26px, 3vw, 42px);
}
.reader-asm .reader-scene[data-scene-role="reveal"],
.reader-asm .reader-scene[data-scene-role="outro"] {
  margin-top: clamp(72px, 8vw, 112px);
  margin-bottom: clamp(72px, 8vw, 112px);
}
html[data-theme="light"] .reader-asm .reader-scene {
  background: transparent;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  opacity: 0;
}
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

/* Light paper needs an atmospheric bridge, not a rectangular wash. Keep the
   bridge close to the artwork so the page changes tone gradually. */
html[data-theme="light"] .reader-asm .reader-scene::before {
  inset: -8% -4%;
  filter: blur(88px) saturate(1.1) brightness(1.12);
  opacity: 0.1;
  -webkit-mask-image: radial-gradient(
    ellipse 96% 94% at 50% 52%,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.28) 58%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 96% 94% at 50% 52%,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.28) 58%,
    transparent 100%
  );
}
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.05) 3%,
      rgba(0, 0, 0, 0.25) 7%,
      rgba(0, 0, 0, 0.72) 11%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, 0.72) 89%,
      rgba(0, 0, 0, 0.25) 93%,
      rgba(0, 0, 0, 0.05) 97%,
      transparent 100%
    ),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 2.5%, #000 5.5%, #000 94.5%, rgba(0, 0, 0, 0.18) 97.5%, transparent 100%) !important;
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.05) 3%,
      rgba(0, 0, 0, 0.25) 7%,
      rgba(0, 0, 0, 0.72) 11%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, 0.72) 89%,
      rgba(0, 0, 0, 0.25) 93%,
      rgba(0, 0, 0, 0.05) 97%,
      transparent 100%
    ),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 2.5%, #000 5.5%, #000 94.5%, rgba(0, 0, 0, 0.18) 97.5%, transparent 100%) !important;
  mask-composite: intersect;
}

/* Let the final image pixels dissolve into the page beyond the stage box. */
.reader-asm .reader-scene::after {
  inset: auto 0 -52px;
  z-index: 3;
  height: 112px;
  border-radius: 0 0 clamp(26px, 3.2vw, 46px) clamp(26px, 3.2vw, 46px);
  border: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--paper) 76%, transparent) 68%,
    var(--paper) 100%
  );
  opacity: 1;
}
html[data-theme="light"] .reader-asm .reader-scene {
  background: transparent;
}
html[data-theme="light"] .reader-asm {
  --scene-page: rgb(242, 244, 247);
}
html[data-theme="light"] .reader-asm .reader-scene::after {
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--scene-page) 76%, transparent) 68%,
    var(--scene-page) 100%
  ) !important;
  opacity: 1;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  display: block;
  inset: -70px 0 auto;
  z-index: 2;
  height: 140px;
  border-radius: 0 0 clamp(34px, 4vw, 58px) clamp(34px, 4vw, 58px);
  background: linear-gradient(
    180deg,
    var(--scene-page) 0%,
    color-mix(in srgb, var(--scene-page) 72%, transparent) 52%,
    color-mix(in srgb, var(--scene-page) 20%, transparent) 78%,
    transparent 100%
  );
  filter: none;
  opacity: 1;
  transform: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* A quiet radius at the artwork edge keeps the wide frame from feeling cut
   with a ruler, while the extended paper fade hides the element boundary. */
.reader-asm .reader-scene img {
  border-radius: 20px !important;
  backface-visibility: hidden;
}
.reader-asm .reader-scene {
  --scene-motion-duration: 32s;
  --scene-scale-start: 1.038;
  --scene-scale-end: 1.07;
  --scene-pan-start-x: -0.18%;
  --scene-pan-start-y: 0.08%;
  --scene-pan-end-x: 0.22%;
  --scene-pan-end-y: -0.08%;
  --scene-filter-start: saturate(0.96) contrast(1.025) brightness(1);
  --scene-filter-end: saturate(1.02) contrast(1.04) brightness(1.045);
}
.reader-asm .reader-scene[data-scene-kind="ceremony"] {
  --scene-motion-duration: 34s;
  --scene-scale-end: 1.075;
  --scene-pan-start-x: -0.24%;
  --scene-pan-end-x: 0.28%;
}
.reader-asm .reader-scene[data-scene-kind="spore"] {
  --scene-motion-duration: 27s;
  --scene-scale-end: 1.065;
  --scene-pan-start-x: 0.2%;
  --scene-pan-end-x: -0.24%;
  --scene-pan-start-y: -0.08%;
  --scene-pan-end-y: 0.12%;
}
.reader-asm .reader-scene[data-scene-kind="home"] {
  --scene-motion-duration: 38s;
  --scene-scale-end: 1.06;
  --scene-pan-start-x: -0.14%;
  --scene-pan-end-x: 0.16%;
  --scene-pan-start-y: 0.1%;
  --scene-pan-end-y: -0.08%;
}
.reader-asm .reader-scene.is-visible img {
  animation:
    asm-cinematic-drift var(--scene-motion-duration) cubic-bezier(0.42, 0, 0.18, 1) infinite alternate,
    asm-cinematic-grade 16s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes asm-cinematic-drift {
  from {
    transform: scale(var(--scene-scale-start)) translate3d(var(--scene-pan-start-x), var(--scene-pan-start-y), 0);
  }
  to {
    transform: scale(var(--scene-scale-end)) translate3d(var(--scene-pan-end-x), var(--scene-pan-end-y), 0);
  }
}
@keyframes asm-cinematic-grade {
  from { filter: var(--scene-filter-start); }
  to { filter: var(--scene-filter-end); }
}
html[data-theme="light"] .reader-asm .reader-scene {
  --scene-filter-start: saturate(0.94) contrast(1.01) brightness(1.035);
  --scene-filter-end: saturate(1) contrast(1.03) brightness(1.055);
}
@media (max-width: 760px) {
  .reader-asm .reader-scene {
    --scene-motion-duration: 42s;
    --scene-scale-start: 1.03;
    --scene-scale-end: 1.055;
    --scene-pan-start-x: -0.08%;
    --scene-pan-start-y: 0.04%;
    --scene-pan-end-x: 0.1%;
    --scene-pan-end-y: -0.04%;
    --scene-filter-end: saturate(0.99) contrast(1.025) brightness(1.045);
  }
}
@media (prefers-reduced-motion: reduce) {
  .reader-asm .reader-scene.is-visible img {
    animation: none !important;
    will-change: auto;
  }
}

/* The ambient image and edge fades already carry the scene tone; keep the
   figure itself transparent so its box can never become a horizontal rule. */
.reader-asm .reader-scene {
  background: transparent;
}

/* Scene boundary v3: one authoritative composition pass at the end of the
   cascade. The image fades itself; no pseudo-element paints a paper band. */
.reader-asm .reader-scene {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  padding: clamp(18px, 2.6vw, 34px) 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  isolation: isolate;
}
.reader-asm .reader-scene::before,
.reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
}
.reader-asm .reader-scene img {
  display: block;
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: cover;
  border: 0 !important;
  border-radius: clamp(18px, 2.4vw, 30px) !important;
  box-shadow: none !important;
  -webkit-mask-image:
    linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 1.4%,
      rgba(0, 0, 0, 0.78) 4.2%,
      #000 6.6%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  mask-image:
    linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 1.4%,
      rgba(0, 0, 0, 0.78) 4.2%,
      #000 6.6%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
  filter: saturate(0.98) contrast(1.025) brightness(1.01);
  transform: scale(1.012) translate3d(0, 0, 0);
  transition: none !important;
  will-change: transform, filter;
}
.reader-asm .reader-scene {
  --cinema-duration: 30s;
  --cinema-start-x: -0.16%;
  --cinema-start-y: 0.04%;
  --cinema-end-x: 0.2%;
  --cinema-end-y: -0.08%;
  --cinema-filter-start: saturate(0.98) contrast(1.025) brightness(1.01);
  --cinema-filter-end: saturate(1.035) contrast(1.05) brightness(1.045);
}
.reader-asm .reader-scene[data-scene-kind="spore"] {
  --cinema-duration: 26s;
  --cinema-start-x: 0.18%;
  --cinema-start-y: -0.06%;
  --cinema-end-x: -0.2%;
  --cinema-end-y: 0.12%;
}
.reader-asm .reader-scene[data-scene-kind="home"] {
  --cinema-duration: 36s;
  --cinema-start-x: -0.12%;
  --cinema-start-y: 0.08%;
  --cinema-end-x: 0.16%;
  --cinema-end-y: -0.06%;
}
.reader-asm .reader-scene.is-visible img {
  animation:
    asm-cinematic-breathe-v3 var(--cinema-duration) cubic-bezier(0.42, 0, 0.18, 1) infinite alternate,
    asm-cinematic-grade-v3 17s ease-in-out infinite alternate;
}
@keyframes asm-cinematic-breathe-v3 {
  from { transform: scale(1.012) translate3d(var(--cinema-start-x), var(--cinema-start-y), 0); }
  to { transform: scale(1.052) translate3d(var(--cinema-end-x), var(--cinema-end-y), 0); }
}
@keyframes asm-cinematic-grade-v3 {
  from { filter: var(--cinema-filter-start); }
  to { filter: var(--cinema-filter-end); }
}
html[data-theme="light"] .reader-asm .reader-scene {
  --cinema-filter-start: saturate(0.94) contrast(1.01) brightness(1.04);
  --cinema-filter-end: saturate(1) contrast(1.035) brightness(1.065);
}
@media (max-width: 760px) {
  .reader-asm .reader-scene {
    padding: 14px 0 !important;
    --cinema-duration: 38s;
  }
  .reader-asm .reader-scene img { border-radius: 17px !important; }
}
@media (max-width: 570px) {
  .reader-asm .reader-scene { padding: 10px 0 !important; }
  .reader-asm .reader-scene img { border-radius: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .reader-asm .reader-scene.is-visible img {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 1.4%,
      rgba(0, 0, 0, 0.78) 4.2%,
      #000 6.6%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  mask-image:
    linear-gradient(180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.2) 1.4%,
      rgba(0, 0, 0, 0.78) 4.2%,
      #000 6.6%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* Final light-mode seam fix: the old paper-colored bridge created a flat ceiling. */
html[data-theme="light"] .reader-asm .reader-scene::before,
html[data-theme="light"] .reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* The top dissolve sits over the first image rows, so their edge cannot turn
   into a ruler against the light paper. It ends at zero opacity, never at a
   second color band. */
html[data-theme="light"] .reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: -38px -2% auto;
  z-index: 3;
  height: 160px;
  border: 0 !important;
  border-radius: 0 0 clamp(34px, 4vw, 58px) clamp(34px, 4vw, 58px);
  background: linear-gradient(
    180deg,
    var(--scene-page) 0%,
    var(--scene-page) 22%,
    color-mix(in srgb, var(--scene-page) 78%, transparent) 52%,
    color-mix(in srgb, var(--scene-page) 34%, transparent) 76%,
    transparent 100%
  ) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: none;
}

html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 2.2%,
      rgba(0, 0, 0, 0.05) 3.8%,
      rgba(0, 0, 0, 0.22) 6.2%,
      rgba(0, 0, 0, 0.62) 8.8%,
      #000 10.4%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
  mask-image:
    linear-gradient(180deg,
      transparent 0%,
      transparent 2.2%,
      rgba(0, 0, 0, 0.05) 3.8%,
      rgba(0, 0, 0, 0.22) 6.2%,
      rgba(0, 0, 0, 0.62) 8.8%,
      #000 10.4%,
      #000 93.4%,
      rgba(0, 0, 0, 0.78) 95.8%,
      rgba(0, 0, 0, 0.2) 98.6%,
      transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 1.3%,
      rgba(0, 0, 0, 0.8) 3.6%,
      #000 5.4%,
      #000 94.6%,
      rgba(0, 0, 0, 0.8) 96.4%,
      rgba(0, 0, 0, 0.22) 98.7%,
      transparent 100%) !important;
}

/* Let the light reader toolbar dissolve into the paper instead of ending on a line. */
html[data-theme="light"] .reader-asm .reader-topbar {
  border: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(247, 250, 254, 0.88) 0%,
    rgba(247, 250, 254, 0.78) 48%,
    rgba(247, 250, 254, 0.32) 78%,
    rgba(247, 250, 254, 0) 100%
  ) !important;
  box-shadow: none !important;
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
}
html[data-theme="light"] .reader-asm .reader-progress-line {
  display: none !important;
}

/* Immersive seam repair: use a blurred copy of the artwork as the atmosphere
   behind its transparent edge. This keeps the transition organic in both
   themes instead of creating a flat paper/darkness ceiling. */
.reader-asm .reader-scene {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}
.reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: -84px -5% -84px;
  z-index: 0;
  border: 0 !important;
  border-radius: 42px;
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(48px) saturate(0.82) brightness(0.78) !important;
  opacity: 0.48 !important;
  transform: scale(1.08) !important;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 9%,
    rgba(0, 0, 0, 0.72) 24%,
    #000 43%,
    #000 57%,
    rgba(0, 0, 0, 0.72) 76%,
    rgba(0, 0, 0, 0.2) 91%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 9%,
    rgba(0, 0, 0, 0.72) 24%,
    #000 43%,
    #000 57%,
    rgba(0, 0, 0, 0.72) 76%,
    rgba(0, 0, 0, 0.2) 91%,
    transparent 100%
  ) !important;
}
.reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
}
.reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.26) 3%,
      rgba(0, 0, 0, 0.72) 8%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, 0.72) 92%,
      rgba(0, 0, 0, 0.26) 97%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.54) 4%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, 0.54) 96%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      rgba(0, 0, 0, 0.26) 3%,
      rgba(0, 0, 0, 0.72) 8%,
      #000 14%,
      #000 86%,
      rgba(0, 0, 0, 0.72) 92%,
      rgba(0, 0, 0, 0.26) 97%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.54) 4%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, 0.54) 96%,
      transparent 100%
    ) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  filter: blur(52px) saturate(0.72) brightness(1.12) !important;
  opacity: 0.28 !important;
}

/* The sticky reader chrome must not become a second hard edge when a scene
   passes underneath it. It remains legible, but dissolves like frosted glass. */
.reader-asm .reader-topbar {
  border: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(8, 10, 18, 0.88) 0%,
    rgba(8, 10, 18, 0.68) 42%,
    rgba(8, 10, 18, 0.24) 78%,
    rgba(8, 10, 18, 0) 100%
  ) !important;
  box-shadow: none !important;
  backdrop-filter: blur(28px) saturate(142%);
  -webkit-backdrop-filter: blur(28px) saturate(142%);
}
.reader-asm .reader-progress-line {
  display: none !important;
}
html[data-theme="light"] .reader-asm .reader-topbar {
  background: linear-gradient(
    180deg,
    rgba(247, 250, 254, 0.84) 0%,
    rgba(247, 250, 254, 0.62) 42%,
    rgba(247, 250, 254, 0.2) 78%,
    rgba(247, 250, 254, 0) 100%
  ) !important;
}

/* Edge atmosphere v5: the lower layer borrows the scene's own colors, while
   this feathered veil crosses the boundary just enough to hide its ruler-line
   start. The center of the artwork remains untouched. */
.reader-asm .reader-scene::before {
  inset: -100px -6% -100px !important;
  filter: blur(56px) saturate(0.82) brightness(0.78) !important;
  opacity: 0.5 !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.72) 25%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.72) 75%,
    rgba(0, 0, 0, 0.2) 90%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.72) 25%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.72) 75%,
    rgba(0, 0, 0, 0.2) 90%,
    transparent 100%
  ) !important;
}
.reader-asm .reader-scene::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: -30px -4%;
  z-index: 2;
  border: 0 !important;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--paper) 84%, transparent) 0%,
    color-mix(in srgb, var(--paper) 52%, transparent) 9%,
    color-mix(in srgb, var(--paper) 14%, transparent) 18%,
    transparent 25%,
    transparent 75%,
    color-mix(in srgb, var(--paper) 14%, transparent) 82%,
    color-mix(in srgb, var(--paper) 52%, transparent) 91%,
    color-mix(in srgb, var(--paper) 84%, transparent) 100%
  ) !important;
  filter: blur(14px);
  opacity: 0.84;
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none;
}
.reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 7%,
      rgba(0, 0, 0, 0.1) 10%,
      rgba(0, 0, 0, 0.36) 13%,
      #000 17%,
      #000 90%,
      rgba(0, 0, 0, 0.82) 94%,
      rgba(0, 0, 0, 0.3) 97.5%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.54) 4%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, 0.54) 96%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 7%,
      rgba(0, 0, 0, 0.1) 10%,
      rgba(0, 0, 0, 0.36) 13%,
      #000 17%,
      #000 90%,
      rgba(0, 0, 0, 0.82) 94%,
      rgba(0, 0, 0, 0.3) 97.5%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.54) 4%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, 0.54) 96%,
      transparent 100%
    ) !important;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(56px) saturate(0.72) brightness(1.12) !important;
  opacity: 0.28 !important;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.72) 25%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.72) 75%,
    rgba(0, 0, 0, 0.2) 90%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 10%,
    rgba(0, 0, 0, 0.72) 25%,
    #000 42%,
    #000 58%,
    rgba(0, 0, 0, 0.72) 75%,
    rgba(0, 0, 0, 0.2) 90%,
    transparent 100%
  ) !important;
}
html[data-theme="light"] .reader-asm .reader-scene::after {
  opacity: 0.7;
}

/* Light mode had an older, more specific seam rule that disabled the veil.
   Re-enable the same two-layer treatment with an explicit paper haze. */
html[data-theme="light"] .reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
  height: 0 !important;
  inset: auto !important;
  z-index: auto !important;
  border: 0 !important;
  background: none !important;
  filter: none !important;
  opacity: 0 !important;
}
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 8%,
      rgba(0, 0, 0, 0.08) 12%,
      rgba(0, 0, 0, 0.28) 16%,
      rgba(0, 0, 0, 0.62) 20%,
      #000 24%,
      #000 90%,
      rgba(0, 0, 0, 0.82) 94%,
      rgba(0, 0, 0, 0.3) 97.5%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.54) 4%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, 0.54) 96%,
      transparent 100%
    ) !important;
  mask-image:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 8%,
      rgba(0, 0, 0, 0.08) 12%,
      rgba(0, 0, 0, 0.28) 16%,
      rgba(0, 0, 0, 0.62) 20%,
      #000 24%,
      #000 90%,
      rgba(0, 0, 0, 0.82) 94%,
      rgba(0, 0, 0, 0.3) 97.5%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.54) 4%,
      #000 8%,
      #000 92%,
      rgba(0, 0, 0, 0.54) 96%,
      transparent 100%
    ) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* Immersive balance v8: this is intentionally last so the light theme cannot
   restore the old 24% top wash. */
.reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -42px -4% -42px !important;
  z-index: 0 !important;
  border: 0 !important;
  border-radius: 34px !important;
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(44px) saturate(0.82) brightness(0.78) !important;
  opacity: 0.18 !important;
  transform: scale(1.06) !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 18%, #000 36%, #000 64%, rgba(0, 0, 0, 0.42) 82%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 18%, #000 36%, #000 64%, rgba(0, 0, 0, 0.42) 82%, transparent 100%) !important;
}
.reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
}
body .reader-asm .reader-scene::after,
html[data-theme="light"] body .reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
}
.reader-asm .reader-scene img {
  z-index: 1 !important;
  border-radius: 18px !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.42) 1.5%, rgba(0, 0, 0, 0.84) 3.8%, #000 6.2%, #000 93.8%, rgba(0, 0, 0, 0.84) 96.2%, rgba(0, 0, 0, 0.42) 98.5%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  filter: blur(44px) saturate(0.66) brightness(1.06) !important;
  opacity: 0.14 !important;
}
html[data-theme="light"] .reader-asm .reader-scene img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* Immersive geometry v9: the artwork must meet the atmosphere directly. The
   old vertical scene padding created a ruler-like top edge before the mask
   even began, especially against the light page. */
.reader-asm .reader-scene {
  padding: 0 !important;
}
.reader-asm .reader-scene img {
  display: block !important;
  vertical-align: top !important;
}

/* Immersive atmosphere v10: let a soft, color-matched copy of the scene cross
   the top edge. It hides the straight first row without covering the artwork. */
.reader-asm .reader-scene::before {
  inset: -66px -4% -66px !important;
  opacity: 0.2 !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.58) 86%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.58) 86%, transparent 100%) !important;
}
html[data-theme="light"] .reader-asm .reader-scene::before {
  filter: blur(50px) saturate(0.68) brightness(1.06) !important;
  opacity: 0.18 !important;
  inset: -66px -4% -66px !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.58) 86%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.58) 86%, transparent 100%) !important;
}

/* Immersive edge bridge v11: a short, blurred top slice softens the raster
   edge without laying a page-colored veil over the scene. */
body .reader-asm .reader-scene::after,
html[data-theme="light"] body .reader-asm .reader-scene::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: -18px !important;
  right: -4% !important;
  bottom: auto !important;
  left: -4% !important;
  width: auto !important;
  height: 58px !important;
  inset-inline: -4% !important;
  z-index: 2 !important;
  border: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  background: var(--scene-image) center top / 100% auto no-repeat !important;
  filter: blur(18px) saturate(0.78) brightness(1.02) !important;
  opacity: 0.2 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 25%, #000 62%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 25%, #000 62%, transparent 100%) !important;
}
html[data-theme="light"] body .reader-asm .reader-scene::after {
  filter: blur(18px) saturate(0.68) brightness(1.06) !important;
  opacity: 0.24 !important;
}

/* Immersive atmosphere v12: the large backdrop layer was itself producing a
   ruler-line. The narrow top bridge owns this transition now. */
body .reader-asm .reader-scene::before,
html[data-theme="light"] body .reader-asm .reader-scene::before {
  display: none !important;
  content: none !important;
  background: none !important;
  opacity: 0 !important;
}
/* Immersive seam bridge v13: cover only the raster seam with the reader paper,
   then dissolve immediately. The scene itself remains fully visible. */
body .reader-asm .reader-scene::after,
html[data-theme="light"] body .reader-asm .reader-scene::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: -30px !important;
  right: -4% !important;
  bottom: auto !important;
  left: -4% !important;
  width: auto !important;
  height: 66px !important;
  inset-inline: -4% !important;
  z-index: 2 !important;
  border: 0 !important;
  border-radius: 22px 22px 0 0 !important;
  background: linear-gradient(180deg, transparent 0%, transparent 18%, color-mix(in srgb, var(--paper) 48%, transparent) 38%, color-mix(in srgb, var(--paper) 78%, transparent) 58%, transparent 100%) !important;
  filter: blur(8px) !important;
  opacity: 1 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Immersive mask v15: make the light-mode top transition gradual rather than
   letting a steep alpha step read as a horizontal ruler-line. */
html[data-theme="light"] body .reader-asm .reader-scene img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.06) 1.2%, rgba(0, 0, 0, 0.2) 2.6%, rgba(0, 0, 0, 0.45) 4.2%, rgba(0, 0, 0, 0.72) 5.4%, #000 6.6%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.06) 1.2%, rgba(0, 0, 0, 0.2) 2.6%, rgba(0, 0, 0, 0.45) 4.2%, rgba(0, 0, 0, 0.72) 5.4%, #000 6.6%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%), linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* Immersive seam fix: do not paint a second strip across the artwork.  The
   bridge was masking the raster edge by introducing its own straight edge.
   The image mask is now the only edge treatment in both themes. */
body .reader-asm .reader-scene::after,
html[data-theme="light"] body .reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  filter: none !important;
}

/* Immersive edge v16: a blurred copy of the scene lives behind the artwork,
   while the artwork uses a soft elliptical aperture.  This avoids a uniform
   horizontal alpha stop, so the page and image meet like atmosphere instead
   of like a framed rectangle. */
body .reader-asm .reader-scene::before,
html[data-theme="light"] body .reader-asm .reader-scene::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: -58px -4% -58px !important;
  z-index: 0 !important;
  border: 0 !important;
  border-radius: 40px !important;
  background: var(--scene-image) center / cover no-repeat !important;
  filter: blur(42px) saturate(0.82) brightness(0.78) !important;
  opacity: 0.2 !important;
  transform: scale(1.06) !important;
  pointer-events: none !important;
  -webkit-mask-image: radial-gradient(ellipse 112% 122% at 50% 42%, rgba(0, 0, 0, 0.06) 22%, rgba(0, 0, 0, 0.3) 48%, rgba(0, 0, 0, 0.78) 70%, transparent 100%) !important;
  mask-image: radial-gradient(ellipse 112% 122% at 50% 42%, rgba(0, 0, 0, 0.06) 22%, rgba(0, 0, 0, 0.3) 48%, rgba(0, 0, 0, 0.78) 70%, transparent 100%) !important;
}
html[data-theme="light"] body .reader-asm .reader-scene::before {
  filter: blur(42px) saturate(0.7) brightness(1.04) !important;
  opacity: 0.23 !important;
}
body .reader-asm .reader-scene img,
html[data-theme="light"] body .reader-asm .reader-scene img {
  -webkit-mask-image:
    radial-gradient(ellipse 112% 122% at 50% 42%, #000 0%, #000 44%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.66) 68%, transparent 82%),
    linear-gradient(180deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.9) 94%, rgba(0, 0, 0, 0.46) 98%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  mask-image:
    radial-gradient(ellipse 112% 122% at 50% 42%, #000 0%, #000 44%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.66) 68%, transparent 82%),
    linear-gradient(180deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.9) 94%, rgba(0, 0, 0, 0.46) 98%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  -webkit-mask-composite: source-in, source-in !important;
  mask-composite: intersect, intersect !important;
}

/* Let the artwork begin inside the breathing room above the figure.  This
   moves the actual raster edge away from the text-to-scene boundary, so the
   feather is complete before the reader can perceive a frame. */
body .reader-asm .reader-scene img,
html[data-theme="light"] body .reader-asm .reader-scene img {
  margin-top: -62px !important;
}

/* A restrained atmospheric overlay softens the actual top raster edge.  It is
   a blurred scene-colored layer, not a paper-colored bar, and it fades in
   before the artwork so no new horizontal boundary is introduced. */
body .reader-asm .reader-scene::after,
html[data-theme="light"] body .reader-asm .reader-scene::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: -86px !important;
  right: -4% !important;
  bottom: auto !important;
  left: -4% !important;
  height: 184px !important;
  z-index: 2 !important;
  border: 0 !important;
  border-radius: 48px 48px 0 0 !important;
  background: var(--scene-image) center top / 100% auto no-repeat !important;
  filter: blur(24px) saturate(0.8) brightness(0.84) !important;
  opacity: 0.34 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 16%, rgba(0, 0, 0, 0.46) 36%, #000 58%, #000 72%, rgba(0, 0, 0, 0.52) 88%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.08) 16%, rgba(0, 0, 0, 0.46) 36%, #000 58%, #000 72%, rgba(0, 0, 0, 0.52) 88%, transparent 100%) !important;
}
html[data-theme="light"] body .reader-asm .reader-scene::after {
  filter: blur(24px) saturate(0.7) brightness(1.06) !important;
  opacity: 0.3 !important;
}

/* Keep the real raster start safely inside the preceding atmosphere. */
body .reader-asm .reader-scene img,
html[data-theme="light"] body .reader-asm .reader-scene img {
  margin-top: -118px !important;
}

/* Final edge treatment: the first visible pixel is transparent and the
   artwork arrives through many small opacity steps.  The atmosphere behind it
   carries the scene during that short entry, so there is no horizontal seam. */
body .reader-asm .reader-scene::after,
html[data-theme="light"] body .reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
}
body .reader-asm .reader-scene img,
html[data-theme="light"] body .reader-asm .reader-scene img {
  margin-top: 0 !important;
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.04) 2%, rgba(0, 0, 0, 0.12) 4%, rgba(0, 0, 0, 0.25) 6%, rgba(0, 0, 0, 0.45) 8%, rgba(0, 0, 0, 0.68) 10%, rgba(0, 0, 0, 0.88) 11.5%, #000 13%, #000 88%, rgba(0, 0, 0, 0.9) 94%, rgba(0, 0, 0, 0.5) 98%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.04) 2%, rgba(0, 0, 0, 0.12) 4%, rgba(0, 0, 0, 0.25) 6%, rgba(0, 0, 0, 0.45) 8%, rgba(0, 0, 0, 0.68) 10%, rgba(0, 0, 0, 0.88) 11.5%, #000 13%, #000 88%, rgba(0, 0, 0, 0.9) 94%, rgba(0, 0, 0, 0.5) 98%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* The top of the image needs to enter the page on a curve, not on a flat
   6%-high strip.  Lowering the aperture centre keeps the scene readable while
   letting its centre arrive before its corners. */
body .reader-asm .reader-scene img,
html[data-theme="light"] body .reader-asm .reader-scene img {
  -webkit-mask-image:
    radial-gradient(ellipse 112% 100% at 50% 72%, #000 0%, #000 38%, rgba(0, 0, 0, 0.82) 50%, rgba(0, 0, 0, 0.58) 64%, rgba(0, 0, 0, 0.34) 74%, rgba(0, 0, 0, 0.12) 86%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.9) 94%, rgba(0, 0, 0, 0.46) 98%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
  mask-image:
    radial-gradient(ellipse 112% 100% at 50% 72%, #000 0%, #000 38%, rgba(0, 0, 0, 0.82) 50%, rgba(0, 0, 0, 0.58) 64%, rgba(0, 0, 0, 0.34) 74%, rgba(0, 0, 0, 0.12) 86%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 88%, rgba(0, 0, 0, 0.9) 94%, rgba(0, 0, 0, 0.46) 98%, transparent 100%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.34) 1%, rgba(0, 0, 0, 0.76) 2.6%, #000 4.8%, #000 95.2%, rgba(0, 0, 0, 0.76) 97.4%, rgba(0, 0, 0, 0.34) 99%, transparent 100%) !important;
}

/* FINAL IMMERSIVE SEAM OVERRIDE
   The edge must be owned by the image only.  No pseudo-element is allowed to
   end at the same horizontal coordinate as the raster. */
body .reader-asm .reader-scene::before,
body .reader-asm .reader-scene::after,
html[data-theme="light"] body .reader-asm .reader-scene::before,
html[data-theme="light"] body .reader-asm .reader-scene::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 0 !important;
  filter: none !important;
}
body .reader-asm .reader-scene img,
html[data-theme="light"] body .reader-asm .reader-scene img {
  margin-top: 0 !important;
  position: relative !important;
  top: -96px !important;
  margin-bottom: -96px !important;
  opacity: 1 !important;
  transform-origin: center top !important;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 1.5%, rgba(0, 0, 0, 0.02) 3%, rgba(0, 0, 0, 0.08) 5%, rgba(0, 0, 0, 0.18) 7%, rgba(0, 0, 0, 0.34) 8.5%, rgba(0, 0, 0, 0.56) 10%, rgba(0, 0, 0, 0.78) 11.5%, #000 13%, #000 88%, rgba(0, 0, 0, 0.9) 94%, rgba(0, 0, 0, 0.5) 98%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, transparent 0%, transparent 1.5%, rgba(0, 0, 0, 0.02) 3%, rgba(0, 0, 0, 0.08) 5%, rgba(0, 0, 0, 0.18) 7%, rgba(0, 0, 0, 0.34) 8.5%, rgba(0, 0, 0, 0.56) 10%, rgba(0, 0, 0, 0.78) 11.5%, #000 13%, #000 88%, rgba(0, 0, 0, 0.9) 94%, rgba(0, 0, 0, 0.5) 98%, transparent 100%) !important;
  -webkit-mask-composite: source-over !important;
  mask-composite: add !important;
}

/* Reader chrome motion: the toolbar follows the reader's direction while the
   progress line remains available as a quiet orientation cue. */
.reader-shell .reader-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 20 !important;
  transform: translateY(0) !important;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 260ms ease !important;
}
.reader-shell.reader-chrome-hidden .reader-topbar {
  transform: translateY(-105%) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.reader-shell .reader-progress-line {
  display: block !important;
  position: sticky !important;
  top: 72px !important;
  z-index: 19 !important;
  height: 2px !important;
  background: rgba(163, 178, 211, 0.14) !important;
  transition: top 360ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.reader-shell .reader-progress-line > span {
  display: block !important;
  height: 2px !important;
  opacity: 0.82 !important;
  background: linear-gradient(90deg, #6ea9ff, #9a85ef 62%, #dca66c) !important;
}
.reader-shell.reader-chrome-hidden .reader-progress-line {
  top: 0 !important;
}
html[data-theme="light"] body .reader-shell.reader-asm .reader-progress-line {
  display: block !important;
  background: rgba(32, 61, 100, 0.12) !important;
}
html[data-theme="light"] body .reader-shell.reader-asm .reader-progress-line > span {
  display: block !important;
  background: linear-gradient(90deg, #477dd7, #7a68c4) !important;
}
@media (prefers-reduced-motion: reduce) {
  .reader-shell .reader-topbar,
  .reader-shell .reader-progress-line { transition: none !important; }
}

/* Optional chapter listening: reading stays primary and sound is always opt-in. */
.reader-audio-top-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(173, 192, 227, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.045);
  color: #cbd6e8;
  font-size: 10px;
  font-weight: 700;
  transition: transform 420ms var(--ease-premium), color 420ms var(--ease-premium), border-color 420ms var(--ease-premium), background 420ms var(--ease-premium), box-shadow 420ms var(--ease-premium);
}
.reader-audio-top-button:hover {
  border-color: rgba(106, 168, 255, 0.48);
  background: rgba(106, 168, 255, 0.1);
  color: #edf4ff;
  box-shadow: 0 8px 22px rgba(42, 81, 154, 0.18);
  transform: translateY(-1px);
}
.reader-audio-top-icon {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
}
.reader-audio-top-icon::before {
  position: absolute;
  top: 4px;
  left: 1px;
  width: 4px;
  height: 5px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}
.reader-audio-top-icon::after {
  position: absolute;
  top: 2px;
  left: 4px;
  width: 7px;
  height: 8px;
  border: 1px solid currentColor;
  border-left: 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-radius: 0 50% 50% 0;
  content: "";
}
.reader-audio {
  margin: 0 0 48px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(163, 178, 211, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.042);
  box-shadow: 0 14px 36px rgba(3, 6, 13, 0.12);
}
.reader-audio-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reader-audio-play {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border: 1px solid rgba(106, 168, 255, 0.38);
  border-radius: 50%;
  background: rgba(106, 168, 255, 0.11);
  color: #a8caff;
  transition: transform 300ms var(--ease-premium), background 300ms var(--ease-premium), border-color 300ms var(--ease-premium);
}
.reader-audio-play:hover {
  border-color: rgba(106, 168, 255, 0.72);
  background: rgba(106, 168, 255, 0.2);
  transform: scale(1.04);
}
.reader-audio-play:disabled { cursor: not-allowed; opacity: 0.45; transform: none; }
.reader-audio-play-icon {
  position: relative;
  display: block;
  width: 14px;
  height: 16px;
}
.reader-audio-play-icon::before {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid currentColor;
  content: "";
}
.reader-audio-play.is-playing .reader-audio-play-icon::before {
  top: 2px;
  left: 2px;
  width: 11px;
  height: 12px;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 8px, currentColor 8px 11px);
}
.reader-audio-copy { display: grid; min-width: 0; gap: 3px; }
.reader-audio-kicker {
  color: #83b5ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.reader-audio-copy strong {
  overflow: hidden;
  color: #e3eaf6;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader-audio-copy > span:last-child { color: var(--muted); font-size: 10px; line-height: 1.4; }
.reader-audio-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
}
.reader-audio input[type="range"] { width: 100%; accent-color: #82b4ff; cursor: pointer; }
.reader-audio input[type="range"]:disabled { cursor: default; opacity: 0.45; }
.reader-audio-time { display: flex; min-width: 68px; justify-content: space-between; gap: 5px; color: var(--muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.reader-audio-volume { display: inline-flex; align-items: center; gap: 6px; width: 82px; }
.reader-audio-volume-icon { position: relative; display: block; width: 13px; height: 12px; color: var(--muted); }
.reader-audio-volume-icon::before { position: absolute; top: 4px; left: 0; width: 4px; height: 5px; border-radius: 1px; background: currentColor; content: ""; }
.reader-audio-volume-icon::after { position: absolute; top: 2px; left: 3px; width: 8px; height: 8px; border: 1px solid currentColor; border-left: 0; border-top-color: transparent; border-bottom-color: transparent; border-radius: 0 50% 50% 0; content: ""; }
.reader-audio audio { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
html[data-theme="light"] .reader-audio-top-button {
  border-color: rgba(32, 61, 100, 0.16);
  background: rgba(255, 255, 255, 0.76);
  color: #52647f;
}
html[data-theme="light"] .reader-audio-top-button:hover { border-color: rgba(71, 125, 215, 0.38); background: rgba(71, 125, 215, 0.09); color: #244e96; box-shadow: 0 8px 22px rgba(39, 63, 99, 0.12); }
html[data-theme="light"] .reader-audio { border-color: rgba(32, 61, 100, 0.14); background: rgba(255, 255, 255, 0.68); box-shadow: 0 14px 36px rgba(39, 63, 99, 0.1); }
html[data-theme="light"] .reader-audio-play { border-color: rgba(71, 125, 215, 0.34); background: rgba(71, 125, 215, 0.08); color: #3f70c6; }
html[data-theme="light"] .reader-audio-kicker { color: #477dd7; }
html[data-theme="light"] .reader-audio-copy strong { color: #243653; }
@media (max-width: 570px) {
  .reader-audio-top-button { width: 36px; min-width: 36px; justify-content: center; padding: 0; }
  .reader-audio-top-button > span:last-child { display: none; }
  .reader-audio { margin-bottom: 38px; padding: 13px 13px 11px; border-radius: 17px; }
  .reader-audio-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .reader-audio-seek { grid-column: 1 / -1; }
  .reader-audio-volume { width: 76px; }
}

/* Fictionora listening layer: a quiet scene companion, not a generic media widget. */
.reader-audio-top-button {
  min-height: 34px;
  padding: 0 10px;
  border-color: rgba(120, 173, 255, 0.2);
  border-radius: 999px;
  background: rgba(94, 157, 255, 0.06);
  color: #aebfda;
  transition: color 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium), box-shadow 360ms var(--ease-premium), transform 360ms var(--ease-premium);
}
.reader-audio-top-button:hover {
  border-color: rgba(134, 188, 255, 0.44);
  background: rgba(94, 157, 255, 0.12);
  color: #edf4ff;
  box-shadow: 0 8px 24px rgba(42, 86, 166, 0.2);
  transform: translateY(-1px);
}
.reader-audio {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  align-items: center;
  gap: 22px;
  min-height: 72px;
  margin: 0 0 44px;
  padding: 11px 15px 11px 14px;
  overflow: hidden;
  border: 1px solid rgba(148, 169, 207, 0.13);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 50%, rgba(94, 157, 255, 0.11), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(154, 130, 255, 0.08), transparent 36%),
    linear-gradient(112deg, rgba(22, 35, 61, 0.76), rgba(14, 17, 29, 0.9) 58%, rgba(19, 18, 35, 0.84));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.reader-audio::before {
  position: absolute;
  z-index: 0;
  inset: -70%;
  background:
    radial-gradient(circle at 25% 50%, rgba(104, 172, 255, 0.13), transparent 20%),
    radial-gradient(circle at 85% 20%, rgba(154, 130, 255, 0.1), transparent 22%);
  content: "";
  filter: blur(22px);
  opacity: 0.75;
  pointer-events: none;
}
.reader-audio-main,
.reader-audio-controls { position: relative; z-index: 1; }
.reader-audio-main { gap: 11px; }
.reader-audio-play {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid rgba(137, 188, 255, 0.34);
  background: linear-gradient(145deg, rgba(117, 177, 255, 0.26), rgba(115, 127, 232, 0.12));
  color: #b6d5ff;
  box-shadow: 0 8px 20px rgba(50, 102, 194, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 360ms var(--ease-premium), border-color 360ms var(--ease-premium), background 360ms var(--ease-premium), box-shadow 360ms var(--ease-premium), color 360ms var(--ease-premium);
}
.reader-audio-play:hover {
  border-color: rgba(157, 203, 255, 0.68);
  background: linear-gradient(145deg, rgba(128, 185, 255, 0.38), rgba(126, 137, 239, 0.18));
  box-shadow: 0 10px 24px rgba(50, 102, 194, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px) scale(1.02);
}
.reader-audio-play.is-playing {
  border-color: rgba(177, 213, 255, 0.72);
  background: linear-gradient(145deg, #9ac9ff, #7f8fe9);
  color: #0a1930;
  box-shadow: 0 10px 26px rgba(76, 139, 239, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}
.reader-audio-copy { gap: 2px; }
.reader-audio-kicker { color: #87baff; letter-spacing: 0.17em; }
.reader-audio-copy strong {
  color: #f0f4fc;
  font-size: 13px;
  letter-spacing: -0.02em;
  line-height: 1.16;
}
.reader-audio-copy > span:last-child { color: rgba(189, 204, 226, 0.68); font-size: 10px; line-height: 1.35; }
.reader-audio-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 88px;
  align-items: center;
  gap: 11px;
  margin-top: 0;
}
.reader-audio input[type="range"] {
  appearance: none;
  width: 100%;
  height: 16px;
  margin: 0;
  outline: none;
  background: transparent;
  accent-color: #86baff;
}
.reader-audio input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(133, 187, 255, 0.92) 0 var(--audio-progress, 0%), rgba(255, 255, 255, 0.14) var(--audio-progress, 0%) 100%);
}
.reader-audio input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
.reader-audio input[type="range"]::-moz-range-progress { height: 3px; border-radius: 999px; background: rgba(133, 187, 255, 0.92); }
.reader-audio input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -3.5px;
  border: 2px solid rgba(12, 23, 43, 0.72);
  border-radius: 50%;
  background: #a8ceff;
  box-shadow: 0 0 0 2px rgba(137, 188, 255, 0.12), 0 2px 8px rgba(66, 127, 223, 0.28);
}
.reader-audio input[type="range"]::-moz-range-thumb {
  width: 7px;
  height: 7px;
  border: 2px solid rgba(12, 23, 43, 0.72);
  border-radius: 50%;
  background: #a8ceff;
  box-shadow: 0 0 0 2px rgba(137, 188, 255, 0.12), 0 2px 8px rgba(66, 127, 223, 0.28);
}
.reader-audio input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(126, 177, 255, 0.25), 0 2px 8px rgba(66, 127, 223, 0.28); }
.reader-audio input[type="range"]:disabled { opacity: 0.46; }
.reader-audio-time { min-width: 64px; color: rgba(189, 204, 226, 0.68); font-size: 9px; }
.reader-audio-volume { width: 88px; }
.reader-audio-volume-icon { color: rgba(189, 204, 226, 0.66); }

html[data-theme="light"] .reader-audio-top-button {
  border-color: rgba(71, 125, 215, 0.2);
  background: rgba(71, 125, 215, 0.055);
  color: #5b7090;
}
html[data-theme="light"] .reader-audio-top-button:hover { border-color: rgba(71, 125, 215, 0.4); background: rgba(71, 125, 215, 0.1); color: #315da8; }
html[data-theme="light"] .reader-audio {
  border-color: rgba(71, 106, 157, 0.16);
  background:
    radial-gradient(circle at 0% 50%, rgba(71, 125, 215, 0.12), transparent 34%),
    radial-gradient(circle at 100% 0%, rgba(122, 104, 196, 0.08), transparent 36%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.9), rgba(241, 246, 252, 0.86) 58%, rgba(247, 245, 252, 0.88));
  box-shadow: 0 18px 42px rgba(39, 63, 99, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
html[data-theme="light"] .reader-audio::before { opacity: 0.32; }
html[data-theme="light"] .reader-audio-play { border-color: rgba(71, 125, 215, 0.28); background: linear-gradient(145deg, rgba(91, 146, 237, 0.14), rgba(122, 104, 196, 0.08)); color: #477dd7; box-shadow: 0 8px 20px rgba(39, 63, 99, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9); }
html[data-theme="light"] .reader-audio-play:hover { border-color: rgba(71, 125, 215, 0.5); background: linear-gradient(145deg, rgba(91, 146, 237, 0.22), rgba(122, 104, 196, 0.12)); }
html[data-theme="light"] .reader-audio-play.is-playing { border-color: rgba(71, 125, 215, 0.48); background: linear-gradient(145deg, #76a8f4, #8d84d7); color: #ffffff; box-shadow: 0 10px 24px rgba(71, 125, 215, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
html[data-theme="light"] .reader-audio-kicker { color: #477dd7; }
html[data-theme="light"] .reader-audio-copy strong { color: #233a5d; }
html[data-theme="light"] .reader-audio-copy > span:last-child,
html[data-theme="light"] .reader-audio-time { color: #6d7f98; }
html[data-theme="light"] .reader-audio input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, rgba(71, 125, 215, 0.84) 0 var(--audio-progress, 0%), rgba(39, 63, 99, 0.14) var(--audio-progress, 0%) 100%); }
html[data-theme="light"] .reader-audio input[type="range"]::-moz-range-track { background: rgba(39, 63, 99, 0.14); }
html[data-theme="light"] .reader-audio input[type="range"]::-moz-range-progress { background: rgba(71, 125, 215, 0.84); }
html[data-theme="light"] .reader-audio input[type="range"]::-webkit-slider-thumb { border-color: rgba(244, 248, 253, 0.9); background: #5f93e2; box-shadow: 0 0 0 2px rgba(71, 125, 215, 0.12), 0 2px 8px rgba(71, 125, 215, 0.2); }
html[data-theme="light"] .reader-audio input[type="range"]::-moz-range-thumb { border-color: rgba(244, 248, 253, 0.9); background: #5f93e2; box-shadow: 0 0 0 2px rgba(71, 125, 215, 0.12), 0 2px 8px rgba(71, 125, 215, 0.2); }
html[data-theme="light"] .reader-audio-volume-icon { color: #6d7f98; }

@media (max-width: 760px) {
  .reader-audio { grid-template-columns: 1fr; gap: 10px; min-height: 0; padding: 13px 13px 12px; }
  .reader-audio-controls { grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px; }
  .reader-audio-seek { grid-column: 1 / -1; }
  .reader-audio-time { grid-column: 1; }
  .reader-audio-volume { grid-column: 2; width: 82px; }
}

/* Empty launch state: the catalogue is intentionally quiet until the first titles are ready. */
.catalogue-launch-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 0.58fr); }
.catalogue-launch-card {
  position: relative;
  display: flex;
  min-height: 390px;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: 42px;
  border: 1px solid rgba(108, 137, 185, 0.24);
  border-radius: 28px;
  background:
    radial-gradient(circle at 78% 18%, rgba(104, 157, 255, 0.22), transparent 35%),
    radial-gradient(circle at 18% 82%, rgba(183, 126, 116, 0.18), transparent 42%),
    linear-gradient(145deg, #18233b, #0d1424 62%, #121525);
  box-shadow: 0 28px 65px rgba(5, 10, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.catalogue-launch-card::before,
.catalogue-launch-card::after { position: absolute; content: ""; pointer-events: none; }
.catalogue-launch-card::before { inset: 22px; border: 1px solid rgba(166, 191, 235, 0.14); border-radius: 20px; }
.catalogue-launch-card::after { width: 190px; height: 190px; top: -64px; right: -42px; border: 1px solid rgba(149, 186, 255, 0.16); border-radius: 50%; box-shadow: 0 0 0 28px rgba(149, 186, 255, 0.035), 0 0 0 58px rgba(149, 186, 255, 0.025); }
.catalogue-launch-mark { position: absolute; top: 42px; left: 42px; color: #f4a48d; font-family: var(--serif); font-size: 35px; }
.catalogue-launch-card .eyebrow { position: relative; margin: 0 0 18px; color: #91a9cc; }
.catalogue-launch-card strong { position: relative; max-width: 270px; color: #f4f6fb; font-family: var(--display); font-size: clamp(31px, 3vw, 46px); font-weight: 520; letter-spacing: -0.07em; line-height: 0.98; }
.catalogue-launch-card p { position: relative; max-width: 220px; margin: 20px 0 0; color: #aebbd0; font-family: var(--serif); font-size: 15px; line-height: 1.5; }
.catalogue-launch-line { position: relative; display: block; width: 100%; height: 1px; margin-top: 31px; background: linear-gradient(90deg, rgba(246, 165, 141, 0.72), rgba(138, 177, 243, 0.2), transparent); }
.catalogue-launch-band { padding-top: 85px; padding-bottom: 100px; }
.catalogue-launch-panel { display: flex; align-items: center; gap: 27px; min-height: 205px; padding: 36px 42px; border: 1px solid rgba(39, 62, 96, 0.16); border-radius: 22px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 20px 44px rgba(47, 70, 101, 0.08); }
.catalogue-launch-panel .empty-symbol { flex: 0 0 auto; color: #6a94df; font-family: var(--display); font-size: 28px; }
.catalogue-launch-panel h2 { margin: 0; color: var(--navy); font-family: var(--display); font-size: clamp(25px, 3vw, 37px); font-weight: 520; letter-spacing: -0.07em; }
.catalogue-launch-panel p { max-width: 570px; margin: 12px 0 0; color: var(--muted); font-family: var(--serif); font-size: 16px; line-height: 1.55; }
.catalogue-launch-library { padding-bottom: 80px; }
.catalogue-library-empty { padding-top: 82px; padding-bottom: 95px; }
.catalogue-launch-panel-dark { border-color: rgba(151, 180, 225, 0.18); background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); }
.catalogue-launch-panel-dark h2 { color: #f4f6fb; }
.catalogue-launch-panel-dark p { color: #a9b7cc; }
.catalogue-launch-panel-dark .empty-symbol { color: #f2a08a; }
html[data-theme="light"] .catalogue-launch-card { box-shadow: 0 28px 65px rgba(35, 57, 92, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
html[data-theme="light"] .catalogue-launch-panel { background: rgba(255, 255, 255, 0.68); }

@media (max-width: 760px) {
  .catalogue-launch-hero { grid-template-columns: 1fr; }
  .catalogue-launch-card { min-height: 315px; padding: 29px; border-radius: 22px; }
  .catalogue-launch-card::before { inset: 15px; border-radius: 16px; }
  .catalogue-launch-mark { top: 28px; left: 29px; font-size: 28px; }
  .catalogue-launch-card .eyebrow { margin-bottom: 13px; }
  .catalogue-launch-panel { align-items: flex-start; flex-direction: column; gap: 14px; padding: 27px 24px; }
  .catalogue-launch-band, .catalogue-library-empty { padding-top: 58px; padding-bottom: 64px; }
}

/* Chapter navigator: long catalogues should be indexed, not scrolled. */
.chapter-browser { margin-top: 6px; }
.chapter-browser-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 20px 0 18px; border-top: 1px solid var(--line); }
.chapter-browser-toolbar strong { display: block; color: var(--navy); font-family: var(--display); font-size: 18px; font-weight: 560; letter-spacing: -0.045em; }
.chapter-browser-toolbar strong span { color: var(--muted); font-weight: 450; }
.chapter-browser-actions { display: flex; align-items: center; gap: 10px; }
.chapter-search, .chapter-jump { display: flex; align-items: center; gap: 8px; min-height: 38px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.035); }
.chapter-search { width: 204px; padding: 0 11px; color: var(--muted); }
.chapter-search input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--navy); font: inherit; font-size: 11px; }
.chapter-search input::placeholder { color: var(--muted-light); }
.chapter-search-icon { position: relative; flex: none; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 50%; }
.chapter-search-icon::after { position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1.5px; border-radius: 2px; background: currentColor; content: ""; transform: rotate(45deg); transform-origin: left center; }
.chapter-jump { padding-left: 10px; }
.chapter-jump label { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
.chapter-jump input { width: 42px; border: 0; outline: 0; background: transparent; color: var(--navy); font: inherit; font-size: 11px; }
.chapter-jump input::placeholder { color: var(--muted-light); }
.chapter-jump button { align-self: stretch; padding: 0 12px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--control-blue); font-size: 10px; font-weight: 750; }
.chapter-browser-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.chapter-browser-meta b { color: var(--navy); font-weight: 750; }
.chapter-range { display: flex; align-items: center; gap: 9px; }
.chapter-range > span { color: var(--muted-light); font-size: 9px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.chapter-range select { min-height: 32px; padding: 0 29px 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper-warm); color: var(--navy); font: inherit; font-size: 10px; }
.chapter-clear-search { padding: 0; border: 0; background: transparent; color: var(--control-blue); font-size: 10px; font-weight: 750; }
.chapter-browser .chapter-list { border-top: 0; }
.chapter-browser .chapter-row { min-height: 60px; }
.chapter-browser .chapter-name small { display: block; margin-top: 4px; color: var(--control-blue); font-size: 9px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; }
.chapter-browser .chapter-date { color: var(--control-blue); font-size: 9px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.chapter-empty { display: flex; align-items: center; gap: 13px; min-height: 90px; color: var(--muted); font-size: 12px; }
.chapter-empty span { color: var(--red); font-family: var(--display); font-size: 22px; }
.chapter-empty p { margin: 0; }
.chapter-pagination { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; color: var(--muted); font-size: 10px; }
.chapter-pagination button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--navy); font-size: 10px; font-weight: 750; }
.chapter-pagination button:hover:not(:disabled) { border-color: rgba(71, 125, 215, 0.42); background: rgba(71, 125, 215, 0.07); }
.chapter-pagination button:disabled { opacity: 0.35; cursor: not-allowed; }

@media (max-width: 760px) {
  .chapter-browser-toolbar { align-items: stretch; flex-direction: column; gap: 14px; }
  .chapter-browser-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .chapter-search { width: auto; }
  .chapter-jump { justify-self: end; }
  .chapter-browser-meta { align-items: flex-start; flex-direction: column; }
  .chapter-range { width: 100%; justify-content: space-between; }
  .chapter-range select { max-width: 70%; }
  .chapter-browser .chapter-row { grid-template-columns: 38px minmax(0, 1fr) 20px; min-height: 58px; }
  .chapter-browser .chapter-date { display: none; }
}

/* Keep the settings chevron optically centered inside its circular control. */
.reader-menu-button > span { display: inline-grid; place-items: center; font-size: 0; line-height: 0; }
.reader-menu-button > span::after { top: 50%; left: 50%; width: 6px; height: 6px; transform: translate(-50%, -64%) rotate(45deg); }

/* Warm paper is a reading palette, not only a lighter background. */
.reader-shell.reader-sepia {
  --paper: #f2eadb;
  --paper-warm: #e9decb;
  --paper-deep: #ded0bb;
  --ink: #2f3b4d;
  --navy: #1d2b40;
  --navy-deep: #172438;
  --muted: #707887;
  --muted-light: #98938a;
  --line: #d5c8b6;
  --red: #c96856;
  --red-dark: #aa5146;
  --blue: #4f7fc8;
  --violet: #7768b2;
  --control-blue: #4e70a3;
  background: var(--paper);
  color: var(--ink);
}
.reader-shell.reader-sepia .reader-copy { color: var(--ink); }
.reader-shell.reader-sepia .reading-column h1 { color: var(--navy); }
.reader-shell.reader-sepia .reader-byline { color: var(--muted); }
.reader-shell.reader-sepia .reader-byline span { color: var(--muted-light); }
.reader-shell.reader-sepia .reader-endnote p { color: var(--navy); }
.reader-shell.reader-sepia .reader-endnote p span { color: var(--muted); }

/* In dark mode, warm paper becomes a neutral graphite surface like Codex's dark canvas. */
html:not([data-theme="light"]) .reader-shell.reader-sepia {
  --paper: #1c1c1c;
  --paper-warm: #242424;
  --paper-deep: #2b2b2b;
  --ink: #e9e9e9;
  --navy: #f3f3f3;
  --navy-deep: #f3f3f3;
  --muted: #a2a2a2;
  --muted-light: #737373;
  --line: rgba(255, 255, 255, 0.13);
  --red: #ed8976;
  --red-dark: #d87364;
  --blue: #9fbeef;
  --violet: #b8a9df;
  --control-blue: #c9d3e3;
  background:
    radial-gradient(circle at 76% 0%, rgba(255, 255, 255, 0.025), transparent 30rem),
    var(--paper);
  color: var(--ink);
}
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-topbar {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(25, 25, 25, 0.88);
}
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-progress-line {
  background: rgba(255, 255, 255, 0.11);
}
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-settings-panel {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: rgba(34, 34, 34, 0.96);
}
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-save,
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-menu-button,
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-theme-toggle {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.055);
  color: #e5e5e5;
}
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-save:hover,
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-menu-button:hover,
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-theme-toggle:hover {
  border-color: rgba(159, 190, 239, 0.42);
  background: rgba(159, 190, 239, 0.08);
  color: #ffffff;
}
html:not([data-theme="light"]) .reader-shell.reader-sepia .settings-buttons button,
html:not([data-theme="light"]) .reader-shell.reader-sepia .setting-choice {
  border-color: rgba(255, 255, 255, 0.12);
  background: #2a2a2a;
  color: var(--navy);
}
html:not([data-theme="light"]) .reader-shell.reader-sepia .reader-progress-line > span {
  background: linear-gradient(90deg, #9fbeef, #cfd4dc 58%, #ed8976);
  box-shadow: 0 0 14px rgba(159, 190, 239, 0.16);
}

/* The opening character keeps the paragraph's exact typography; only its color is special. */
.reader-copy p.is-opening::first-letter {
  float: none;
  margin: 0;
  color: var(--blue);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}