:root { color-scheme: light; --nav-width: 286px; --toolbar-height: 64px; --ink: #202528; --muted: #657177; --line: #d8dcde; --paper: #fff; --canvas: #f2f5f4; --nav: #172328; --accent: #087f8c; --warm: #d35f43; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; overflow: hidden; color: var(--ink); background: var(--canvas); font-family: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.68; letter-spacing: 0; }
.navigator { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--nav-width); display: grid; grid-template-rows: auto auto 1fr; color: #f5f8f8; background: var(--nav); border-right: 1px solid #34444a; }
.nav-header { padding: 18px 18px 14px; border-bottom: 1px solid #34444a; }
.nav-header strong { display: block; font-family: Georgia, serif; font-size: 17px; line-height: 1.35; }
.nav-header span { display: block; margin-top: 5px; color: #9eb0b5; font-size: 12px; text-transform: uppercase; }
.nav-search { padding: 12px; border-bottom: 1px solid #34444a; }
.nav-search input { width: 100%; min-height: 38px; padding: 7px 10px; color: #f8fbfb; background: #223239; border: 1px solid #46585f; border-radius: 4px; outline: none; }
.nav-search input:focus { border-color: #61c3cb; box-shadow: 0 0 0 2px rgba(97,195,203,.2); }
.nav-search input::placeholder { color: #aebdc1; }
#chapter-list { overflow: auto; padding: 8px 0 20px; }
.chapter-link { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 9px 13px; color: #dfe7e9; text-decoration: none; border-left: 3px solid transparent; font-size: 12px; line-height: 1.35; }
.chapter-link:hover { background: #223239; }
.chapter-link.active { color: #fff; background: #293d44; border-left-color: #61c3cb; }
.chapter-link .number { color: #87a0a7; font-variant-numeric: tabular-nums; }
.chapter-link[hidden] { display: none; }
.workspace { height: 100%; margin-left: var(--nav-width); min-width: 0; }
.toolbar { height: var(--toolbar-height); display: grid; grid-template-columns: auto auto minmax(0,1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line); }
.icon-button { width: 38px; height: 38px; display: inline-grid; place-items: center; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; font-size: 20px; cursor: pointer; }
.icon-button:hover { color: var(--accent); border-color: var(--accent); }
.icon-button.disabled { opacity: .3; pointer-events: none; }
.menu-button { display: none; }
.page-identity { min-width: 0; line-height: 1.25; }
.page-identity span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.page-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.view-switch { display: grid; grid-template-columns: repeat(3,auto); overflow: hidden; border: 1px solid var(--line); border-radius: 4px; }
.view-switch button { min-height: 36px; padding: 0 11px; color: var(--muted); background: #fff; border: 0; border-right: 1px solid var(--line); cursor: pointer; }
.view-switch button:last-child { border-right: 0; }
.view-switch button.active { color: #fff; background: var(--accent); }
.sync-control { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.sync-control input { accent-color: var(--accent); }
.parallel-reader { height: calc(100vh - var(--toolbar-height)); display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); max-width: 1800px; margin: 0 auto; background: var(--paper); }
.document { min-width: 0; padding: 26px clamp(22px,3vw,48px) 70px; overflow: auto; overflow-wrap: anywhere; scroll-behavior: smooth; }
.document + .document { border-left: 1px solid var(--line); }
.language-label { position: sticky; top: -26px; z-index: 5; margin: -2px 0 24px; padding: 8px 0; color: var(--accent); background: rgba(255,255,255,.96); border-bottom: 2px solid var(--accent); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.chinese-document .language-label { color: var(--warm); border-bottom-color: var(--warm); }
.document h1, .document h2, .document h3, .document h4, .document h5 { margin: 1.4em 0 .55em; font-family: Georgia, "Noto Serif SC", "Songti SC", serif; line-height: 1.3; }
.document h1 { margin-top: .3em; font-size: 29px; }.document h2 { font-size: 23px; }.document h3 { font-size: 19px; }.document h4 { font-size: 17px; }
.document img, .document svg, .document canvas { display: block; max-width: 100%; height: auto; margin: 18px auto; }
.document figure { max-width: 100%; margin: 20px 0; }.document figcaption { color: var(--muted); font-size: 13px; text-align: center; }
.document table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: 14px; }.document th,.document td { padding: 7px 9px; border: 1px solid #bcc4c7; text-align: left; vertical-align: top; }.document th { background: #edf1f1; }
.document .table-responsive { max-width: 100%; overflow-x: auto; }.document pre { max-width: 100%; padding: 14px; overflow: auto; color: #e8eeee; background: #202b30; border-left: 3px solid var(--accent); }.document code { font-family: "Cascadia Mono",Consolas,monospace; font-size: .88em; }.document :not(pre)>code { padding: 2px 4px; background: #edf1f1; border-radius: 3px; }
.document a { color: #087785; }.document blockquote { margin: 16px 0; padding: 4px 16px; color: #505c61; border-left: 3px solid var(--warm); }.document .callout { margin: 18px 0; padding: 12px 16px; border: 1px solid #b9c8cc; border-left: 4px solid var(--accent); }.document .callout-title-container { font-weight: 700; }.document .callout-icon-container { display: none; }
.document .columns { display: flex; gap: 20px; }.document .column { min-width: 0; flex: 1; }.document mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; padding: 5px 0; }
body.view-english .parallel-reader, body.view-chinese .parallel-reader { grid-template-columns: minmax(0,980px); justify-content: center; }.view-english .chinese-document,.view-chinese .english-document { display: none; }.view-english .document,.view-chinese .document { border-left: 0; }
.nav-scrim { display: none; }.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 980px) { body { overflow: auto; }.navigator { transform: translateX(-100%); transition: transform .2s ease; }.nav-open .navigator { transform: translateX(0); }.workspace { height: auto; margin-left: 0; }.toolbar { position: sticky; top: 0; z-index: 20; }.menu-button { display: inline-grid; }.nav-open .nav-scrim { position: fixed; inset: 0; z-index: 25; display: block; background: rgba(0,0,0,.35); }.parallel-reader { height: auto; grid-template-columns: 1fr; }.document { overflow: visible; }.document + .document { border-top: 8px solid var(--canvas); border-left: 0; }.language-label { position: static; }.sync-control { display: none; } }
@media (max-width: 650px) { .toolbar { height: auto; grid-template-columns: auto auto minmax(0,1fr) auto; padding: 7px 8px; }.view-switch { grid-column: 1/-1; width: 100%; }.view-switch button { width: 100%; }.parallel-reader { height: auto; }.document { padding: 20px 16px 55px; }.document .columns { display: block; } }