:root {
  --canvas:#f7f5ef; --surface:#eeeae0; --ink:#24241f; --muted:#605f55;
  --line:#d2cfc3; --accent:#805037; --accent-soft:#e9dacb;
  --font-display: Georgia, 'Songti SC', 'Noto Serif CJK SC', serif;
  --font-reading: Georgia, 'Songti SC', 'Noto Serif CJK SC', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color-scheme: light;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); color:var(--ink); font-family:var(--font-ui); }
.page { max-width:1280px; margin:auto; padding:0 48px; }
.masthead { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.wordmark { font-size:12px; font-weight:650; letter-spacing:.12em; }
.wordmark span { margin-left:12px; letter-spacing:.08em; }
.controls { display:flex; gap:24px; }
label { display:grid; gap:6px; color:var(--muted); font-size:11px; }
select { min-height:40px; background:var(--canvas); color:var(--ink); border:1px solid var(--line); border-radius:4px; padding:6px 28px 6px 10px; font:13px var(--font-ui); }
.intro { padding:64px 0 48px; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; line-height:1.6; }
h1 { font:normal clamp(44px,6vw,76px)/1.08 var(--font-display); letter-spacing:-.04em; margin:16px 0 24px; }
.deck { font:20px/1.6 var(--font-reading); margin:0; }
.specimen { font-size:12px; color:var(--muted); line-height:1.7; margin:16px 0 0; }
.reading-layout { display:grid; grid-template-columns:minmax(260px, .85fr) minmax(0,1.65fr); border-top:1px solid var(--ink); }
aside { padding:24px 32px 40px 0; border-right:1px solid var(--line); }
.section-label { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; font-size:12px; color:var(--muted); }
.section-label h2 { margin:0; font-size:12px; font-weight:500; }
.content-list ul { list-style:none; padding:0; margin:0; }
.content-list li { border-bottom:1px solid var(--line); }
.content-list-row { display:block; width:100%; border:0; border-left:3px solid transparent; padding:24px 16px; background:transparent; color:var(--ink); text-align:left; cursor:pointer; font:inherit; }
.content-list-row:hover { background:var(--surface); }
.content-list-row.is-selected { background:var(--accent-soft); border-left-color:var(--accent); }
.content-list-heading strong { font:normal 23px/1.3 var(--font-display); }
.content-description,.content-meta { display:block; color:var(--muted); font-size:12px; line-height:1.6; margin-top:8px; }
.content-meta { font-size:11px; }
.aside-note { color:var(--muted); font-size:12px; line-height:1.7; margin:24px 16px; }
#detail { padding:48px 0 48px 56px; min-height:560px; scroll-margin-top:24px; }
#detail .eyebrow { margin:0 0 16px; }
#detail-title { max-width:640px; font:normal clamp(32px,4vw,48px)/1.15 var(--font-display); letter-spacing:-.025em; margin:0 0 16px; }
.byline { color:var(--muted); font-size:12px; line-height:1.7; margin:0 0 32px; }
.excerpt { max-width:640px; font:19px/1.85 var(--font-reading); }
.excerpt p { margin:0 0 24px; }
.reading-note { max-width:640px; padding:24px 0 0; margin-top:32px; border-top:1px solid var(--line); }
.reading-note h3 { font-size:11px; font-weight:600; color:var(--accent); margin:0 0 12px; }
.reading-note p { font:18px/1.7 var(--font-reading); margin:0; }
.endnote { color:var(--muted); font-size:11px; margin-top:32px; }
footer { display:flex; justify-content:space-between; gap:24px; padding:24px 0 32px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.sr,.skip:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip:focus { display:block; padding:16px; color:var(--ink); background:var(--surface); }
:lang(zh-CN) .excerpt { line-height:2; }
@media (max-width:760px) {
  .page { padding:0 24px; }
  .masthead { align-items:flex-start; flex-direction:column; padding:24px 0; }
  .intro { padding:40px 0 32px; }
  .reading-layout { grid-template-columns:1fr; }
  aside { padding:24px 0; border-right:0; border-bottom:1px solid var(--line); }
  .content-list-row { padding:16px; }
  #detail { padding:32px 0; min-height:0; }
}

.appearance-options{display:flex;align-items:center;gap:10px}
