:root {
      color-scheme: light dark;
      --bg: #f7f1e8;
      --paper: #fffaf2;
      --paper-warm: #f6efe3;
      --text: #2f2a24;
      --text-strong: #261f19;
      --muted: #756b5f;
      --muted-soft: #948879;
      --accent: #7a5636;
      --accent-strong: #5f432a;
      --accent-soft: #efe3d3;
      --border: #e4d8c8;
      --border-soft: #eee4d7;
      --shadow: 0 18px 48px rgba(69, 48, 30, 0.08);
      --shadow-soft: 0 8px 28px rgba(69, 48, 30, 0.055);
      --content-width: 1120px;
      --reader-width: 780px;
      --reader-font-size: clamp(18px, 1.35vw, 21px);
      --reader-line-height: 1.95;
      --radius: 10px;
      --radius-sm: 6px;
      --tap-size: 44px;
      --font-reader: "LXGW WenKai", "Source Han Serif SC", "Noto Serif CJK SC", "Songti SC", "SimSun", serif;
      --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, Monaco, monospace;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #18130f;
        --paper: #241d17;
        --paper-warm: #2b231c;
        --text: #eadfce;
        --text-strong: #fff4df;
        --muted: #b7aa98;
        --muted-soft: #928575;
        --accent: #c59b67;
        --accent-strong: #e1bc84;
        --accent-soft: #3a2d20;
        --border: #473a2d;
        --border-soft: #382d23;
        --shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
        --shadow-soft: 0 8px 28px rgba(0, 0, 0, 0.14);
      }
    }

    * { box-sizing: border-box; }

    html {
      min-width: 360px;
      background: var(--bg);
      font-family: var(--font-reader);
      -webkit-text-size-adjust: 100%;
      text-rendering: optimizeLegibility;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 0%, rgba(122, 86, 54, 0.045), transparent 34rem),
        linear-gradient(90deg, rgba(122, 86, 54, 0.025) 0 1px, transparent 1px 100%),
        var(--bg);
      background-size: auto, 28px 28px, auto;
      font-family: var(--font-reader);
      line-height: 1.7;
    }

    a {
      color: var(--accent-strong);
      text-decoration: none;
      text-underline-offset: 0.18em;
    }

    a:hover { text-decoration: underline; }

    a:focus-visible,
    button:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: var(--radius-sm);
    }

    img, table, pre, code { max-width: 100%; }

    .site-shell {
      width: min(100%, var(--content-width));
      margin: 0 auto;
      padding: 24px 18px 48px;
    }

    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 10px 0 28px;
    }

    .site-mark {
      color: var(--text-strong);
      font-size: 19px;
      font-weight: 500;
      letter-spacing: 0.08em;
    }

    .site-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 18px;
      color: var(--muted);
      font-size: 15px;
    }

    .site-nav a {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      color: var(--muted);
    }

    .page-hero { padding: 24px 0 30px; }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--accent);
      font-size: 13px;
      letter-spacing: 0.16em;
    }

    .page-title {
      margin: 0;
      color: var(--text-strong);
      font-size: clamp(34px, 9vw, 72px);
      font-weight: 500;
      line-height: 1.12;
      letter-spacing: 0.02em;
    }

    .page-deck {
      max-width: 700px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: clamp(17px, 4.4vw, 21px);
      line-height: 1.75;
    }

    .bookshelf {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }

    .book-card,
    .volume,
    .error-panel {
      background: linear-gradient(180deg, var(--paper), var(--paper-warm));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
    }

    .book-card {
      display: grid;
      gap: 18px;
      padding: 22px;
    }

    .book-title {
      margin: 0;
      color: var(--text-strong);
      font-size: clamp(24px, 7vw, 34px);
      font-weight: 500;
      line-height: 1.25;
    }

    .book-summary {
      margin: 10px 0 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.75;
    }

    .book-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--muted-soft);
      font-size: 14px;
    }

    .book-meta li {
      padding: 4px 8px;
      background: var(--accent-soft);
      border-radius: 4px;
    }

    .book-actions,
    .chapter-nav,
    .error-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .reader-button {
      min-height: var(--tap-size);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 16px;
      color: var(--paper);
      background: var(--accent-strong);
      border: 1px solid var(--accent-strong);
      border-radius: var(--radius-sm);
      font-size: 15px;
      line-height: 1.2;
      text-decoration: none;
    }

    .reader-button:hover {
      text-decoration: none;
      background: var(--accent);
    }

    .reader-button.secondary {
      color: var(--accent-strong);
      background: transparent;
      border-color: var(--border);
    }

    .reader-button[aria-disabled="true"] {
      color: var(--muted-soft);
      background: transparent;
      border-color: var(--border-soft);
      pointer-events: none;
    }

    .catalog-header {
      padding: 26px 0 24px;
      border-bottom: 1px solid var(--border);
    }

    .catalog-title {
      margin: 0;
      color: var(--text-strong);
      font-size: clamp(34px, 10vw, 68px);
      font-weight: 500;
      line-height: 1.12;
    }

    .catalog-intro {
      max-width: 760px;
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.85;
    }

    .catalog-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 20px;
      margin-top: 18px;
      color: var(--muted-soft);
      font-size: 14px;
    }

    .volume-list {
      display: grid;
      gap: 22px;
      margin-top: 28px;
    }

    .volume { padding: 20px; }

    .volume-title {
      margin: 0 0 14px;
      color: var(--text-strong);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.35;
    }

    .chapter-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .chapter-link {
      min-height: var(--tap-size);
      display: flex;
      align-items: center;
      padding: 9px 11px;
      color: var(--text);
      border: 1px solid transparent;
      border-radius: var(--radius-sm);
    }

    .chapter-link:hover,
    .chapter-link:focus-visible {
      background: var(--accent-soft);
      border-color: var(--border);
      text-decoration: none;
    }

    .reader-layout {
      width: min(100%, calc(var(--reader-width) + 48px));
      margin: 0 auto;
      padding: 18px 18px 52px;
    }

    .reader-topnav {
      display: grid;
      gap: 8px;
      padding: 10px 0 18px;
      color: var(--muted);
      font-size: 14px;
    }

    .reader-topnav a {
      width: max-content;
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      color: var(--accent-strong);
    }

    .reader-crumb {
      color: var(--muted);
      line-height: 1.55;
    }

    .reader-article {
      width: 100%;
      max-width: var(--reader-width);
      margin: 0 auto;
      padding: clamp(24px, 6vw, 48px) clamp(18px, 5vw, 42px);
      background:
        linear-gradient(90deg, rgba(122, 86, 54, 0.025) 0 1px, transparent 1px 100%),
        var(--paper);
      background-size: 32px 32px, auto;
      border: 1px solid var(--border-soft);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .chapter-header {
      margin-bottom: 28px;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--border-soft);
      text-align: center;
    }

    .chapter-kicker {
      margin: 0 0 8px;
      color: var(--muted-soft);
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .chapter-title {
      margin: 0;
      color: var(--text-strong);
      font-size: clamp(28px, 8vw, 42px);
      font-weight: 500;
      line-height: 1.28;
    }

    .reader-body {
      color: var(--text);
      font-size: var(--reader-font-size);
      line-height: var(--reader-line-height);
      letter-spacing: 0.02em;
    }

    .reader-body p {
      margin: 0 0 1em;
      text-indent: 2em;
    }

    .reader-body h2,
    .reader-body h3,
    .reader-body h4,
    .reader-body ul,
    .reader-body ol,
    .reader-body blockquote,
    .reader-body pre,
    .reader-body table,
    .reader-body figure,
    .reader-body .no-indent {
      text-indent: 0;
    }

    .reader-body h2,
    .reader-body h3,
    .reader-body h4 {
      color: var(--text-strong);
      font-weight: 500;
      line-height: 1.35;
    }

    .reader-body h2 {
      margin: 2.4em 0 0.9em;
      font-size: 1.35em;
    }

    .reader-body h3 {
      margin: 2em 0 0.75em;
      font-size: 1.16em;
    }

    .reader-body blockquote {
      margin: 1.8em 0;
      padding: 0.15em 0 0.15em 1.1em;
      color: var(--muted);
      border-left: 2px solid var(--accent);
    }

    .reader-body blockquote p { text-indent: 0; }

    .reader-body hr {
      width: 36%;
      min-width: 120px;
      margin: 2.4em auto;
      border: 0;
      border-top: 1px solid var(--border);
    }

    .reader-body ul,
    .reader-body ol {
      margin: 1.2em 0;
      padding-left: 1.6em;
    }

    .reader-body li + li { margin-top: 0.3em; }

    .reader-body img {
      display: block;
      height: auto;
      margin: 1.5em auto;
      border-radius: 6px;
    }

    .reader-body figure { margin: 1.8em 0; }

    .reader-body figcaption {
      margin-top: 0.6em;
      color: var(--muted-soft);
      font-size: 0.78em;
      line-height: 1.55;
      text-align: center;
    }

    .reader-body table {
      width: 100%;
      margin: 1.6em 0;
      border-collapse: collapse;
      font-size: 0.88em;
      line-height: 1.6;
    }

    .reader-body th,
    .reader-body td {
      padding: 0.62em 0.72em;
      border: 1px solid var(--border);
      vertical-align: top;
    }

    .reader-body th {
      color: var(--text-strong);
      background: var(--paper-warm);
      font-weight: 500;
    }

    .reader-body pre {
      overflow-x: auto;
      margin: 1.6em 0;
      padding: 1em;
      color: var(--text);
      background: var(--paper-warm);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font: 0.78em/1.65 var(--font-mono);
    }

    .reader-body code {
      font-family: var(--font-mono);
      font-size: 0.82em;
    }

    .reader-footer {
      max-width: var(--reader-width);
      margin: 22px auto 0;
    }

    .chapter-nav {
      display: grid;
      grid-template-columns: 1fr;
    }

    .chapter-nav .reader-button { width: 100%; }

    .error-page {
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 24px 18px;
    }

    .error-panel {
      width: min(100%, 680px);
      padding: clamp(26px, 7vw, 46px);
    }

    .error-code {
      margin: 0 0 10px;
      color: var(--accent);
      font: 500 13px/1 var(--font-reader);
      letter-spacing: 0.14em;
    }

    .error-title {
      margin: 0;
      color: var(--text-strong);
      font-size: clamp(30px, 9vw, 56px);
      font-weight: 500;
      line-height: 1.16;
    }

    .error-copy {
      margin: 16px 0 24px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.8;
    }

    .demo-note {
      width: min(100%, 1120px);
      margin: 0 auto;
      padding: 20px 18px 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.7;
    }

    @media (min-width: 680px) {
      .site-shell { padding: 34px 32px 72px; }

      .book-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        padding: 28px;
      }

      .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .chapter-nav { grid-template-columns: repeat(3, 1fr); }
    }

    @media (min-width: 960px) {
      .site-shell { padding: 48px 48px 96px; }
      .bookshelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .chapter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .reader-layout { padding-top: 30px; }
    }

    @media (max-width: 520px) {
      .site-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .reader-article {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
      }
    }

