:root { --ink:#202522; --muted:#6c746e; --paper:#f7f6f2; --line:#d9dcd5; --white:#fffefa; --orange:#ee7658; --green:#b9e4d1; --yellow:#d8f36e; --dark:#29312f; --blue:#d9e8e8; --sans:"Manrope","Noto Sans SC",sans-serif; --mono:"DM Mono","Noto Sans SC",monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.7; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
.layout { width:min(1180px,calc(100% - 80px)); margin-inline:auto; }
.site-header { width:min(1280px,calc(100% - 80px)); height:74px; margin:auto; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:5; background:rgba(247,246,242,.95); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:11px; min-width:245px; }
.brand strong { display:block; font-size:15px; font-weight:800; }
.brand small { display:block; color:var(--muted); font-family:var(--mono); font-size:9px; margin-top:1px; }
.brand-mark { display:inline-block; position:relative; width:28px; height:28px; }
.brand-mark i { position:absolute; width:10px; height:10px; border:2px solid var(--ink); border-radius:50%; }
.brand-mark i:nth-child(1){left:1px;top:1px;background:var(--orange)} .brand-mark i:nth-child(2){left:2px;top:14px;background:var(--yellow)} .brand-mark i:nth-child(3){left:15px;top:7px;background:var(--green)}
.site-header > nav { display:flex; gap:31px; height:100%; align-items:center; }
.site-header > nav a { color:var(--muted); font-size:12px; font-weight:700; padding:27px 0 25px; position:relative; }
.site-header > nav a:hover, .site-header > nav a.active { color:var(--ink); }
.site-header > nav a.active:after { content:""; position:absolute; bottom:-1px; left:0; right:0; height:3px; background:var(--orange); }
.header-tools { display:flex; align-items:center; gap:12px; min-width:245px; justify-content:flex-end; }
.back-link { font-size:11px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:3px; }
.icon-button { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font-size:18px; line-height:1; }
.icon-button:hover { border-color:var(--ink); background:var(--white); }
.profile-button { border:0; padding:0; background:transparent; color:var(--ink); font-size:11px; font-weight:800; }
.overline { font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:var(--muted); margin:0 0 20px; }
.overline:before { content:""; display:inline-block; width:25px; height:1px; background:var(--orange); vertical-align:middle; margin:0 9px 3px 0; }
.breadcrumb { display:inline-block; color:var(--muted); font-size:11px; margin-bottom:28px; border-bottom:1px solid var(--line); padding-bottom:4px; }

.map-intro { padding:76px 0 48px; border-bottom:1px solid var(--line); }
.map-intro h1 { font-size:56px; line-height:1.08; letter-spacing:0; margin:0 0 18px; }
.map-intro h1 span { color:#60736a; }
.map-intro p:last-child { max-width:480px; color:var(--muted); font-size:14px; margin:0; }
.book-reader { padding:40px 0 96px; }
.reader-top { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:18px; }
.reader-top .breadcrumb { margin:0; }
.book-switcher { height:auto; display:flex; gap:17px; align-items:flex-end; overflow:auto; }
.book-switcher a { display:flex; align-items:center; gap:6px; padding:0 0 7px; color:var(--muted); white-space:nowrap; border-bottom:2px solid transparent; font-size:11px; }
.book-switcher a span { font-family:var(--mono); font-size:9px; color:var(--orange); }
.book-switcher a.active { color:var(--ink); border-bottom-color:var(--orange); }
.book-stage { position:relative; perspective:1400px; }
.spread-panel { display:none; }
.spread-panel.is-current { display:block; }
.book-stage.turn-next .spread-panel.is-current { animation:turn-next .48s ease both; }
.book-stage.turn-prev .spread-panel.is-current { animation:turn-prev .48s ease both; }
@keyframes turn-next { from { opacity:0; transform:rotateY(-13deg) translateX(28px); } to { opacity:1; transform:rotateY(0) translateX(0); } }
@keyframes turn-prev { from { opacity:0; transform:rotateY(13deg) translateX(-28px); } to { opacity:1; transform:rotateY(0) translateX(0); } }
.book-spread { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; border:1px solid #cfd3ca; box-shadow:0 18px 38px rgba(32,37,34,.08); }
.book-page { position:relative; min-height:760px; padding:54px 56px 82px; overflow:hidden; }
.left-page { background:#ece9df; border-right:1px solid #c8cbc1; }
.right-page { background:var(--white); }
.left-page:after { content:""; position:absolute; top:0; right:-7px; bottom:0; width:13px; background:linear-gradient(90deg,rgba(32,37,34,.12),transparent); opacity:.45; pointer-events:none; }
.page-number { position:absolute; left:56px; bottom:25px; color:var(--muted); font-family:var(--mono); font-size:10px; }
.right-page .page-number { left:auto; right:56px; }
.page-content { position:relative; z-index:1; }
.page-title { font-size:44px; line-height:1.12; letter-spacing:0; margin:0 0 28px; }
.left-page .page-title { color:#37453f; }
.page-intro { max-width:310px; margin:0 0 25px; color:#59625d; font-size:13px; line-height:1.9; }
.page-link { display:inline-block; margin-top:16px; padding-bottom:4px; border-bottom:1px solid var(--orange); color:#9a4f3d; font-weight:800; font-size:12px; }
.book-contents { margin-top:0; }
.contents-chapter { padding:18px 0 20px; border-top:1px solid var(--line); }
.contents-chapter-title { display:flex; align-items:baseline; gap:14px; margin-bottom:8px; }
.contents-chapter-title span { color:var(--orange); font-family:var(--mono); font-size:12px; font-weight:700; white-space:nowrap; }
.contents-chapter-title h2 { margin:0; font-size:18px; line-height:1.35; letter-spacing:0; }
.contents-chapter ol { list-style:none; margin:0; padding:0; }
.contents-chapter li { border-top:1px dashed #e0e2db; }
.contents-chapter li a { display:grid; grid-template-columns:72px 1fr 18px; align-items:center; gap:10px; min-height:38px; }
.contents-chapter li a span { color:var(--muted); font-family:var(--mono); font-size:9px; }
.contents-chapter li a strong { font-size:12px; font-weight:700; }
.contents-chapter li a b { color:var(--orange); font-size:15px; font-weight:400; }
.contents-chapter li a:hover strong { color:var(--orange); }
.preface-page .page-title a { transition:color .2s ease; }
.preface-page .page-title a:hover { color:var(--orange); }
.preface-contents { display:grid; grid-template-columns:minmax(0,1fr); gap:0; }
.preface-contents .contents-chapter { padding:18px 0 20px; }
.preface-contents .contents-chapter-title { gap:14px; margin-bottom:8px; }
.preface-contents .contents-chapter-title span { font-size:12px; }
.preface-contents .contents-chapter-title h2 { font-size:18px; }
.preface-contents .contents-chapter li a { grid-template-columns:72px 1fr 18px; gap:10px; min-height:38px; }
.preface-contents .contents-chapter li a span { font-size:9px; }
.preface-contents .contents-chapter li a strong { font-size:12px; line-height:1.35; }
.page-stat { position:absolute; left:56px; right:56px; bottom:25px; color:var(--muted); font-family:var(--mono); font-size:9px; }
.right-page .page-stat { text-align:right; }
.page-nav { position:absolute; bottom:52px; z-index:2; border:0; padding:0; background:transparent; color:#9a4f3d; font-size:11px; font-weight:800; }
.page-nav:hover { color:var(--orange); }
.page-nav.static { color:var(--muted); font-family:var(--mono); font-size:9px; font-weight:400; }
.left-page .page-nav { left:56px; }
.right-page .page-nav { right:56px; }
.spread-footer { display:grid; grid-template-columns:1fr 1fr; padding:12px 56px 0; color:var(--muted); font-family:var(--mono); font-size:9px; }
.spread-footer span:last-child { text-align:right; }

.article-shell { display:grid; grid-template-columns:245px minmax(0,1fr); gap:62px; padding:64px 0 98px; }
.article-sidebar { position:sticky; top:102px; align-self:start; max-height:calc(100vh - 130px); overflow:auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.sidebar-head { display:flex; align-items:center; justify-content:space-between; padding:15px 0; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:10px; }
.sidebar-head button { border:0; border-bottom:1px solid var(--ink); padding:0 0 2px; background:transparent; font-size:10px; }
.outline { display:block; height:auto; padding:13px 0 18px; }
.outline ul { list-style:none; padding:0; margin:0; }
.outline>ul { margin-left:14px; }
.outline ul ul { margin-left:10px; padding-left:14px; border-left:1px solid #d9dcd5; }
.outline li { position:relative; margin:0; }
.outline a { display:block; padding:5px 8px; color:var(--muted); font-size:11px; line-height:1.45; border-left:2px solid transparent; }
.outline a:hover { color:var(--ink); background:#e9eee8; }
.outline a.is-active { color:var(--ink); background:#e9eee8; border-left-color:var(--orange); }
.outline details summary { display:block; position:relative; list-style:none; cursor:pointer; }
.outline details summary::-webkit-details-marker { display:none; }
.outline details summary a { display:block; }
.outline-chevron { position:absolute; top:9px; left:-12px; display:block; width:10px; margin:0; color:#9aa29c; pointer-events:none; }
.outline-chevron:before { content:"⌄"; display:block; font-size:12px; line-height:1; }
.outline details:not([open]) .outline-chevron:before { content:"›"; }
.article-shell.outline-hidden { grid-template-columns:34px minmax(0,1fr); gap:38px; }
.article-shell.outline-hidden .outline { display:none; }
.article-shell.outline-hidden .sidebar-head span { display:none; }
.article-shell.outline-hidden .sidebar-head { justify-content:center; }
.article-content { min-width:0; padding-bottom:24px; }
.article-content h1 { font-size:45px; line-height:1.12; letter-spacing:0; margin:0; }
.article-body { max-width:780px; margin-top:36px; }
.article-body > :first-child { margin-top:0; }
.article-body h2 { margin:42px 0 13px; font-size:27px; line-height:1.25; letter-spacing:0; }
.article-body h3 { margin:30px 0 9px; font-size:20px; line-height:1.3; letter-spacing:0; }
.article-body h4 { margin:22px 0 7px; font-size:16px; }
.article-body p { margin:0 0 15px; color:#3f4943; font-size:14px; line-height:1.9; }
.article-body ul,.article-body ol { margin:0 0 18px; padding-left:24px; color:#3f4943; }
.article-body li { padding:2px 0; }
.article-body strong { color:var(--ink); }
.article-body blockquote { margin:20px 0; padding:12px 18px; border-left:3px solid var(--orange); background:#eef1ed; color:var(--muted); }
.article-body code { padding:2px 5px; background:#e9eee8; font-family:var(--mono); font-size:12px; }
.embedded-figure { margin:24px 0 28px; padding:14px; text-align:center; background:#f1f2ed; border:1px solid var(--line); }
.embedded-figure img { display:block; width:auto; max-width:100%; height:auto; margin:0 auto; }
.embedded-figure figcaption { margin-top:9px; color:var(--muted); font-family:var(--mono); font-size:9px; }
.embedded-image-inline { max-width:100%; height:auto; vertical-align:middle; }
.embedded-frame-inline { display:block; width:min(100%,720px); min-height:420px; margin:16px 0; border:1px solid var(--line); background:var(--white); }
.embedded-frame { display:block; width:100%; min-height:560px; border:0; background:var(--white); }
.table-scroll { overflow:auto; margin:22px 0; }
.article-body table { width:100%; border-collapse:collapse; font-size:12px; }
.article-body th,.article-body td { border:1px solid var(--line); padding:9px 10px; text-align:left; vertical-align:top; }
.article-body th { background:#e9eee8; }
.missing-asset { display:block; margin:16px 0; padding:11px 13px; background:#fff1eb; color:#8e4735; font-size:11px; }
.wiki-link { color:#a95641; border-bottom:1px solid rgba(169,86,65,.35); }
.section-nav { position:static; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:center; width:min(100%,780px); height:auto; margin:72px 0 0; padding:22px 0 4px; border:0; border-top:1px solid var(--line); background:transparent; box-shadow:none; transform:none; }
.section-nav-link,.section-nav-home { display:block; min-height:0; padding:0; color:var(--muted); font-size:12px; font-weight:700; }
.section-nav-link:hover,.section-nav-home:hover { color:var(--orange); }
.section-nav-link.next { text-align:right; }
.section-nav-home { text-align:center; color:#9a4f3d; }
.section-nav-link.disabled { opacity:.42; pointer-events:none; }
.footer { display:flex; justify-content:space-between; padding:27px 0 34px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.footer strong { color:var(--ink); }
.footer-links { display:flex; align-items:center; gap:18px; }
.footer-links button { border:0; padding:0; background:transparent; color:var(--muted); font-size:10px; }
.footer-links button:hover,.footer-links a:hover { color:var(--ink); }
.toast { position:fixed; left:50%; bottom:28px; z-index:20; transform:translate(-50%,12px); opacity:0; pointer-events:none; padding:10px 15px; background:var(--dark); color:var(--white); font-size:11px; transition:opacity .2s,transform .2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media(max-width:960px){
  .layout,.site-header { width:min(100% - 36px,720px); }
  .site-header { height:auto; min-height:68px; flex-wrap:wrap; padding:11px 0; gap:8px; }
  .brand,.header-tools { min-width:auto; }
  .site-header > nav { order:3; width:100%; height:33px; justify-content:space-between; overflow-x:auto; gap:18px; }
  .site-header > nav a { flex:0 0 auto; padding:6px 0 8px; font-size:11px; }
  .reader-top { align-items:flex-start; flex-direction:column; width:100%; min-width:0; }
  .book-switcher { width:100%; max-width:100%; min-width:0; }
  .book-spread { grid-template-columns:1fr; }
  .left-page { min-height:530px; border-right:0; border-bottom:1px solid #c8cbc1; }
  .left-page:after { top:auto; right:0; bottom:-7px; width:100%; height:13px; background:linear-gradient(180deg,rgba(32,37,34,.12),transparent); }
  .article-shell { grid-template-columns:1fr; gap:22px; }
  .article-sidebar { position:relative; top:auto; max-height:none; }
  .article-shell.outline-hidden { grid-template-columns:1fr; }
  .article-shell.outline-hidden .article-sidebar { width:100%; }
  .article-shell.outline-hidden .outline { display:none; }
  .article-shell.outline-hidden .sidebar-head span { display:block; }
  .article-shell.outline-hidden .sidebar-head { justify-content:space-between; }
}
@media(max-width:560px){
  .map-intro { padding:55px 0 40px; }
  .map-intro h1 { font-size:42px; }
  .book-reader { padding:28px 0 66px; }
  .book-page { min-height:650px; padding:48px 27px 58px; }
  .page-number { left:27px; }
  .right-page .page-number { left:auto; right:27px; }
  .page-title { font-size:37px; }
  .left-page .page-nav { left:27px; }
  .right-page .page-nav { right:27px; }
  .page-stat { left:27px; right:27px; }
  .spread-footer { padding-inline:27px; }
  .article-content h1 { font-size:36px; }
  .article-body h2 { font-size:24px; }
  .section-nav { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
  .section-nav-link { min-width:0; }
  .footer { align-items:flex-start; flex-direction:column; gap:12px; }
}