:root {
  --brand-950: #1f160c;
  --brand-900: #2a1d0f;
  --brand-800: #3d2b16;
  --brand-700: #5a4020;
  --accent-500: #c99532;
  --accent-600: #ae7620;
  --accent-soft: #f1dfb7;
  --page-bg: #f4efe5;
  --surface: #fffdf8;
  --surface-soft: #f7f0e4;
  --surface-strong: #efe1cb;
  --text-primary: #211b15;
  --text-secondary: #71675d;
  --text-inverse: #fffaf0;
  --border: #dfd3c1;
  --border-strong: #c9b89d;
  --heart-idle: #2a2119;
  --heart-active: #b5232d;
  --shadow-soft: 0 4px 18px rgba(42, 29, 15, 0.07);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --content-max: 1180px;
  --reader-max: 760px;
  --font-ui: "Noto Sans Malayalam", system-ui, sans-serif;
  --font-reading: "Noto Serif Malayalam", "Noto Sans Malayalam", serif;
  --library-page: var(--page-bg);
  --library-panel: var(--surface);
  --library-border: var(--border);
  --library-text: var(--text-primary);
  --library-muted: var(--text-secondary);
  --library-accent: var(--accent-500);
}
@font-face {
  font-family: "karthika";
  src: url("../fonts/karthika.0dd427ed9cc1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "kartika";
  src: url("../fonts/karthika.0dd427ed9cc1.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@media (prefers-color-scheme: dark) {
  :root {
    --library-page: var(--page-bg);
    --library-panel: var(--surface);
    --library-border: var(--border);
    --library-text: var(--text-primary);
    --library-muted: var(--text-secondary);
    --library-accent: var(--accent-500);
  }
}
:root[data-theme="light"] {
  --page-bg: #f4efe5;
  --surface: #fffdf8;
  --surface-soft: #f7f0e4;
  --surface-strong: #efe1cb;
  --text-primary: #211b15;
  --text-secondary: #71675d;
  --text-inverse: #fffaf0;
  --border: #dfd3c1;
  --border-strong: #c9b89d;
  --heart-idle: #2a2119;
  --library-page: var(--page-bg);
  --library-panel: var(--surface);
  --library-border: var(--border);
  --library-text: var(--text-primary);
  --library-muted: var(--text-secondary);
  --library-accent: var(--accent-500);
}
:root[data-theme="dark"] {
  --page-bg: #15100a;
  --surface: #211910;
  --surface-soft: #2a2015;
  --surface-strong: #342718;
  --text-primary: #f5eadb;
  --text-secondary: #c8b8a3;
  --border: #453622;
  --border-strong: #5a462c;
  --heart-idle: #f0e5d5;
  --library-page: var(--page-bg);
  --library-panel: var(--surface);
  --library-border: var(--border);
  --library-text: var(--text-primary);
  --library-muted: var(--text-secondary);
  --library-accent: var(--accent-500);
}
* { box-sizing: border-box; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body {
  margin: 0;
  background: var(--library-page);
  color: var(--library-text);
  font: 15px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Malayalam", "Noto Sans", sans-serif;
}
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 400; }
.site-header, .site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px clamp(1rem, 2vw, 2.5rem);
  background: var(--library-panel);
  border-bottom: 1px solid var(--library-border);
}
.site-footer {
  align-items: flex-start;
  border-top: 1px solid var(--library-border);
  border-bottom: 0;
  margin-top: 40px;
  color: var(--library-muted);
  font-size: .86rem;
  line-height: 1.55;
}
.site-footer p {
  max-width: 80ch;
  margin: 0;
}
.site-footer nav {
  flex: 0 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  min-height: 44px;
  font-weight: 400;
  font-size: 1.2rem;
  flex: 0 0 auto;
}
.brand-logo {
  display: block;
  width: auto;
  max-width: clamp(132px, 16vw, 210px);
  height: clamp(34px, 4vw, 46px);
  max-height: 46px;
  object-fit: contain;
  object-position: left center;
}
nav { display: flex; flex-wrap: wrap; gap: 14px; color: var(--library-muted); }
.site-nav {
  flex: 1 1 auto;
  margin-left: auto;
}
.header-search {
  display: flex;
  align-items: stretch;
  flex: 0 1 260px;
  min-width: 170px;
}
.header-search input {
  min-width: 0;
  min-height: 36px;
  padding: 6px 9px;
  border-radius: 6px 0 0 6px;
}
.header-search button {
  min-height: 36px;
  padding: 5px 9px;
  border: 1px solid var(--library-accent);
  border-radius: 0 6px 6px 0;
  background: var(--library-accent);
  color: #fff;
  font: inherit;
  font-size: .8rem;
  font-weight: 400;
  cursor: pointer;
}
.site-header nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.header-logout-form {
  display: inline-flex;
  margin: 0;
}
.header-logout-form button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.header-logout-form button:hover,
.header-logout-form button:focus-visible {
  color: var(--library-text);
}
.site-header-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 14px;
}
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--library-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--library-panel) 86%, var(--library-accent));
  color: var(--library-text);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--library-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-panel) 86%, var(--library-accent));
  color: var(--library-text);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
}
.actions, .inline-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--library-accent);
  background: var(--library-accent);
  color: white;
  border-radius: 6px;
  font-weight: 400;
  cursor: pointer;
}
.button.secondary { background: transparent; color: var(--library-accent); }
.button.danger {
  background: #b91c1c;
  border-color: #991b1b;
  color: #fff;
}
.button.danger:hover {
  background: #991b1b;
}
.button.small { min-height: 34px; padding: 6px 11px; font-size: .9rem; }
.form-errors,
.errorlist {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #ef4444 55%, var(--library-border));
  border-radius: 8px;
  background: color-mix(in srgb, #ef4444 12%, var(--library-panel));
  color: color-mix(in srgb, #ef4444 72%, var(--library-text));
  font-size: .9rem;
}
.errorlist {
  list-style: none;
}
.form-errors .errorlist {
  padding: 0;
  border: 0;
  background: transparent;
}
.review-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1.8fr) minmax(120px, .7fr) minmax(140px, .9fr) auto;
  gap: 8px;
  align-items: end;
  margin: 0 0 14px;
  padding: 9px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.review-controls label { display: grid; gap: 4px; }
.review-controls input,
.review-controls select {
  min-height: 38px;
  padding: 7px 9px;
}
.review-actions {
  display: flex;
  gap: 6px;
}
.review-actions .button {
  min-height: 38px;
  padding: 7px 10px;
}
.review-controls span, .stat-grid dt {
  color: var(--library-muted);
  font-size: .76rem;
  font-weight: 400;
  text-transform: uppercase;
}
.content-band {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 26px clamp(1rem, 2vw, 2.5rem);
}
.submission-page {
  max-width: 1080px;
  margin-inline: auto;
}
.submission-landing {
  display: grid;
  gap: 34px;
  max-width: 1080px;
  margin-inline: auto;
}
.submit-intro {
  max-width: 760px;
}
.submit-intro h1 {
  margin-bottom: 8px;
}
.submit-terms,
.submit-terms p {
  margin: 0;
  color: var(--library-muted);
  line-height: 1.75;
}
.submit-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.submit-choice {
  width: 100%;
  min-height: 56px;
  font-size: 1rem;
  text-align: center;
}
.submit-section {
  display: grid;
  gap: 12px;
}
.submit-upcoming-list,
.chapter-submission-list {
  display: grid;
  border-top: 1px solid var(--library-border);
}
.submit-upcoming-item,
.chapter-submission-list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--library-border);
  color: var(--library-text);
}
.submit-upcoming-item h3,
.submit-upcoming-item p {
  margin: 0;
}
.submit-upcoming-item h3 {
  font-size: 1rem;
}
.submit-upcoming-item time,
.chapter-submission-list > a span {
  flex: 0 0 auto;
  color: var(--library-muted);
  font-size: .82rem;
}
.submit-discussion-list {
  margin-top: 0;
}
.chapter-submission-list > a:hover,
.chapter-submission-list > a:focus-visible {
  color: var(--library-accent);
}
.chapter-submission-list .dashboard-empty {
  padding-top: 18px;
}
.submission-form {
  display: grid;
  gap: 16px;
}
.submission-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.submission-honeypot input {
  width: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
}
.submission-panel {
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: var(--library-panel);
}
.submission-panel legend {
  padding: 0 6px;
  color: var(--library-text);
  font-size: .95rem;
  font-weight: 400;
  text-transform: uppercase;
}
.submission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.submission-form .field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--library-text);
  font-weight: 400;
}
.submission-form .field .amk-quill-field {
  min-width: 0;
}
.submission-form .field input,
.submission-form .field select,
.submission-form .field textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--library-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--library-panel) 88%, var(--library-page));
  color: var(--library-text);
  font: inherit;
  font-weight: 400;
}
.submission-form .field textarea {
  min-height: 140px;
  resize: vertical;
}
.submission-form .field textarea[name="chapter_content"] {
  min-height: 420px;
  line-height: 1.8;
}
.submission-form .field input[type="file"] {
  padding: 8px;
}
.submission-form .required {
  color: var(--library-accent);
  font-size: .72rem;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}
.submission-form .field-help {
  color: var(--library-muted);
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;
}
.submission-form .readonly-field {
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--library-border);
  border-radius: 7px;
  background: color-mix(in srgb, var(--library-panel) 92%, var(--library-page));
  color: var(--library-muted);
  font-weight: 400;
}
.submission-type-options ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.submission-type-options li {
  min-width: 0;
}
.submission-type-options label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--library-panel) 90%, var(--library-page));
  color: var(--library-text);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.submission-type-options label:hover,