.login-form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.login-label {
  color: var(--muted);
  font-size: 15px;
}

.login-input {
  min-height: var(--tap-size);
  width: 100%;
  padding: 11px 13px;
  color: var(--text-strong);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: 18px/1.4 var(--font-reader);
}

.login-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}



/* Smooth cross-document navigation for static chapter pages.
   Supported browsers will fade between same-origin pages; unsupported browsers ignore it. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 160ms;
  animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms;
  }
}

/* Reduce visual jump on mobile tap/click. */
html {
  scrollbar-gutter: stable;
}

.reader-button,
.chapter-link,
.site-nav a,
.site-mark {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.reader-button:active,
.chapter-link:active {
  transform: translateY(0);
}

/* Avoid focus ring lingering after mouse/touch click while keeping keyboard accessibility. */
.reader-button:focus:not(:focus-visible),
.chapter-link:focus:not(:focus-visible),
.site-nav a:focus:not(:focus-visible),
.site-mark:focus:not(:focus-visible) {
  outline: none;
}



/* Polished token login page */
.login-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(22px, 6vw, 54px) 18px;
  background:
    radial-gradient(circle at 22% 12%, rgba(122, 86, 54, 0.10), transparent 22rem),
    radial-gradient(circle at 78% 84%, rgba(122, 86, 54, 0.07), transparent 26rem),
    linear-gradient(90deg, rgba(122, 86, 54, 0.022) 0 1px, transparent 1px 100%),
    var(--bg);
  background-size: auto, auto, 30px 30px, auto;
}

