/* RenaSci · 主题网络 — reading edition of each node (full text).
   Paper in light, night in dark; the acid signal survives as a highlighter. Margin notes show where each section leads. */
:root {
  --bg: #f2f2ee; --fg: #16170f; --acid-rgb: 212, 255, 38; --night: #060607; --night-fg: #e6e8df; --night-muted: #9a9f90; --night-fg-rgb: 230, 232, 223; --muted: #5d6154; --line: rgba(22, 23, 15, .14); --card: #e7e8e0;
  --acid: #d4ff26; --acid-ink: #0b0c05; --link: #2f3d00; --hl: rgba(var(--acid-rgb), .85); --on: #5d7300;
  --f-sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --f-serif: "Noto Serif SC", "Songti SC", "STSong", serif;
  --f-disp: "Archivo", "Arial Narrow", sans-serif;
  --f-mono: "Martian Mono", "Noto Sans SC", ui-monospace, Consolas, monospace;
  --bar: 52px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: var(--night); --fg: var(--night-fg); --muted: var(--night-muted); --line: rgba(var(--night-fg-rgb), .14); --card: #111213; --link: #d4ff26; --hl: rgba(var(--acid-rgb), .28); --on: #d4ff26; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: var(--night); --fg: var(--night-fg); --muted: var(--night-muted); --line: rgba(var(--night-fg-rgb), .14); --card: #111213; --link: #d4ff26; --hl: rgba(var(--acid-rgb), .28); --on: #d4ff26; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: calc(var(--bar) + 20px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--f-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
::selection { background: var(--acid); color: var(--acid-ink); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.skip { position: fixed; left: 8px; top: -80px; z-index: 100; background: var(--acid); color: var(--acid-ink); padding: 8px 12px; font-family: var(--f-mono); font-size: 12px; text-decoration: none; }
.skip:focus { top: 8px; }
[hidden] { display: none !important; }

.prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.prog i { display: block; height: 100%; width: 0; background: var(--acid); }
.rbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; display: flex; align-items: stretch; height: var(--bar); background: var(--night); color: var(--night-fg); border-bottom: 1px solid rgba(var(--acid-rgb), .25); }
.rbar__logo { flex: 0 0 var(--bar); display: grid; place-items: center; background: var(--acid); color: var(--acid-ink); }
.rbar__logo svg { width: 20px; height: 22px; fill: currentColor; }
.rbar__brand { display: flex; flex-direction: column; justify-content: center; padding: 0 16px; text-decoration: none; color: inherit; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; line-height: 1.35; white-space: nowrap; }
.rbar__brand b { font-family: var(--f-disp); font-stretch: 115%; font-weight: 800; font-size: 15px; letter-spacing: .01em; }
.rbar__brand span { color: var(--night-muted); }
.rbar__node { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-left: 1px solid rgba(var(--night-fg-rgb), .12); font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; min-width: 0; }
.rbar__node b { font-family: var(--f-mono); font-size: 11px; background: var(--acid); color: var(--acid-ink); padding: 1px 6px; }
.rbar__nav { margin-left: auto; display: flex; align-items: stretch; }
.rbar__nav a, .rbar__nav button { display: flex; align-items: center; padding: 0 16px; border-left: 1px solid rgba(var(--night-fg-rgb), .12); color: inherit; text-decoration: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; white-space: nowrap; }
.rbar__nav a:hover, .rbar__nav button:hover { color: var(--acid); }
.rbar__nav button { font-size: 16px; }
@media (max-width: 860px) { .rbar__node { display: none; } }
@media (max-width: 600px) { .rbar__brand span { display: none; } .rbar__nav a { padding: 0 10px; font-size: 10px; } .rbar__nav a:nth-child(3) { display: none; } }

/* ---------- cover (always dark, like a title page) ---------- */
.cover { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--night); color: var(--night-fg); border-bottom: 3px solid var(--acid); overflow: hidden; }
.cover__img { width: 100%; height: 100%; max-height: 560px; min-height: 360px; object-fit: cover; image-rendering: pixelated; grid-column: 2; grid-row: 1; border-left: 1px solid rgba(var(--acid-rgb), .25); }
.cover__in { grid-column: 1; grid-row: 1; padding: clamp(36px, 6vw, 80px) clamp(16px, 5vw, 64px); align-self: center; }
.tag { display: flex; flex-wrap: wrap; margin: 0 0 20px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; line-height: 1; }
.tag > * { padding: 6px 10px; border: 1px solid rgba(var(--acid-rgb), .3); margin-right: -1px; }
.tag b { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); font-weight: 600; }
.cover h1 { margin: 0; font-size: clamp(46px, 7vw, 108px); line-height: 1; font-weight: 900; letter-spacing: -.02em; text-wrap: balance; }
.cover__sub { margin: 12px 0 22px; font-family: var(--f-serif); font-weight: 900; font-size: clamp(20px, 2.3vw, 32px); color: #fff; }
.cover__by, .cover__meta { margin: 0 0 6px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .04em; color: var(--night-muted); }
.cover__by { color: var(--night-fg); }
.cover__layers { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.cover__layers a { color: var(--acid); }
.cover__layers b { background: var(--acid); color: var(--acid-ink); padding: 1px 8px; }
.cover__layers i { font-style: normal; color: #5d6154; }
.cover__cap { position: absolute; right: 12px; bottom: 8px; margin: 0; max-width: 40%; text-align: right; font-family: var(--f-mono); font-size: 9.5px; line-height: 1.5; color: var(--night-muted); background: rgba(6, 6, 7, .8); padding: 4px 8px; }
@media (max-width: 860px) {
  .cover { grid-template-columns: 1fr; }
  .cover__img { grid-column: 1; grid-row: 1; max-height: 240px; min-height: 0; border-left: 0; border-bottom: 1px solid rgba(var(--acid-rgb), .25); }
  .cover__in { grid-row: 2; }
  .cover__cap { position: static; max-width: none; text-align: left; grid-row: 3; }
}

/* ---------- layout ---------- */
.rwrap { display: grid; grid-template-columns: 240px minmax(0, 44em); gap: 56px; max-width: 1180px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
@media (min-width: 1400px) { .rwrap { max-width: 1420px; grid-template-columns: 240px minmax(0, 44em) 250px; } }
.rtoc { position: sticky; top: calc(var(--bar) + 24px); align-self: start; max-height: calc(100vh - var(--bar) - 48px); overflow-y: auto; padding: 32px 0 24px; scrollbar-width: thin; }
.rtoc__h { margin: 0 0 10px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--muted); }
.rtoc ol { list-style: none; margin: 0 0 28px; padding: 0; }
.rtoc a { display: grid; grid-template-columns: 2.2em 1fr; gap: 4px; padding: 6px 8px; border-left: 2px solid transparent; color: var(--fg); text-decoration: none; font-size: 13px; line-height: 1.45; }
.rtoc a span { font-family: var(--f-serif); font-weight: 900; color: var(--muted); }
.rtoc a:hover { background: var(--card); }
.rtoc a.on { border-left-color: var(--acid); background: var(--card); font-weight: 700; }
.rtoc a.on span { color: var(--fg); }
.mini { width: 100%; max-width: 220px; height: auto; display: block; }
.mini line.off { stroke: var(--line); }
.mini line.on { stroke: var(--on); stroke-opacity: .8; }
.mini rect.n { fill: var(--fg); }
.mini rect.f { fill: var(--acid); stroke: var(--fg); stroke-width: 1.5; }
.mini text { font-family: var(--f-mono); font-size: 9px; fill: var(--muted); }
.mini a:hover rect { fill: var(--acid); }
.mini a:hover text { fill: var(--fg); }

.rdoc { min-width: 0; padding: 48px 0 80px; grid-column: 2; }
.lede p { font-family: var(--f-serif); font-size: 19px; font-weight: 600; line-height: 2; text-align: justify; text-justify: inter-character; }
.lede { padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.sec { position: relative; margin: 0 0 52px; }
.sec h2 { position: relative; margin: 0 0 20px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; font-weight: 900; text-wrap: balance; }
.sec__n { font-family: var(--f-serif); color: var(--muted); margin-right: .4em; }
.sec__a { margin-left: .4em; font-family: var(--f-mono); font-size: .5em; color: var(--muted); text-decoration: none; opacity: 0; transition: opacity .15s; vertical-align: middle; }
.sec h2:hover .sec__a { opacity: 1; }
.sec p { font-family: var(--f-serif); font-size: 17.5px; line-height: 2; margin: 0 0 1.15em; text-align: justify; text-justify: inter-character; }
.sec:target h2, .refs li:target { animation: tflash 2.4s ease-out; }
@keyframes tflash { 0%, 25% { background: var(--hl); } 100% { background: transparent; } }

/* cross-links */
a.x { color: var(--fg); text-decoration: none; background: linear-gradient(var(--hl), var(--hl)) 0 100% / 100% .42em no-repeat; transition: background-size .18s; padding: 0 1px; }
a.x:hover, a.x:focus-visible { background-size: 100% 100%; }
.x__t { display: inline-block; margin-left: 2px; transform: translateY(-.6em); font-family: var(--f-mono); font-size: 9px; letter-spacing: .02em; line-height: 1; padding: 1px 3px; color: var(--muted); border: 1px solid var(--line); }
a.x:target { animation: xflash 2.4s ease-out; }
@keyframes xflash { 0%, 30% { background-size: 100% 100%; box-shadow: 0 0 0 5px var(--hl); } 100% { box-shadow: 0 0 0 0 transparent; } }
sup.fn { line-height: 0; }
sup.fn a { display: inline-block; min-width: 1.5em; margin: 0 1px; padding: 0 3px; font-family: var(--f-mono); font-size: 9.5px; line-height: 1.55; text-align: center; vertical-align: 3px; text-decoration: none; color: var(--muted); border: 1px solid var(--line); }
sup.fn a:hover, sup.fn a:target { background: var(--acid); color: var(--acid-ink); border-color: var(--acid); }

/* margin notes: where each section leads */
.sn { margin: 4px 0 0; padding: 14px 16px; background: var(--card); border-left: 3px solid var(--acid); font-size: 12.5px; line-height: 1.6; }
.sec .sn p.sn__h, .sn__h { margin: 0 0 6px; font-family: var(--f-mono); font-size: 10px; line-height: 1.5; letter-spacing: .1em; color: var(--muted); text-align: left; }
.sn ul { list-style: none; margin: 0 0 10px; padding: 0; }
.sn ul:last-child { margin-bottom: 0; }
.sn li { padding: 5px 0; border-top: 1px solid var(--line); }
.sn li:first-child { border-top: 0; }
.sn__from { display: block; font-size: 11.5px; color: var(--muted); text-decoration: none; }
.sn__from:hover { color: var(--fg); }
.sn__to { color: var(--fg); text-decoration: none; font-weight: 700; }
.sn__to b { font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; background: var(--acid); color: var(--acid-ink); padding: 0 4px; margin-right: 6px; }
.sn__to:hover { text-decoration: underline; }
@media (min-width: 1400px) {
  .sn { position: absolute; top: 58px; left: calc(100% + 44px); width: 250px; margin: 0; background: transparent; border-left: 1px solid var(--line); padding: 2px 0 2px 16px; }
}

/* M: the fourteen theses */
.theses { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.theses li { display: grid; grid-template-columns: 3.2em 1fr; gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.theses li > span { font-family: var(--f-serif); font-weight: 900; font-size: 20px; color: var(--muted); }
.theses li p { margin: 0; font-family: var(--f-sans); font-size: 18px; font-weight: 700; line-height: 1.6; text-align: left; }

/* references */
.refs { padding-top: 12px; border-top: 1px solid var(--line); margin-top: 24px; }
.refs h2, .netpos h2 { margin: 0 0 18px; font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; }
.refs ol { list-style: none; margin: 0; padding: 0; }
.refs li { display: grid; grid-template-columns: 2.6em 1fr; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--bar) + 24px); }
.ref__n { font-family: var(--f-mono); font-size: 11px; color: var(--muted); padding-top: 3px; }
.refs li p { margin: 0; font-size: 13.5px; line-height: 1.7; word-break: break-word; }
.ref__u { font-family: var(--f-mono); font-size: 11px; }
.ref__b a { font-family: var(--f-mono); font-size: 11px; text-decoration: none; margin-left: 4px; }

/* position in the network */
.netpos { margin-top: 56px; padding-top: 12px; border-top: 3px solid var(--acid); }
.netpos__lede { color: var(--muted); font-size: 14px; }
.np { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 18px 0 36px; }
@media (max-width: 700px) { .np { grid-template-columns: 1fr; } }
.np h3 { margin: 0 0 10px; font-size: 17px; }
.np__g { padding: 10px 0; border-top: 1px solid var(--line); }
.np__n { display: flex; gap: 8px; align-items: baseline; text-decoration: none; color: var(--fg); font-weight: 700; font-size: 14px; }
.np__n b { font-family: var(--f-mono); font-size: 10px; background: var(--acid); color: var(--acid-ink); padding: 0 5px; font-weight: 600; }
.np__n i { margin-left: auto; font-style: normal; font-family: var(--f-mono); font-size: 10px; color: var(--muted); }
.np ul { list-style: none; margin: 6px 0 0; padding: 0; }
.np li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; line-height: 1.6; padding: 2px 0; }
.np li a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--muted); }
.np li a:hover { border-bottom-color: var(--fg); }
.np li span { color: var(--muted); text-align: right; flex-shrink: 0; max-width: 50%; }
.np__none { color: var(--muted); font-size: 13px; }
.seq { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin: 8px 0 0; }
.seq a { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--bg); text-decoration: none; color: var(--fg); font-weight: 700; font-size: 14px; }
.seq a:last-child { justify-content: flex-end; }
.seq a:nth-child(2) { font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--muted); }
.seq b { font-family: var(--f-mono); font-size: 10px; background: var(--acid); color: var(--acid-ink); padding: 0 5px; }
.seq i { font-style: normal; }
.seq a:hover { background: var(--card); }
@media (max-width: 600px) { .seq { grid-template-columns: 1fr; } .seq a:last-child { justify-content: flex-start; } }
.rdoc__foot { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; line-height: 1.8; color: var(--muted); }

