:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #22231f;
  background: #e8e5de;
  --muted: #72736b;
  --paper: #fffefb;
  --line: #d3d0c7;
  --accent: #9d3c2d;
  --sidebar: #f3f0e9;
}

* { box-sizing: border-box; }
body { margin: 0; }

button,
.fileButton,
.toolbarLink {
  border: 1px solid transparent;
  border-radius: .35rem;
  background: var(--paper);
  color: inherit;
  padding: .6rem .85rem;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

button:hover,
.fileButton:hover,
.toolbarLink:hover { background: #f8f3e9; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible,
.fileButton:has(input:focus-visible),
.toolbarLink:focus-visible { outline: 3px solid #e7aa75; outline-offset: 2px; }

.toolbar {
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .7rem 1.15rem;
  background: #242521;
  color: #f7f4ec;
  border-bottom: 1px solid #11120f;
}

.brand { display: flex; align-items: center; gap: .7rem; font: 700 1.05rem/1 Georgia, serif; }
.brandMark {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-style: italic;
}
.toolbarActions { display: flex; gap: .55rem; }
.secondaryButton { border-color: #55564f; background: transparent; color: #f7f4ec; }
.toolbarLink { display: inline-flex; align-items: center; text-decoration: none; }
.fileButton { border-color: #b94c3a; background: var(--accent); color: #fff; }
.fileButton:hover { border-color: #923426; background: #7f2f24; }
.fileButton input { display: none; }

.startPage {
  min-height: calc(100vh - 4.25rem);
  padding: clamp(2rem, 6vw, 5rem) 1.25rem;
  background: #e8e5de;
}
.startPage[hidden], .reader[hidden] { display: none; }
.libraryPanel { width: min(58rem, 100%); margin: 0 auto; }
.libraryPanel h1 { margin: 0; font: 700 clamp(2rem, 5vw, 3.5rem)/1.05 Georgia, serif; }
.libraryPrivacy { max-width: 38rem; margin: .8rem 0 2rem; color: #62635c; line-height: 1.55; }
.localBookList { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .9rem; }
.localBookCard { display: grid; min-height: 10rem; align-content: space-between; gap: 1.2rem; padding: 1.1rem; border: 1px solid #c9c5ba; border-radius: .45rem; background: var(--paper); box-shadow: 0 2px 8px rgb(34 30 24 / 6%); }
.localBookCard h2 { margin: 0; font: 700 1.15rem/1.25 Georgia, serif; }
.localBookMeta { margin: .35rem 0 0; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.localBookOpen { justify-self: start; border-color: #b94c3a; background: var(--accent); color: #fff; }
.localBookOpen:hover { border-color: #923426; background: #7f2f24; }
.libraryEmpty { grid-column: 1 / -1; padding: 2rem; border: 1px dashed #b8b3a8; border-radius: .45rem; color: #62635c; text-align: center; }

.reader {
  height: calc(100vh - 4.25rem);
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) 1fr;
}

.sidebar {
  overflow-y: auto;
  padding: 1.5rem 1rem;
  border-right: 1px solid var(--line);
  background: var(--sidebar);
}

.bookMetadata { padding: 0 .55rem 1.5rem; border-bottom: 1px solid var(--line); }
.eyebrow { margin: 0 0 .5rem; color: var(--accent); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sidebar h1 { margin: 0; font: 700 1.35rem/1.25 Georgia, serif; }
.bookAuthor { min-height: 1.2em; margin: .55rem 0 0; color: var(--muted); font-size: .85rem; }
.chapterHeading { display: flex; justify-content: space-between; padding: 1.25rem .55rem .65rem; color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
#chapterCount { min-width: 1.6rem; padding: .1rem .35rem; border-radius: 1rem; background: #dfdbd1; text-align: center; }
#chapterList { display: grid; gap: .3rem; }

.chapterLink {
  width: 100%;
  border: 0;
  background: transparent;
  padding: .6rem .65rem;
  text-align: left;
  font-size: .86rem;
  font-weight: 500;
}

.chapterLink.active { background: #e5ddd0; color: #7d2f23; font-weight: 700; }

.page { min-width: 0; display: grid; grid-template-rows: auto 1fr; padding: .8rem 1.2rem 1.2rem; overflow: hidden; }
.pageControls { display: flex; min-height: 3.65rem; align-items: center; justify-content: center; gap: 1rem; }
.navButton { width: 2.15rem; height: 2.15rem; padding: 0; border: 1px solid #c6c2b9; border-radius: 50%; background: transparent; }
.readingStatus { min-width: min(24rem, 50vw); display: grid; text-align: center; }
.readingStatus strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 .94rem/1.3 Georgia, serif; }
.readingStatus span { color: var(--muted); font-size: .72rem; }
.paper { min-height: 0; overflow: hidden; border: 1px solid #cbc7be; border-radius: .2rem; background: var(--paper); box-shadow: 0 12px 35px rgb(53 48 39 / 10%); }

#chapterFrame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--paper);
}

.status { position: fixed; right: 1rem; bottom: 1rem; max-width: min(32rem, calc(100vw - 2rem)); overflow: hidden; padding: .55rem .75rem; border: 1px solid #cbc7be; border-radius: .3rem; background: rgb(255 254 251 / 92%); color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 4px 16px rgb(30 27 22 / 10%); }

.footnoteDialog {
  width: min(31rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid #c9c2b5;
  border-radius: .45rem;
  background: var(--paper);
  color: inherit;
  box-shadow: 0 24px 70px rgb(24 21 17 / 30%);
}

.footnoteDialog::backdrop { background: rgb(29 28 25 / 45%); backdrop-filter: blur(2px); }
.footnoteHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem .8rem; border-bottom: 1px solid var(--line); }
.footnoteHeader .eyebrow { margin-bottom: .25rem; }
.footnoteHeader h2 { margin: 0; font: 700 1.15rem/1.3 Georgia, serif; }
.dialogClose { width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 1.35rem; font-weight: 400; line-height: 1; }
.footnoteText { margin: 0; padding: 1.15rem 1.25rem 1.35rem; font: 1rem/1.6 Georgia, serif; }

.feedbackDialog { width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 1.5rem); padding: 0; border: 1px solid #aaa49a; border-radius: .45rem; background: var(--paper); color: inherit; box-shadow: 0 24px 70px rgb(24 21 17 / 30%); }
.feedbackDialog::backdrop { background: rgb(29 28 25 / 45%); }
.feedbackHeader { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem .8rem; border-bottom: 1px solid var(--line); }
.feedbackHeader .eyebrow { margin-bottom: .25rem; }
.feedbackHeader h2 { margin: 0; font: 700 1.15rem/1.3 Georgia, serif; }
.feedbackBody { display: grid; gap: .85rem; padding: 1rem 1.25rem 1.25rem; }
.feedbackPrivacy { margin: 0; color: #5e5b54; font-size: .78rem; line-height: 1.45; }
.feedbackField { display: grid; gap: .3rem; color: #4e4b45; font-size: .75rem; font-weight: 750; }
.feedbackField select,
.feedbackField textarea,
.feedbackOutput { width: 100%; border: 1px solid #c8c1b5; border-radius: .3rem; background: #fffefb; color: #292821; padding: .55rem .65rem; font: .85rem/1.45 Inter, ui-sans-serif, system-ui, sans-serif; }
.feedbackField textarea,
.feedbackOutput { resize: vertical; }
.feedbackTechnical { display: flex; align-items: flex-start; gap: .45rem; color: #5e5b54; font-size: .75rem; line-height: 1.4; }
.feedbackTechnical input { margin: .12rem 0 0; accent-color: var(--accent); }
.feedbackStatus { min-height: 1.1rem; margin: 0; color: #5e5b54; font-size: .75rem; }
.feedbackActions { display: flex; justify-content: flex-end; gap: .5rem; }
.feedbackPrimary { border-color: #b94c3a; background: var(--accent); color: #fff; }
.feedbackPrimary:hover { background: #843326; }

.wordPopup {
  position: fixed;
  z-index: 20;
  width: min(22rem, calc(100vw - 1rem));
  padding: .75rem .8rem .65rem;
  border: 1px solid #bdb6a9;
  border-radius: .35rem;
  background: var(--paper);
  color: #292821;
  box-shadow: 0 6px 20px rgb(34 30 24 / 18%);
  font: .9rem/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  overflow-wrap: anywhere;
}

.wordPopup[hidden] { display: none; }
.lookupLoading { color: var(--muted); font-size: .82rem; }
.lookupHeader { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .45rem .8rem; }
.lookupHeader > div { min-width: 0; flex: 1 1 auto; display: grid; gap: .08rem; }
.lookupHeader strong { overflow: hidden; color: #292821; font: 700 1.08rem/1.25 Georgia, serif; text-overflow: ellipsis; white-space: nowrap; }
.lookupLabel { display: block; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.lookupChoice { flex: 0 1 11rem; }
.lookupChoice select { width: 100%; min-height: 2rem; border: 1px solid #c8c1b5; border-radius: .3rem; background: #f8f5ee; color: #39362f; padding: .25rem 1.7rem .25rem .45rem; font: 650 .76rem/1.2 inherit; }
.lookupPartOfSpeech { flex: 0 0 auto; color: #39362f; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.lookupFormsSection { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding-top: .55rem; }
.compactModeToggle { display: inline-flex; align-items: center; gap: .2rem; color: #6d685f; cursor: pointer; font-size: .62rem; font-weight: 700; }
.compactModeToggle input { width: .75rem; height: .75rem; margin: 0; accent-color: #7d2f23; }
.lookupForms { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: .25rem; }
.grammarFormRow { display: flex; flex-wrap: wrap; gap: .2rem; }
.grammarForm { padding: .18rem .42rem; border: 1px solid #d5cec2; border-radius: .25rem; background: #faf8f2; color: #39362f; font-size: .72rem; font-weight: 700; }
.lookupGrammarDescriptors { margin-top: .3rem; color: #666158; font-size: .68rem; font-weight: 650; }
.grammarDescriptor { border-bottom: 1px dotted #8a847a; }
.compactGrammarKey .hasGrammarTooltip { position: relative; cursor: help; outline-offset: 2px; }
.compactGrammarKey .hasGrammarTooltip::after {
  position: absolute;
  z-index: 30;
  bottom: calc(100% + .4rem);
  left: 50%;
  width: max-content;
  max-width: min(16rem, calc(100vw - 2rem));
  padding: .35rem .45rem;
  border: 1px solid #aaa296;
  border-radius: .25rem;
  background: #292821;
  box-shadow: 0 3px 10px rgb(34 30 24 / 18%);
  color: #fffdf8;
  content: attr(data-grammar-tooltip);
  font: 600 .68rem/1.35 Inter, ui-sans-serif, system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  text-align: left;
  transform: translateX(-50%) translateY(.15rem);
  transition: opacity 100ms ease, transform 100ms ease;
  white-space: pre-line;
}
.compactGrammarKey .hasGrammarTooltip:hover::after,
.compactGrammarKey .hasGrammarTooltip:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.compactGrammarKey .lookupFormsSection { padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.lookupBaseFormAside { flex: 0 0 auto; max-width: 40%; text-align: right; }
.lookupBaseFormAside #lookupBaseForm { display: block; overflow-wrap: anywhere; color: #555149; font: 700 .82rem/1.3 Georgia, serif; }
.lookupGrammarGuide { padding: .55rem 0 .65rem; border-bottom: 1px solid var(--line); }
.lookupGrammarHelp { display: flex; flex-wrap: wrap; gap: .25rem .4rem; margin-top: .25rem; }
.grammarNote { display: inline-flex; align-items: baseline; gap: .3rem; padding: .18rem .4rem; border-radius: .25rem; background: #f1ede4; color: #555149; font-size: .7rem; }
.grammarNote strong { color: #292821; font-size: .72rem; }
.grammarNote span::before { content: "= "; color: #8a847a; }
.lookupSection { padding-top: .6rem; }
.lookupValues p { margin: .15rem 0 0; color: #292821; font: .9rem/1.4 Georgia, serif; }
.lookupSource { display: inline-block; margin-top: .65rem; color: #7d2f23; font-size: .68rem; font-weight: 700; text-decoration: none; }
.lookupSource:hover { text-decoration: underline; }
.visuallyHidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 700px) {
  .toolbar { gap: .35rem; padding-inline: .6rem; }
  .brand { display: none; }
  .toolbarActions { width: 100%; justify-content: flex-end; gap: .25rem; }
  .toolbarActions button,
  .toolbarActions .toolbarLink,
  .toolbarActions .fileButton { padding: .5rem .55rem; font-size: .78rem; }
  .reader { height: auto; min-height: calc(100vh - 4.25rem); grid-template-columns: 1fr; }
  .sidebar { max-height: 15rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .page { min-height: 70vh; }
  .status { display: none; }
}