.login-panel {
  position: relative;
  width: min(100%, 760px);
  overflow: hidden;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(255, 250, 242, 0.92), rgba(246, 239, 227, 0.92)),
    var(--paper);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(69, 48, 30, 0.12);
}

.login-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(122, 86, 54, 0.035) 0 1px, transparent 1px 100%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.38), transparent 22rem);
  background-size: 32px 32px, auto;
}

.login-card-inner {
  position: relative;
  display: grid;
  gap: 0;
}

.login-brand {
  padding: clamp(26px, 7vw, 48px) clamp(22px, 7vw, 56px) 18px;
  border-bottom: 1px solid var(--border-soft);
}

.login-eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 13px;
  letter-spacing: 0.18em;
}

.login-title {
  max-width: 9em;
  margin: 0;
  color: var(--text-strong);
  font-size: clamp(36px, 10vw, 68px);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.02em;
}

.login-copy {
  max-width: 35em;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1.8;
}

.login-form-wrap {
  padding: clamp(22px, 6vw, 42px) clamp(22px, 7vw, 56px) clamp(26px, 7vw, 52px);
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-field {
  display: grid;
  gap: 8px;
}

.login-label {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.login-input-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.login-input {
  width: 100%;
  min-height: 54px;
  padding: 12px 14px;
  color: var(--text-strong);
  background: rgba(255, 250, 242, 0.72);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
  font: 20px/1.35 var(--font-reader);
  letter-spacing: 0.02em;
}

.login-input::placeholder {
  color: var(--muted-soft);
}

.login-input:focus {
  border-color: var(--accent);
}

.login-input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 26%, transparent);
  outline-offset: 2px;
}

