:root {
  --paper: #f5eddf;
  --paper-raised: #fffaf1;
  --ink: #302b27;
  --muted: #746b62;
  --accent: #b8643f;
  --accent-soft: #ead1bd;
  --line: #d8c8b6;
  --reader-font-size: 19px;
  --reader-line-height: 1.8;
  --font-scale: 1;
  color-scheme: light;
  font-family: Georgia, "Times New Roman", "Noto Serif CJK SC", serif;
  background: var(--paper);
  color: var(--ink);
}

html[data-theme="night"] {
  --paper: #282522;
  --paper-raised: #332e29;
  --ink: #f2e5d4;
  --muted: #b7a99a;
  --accent: #d88961;
  --accent-soft: #5d4032;
  --line: #584b40;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
button, a { min-width: 44px; min-height: 44px; }
button { border: 1px solid var(--line); border-radius: 10px; background: var(--paper-raised); color: var(--ink); cursor: pointer; }
button:hover, button:focus-visible, a:focus-visible { border-color: var(--accent); outline: 3px solid var(--accent-soft); outline-offset: 2px; }
a { color: inherit; }
.app-bar { align-items: center; background: color-mix(in srgb, var(--paper-raised) 92%, transparent); border-bottom: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; min-height: 64px; padding: .5rem clamp(1rem, 3vw, 2.5rem); position: sticky; top: 0; z-index: 20; }
.brand { font-size: 1.25rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.app-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.app-actions button { padding: 0 .7rem; }
.offline-status { align-items: center; color: var(--muted); display: inline-flex; font-size: .82rem; min-height: 44px; white-space: nowrap; }
[data-pwa-install] { background: var(--accent); border-color: var(--accent); color: #fffaf1; font-weight: 700; }
.view { margin: 0 auto; max-width: 1440px; padding: clamp(1rem, 4vw, 3rem); }
.continuation-hero { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 10px 30px rgb(48 43 39 / 8%); max-width: 850px; padding: clamp(1.5rem, 5vw, 4rem); }
.eyebrow { color: var(--accent); font-size: .85rem; font-weight: 700; letter-spacing: .12em; margin: 0 0 .5rem; text-transform: uppercase; }
h1, h2, h3, h4 { line-height: 1.3; }
h1 { font-size: clamp(2rem, 5vw, 3.8rem); margin: 0 0 1rem; }
h2 { margin: 0; }
.muted { color: var(--muted); }
.primary-button, .secondary-button { align-items: center; display: inline-flex; justify-content: center; padding: .55rem 1rem; text-decoration: none; }
.primary-button { background: var(--accent); border-color: var(--accent); color: #fffaf1; font-weight: 700; }
.secondary-button { border: 1px solid var(--line); border-radius: 10px; }
.home-section { margin-top: clamp(2rem, 5vw, 4rem); }
.section-heading { align-items: baseline; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.recent-grid, .shelf { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recent-slot { min-height: 120px; padding: 1rem; text-align: left; }
.recent-slot:empty { background: transparent; border-style: dashed; cursor: default; }
.recent-slot strong, .shelf-card strong { display: block; font-size: 1.05rem; line-height: 1.4; }
.recent-slot span, .shelf-card span { color: var(--muted); display: block; margin-top: .4rem; }
.shelf { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.shelf-card { align-items: flex-start; display: flex; flex-direction: column; min-height: 130px; padding: 1rem; text-align: left; }
.shelf-number { color: var(--accent); font-size: .9rem; font-weight: 700; }
.reader-view { max-width: none; padding: 0; }
.reader-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.reader-sidebar { background: var(--paper-raised); border-right: 1px solid var(--line); height: calc(100vh - 64px); overflow-y: auto; padding: 1.25rem 1rem; position: sticky; top: 64px; z-index: 10; }
.sidebar-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: .8rem; }
.sidebar-heading h2 { font-size: 1.15rem; }
.sidebar-heading button { font-size: 1.5rem; line-height: 1; }
.chapter-nav { display: grid; gap: .25rem; }
.chapter-link { border: 0; border-radius: 8px; min-height: 44px; padding: .6rem .7rem; text-align: left; }
.chapter-link[aria-current="page"] { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.reader-column { min-width: 0; }
.reader-toolbar { align-items: center; background: var(--paper); display: flex; gap: 1rem; min-height: 56px; padding: .5rem clamp(1rem, 4vw, 3rem); }
.back-link { align-items: center; display: inline-flex; text-decoration: none; }
.reader-title { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-track { background: var(--accent-soft); height: 4px; }
.progress-value { background: var(--accent); display: block; height: 100%; transform-origin: left center; width: 0; }
.article-scroll { height: calc(100vh - 124px); overflow: auto; overscroll-behavior: contain; }
.article-host { font-size: calc(var(--reader-font-size) * var(--font-scale)); line-height: var(--reader-line-height); margin: 0 auto; max-width: 850px; padding: 2rem clamp(1.25rem, 5vw, 4rem) 6rem; }
.article-host h1 { font-size: 2.1em; }
.article-host h2 { border-bottom: 1px solid var(--line); font-size: 1.55em; margin-top: 2.6rem; padding-bottom: .4rem; }
.article-host h3 { font-size: 1.2em; margin: 1.2rem 0 .2rem; }
.article-host h4 { font-size: 1.05em; }
.article-host details.topic { border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent); padding: .25rem 0 .5rem; }
.article-host details.topic > summary { cursor: pointer; list-style-position: outside; min-height: 44px; padding: .2rem 0; }
.article-host details.topic > summary h3 { display: inline; }
.article-host p { margin: .9rem 0; }
.article-host .internal-link { color: var(--accent); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .15em; }
.article-host .link-disabled { color: var(--muted); }
.article-host img { height: auto; max-width: 100%; }
.article-host table { border-collapse: collapse; min-width: 620px; }
.article-host th, .article-host td { border: 1px solid var(--line); padding: .45rem .65rem; text-align: left; vertical-align: top; }
.article-host th { background: var(--accent-soft); }
.article-host .chapter-table { min-width: 0; width: 100%; }
.article-host .table-scroll, .article-host table { max-width: 100%; }
.article-host .table-scroll { overflow-x: auto; }
.article-host pre, .article-host code { font-family: "Cascadia Mono", Consolas, monospace; }
.article-host pre { background: color-mix(in srgb, var(--paper-raised) 75%, var(--accent-soft)); overflow-x: auto; padding: 1rem; white-space: pre; }
.article-host code { white-space: pre-wrap; }
.reader-error { margin: 8vh auto; max-width: 620px; padding: 2rem; text-align: center; }
.error-actions { display: flex; gap: .75rem; justify-content: center; }
.drawer-backdrop { background: rgb(0 0 0 / 38%); inset: 0; position: fixed; z-index: 8; }
#search-dialog { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 16px; color: var(--ink); max-width: min(720px, calc(100vw - 2rem)); padding: 0; width: 720px; }
#search-dialog::backdrop { background: rgb(48 43 39 / 45%); }
.search-form { padding: 1.25rem; }
.dialog-heading { align-items: center; display: flex; justify-content: space-between; }
.dialog-heading h2 { font-size: 1.35rem; }
.dialog-heading button { font-size: 1.5rem; }
.search-form label { color: var(--muted); display: block; margin: 1rem 0 .35rem; }
.search-form input { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); min-height: 48px; padding: .5rem .75rem; width: 100%; }
.search-results { display: grid; gap: .5rem; margin-top: 1rem; max-height: 55vh; overflow: auto; }
.search-result { min-height: 64px; padding: .65rem .75rem; text-align: left; }
.search-result strong { display: block; }
.search-result small { color: var(--muted); display: block; margin-top: .2rem; }
.update-banner { align-items: center; background: var(--ink); bottom: 1rem; color: var(--paper-raised); display: flex; gap: .75rem; left: 1rem; padding: .6rem 1rem; position: fixed; right: 1rem; z-index: 40; }
.update-banner button { min-height: 38px; }

@media (min-width: 820px) {
  .reader-sidebar { box-shadow: 4px 0 12px rgb(48 43 39 / 4%); }
  .drawer-backdrop, [data-action="close-contents"] { display: none; }
}

@media (max-width: 819px) {
  .app-bar { align-items: flex-start; flex-direction: column; }
  .app-actions { width: 100%; }
  .app-actions button { flex: 1 1 44px; }
  .recent-grid { grid-template-columns: 1fr; }
  .reader-layout { display: block; }
  .reader-sidebar { bottom: 0; box-shadow: 8px 0 24px rgb(48 43 39 / 20%); height: auto; left: 0; max-width: 310px; position: fixed; top: 0; transform: translateX(-105%); transition: transform .2s ease; width: min(82vw, 310px); z-index: 10; }
  .reader-view[data-drawer-open="true"] .reader-sidebar { transform: translateX(0); }
  .reader-view[data-drawer-open="true"] .drawer-backdrop { display: block; }
  .article-scroll { height: calc(100vh - 124px); }
  .article-host { padding-top: 1.25rem; }
}