/* preview card (shared markup with the landing pages) */
.pv { position: fixed; z-index: 90; width: min(360px, calc(100vw - 24px)); background: #0d0e0f; color: var(--night-fg); border: 1px solid var(--acid); box-shadow: 0 18px 60px rgba(0, 0, 0, .45); pointer-events: none; animation: pvin .14s ease-out; }
@keyframes pvin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pv__img { height: 92px; background: #000 center / cover no-repeat; image-rendering: pixelated; border-bottom: 1px solid rgba(var(--acid-rgb), .3); }
.pv__b { padding: 12px 16px 14px; }
.pv__k { display: flex; gap: 8px; margin: 0 0 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--night-muted); }
.pv__k b { background: var(--acid); color: var(--acid-ink); padding: 0 5px; font-weight: 600; }
.pv__t { margin: 0 0 8px; font-size: 17px; font-weight: 900; line-height: 1.3; }
.pv__t span { display: block; font-family: var(--f-serif); font-size: 13px; font-weight: 600; color: #cfd3c7; }
.pv__s { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--acid); }
.pv__x { margin: 0; font-size: 13px; line-height: 1.75; color: #cfd3c7; }
.pv__f { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(var(--night-fg-rgb), .12); font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; color: var(--night-muted); }
.pv--ref .pv__x { font-size: 12.5px; }
.pv--ref .pv__x a { color: var(--acid); }

@media (max-width: 900px) {
  .rwrap { grid-template-columns: 1fr; gap: 0; }
  .rtoc { position: static; max-height: none; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .rtoc ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; margin-bottom: 0; }
  .rtoc__mini { display: none; }
  .rdoc { grid-column: 1; padding-top: 28px; }
  .lede p, .sec p { font-size: 16.5px; line-height: 1.95; text-align: left; }
}
@media (max-width: 520px) { .rtoc ol { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  .rbar, .rtoc, .prog, .pv, .sn, .seq { display: none !important; }
  .rwrap { display: block; max-width: none; }
  body { background: #fff; color: #000; }
  .cover { background: #fff; color: #000; }
}

/* =====================================================================
   v0.8 · deep reads in the question network
   ===================================================================== */
.cover__q { display: flex; gap: 10px; align-items: baseline; margin: 0 0 18px; max-width: 30em; font-family: var(--f-serif); font-weight: 900; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.55; color: var(--night-fg); }
.cover__q i { font-style: normal; flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; background: var(--acid); color: var(--acid-ink); font-family: var(--f-sans); font-size: .88em; line-height: 1; }
.x__t { display: none; }
a.x--self { background-image: linear-gradient(var(--line), var(--line)); }
.sn__up { display: flex; gap: 8px; align-items: baseline; }
.sn__up b { flex: 0 0 auto; }
.sn .qa, .np .qa { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; align-items: baseline; padding: 6px 8px; margin: 0 0 4px; text-decoration: none; color: var(--fg); border: 1px solid var(--line); background: var(--bg); }
.sn .qa::before, .np .qa::before { content: "→"; grid-row: 1 / 3; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.sn .qa--back::before, .np .qa--back::before { content: "←"; }
.qa__q { font-weight: 700; font-size: 13px; line-height: 1.5; }
.qa__to { font-family: var(--f-mono); font-size: 10px; line-height: 1.5; color: var(--muted); }
.qa__to b { background: var(--acid); color: var(--acid-ink); padding: 0 4px; margin-right: 6px; font-weight: 600; }
.sn .qa:hover, .np .qa:hover, .sn .qa:focus-visible, .np .qa:focus-visible { border-color: var(--fg); background: var(--hl); }
.sn li:has(> .qa) { border-top: 0; padding: 0; }
.np li:has(> .qa) { display: block; padding: 0; }
.np .qa { width: 100%; }
.rtoc a { grid-template-columns: 2.2em minmax(0, 1fr); }
/* v0.8: footnote markers never start a line or strand the punctuation that follows */
.nw { white-space: nowrap; }
/* v0.8: node badge in its own column, so long link texts wrap under the text, not under the badge */
.sn__to { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: baseline; }
.sn__to b { margin-right: 0; line-height: 1.6; }

/* v0.8.1 排版修补（2026-10-03）：顶栏在英文版和窄屏上不再溢出，语言切换和主题按钮始终留在屏幕内 */
.rbar__brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.rbar__brand span { overflow: hidden; text-overflow: ellipsis; }
.rbar__nav { flex: none; }
@media (max-width: 1100px) { html[lang="en"] .rbar__brand span { display: none; } }
@media (max-width: 620px) { .rbar__nav .rbar__home { display: none; } }
/* 窄屏上隐藏的是“当前页”那一项，而不是固定的第三项（论题的深读页里第三项是“论题页”，曾被误藏） */
@media (max-width: 600px) {
  .rbar__nav a:nth-child(3):not([aria-current="page"]) { display: flex; }
  .rbar__nav a[aria-current="page"] { display: none; }
}
/* 没有空格的长串（伽利略寄出的 37 个字母的字谜）在窄屏上撑出横向滚动：必要时断开 */
body { overflow-wrap: break-word; }