.submission-type-options label:focus-within {
  border-color: color-mix(in srgb, var(--library-accent) 52%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 92%, var(--library-accent));
}
.submission-type-options label:has(input:checked) {
  border-color: var(--library-accent);
  background: color-mix(in srgb, var(--library-panel) 84%, var(--library-accent));
  color: var(--library-text);
  transform: translateY(-1px);
}
.submission-type-options input {
  width: auto;
  min-height: 0;
  margin: 0;
  accent-color: var(--library-accent);
}
.submission-info-box {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--library-accent) 38%, var(--library-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--library-panel) 88%, var(--library-accent));
  color: var(--library-text);
}
.submission-info-box p,
.submission-section-note {
  margin: 0;
}
.submission-info-box p {
  font-size: .9rem;
  line-height: 1.45;
}
.submission-section-note {
  color: var(--library-muted);
  font-size: .88rem;
  line-height: 1.4;
}
.submission-subsection {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}
.submission-subsection h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
}
.submission-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.dashboard-messages {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}
.dashboard-message {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, #14b8a6 50%, var(--library-border));
  border-radius: 8px;
  background: color-mix(in srgb, #14b8a6 14%, var(--library-panel));
  color: var(--library-text);
}
.dashboard-message strong {
  color: color-mix(in srgb, #14b8a6 76%, var(--library-text));
}
.dashboard-message span {
  color: var(--library-muted);
  line-height: 1.45;
}
.submission-success-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, #14b8a6 50%, var(--library-border));
  border-radius: 8px;
  background: var(--library-panel);
}
.submission-success-panel h1,
.submission-success-panel p {
  margin: 0;
}
.submission-success-panel h1 {
  line-height: 1.18;
  font-size: clamp(1.45rem, 3vw, 2.2rem);
}
.submission-success-panel p {
  color: var(--library-muted);
}
.narrow { max-width: 760px; margin-inline: auto; }
.help-center {
  max-width: 1120px;
  margin-inline: auto;
}
.help-header {
  display: grid;
  gap: 6px;
  max-width: 760px;
  margin-bottom: 18px;
}
.help-header h1,
.help-header p {
  margin: 0;
}
.help-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  line-height: 1.12;
}
.help-header > p:last-child {
  color: var(--library-muted);
}
.help-contents {
  gap: 4px 16px;
  margin-bottom: 22px;
  padding-block: 10px;
  border-block: 1px solid var(--library-border);
}
.help-contents a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--library-muted);
  font-size: .9rem;
  font-weight: 400;
}
.help-contents a:hover,
.help-contents a:focus-visible {
  color: var(--library-accent);
}
.help-sections {
  display: grid;
  gap: 16px;
}
.help-section {
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 14px;
  scroll-margin-top: 16px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: var(--library-panel);
}
.help-screenshot {
  margin: 0;
  min-width: 0;
}
.help-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--library-border);
  border-radius: 6px;
  background: var(--library-page);
}
.help-copy {
  min-width: 0;
}
.help-number {
  margin: 0 0 4px;
  color: var(--library-accent);
  font-size: .78rem;
  font-weight: 400;
}
.help-copy h2 {
  margin: 0 0 6px;
  font-size: clamp(1.25rem, 3vw, 1.65rem);
  line-height: 1.2;
}
.help-copy > p:not(.help-number, .help-more) {
  margin: 0 0 12px;
  color: var(--library-muted);
}
.help-copy ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.35rem;
}
.help-copy li {
  padding-left: 4px;
  overflow-wrap: break-word;
}
.help-faq-list {
  gap: 14px;
}
.help-faq-list p {
  margin: 3px 0 0;
  color: var(--library-muted);
}
.help-more {
  margin: 16px 0 0;
}
.help-more a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--library-accent);
  font-weight: 400;
}
.library-home { padding-top: 18px; }
.library-home-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: var(--library-panel);
}
.library-home-header h1 { margin: 0; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; }
.library-home-header p { max-width: 720px; margin: 0; color: var(--library-muted); }
.library-home-intro {
  display: grid;
  align-content: center;
  gap: 10px;
}
.hero-actions {
  margin-top: 2px;
}
.hero-actions .button {
  min-height: 38px;
  padding: 7px 12px;
  font-size: .92rem;
}
.homepage-announcement {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--library-panel) 88%, var(--library-page));
}
.homepage-announcement h2 {
  margin: 0;
  line-height: 1.2;
  font-size: 1rem;
}
.homepage-announcement p {
  margin: 0;
  color: var(--library-muted);
  font-size: .92rem;
  line-height: 1.5;
}
.homepage-continue-reading {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 4px 0;
}
.homepage-continue-reading h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}
.homepage-reading-list {
  display: grid;
  gap: 6px;
}
.homepage-reading-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  min-width: 0;
  padding: 3px 0;
}
.homepage-reading-item a:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--library-text);
  font-weight: 400;
  line-height: 1.35;
}
.homepage-reading-action {
  color: var(--library-accent);
  font-size: .84rem;
  font-weight: 400;
  white-space: nowrap;
}
.library-layout {
  display: grid;
  gap: 18px;
}
.library-main { min-width: 0; }
.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.story-card, .comment-card {
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
  overflow: hidden;
}
.story-card {
  display: block;
  color: inherit;
  transition: border-color .16s ease, background .16s ease;
}
.story-card-clickable {
  cursor: pointer;
}
.story-card:hover { border-color: color-mix(in srgb, var(--library-accent) 48%, var(--library-border)); background: color-mix(in srgb, var(--library-panel) 94%, var(--library-accent)); }
.story-card-body {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
}
.comment {
  min-width: 0;
  overflow-wrap: anywhere;
}
.comment-card { padding: 14px; }
.user-name-with-role {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
}
.user-role-label {
  margin-left: .35rem;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
}
.user-role-author { color: color-mix(in srgb, var(--library-accent) 82%, var(--library-text)); }
.user-role-admin { color: #a33a32; }
.user-role-moderator { color: #34705d; }
.dashboard-user-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  margin: -4px 0 14px;
  color: var(--library-muted);
}
.dashboard-user-summary a {
  color: var(--library-accent);
  font-weight: 400;
}
.story-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.story-card h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  line-height: 1.16;
  font-size: clamp(1rem, 1vw, 1.22rem);
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}
.story-card h3 a {
  display: inline;
}
.story-card-like-form {
  flex: 0 0 auto;
  margin: 0;
}
.story-card-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 3.75rem;
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--library-text);
  font: inherit;
  font-size: .86rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color .16s ease;
}
.story-card-like:hover,
.story-card-like:focus-visible {
  color: color-mix(in srgb, #ef4444 78%, var(--library-text));
}
.story-card-like.liked {
  color: #ef4444;
}
.story-card-heart {
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  fill: currentColor;
  pointer-events: none;
}
.story-card-like-count {
  min-width: 1ch;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.story-card-like:disabled {
  cursor: wait;
  opacity: .72;
}
.meta { color: var(--library-muted); font-size: .92rem; }
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin: 8px 0 10px;
}
.tag-list.compact { margin: 6px 0 0; }
.tag-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--library-accent) 74%, var(--library-text));
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.tag-pill::before {
  content: "#";
  color: var(--library-muted);
  font-weight: 400;
}
.tag-pill.muted {
  color: var(--library-muted);
}
.tag-pill.muted::before {
  content: "";
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.stat-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid div {
  padding: 8px 10px;
  background: color-mix(in srgb, var(--library-panel) 84%, var(--library-page));
  border: 1px solid var(--library-border);
  border-radius: 6px;
}
.stat-grid dd { margin: 2px 0 0; font-weight: 400; line-height: 1.2; }
.inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--library-muted);
  font-size: .84rem;
  line-height: 1.35;
}
.inline-stats span {
  min-width: 0;
  white-space: nowrap;
}
.story-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin: 0;
  color: var(--library-muted);
  font-size: .58rem;
  line-height: 1.35;
}
.story-row-meta span {
  min-width: 0;
  white-space: nowrap;
}
.story-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-accent) 16%, var(--library-panel));
  color: var(--library-accent);
  font-size: .72rem;
  font-weight: 400;
}
.library-sidebar {
  display: none;
  min-width: 0;
  max-width: 100%;
}
.library-sidebar section {
  min-width: 0;
  max-width: 100%;
  padding: 14px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.library-sidebar h3 {
  margin: 0;
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--library-text);
  text-transform: uppercase;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
}
.sidebar-range {
  margin: 2px 0 8px;
  color: var(--library-muted);
  font-size: .75rem;
  line-height: 1.25;
}
.library-sidebar a:not(.rank-row) {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding: 6px 0;
  border-top: 1px solid color-mix(in srgb, var(--library-border) 72%, transparent);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
}
.library-sidebar a:first-of-type { border-top: 0; }
.sidebar-link {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.sidebar-title {
  color: var(--library-text);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.sidebar-count {
  color: var(--library-muted);
  font-size: .84rem;
}
.authors-directory-page {
  display: grid;
  gap: 24px;
  padding-top: 22px;
}
.authors-directory-section {
  display: grid;
  gap: 12px;
}
.authors-directory-controls {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.authors-directory-controls label {
  display: grid;
  gap: 4px;
}
.authors-directory-controls span {
  color: var(--library-muted);
  font-size: .76rem;
  font-weight: 400;
  text-transform: uppercase;
}
.author-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.author-card-grid.featured {
  grid-template-columns: 1fr;
}
.author-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.author-card:hover {
  border-color: color-mix(in srgb, var(--library-accent) 42%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 94%, var(--library-accent));
  transform: translateY(-1px);
}
.author-card-main {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.author-card-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-accent) 22%, var(--library-panel));
  color: var(--library-accent);
  font-weight: 400;
}
.author-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.author-card-copy strong {
  color: var(--library-text);
  font-size: 1rem;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.author-card-bio {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--library-muted);
  font-size: .82rem;
  line-height: 1.35;
}
.author-card-stats {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  color: var(--library-muted);
  font-size: .82rem;
  line-height: 1.35;
}
.author-card-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
}
.author-card-stat-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.author-card-follow {
  justify-self: end;
  white-space: nowrap;
}
.author-card-follow-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--library-accent) 78%, var(--library-muted));
  font: inherit;
  font-size: .74rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s ease;
}
.author-card-follow-control svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.author-card-follow-control:hover, .author-card-follow-control:focus-visible {
  color: var(--library-accent);
}
.author-card-follow-control.following {
  color: #14b8a6;
}
.pdf-library-page {
  display: grid;
  gap: 14px;
  padding-top: 22px;
}
.pdf-library-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.pdf-bookshelf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.pdf-book-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 8px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.pdf-book-card:hover {
  border-color: color-mix(in srgb, var(--library-accent) 42%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 94%, var(--library-accent));
  transform: translateY(-1px);
}
.pdf-book-cover {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 7px;
  background: color-mix(in srgb, var(--library-accent) 18%, var(--library-panel));
  color: var(--library-accent);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  font-weight: 400;
}
.pdf-book-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdf-book-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}
.pdf-book-copy strong {
  min-width: 0;
  max-width: 100%;
  color: var(--library-text);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.pdf-book-meta {
  min-width: 0;
  max-width: 100%;
  color: var(--library-muted);
  font-size: .78rem;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.pdf-book-stats {
  min-width: 0;
  max-width: 100%;
  color: var(--library-muted);
  font-size: .76rem;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.pdf-detail-cover {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: color-mix(in srgb, var(--library-accent) 18%, var(--library-panel));
  color: var(--library-accent);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
}
.pdf-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdf-detail-meta, .pdf-detail-summary {
  margin: 0;
  color: var(--library-muted);
}
.pdf-detail-summary {
  max-width: 90ch;
}
.pdf-reader-shell {
  display: grid;
  gap: 14px;
}
.pdf-reader-shell h2 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}
.pdf-reader-shell p {
  margin: 3px 0 0;
}
.pdf-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.pdf-viewer-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
}
.pdf-viewer-panel[hidden] {
  display: none;
}
.pdf-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: color-mix(in srgb, var(--library-panel) 94%, #000);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.pdf-page-status {
  color: var(--library-text);
  font-size: .85rem;
  font-weight: 400;
  white-space: nowrap;
}
.pdf-canvas-wrap {
  display: grid;
  justify-items: center;
  min-width: 0;
  overflow-x: auto;
  padding: clamp(.5rem, 1.5vw, 1rem);
  background: #101010;
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.pdf-canvas-wrap canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .35);
}
.pdf-fallback {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: var(--library-panel);
}
.pdf-fallback[hidden] {
  display: none;
}
.author-profile-page {
  display: grid;
  gap: 18px;
  padding-top: 18px;
}
.author-profile-header {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.author-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-accent) 22%, var(--library-panel));
  color: var(--library-accent);
  font-size: 1.6rem;
  font-weight: 400;
}
.author-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.author-profile-copy {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.author-profile-copy h1 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.12;
}
.author-profile-bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 92ch;
  margin: 0;
  color: var(--library-muted);
  font-size: .95rem;
  line-height: 1.5;
}
.author-profile-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--library-muted);
  font-size: .86rem;
  line-height: 1.35;
}
.author-profile-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.author-profile-stats .author-stat-highlight {
  color: var(--library-text);
  font-weight: 400;
}
.author-stat-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.author-profile-follow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.author-profile-follow .button {
  min-width: 118px;
  white-space: nowrap;
}
.author-profile-section {
  display: grid;
  gap: 10px;
}
.story-grid > .meta,
.dashboard-list > .meta,
.author-mini-list > .meta,
.story-comments-list > .meta {
  margin: 0;
}
.content-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.content-tab {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 3px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--library-muted);
  font-size: .86rem;
  font-weight: 400;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease;
}
.content-tab:hover, .content-tab:focus-visible {
  color: color-mix(in srgb, var(--library-accent) 78%, var(--library-text));
}
.content-tab.active {
  color: var(--library-text);
  font-weight: 400;
  border-bottom-color: var(--library-accent);
}
.dashboard-primary-tabs {
  margin-top: 2px;
}
.dashboard-status-tabs {
  gap: 4px 16px;
  margin-top: 2px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--library-border) 72%, transparent);
}
.dashboard-status-tabs .content-tab {
  min-height: 34px;
  font-size: .8rem;
  font-weight: 400;
}
.dashboard-status-tabs .content-tab.active {
  font-weight: 400;
}
.author-mini-list {
  display: grid;
  gap: 8px;
}
.author-mini-list a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 118px 88px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
  transition: border-color .16s ease, background .16s ease;
}
.author-mini-list a:hover, .author-mini-list a:focus-visible {
  border-color: color-mix(in srgb, var(--library-accent) 42%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 92%, var(--library-accent));
}
.author-mini-list strong {
  min-width: 0;
  font-weight: 400;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.author-mini-list span {
  color: var(--library-muted);
  font-size: .8rem;
  white-space: nowrap;
}
.story-rank {
  font-weight: 400;
  letter-spacing: .02em;
}
.story-popular-stats {
  display: contents;
}
.story-stat {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  justify-self: start;
}
.story-stat-value {
  text-align: left;
}
.story-page-shell {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(1rem, 2vw, 2.5rem);
}
.story-detail {
  width: 100%;
  padding: 18px;
  display: grid;
  grid-template-columns: minmax(260px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 10px;
}
.cover {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: color-mix(in srgb, var(--library-panel) 84%, var(--library-page));
}
.story-detail-media {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.story-author-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  padding: 10px 12px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.story-author-band { padding-top: 10px; padding-bottom: 10px; }
.story-author-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--library-accent) 22%, var(--library-panel));
  color: var(--library-accent);
  font-weight: 400;
}
.story-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-author-copy {
  display: grid;
  gap: 0;
  flex: 1 1 220px;
  min-width: 0;
}
.story-author-copy strong, .story-author-name {
  font-size: .98rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.story-author-name {
  color: var(--library-text);
  font-weight: 400;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}
.story-author-name:hover, .story-author-name:focus-visible {
  color: var(--library-accent);
}
.story-detail-main { display: grid; gap: 9px; min-width: 0; }
.story-detail-header { display: grid; gap: 5px; min-width: 0; }
.story-detail-header .story-author-card {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}
.story-detail-header .story-author-copy {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 5px;
}
.story-detail-header .story-author-name {
  min-height: 30px;
}
.story-detail-header .story-author-card form,
.story-detail-header .story-author-card .button {
  width: auto;
}
.story-detail-header .story-author-card .button {
  min-height: 32px;
  padding: 4px 9px;
  font-size: .82rem;
}
.story-detail-main h1 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.16;
  font-size: clamp(1.55rem, 2.5vw, 1.65rem);
  font-weight: 300;
}
.story-detail-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  min-width: 0;
}
.story-detail-badges .story-stats {
  margin: 0;
}
.story-category-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: color-mix(in srgb, var(--library-accent) 76%, var(--library-text));
  font-size: .82rem;
  font-weight: 400;
  line-height: 1.35;
}
.story-category-links a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}
.story-category-links a:hover,
.story-category-links a:focus-visible,
.story-coauthors a:hover,
.story-coauthors a:focus-visible {
  color: var(--library-accent);
}
.story-coauthors {
  color: var(--library-muted);
  font-size: .82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.story-coauthors a {
  color: var(--library-text);
  font-weight: 400;
}
.category-choice-list {
  min-width: 0;
  border-block: 1px solid var(--library-border);
}
.category-choice-list summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 2px;
  color: var(--library-text);
  cursor: pointer;
  list-style: none;
}
.category-choice-list summary::-webkit-details-marker {
  display: none;
}
.category-choice-list summary::after {
  content: "+";
  color: var(--library-accent);
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1;
}
.category-choice-list[open] summary::after {
  content: "\2212";
}
.category-choice-list summary small {
  color: var(--library-muted);
  font-size: .8rem;
  font-weight: 400;
  white-space: nowrap;
}
.category-choice-list summary:focus-visible {
  outline: 2px solid var(--library-accent);
  outline-offset: 2px;
}
.category-choice-list[open] summary {
  border-bottom: 1px solid var(--library-border);
}
.category-choice-list > div,
.category-choice-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  margin: 6px 0 0;
  padding: 0 2px 4px;
  list-style: none;
}
.category-choice-list > div > div {
  min-width: 0;
}
.category-choice-list label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  padding: 4px 0;
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.submission-form .category-choice-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  min-height: 18px;
  padding: 0;
  margin-top: 2px;
}
.story-status {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: .2rem .6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--library-accent) 16%, var(--library-panel));
  color: var(--library-accent);
  font-weight: 400;
  font-size: .78rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
  width: fit-content;
  min-height: 30px;
}
.story-status-link:hover, .story-status-link:focus-visible {
  border-color: color-mix(in srgb, var(--library-accent) 72%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 78%, var(--library-accent));
  color: var(--library-text);
}
.tag-pill:hover, .tag-pill:focus-visible {
  color: color-mix(in srgb, var(--library-accent) 86%, var(--library-text));
}
.story-description {
  max-width: 92ch;
  margin: 0;
  color: var(--library-muted);
  font-size: .95rem;
  line-height: 1.7;
  text-align: left;
}
.story-description p {
  margin: 0 0 .8em;
}
.story-description p:last-child {
  margin-bottom: 0;
}
.story-description img,
.chapter-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  border-radius: 6px;
}
.story-description a,
.chapter-body a {
  color: var(--library-accent);
  text-decoration: underline;
  text-underline-offset: .16em;
}
.lastpostkar,
.legacy-karthika {
  font-family: "karthika", "kartika", "Noto Sans Malayalam", "Manjari", sans-serif;
  font-size: 20px;
  line-height: 1.85;
  overflow-wrap: anywhere;
  word-break: normal;
}
.story-description .lastpostkar,
.chapter-body .lastpostkar {
  text-align: justify;
}
.story-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.story-actions form { display: flex; }
.story-actions .button {
  min-height: 36px;
  padding: 7px 12px;
  font-weight: 400;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.section-heading h2 { margin: 0; }
.dashboard-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.dashboard-continue-reading {
  margin: 22px 0;
}
.dashboard-stat-card {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 11px 12px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.dashboard-stat-card span {
  color: var(--library-muted);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.dashboard-stat-card strong {
  overflow-wrap: anywhere;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.1;
}
.dashboard-link-card {
  color: inherit;
  text-decoration: none;
}
.dashboard-link-card:hover,
.dashboard-link-card:focus-visible {
  border-color: color-mix(in srgb, var(--library-accent) 58%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 88%, var(--library-accent));
}
.dashboard-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.dashboard-row--link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dashboard-row--link:hover {
  background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft));
}
.dashboard-row--link:focus-visible {
  border-color: color-mix(in srgb, var(--library-accent) 58%, var(--library-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--library-accent) 20%, transparent);
  outline: 0;
}
.dashboard-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.dashboard-row-main strong {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.dashboard-row--story .dashboard-row-main strong {
  font-weight: 400;
}
.dashboard-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--library-muted);
  font-size: .82rem;
  line-height: 1.35;
}
.dashboard-row-meta span {
  white-space: nowrap;
}
.dashboard-row--story .dashboard-row-meta {
  align-items: center;
  gap: .25rem .45rem;
  margin-top: .3rem;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 400;
}
.dashboard-row-meta__item {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  min-width: 0;
  white-space: normal;
}
.dashboard-row-meta__icon {
  width: .9rem;
  height: .9rem;
  flex: 0 0 auto;
}
.upcoming-story-row {
  grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
}
#upcoming-stories {
  scroll-margin-top: 80px;
}
.dashboard-row-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}
.dashboard-row-actions form {
  display: flex;
  margin: 0;
  min-width: 0;
}
.dashboard-bookmark-row {
  grid-template-columns: 58px minmax(0, 1.05fr) minmax(230px, .8fr) auto;
}
.dashboard-bookmark-cover {
  display: block;
  width: 58px;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--library-soft);
  border: 1px solid var(--library-border);
  border-radius: 6px;
}
.dashboard-bookmark-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dashboard-bookmark-chapters {
  grid-column: 2 / -1;
  display: grid;
  gap: 6px;
}
.dashboard-bookmark-chapters a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  padding: 7px 9px;
  border: 1px solid var(--library-border);
  border-radius: 7px;
  color: var(--library-text);
  background: color-mix(in srgb, var(--library-panel) 88%, var(--library-page));
}
.dashboard-bookmark-chapters span,
.dashboard-bookmark-chapters small {
  color: var(--library-muted);
  font-size: .78rem;
  white-space: nowrap;
}
.dashboard-bookmark-chapters strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
@media (min-width: 64rem) {
  .dashboard-bookmark-row {
    grid-template-columns: 58px minmax(0, 1fr) minmax(180px, max-content);
    grid-template-areas:
      "cover main meta"
      "cover chapters meta"
      "cover actions meta";
    align-items: start;
  }
  .dashboard-bookmark-cover {
    grid-area: cover;
  }
  .dashboard-bookmark-row .dashboard-row-main {
    grid-area: main;
  }
  .dashboard-bookmark-row .dashboard-row-meta {
    grid-area: meta;
    justify-content: flex-end;
    max-width: 18rem;
  }
  .dashboard-bookmark-chapters {
    grid-area: chapters;
  }
  .dashboard-bookmark-actions {
    grid-area: actions;
    justify-content: flex-start;
  }
  .dashboard-bookmark-actions .button {
    min-height: 2.5rem;
    padding: .45rem .75rem;
    font-size: .82rem;
    line-height: 1.25;
    font-weight: 400;
    white-space: normal;
    text-align: center;
  }
}
.dashboard-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.dashboard-empty p {
  margin: 0;
  color: var(--library-muted);
}
.ad-zone {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.ad-zone-chapter_top,
.ad-zone-chapter_middle,
.ad-zone-chapter_bottom {
  min-height: 96px;
  align-items: center;
}
.ad-unit {
  min-width: 0;
  overflow: hidden;
  padding: 10px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: var(--library-panel);
}
.ad-title {
  margin: 0 0 8px;
  font-size: .9rem;
  line-height: 1.2;
}
.ad-unit img,
.ad-popup img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.ad-html {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ad-html img,
.ad-html iframe,
.ad-html ins {
  max-width: 100%;
}
.ad-html iframe {
  border: 0;
}
.ad-popup-stack {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .62);
}
.ad-popup-stack[hidden],
.ad-popup[hidden] {
  display: none;
}
.ad-popup {
  width: min(100%, 520px);
}
.ad-popup-panel {
  position: relative;
  max-height: min(86vh, 720px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--library-border);
  border-radius: 10px;
  background: var(--library-panel);
  color: var(--library-text);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .34);
}
.ad-popup-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--library-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-panel) 80%, #000);
  color: var(--library-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.hide-mobile {
  display: none;
}
.discussion-page {
  display: grid;
  gap: 10px;
}
.discussion-thread-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-top: 12px;
}
.discussion-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0;
  padding: 0 0 4px;
}
.discussion-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 3px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--library-muted);
  font-size: .88rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: border-color .16s ease, color .16s ease;
}
.discussion-tab:hover,
.discussion-tab.active {
  color: color-mix(in srgb, var(--library-accent) 74%, var(--library-text));
  text-decoration: none;
}
.discussion-tab.active {
  font-weight: 400;
  border-bottom-color: var(--library-accent);
}
.discussion-comments-list {
  gap: 8px;
}
.comment-shell {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  min-width: 0;
}
.comment-content {
  min-width: 0;
}
.comment-body {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.comment-body p {
  margin: .45em 0 0;
}
.comment-body p:first-child {
  margin-top: .25em;
}
.comment-body ul,
.comment-body ol {
  margin: .45em 0 0 1.2em;
  padding: 0;
}
.comment-body blockquote {
  margin: .55em 0 0;
  padding-left: .8rem;
  border-left: 3px solid color-mix(in srgb, var(--library-accent) 45%, var(--library-border));
  color: color-mix(in srgb, var(--library-text) 88%, var(--library-muted));
}
.comment-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .6rem 0;
  border-radius: 6px;
}
.comment-body a {
  color: var(--library-accent);
  text-decoration: underline;
  text-underline-offset: .16em;
}
.comment-meta-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 0;
  min-width: 0;
}
.comment-avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--library-accent) 22%, var(--library-panel));
  color: var(--library-text);
  font-size: .82rem;
  font-weight: 400;
}
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-reply .comment-shell {
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
}
.comment-reply .comment-avatar {
  width: 30px;
  height: 30px;
  font-size: .74rem;
}
.list { display: grid; gap: 10px; }
.list a, .list article {
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
  padding: 12px 14px;
}
.list a { display: flex; justify-content: space-between; gap: 12px; }
.chapter-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.chapter-row {
  display: flex;
  gap: 10px;
  align-items: start;
  min-height: 92px;
  padding: 11px 12px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
  transition: border-color .16s ease, background .16s ease;
}
.chapter-row:hover { border-color: color-mix(in srgb, var(--library-accent) 42%, var(--library-border)); background: color-mix(in srgb, var(--library-panel) 92%, var(--library-accent)); }
.chapter-row-link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  flex: 1 1 auto;
}
.chapter-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-accent) 14%, var(--library-panel));
  color: var(--library-accent);
  font-weight: 400;
  font-size: .82rem;
}
.chapter-copy { display: grid; gap: 2px; min-width: 0; }
.chapter-title-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.chapter-title { font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; }
.chapter-row-like {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: auto;
}
.chapter-row-like .content-like {
  min-height: 30px;
}
.chapter-page-count {
  flex: 0 0 auto;
  color: var(--library-muted);
  font-size: .78rem;
  font-weight: 400;
  white-space: nowrap;
}
.chapter-date { color: var(--library-muted); font-size: .78rem; }
.chapter-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--library-muted);
  font-size: .72rem;
  line-height: 1.35;
}
.story-related-section { padding-top: 12px; }
.story-related-groups {
  display: grid;
  gap: 12px;
}
.story-related-groups h3 {
  margin: 0 0 7px;
  font-size: .95rem;
  line-height: 1.2;
}
.story-related-list {
  display: grid;
  gap: 7px;
}
.story-related-row {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
  transition: border-color .16s ease, background .16s ease;
}
.story-related-row:hover {
  border-color: color-mix(in srgb, var(--library-accent) 42%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 92%, var(--library-accent));
}
.story-related-row strong {
  display: block;
  line-height: 1.25;
  font-size: 1rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.story-comments-section { padding-top: 12px; }
.story-comments-page {
  display: grid;
  gap: 10px;
}
.story-comments-page h1,
.story-comments-page > .meta,
.comments-empty {
  margin: 0;
}
.page-back-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 40px;
  width: fit-content;
  max-width: 100%;
  color: var(--library-accent);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.page-back-link:hover,
.page-back-link:focus-visible {
  color: color-mix(in srgb, var(--library-accent) 78%, var(--library-text));
}
.story-comments-list {
  display: grid;
  gap: 6px;
}
.async-block {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.skeleton-state {
  display: grid;
  gap: 8px;
  min-height: 132px;
}
.async-content {
  min-width: 0;
}
.async-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, #ef4444 24%, var(--library-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--library-panel) 86%, var(--library-page));
}
.async-error[hidden],
.async-content[hidden],
.skeleton-state[hidden] {
  display: none;
}
.skeleton-card,
.skeleton-block {
  display: grid;
  gap: 8px;
  min-width: 0;
}
.skeleton-card {
  padding: 10px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--library-panel) 82%, var(--library-page));
}
.skeleton-line {
  display: block;
  width: 72%;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--library-border) 70%, transparent),
    color-mix(in srgb, var(--library-muted) 22%, transparent),
    color-mix(in srgb, var(--library-border) 70%, transparent)
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
}
.skeleton-line-wide {
  width: 100%;
  height: 42px;
  border-radius: 8px;
}
.skeleton-line-short {
  width: min(42%, 180px);
}
.loading-message,
.loading-error {
  margin: 0;
  color: var(--library-muted);
  font-size: .88rem;
  line-height: 1.35;
}
.loading-error {
  color: color-mix(in srgb, #ef4444 76%, var(--library-text));
}
@keyframes skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-line {
    animation: none;
  }
}
.story-comments-list > .comment-card {
  padding: 8px 10px;
}
.story-comments-list .comment p {
  margin-top: 5px;
  margin-bottom: 0;
  line-height: 1.58;
  overflow-wrap: anywhere;
  word-break: normal;
}
.comment-replies {
  display: grid;
  gap: 7px;
  min-width: 0;
  margin-top: 10px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--library-accent) 24%, var(--library-border));
}
.comment-replies:empty {
  display: none;
}
.comment-reply {
  min-width: 0;
  padding: 4px 0 5px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.comment-replies .comment-replies {
  gap: 6px;
  margin-top: 7px;
  padding-left: 10px;
  border-left-color: color-mix(in srgb, var(--library-border) 86%, transparent);
}
.comment-replies .comment-replies .comment-replies {
  padding-left: 0;
  border-left: 0;
}
.comment-reply-compose {
  margin-top: 7px;
}
.comment-reply-compose summary {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 2px;
  width: fit-content;
  color: color-mix(in srgb, var(--library-accent) 72%, var(--library-muted));
  font-size: .76rem;
  font-weight: 400;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.comment-reply-compose summary::-webkit-details-marker {
  display: none;
}
.comment-form.compact {
  gap: 8px;
  margin-top: 8px;
}
.comment-reply .comment-form.compact {
  margin-top: 6px;
}
.comment strong {
  font-size: .9rem;
  line-height: 1.2;
}
.comment-reply strong {
  font-size: .86rem;
}
.comment .meta {
  display: inline;
  margin-top: 0;
  font-size: .78rem;
}
.comment-compose {
  position: relative;
  display: grid;
}
.comment-form-status {
  min-height: 1.35em;
  margin: -4px 0 0;
}
.comment-form-status.error {
  color: #ef4444;
}
.comment-captcha {
  display: grid;
  gap: 5px;
}
.comment-captcha label {
  display: grid;
  gap: 5px;
}
.comment-captcha span {
  color: var(--library-muted);
  font-size: .82rem;
}
.discussion-moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.discussion-moderation-actions form {
  margin: 0;
}
.discussion-audit-log {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  color: var(--library-muted);
  font-size: .75rem;
}
.discussion-audit-log div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.discussion-audit-log dt {
  font-weight: 400;
}
.discussion-audit-log dd {
  margin: 0;
}
.comment-form[aria-busy="true"] button[type="submit"], .comment-form[aria-busy="true"] button:not([type]) {
  opacity: .72;
  cursor: wait;
}
.comment-compose textarea {
  padding-right: 50px;
}
.emoji-toggle {
  position: absolute;
  right: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--library-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-panel) 84%, var(--library-page));
  color: var(--library-text);
  cursor: pointer;
}
.emoji-picker {
  position: absolute;
  right: 0;
  top: 46px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(4, 36px);
  gap: 4px;
  padding: 8px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
  box-shadow: 0 10px 24px color-mix(in srgb, #000 28%, transparent);
}
.emoji-picker[hidden] {
  display: none;
}
.emoji-picker button {
  width: 36px;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.emoji-toggle:hover, .emoji-toggle:focus-visible, .emoji-picker button:hover, .emoji-picker button:focus-visible {
  background: color-mix(in srgb, var(--library-panel) 76%, var(--library-accent));
}
.pagination {
  display: block;
  margin-top: 16px;
  padding: .75rem;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.pagination-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .4rem;
  min-width: 0;
}
.pagination-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-width: 0;
  padding: 0;
}
.pagination-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin-top: .65rem;
  color: var(--library-muted);
  font-size: .84rem;
  white-space: nowrap;
}
.pagination-jump input {
  width: 4.25rem;
  min-height: 2.5rem;
  padding: .35rem .45rem;
  border: 1px solid var(--library-border);
  border-radius: 6px;
  background: var(--library-page);
  color: var(--library-text);
  text-align: center;
}
.pagination-jump button,
.pagination-jump .button {
  min-height: 2.5rem;
  padding-inline: .85rem;
  font-weight: 400;
}
.pagination-error {
  flex-basis: 100%;
  margin: 0;
  color: var(--danger, #dc2626);
  text-align: center;
}
.pagination-arrow,
.pagination-number,
.pagination-link,
.pagination-current,
.pagination-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: .4rem .7rem;
  border: 1px solid var(--library-border);
  border-radius: .45rem;
  background: var(--library-panel);
  color: var(--library-text);
  font-size: .9rem;
  line-height: 1;
  font-weight: 400;
  white-space: nowrap;
}
.pagination-control-text {
  display: inline;
  font-size: .86rem;
}
.pagination-previous,
.pagination-next {
  min-width: 6.5rem;
}
.pagination-disabled,
.pagination-arrow.disabled {
  color: var(--library-muted);
  background: color-mix(in srgb, var(--library-panel) 84%, var(--library-page));
  opacity: .65;
  cursor: not-allowed;
  pointer-events: none;
}
.pagination-current,
.pagination-number.active {
  background: var(--brand-900);
  border-color: var(--accent-500);
  color: var(--text-inverse);
}
.pagination-mobile-status {
  display: none;
}
.chapter-sticky-nav {
  position: sticky;
  top: 0;
  z-index: 18;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: -8px 0 10px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--library-panel) 94%, var(--library-page));
  border: 1px solid var(--library-border);
  border-radius: 8px;
  box-shadow: 0 8px 18px color-mix(in srgb, #000 16%, transparent);
}
.chapter-sticky-controls {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.chapter-sticky-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--library-border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-panel) 84%, var(--library-page));
  color: var(--library-text);
  font: inherit;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.15;
  cursor: pointer;
}
.chapter-sticky-controls button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.chapter-sticky-controls button:hover, .chapter-sticky-controls button:focus-visible {
  border-color: color-mix(in srgb, var(--library-accent) 58%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 82%, var(--library-accent));
}
.chapter-sticky-controls button:disabled:hover, .chapter-sticky-controls button:disabled:focus-visible {
  border-color: var(--library-border);
  background: color-mix(in srgb, var(--library-panel) 84%, var(--library-page));
}
.reading-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 6px;
  align-items: center;
  min-width: 0;
}
.reading-progress-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--library-border) 68%, var(--library-page));
}
.reading-progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #14b8a6;
}
.reading-progress-value {
  color: var(--library-muted);
  font-size: .74rem;
  font-weight: 400;
  text-align: right;
}
.reader {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 10px clamp(1rem, 2vw, 2.5rem) 14px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.reader-header {
  margin-bottom: .85rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--library-border) 78%, transparent);
  text-align: start;
}
.reader-header__title {
  margin: 0;
  color: var(--library-text);
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.reader-header__label {
  color: var(--library-muted);
}
.reader-header__value {
  color: var(--library-text);
}
.reader-header__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: .35rem .55rem;
  margin-top: .65rem;
  color: var(--library-muted);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
  overflow-wrap: anywhere;
}
.reader-header__meta > * {
  min-width: 0;
}
.reader-header__meta-item {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  min-width: 0;
  font-weight: 400;
}
.reader-header a,
.reader-header a:hover,
.reader-header a:focus,
.reader-header a:focus-visible,
.reader-header a:active,
.reader-header a:visited {
  text-decoration: none;
}
.reader-header .reader-author-link,
.reader-header .reader-meta-link {
  color: color-mix(in srgb, #dc2626 86%, var(--library-accent));
  font-weight: 400;
  overflow-wrap: anywhere;
}
.reader-header .reader-author-link:hover,
.reader-header .reader-author-link:focus-visible,
.reader-header .reader-meta-link:hover,
.reader-header .reader-meta-link:focus-visible {
  color: #dc2626;
}
.reader-header__meta strong {
  color: var(--library-text);
  font-weight: 400;
}
.reader-header__separator {
  color: color-mix(in srgb, var(--library-muted) 68%, transparent);
}
.reader-header__views {
  color: var(--library-text);
  white-space: nowrap;
}
.reader-header__icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.reader-header__like {
  color: #dc2626;
  font-weight: 400;
  white-space: nowrap;
}
.reader-header__like .content-like-form {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}
.reader-header__like .content-like {
  display: inline-flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: .25rem;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dc2626;
  font: inherit;
  font-weight: 400;
  line-height: inherit;
  white-space: nowrap;
}
.reader-header__like .content-like:hover,
.reader-header__like .content-like:focus,
.reader-header__like .content-like:active {
  background: transparent;
  text-decoration: none;
}
.reader-header__like .content-like-heart {
  width: 1rem;
  height: 1rem;
}
.reader-header__like .content-like-count {
  text-align: left;
}
.chapter-body {
  font-size: var(--reader-font-size, 18px);
  line-height: 1.85;
  font-weight: 400;
  overflow-wrap: anywhere;
  padding-top: 6px;
}
.chapter-body p {
  margin: 0 0 1.15em;
}
.reader-compact-footer {
  margin: 10px 0 12px;
  border: 1px solid var(--library-border);
  border-radius: 8px;
  background: var(--library-panel);
  overflow: hidden;
}
.reader-compact-footer a,
.reader-compact-footer a:hover,
.reader-compact-footer a:focus-visible,
.reader-compact-footer a:active,
.reader-compact-footer a:visited {
  text-decoration: none;
}
.reader-footer-like-row,
.reader-footer-pages,
.reader-footer-chapter-nav,
.reader-footer-author-rate {
  padding: 7px 10px;
}
.reader-footer-like-row + .reader-footer-pages,
.reader-footer-pages + .reader-footer-chapter-nav,
.reader-footer-chapter-nav + .reader-footer-author-rate {
  border-top: 1px solid var(--library-border);
}
.reader-footer-like-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  color: var(--library-muted);
  font-size: .94rem;
  font-weight: 400;
  line-height: 1.35;
}
.reader-comments-jump {
  color: color-mix(in srgb, #dc2626 82%, var(--library-accent));
  font-weight: 400;
}
.reader-footer-like .content-like-form {
  display: inline-flex;
  margin: 0;
  vertical-align: middle;
}
.reader-footer-like .content-like {
  flex-direction: row-reverse;
  gap: 5px;
  min-height: 28px;
  padding: 0 2px;
  color: #dc2626;
}
.reader-footer-like .content-like-heart {
  width: 1.05rem;
  height: 1.05rem;
}
.reader-footer-like .content-like-count {
  min-width: 1ch;
  text-align: left;
}
.reader-footer-pages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  flex-wrap: wrap;
}
.reader-footer-label {
  color: var(--library-muted);
  font-size: .84rem;
  font-weight: 400;
}
.reader-footer-pages .pagination {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.reader-footer-pages .pagination-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}
.reader-footer-pages .pagination-pages {
  align-items: center;
  gap: 4px;
  padding: 0 4px;
}
.reader-footer-pages .pagination-arrow,
.reader-footer-pages .pagination-number {
  min-width: 30px;
  min-height: 30px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: .82rem;
}
.reader-footer-pages .pagination-control-text {
  font-size: .78rem;
}
.reader-footer-pages .pagination-previous,
.reader-footer-pages .pagination-next {
  min-width: auto;
}
.reader-footer-pages .pagination-jump {
  gap: 5px;
  margin-top: 5px;
  font-size: .8rem;
}
.reader-footer-pages .pagination-jump input {
  width: 54px;
  min-height: 30px;
  padding: 4px 7px;
  text-align: center;
}
.reader-footer-pages .pagination-jump .button {
  min-height: 30px;
  padding: 4px 9px;
}
.story-description h1,
.story-description h2,
.story-description h3,
.story-description h4,
.chapter-body h1,
.chapter-body h2,
.chapter-body h3,
.chapter-body h4 {
  line-height: 1.35;
  margin: 1.1em 0 .55em;
  text-align: start;
}
.story-description hr,
.chapter-body hr {
  border: 0;
  border-top: 1px solid var(--library-border);
  margin: 1.4rem 0;
}
.story-description blockquote,
.chapter-body blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 3px solid color-mix(in srgb, var(--library-accent) 55%, var(--library-border));
  color: color-mix(in srgb, var(--library-text) 86%, var(--library-muted));
}
.story-description ul,
.story-description ol,
.chapter-body ul,
.chapter-body ol {
  margin: 0 0 1em 1.3em;
  padding: 0;
  text-align: start;
}
.story-description .ql-align-center,
.chapter-body .ql-align-center {
  text-align: center;
}
.story-description .ql-align-right,
.chapter-body .ql-align-right {
  text-align: right;
}
.story-description .ql-align-justify,
.chapter-body .ql-align-justify {
  text-align: justify;
}
.story-description .ql-size-small,
.chapter-body .ql-size-small {
  font-size: .85em;
}
.story-description .ql-size-large,
.chapter-body .ql-size-large {
  font-size: 1.25em;
}
.protected-reader-content {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.reader-footer-chapter-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  text-align: center;
}
.reader-footer-nav-link {
  display: block;
  min-width: 0;
  padding: 3px 10px;
  color: var(--library-text);
  overflow-wrap: anywhere;
}
.reader-footer-nav-link + .reader-footer-nav-link {
  border-left: 1px solid var(--library-border);
}
.reader-footer-nav-label {
  display: block;
  color: #dc2626;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.2;
}
.reader-footer-nav-title {
  display: block;
  margin-top: 1px;
  color: var(--library-text);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.28;
}
.reader-footer-author-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  flex-wrap: wrap;
  color: var(--library-muted);
  font-size: .92rem;
  line-height: 1.35;
}
.reader-footer-author,
.reader-footer-rating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.reader-footer-author {
  flex-wrap: wrap;
}
.reader-footer-rating {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.reader-footer-author a {
  color: var(--library-text);
  font-weight: 400;
}
.reader-footer-follow {
  display: inline-flex;
  margin: 0;
}
.reader-footer-follow button {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dc2626;
  font: inherit;
  font-weight: 400;
  line-height: 1.2;
  cursor: pointer;
}
.reader-footer-follow button.following {
  color: color-mix(in srgb, #dc2626 70%, var(--library-muted));
}
.reader-footer-rating a {
  color: color-mix(in srgb, #dc2626 82%, var(--library-accent));
  font-weight: 400;
}
.reader-footer-rating .reader-footer-rating-choices {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 3px;
  margin-top: 0;
  white-space: nowrap;
}
.reader-footer-rating .reader-footer-rating-choices button {
  flex: 0 0 auto;
  min-width: 23px;
  min-height: 24px;
  padding: 0 1px;
  line-height: 1;
}
.reader-footer-rating .reader-footer-rating-choices .rating-star {
  width: 21px;
  height: 21px;
}
.reader-footer-rating .reader-footer-rating-choices .rating-star-shape {
  font-size: 23px;
  text-shadow: none;
}
.reader-footer-rating .reader-footer-rating-choices .rating-label {
  display: none;
}
.reader-panel {
  width: 100%;
  padding: 14px;
  background: var(--library-panel);
  border: 1px solid var(--library-border);
  border-radius: 8px;
}
.chapter-list.compact {
  grid-template-columns: 1fr;
}
.chapter-row.active {
  border-color: color-mix(in srgb, var(--library-accent) 58%, var(--library-border));
  background: color-mix(in srgb, var(--library-panel) 88%, var(--library-accent));
}
.rating-panel {
  padding: 18px 24px;
}
.reader-feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
  overflow: hidden;
}
.reader-feedback-rating {
  min-width: 0;
}
.feedback-heading {
  margin: 0;
  color: var(--library-text);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.reader-feedback-like .feedback-heading {
  white-space: nowrap;
}
.rating-panel .meta {
  margin: 0;
  font-size: .95rem;
}
.rating-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 4px;
}
.rating-choices button {
  display: inline-grid;
  justify-items: center;
  gap: 1px;
  min-width: 70px;
  min-height: 88px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--library-text);
  font: inherit;
  cursor: pointer;
  transition: transform .16s ease;
}
.rating-choices button:hover, .rating-choices button:focus-visible {
  transform: translateY(-1px);
}
.rating-star {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 68px;
  height: 60px;
  color: var(--library-text);
  line-height: 1;
}
.rating-star-shape {
  font-size: 68px;
  line-height: 1;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
.rating-label {
  color: color-mix(in srgb, var(--library-text) 78%, var(--library-muted));
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .03em;
  line-height: 1.15;
  text-transform: uppercase;
}
.rating-choices button.is-active .rating-star-shape,
.rating-choices button:hover .rating-star-shape,
.rating-choices button:focus-visible .rating-star-shape {
  color: #dc2626;
  text-shadow: none;
}
.rating-choices button.is-active .rating-label,
.rating-choices button:hover .rating-label,
.rating-choices button:focus-visible .rating-label {
  color: #dc2626;
}
.reader-feedback-like {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
  max-width: none;
  justify-self: center;
  text-align: center;
}
.content-like-form {
  display: inline-flex;
  margin: 0;
}
.content-like {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-height: 34px;
  padding: 4px 6px;
  border: 0;
  background: transparent;
  color: var(--library-text);
  font: inherit;
  font-weight: 400;
  cursor: pointer;
}
.content-like.liked {
  color: #ef4444;
}
.content-like:disabled {
  cursor: wait;
  opacity: .7;
}
.content-like-heart {
  width: 1.4rem;
  height: 1.4rem;
  fill: currentColor;
}
.content-like-count {
  text-align: right;
}
.reader-feedback-like .content-like-form,
.reader-feedback-like .content-like {
  width: 100%;
  justify-content: center;
}
.rating-choices button:disabled {
  cursor: wait;
  opacity: .72;
}
.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: 42px;
  height: 42px;
  border: 1px solid var(--library-border);
  border-radius: 999px;
  background: var(--library-accent);
  color: white;
  font: inherit;
  font-weight: 400;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease;
}
.back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.stacked { display: grid; gap: 12px; }
input, textarea, select {
  width: 100%;
  border: 1px solid var(--library-border);
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
  background: var(--library-panel);
  color: var(--library-text);
}
.search { display: flex; gap: 10px; margin-bottom: 22px; }
@media (max-width: 720px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 12px;
    padding-block: 10px;
  }
  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-top: 36px;
  }
  .site-footer nav {
    gap: 4px 14px;
  }
  .site-header-actions { align-items: flex-start; justify-content: flex-start; gap: 10px; }
  .site-header .brand {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    min-height: 2.35rem;
  }
  .site-header .brand-logo {
    max-width: min(58vw, 190px);
    height: 2.75rem;
    min-height: 2.75rem;
    max-height: 2.75rem;
  }
  .site-header-actions {
    grid-column: auto;
    grid-row: auto;
    justify-self: end;
  }
  .site-header .menu-toggle {
    display: inline-flex;
  }
  .site-header .header-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    min-width: 0;
  }
  .site-header nav {
    grid-column: 1 / -1;
    grid-row: 3;
    display: none;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--library-border);
  }
  .site-header nav.is-open {
    display: flex;
  }
  .site-header nav a,
  .site-header .header-logout-form button {
    width: 100%;
    min-height: 40px;
  }
  .submission-page {
    padding-top: 18px;
  }
  .submission-panel {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding: 14px clamp(1rem, 2vw, 2.5rem);
    margin-inline: calc(clamp(1rem, 2vw, 2.5rem) * -1);
  }
  .submission-actions {
    flex-direction: column;
  }
  .submission-actions .button {
    width: 100%;
  }
  .story-detail { grid-template-columns: minmax(88px, 100px) minmax(0, 1fr); gap: 12px; border-radius: 0; border-left: 0; border-right: 0; }
  .story-detail-media { grid-column: 1; grid-row: 1; width: 100%; }
  .story-detail-media .cover { width: 100%; height: clamp(130px, 36vw, 145px); aspect-ratio: auto; }
  .story-detail-main { display: contents; }
  .story-detail-header { grid-column: 2; grid-row: 1; align-self: start; }
  .story-stats, .story-description, .story-detail-main .tag-list, .story-actions { grid-column: 1 / -1; }
  .story-author-card { align-items: flex-start; }
  .story-author-band .story-author-card form { width: 100%; }
  .story-author-band .story-author-card .button { width: 100%; }
  .story-detail-header .story-author-card {
    align-items: center;
    flex-wrap: wrap;
  }
  .story-detail-header .story-author-card form,
  .story-detail-header .story-author-card .button {
    width: auto;
  }
  .author-profile-header {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .author-profile-stats {
    justify-content: center;
  }
  .author-profile-stats span {
    white-space: normal;
  }
  .author-profile-follow, .author-profile-follow .button {
    width: 100%;
  }
  .authors-directory-controls {
    grid-template-columns: 1fr;
  }
  .author-card-grid, .author-card-grid.featured {
    grid-template-columns: 1fr;
  }
  .author-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .author-card-follow {
    justify-self: start;
    margin-left: 64px;
  }
  .pdf-reader-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .pdf-reader-actions .button {
    width: 100%;
  }
  .pdf-viewer-toolbar {
    justify-content: stretch;
  }
  .pdf-viewer-toolbar .button {
    flex: 1 1 120px;
  }
  .pdf-page-status {
    flex: 1 0 100%;
    text-align: center;
  }
  .pdf-library-search {
    grid-template-columns: 1fr;
  }
  .author-card-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .author-mini-list a {
    align-items: flex-start;
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .story-rank, .story-stat {
    justify-self: start;
  }
  .story-popular-stats {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  .author-mini-list span {
    white-space: normal;
  }
  .story-card-header { align-items: flex-start; gap: 8px; }
  .story-card-like-form, .story-card-like { margin-left: auto; }
  .story-row-meta { gap: 2px 8px; }
  .story-row-meta span { white-space: normal; }
  .hero-actions {
    display: flex;
    width: 100%;
    gap: 8px;
  }
  .hero-actions .button {
    width: 100%;
  }
  .pagination-arrow {
    height: 44px;
    font-size: 1.12rem;
  }
  .pagination-number {
    min-width: 38px;
    min-height: 40px;
    padding: 6px 0 8px;
    font-size: .92rem;
  }
  .stat-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .search { flex-direction: column; }
  .review-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .review-search {
    grid-column: 1 / -1;
  }
  .review-actions {
    grid-column: 1 / -1;
  }
  .review-actions .button {
    flex: 1 1 0;
  }
  .list a { display: grid; }
  .dashboard-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .dashboard-bookmark-row {
    grid-template-columns: 52px minmax(0, 1fr);
  }
  .dashboard-bookmark-cover {
    width: 52px;
  }
  .dashboard-row-main {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .dashboard-bookmark-row .dashboard-row-meta,
  .dashboard-bookmark-row .dashboard-bookmark-chapters,
  .dashboard-bookmark-row .dashboard-row-actions {
    grid-column: 1 / -1;
  }
  .dashboard-bookmark-chapters a {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .dashboard-row-meta span {
    white-space: normal;
  }
  .dashboard-row-actions {
    justify-content: stretch;
  }
  .dashboard-row-actions form {
    flex: 1 1 auto;
  }
  .dashboard-row-actions .button, .dashboard-empty .button {
    width: 100%;
  }
  .dashboard-empty {
    align-items: stretch;
    flex-direction: column;
  }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .story-related-row { grid-template-columns: 1fr; gap: 5px; }
  .chapter-sticky-nav {
    margin: -10px -1px 8px;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
    border-radius: 0 0 8px 8px;
  }
  .chapter-sticky-controls {
    gap: 5px;
  }
  .chapter-sticky-controls button {
    min-width: 40px;
    min-height: 36px;
    padding: 5px 8px;
    font-size: .72rem;
  }
  .reading-progress {
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 5px;
  }
  .reading-progress-track { height: 5px; }
  .reading-progress-value { font-size: .68rem; }
  .reader { margin-top: 0; border-left: 0; border-right: 0; border-radius: 0; }
  .reader-header {
    margin-bottom: .65rem;
    padding: .85rem .9rem;
    text-align: start;
  }
  .reader-header__title {
    font-size: 1.05rem;
    line-height: 1.4;
    font-weight: 400;
  }
  .reader-header__meta {
    gap: .3rem .45rem;
    justify-content: flex-start;
    font-size: .8rem;
    line-height: 1.4;
    text-align: start;
  }
  .reader-compact-footer {
    margin: 8px 0 10px;
  }
  .reader-footer-like-row,
  .reader-footer-pages,
  .reader-footer-chapter-nav,
  .reader-footer-author-rate {
    padding: 6px 8px;
  }
  .reader-footer-like-row {
    gap: 6px 8px;
    font-size: .9rem;
  }
  .reader-like-cta-text {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .reader-footer-label {
    display: none;
  }
  .reader-footer-pages {
    gap: 5px;
  }
  .reader-footer-pages .pagination {
    width: 100%;
    gap: 5px;
  }
  .reader-footer-pages .pagination-navigation {
    width: 100%;
    justify-content: center;
  }
  .reader-footer-pages .pagination-pages {
    gap: 3px;
    padding: 0 3px;
  }
  .reader-footer-pages .pagination-arrow {
    min-height: 32px;
    padding: 4px 8px;
  }
  .reader-footer-pages .pagination-number {
    min-width: 30px;
    min-height: 32px;
    padding: 5px 2px 6px;
  }
  .reader-footer-pages .pagination-jump {
    width: 100%;
    justify-content: center;
  }
  .reader-footer-chapter-nav {
    grid-template-columns: 1fr;
  }
  .reader-footer-nav-link {
    padding: 5px 8px;
  }
  .reader-footer-nav-link + .reader-footer-nav-link {
    border-top: 1px solid var(--library-border);
    border-left: 0;
  }
  .reader-footer-nav-label {
    font-size: .78rem;
  }
  .reader-footer-nav-title {
    font-size: .9rem;
    line-height: 1.25;
  }
  .reader-footer-author-rate {
    flex-direction: column;
    gap: 5px;
    font-size: .88rem;
    text-align: center;
  }
  .reader-footer-author {
    width: 100%;
    gap: 4px;
  }
  .reader-footer-rating {
    width: 100%;
    gap: 5px;
    flex-wrap: nowrap;
  }
  .reader-footer-divider {
    display: none;
  }
  .reader-footer-rating .reader-footer-rating-choices {
    gap: 3px;
  }
  .reader-footer-rating .reader-footer-rating-choices button {
    min-width: 22px;
    min-height: 24px;
  }
  .reader-footer-rating .reader-footer-rating-choices .rating-star {
    width: 20px;
    height: 20px;
  }
  .reader-footer-rating .reader-footer-rating-choices .rating-star-shape {
    font-size: 22px;
  }
  .chapter-body {
    text-align: start;
  }
  .story-description .lastpostkar,
  .chapter-body .lastpostkar {
    text-align: left;
  }
  .chapter-body .ql-align-justify {
    text-align: left;
  }
  .reader-feedback-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .reader-feedback-rating {
    text-align: center;
  }
  .reader-feedback-like {
    max-width: none;
    width: 100%;
    justify-items: stretch;
  }
  .reader-feedback-like .feedback-heading {
    white-space: normal;
  }
  .rating-choices { gap: 10px; justify-content: center; }
  .rating-choices button { min-width: 58px; min-height: 78px; }
  .rating-star { width: 58px; height: 52px; }
  .rating-star-shape { font-size: 58px; }
  .rating-label { font-size: .68rem; }
  .comment-replies {
    padding-left: 8px;
  }
  .comment-replies .comment-replies {
    padding-left: 8px;
  }
  .comment-replies .comment-replies .comment-replies {
    padding-left: 0;
  }
  .back-to-top { right: 14px; bottom: 14px; width: 40px; height: 40px; }
}
@media (min-width: 760px) {
  .hide-mobile {
    display: block;
  }
  .hide-desktop {
    display: none;
  }
  .submission-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submit-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .submission-form .field.span-2 { grid-column: 1 / -1; }
  .submission-type-options ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-choice-list > div,
  .category-choice-list ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .author-card-grid, .author-card-grid.featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pdf-bookshelf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .chapter-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-related-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .help-section {
    grid-template-columns: minmax(210px, 300px) minmax(0, 1fr);
    align-items: start;
    padding: 18px;
  }
}
@media (min-width: 1100px) {
  .author-profile-stats { flex-wrap: nowrap; }
  .dashboard-stat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (min-width: 1360px) {
  .pdf-bookshelf-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .library-home-header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .library-home-header.library-home-header-single { grid-template-columns: minmax(0, 1fr); }
  .library-layout { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; }
  .library-sidebar {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 12px;
  }
}

/* Current mobile-first frontend design system */
html { scroll-padding-top: 0; }
body {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-strong) 42%, transparent), transparent 230px), var(--page-bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}
a:hover, a:focus-visible { color: var(--accent-600); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-500) 70%, white); outline-offset: 3px; }
.site-header {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 8px max(12px, env(safe-area-inset-left)) 9px max(12px, env(safe-area-inset-right));
  background: linear-gradient(180deg, var(--brand-950), var(--brand-900));
  border: 0;
  box-shadow: 0 8px 24px rgba(31, 22, 12, 0.22);
}
.mobile-primary-bar { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.brand { min-width: 0; min-height: 2.35rem; color: var(--text-inverse); gap: .45rem; }
.brand:hover, .brand:focus-visible { color: var(--text-inverse); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  min-width: 3rem;
  min-height: 3rem;
  flex: 0 0 3rem;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.brand-copy { display: grid; min-width: 0; line-height: 1.1; }
.brand-name {
  display: block;
  overflow: hidden;
  font-size: .95rem;
  line-height: 1.2;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-tagline {
  display: block;
  overflow: hidden;
  color: color-mix(in srgb, var(--text-inverse) 72%, var(--accent-500));
  font-size: .66rem;
  line-height: 1.2;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-logo {
  width: auto;
  max-width: min(58vw, 190px);
  height: 3rem;
  min-height: 3rem;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: left center;
}
.site-header-actions { display: flex; align-items: center; gap: .3rem; flex: 0 0 auto; }
.menu-toggle, .theme-toggle, .header-icon-link {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  min-width: 2.35rem;
  min-height: 2.35rem;
  flex: 0 0 2.35rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent-500) 40%, var(--brand-700));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-800) 82%, var(--accent-500));
  color: var(--text-inverse);
  font: inherit;
  font-size: 1.15rem;
  cursor: pointer;
}
.ui-icon {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.header-search .ui-icon,
.site-search .ui-icon {
  margin-inline: auto;
}
.theme-icon-light,
.theme-toggle[data-theme-state="dark"] .theme-icon-dark {
  display: none;
}
.theme-toggle[data-theme-state="dark"] .theme-icon-light,
.theme-toggle[data-theme-state="light"] .theme-icon-dark {
  display: block;
}
.theme-toggle { border-radius: var(--radius-sm); }
.header-icon-link:hover, .header-icon-link:focus-visible, .menu-toggle:hover, .theme-toggle:hover {
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--brand-700) 74%, var(--accent-500));
}
.header-search, .site-search { display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 0; }
.header-search input, .site-search input {
  width: 100%;
  min-height: 46px;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--accent-500) 55%, var(--brand-700));
  border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: .98rem;
}
.header-search button, .site-search button {
  min-height: 46px;
  border: 1px solid var(--accent-500);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-500);
  color: var(--brand-950);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 400;
  cursor: pointer;
}
.primary-scroll-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0 0 2px;
  overflow-x: auto;
  overflow-y: hidden;
  color: color-mix(in srgb, var(--text-inverse) 78%, var(--accent-500));
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.primary-scroll-nav::-webkit-scrollbar { display: none; }
.primary-scroll-nav.is-open { display: flex; }
.primary-scroll-nav a, .primary-scroll-nav .header-logout-form button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .84rem;
  font-weight: 400;
  white-space: nowrap;
}
.primary-scroll-nav a[aria-current="page"],
.primary-scroll-nav a:hover,
.primary-scroll-nav a:focus-visible,
.primary-scroll-nav .header-logout-form button:hover,
.primary-scroll-nav .header-logout-form button:focus-visible {
  border-bottom-color: var(--accent-500);
  color: var(--accent-500);
}
main { min-width: 0; }
.home-shell, .content-band { width: min(100% - 20px, var(--content-max)); margin-inline: auto; }
.home-shell { padding-block: 10px 26px; }
.home-layout, .home-main { display: grid; gap: 12px; min-width: 0; }
.home-layout > *,
.home-main,
.home-rail,
.library-sidebar {
  min-width: 0;
  max-width: 100%;
}
.home-rail-categories, .home-rail-picks, .home-layout > .library-sidebar { display: none; }
.home-hero-summary {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.home-hero-summary h1,
.home-hero-summary h2,
.home-hero-summary p {
  margin: 0;
}
.home-hero-summary h1 {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.34rem);
  line-height: 1.2;
  font-weight: 400;
}
.home-hero-summary p {
  color: var(--text-secondary);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.55;
}
.home-hero-summary .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.homepage-announcement,
.homepage-continue-reading {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.homepage-reading-list {
  display: grid;
  gap: 8px;
}
.homepage-reading-item {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.homepage-reading-item a {
  overflow-wrap: anywhere;
  font-weight: 400;
}
.homepage-reading-action {
  color: var(--accent-600);
  font-size: .84rem;
}
.section-card {
  min-width: 0;
  max-width: 100%;
  overflow: clip;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.compact-section { padding: 12px; }
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: .65rem .75rem;
  border-bottom: 1px solid var(--border);
}
.section-heading h1, .section-heading h2, .section-heading h3 {
  min-width: 0;
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(.98rem, .96rem + .08vw, 1.05rem);
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
  overflow-wrap: break-word;
  word-break: normal;
}
.section-link { flex: 0 0 auto; max-width: 45%; color: var(--accent-600); font-size: .82rem; font-weight: 400; text-align: end; white-space: nowrap; overflow-wrap: normal; }
.story-list { display: grid; min-width: 0; max-width: 100%; }
.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  max-width: 100%;
  padding: .62rem .75rem;
  background: var(--surface);
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
.story-row:last-child { border-bottom: 0; }
.story-row:hover { background: color-mix(in srgb, var(--surface) 82%, var(--accent-soft)); }
.story-row__main {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  color: inherit;
}
.story-row__icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--accent-600);
  font-size: .86rem;
}
.story-row__content { display: grid; gap: 4px; min-width: 0; max-width: 100%; }
.story-row__title {
  display: block;
  min-width: 0;
  color: var(--text-primary);
  font-size: clamp(.94rem, .91rem + .14vw, 1.03rem);
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: normal;
}
.story-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .4rem;
  margin-top: .18rem;
  color: var(--text-secondary);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.35;
}
.story-row__like {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  pointer-events: auto;
}
.story-card-like-form, .content-like-form { display: inline-flex; align-items: center; justify-content: center; min-width: 0; max-width: 100%; }
.story-card-like, .content-like {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 3.75rem;
  min-height: 2.75rem;
  padding: .35rem .55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--heart-idle);
  font: inherit;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.story-card-like:hover, .story-card-like:focus-visible, .content-like:hover, .content-like:focus-visible {
  border-color: var(--border);
  background: var(--surface-soft);
}
.story-card-like:focus-visible, .content-like:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-500) 65%, white);
  outline-offset: 2px;
}
.story-card-like.liked, .content-like.liked,
.story-card-like[aria-pressed="true"], .content-like[aria-pressed="true"] { color: var(--heart-active); }
.story-card-heart, .content-like-heart { width: 1.55rem; height: 1.55rem; flex: 0 0 auto; fill: currentColor; pointer-events: none; }
.story-card-like-count, .content-like-count { min-width: 1ch; font-size: .9rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.story-card-like:disabled, .content-like:disabled,
.story-card-like[data-loading="true"], .content-like[data-loading="true"] {
  cursor: wait;
  opacity: .68;
}
.rank-list { display: grid; }
.rank-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .55rem;
  align-items: start;
  padding: .65rem 12px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  min-width: 0;
  max-width: 100%;
}
.rank-row:last-child { border-bottom: 0; }
.rank-row:hover { background: var(--surface-soft); }
.rank-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 1.9rem;
  margin-top: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-900);
  color: var(--accent-500);
  font-size: .82rem;
  font-weight: 400;
}
.rank-copy { display: grid; gap: .2rem; min-width: 0; max-width: 100%; }
.rank-copy strong {
  display: block;
  color: var(--text-primary);
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.35;
  min-width: 0;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
.rank-copy span { color: var(--text-secondary); font-size: .75rem; font-weight: 400; }
.rank-views {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  min-width: 0;
  margin-top: 0;
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.25;
}
.rank-views__icon {
  width: .9rem;
  height: .9rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.compact-section .category-grid { padding: 0; }
.category-chip {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-primary);
  font-size: .84rem;
  font-weight: 400;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.category-chip span:last-child { min-width: 0; overflow-wrap: break-word; word-break: normal; white-space: normal; }
.category-chip:hover, .category-chip:focus-visible {
  border-color: var(--accent-500);
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--accent-soft));
}
.category-chip__icon { color: var(--accent-600); }
.pdf-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr));
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  overscroll-behavior-inline: contain;
  padding: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pdf-strip::-webkit-scrollbar { display: none; }
