:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --canvas: oklch(100% 0 0);
  --ink: oklch(20% 0 0);
  --muted: oklch(49% 0 0);
  --hover: oklch(97% 0 0);
  --line: oklch(88% 0 0);
  --focus: oklch(20% 0 0);
  --page-width: 52rem;
  --reader-width: 42rem;
  --page-gutter: 2rem;
  --page-top: clamp(6rem, 17vh, 12rem);
  --book-gap: 6rem;
  --column-gap: 3rem;
  --copy-gap: 0.75rem;
  --title-size: 1.375rem;
  --body-size: 0.9375rem;
  --action-size: 0.875rem;
  --reading-size: 1.125rem;
  --reading-leading: 1.8;
  --control-height: 2.75rem;
  --control-radius: 0.25rem;
  --focus-width: 2px;
  --focus-offset: 4px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:where(a, button, summary, [tabindex]):focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-radius: var(--control-radius); }
main { width: min(var(--page-width), calc(100% - 2 * var(--page-gutter))); margin-inline: auto; padding-block: var(--page-top) 6rem; }
h1, h2, h3, p { margin: 0; }

.books { display: grid; gap: var(--book-gap); margin: 0; padding: 0; list-style: none; }
.book { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--column-gap); }
.book-copy { display: grid; gap: var(--copy-gap); min-width: 0; text-decoration: none; border-radius: var(--control-radius); }
.book h2 { font-size: var(--title-size); font-weight: 500; line-height: 1.4; letter-spacing: -0.025em; overflow-wrap: anywhere; text-wrap: pretty; }
.book p { color: var(--muted); font-size: var(--body-size); line-height: 1.6; overflow-wrap: anywhere; text-wrap: pretty; }
.book-actions { display: flex; gap: 1.25rem; }
.book-actions a { display: inline-flex; align-items: center; min-height: var(--control-height); min-width: var(--control-height); font-size: var(--action-size); line-height: 1.5; }
.saved-copies { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-block-start: 0.5rem; }
.saved-copies a { display: inline-flex; align-items: center; min-height: var(--control-height); font-size: var(--action-size); color: var(--muted); }

.reader { width: min(var(--reader-width), calc(100% - 2 * var(--page-gutter))); padding-block: 2rem 5rem; }
.back-nav, .reader-end { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-size: var(--body-size); }
.back-nav a, .reader-end a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.reader-header { margin-block: 3rem 2rem; }
.reader-header h1 { font-size: 1.75rem; font-weight: 500; letter-spacing: -0.035em; line-height: 1.3; text-wrap: pretty; overflow-wrap: anywhere; }
.subtitle { margin-block-start: 1rem; color: var(--muted); font-size: var(--body-size); line-height: 1.7; }
.edition { margin-block-start: 1rem; font-size: var(--action-size); line-height: 1.6; }
.reading-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-block-start: 1rem; font-size: var(--action-size); }
.reading-actions a { display: inline-flex; align-items: center; min-height: var(--control-height); }
button { font: inherit; color: inherit; background: var(--hover); border: 0; border-radius: var(--control-radius); padding: 0.625rem 0.875rem; min-height: var(--control-height); line-height: 1.5; cursor: pointer; }
button:disabled { cursor: default; color: var(--muted); }
summary { cursor: pointer; min-height: var(--control-height); padding-block: 0.75rem; line-height: 1.5; font-size: var(--body-size); }
summary .muted { margin-inline-start: 0.5rem; font-size: var(--action-size); }
.muted { color: var(--muted); }
.reader-disclosure { margin-block: 0.5rem; }
.reader-disclosure[open] { margin-block-end: 2rem; }
.revisions { display: grid; gap: 1.5rem; list-style: none; margin: 1rem 0; padding: 0; }
.revision { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25rem 1.5rem; font-size: var(--action-size); line-height: 1.6; }
.revision time { display: block; color: var(--muted); }
.revision a[aria-current] { font-weight: 600; }
.revision > div > a { display: inline-flex; min-height: var(--control-height); align-items: center; }
.revision-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.copy-status { grid-column: 1 / -1; font-size: var(--action-size); color: var(--muted); }
.copy-status:empty { display: none; }
.storage-note, noscript p { color: var(--muted); font-size: var(--action-size); line-height: 1.7; }
.contents { display: grid; gap: 0.25rem; margin: 0.5rem 0 0; padding-inline-start: 1.5rem; }
.contents a { display: inline-block; padding: 0.625rem 0.25rem; min-height: var(--control-height); font-size: var(--body-size); line-height: 1.6; overflow-wrap: anywhere; }

