:root {
  --color-page: #f7f7f9;
  --color-panel: #ffffff;
  --color-text: #111827;
  --color-muted: #64748b;
  --color-border: #e2e4e8;
  --color-accent: #0ea583;
  --color-accent-hover: #087f66;
  --color-success-bg: #dcfce7;
  --color-success-text: #166534;
  --color-error-bg: #fef2f2;
  --color-error-text: #b91c1c;
  --color-warning-bg: #fff7ed;
  --color-warning-text: #9a3412;
  --radius-card: 14px;
  --radius-control: 10px;
  --shadow-panel: 0 8px 24px rgba(15, 23, 42, 0.04);
}

* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; background: var(--color-page); color: var(--color-text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.5; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(14, 165, 131, 0.42); outline-offset: 3px; }
.container { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 2; padding: 10px 14px; background: var(--color-text); color: white; border-radius: var(--radius-control); }
.skip-link:focus { top: 12px; }
.site-header { background: var(--color-panel); border-bottom: 1px solid var(--color-border); }
.header-inner, .footer-inner { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.brand { color: var(--color-text); font-weight: 750; text-decoration: none; letter-spacing: -0.01em; }
.main-nav { display: flex; gap: 22px; color: var(--color-muted); font-size: 15px; }
.main-nav a, .back-link { text-decoration: none; }
.main-nav a:hover, .back-link:hover { color: var(--color-accent-hover); }
.account-nav { display: flex; gap: 10px; margin-left: auto; }
.account-nav form { margin: 0; }
.account-name { max-width: 180px; overflow: hidden; color: var(--color-muted); font-size: 14px; text-overflow: ellipsis; text-decoration: none; white-space: nowrap; }
.page-content { min-height: calc(100vh - 145px); padding-block: 52px 72px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 36px; }
.compact-heading { margin-bottom: 24px; }
.eyebrow { display: block; margin-bottom: 8px; color: var(--color-accent-hover); font-size: 13px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 680px; margin-bottom: 10px; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.08; letter-spacing: -0.035em; }
h2 { margin-bottom: 10px; font-size: 1.25rem; line-height: 1.2; }
.lede { max-width: 650px; margin-bottom: 0; color: var(--color-muted); font-size: 17px; }
.panel { background: var(--color-panel); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-panel); }
.toolbar { display: flex; align-items: flex-end; gap: 16px; padding: 18px 20px; margin-bottom: 32px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%); }
.field { min-width: 0; }
.field-search { flex: 1 1 320px; }
.field-genre { flex: 0 1 200px; }
.field label { display: block; margin-bottom: 7px; color: var(--color-muted); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
input, select, textarea { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-panel); color: var(--color-text); }
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: #94a3b8; }
input:focus, select:focus, textarea:focus { border-color: var(--color-accent); outline: 3px solid rgba(14, 165, 131, 0.16); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius-control); cursor: pointer; font-weight: 700; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.button:disabled { cursor: not-allowed; opacity: 0.52; }
.button-primary { background: var(--color-accent); color: white; }
.button-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.button-secondary { border-color: var(--color-border); background: white; color: var(--color-text); }
.button-secondary:hover:not(:disabled) { border-color: #b8c0cb; background: #f8fafc; }
.button-small { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.empty-state { display: grid; justify-items: center; padding: 64px 24px; text-align: center; }
.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border-radius: 50%; background: #e8f8f3; color: var(--color-accent-hover); font-size: 23px; }
.empty-state p { margin-bottom: 24px; color: var(--color-muted); }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.book-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; min-height: 320px; transition: transform 150ms ease, box-shadow 150ms ease; }
.book-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08); }
.book-card .card-cover { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: linear-gradient(135deg, #e8f8f3 0%, #f4fbf9 100%); border-bottom: 1px solid var(--color-border); }
.book-card .card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 22px; }
.book-card h2 { margin-bottom: 12px; font-size: 1.35rem; line-height: 1.3; overflow-wrap: break-word; font-weight: 700; }
.book-card h2 a { text-decoration: none; }
.book-card h2 a:hover { color: var(--color-accent-hover); }
.book-description { display: -webkit-box; overflow: hidden; color: var(--color-muted); -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow-wrap: break-word; margin-bottom: 14px; }
.card-stats { margin: 0 0 18px; font-size: 13px; color: var(--color-muted); }
.book-card .card-footer { margin-top: auto; align-items: center; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--color-border); font-size: 13px; }
.book-card .card-footer .muted { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-detail-layout, .tree-shell, .path-shell { max-width: 900px; margin-inline: auto; }
.book-hero { padding: clamp(24px, 5vw, 48px); }
.book-hero h1 { margin-top: 18px; }
.book-hero .muted { margin-top: 24px; }
.detail-actions, .reading-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.detail-actions form { display: flex; flex-wrap: wrap; gap: 10px; }
.job-status-line { margin-top: 26px; }
.draft-shell { max-width: 900px; margin-inline: auto; }
.draft-chapters { display: grid; gap: 18px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.dashboard-section { padding: 20px; }
.dashboard-row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-top: 1px solid var(--color-border); text-decoration: none; }
.dashboard-row:hover strong { color: var(--color-accent-hover); }
.history-panel { margin-top: 20px; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: white; }
.history-panel h2 { margin-bottom: 14px; }
.history-panel details { padding: 12px 0; border-top: 1px solid var(--color-border); }
.history-panel summary { cursor: pointer; font-weight: 700; }
.history-panel p { margin: 8px 0 0; font-size: 14px; }
.continuation-list { display: grid; gap: 10px; }
.suggestion-list { display: grid; gap: 10px; margin-top: 16px; }
.suggestion-card { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: white; }
.continuation-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; text-decoration: none; }
.continuation-card:hover { border-color: var(--color-accent); }
.continuation-card strong { min-width: 0; }
.path-heading { margin-bottom: 28px; }
.path-chapter { padding: clamp(20px, 4vw, 36px); margin-bottom: 18px; }
.path-chapter h2 { margin-bottom: 24px; }
.path-chapter h2 a { text-decoration: none; }
.path-chapter .reading-body { margin-top: 0; }
.tree-panel { padding: clamp(18px, 4vw, 30px); margin-top: 28px; }
.tree-node > a { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: var(--radius-control); text-decoration: none; }
.tree-node > a:hover { background: #f0faf7; }
.tree-node small { display: block; margin-top: 3px; color: var(--color-muted); }
.tree-depth { display: grid; flex: 0 0 32px; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e8f8f3; color: var(--color-accent-hover); font-size: 13px; font-weight: 750; }
.tree-children { padding-left: 22px; margin-left: 16px; border-left: 1px solid var(--color-border); }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.pagination-label { margin-right: auto; color: var(--color-muted); font-size: 14px; }
.page-number { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--color-accent); border-radius: var(--radius-control); background: #e8f8f3; color: var(--color-accent-hover); font-weight: 750; }
.site-footer { border-top: 1px solid var(--color-border); background: white; color: var(--color-muted); font-size: 14px; }
.footer-inner { justify-content: space-between; min-height: 72px; }
.reading-shell { width: min(760px, 100%); margin-inline: auto; }
.back-link { display: inline-block; margin-bottom: 20px; color: var(--color-muted); font-size: 14px; }
.reading-panel { padding: clamp(24px, 5vw, 52px); }
.reading-meta, .card-footer, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.reading-meta { margin-bottom: 30px; color: var(--color-muted); font-size: 14px; }
.reading-panel h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.reading-intro { color: var(--color-muted); font-size: 18px; }
.reading-body { margin-top: 36px; font-family: Georgia, serif; font-size: 19px; line-height: 1.7; }
.continuation-section { margin-top: 36px; }
.muted { color: var(--color-muted); }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.badge-neutral { background: #f1f5f9; color: var(--color-muted); }
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-error { background: var(--color-error-bg); color: var(--color-error-text); }
.component-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.component-section, .demo-card { padding: 24px; }
.component-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.demo-form { display: grid; gap: 18px; }
.field-error { margin: 7px 0 0; color: var(--color-error-text); font-size: 14px; }
.message-stack { display: grid; gap: 10px; margin-bottom: 20px; }
.message { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: white; }
.message-success { border-color: #bbf7d0; background: var(--color-success-bg); color: var(--color-success-text); }
.message-error { border-color: #fecaca; background: var(--color-error-bg); color: var(--color-error-text); }
.message-info { background: #eff6ff; color: #1d4ed8; }
.demo-card { max-width: 540px; }
.demo-card h2 { margin-top: 18px; }
.auth-layout, .profile-layout { width: min(560px, 100%); margin-inline: auto; }
.auth-panel { padding: clamp(24px, 5vw, 44px); }
.auth-form { display: grid; gap: 18px; margin-top: 28px; }
.auth-switch { margin: 22px 0 0; color: var(--color-muted); font-size: 14px; text-align: center; }
.auth-switch a { color: var(--color-accent-hover); font-weight: 700; }
.profile-card { display: flex; align-items: center; gap: 18px; padding: 24px; margin-bottom: 20px; }
.profile-card h2 { margin-bottom: 4px; }
.profile-card .muted { margin-bottom: 12px; }
.profile-avatar { display: grid; flex: 0 0 56px; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #e8f8f3; color: var(--color-accent-hover); font-size: 24px; font-weight: 750; }

.catalog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; }
.catalog-main { min-width: 0; }
.live-books { position: sticky; top: 24px; max-height: 480px; display: flex; flex-direction: column; overflow: hidden; }
.live-books-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--color-border); background: linear-gradient(135deg, #e8f8f3 0%, #f4fbf9 100%); }
.live-books-header h2 { margin: 0; font-size: 1rem; font-weight: 750; }
.live-indicator { width: 10px; height: 10px; border-radius: 50%; background: var(--color-accent); animation: live-pulse 2s ease-in-out infinite; }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.live-books-list { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: grid; gap: 6px; align-content: start; }
.live-book-item { display: block; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease; }
.live-book-item:hover { background: #f8fafc; border-color: #b8c0cb; }
.live-book-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; overflow-wrap: break-word; }
.live-book-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--color-muted); }
.live-book-book { font-weight: 600; }
.live-book-author { }
.live-book-date { margin-left: auto; white-space: nowrap; }
.live-books-loading { padding: 12px; text-align: center; }

@media (max-width: 1024px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .live-books { position: static; max-height: none; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
  .book-card { min-height: 300px; }
  .book-card:hover { transform: none; box-shadow: var(--shadow-panel); }
  .book-card { transition: none; }
}

@media (max-width: 760px) {
  .book-grid { gap: 18px; }
  .book-card { min-height: 280px; }
  .book-card:hover { transform: none; box-shadow: var(--shadow-panel); }
  .book-card { transition: none; }
  .container { width: min(100% - 28px, 680px); }
  .header-inner { flex-wrap: wrap; gap: 12px 20px; padding-block: 14px; }
  .main-nav { order: 3; width: 100%; gap: 18px; }
  .account-nav { margin-left: auto; }
  .account-name { max-width: 110px; }
  .page-content { padding-block: 36px 52px; }
  .page-heading { align-items: start; flex-direction: column; gap: 20px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-action { width: 100%; }
  .component-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .footer-inner { align-items: start; flex-direction: column; justify-content: center; gap: 4px; }
}

@media (max-width: 420px) {
  .book-grid { grid-template-columns: 1fr; gap: 16px; }
  .book-card { min-height: 260px; }
  .book-card:hover { transform: none; box-shadow: var(--shadow-panel); }
  .book-card { transition: none; }
}
/* Library, reader and workshop */
:root { --color-accent: #087f66; --color-accent-hover: #06624f; --reader-font-size: 19px; }
html { overflow-x: clip; }
h1, h2, h3, p, a, strong { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
h3 { line-height: 1.3; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.brand-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e1f3ec; color: var(--color-accent); font-size: 22px; }
.header-inner { gap: 24px; }
.main-nav a { padding: 10px 0; border-bottom: 2px solid transparent; }
.main-nav a[aria-current] { color: var(--color-accent-hover); border-bottom-color: var(--color-accent); font-weight: 700; }
.account-nav { align-items: center; }
.account-menu { position: relative; max-width: 160px; }
.account-menu summary { padding: 10px; cursor: pointer; overflow-wrap: anywhere; }
.account-popover { position: absolute; z-index: 10; right: 0; top: 100%; min-width: 180px; padding: 16px; display: grid; gap: 12px; }
.account-popover > a { padding: 8px; }
.button-small { min-height: 44px; }
.page-content { padding-top: 36px; }
.view-tabs { display: flex; gap: 28px; border-bottom: 1px solid var(--color-border); margin-bottom: 24px; }
.view-tabs a { padding: 12px 0; text-decoration: none; color: var(--color-muted); border-bottom: 3px solid transparent; }
.view-tabs a[aria-current] { color: var(--color-accent); border-color: var(--color-accent); font-weight: 700; }
.toolbar { flex-wrap: wrap; }
.field-search { flex: 1 1 240px; }
.field-genre { flex: 0 1 160px; }
.check-label { display: flex; align-items: center; gap: 8px; min-height: 44px; white-space: nowrap; }
input[type=checkbox] { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; accent-color: var(--color-accent); }
.checkbox-field { display: flex; gap: 10px; align-items: center; }
.checkbox-field label { margin: 0; font-size: 15px; color: var(--color-text); }
.book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.book-card .card-footer { flex-wrap: wrap; }
.chapter-feed, .workshop-list { display: grid; gap: 20px; }
.feed-item { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px; }
.feed-item > div { min-width: 0; }
.feed-item .button { flex-shrink: 0; }
.feed-item h2 { margin-top: 8px; }
.reader-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.reader-toolbar > a { min-width: 0; text-decoration: none; font-weight: 650; }
.reader-toolbar > div { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.text-size { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-muted); }
.text-size select { width: 150px; }
.reader-layout { display: grid; grid-template-columns: 240px minmax(0, 760px); gap: 32px; align-items: start; justify-content: center; }
.reader-main { min-width: 0; }
.reader-outline { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
.reader-outline summary { padding: 12px; cursor: pointer; font-weight: 750; }
.reader-outline nav { display: grid; gap: 4px; margin-block: 8px 16px; }
.reader-outline nav a { display: flex; gap: 12px; align-items: baseline; padding: 12px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.reader-outline nav a span { color: var(--color-muted); flex-shrink: 0; }
.reader-outline nav a[aria-current] { background: #e1f3ec; color: var(--color-accent-hover); font-weight: 700; }
.reader-outline nav a:hover { background: #eef2f0; }
.outline-path { display: block; padding: 12px; font-size: 14px; }
.reading-body { font-size: var(--reader-font-size); }
.reading-panel h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
.reading-actions { justify-content: space-between; }
.branch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.branch-card { padding: 22px; text-decoration: none; transition: border-color 120ms; }
.branch-card:hover { border-color: var(--color-accent); }
.branch-card h3 { margin-block: 16px 10px; }
.branch-card p { color: var(--color-muted); font-size: 15px; }
.author-invitation { padding: 28px; margin-top: 32px; background: #edf7f2; }
.ideas-disclosure { margin-top: 24px; }
summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.tree-node > a { min-width: 0; }
.tree-node > a > span:last-child { min-width: 0; }
.tree-node.on-path > a { background: #eef7f2; }
.tree-node > a[aria-current] { border: 2px solid var(--color-accent); }
.tree-node summary { padding-left: 12px; color: var(--color-muted); font-size: 14px; }
.tree-children { margin-left: 8px; padding-left: 12px; }
.tree-children .tree-children .tree-children .tree-children { margin-left: 0; padding-left: 4px; }
.attention-panel { padding: 26px; margin-bottom: 28px; border-color: #add7c4; background: #edf7f2; }
.attention-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.attention-list a { display: flex; justify-content: space-between; gap: 16px; padding: 14px; background: white; border-radius: 8px; text-decoration: none; }
.attention-list a span { color: var(--color-accent); font-size: 14px; }
.workshop-book { padding: 28px; }
.workshop-book > header { margin-bottom: 18px; }
.work-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 20px; padding: 18px 0; border-top: 1px solid var(--color-border); }
.work-row small { display: block; color: var(--color-muted); margin-top: 5px; }
.creation-shell { max-width: 1000px; margin-inline: auto; }
.creation-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.creation-context { padding: 26px; background: #edf7f2; }
.creation-context .muted { margin-top: 20px; margin-bottom: 0; }
.creation-grid h1, .job-panel h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.workflow-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 32px; padding: 0; }
.workflow-steps li { display: flex; align-items: center; gap: 8px; color: var(--color-muted); font-size: 14px; border-bottom: 2px solid var(--color-border); padding-bottom: 14px; }
.workflow-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e9ecef; flex-shrink: 0; }
.workflow-steps li[aria-current] { color: var(--color-accent); font-weight: 700; border-color: var(--color-accent); }
.workflow-steps li[aria-current] span { background: var(--color-accent); color: white; }
.optional { font-weight: 400; }
.job-panel { max-width: 700px; margin-inline: auto; }
.job-status-line { margin-bottom: 12px; }
.generation-orbit { color: var(--color-accent); font-size: 48px; margin: 26px 0; }
.history-panel { max-width: 700px; margin-inline: auto; }
.publish-panel { padding: 28px; margin-top: 24px; }
.pagination { flex-wrap: wrap; }
@media (max-width: 1024px) {
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-layout { grid-template-columns: 190px minmax(0, 1fr); gap: 20px; }
  .header-inner { flex-wrap: wrap; gap: 14px 20px; padding-block: 14px; }
  .creation-grid { grid-template-columns: 230px minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .header-inner { gap: 8px 12px; }
  .brand { font-size: 13px; }
  .brand-symbol { display: none; }
  .account-menu { max-width: 110px; font-size: 13px; }
  .main-nav { justify-content: center; }
  .page-content { padding-block: 24px 40px; }
  .toolbar .field { flex: none; width: 100%; }
  .reader-layout, .creation-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .reader-toolbar { flex-direction: column; align-items: stretch; }
  .reader-toolbar > div { flex-wrap: wrap; justify-content: space-between; }
  .reader-outline { position: sticky; top: 0; z-index: 3; max-height: 50vh; background: #f7f7f9; border: 1px solid var(--color-border); border-radius: 10px; }
  .reader-outline nav { max-height: 30vh; overflow-y: auto; }
  .reading-panel { padding: 24px; }
  .branch-grid, .attention-list { grid-template-columns: 1fr; }
  .feed-item { flex-direction: column; align-items: stretch; padding: 22px; }
  .workshop-book { padding: 20px; }
  .workshop-book > header { align-items: start; flex-direction: column; }
  .work-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .work-row > .button { grid-column: 1 / -1; }
  .workflow-steps { gap: 6px; }
  .workflow-steps li { flex-direction: column; font-size: 11px; text-align: center; gap: 7px; }
  .creation-context { padding: 20px; }
  .tree-children { padding-left: 6px; margin-left: 3px; }
  .tree-children .tree-children .tree-children { padding-left: 0; margin-left: 0; border-left: 0; }
}
@media (max-width: 480px) {
  .book-grid { grid-template-columns: minmax(0, 1fr); }
  .account-nav { gap: 4px; }
  .account-nav .button { padding: 8px; font-size: 12px; }
  .account-menu { max-width: 82px; }
  .reading-actions .button { width: 100%; }
  .reading-meta { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.account-menu summary { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-map-link { display: none; }
@media (max-width: 760px) {
  .attention-list a { flex-direction: column; gap: 6px; }
  .mobile-map-link { display: block; padding: 8px 12px; color: var(--color-accent); font-size: 13px; min-height: 40px; }
}


/* Support conversations and notification badge. */
.support-shell { max-width: 820px; margin-inline: auto; }
.support-form, .support-ticket, .support-message { padding: clamp(16px, 4vw, 28px); margin-block: 20px; }
.support-form .field { margin-bottom: 18px; }
.support-ticket h2 { margin: 0; }
.support-message header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.support-message time { color: var(--color-muted); font-size: 14px; }
.support-body, .support-ticket h2, .support-shell h1 { overflow-wrap: anywhere; }
.support-answer { border-left: 4px solid var(--color-accent); }
.support-bell { display: inline-flex; align-items: center; justify-content: center; position: relative; min-width: 44px; min-height: 44px; color: var(--color-text); border-radius: 12px; }
.support-bell:hover { background: #eef7f2; }
.support-count { position: absolute; top: 0; right: -3px; background: #137b68; color: white; border-radius: 20px; padding: 1px 5px; font-size: 12px; min-width: 18px; text-align: center; }
.support-count[hidden] { display: none; }
@media (max-width: 600px) { .account-nav { flex-wrap: wrap; } .footer-inner { flex-wrap: wrap; gap: 14px; } }

/* First-visit guide. */
.guide-shell { max-width: 900px; margin-inline: auto; }
.guide-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-block: 24px 32px; }
.guide-links a { color: var(--color-accent-hover); }
.guide-section { padding: clamp(20px, 4vw, 36px); margin-bottom: 24px; scroll-margin-top: 20px; }
.guide-steps { padding-left: 24px; }
.guide-steps li { padding-left: 6px; margin-bottom: 16px; }
.guide-note { background: #eef7f2; border-left: 3px solid var(--color-accent); padding: 18px; margin-block: 24px; border-radius: 8px; }
.guide-sizes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.guide-sizes dt { font-weight: 700; margin-bottom: 8px; }
.guide-sizes dd { margin: 0; }
.guide-section .ideas-disclosure { margin-bottom: 20px; }
.main-nav { flex-wrap: wrap; }
@media (max-width: 1000px) { .header-inner { flex-wrap: wrap; padding-block: 16px; gap: 16px; } }
@media (max-width: 600px) { .guide-sizes { grid-template-columns: 1fr; } }

 .chapter-title-row { display: flex; align-items: flex-start; gap: 16px; }
.chapter-title-row h1 { flex: 1; min-width: 0; }
.chapter-share { position: relative; flex-shrink: 0; }
.share-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-panel); color: var(--color-accent-hover); cursor: pointer; }
.share-icon[hidden] { display: none; }
.share-icon:hover { background: var(--color-bg); }
.share-icon:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.share-toast:not(:empty) { position: absolute; right: 0; top: 52px; z-index: 10; width: max-content; max-width: 230px; padding: 10px 14px; border-radius: 10px; background: #123e35; color: white; font-size: 14px; box-shadow: 0 4px 16px #0002; }
.share-invitation { padding: 24px; margin-bottom: 24px; }
.path-chapter[id] { scroll-margin-top: 20px; }

.illustration-editor { padding: 28px; } .chapter-illustration { margin: 32px 0 0; } .chapter-illustration-image { display: block; width: 100%; height: auto; border-radius: 12px; margin-bottom: 12px; } .chapter-illustration figcaption { font-size: 14px; }
.illustration-prompt { margin: 20px 0; } .illustration-prompt summary { cursor: pointer; font-weight: 600; } .illustration-prompt pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; max-height: 420px; overflow-y: auto; padding: 16px; border: 1px solid var(--color-border); border-radius: 10px; }
.character-panel { margin-top: 20px; padding: 20px; } .creation-sidebar { min-width: 0; } .character-panel > summary { cursor: pointer; font-weight: 700; } .characters-more { margin-top: 16px; } .characters-more > summary { cursor: pointer; color: var(--color-accent-hover); font-weight: 600; } .characters-hide, .characters-more[open] > summary .characters-show { display: none; } .characters-more[open] > summary .characters-hide { display: inline; } .character-panel h3 { margin: 0 0 10px; } .character-note { font-size: 13px; } .character-card { padding: 14px 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; } .character-card h4 { margin: 0 0 6px; } .character-card p { margin: 6px 0; font-size: 14px; line-height: 1.55; } .character-card summary { cursor: pointer; font-size: 13px; }

.characters-collapse { margin-top: 18px; width: 100%; } .characters-collapse[hidden] { display: none; }

.generation-usage { padding: 16px 20px; margin-bottom: 22px; } .generation-usage > span { display: block; margin-top: 4px; } .generation-usage details { margin-top: 8px; font-size: 14px; } .generation-usage summary { cursor: pointer; }

.chapter-read-counts { display: block; margin-top: 5px; font-size: 13px; color: var(--color-muted); } .reading-stats { font-size: 14px; }

.brand-mark { flex-shrink: 0; border-radius: 9px; }
.lit-hero { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; gap: 32px; padding: clamp(24px, 4vw, 48px); margin-bottom: 28px; background: linear-gradient(115deg, #f1f8f3, #fffdf7); }
.lit-hero h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.18; letter-spacing: -.025em; margin: 16px 0; }
.lit-hero h1 span { color: #087f66; }
.lit-hero-art { width: 100%; max-width: 240px; }
.lit-hero .lede { max-width: 650px; }
#stories { scroll-margin-top: 90px; }
.card-stats { color: #087f66; font-weight: 600; }
@media (max-width: 760px) { .lit-hero { grid-template-columns: 1fr; } .lit-hero-art { display: none; } .brand-mark { width: 28px; height: 28px; } }

/* Give the completed path its own comfortable reading rhythm. */
.story-ending {
  padding: clamp(24px, 4vw, 36px);
}
.story-ending h2 { margin: 0 0 12px; }
.story-ending p { margin: 0 0 24px; line-height: 1.65; }
.story-ending .button { max-width: 100%; white-space: normal; }