.login-submit {
  min-height: 54px;
  border-radius: 10px;
  font-size: 17px;
  white-space: nowrap;
}

.login-help {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 2px 0 0;
  color: var(--muted-soft);
  font-size: 14px;
  line-height: 1.6;
}

.login-help code {
  padding: 0.1em 0.38em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.login-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  line-height: 1.6;
}

.login-secondary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

@media (min-width: 720px) {
  .login-card-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  }

  .login-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 420px;
    border-right: 1px solid var(--border-soft);
    border-bottom: 0;
  }

  .login-form-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .login-input-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}

@media (prefers-color-scheme: dark) {
  .login-panel {
    background:
      linear-gradient(180deg, rgba(36, 29, 23, 0.94), rgba(43, 35, 28, 0.94)),
      var(--paper);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
  }

  .login-input {
    background: rgba(24, 19, 15, 0.54);
  }
}



/* In-page chapter navigation loading state */
.reader-article {
  transition: opacity 120ms ease-out;
}

html.is-reader-loading .reader-article {
  opacity: 0.82;
}

html.is-reader-loading .chapter-nav .reader-button {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reader-article {
    transition: none;
  }
}



.reader-shortcuts {
  margin-top: 10px;
  color: var(--muted-soft);
  font-size: 13px;
  line-height: 1.6;
}

.reader-shortcuts kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 0.08em 0.38em;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  text-align: center;
}


/* Desktop reading width refinement */
@media (min-width: 900px) {
  :root {
    --reader-width: 920px;
    --content-width: 1240px;
  }

  .reader-layout {
    width: min(100%, calc(var(--reader-width) + 40px));
    padding-left: 20px;
    padding-right: 20px;
  }

  .reader-article {
    padding-left: clamp(38px, 5vw, 64px);
    padding-right: clamp(38px, 5vw, 64px);
  }
}

@media (min-width: 1280px) {
  :root {
    --reader-width: 980px;
  }
}

/* Top chapter navigation row */
.reader-top-actions {
  max-width: var(--reader-width);
  margin: 0 auto 18px;
}

.reader-top-actions .chapter-nav {
  margin: 0;
}

/* Auto scroll status */
.reader-scroll-indicator {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: none;
  padding: 7px 10px;
  color: var(--paper);
  background: var(--accent-strong);
  border: 1px solid var(--accent);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  font-size: 13px;
  line-height: 1;
  opacity: 0.92;
}

html.reader-autoscroll-slow .reader-scroll-indicator,
html.reader-autoscroll-fast .reader-scroll-indicator {
  display: inline-flex;
}

html.reader-autoscroll-fast .reader-scroll-indicator::after {
  content: "快速";
}

html.reader-autoscroll-slow .reader-scroll-indicator::after {
  content: "慢速";
}