/* Plexus · E. Graphite, dark by default; white is the only accent. Shared by the library and the reader. */
:root {
  --bg: #0c0c0d; --panel: #111113; --raised: #1a1a1d; --hover: rgba(255,255,255,.04);
  --border: rgba(255,255,255,.07); --border-2: rgba(255,255,255,.13);
  --text: #ededee; --text-2: #a7a7ad; --text-3: #75757c; --text-4: #46464c;
  --read: #cfcfd4;  /* long-form reading text: higher contrast than --text-2 */
  --acc: #ededee; --acc-text: #ffffff; --acc-soft: rgba(255,255,255,.08);
  --fig-ink: #ededee; --fig-ink-inv: #0c0c0d; --fig-muted: #6f6f76; --fig-grid: rgba(255,255,255,.05); --fig-faint: #3a3a40;
  --band-ej: rgba(255,255,255,.07); --band-fill: rgba(255,255,255,.025); --band-hatch: .22; --surface-2: #111113;
  --h-myo: #8f8580; --h-ves: #b1a8a2; --h-blood: #e4dfda; --h-hatch: #221d1b; --h-stip: #8a7f78; --h-trab: #6f6560; --h-cut: #3a3330; --h-sound: #ededee;
  --font: "Inter", system-ui, sans-serif;
  --r-tag: 6px; --r-ctl: 8px; --r-panel: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv01", "ss03", "tnum"; letter-spacing: -.006em; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: rgba(255,255,255,.18); }
:focus-visible { outline: 2px solid var(--text-2); outline-offset: 2px; border-radius: 4px; }

/* top bar */
.top { position: fixed; inset: 0 0 auto 0; height: 52px; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 20px; border-bottom: 1px solid var(--border); background: rgba(12,12,13,.86); backdrop-filter: blur(12px); }
.l { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); min-width: 0; white-space: nowrap; overflow: hidden; }
.l a:hover { color: var(--text-2); }
.mark { display: flex; align-items: center; gap: 8px; color: var(--text); font-weight: 590; font-size: 15px; letter-spacing: -.02em; flex: none; }
/* the mark: two fibres crossing (a decussation), the x of plexus */
.mark i { width: 22px; height: 22px; background: url(brand/mark.svg) center / contain no-repeat; }
.l .sep { color: var(--text-4); }
.l b { color: var(--text-2); font-weight: 510; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: var(--panel); }
.tabs a { height: 28px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 510; color: var(--text-3); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tabs a span { font-size: 11.5px; color: var(--text-4); }
.tabs a:hover { color: var(--text-2); }
.tabs a.on { background: var(--raised); color: var(--text); box-shadow: 0 0 0 1px var(--border-2); }
.r { display: flex; justify-content: flex-end; gap: 6px; }
.btn { height: 30px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--border); background: none; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 510; white-space: nowrap; }
.btn:hover { background: var(--hover); color: var(--text); }
.btn i { font-size: 15px; }
.btn kbd, .pal kbd { font: 500 11px var(--font); color: var(--text-3); border: 1px solid var(--border-2); border-radius: 4px; padding: 0 4px; }

/* search palette */
.pal { position: fixed; inset: 0; z-index: 50; display: none; place-items: start center; padding-top: 12vh; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
.pal.open { display: grid; }
.pal-box { width: min(640px, calc(100vw - 32px)); border-radius: 14px; border: 1px solid var(--border-2); background: var(--raised); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 52px; border-bottom: 1px solid var(--border); color: var(--text-3); }
.pal-in i { font-size: 18px; }
.pal-in input { flex: 1; border: 0; background: none; outline: none; color: var(--text); font: 400 16px var(--font); letter-spacing: -.01em; }
.pal-list { max-height: 56vh; overflow: auto; overscroll-behavior: contain; padding: 6px; }
body:has(.pal.open) { overflow: hidden; }
/* no rubber-band bounce with a trackpad: the bounce dragged the pinned figure pane along with the text */
@media (pointer: fine) { html, body { overscroll-behavior-y: none; } }
.pal-list a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 510; color: var(--text); }
.pal-list a small { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; margin-top: 1px; }
.pal-list a em { font-style: normal; font-size: 11px; font-weight: 560; color: var(--bg); background: var(--text-2); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; }
.pal-list a.on, .pal-list a:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--border); }
.pal-h { font-size: 12px; color: var(--text-3); padding: 8px 12px 4px; }
.pal-list mark, .book mark.find { background: rgba(255,255,255,.2); color: var(--text); border-radius: 3px; padding: 0 2px; }
.pal-empty { padding: 18px 12px; color: var(--text-3); font-size: 13.5px; }

/* book typography (imported topics) */
.book p, .book li { font-size: 17px; line-height: 1.75; color: var(--read); letter-spacing: -.011em; }
.book p { margin: 0 0 16px; max-width: 66ch; }
.book strong, .book b { color: var(--text); font-weight: 560; }
.book h3 { font-size: 17px; font-weight: 590; color: var(--text); margin: 26px 0 8px; letter-spacing: -.012em; }
.book ul, .book ol { margin: 0 0 16px; padding-left: 20px; }
.book li { margin: 2px 0; }
.book li::marker { color: var(--text-4); }
.book sub, .book sup { line-height: 0; }
.book .tbl { overflow-x: auto; margin: 18px 0 26px; border: 1px solid var(--border-2); border-radius: 12px; background: var(--panel); scrollbar-width: thin; }
.book .tbl.wide { margin-right: -28px; }
.book table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14.5px; line-height: 1.6; }
.book th { position: sticky; top: 0; text-align: left; font-size: 11.5px; font-weight: 590; letter-spacing: .02em; text-transform: uppercase; color: var(--text-3); background: var(--raised); padding: 10px 14px; border-bottom: 1px solid var(--border-2); white-space: nowrap; }
.book td { padding: 12px 14px; border-top: 1px solid var(--border); color: var(--read); vertical-align: top; min-width: 120px; }
.book tbody tr:first-child td { border-top: 0; }
.book td:first-child { color: var(--text); font-weight: 560; min-width: 140px; }
.book .tbl.wide td:first-child, .book .tbl.wide th:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--border); }
.book .tbl tr.tr-fig { cursor: pointer; }
.book .tbl tr.tr-fig td:first-child { box-shadow: inset 2px 0 0 transparent; transition: box-shadow .2s; }
.book .tbl tr.tr-fig.on td { background: rgba(255,255,255,.045); }
.book .tbl tr.tr-fig:hover td { background: var(--hover, rgba(255,255,255,.03)); }
.book .tbl.wide th:first-child { background: var(--raised); z-index: 2; }
.book tbody tr { transition: background .15s; }
.book tbody tr:hover td { background: rgba(255,255,255,.025); }
.book .tbl.wide tbody tr:hover td:first-child { background: #151517; }
.book td strong { color: var(--text); }
.book .pg { display: none; }
.book .figcue { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); padding: 6px 10px; border: 1px dashed var(--border-2); border-radius: 8px; cursor: pointer; }
.book .figcue::before { content: ""; width: 12px; height: 15px; border: 1.5px solid var(--text-3); border-radius: 2px; }
.book .figcue:hover { background: var(--hover); }
.book .xref { font-size: 12.5px; color: var(--text-3); }
.book code { font-size: 13px; background: var(--raised); padding: 1px 5px; border-radius: 4px; }
[hidden] { display: none !important; }