.pdf-book-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  scroll-snap-align: start;
}
.pdf-book-cover {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--brand-900), var(--brand-700));
  color: var(--accent-500);
  font-size: 2rem;
  font-weight: 400;
}
.pdf-book-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdf-book-copy { display: grid; gap: 2px; min-width: 0; max-width: 100%; }
.pdf-book-copy strong {
  min-width: 0;
  max-width: 100%;
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.pdf-book-meta, .pdf-book-stats {
  min-width: 0;
  max-width: 100%;
  color: var(--text-secondary);
  font-size: .73rem;
  font-weight: 400;
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.submission-cta {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-950), var(--brand-800));
  color: var(--text-inverse);
  box-shadow: var(--shadow-soft);
}
.submission-cta h2, .submission-cta p { margin: 0; }
.submission-cta h2 { font-size: clamp(1.02rem, .98rem + .28vw, 1.18rem); font-weight: 400; line-height: 1.3; }
.submission-cta p { color: color-mix(in srgb, var(--text-inverse) 78%, var(--accent-500)); }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  border-color: var(--accent-500);
  border-radius: var(--radius-sm);
  background: var(--accent-500);
  color: var(--brand-950);
  font-weight: 400;
  white-space: normal;
  text-align: center;
}
.button:hover, .button:focus-visible { background: var(--accent-600); color: var(--text-inverse); }
.button.secondary { border-color: var(--border-strong); background: var(--surface-soft); color: var(--accent-600); }
.pagination {
  display: block;
  margin: 10px 0 0;
  padding: .75rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.pagination-navigation { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.pagination-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; min-width: 0; }
.pagination-arrow, .pagination-number, .pagination-link, .pagination-current, .pagination-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 2.6rem;
  min-height: 2.6rem;
  padding: .4rem .7rem;
  border: 1px solid var(--border);
  border-radius: .45rem;
  background: var(--surface-soft);
  color: var(--text-primary);
  font-size: .9rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}
