:root { --ink:#17313b; --muted:#688087; --line:#d8e6e7; --paper:#fff; --bg:#f2f7f6; --teal:#1a7f83; --teal-dark:#10565d; --coral:#d9795f; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--bg); font-family:"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif; line-height:1.8; }
a { color:inherit; text-decoration:none; } .topbar { height:72px; padding:0 5vw; background:var(--paper); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; }
.brand { display:flex; gap:12px; align-items:center; } .brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--teal-dark); font-family:Georgia,serif; font-size:22px; border-radius:8px; } .brand b { display:block; font-size:15px; letter-spacing:0; } .brand small { display:block; color:var(--muted); font-size:11px; line-height:1.2; } .top-actions { display:flex; gap:24px; color:var(--muted); font-size:13px; }
.layout { display:grid; grid-template-columns:248px minmax(0,1fr); min-height:calc(100vh - 72px); } .sidebar { padding:30px 16px; border-right:1px solid var(--line); background:#edf5f3; } .sidebar-label,.eyebrow,.section-title span { color:var(--teal); font-size:11px; letter-spacing:.12em; font-weight:700; } .sidebar-label { padding:0 12px 12px; } .sidebar nav { display:grid; gap:3px; } .nav-item { display:flex; gap:10px; align-items:baseline; padding:7px 12px; border-radius:5px; font-size:13px; color:#4c666d; } .nav-item:hover,.nav-item.active { color:var(--teal-dark); background:#dbeceb; } .nav-index { width:22px; color:#92aaab; font-variant-numeric:tabular-nums; font-size:11px; }
.main { min-width:0; max-width:1120px; width:100%; margin:auto; padding:60px clamp(22px,5vw,72px) 100px; } .hero { padding:30px 0 60px; max-width:980px; display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:56px; align-items:center; } .hero-copy { max-width:720px; } h1,h2 { line-height:1.2; letter-spacing:0; } .hero h1 { margin:12px 0 18px; font-family:Georgia,"Songti SC",serif; font-size:clamp(38px,6vw,70px); font-weight:500; color:var(--teal-dark); } .hero p,.chapter-head p { color:var(--muted); max-width:650px; } .hero-stats { display:flex; gap:28px; margin-top:30px; color:var(--muted); font-size:12px; } .hero-stats b { color:var(--teal-dark); font-size:22px; display:block; line-height:1.2; } .cover-image { display:block; width:100%; aspect-ratio:2 / 3; object-fit:cover; border:1px solid #c5d7d5; box-shadow:10px 14px 0 #d7e9e5; }
.search-panel { padding:22px; background:var(--paper); border:1px solid var(--line); border-radius:8px; box-shadow:0 7px 20px #1749500b; } .search-panel label { font-weight:700; font-size:15px; } .search-panel label + span { margin-left:12px; color:var(--muted); font-size:12px; } input[type=search] { margin-top:12px; width:100%; padding:13px 15px; border:1px solid #b9d0d0; border-radius:5px; font:inherit; color:var(--ink); outline:none; } input[type=search]:focus { border-color:var(--teal); box-shadow:0 0 0 3px #1a7f831c; } .search-results { margin-top:8px; } .result { display:block; padding:11px 4px; border-top:1px solid var(--line); } .result strong { display:block; font-size:14px; color:var(--teal-dark); } .result small { color:var(--muted); font-size:12px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contents { padding-top:72px; } .section-title h2 { margin:4px 0 24px; font-size:28px; font-weight:600; } .chapter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; } .chapter-card { min-height:114px; padding:17px 18px; display:flex; flex-direction:column; justify-content:space-between; background:var(--paper); border:1px solid var(--line); border-radius:6px; transition:transform .15s,border-color .15s; } .chapter-card:hover { transform:translateY(-2px); border-color:#84b7b6; } .chapter-number { color:var(--coral); font-size:11px; font-weight:700; } .chapter-card strong { color:var(--teal-dark); font-size:15px; } .chapter-card small { color:var(--muted); font-size:11px; }
.chapter-head { padding-bottom:24px; border-bottom:1px solid var(--line); } .chapter-head h1 { margin:10px 0 8px; font-family:Georgia,"Songti SC",serif; font-size:clamp(30px,4vw,50px); font-weight:500; color:var(--teal-dark); } .chapter-nav { display:flex; justify-content:space-between; padding:16px 0; color:var(--teal); font-size:13px; } .chapter-nav a:hover { color:var(--coral); } .book-content { padding:26px clamp(16px,3vw,44px) 34px; background:var(--paper); border:1px solid var(--line); border-radius:6px; box-shadow:0 4px 14px #17495008; }
.page-block { position:relative; scroll-margin-top:90px; }
.page-block p { margin:0 0 .5em; font-family:"Songti SC","STSong","Noto Serif CJK SC",serif; font-size:16.5px; line-height:2.05; color:#263e45; }
.page-block p.para { text-indent:2em; }
.page-block p.plain { text-indent:0; }
.page-block h3.sec { margin:1.6em 0 .6em; padding:.35em .8em; font-family:"Noto Sans CJK SC","PingFang SC",sans-serif; font-size:19px; font-weight:700; color:#fff; background:linear-gradient(90deg,var(--teal-dark),var(--teal)); border-radius:5px; letter-spacing:.02em; }
.page-block h3.sec:first-child { margin-top:.2em; }
.page-block h4.topic { margin:1.25em 0 .4em; font-family:"Noto Sans CJK SC","PingFang SC",sans-serif; font-size:16.5px; font-weight:700; color:var(--teal-dark); padding-left:10px; border-left:4px solid var(--coral); line-height:1.5; }
.source-page-anchor { display:block; height:0; scroll-margin-top:90px; }
.illustration { margin:18px auto 1.2em; text-align:center; break-inside:avoid; } .illustration img { display:block; max-width:min(100%,560px); max-height:720px; width:auto; height:auto; margin:auto; border:1px solid #d6e4e3; background:#f7fbfa; filter:saturate(1.06); } .illustration figcaption { color:var(--muted); font-size:11px; margin-top:6px; } .bottom { margin-top:8px; } .site-footer { margin-top:64px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
@page { size:A4 portrait; margin:12mm 14mm 14mm; } @media print { body { background:#fff; color:#111; } .topbar,.sidebar,.chapter-nav,.site-footer { display:none !important; } .layout { display:block; min-height:0; } .main { max-width:none; padding:0; } .chapter-head { padding:0 0 5mm; border-bottom:1px solid #aaa; } .chapter-head h1 { font-size:22pt; margin:0 0 2mm; } .chapter-head p { margin:0; color:#555; font-size:9pt; } .book-content { padding:4mm 0 0; border:0; box-shadow:none; border-radius:0; } .page-block p { font-size:10.5pt; line-height:1.6; margin:0 0 2mm; } .page-block h3.sec { font-size:13pt; margin:4mm 0 2mm; background:none; color:#111; padding:0; border-radius:0; } .page-block h4.topic { font-size:11.5pt; margin:3mm 0 1.5mm; } .illustration { margin:3mm auto 4mm; } .illustration img { max-width:100%; max-height:92mm; } .illustration figcaption { font-size:7.5pt; } .source-page-anchor { display:block; } }
@media (max-width:800px) { .topbar { padding:0 18px; } .top-actions { gap:12px; } .layout { display:block; } .sidebar { position:static; padding:10px 18px; border-right:0; border-bottom:1px solid var(--line); overflow:auto; } .sidebar-label { display:none; } .sidebar nav { display:flex; gap:4px; min-width:max-content; } .nav-item { padding:5px 8px; font-size:11px; } .nav-index { display:none; } .main { padding-top:34px; } .hero { padding-top:0; display:block; } .hero-copy { max-width:720px; } .cover-image { width:min(230px,65vw); margin:30px 0 8px; } .hero-stats { gap:16px; } .chapter-grid { grid-template-columns:1fr 1fr; } .chapter-card { min-height:106px; padding:13px; } .book-content { padding:18px 14px 24px; } .page-block p { font-size:15.5px; line-height:1.95; } .page-block h3.sec { font-size:17px; } }
@media (max-width:480px) { .brand small { display:none; } .top-link:first-child { display:none; } .chapter-grid { grid-template-columns:1fr; } .hero h1 { font-size:42px; } }