::selection { background: #ffff7f; }
body.ctrl-held ::selection { background: #ff7faf; }
body { margin: 0; padding: 0; display: flex; height: 100vh; overflow: hidden; }
#book { flex: 0 0 720px; overflow-y: auto; padding: 0 2em 2em; text-align: justify; position: relative; scroll-padding-top: 2.5em; }
#annotations { flex: 1; overflow-y: auto; padding: 1.5em; border-left: 1px solid #ccc; }
#annotations h3 { margin-top: 0; }
#page-indicator { position: fixed; bottom: 1em; left: 1em; font-size: 0.8em; color: #888; }
.nav-links { margin: 1em 0; font-size: 0.9em; }
.nav-links.top {
  position: sticky;
  top: 0;
  background: #fff;
  margin: 0 -2em;
  padding: 0.6em 2em;
  border-bottom: 1px solid #e0e0e0;
  z-index: 10;
  margin-bottom: 1em;
}
.nav-links a { color: #555; text-decoration: none; margin-right: 1em; }
.nav-links a.contents-link { text-transform: uppercase; }
.nav-links a:hover { text-decoration: underline; }
.anno-group { margin-bottom: 1.5em; }
.anno-section-header { font-weight: bold; color: #555; margin-bottom: 0.3em; }
.anno-entry { margin-bottom: 1.5em; }
.anno-entry.anno-nested { margin-left: 1em; margin-bottom: 1em; }
.anno-nested .anno-source > p:first-child::before { content: "◆ "; }
.anno-source { font-weight: bold; }
.anno-commentary { margin-top: 0.3em; }
.anno-commentary blockquote { margin: 0.5em 0 0.5em 1em; padding-left: 0.5em; border-left: 2px solid #ccc; }
.index-ref { display: inline-block; margin: 0.2em 0.4em 0.2em 0; }
.block { transition: background-color 0.4s ease; background-color: rgba(0, 0, 0, 0.3); }
.block.active-page { background-color: transparent; }
.page-marker { border-top: 1px solid #ccc; margin: 1.5em 4em; position: relative; }
.page-marker span { position: absolute; top: -0.6em; left: 50%; transform: translateX(-50%); background: #fff; padding: 0 0.5em; font-size: 0.7em; color: #aaa; }
.user-highlight { background: #ff7faf; cursor: pointer; }
.popover {
  position: absolute;
  z-index: 100;
  max-width: 400px;
  max-height: 300px;
  overflow-y: auto;
  padding: 16px 20px;
  background: #fffef8;
  border: 1px solid #d4c5a0;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  font-size: 0.9em;
  line-height: 1.5;
}
.popover p { margin: 0 0 0.5em; }
.popover p:last-child { margin-bottom: 0; }
.index-search {
  width: 100%;
  padding: 0.4em 0.6em;
  margin-bottom: 1em;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 0.9em;
  box-sizing: border-box;
}
.index-search:focus { outline: none; border-color: #999; }
.index-section h4 { margin: 1.2em 0 0.4em; color: #555; }
.index-section:first-of-type h4 { margin-top: 0; }
.index-entry { margin: 0.15em 0; line-height: 1.4; }
.index-page-link { color: #555; text-decoration: none; }
.index-page-link:hover { text-decoration: underline; }