.pagination-previous, .pagination-next { min-width: 6.5rem; }
.pagination-disabled, .pagination-arrow.disabled { color: var(--text-secondary); background: var(--surface-soft); opacity: .65; cursor: not-allowed; pointer-events: none; }
.pagination-current, .pagination-number.active { border-color: var(--accent-500); background: var(--brand-900); color: var(--text-inverse); }
.pagination-control-text { font-size: .86rem; }
.pagination-mobile-status { display: none; }
.pagination-jump { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: .65rem; color: var(--text-secondary); font-size: .84rem; }
.pagination-jump input { width: 4.25rem; min-height: 2.5rem; padding: .35rem .45rem; border-color: var(--border); border-radius: var(--radius-sm); text-align: center; }
.pagination-jump button, .pagination-jump .button { min-height: 2.5rem; padding-inline: .85rem; font-weight: 400; }
.site-footer {
  display: block;
  margin-top: 24px;
  padding: 20px 14px calc(88px + env(safe-area-inset-bottom));
  border: 0;
  background: var(--brand-950);
  color: color-mix(in srgb, var(--text-inverse) 78%, var(--accent-500));
}
.site-footer__inner {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.site-footer a, .site-footer strong { color: var(--text-inverse); }
.site-footer a, .site-footer p { font-weight: 400; }
.site-footer strong { font-weight: 400; }
.footer-brand { display: grid; gap: 6px; }
.footer-brand p { margin: 0; }
.footer-legal-note { max-width: 62ch; font-size: .78rem; line-height: 1.45; }
.mobile-bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 5px max(6px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-right));
  background: var(--brand-950);
  border-top: 1px solid color-mix(in srgb, var(--accent-500) 40%, var(--brand-700));
  box-shadow: 0 -8px 22px rgba(31, 22, 12, .22);
}
.mobile-bottom-nav a {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 48px;
  color: color-mix(in srgb, var(--text-inverse) 72%, var(--accent-500));
  min-width: 0;
  font-size: .62rem;
  font-weight: 400;
  line-height: 1.1;
  text-align: center;
}
.mobile-bottom-nav a .ui-icon { width: 20px; height: 20px; }
.mobile-bottom-nav a span:last-child {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}
.mobile-bottom-nav a[aria-current="page"], .mobile-bottom-nav a:hover, .mobile-bottom-nav a:focus-visible { color: var(--accent-500); }
.story-detail {
  gap: 14px;
  border-color: var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.story-detail-media .cover { border-radius: var(--radius-sm); box-shadow: none; }
.story-detail-main h1, .reader-header__title { letter-spacing: 0; overflow-wrap: anywhere; }
.story-detail-badges .story-stats, .inline-stats { color: var(--text-secondary); }
.chapter-row { border-color: var(--border); background: var(--surface); }
.chapter-index { background: var(--brand-900); color: var(--accent-500); }
.reader {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.reader-header { text-align: start; }
.reader-header__meta { justify-content: flex-start; color: var(--text-secondary); }
.reader-author-link, .reader-meta-link { color: var(--accent-600); text-decoration: none; }
.chapter-body, .reader-content {
  width: min(100%, 58rem);
  margin-inline: auto;
  font-family: var(--font-reading);
  font-size: var(--reader-font-size, 18px);
  line-height: 1.85;
  text-align: justify;
  text-justify: inter-word;
}
.reader-footer-chapter-nav { display: grid; grid-template-columns: 1fr; gap: 8px; }
.reader-footer-nav-link {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.reader-footer-nav-title { overflow-wrap: anywhere; }
.mobile-only-section { display: block; }
@media (max-width: 720px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .mobile-primary-bar {
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    gap: .45rem;
  }
  .brand {
    overflow: hidden;
    width: 100%;
  }
  .brand-mark {
    display: inline-flex;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    flex-basis: 2.75rem;
  }
  .brand-name {
    overflow: hidden;
    font-size: .95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .brand-tagline {
    display: none;
  }
  .site-header-actions {
    gap: .3rem;
  }
  .menu-toggle,
  .theme-toggle,
  .header-icon-link {
    width: 2.35rem;
    height: 2.35rem;
    min-width: 2.35rem;
    min-height: 2.35rem;
    flex: 0 0 2.35rem;
  }
  .mobile-primary-bar,
  .header-search,
  .site-search,
  .site-nav {
    grid-column: 1 / -1;
  }
  .mobile-primary-bar {
    grid-row: auto;
  }
  .header-search,
  .site-search {
    grid-row: auto;
  }
  .site-nav {
    display: flex;
    grid-row: auto;
    flex-direction: row;
    align-items: center;
    border-top: 0;
  }
  .site-nav a,
  .site-header .header-logout-form button {
    width: auto;
  }
  .home-shell, .content-band { width: min(100% - 16px, var(--content-max)); }
  .section-card { border-radius: var(--radius-sm); }
  .story-row { padding-inline: 10px; }
  .story-row__main { grid-template-columns: 24px minmax(0, 1fr); gap: 7px; }
  .story-row__icon { width: 24px; height: 24px; }
  .story-detail { grid-template-columns: minmax(82px, 96px) minmax(0, 1fr); }
  .reader-footer-like-row { align-items: start; }
  .chapter-body,
  .reader-content {
    text-align: start;
  }
}
@media (max-width: 30rem) {
  .pagination-page-number,
  .pagination-ellipsis,
  .pagination-pages {
    display: none;
  }
  .pagination-mobile-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6rem;
    padding-inline: .5rem;
    font-size: .85rem;
    color: var(--text-secondary);
    white-space: nowrap;
  }
  .pagination-previous,
  .pagination-next {
    flex: 1 1 0;
    min-width: auto;
  }
  .pagination-jump {
    gap: .35rem;
  }
}
@media (max-width: 24rem) {
  .brand-tagline {
    display: none;
  }
}
@media (max-width: 22rem) {
  .mobile-primary-bar {
    grid-template-columns: 1.95rem minmax(0, 1fr) auto;
    gap: .35rem;
  }
  .brand-mark {
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
    min-height: 2.4rem;
    flex-basis: 2.4rem;
  }
  .brand-logo {
    height: 2.4rem;
    min-height: 2.4rem;
    max-width: min(54vw, 170px);
  }
  .menu-toggle,
  .theme-toggle,
  .header-icon-link {
    width: 1.95rem;
    height: 1.95rem;
    min-width: 1.95rem;
    min-height: 1.95rem;
    flex-basis: 1.95rem;
  }
  .brand-tagline {
    display: none;
  }
  .story-row {
    gap: .45rem;
  }
  .story-card-like,
  .content-like {
    min-width: 3rem;
    padding-inline: .35rem;
  }
}
@media (min-width: 520px) {
  .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pdf-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    grid-auto-columns: auto;
    gap: .75rem;
    overflow: visible;
    padding: 12px;
  }
}
@media (max-width: 32.49rem) {
  .pdf-strip {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: .65rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    padding: .75rem;
  }
  .pdf-strip::-webkit-scrollbar { display: none; }
  .pdf-book-card {
    min-width: 0;
    max-width: 100%;
    scroll-snap-align: start;
  }
}
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .site-header { padding-inline: clamp(18px, 3vw, 38px); }
  .mobile-primary-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-toggle { display: none; }
  .mobile-primary-bar,
  .header-search,
  .site-search,
  .primary-scroll-nav {
    width: min(calc(100vw - 64px), var(--content-max));
    margin-inline: auto;
    justify-self: center;
  }
  .mobile-bottom-nav { display: none; }
  .site-footer { padding: 24px clamp(18px, 3vw, 38px); }
  .site-footer__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    width: min(calc(100vw - 64px), var(--content-max));
    margin-inline: auto;
  }
  .submission-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .reader-footer-chapter-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  html { scroll-padding-top: 0; }
  :root {
    --content-max: 1280px;
  }
  .home-shell {
    width: min(100% - 64px, var(--content-max));
    padding-block: 16px 34px;
  }
  .primary-scroll-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .55rem;
    overflow: visible;
    white-space: normal;
    scrollbar-width: auto;
  }
  .primary-scroll-nav a,
  .primary-scroll-nav .header-logout-form button {
    flex: 0 1 auto;
    min-width: 0;
    padding-inline: 4px;
    font-size: .82rem;
    font-weight: 400;
    white-space: normal;
  }
  .home-layout {
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr) minmax(270px, 300px);
    align-items: start;
    gap: .65rem;
  }
  .home-hero-summary:not(.library-home-header-single) {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    align-items: start;
  }
  .home-rail-categories {
    display: block;
    position: sticky;
    top: 1rem;
    align-self: start;
    min-width: 0;
    max-width: 100%;
    height: fit-content;
    max-height: none;
    overflow: visible;
  }
  .home-rail-picks,
  .home-layout > .library-sidebar {
    display: block;
    position: sticky;
    top: 1rem;
    align-self: start;
    min-width: 0;
    max-width: 100%;
    height: fit-content;
    max-height: none;
    overflow: visible;
  }
  .mobile-only-section { display: none; }
  .home-rail-categories .category-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .home-rail-categories .category-chip {
    grid-template-columns: 22px minmax(0, 1fr);
    min-height: 34px;
    padding: 7px 4px;
    border-width: 0 0 1px;
    border-color: var(--border);
    border-radius: 0;
    background: transparent;
    font-size: .84rem;
    font-weight: 400;
  }
  .home-rail-categories .category-chip:hover,
  .home-rail-categories .category-chip:focus-visible {
    background: var(--surface-soft);
  }
  .home-rail-categories .category-chip span:last-child {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .latest-section .story-row {
    padding-block: .58rem;
  }
  .story-row__title {
    font-size: clamp(.98rem, .94rem + .13vw, 1.05rem);
  }
  .pdf-strip {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    overflow: visible;
  }
  .pdf-book-cover {
    max-height: 260px;
  }
}
@media (min-width: 1280px) {
  .home-layout {
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr) minmax(270px, 300px);
  }
  .pdf-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  :root {
    --content-max: 1280px;
  }
  .home-layout {
    grid-template-columns: minmax(250px, 280px) minmax(0, 1fr) minmax(270px, 300px);
  }
  .home-rail-picks,
  .home-layout > .library-sidebar {
    display: block;
    position: sticky;
    top: 1rem;
    align-self: start;
    min-width: 0;
    height: fit-content;
    max-height: none;
    overflow: visible;
  }
}