.prose { margin-block-start: 4rem; font-family: Georgia, "Times New Roman", serif; font-size: var(--reading-size); line-height: var(--reading-leading); overflow-wrap: anywhere; }
.chapter { margin-block: 0 5rem; scroll-margin-block-start: 2rem; }
.prose :where(p, ul, ol, dl, blockquote, .table-scroll) { margin-block: 0 1.25em; }
.prose :where(h2, h3, h4, h5, h6) { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; text-wrap: pretty; }
.prose h2 { font-size: 1.5rem; margin-block: 2.5rem 1.5rem; }
.prose h3 { font-size: 1.25rem; margin-block: 2rem 1rem; }
.prose :where(h4, h5, h6) { font-size: var(--reading-size); margin-block: 1.5rem 1rem; }
.prose :where(ul, ol) { padding-inline-start: 1.5em; }
.prose blockquote { margin-inline: 0; padding-inline-start: 1.25rem; border-inline-start: 2px solid var(--line); }
.prose hr { margin-block: 2rem; border: 0; border-block-start: 1px solid var(--line); }
.prose .source-note { margin-block: 0.5rem 1.5rem; font-size: 1rem; }
.prose .note-ref { display: inline-block; min-width: 1.5rem; padding-inline: 0.125rem; }
.prose :target { scroll-margin-block-start: 2rem; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.prose table { border-collapse: collapse; min-width: 32rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: var(--action-size); line-height: 1.6; }
.prose :where(td, th) { text-align: start; vertical-align: top; padding: 0.75rem; border-block-end: 1px solid var(--line); }
.reader-end { margin-block-start: 3rem; }
.offline-page { max-width: var(--reader-width); }
.offline-page h1 { font-size: 1.5rem; font-weight: 500; line-height: 1.4; }
.offline-page p { margin-block: 1rem 2rem; color: var(--muted); line-height: 1.7; }
.offline-page a { display: inline-flex; align-items: center; min-height: var(--control-height); }
.skip-link { position: absolute; inset-inline-start: 1rem; inset-block-start: -10rem; padding: 0.75rem; background: var(--canvas); }
.skip-link:focus { inset-block-start: 1rem; }

@media (hover: hover) and (pointer: fine) {
  button:hover { background: var(--line); }
  .book-copy:hover h2 { text-decoration: underline; text-underline-offset: 0.2em; }
}
@media (max-width: 40rem) {
  :root { --page-gutter: 1.5rem; --page-top: 5rem; --book-gap: 5rem; --column-gap: 1.5rem; }
  .book { grid-template-columns: minmax(0, 1fr); gap: var(--copy-gap); }
  .book-actions { justify-self: start; }
  .reader { padding-block-start: max(1rem, env(safe-area-inset-top)); }
  .reader-header { margin-block-start: 2rem; }
  .reader-header h1 { font-size: 1.5rem; }
  .revision { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .revision-actions { gap: 1.25rem; }
  .prose { margin-block-start: 3rem; }
}
@media (forced-colors: active) {
  button { border: 1px solid ButtonText; }
  :where(a, button, summary, [tabindex]):focus-visible { outline-color: Highlight; }
}
@media print {
  .back-nav, .reader-header, .reader-disclosure, .reader-end, .skip-link { display: none; }
  .reader { width: 100%; padding: 0; }
  .prose { margin: 0; }
}
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }